:root {
  --bg: #101418; --panel: #1a2027; --ink: #e8eef4; --dim: #8a97a3;
  --accent: #4dd0a6; --hot: #e06c60; --chip: #232b34;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, sans-serif;
  display: flex; flex-direction: column; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

header { display: flex; align-items: center; gap: .6rem;
         padding: .5rem .8rem; }
.brand { font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.chips { display: flex; gap: .4rem; margin-left: auto; }
.chip  { background: var(--chip); color: var(--dim); border-radius: .6rem;
         padding: .15rem .55rem; font-size: .75rem; }
#btn-settings { background: none; border: 0; color: var(--dim);
                font-size: 1.2rem; }

main { flex: 1; display: flex; flex-direction: column; gap: .5rem;
       padding: 0 .8rem; min-height: 0; }
.pane { flex: 1; background: var(--panel); border-radius: 1rem;
        padding: .6rem .9rem; display: flex; flex-direction: column;
        min-height: 0; }
.pane h2 { margin: 0 0 .3rem; font-size: .8rem; color: var(--dim);
           text-transform: uppercase; letter-spacing: .1em; }
.pane .lines { overflow-y: auto; flex: 1; }
.pane p { margin: .2rem 0; }
.pane p.partial { color: var(--accent); }
.pane p.error   { color: var(--hot); font-size: .85rem; }

#btn-flip { background: var(--chip); color: var(--ink); border: 0;
            border-radius: .8rem; padding: .45rem; font-size: 1rem;
            display: flex; flex-direction: column; align-items: center;
            gap: .1rem; }
#btn-flip small { color: var(--dim); font-size: .68rem; }

footer { padding: .7rem .8rem 1rem; display: flex;
         flex-direction: column; align-items: center; gap: .4rem; }
#btn-talk {
  width: min(70vw, 20rem); padding: 1.2rem; border-radius: 999px;
  border: 0; background: var(--accent); color: #06251b;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .08em;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
#btn-talk.listening { background: var(--hot); color: #2b0d0a;
                      animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.04); } }
#state-line { color: var(--dim); font-size: .8rem; min-height: 1.2em; }

dialog { background: var(--panel); color: var(--ink); border: 0;
         border-radius: 1rem; padding: 1.2rem; width: min(90vw, 22rem); }
dialog::backdrop { background: #000a; }
dialog h2 { margin-top: 0; font-size: 1rem; }
dialog label { display: block; margin: .8rem 0; font-size: .9rem;
               color: var(--dim); }
dialog select { width: 100%; margin-top: .25rem; padding: .45rem;
                background: var(--chip); color: var(--ink); border: 0;
                border-radius: .5rem; }
dialog button { margin-top: .6rem; padding: .5rem 1rem; border: 0;
                border-radius: .6rem; background: var(--accent);
                color: #06251b; font-weight: 600; }