/* ============================================================
   MIRA v2 — component styles (shell + shared)
   ============================================================ */

/* ---------- app frame ---------- */
.app { display:flex; height:100%; background: var(--bg); background-image: var(--app-grad); }

/* ---------- left rail ---------- */
.rail {
  width: calc(252px * clamp(0.94, var(--space), 1.06));
  flex: none; display:flex; flex-direction:column;
  padding: calc(20px * var(--space)) 16px calc(16px * var(--space));
  border-right: 1px solid var(--line-soft);
  background: var(--surface);
  backdrop-filter: blur(8px);
  position: relative; transition: width .26s var(--ease), padding .26s var(--ease);
}
/* zwijanie paska */
.rail-toggle { position:absolute; top:18px; right:-13px; z-index:6; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink-3);
  box-shadow:var(--shadow-sm); cursor:pointer; transition:color .15s, border-color .15s, transform .15s; }
.rail-toggle:hover { color:var(--accent); border-color:var(--accent); transform:scale(1.08); }
.rail.collapsed { width: 72px; padding-left:12px; padding-right:12px; }
.rail.collapsed .wm-name, .rail.collapsed .wm-tag, .rail.collapsed .nav-label { display:none; }
.rail.collapsed .rail-top { padding:6px 0 4px; }
.rail.collapsed .wordmark { justify-content:center; gap:0; }
.rail.collapsed .nav { align-items:center; }
.rail.collapsed .nav-item { justify-content:center; gap:0; width:46px; padding:11px 0; }
.rail.collapsed .nav-item.on::before { left:-12px; }
.rail.collapsed .nav-badge { position:absolute; top:6px; right:9px; min-width:0; width:7px; height:7px;
  padding:0; font-size:0; border-radius:50%; }
.cap-mini { display:grid; place-items:center; width:100%; padding:6px 0; cursor:pointer; }
.cap-mini:hover { opacity:.85; }
.rail-top { padding: 6px 10px 4px; }
.wordmark { display:flex; align-items:center; gap:10px; }
.wm-orb { width:26px; height:26px; border-radius:50%; flex:none;
  /* kolor z akcentu kapsuły (--orb-accent z panel-meta); brak akcentu → dotychczasowy fiolet (--p-500) */
  background: radial-gradient(circle at 34% 28%, #fff 0%,
    color-mix(in oklch, var(--orb-accent, var(--p-500)) 55%, white) 42%,
    color-mix(in oklch, var(--orb-accent, var(--p-500)) 76%, black) 100%);
  box-shadow: inset -3px -3px 6px color-mix(in oklch, var(--orb-accent, var(--p-500)) 55%, black),
    0 3px 10px color-mix(in oklch, var(--orb-accent, var(--p-500)) 60%, transparent); }
.wm-name { font-size: 30px; line-height: 1; font-style: italic; color: var(--ink); }
.wm-tag { font-size: 9.5px; letter-spacing: 0.32em; color: var(--ink-4); margin: 6px 0 0 36px; font-weight:600; }

.nav { display:flex; flex-direction:column; gap: 3px; margin-top: calc(26px * var(--space)); }
.nav-item {
  display:flex; align-items:center; gap: 12px; width:100%;
  padding: calc(10px * var(--space)) 13px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  position: relative; transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item.on::before { content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:3px; background: var(--accent); }
.nav-badge { margin-left:auto; font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:9px; background: var(--accent); color:#fff; }

.rail-bottom { margin-top:auto; }

/* wyloguj (pod selektorem kapsuły / plakietką klientki) */
.logout-btn { display:flex; align-items:center; gap:9px; width:100%; margin-top:8px;
  padding:9px 13px; border:0; border-radius: var(--r-sm, 10px); background:transparent;
  color: var(--ink-3); font-size:12.5px; font-weight:600; cursor:pointer;
  transition: background .15s, color .15s; }
.logout-btn:hover { background: var(--hover); color: var(--ink); }
.logout-btn.mini { justify-content:center; gap:0; padding:9px 0; }

/* capsule selector */
.cap-wrap { position: relative; }
.cap-btn, .cap-opt { display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding: 9px 11px; border-radius: var(--r-sm); transition: background .16s; }
.cap-btn { border: 1px solid var(--line); background: var(--surface-2); }
.cap-btn:hover, .cap-btn.open { background: var(--hover); }
.cap-av { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff; }
.cap-av.k-owner  { background: linear-gradient(145deg,
  color-mix(in oklch, var(--orb-accent, var(--p-400)) 88%, white),
  color-mix(in oklch, var(--orb-accent, var(--p-600)) 80%, black)); }
.cap-av.k-client { background: linear-gradient(145deg,
  color-mix(in oklch, var(--orb-accent, var(--pink-400)) 70%, white),
  var(--orb-accent, var(--p-500))); }
.cap-av.k-demo   { background: linear-gradient(145deg, var(--ink-4), var(--ink-3)); }
.cap-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
.cap-txt b { font-size:13.5px; font-weight:600; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cap-txt i { font-size:11.5px; font-style:normal; color: var(--ink-3); }
.cap-menu { position:absolute; bottom: calc(100% + 8px); left:0; right:0; padding:6px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); animation: fadeUp .18s var(--ease-out) both; z-index: 30; }
.cap-opt:hover { background: var(--hover); }
.cap-opt.on { background: var(--accent-soft); }

/* ---------- main + topbar ---------- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: calc(18px * var(--space)) calc(30px * var(--space)) calc(14px * var(--space));
  border-bottom: 1px solid var(--line-soft); }
.topbar-title { font-size: clamp(26px, 2.4vw, 34px); font-style:italic; color: var(--ink); line-height:1; }
.topbar-right { display:flex; align-items:center; gap: 8px; }

.engine { display:flex; align-items:center; gap:7px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border:1px solid var(--line); font-size:13px; color: var(--ink-2); font-weight:500; }
.engine-dot { width:8px; height:8px; border-radius:50%; position:relative; }
.engine-ping { position:absolute; inset:0; border-radius:50%; animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(3); opacity:0; } }
.engine-busy { display:flex; align-items:center; gap:5px; margin-left:4px; padding-left:10px;
  border-left:1px solid var(--line); color: var(--accent-ink); font-size:12.5px; font-weight:600; }
.engine-busy .bdot { width:4px; height:4px; border-radius:50%; background: var(--accent); animation: bdot 1.2s var(--ease) infinite; }
.engine-busy .bdot:nth-child(2){ animation-delay:.2s; } .engine-busy .bdot:nth-child(3){ animation-delay:.4s; }
@keyframes bdot { 0%,100%{ opacity:.3; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }

.icon-btn { width:38px; height:38px; border-radius: var(--r-sm); display:grid; place-items:center;
  color: var(--ink-2); position:relative; transition: background .16s, color .16s; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%;
  background: var(--down); border:1.5px solid var(--surface); }

/* content scroll area */
.content { flex:1; overflow-y:auto; padding: calc(26px * var(--space)) calc(30px * var(--space)) calc(40px * var(--space)); }
.content-narrow { max-width: 1180px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  padding: 10px 17px; border-radius: var(--r-pill); transition: all .18s var(--ease); }
.btn.primary { background: var(--accent); color:#fff; box-shadow: 0 4px 14px oklch(0.55 0.16 300 / 0.30); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 20px oklch(0.55 0.16 300 / 0.40); }
.btn.ghost { background: var(--surface-2); color: var(--ink); border:1px solid var(--line); }
.btn.ghost:hover { background: var(--hover); }
.btn.soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn.soft:hover { filter: brightness(0.97); }

/* ---------- skeletons ---------- */
.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 800px 100%; animation: shimmer 1.4s linear infinite; border-radius: 7px; }
.sk-list { display:flex; flex-direction:column; gap:14px; }
.sk-row { display:flex; gap:14px; align-items:center; padding:14px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); }
.sk-av { width:42px; height:42px; border-radius:12px; flex:none; }
.sk-lines { flex:1; display:flex; flex-direction:column; gap:9px; }
.sk-1 { height:13px; width:55%; } .sk-2 { height:11px; width:80%; }
.sk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.sk-card { padding:20px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); }
.sk-card .sk-1 { height:30px; width:50%; margin-bottom:12px; } .sk-card .sk-2 { height:12px; width:75%; }

/* ---------- empty / error ---------- */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:12px; padding: 60px 20px; min-height: 320px; animation: fadeIn .4s ease both; }
.empty-ic { width:62px; height:62px; border-radius:20px; display:grid; place-items:center;
  background: var(--accent-soft); color: var(--accent); }
.empty-ic.err { background: oklch(0.64 0.14 28 / 0.13); color: var(--down); }
.empty-t { font-size:23px; color: var(--ink); }
.empty-s { font-size:14.5px; color: var(--ink-3); max-width: 360px; line-height:1.5; }

/* ---------- input bar (shared chat + overlay) ---------- */
.inputbar { display:flex; align-items:center; gap:9px; padding:8px 8px 8px 18px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); }
.inputbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); }
.inputbar-in { flex:1; border:none; background:none; outline:none; font-size:15px; color: var(--ink); }
.inputbar-in::placeholder { color: var(--ink-4); }
.mic-btn { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  color: var(--ink-2); background: var(--surface-2); transition: all .18s; }
.mic-btn:hover { background: var(--hover); color: var(--ink); }
.mic-btn.on { background: var(--accent); color:#fff; box-shadow: 0 0 0 0 var(--accent); animation: micpulse 1.4s var(--ease) infinite; }
@keyframes micpulse { 0%{ box-shadow:0 0 0 0 oklch(0.6 0.16 295 / 0.5);} 100%{ box-shadow:0 0 0 14px oklch(0.6 0.16 295 / 0);} }
/* mikrofon Startu (landing) w trybie dyktowania — sam znacznik nagrywania (klasa dzielona z mic-btn) */
.landing-mic.on { background: var(--accent); color:#fff; animation: micpulse 1.4s var(--ease) infinite; }
.send-btn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none;
  background: var(--accent); color:#fff; transition: all .18s; }
.send-btn:hover:not(:disabled) { transform: scale(1.06); }
.send-btn:disabled { opacity:.4; cursor:default; }

/* --- przełącznik języka dyktowania (PL/EN), obok mikrofonu — tylko gdy GLOS_LIVE=false --- */
.lang-toggle { display:flex; align-items:center; gap:2px; flex:none; padding:2px;
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-pill); }
.lang-toggle button { border:none; background:none; padding:5px 9px; border-radius: var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.02em; color: var(--ink-3); cursor:pointer; transition: all .15s; }
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button.on { background: var(--accent); color:#fff; }

/* --- zrzuty ekranu / obrazy w czacie --- */
.inputbar-wrap { display:flex; flex-direction:column; gap:8px; }
.attach-btn { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
  color: var(--ink-2); background: var(--surface-2); transition: all .18s; }
.attach-btn:hover { background: var(--hover); color: var(--ink); }
.img-strip { display:flex; flex-wrap:wrap; gap:8px; padding:2px 4px; }
.img-chip { position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface-2); }
.img-chip img { width:100%; height:100%; object-fit:cover; display:block; }
.img-x { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; line-height:1; color:#fff;
  background: oklch(0.2 0.02 300 / 0.62); border:none; cursor:pointer; }
.img-x:hover { background: oklch(0.2 0.02 300 / 0.85); }
.bubble-imgs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.bubble-imgs img { max-width:200px; max-height:240px; border-radius:9px; display:block; }

/* ---------- section header (reused) ---------- */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: calc(20px * var(--space)); }
.sec-lead { font-size:14.5px; color: var(--ink-3); max-width: 540px; line-height:1.5; margin-top:6px; }
.sec-eyebrow { font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color: var(--accent); font-weight:700; }