/* Ida PWA — Midnight. Built by ChristosDev */
:root{
  --bg:#0e1319; --bg2:#131a22; --line:#1f2933; --line2:#26313c;
  --fg:#e6ebf1; --muted:#6b7987; --muted2:#5d6a78;
  --ida-b:#1a232e; --ida-fg:#dbe3ec;
  --me-b1:#e2a659; --me-b2:#cf8f42; --me-fg:#231605;
  --amber:#e6b25e; --amber-soft:#2a2013; --on:#4fd07f; --k:#f0c584;
  --field:#1a232e; --field-line:#26313c; --field-fg:#c3cdd8;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  /* --bg2 (the input-bar colour) so the OS-painted home-indicator zone below the
     894px web viewport matches the bar instead of showing a darker strip. */
  margin:0;background:var(--bg2);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
  /* Lock the body to the viewport (iOS trick) so nothing scrolls/bounces and the
     app fills the real visible area — the container the input pins to. */
  position:fixed;inset:0;width:100%;overflow:hidden;
}
/* Height is set in JS to window/visualViewport height (px) — the reliable fix for
   the iOS standalone-PWA 100dvh gap that floated the input above the bottom.
   100dvh is only the pre-JS fallback. */
#app{height:100%;max-width:720px;margin:0 auto;
  display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.hidden{display:none !important}

/* ── login ── */
#login{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:28px;text-align:center}
#login .badge{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(150deg,#e6b25e,#cf8a3c);color:#241706;font-size:36px;
  box-shadow:0 12px 30px -12px rgba(230,178,94,.6)}
#login h1{margin:.2em 0 0;font-size:24px;letter-spacing:-.01em}
#login p{margin:0;color:var(--muted);font-size:14px}
#login form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px;margin-top:6px}
#login input{background:var(--field);border:1px solid var(--field-line);color:var(--fg);
  border-radius:13px;padding:13px 15px;font-size:16px;outline:none}
#login input:focus{border-color:var(--amber)}
#login button{background:linear-gradient(160deg,#e2a659,#cf8f42);color:#231605;border:none;
  border-radius:13px;padding:13px;font-size:16px;font-weight:700;cursor:pointer}
#login .err{color:#e57373;font-size:13px;min-height:1em}

/* ── header ── */
#head{display:flex;align-items:center;gap:11px;padding:calc(10px + var(--safe-t)) 15px 10px;
  background:var(--bg2);border-bottom:1px solid var(--line);flex:none}
#head .av{width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(150deg,#e6b25e,#cf8a3c);display:grid;place-items:center;
  color:#241706;font-size:19px;font-weight:800}
#head .av img{width:100%;height:100%;object-fit:cover}
#head .who{flex:1;min-width:0;line-height:1.2}
#head .nm{font-weight:700;font-size:16px}
#head .st{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
#head .dot{width:8px;height:8px;border-radius:50%;background:var(--on);flex:none;
  box-shadow:0 0 8px -1px var(--on)}
#head .menu{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:6px}

/* ── messages ── */
#msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 13px 8px;
  display:flex;flex-direction:column;gap:9px;overflow-x:clip}
.day{align-self:center;font-size:11px;color:var(--muted2);background:var(--bg2);
  border:1px solid var(--line);padding:3px 12px;border-radius:11px;margin:4px 0}
.m{display:flex;flex-direction:column;max-width:82%;gap:2px}
.m.me{align-self:flex-end;align-items:flex-end}
.m.ida{align-self:flex-start;align-items:flex-start}
.b{padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.45;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.m.ida .b{background:var(--ida-b);color:var(--ida-fg);border-bottom-left-radius:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.28)}
.m.me .b{background:linear-gradient(160deg,var(--me-b1),var(--me-b2));color:var(--me-fg);
  border-bottom-right-radius:5px;font-weight:500}
.b .lead{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;
  margin-bottom:3px;color:var(--amber)}
.auto-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:1px 7px;border-radius:6px;background:var(--amber-soft);color:var(--amber);
  align-self:flex-start;margin-bottom:4px;display:inline-block}
.b b,.b strong{color:var(--k)}
.t{font-size:10.5px;color:var(--muted2);padding:0 4px}
.file{display:flex;align-items:center;gap:10px;margin-top:5px;padding:10px 13px;border-radius:14px;
  background:var(--ida-b);border:1px solid var(--line2);text-decoration:none;color:var(--ida-fg);
  min-width:190px;max-width:260px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.file .fico{font-size:24px;flex:none;line-height:1}
.file .fname{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .fopen{font-size:11px;color:var(--amber);font-weight:700;flex:none}
@media (hover:hover){.file:hover{filter:brightness(1.12)}}
.file:active{transform:scale(.98)}
.typing .b{display:inline-flex;gap:4px;padding:13px 15px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ida-fg);opacity:.5;
  animation:bl 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.85;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}

/* ── input bar ── */
/* No safe-area padding: the web viewport already excludes the home-indicator zone,
   so adding it here would double-count and float the input up. */
#bar{flex:none;display:flex;align-items:flex-end;gap:9px;padding:9px 11px 5px;
  background:var(--bg2);border-top:1px solid var(--line)}
#bar textarea{flex:1;background:var(--field);color:var(--field-fg);border:1px solid var(--field-line);
  border-radius:20px;padding:10px 15px;font-size:16px;line-height:1.35;resize:none;outline:none;
  max-height:120px;font-family:inherit}
#bar textarea:focus{border-color:var(--field-line)}
.rnd{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:18px;border:none;cursor:pointer;transition:transform .08s}
.rnd:active{transform:scale(.9)}
#mic{background:transparent;color:var(--muted)}
#mic.rec{color:#e57373;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.4}}
#send{background:linear-gradient(160deg,#e2a659,#cf8f42);color:#231605}
#send:disabled{opacity:.4;cursor:default}
@media (hover:hover){.rnd:hover{filter:brightness(1.08)}}