/* =============================================================================
   YODA — Orchestrator Console  ·  styles.css
   -----------------------------------------------------------------------------
   ⚙️  EASY CUSTOMIZATION
   Everything you'll likely want to change lives in the :root block below.
   Change a color = edit one hex value. Change the font = edit --font-body.
   Nothing else in this file needs touching to re-theme.
============================================================================= */

:root {
  /* ---- COLORS (edit these to re-theme) ---- */
  --bg:          #0A0D14;   /* page background — deep ink            */
  --surface:     #131825;   /* assistant bubbles, panels             */
  --surface-2:   #1B2130;   /* input field, hover states             */
  --text:        #E9ECF5;   /* primary text — kept high-contrast     */
  --text-dim:    #97A0B5;   /* secondary text, labels                */
  --accent:      #7C6BFF;   /* signature accent (indigo glow)        */
  --accent-ink:  #0A0D14;   /* text that sits on the accent          */
  --amber:       #F5B544;   /* "action required" flags               */
  --alert:       #FF6B6B;   /* compliance / alert flags              */
  --ok:          #3DD6B0;   /* healthy / success                     */
  --line:        rgba(255,255,255,.08);  /* hairline dividers        */

  /* ---- TYPE (edit these to change fonts / sizing) ---- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
               Menlo, Consolas, monospace;
  --fs-base:   16.5px;      /* base text size — bump up for larger text */
  --lh-body:   1.62;        /* line height — readability lever         */

  /* ---- SHAPE ---- */
  --radius:    16px;
  --radius-sm: 10px;
  --glow: 0 0 0 1px rgba(124,107,255,.35), 0 8px 30px rgba(124,107,255,.18);
}

/* ---------------------------------------------------------------------------
   Reset / base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  /* subtle ambient glow top-center — quiet, not distracting */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(124,107,255,.10), transparent 60%);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =============================================================================
   LOGIN
============================================================================= */
.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.brand-mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 30%, var(--accent), #4B3FCB);
  box-shadow: var(--glow);
}
.brand-name {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .14em;
  font-size: 18px;
}
.login-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin: 14px 0 26px;
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 14px;
  font-size: 16px; /* 16px prevents iOS zoom-on-focus */
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(124,107,255,.15));
}

.btn-primary {
  width: 100%;
  margin-top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  transition: filter .15s, transform .05s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: default; }

.login-error {
  color: var(--alert);
  font-size: 13.5px;
  margin-top: 14px;
  min-height: 18px;
  font-family: var(--font-mono);
}

/* =============================================================================
   APP SHELL
============================================================================= */
.app {
  display: none;            /* shown by JS after auth */
  flex-direction: column;
  height: 100dvh;
}
.app.visible { display: flex; }

/* ---- Top status rail (the signature element) ---- */
.rail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(10,13,20,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rail-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .16em;
  font-size: 14px;
  display: flex; align-items: center; gap: 9px;
}
.rail-brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.platforms {
  display: flex;
  gap: 7px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.platforms::-webkit-scrollbar { display: none; }
.pf {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.pf::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
}

.rail-btn {
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  transition: color .15s, border-color .15s;
}
.rail-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---- Transcript ---- */
.thread {
  flex: 1;
  overflow-y: auto;
  padding: 22px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
}
.thread-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.msg { display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.msg .who {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.msg .bubble {
  border-radius: var(--radius);
  padding: 13px 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* user */
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.user .bubble {
  background: linear-gradient(180deg, #2A2550, #221E45);
  border: 1px solid rgba(124,107,255,.4);
}
/* assistant */
.msg.bot .bubble {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* lightweight markdown rendering inside bubbles */
.bubble strong { color: #fff; font-weight: 650; }
.bubble code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: rgba(255,255,255,.07);
  padding: 1px 6px;
  border-radius: 6px;
}
.bubble a { color: var(--accent); }
.bubble .flag-amber { color: var(--amber); }
.bubble .flag-alert { color: var(--alert); }

/* typing indicator */
.typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
  animation: blink 1.3s infinite;
}
.typing span:nth-child(2){ animation-delay:.18s }
.typing span:nth-child(3){ animation-delay:.36s }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

/* ---- Composer ---- */
.composer {
  flex: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(10,13,20,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.composer-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 8px 8px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.composer-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,107,255,.14);
}
#prompt {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  resize: none;
  outline: none;
  font-size: 16px;
  line-height: 1.5;
  max-height: 160px;
  padding: 6px 0;
}
#prompt::placeholder { color: var(--text-dim); }

.send {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--accent);
  border: none;
  display: grid; place-items: center;
  transition: filter .15s, transform .05s, opacity .15s;
}
.send:hover { filter: brightness(1.1); }
.send:active { transform: translateY(1px); }
.send:disabled { opacity: .4; cursor: default; }
.send svg { width: 18px; height: 18px; fill: var(--accent-ink); }

.hint {
  max-width: 760px;
  margin: 8px auto 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-align: center;
  letter-spacing: .04em;
}