/* Telegram theme colours only (light + dark work automatically). Big tap targets, >= 17px text. */
:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #888);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --section: var(--tg-theme-secondary-bg-color, var(--tg-theme-section-bg-color, #f2f2f5));
  --gap: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       text-align: left; -webkit-tap-highlight-color: transparent; }
body.big { font-size: 20px; }
button { font: inherit; color: inherit; background: var(--section); border: 0; border-radius: 14px;
         min-height: 52px; padding: 10px 14px; cursor: pointer; }
button:disabled { opacity: .45; }
button.primary { background: var(--btn); color: var(--btn-text); width: 100%; min-height: 56px; font-weight: 600; }
button.link { background: none; min-height: 40px; color: var(--btn); padding: 6px 0; }
.hint { color: var(--hint); }
.line { margin: 8px 0; }
.title { font-weight: 600; margin: 4px 0 8px; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.row-end { display: flex; justify-content: flex-end; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.row2 > :only-child { grid-column: span 2; }

#hdr { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
       padding: 10px var(--gap); background: var(--bg); }
.pill { min-height: 36px; border-radius: 18px; padding: 6px 12px; font-size: 15px; }
#main { padding: 0 var(--gap) 96px; }
.tab[hidden] { display: none; }

#tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr);
        background: var(--section); padding-bottom: env(safe-area-inset-bottom); }
#tabs button { background: none; border-radius: 0; display: flex; flex-direction: column; align-items: center;
               font-size: 22px; min-height: 60px; padding: 6px 0; }
#tabs button span { font-size: 13px; color: var(--hint); }
#tabs button.on span { color: var(--btn); font-weight: 600; }

/* chat */
#msgs { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; background: var(--section); white-space: pre-wrap;
       word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--btn); color: var(--btn-text); }
.msg.plan .sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hint); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips button { min-height: 56px; }
.dots::after { content: " …"; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
#chatform { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 4;
            display: flex; gap: 8px; padding: 8px var(--gap); background: var(--bg); }
#chatin { flex: 1; font: inherit; color: var(--text); background: var(--section); border: 0; border-radius: 14px;
          padding: 12px 14px; min-height: 52px; }
.send { min-width: 56px; background: var(--btn); color: var(--btn-text); }
#tab-chat { padding-bottom: 72px; }

/* tiles */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 12px 0; }
.tile { position: relative; padding: 0; min-height: 64px; overflow: hidden; display: flex; flex-direction: column;
        text-align: left; }
.tile img, .tile video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--section); }
.tile .cap { padding: 10px 12px; }
.tile.sel { outline: 3px solid var(--btn); }
.tile .badge { position: absolute; top: 8px; left: 8px; background: var(--bg); border-radius: 10px; padding: 2px 8px;
               font-size: 14px; }
.seg { display: grid; grid-auto-flow: column; gap: 8px; margin: 8px 0; }
.seg button.on { background: var(--btn); color: var(--btn-text); }

/* sliders */
.sl { margin: 14px 0; }
.sl .lab { display: flex; justify-content: space-between; }
.sl input { width: 100%; height: 40px; accent-color: var(--btn); }
#more summary { min-height: 48px; padding: 12px 0; color: var(--btn); cursor: pointer; list-style: none; }
.chiprow { margin: 8px 0 14px; }
.chiprow .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.chiprow button.on { background: var(--btn); color: var(--btn-text); }

/* sheets */
.sheet { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; }
.sheet[hidden], #viewer[hidden], #toast[hidden] { display: none; }
.sheet-body { width: 100%; background: var(--bg); border-radius: 20px 20px 0 0; padding: 20px var(--gap)
              calc(20px + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
.bar { height: 10px; border-radius: 5px; background: var(--section); overflow: hidden; margin: 12px 0; }
.bar i { display: block; height: 100%; width: 0; background: var(--btn); transition: width .4s; }
.prompt { font-size: 15px; color: var(--hint); white-space: pre-wrap; }
.fallback { margin-top: 8px; }
body.tg-main .fallback { display: none; }

#viewer { position: fixed; inset: 0; z-index: 9; background: var(--bg); padding: 12px var(--gap)
          calc(16px + env(safe-area-inset-bottom)); overflow: auto; }
#v-media img, #v-media video { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 14px; background: #000; }

#toast { position: fixed; left: var(--gap); right: var(--gap); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 12;
         display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--text);
         color: var(--bg); border-radius: 14px; padding: 10px 14px; }
#toast button { background: var(--bg); color: var(--text); min-height: 44px; }
.tile.small img { aspect-ratio: 4 / 3; }
.grid .wide { grid-column: span 2; }