/* Chat + account — flat, fast, no blur. Builds on theme.css */

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.app__bar { display: flex; align-items: center; gap: .6rem; padding: .75rem var(--gutter); border-bottom: 1px solid var(--hairline); background: var(--surface); }
.app__bar .brand { font-size: 1.3rem; }

.credit-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em; padding: .4rem .7rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--hairline); color: var(--text); white-space: nowrap; }
.credit-badge .icon { width: 14px; height: 14px; color: var(--accent); }
.credit-badge.is-low { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--surface); color: var(--text-sub); cursor: pointer; transition: color .15s, border-color .15s; }
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.iconbtn .icon { width: 18px; height: 18px; }

/* Messages ------------------------------------------------------------------ */
.messages { flex: 1; overflow-y: auto; padding: clamp(1rem,4vw,2rem) var(--gutter); display: flex; flex-direction: column; gap: 1rem; max-width: 820px; width: 100%; margin-inline: auto; }

.bubble { max-width: 84%; display: flex; gap: .65rem; }
.bubble__avatar { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.bubble__avatar .icon { width: 15px; height: 15px; }
.bubble__col { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bubble__who { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.bubble__body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; padding: .75rem .95rem; border-radius: 12px; }

.bubble--user { align-self: flex-end; flex-direction: row-reverse; }
.bubble--user .bubble__avatar { background: var(--accent); color: #fff; }
.bubble--user .bubble__col { align-items: flex-end; }
.bubble--user .bubble__body { background: var(--accent); color: #fff; }

.bubble--assistant .bubble__avatar { background: var(--surface-2); border: 1px solid var(--hairline); color: var(--accent); }
.bubble--assistant .bubble__body { background: var(--surface); border: 1px solid var(--hairline); color: var(--text); }

.bubble--system { align-self: center; max-width: 90%; }
.bubble--system .bubble__body { background: transparent; border: 1px dashed var(--hairline); font-family: var(--font-mono); font-size: .8rem; color: var(--text-sub); }
.bubble--error .bubble__body { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); }

/* typing dots (small, localized) */
.typing { display: inline-flex; gap: .3rem; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: blink 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.empty-state { margin: auto; text-align: center; color: var(--text-sub); max-width: 38ch; padding: 2rem; }
.empty-state .orb-badge { width: 72px; height: 72px; margin: 0 auto 1.1rem; border-radius: 18px; background: var(--accent); display: grid; place-items: center; color: #fff; }
.empty-state .orb-badge .icon { width: 34px; height: 34px; }
.empty-state h2 { font-size: clamp(2rem, 6vw, 2.8rem); color: var(--text); margin-bottom: .5rem; }

/* Composer ------------------------------------------------------------------ */
.composer { border-top: 1px solid var(--hairline); background: var(--surface); padding: .8rem var(--gutter) 1rem; }
.composer__inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: .5rem; }
.composer__row { display: flex; gap: .55rem; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 2.9rem; max-height: 10rem; padding: .75rem .95rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--text); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; transition: border-color .15s; }
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer .btn-send { width: 46px; height: 46px; padding: 0; border-radius: 12px; flex: none; }
.composer .btn-send .icon { width: 20px; height: 20px; }

.composer__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; color: var(--text-sub); }
.model-select { display: inline-flex; align-items: center; gap: .45rem; }
.composer select { font-family: var(--font-mono); font-size: .72rem; padding: .4rem .55rem; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-2); color: var(--text); }
.cost-hint { display: inline-flex; align-items: center; gap: .35rem; }
.cost-hint .icon { width: 13px; height: 13px; color: var(--accent); }

/* Credit banner ------------------------------------------------------------- */
.credit-banner {
  max-width: 820px; width: calc(100% - 2 * var(--gutter)); margin: 0 auto;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent);
  border-radius: 12px; padding: .7rem .9rem; font-size: .85rem; line-height: 1.45;
  margin-bottom: .6rem;
}

/* History panel ------------------------------------------------------------- */
.history-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); z-index: 20;
  background: var(--surface); border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow); transform: translateX(105%); transition: transform .25s var(--ease);
  display: flex; flex-direction: column; padding: 1rem; gap: .5rem;
}
.history-panel.is-open { transform: none; }
.history-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.chat-row { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-2); }
.chat-row.is-active { border-color: var(--accent); }
.chat-row__open { flex: 1; text-align: left; background: none; border: none; color: var(--text); cursor: pointer; padding: .6rem .7rem; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row__open:hover { color: var(--accent); }
.chat-row__del { width: 32px; height: 32px; flex: none; margin-right: .25rem; }
.chat-row__del .icon { width: 15px; height: 15px; }
.history-panel__foot { display: flex; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--hairline); }
.history-panel__foot .btn { flex: 1; padding: .6rem; font-size: .85rem; }

/* Account ------------------------------------------------------------------- */
.account-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 620px) { .account-grid { grid-template-columns: 1fr 1fr; } }
.kv { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--hairline); }
.kv dt { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-sub); }
.kv dd { margin: 0; font-size: 1.05rem; color: var(--text); word-break: break-all; }
.keyline { font-family: var(--font-mono); font-size: .85rem; }