/* TG-DESK Mini App — shell tokens and the furniture every screen shares.
   Colour comes from Telegram's theme variables; everything this desk needs on
   top of them (the translation rails, the direction guard) is defined here for
   both schemes, because Telegram gives no variable for "this text is dangerous".
   Inside Telegram the client sets --tg-theme-*; outside it the fallbacks follow
   the operating system, and <html data-theme> wins over both. */

:root {
  color-scheme: light;

  --bg:        var(--tg-theme-bg-color, #ffffff);
  --bg-under:  var(--tg-theme-secondary-bg-color, #eef1f4);
  --section:   var(--tg-theme-section-bg-color, #ffffff);
  --header:    var(--tg-theme-header-bg-color, #ffffff);
  --text:      var(--tg-theme-text-color, #14171c);
  --hint:      var(--tg-theme-hint-color, #78838f);
  --subtitle:  var(--tg-theme-subtitle-text-color, #5d6874);
  --link:      var(--tg-theme-link-color, #2f6fd0);
  --btn:       var(--tg-theme-button-color, #2f6fd0);
  --btn-text:  var(--tg-theme-button-text-color, #ffffff);
  --destructive: var(--tg-theme-destructive-text-color, #b3261e);

  --sep: rgba(16, 22, 31, .12);
  --sep-strong: rgba(16, 22, 31, .22);
  --tint: rgba(47, 111, 208, .09);

  /* the desk's own meanings */
  --rail-in:  #5c7f9f;   /* what the client wrote */
  --rail-out: #2c7a62;   /* what we sent, checked */
  --guard:    #b3261e;   /* the direction guard */
  --guard-bg: #fdece9;
  --guard-line: rgba(179, 38, 30, .40);
  --warn:     #8a5a00;   /* not translated */
  --warn-bg:  #fdf3e2;
  --ok:       #2c7a62;

  --radius: 12px;
  --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", var(--font);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:       var(--tg-theme-bg-color, #17212b);
    --bg-under: var(--tg-theme-secondary-bg-color, #0e1621);
    --section:  var(--tg-theme-section-bg-color, #17212b);
    --header:   var(--tg-theme-header-bg-color, #17212b);
    --text:     var(--tg-theme-text-color, #f1f4f7);
    --hint:     var(--tg-theme-hint-color, #8b98a6);
    --subtitle: var(--tg-theme-subtitle-text-color, #9fadbb);
    --link:     var(--tg-theme-link-color, #6ab3f3);
    --btn:      var(--tg-theme-button-color, #4b8fe3);
    --sep: rgba(255, 255, 255, .14);
    --sep-strong: rgba(255, 255, 255, .26);
    --tint: rgba(107, 179, 243, .12);
    --rail-in:  #7ba5c8;
    --rail-out: #4fbf9b;
    --guard:    #ff8275;
    --guard-bg: #38150f;
    --guard-line: rgba(255, 130, 117, .45);
    --warn:     #e3a63f;
    --warn-bg:  #2e230d;
    --ok:       #4fbf9b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:       var(--tg-theme-bg-color, #17212b);
  --bg-under: var(--tg-theme-secondary-bg-color, #0e1621);
  --section:  var(--tg-theme-section-bg-color, #17212b);
  --header:   var(--tg-theme-header-bg-color, #17212b);
  --text:     var(--tg-theme-text-color, #f1f4f7);
  --hint:     var(--tg-theme-hint-color, #8b98a6);
  --subtitle: var(--tg-theme-subtitle-text-color, #9fadbb);
  --link:     var(--tg-theme-link-color, #6ab3f3);
  --btn:      var(--tg-theme-button-color, #4b8fe3);
  --sep: rgba(255, 255, 255, .14);
  --sep-strong: rgba(255, 255, 255, .26);
  --tint: rgba(107, 179, 243, .12);
  --rail-in:  #7ba5c8;
  --rail-out: #4fbf9b;
  --guard:    #ff8275;
  --guard-bg: #38150f;
  --guard-line: rgba(255, 130, 117, .45);
  --warn:     #e3a63f;
  --warn-bg:  #2e230d;
  --ok:       #4fbf9b;
}

* { box-sizing: border-box; }

/* `hidden` must win over any display this sheet gives an element. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg);
}

.screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* The document never scrolls (html/body are locked for Telegram's webview), so THIS is the scroll container for
     every screen that is taller than the space above the bottom bar. A screen that manages its own scrolling
     (the chat) simply never overflows it. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------- bottom nav */
.nav {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px 8px calc(6px + var(--safe-bottom));
  border-top: 1px solid var(--sep);
  background: var(--header);
}

.nav-item {
  flex: 1 1 0;
  min-height: var(--tap);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hint);
  font: 500 14px/1 var(--font);
  cursor: pointer;
}

.nav-item[aria-current="page"] {
  background: var(--tint);
  color: var(--link);
}

/* ---------------------------------------------------------------- primitives */
.btn {
  min-height: var(--tap);
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--btn);
  color: var(--btn-text);
  font: 600 15px/1 var(--font);
  cursor: pointer;
}

.btn[disabled] { opacity: .45; cursor: default; }

.btn-quiet {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--sep-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: 500 13.5px/1 var(--font);
  cursor: pointer;
}

.btn-text {
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--link);
  font: 500 12.5px/1.2 var(--font);
  cursor: pointer;
}

.btn:focus-visible,
.btn-quiet:focus-visible,
.btn-text:focus-visible,
.nav-item:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* The option list is drawn by the browser: with a transparent <select> it falls back to a WHITE sheet while the
   text keeps the theme's light colour — unreadable in dark mode. Options get their own solid colours. */
select option,
select optgroup {
  background-color: var(--section);
  color: var(--text);
}

select {
  min-height: 34px;
  max-width: 100%;
  padding: 0 24px 0 9px;
  border: 1px solid var(--sep-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: 500 13px/1 var(--font);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px top 50%, right 8px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ---------------------------------------------------------------- shell states */
.panel {
  margin: auto;
  padding: 24px 20px calc(24px + var(--safe-bottom));
  max-width: 420px;
  text-align: center;
}

.panel h1 {
  margin: 0 0 8px;
  font: 600 18px/1.3 var(--font);
}

.panel p {
  margin: 0 0 16px;
  color: var(--hint);
  font-size: 14px;
}

.panel .detail {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--hint);
  word-break: break-word;
}

.loading {
  margin: auto;
  color: var(--hint);
  font-size: 14px;
}

/* ---------------------------------------------------------------- sheet */
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .40);
}

.sheet {
  width: 100%;
  max-width: 460px;
  max-height: 80dvh;
  overflow-y: auto;
  padding: 14px 14px calc(14px + var(--safe-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  animation: sheet-rise .16s ease-out;
}

@keyframes sheet-rise { from { transform: translateY(14px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
}

.sheet h2 {
  margin: 2px 0 12px;
  font: 600 16px/1.3 var(--font);
}

.sheet-row {
  display: flex;
  width: 100%;
  min-height: var(--tap);
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  margin-bottom: 4px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-under);
  color: var(--text);
  font: 500 15px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
}

.sheet-row[aria-pressed="true"] { color: var(--link); }

.sheet textarea,
.sheet input[type="date"] {
  width: 100%;
  min-height: var(--tap);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--sep-strong);
  border-radius: 10px;
  background: var(--bg-under);
  color: var(--text);
  font: 400 15px/1.4 var(--font);
}

.sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.sheet-actions .btn { flex: 1 1 auto; }