:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #888);
  --link: var(--tg-theme-link-color, #2481cc);
  --button-bg: var(--tg-theme-button-color, #2481cc);
  --button-fg: var(--tg-theme-button-text-color, #fff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f1f1f1);
  --section-sep: var(--tg-theme-section-separator-color, #d1d1d1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.45; }
body { display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }

#topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--section-sep); background: var(--secondary-bg); }
#modelpicker { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--hint); }
#modelpicker select { background: var(--bg); color: var(--text); border: 1px solid var(--section-sep); border-radius: 6px; padding: 4px 6px; font-size: 13px; }
#costmeter { font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }

#messages { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--button-bg); color: var(--button-fg); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--secondary-bg); color: var(--text); border-bottom-left-radius: 4px; }
.msg.bot pre { background: rgba(0,0,0,.08); padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 13px; }
.msg.bot code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
.msg.bot p:first-child { margin-top: 0; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg.thinking { font-style: italic; color: var(--hint); }

#composer { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--section-sep); background: var(--secondary-bg); align-items: flex-end; }
#input { flex: 1; resize: none; max-height: 30vh; padding: 10px 12px; border: 1px solid var(--section-sep); border-radius: 18px; background: var(--bg); color: var(--text); font: inherit; outline: none; }
#input:focus { border-color: var(--link); }
#send { background: var(--button-bg); color: var(--button-fg); border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; flex-shrink: 0; }
#send:disabled { opacity: 0.5; cursor: not-allowed; }

#status { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 12px; font-size: 12px; background: rgba(0,0,0,.7); color: #fff; pointer-events: none; opacity: 0; transition: opacity .2s; }
#status.show { opacity: 1; }