/* 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%}
/* NOTE: the critical layout (body bg + #app height + #bar padding) is also inlined
   in index.html and that copy wins — external CSS has lagged behind deploys on
   installed iOS PWAs. Keep the two in sync. */
body{
  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;overflow:hidden;
}
#app{height:100svh;height:100dvh;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}
/* INGEN white-space:pre-wrap här. Den behövdes när bubblan fick råtext, men nu
   sköter renderaren radbrytningarna med <br> och riktiga block — och pre-wrap
   gjorde radbrytningarna i den GENERERADE HTML-källan synliga, så varje
   schemarad fick en tom rad efter sig (Christos 2026-07-29). Endast <pre>
   behåller sin egen formatering. */
.b{padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.45;
  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;align-items:center}
.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}}
/* Statusraden under väntan ("läser scheman"). Skrivs in i väntbubblan medan
   turen pågår, i stället för tre tysta prickar i en halv minut. */
.typing .st{margin-left:7px;font-size:13px;color:var(--muted);white-space:nowrap}

/* ── markdown i bubblorna ──
   Renderaren ger nu riktiga block (<p>, <ul>, <pre>) i stället för en enda
   textklump. Marginalerna nollas mot bubblans egen padding, annars glappar
   första och sista raden. */
.b p{margin:0}
.b p + p,.b ul,.b ol,.b blockquote,.b pre{margin:.5em 0 0}
.b ul,.b ol{padding-left:1.25em}
.b li{margin:.15em 0}
.b blockquote{border-left:2px solid var(--line);padding-left:.7em;color:var(--muted)}
.b pre{background:rgba(0,0,0,.25);border-radius:8px;padding:9px 11px;overflow-x:auto}
.b pre code{background:none;padding:0}
.b code{background:rgba(0,0,0,.25);border-radius:4px;padding:1px 4px;font-size:.92em}
.b hr{border:none;border-top:1px solid var(--line);margin:.6em 0}
.b h1,.b h2,.b h3,.b h4{margin:.5em 0 .2em;font-size:1.05em}
/* Breda tabeller skrollar i sitt eget block — sidan får aldrig skrolla i sidled. */
.b table{display:block;overflow-x:auto;border-collapse:collapse;margin:.5em 0 0}
.b th,.b td{border:1px solid var(--line);padding:3px 7px;text-align:left}

/* ── knappraden under Idas svar ──
   Dämpad med flit: den ska finnas när man vill ha den och försvinna i bakgrunden
   annars. 34px träffyta för tummen, men visuellt liten. */
.acts{display:flex;gap:2px;margin:2px 0 0 2px}
.act{width:34px;height:30px;display:grid;place-items:center;border:none;background:none;
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;border-radius:8px;
  -webkit-tap-highlight-color:transparent;transition:color .12s,background .12s}
.act:active{transform:scale(.92)}
.act svg{display:block}
.act.ok{color:#5ec27a}
@media (hover:hover){.act:hover{color:var(--fg);background:rgba(255,255,255,.06)}}

/* ── input bar ── */
#bar{flex:none;display:flex;align-items:flex-end;gap:9px;padding:9px 11px 8px;
  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}
/* Stoppläget: samma knapp, tydligt annan roll. Neutral yta i stället för den
   inbjudande guldgradienten — den ska läsas som "avbryt", inte som "skicka". */
#send.stopping{background:var(--field);color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--field-line);font-size:13px}
@media (hover:hover){.rnd:hover{filter:brightness(1.08)}}

/* ── botväxlaren (Christos 2026-08-13: tryck på profilbilden) ─────────────── */
/* ⚠️ overflow MÅSTE bli synlig: basregeln klipper till cirkel för att beskära
   bilden, och då kapades växlingspilen till en halvmåne. Beskärningen flyttas
   därför till bilden. */
#head .av{border:none;padding:0;cursor:pointer;position:relative;
  overflow:visible;-webkit-tap-highlight-color:transparent}
#head .av img{border-radius:50%}
#head .av:focus-visible{outline:2px solid var(--on);outline-offset:2px}
/* Liten hint om att bilden går att trycka på — utan den ser den ut som en
   statisk avatar och ingen hittar växlingen. */
#head .av::after{content:"";position:absolute;right:-2px;bottom:-2px;
  width:15px;height:15px;border-radius:50%;
  background:var(--bg) center/7px 7px no-repeat;
  box-shadow:0 0 0 2px var(--bg), inset 0 0 0 1px rgba(255,255,255,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5 L4 4.5 L7 1.5' fill='none' stroke='%239aa6b6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.botmenu{position:absolute;top:58px;left:12px;z-index:40;
  background:var(--panel,#151a21);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:6px;min-width:212px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:2px}
.botmenu[hidden]{display:none}
.botopt{display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:none;border-radius:10px;padding:8px 10px;
  cursor:pointer;color:inherit;text-align:left;font:inherit;
  -webkit-tap-highlight-color:transparent}
.botopt:hover,.botopt:focus-visible{background:rgba(255,255,255,.06);outline:none}
.botopt[aria-current="true"]{background:rgba(255,255,255,.09)}
.botopt img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.botopt span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.botopt b{font-size:14.5px;font-weight:650}
.botopt small{font-size:11.5px;color:var(--muted)}
@media (hover:none){.botopt:hover{background:none}}

/* ── kommandomenyn (skriv "/" i fältet) ──────────────────────────────────── */
.cmdmenu{position:fixed;left:8px;right:8px;bottom:74px;z-index:50;
  max-height:min(46vh,340px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel,#151a21);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:6px;
  box-shadow:0 -14px 40px -16px rgba(0,0,0,.8);
  /* ⚠️ iOS: annars hamnar sista raden under hemknappsstapeln när tangentbordet
     är uppe och menyn är scrollad i botten. */
  padding-bottom:max(6px,env(safe-area-inset-bottom))}
.cmdmenu[hidden]{display:none}
.cmdopt{display:flex;flex-direction:column;gap:1px;width:100%;
  background:none;border:none;border-radius:10px;padding:9px 11px;
  cursor:pointer;color:inherit;text-align:left;font:inherit;
  -webkit-tap-highlight-color:transparent}
.cmdopt:hover,.cmdopt[aria-selected="true"]{background:rgba(255,255,255,.07)}
.cmdopt b{font-size:14.5px;font-weight:600;color:var(--amber)}
.cmdopt small{font-size:12px;color:var(--muted)}
@media (hover:none){.cmdopt:hover{background:none}}