/*
 * James — "Native".
 *
 * Material 3 with a tonal sage palette, so the installed app behaves like any
 * other Android app: a top app bar, bottom navigation (a rail on wide
 * screens), chat bubbles, and a tonal card for whatever is waiting on Daniel.
 * The character is left to what the agents say. Each speaker has a container
 * colour and an initial: Evelyn blue, Amelia rose, James the app's own sage.
 */

:root {
  --surface: #F5FAF6;
  --surface-low: #EFF5F0;
  --container: #E9F0EB;
  --container-high: #DEE7E1;
  --on-surface: #171D1A;
  --on-variant: #404944;
  --outline: #707973;
  --outline-variant: #BFC9C2;
  --primary: #2B6A50;
  --on-primary: #FFFFFF;
  --primary-c: #B2F0D1;
  --on-primary-c: #002115;
  --error: #BA1A1A;
  --error-c: #FFDAD6;
  --on-error-c: #410002;
  --inverse: #2C322E;
  --on-inverse: #ECF2ED;
  /* speakers: --x is the name and initial, --x-c the bubble or avatar behind it */
  --james: #2B6A50;
  --james-c: #CFE8DA;
  --daniel: #FFFFFF;
  --daniel-c: #2B6A50;
  --evelyn: #2F4B9C;
  --evelyn-c: #DCE1FF;
  --amelia: #8E2F62;
  --amelia-c: #FFD8E7;
  --extra-1: #1F4D55;
  --extra-1-c: #CDE7EC;
  --extra-2: #6B4600;
  --extra-2-c: #FFDDB3;
  --extra-3: #5B3FA3;
  --extra-3-c: #EADDFF;
  --font: 'Roboto Flex', Roboto, system-ui, sans-serif;
  --nav-h: 5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0F1512;
    --surface-low: #171D1A;
    --container: #1B211E;
    --container-high: #252B28;
    --on-surface: #DEE4DF;
    --on-variant: #BFC9C2;
    --outline: #89938C;
    --outline-variant: #404944;
    --primary: #97D5B6;
    --on-primary: #003825;
    --primary-c: #0F5139;
    --on-primary-c: #B2F0D1;
    --error: #FFB4AB;
    --error-c: #93000A;
    --on-error-c: #FFDAD6;
    --inverse: #DEE4DF;
    --on-inverse: #2C322E;
    --james: #B2F0D1;
    --james-c: #1F4D3B;
    --daniel: #003825;
    --daniel-c: #97D5B6;
    --evelyn: #DCE1FF;
    --evelyn-c: #2A407F;
    --amelia: #FFD8E7;
    --amelia-c: #6C1C48;
    --extra-1: #CDE7EC;
    --extra-1-c: #1F4D55;
    --extra-2: #FFDDB3;
    --extra-2-c: #5A3C00;
    --extra-3: #EADDFF;
    --extra-3-c: #4A3290;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font: 400 16px/1.5 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
a { color: var(--primary); }
button, input, textarea, select { font: inherit; color: inherit; }
svg.i { width: 24px; height: 24px; flex: none; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ frame: top bar, content, navigation */

.app {
  display: grid; height: 100dvh;
  grid-template: 'bar' auto 'main' 1fr 'nav' auto / minmax(0, 1fr);
}
.bar {
  grid-area: bar; display: flex; align-items: center; gap: 0.5rem;
  padding: max(env(safe-area-inset-top), 0.5rem) 0.5rem 0.25rem 1rem; min-height: 4rem;
}
.bar h1 { flex: 1; margin: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.3; }
.bar .actions { display: flex; align-items: center; gap: 0.25rem; }
.crew { display: flex; padding-right: 0.5rem; }
.crew .avatar { width: 28px; height: 28px; font-size: 0.75rem; margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }

main { grid-area: main; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
main:focus { outline: none; }

.nav {
  grid-area: nav; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--container); padding: 0.75rem 0 max(env(safe-area-inset-bottom), 1rem);
}
.nav a {
  display: grid; justify-items: center; gap: 0.25rem; text-decoration: none;
  color: var(--on-variant); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em;
}
.nav a .pill { width: 4rem; height: 2rem; border-radius: 1rem; display: grid; place-items: center; transition: background-color 0.2s; }
.nav a[aria-current="page"] { color: var(--on-surface); font-weight: 700; }
.nav a[aria-current="page"] .pill { background: var(--primary-c); color: var(--on-primary-c); }
.nav a:hover .pill { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.nav a[aria-current="page"]:hover .pill { background: var(--primary-c); }

/* Wide screens: the same four destinations as a rail on the left. */
@media (min-width: 52rem) {
  .app { grid-template: 'nav bar' auto 'nav main' 1fr / 5.5rem minmax(0, 1fr); }
  .nav { grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: start; gap: 0.75rem; padding: 1.25rem 0; background: var(--surface-low); }
  .nav::before { content: ''; height: 2.5rem; background: url(icons/icon.svg) center / 40px no-repeat; margin-bottom: 1rem; }
  main > * { max-width: 52rem; }
  .bar { max-width: 53rem; }
}

.page { padding: 0.5rem 1rem 3rem; display: grid; gap: 1rem; align-content: start; }
.page > p { margin: 0; }
.lead { color: var(--on-variant); max-width: 40rem; }
.label { font-size: 0.875rem; font-weight: 500; color: var(--primary); margin: 0.75rem 0 -0.25rem 0.25rem; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------ shared parts */

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.875rem; font-weight: 700;
  background: var(--cc, var(--container-high)); color: var(--c, var(--on-variant));
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25;
  min-height: 2.5rem; padding: 0.5rem 1.25rem; border-radius: 1.25rem; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--outline); background: transparent; color: var(--primary);
}
.btn:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: color-mix(in srgb, var(--on-primary) 10%, var(--primary)); }
.btn.tonal { background: var(--primary-c); border-color: transparent; color: var(--on-primary-c); }
.btn.tonal:hover { background: color-mix(in srgb, var(--on-primary-c) 10%, var(--primary-c)); }
.btn.danger { color: var(--error); }
.btn:disabled { opacity: 0.38; cursor: default; }
.icon-btn {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: transparent; color: var(--on-variant);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.icon-btn:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.linkish { border: 0; background: none; padding: 0; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em;
  padding: 0.25rem 0.625rem; border-radius: 0.5rem; background: var(--james-c); color: var(--james);
}
.chip.warn { background: var(--error-c); color: var(--on-error-c); }
.chip.off { background: var(--container-high); color: var(--on-variant); }
.chip button { border: 0; background: none; cursor: pointer; padding: 0 0 0 0.25rem; color: inherit; font-size: 1rem; line-height: 1; }

.card { background: var(--container); border-radius: 1rem; padding: 1rem; }
.card > p { margin: 0; }
.card.tinted { background: var(--cc); color: var(--on-surface); }
.card.tinted .over { color: var(--c); }
.card.warn { background: var(--error-c); color: var(--on-error-c); }
.card.ok { background: var(--james-c); }
.over { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.125rem; }
.card ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.card .actions-row { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ talk */

.talk { display: flex; flex-direction: column; height: 100%; }
.waiting { flex: none; padding: 0 0.75rem 0.5rem; }
.waiting:empty { display: none; }
.thread { flex: 1; overflow-y: auto; padding: 0.75rem 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.msg { display: flex; gap: 0.5rem; align-items: flex-end; max-width: min(88%, 40rem); }
.msg .col { display: grid; gap: 0.25rem; min-width: 0; }
.bubble {
  background: var(--container); padding: 0.5rem 0.875rem; border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45;
}
.bubble .who { display: block; font-size: 0.75rem; font-weight: 700; color: var(--c); letter-spacing: 0.01em; margin-bottom: 0.0625rem; white-space: normal; }
.bubble strong { font-weight: 600; }
.msg .when { font-size: 0.6875rem; color: var(--on-variant); padding: 0 0.5rem; }
.msg .avatar { margin-bottom: 1.25rem; }
.msg.daniel { align-self: flex-end; }
.msg.daniel .bubble { background: var(--daniel-c); color: var(--daniel); border-radius: 1.25rem 1.25rem 0.25rem 1.25rem; }
.msg.daniel .bubble a { color: inherit; }
.msg.daniel .when { text-align: right; }
.msg.from-agent .bubble { background: color-mix(in srgb, var(--cc) 55%, var(--container)); }
/* A run of lines from one speaker: one avatar, one name, tighter spacing. */
.msg.same { margin-top: -0.5rem; }
.msg.same .avatar { visibility: hidden; }
.msg.same .who { display: none; }
.msg.same:not(.daniel) .bubble { border-top-left-radius: 0.25rem; }
.msg.daniel.same .bubble { border-top-right-radius: 0.25rem; }
.msg.alert .bubble { background: var(--error-c); color: var(--on-error-c); }
.msg.alert .bubble .who { color: inherit; }
.msg.offer .bubble { background: var(--james-c); }
.msg .actions-row { margin: 0.5rem 0 0.125rem; }
.voice-note { display: block; width: 100%; min-width: 14rem; max-width: 20rem; height: 2.5rem; margin: 0.25rem 0; }
.files { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.8125rem; white-space: normal; }
.files a { color: inherit; }

.divider { align-self: center; font-size: 0.75rem; font-weight: 500; color: var(--on-variant); background: var(--container); padding: 0.25rem 0.75rem; border-radius: 1rem; margin: 0.5rem 0; }

.working { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--on-variant); }
.working .dots { display: inline-flex; gap: 3px; padding: 0.75rem 0.875rem; border-radius: 1.25rem 1.25rem 1.25rem 0.25rem; background: var(--container); }
.working .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--on-variant)); animation: bounce 1.2s ease-in-out infinite; }
.working .dots i:nth-child(2) { animation-delay: 0.15s; }
.working .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.empty-talk { margin: auto 0; padding: 1rem 0.5rem; max-width: 30rem; align-self: center; text-align: center; color: var(--on-variant); display: grid; gap: 0.5rem; justify-items: center; }
.empty-talk img { width: 64px; height: 64px; }
.empty-talk p { margin: 0; }

/* ------------------------------------------------------------------ composer */

.composer { flex: none; padding: 0.25rem 0.75rem 0.75rem; display: grid; gap: 0.375rem; }
.composer .pending { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.composer .pending:empty { display: none; }
.composer .row { display: flex; align-items: flex-end; gap: 0.5rem; }
.composer .field { flex: 1; display: flex; align-items: flex-end; background: var(--container-high); border-radius: 1.5rem; min-width: 0; }
.composer .field .icon-btn { width: 2.75rem; height: 2.75rem; }
.composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 12rem; min-height: 2.75rem; border: 0; background: transparent;
  padding: 0.625rem 1rem 0.625rem 0; font-size: 1rem; line-height: 1.5;
}
.composer textarea:focus { outline: none; }
.composer .field:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
.composer .go {
  width: 3.5rem; height: 3.5rem; border-radius: 1rem; border: 0; cursor: pointer; flex: none;
  display: grid; place-items: center; background: var(--primary-c); color: var(--on-primary-c);
}
.composer .go.send { background: var(--primary); color: var(--on-primary); }
.composer .go.recording { background: var(--error); color: var(--surface); }
.composer .go:disabled { opacity: 0.38; cursor: default; }

/* ------------------------------------------------------------------ team */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }
.stats .card { background: var(--container-high); }
.stats .card:first-child { background: var(--primary-c); color: var(--on-primary-c); }
.stats strong { display: block; font-size: 1.75rem; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stats span { font-size: 0.8125rem; }

.agents { display: grid; gap: 2px; }
.agent { background: var(--container); border-radius: 0.25rem; }
.agent:first-child { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.agent:last-child { border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.agent > summary {
  list-style: none; cursor: pointer; padding: 0.875rem 1rem;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center;
}
.agent > summary::-webkit-details-marker { display: none; }
.agent > summary .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.agent > summary h2 { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.agent > summary p { margin: 0; font-size: 0.875rem; color: var(--on-variant); }
.agent[open] > summary { border-bottom: 1px solid var(--outline-variant); }
.agent .body { padding: 1rem 1rem 1.25rem 4.5rem; display: grid; gap: 0.75rem; font-size: 0.9375rem; }
.agent .body p { margin: 0; }
.agent .role { color: var(--on-surface); }
.facts { display: grid; gap: 0.25rem; color: var(--on-variant); font-size: 0.875rem; }
.facts .bad { color: var(--error); }
@media (max-width: 34rem) { .agent .body { padding-left: 1rem; } }

details.tools > summary, details.edit > summary { cursor: pointer; color: var(--primary); font-weight: 500; font-size: 0.875rem; padding: 0.25rem 0; }
.domain { margin-top: 0.75rem; }
.domain h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.125rem; }
.domain .sum { color: var(--on-variant); margin: 0 0 0.375rem; font-size: 0.875rem; }
.domain ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.domain li { padding: 0.375rem 0; display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 0.75rem; border-top: 1px solid var(--outline-variant); }
.domain li code { font: 500 0.8125rem/1.5 var(--font); color: var(--c); overflow-wrap: anywhere; }
.domain li .tag { font-size: 0.75rem; font-weight: 500; color: var(--primary); white-space: nowrap; }
.domain li .tag.off { color: var(--on-variant); }
.domain .not { color: var(--on-variant); margin: 0.375rem 0 0; font-size: 0.8125rem; }
@media (max-width: 34rem) { .domain li { grid-template-columns: 1fr; gap: 0; } }

/* ------------------------------------------------------------------ forms */

form.stack { display: grid; gap: 1rem; max-width: 30rem; }
form.stack label { display: grid; gap: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--on-variant); }
form.stack label small { font-weight: 400; }
form.stack input, form.stack select, .setting input, .setting select {
  width: 100%; min-height: 3.5rem; padding: 0.875rem 1rem; font-size: 1rem; color: var(--on-surface);
  border: 1px solid var(--outline); border-radius: 0.25rem; background: transparent;
}
form.stack input:focus, form.stack select:focus, .setting input:focus, .setting select:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ activity */

.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.entries li { background: var(--container); padding: 0.875rem 1rem; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem; border-radius: 0.25rem; }
.entries li:first-child { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.entries li:last-child { border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.entries .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.entries .head { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 500; }
.entries .head .t { font-size: 0.75rem; font-weight: 400; color: var(--on-variant); font-variant-numeric: tabular-nums; white-space: nowrap; }
.entries .how { font-size: 0.8125rem; color: var(--on-variant); margin: 0; }
.entries .req { margin: 0.375rem 0 0.25rem; overflow-wrap: anywhere; }
.entries .meta { color: var(--on-variant); font-size: 0.8125rem; margin: 0; }
.entries .fail { color: var(--error); }

/* ------------------------------------------------------------------ settings */

.settings { display: grid; gap: 2px; }
.setting { background: var(--container); padding: 1rem; border-radius: 0.25rem; display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 0.25rem 1rem; align-items: center; }
.setting:first-child { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.setting:last-child { border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.setting .name { font-weight: 500; }
.setting .desc { color: var(--on-variant); font-size: 0.875rem; grid-column: 1; }
.setting .control { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 0.25rem; }
.setting .src { font-size: 0.75rem; color: var(--on-variant); }
@media (max-width: 34rem) { .setting { grid-template-columns: 1fr; } .setting .control { grid-column: 1; grid-row: auto; margin-top: 0.5rem; } }

/* ------------------------------------------------------------------ sign-in, snackbar */

.login { max-width: 22rem; margin: 16vh auto 0; padding: 0 1rem; text-align: center; justify-items: center; }
.login img { width: 72px; height: 72px; }
.login h1 { font-size: 2rem; font-weight: 400; margin: 0.5rem 0 0; }
.login p { color: var(--on-variant); margin: 0; }
.login input { text-align: left; }
.login .btn { width: 100%; }
.login .err { color: var(--error); min-height: 1.5em; font-size: 0.875rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + max(env(safe-area-inset-bottom), 1rem) + 0.5rem); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--inverse); color: var(--on-inverse); font-size: 0.875rem; padding: 0.875rem 1rem; border-radius: 0.25rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 2rem); z-index: 5;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 52rem) { .toast { bottom: 1.5rem; } }