/* ============================================================
   Gynéco-Dr — "Aurora" · thème sombre violet/néon
   Deep indigo · rose-magenta + violet · glassy cards · Fraunces + Outfit
   ============================================================ */
:root {
  --paper: #0d0a1a;          /* fond indigo très sombre */
  --surface: #17132e;        /* carte / panneau */
  --surface-2: #211b42;      /* champ / surface secondaire */
  --ink: #f1ecf9;            /* texte principal clair */
  --ink-2: #b6acd2;          /* texte atténué */
  --ink-3: #8a80aa;          /* texte faible / placeholder */
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.17);
  --rose: #e0518a;           /* accent rose vif (sur sombre) */
  --rose-deep: #ff95c2;      /* rose clair pour titres / texte accent */
  --rose-tint: rgba(224,81,138,.16);
  --rose-tint-2: rgba(224,81,138,.30);
  --violet: #7b5cff;         /* accent violet (dégradés) */
  --gold: #e6b450;
  --gold-soft: #d9a445;
  --gold-tint: rgba(230,180,80,.15);
  --danger: #ff6b6b;
  --danger-tint: rgba(255,107,107,.16);
  --ok: #46c98a;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3);
  --shadow: 0 8px 24px rgba(0,0,0,.42), 0 24px 60px rgba(0,0,0,.5);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --navh: 66px;
  --user-bubble: #7b5cff;
  --border: var(--line);
  --muted: var(--ink-2);
  --primary: var(--rose);
  --text: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 560px at 85% -10%, rgba(123,92,255,.22), transparent 60%),
    radial-gradient(900px 520px at -8% 110%, rgba(224,81,138,.18), transparent 60%);
  background-attachment: fixed;
}

::selection { background: rgba(123,92,255,.45); color: #fff; }

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(15,11,32,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand span { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.brand strong { color: var(--rose); font-weight: 600; }
.topbar-actions { display: flex; gap: 8px; }

/* ---- Navbar (top on desktop · bottom tab bar on mobile) ---- */
.navbar {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 10px 16px;
  background: rgba(18,13,38,.6);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.navbtn { white-space: nowrap; }
.navbar::-webkit-scrollbar { display: none; }
.navbtn {
  flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 9px 15px; font-family: var(--font); font-size: 14px; font-weight: 500;
  transition: background .18s, color .18s, border-color .18s;
}
.nav-ico { display: inline-flex; align-items: center; justify-content: center; }
.nav-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.navbtn:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.navbtn.active {
  background: var(--rose); color: #fffbfc; border-color: var(--rose);
  box-shadow: 0 4px 12px rgba(193,57,107,.3);
}
.navbtn.active .nav-ico { filter: none; }

/* ---- Layout ---- */
#app { flex: 1; display: flex; flex-direction: column; padding: 22px 16px; }
.view { width: 100%; animation: rise .5s cubic-bezier(.2,.75,.25,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 32px 30px; max-width: 460px; margin: 26px auto;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rose), var(--gold-soft) 70%, var(--rose));
}

h1 { font-family: var(--font-display); font-size: clamp(22px, calc(1.1rem + 1.4vw), 27px); font-weight: 600; letter-spacing: -.015em; margin: 0 0 8px; color: var(--ink); line-height: 1.15; }
h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.muted { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ---- Forms ---- */
form { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
label { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); padding: 13px 14px; width: 100%;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--surface); border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(193,57,107,.14);
}
input[type="file"] { padding: 10px; cursor: pointer; }

button { cursor: pointer; font-family: var(--font); border: none; }
button.primary {
  background: linear-gradient(135deg, var(--rose), var(--violet)); color: #fff; border-radius: var(--radius);
  padding: 14px 18px; font-size: 15.5px; font-weight: 600; margin-top: 16px;
  box-shadow: 0 6px 18px rgba(123,92,255,.34);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
button.primary:hover { filter: brightness(1.1); box-shadow: 0 10px 26px rgba(123,92,255,.42); }
button.primary:active { transform: translateY(1px) scale(.995); }
button.primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
button.primary.small { padding: 10px 14px; font-size: 14px; margin: 0; }
button.ghost {
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  padding: 9px 14px; font-size: 14px; font-weight: 500; border-radius: var(--radius);
  transition: background .15s, border-color .15s;
}
button.ghost:hover { background: var(--surface-2); border-color: var(--rose); color: var(--rose-deep); }
button.link { background: none; color: var(--rose); padding: 8px 0; font-size: 14px; font-weight: 600; align-self: flex-start; }
button.link:hover { color: var(--gold); }
.form-error { color: var(--danger); font-size: 14px; margin-top: 12px; font-weight: 500; }

/* ---- Chat ---- */
.chat { display: flex; flex-direction: row; gap: 16px; flex: 1; max-width: 1120px; margin: 0 auto; width: 100%; min-height: 0; }
.sidebar { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.conv-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-radius: 11px; font-size: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.conv-list li:hover { border-color: var(--line-2); color: var(--ink); }
.conv-list li.active { border-color: var(--rose); color: var(--rose-deep); background: var(--rose-tint); font-weight: 500; }
.conv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-del { flex-shrink: 0; background: none; border: none; color: var(--ink-3); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .55; transition: color .15s, opacity .15s; min-height: 28px; }
.conv-del:hover { color: var(--danger); opacity: 1; }

.chat-main {
  flex: 1; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; min-height: 62dvh;
}
.messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.empty-hint { margin: auto; text-align: center; color: var(--ink-2); max-width: 320px; }
.empty-hint h2 { color: var(--rose-deep); }

.msg { max-width: 86%; padding: 13px 16px; line-height: 1.6; font-size: 15px; animation: rise .35s ease both; }
.msg.user {
  align-self: flex-end; color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--violet));
  border-radius: 16px 16px 5px 16px; box-shadow: 0 6px 16px rgba(123,92,255,.32);
}
.msg.assistant {
  align-self: flex-start; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--violet); border-radius: 5px 16px 16px 16px;
}
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; margin: 12px 0 5px; color: var(--rose-deep); }
.msg.assistant ul, .msg.assistant ol { margin: 7px 0; padding-left: 22px; }
.msg.assistant li { margin: 4px 0; }
.msg.assistant p { margin: 8px 0; }
.msg.assistant strong { color: var(--ink); font-weight: 600; }
.msg.assistant pre { background: #0b0918; color: #e9e3fb; padding: 12px; border-radius: 10px; overflow-x: auto; font-size: 13px; border: 1px solid var(--line); }
.msg.assistant code { background: rgba(123,92,255,.18); padding: 1px 6px; border-radius: 5px; font-size: 13px; color: var(--rose-deep); }
.msg.assistant pre code { background: none; padding: 0; color: inherit; }
.msg.assistant a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; }
.msg.error { align-self: center; background: var(--danger-tint); color: var(--danger); border: 1px solid rgba(255,107,107,.32); border-radius: 12px; font-size: 14px; font-weight: 500; }

.composer { border-top: 1px solid var(--line); padding: 12px 14px; gap: 8px; margin: 0; background: var(--surface); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.composer-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ephemeral { font-size: 13px; color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 7px; margin: 0; text-transform: none; letter-spacing: 0; }
.ephemeral input { width: auto; accent-color: var(--rose); }
.composer-row { display: flex; gap: 9px; align-items: flex-end; }
.composer textarea { resize: none; max-height: 160px; border-radius: var(--radius); }
.composer button.primary { margin: 0; flex-shrink: 0; }

/* ---- Voice ---- */
.mic-btn {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-size: 19px; line-height: 1; padding: 0; transition: background .15s, border-color .15s;
}
.mic-btn:hover { background: var(--rose-tint); border-color: var(--rose); }
.mic-btn.listening { background: var(--danger-tint); border-color: #e0a99f; animation: micpulse 1.2s infinite; }
.mic-btn.processing { background: var(--rose-tint); border-color: var(--rose); animation: micspin .8s linear infinite; }
@keyframes micspin { to { transform: rotate(360deg); } }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(181,58,44,.42); } 50% { box-shadow: 0 0 0 8px rgba(181,58,44,0); } }
.speak-btn { display: inline-block; margin-top: 12px; background: none; border: none; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.speak-btn:hover { color: var(--rose); }

/* ---- Status / badges ---- */
.status-badge { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; }
.status-pending { background: var(--gold-tint); color: var(--gold); }
.status-approved { background: var(--rose-tint-2); color: var(--rose-deep); }
.status-rejected { background: var(--danger-tint); color: var(--danger); }

/* ---- Admin ---- */
.admin-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.admin-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; font-size: 14px; background: var(--surface-2); }
.admin-item strong { font-weight: 600; }
.admin-item .row { display: flex; gap: 8px; margin-top: 12px; }
.admin-item button { padding: 9px 14px; font-size: 14px; margin: 0; border-radius: 10px; font-weight: 600; }
.btn-approve { background: var(--ok); color: #fff; }
.btn-reject { background: var(--danger); color: #fff; }

/* ---- Atlas / Outils / Clinique ---- */
.atlas-card { max-width: 780px; }
.atlas-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.atlas-notice, #atlasNotice, #echoNotice { background: var(--gold-tint); border: 1px solid rgba(230,180,80,.3); color: var(--gold); padding: 11px 13px; border-radius: var(--radius); font-size: 14px; margin: 10px 0; }
.atlas-result { margin-top: 16px; min-height: 20px; }
.atlas-result img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.atlas-spinner { color: var(--ink-2); font-size: 14px; }
.atlas-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 10px; }
.atlas-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; border: 1px solid var(--line); cursor: pointer; transition: transform .15s; }
.atlas-gallery img:hover { transform: scale(1.03); }
.spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line-2); border-top-color: var(--rose); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
#echoResult { max-width: 100%; margin-top: 16px; }

/* ---- Calculateurs ---- */
.calc-result { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; }
.calc-row span { color: var(--ink-2); }
.calc-row strong { color: var(--rose-deep); font-weight: 600; font-family: var(--font-display); font-size: 16px; }

/* ---- Clinique ---- */
.result-actions { display: flex; gap: 8px; margin-top: 12px; }
.dictate-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#ordoResult, #reportResult { max-width: 100%; margin-top: 16px; }

/* ---- Footer disclaimer ---- */
.disclaimer {
  background: #1a1030; color: #c3b6d8; font-size: 12px; line-height: 1.55; text-align: center;
  padding: 13px 18px; padding-bottom: calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* ============================================================
   POLISH UI — avatar IA, actions, code, composer, boutons
   ============================================================ */
.msg-row { display: flex; gap: 9px; align-items: flex-start; align-self: flex-start; max-width: 90%; animation: rise .35s ease both; }
.msg-row .msg.assistant { max-width: 100%; animation: none; }
.msg-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px;
  background: radial-gradient(circle at 35% 30%, #ff6ec4, #c1396b 55%, #7b2ff7); box-shadow: 0 3px 12px rgba(123,92,255,.45); }
.msg-avatar svg { width: 16px; height: 16px; fill: #fff; }
.msg-actions { display: flex; gap: 6px; margin-top: 10px; }
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: var(--rose-tint); color: var(--rose-deep); border-color: var(--rose); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.busy { animation: spin .8s linear infinite; }

.codeblock { margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0b0918; }
.codebar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line); }
.code-lang { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.code-copy { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 9px; border-radius: 8px; transition: background .15s, color .15s; }
.code-copy:hover { background: var(--rose-tint); color: var(--rose-deep); }
.code-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.codeblock pre { margin: 0; border: none; border-radius: 0; }

.composer-row { align-items: center; }
.composer textarea { background: var(--surface-2); border-radius: 18px; padding: 12px 16px; }
.mic-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mic-btn:hover svg { stroke: var(--rose-deep); }
.mic-btn.listening svg { stroke: var(--danger); }
button.send-btn { width: 46px; height: 46px; border-radius: 50%; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.voice-convo-btn { display: inline-flex; align-items: center; gap: 6px; }
#newConvBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

button.primary:active, .send-btn:active, button.ghost:active { transform: translateY(1px) scale(.98); }

/* ---- Indicateur de frappe (l'IA écrit…) ---- */
.typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; background: var(--violet); }
.typing span:nth-child(3) { animation-delay: .3s; background: #21d4fd; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } }

/* ---- Entrée des messages ---- */
@keyframes slideR { from { opacity: 0; transform: translateX(14px) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: 0; transform: translateX(-10px) translateY(6px); } to { opacity: 1; transform: none; } }
.msg.user { animation: slideR .32s cubic-bezier(.2,.8,.25,1) both; }
.msg-row { animation: slideL .36s cubic-bezier(.2,.8,.25,1) both; }

/* ---- Accueil : orbe + suggestions ---- */
.empty-hint { max-width: 400px; }
.empty-orb { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ff6ec4, #c1396b 52%, #7b2ff7); box-shadow: 0 6px 30px rgba(123,92,255,.5); animation: orbFloat 3.6s ease-in-out infinite; }
.empty-orb svg { width: 30px; height: 30px; fill: #fff; }
@keyframes orbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; width: 100%; text-align: left; }
.suggestion-chip { text-align: left; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 12px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.4; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.suggestion-chip:hover { border-color: var(--rose); background: var(--rose-tint); }
.suggestion-chip:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .empty-orb, .msg.user, .msg-row { animation: none; } }

/* ============================================================
   RESPONSIVE — ultra (280px → 1920px)
   Globaux + paliers : 720 · 380 · 360 · 320 · 300 · 721 · 1200 · 1440 · paysage
   ============================================================ */

/* ---- Globaux anti-débordement & robustesse (toutes tailles) ---- */
html, body { max-width: 100%; overflow-x: hidden; }
#app, .view, .card, .chat, .atlas-card { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.chat, .chat-main, .messages, .msg, .sidebar, .composer-row, .calc-row, .admin-item, .atlas-head { min-width: 0; }
.msg, .admin-item { overflow-wrap: anywhere; word-break: break-word; }
.msg.assistant a, .admin-item a { word-break: break-all; }
.atlas-head, .calc-row, .result-actions, .dictate-row, .admin-item .row { flex-wrap: wrap; }
.composer-row { flex-wrap: nowrap; }
.composer textarea { flex: 1 1 auto; min-width: 0; }
.echo-preview img { display: block; max-width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
/* panneaux de résultat (.msg assistant rendus dans une .card) : pleine largeur */
#echoResult.msg, #ordoResult.msg, #reportResult.msg { max-width: 100%; align-self: stretch; }
/* la vue chat est un app-shell plein écran : pas d'animation d'entrée (le transform
   résiduel décalerait le composer sous la barre fixe) */
#view-chat { animation: none; }

/* ---- App-shell chat (toutes tailles) : le body ne scrolle pas, les messages
   scrollent en interne, le composer reste épinglé en bas. Les autres vues gardent
   le défilement de page. Cible le DOM uniquement quand la vue chat est active. ---- */
body:has(#view-chat:not([hidden])) { overflow: hidden; }
body:has(#view-chat:not([hidden])) #app { flex: 1 1 0; min-height: 0; }
body:has(#view-chat:not([hidden])) #view-chat.chat,
body:has(#view-chat:not([hidden])) .chat-main,
body:has(#view-chat:not([hidden])) .messages { min-height: 0; }

/* ---- Cibles tactiles ≥44px (partout, y.c. tablette) ---- */
button.ghost, button.link, .admin-item button, .conv-list li { min-height: 44px; }
.mic-btn { width: 46px; height: 46px; }

/* ---- input file lisible & borné ---- */
input[type="file"] { max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 8px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--rose-deep); font: inherit; font-size: 13px; cursor: pointer;
}

/* ---- Safe-area latérale (notch en paysage) ---- */
.topbar {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ---- Accessibilité clavier + mouvement réduit ---- */
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   MOBILE ≤720px — bottom tab bar
   ============================================================ */
@media (max-width: 720px) {
  #app {
    padding: 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .topbar { padding-top: 12px; padding-bottom: 12px; }
  .card { padding: 26px 20px; margin: 14px auto; }
  .chat { flex-direction: column; }
  .chat, .chat-main, .messages { min-height: 0; }
  .sidebar { width: 100%; max-height: 30vh; }
  .conv-list { flex-direction: row; overflow-x: auto; }
  .conv-list li { flex-shrink: 0; max-width: 170px; }
  .msg { max-width: 93%; }
  h1 { font-size: clamp(20px, calc(1rem + 2.2vw), 24px); }

  /* réserver la hauteur de la barre fixe (un seul inset, pas de double-comptage) */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .disclaimer { display: none; }

  /* navbar -> barre d'onglets fixe en bas (safe-area bas + gauche/droite) */
  .navbar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 60;
    gap: 2px;
    padding: 7px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: rgba(15,11,32,.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); border-bottom: none;
    box-shadow: 0 -6px 22px rgba(0,0,0,.4);
    justify-content: space-around; overflow-x: auto;
    transition: transform .2s ease;
  }
  .navbtn {
    flex: 1 1 0; min-width: 44px; min-height: 48px; flex-direction: column; gap: 3px;
    padding: 6px 4px; border-radius: 13px; color: var(--ink-3); font-weight: 600;
  }
  .nav-ico svg { width: 24px; height: 24px; }
  .nav-txt { font-size: 10px; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbtn:hover { background: transparent; color: var(--ink-2); border-color: transparent; }
  .navbtn.active {
    background: var(--rose-tint); color: var(--rose-deep); border-color: transparent; box-shadow: none;
  }

  /* clavier ouvert : on escamote la barre pour libérer la saisie
     (display:none — fiable même avec backdrop-filter, contrairement à transform) */
  body.kbd-open .navbar { display: none; }
  body.kbd-open { padding-bottom: env(safe-area-inset-bottom); }

  /* En mobile, le composer doit dégager la barre d'onglets fixe : on réserve sa
     hauteur dans #app (l'app-shell global gère déjà overflow/flex/scroll interne) */
  body:has(#view-chat:not([hidden])) { padding-bottom: 0; }
  body:has(#view-chat:not([hidden])) #app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.kbd-open:has(#view-chat:not([hidden])) #app { padding-bottom: 0; }
}

/* ---- Petits mobiles ≤380px ---- */
@media (max-width: 380px) {
  .topbar { padding-top: 10px; padding-bottom: 10px; }
  .brand { gap: 7px; }
  .brand span { font-size: 18px; }
  button.ghost { padding: 8px 10px; font-size: 13px; }
  .card { padding: 22px 16px; }
  .atlas-gallery { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
}

/* ---- Très petits ≤360px : compression réelle des 7 onglets + composer ---- */
@media (max-width: 360px) {
  .navbar { gap: 0; padding-top: 6px; justify-content: space-between; }
  .navbtn { min-width: 0; padding: 5px 1px; }
  .nav-ico svg { width: 21px; height: 21px; }
  .nav-txt { font-size: 8.5px; }
  .composer { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .composer-row { gap: 6px; }
  .composer button.primary { padding: 12px; font-size: 14px; }
  .mic-btn { width: 42px; height: 42px; font-size: 17px; }
  .admin-item { padding: 13px; }
  .admin-item .row button { flex: 1 1 auto; min-width: 120px; }
}

/* ---- Mini ≤320px ---- */
@media (max-width: 320px) {
  .brand img { width: 22px; height: 22px; }
  .brand span { font-size: 16px; }
}

/* ---- Ultra-mini ≤300px : onglets en icône seule ---- */
@media (max-width: 300px) {
  .nav-txt { display: none; }
  .navbtn { min-height: 46px; }
}

/* ---- Tablette ≥721px ---- */
@media (min-width: 721px) {
  .sidebar { width: clamp(180px, 22vw, 248px); }
}

/* ---- Desktop large ---- */
@media (min-width: 1200px) {
  .chat { max-width: 1200px; }
  #app .dash { max-width: 1040px; }
}
@media (min-width: 1440px) {
  .chat { max-width: 1280px; }
  .msg { max-width: 760px; }
  .msg.assistant { max-width: 720px; }
  #app .dash { max-width: 1160px; }
}

/* ---- Paysage mobile (faible hauteur) : barre d'onglets en ligne, vues compactes ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  body { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  .navbar { gap: 4px; padding: 5px 8px calc(4px + env(safe-area-inset-bottom)); }
  .navbtn { flex-direction: row; gap: 5px; min-height: 0; padding: 6px 10px; }
  .nav-ico svg { width: 18px; height: 18px; }
  .nav-txt { font-size: 11px; display: inline; }
  .chat { flex-direction: row; }
  .sidebar { width: 200px; max-height: none; }
  .chat-main { min-height: 0; }
  .messages { padding: 12px; }
  .card { margin: 8px auto; padding: 16px; }
}

/* ============================================================
   HISTORIQUE — résumés, catégories, dates, PDF
   ============================================================ */
.hist-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 6px; }
.hist-chip { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); border-radius: var(--radius-pill); padding: 6px 13px; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 36px; }
.hist-chip.active { background: var(--rose); color: #fffbfc; border-color: var(--rose); }
.hist-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hist-date { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 14px 2px 2px; }
.hist-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.hist-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hist-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.hist-badge { flex-shrink: 0; background: var(--rose-tint); color: var(--rose-deep); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hist-summary { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 7px 0 0; }
.hist-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.hist-when { color: var(--ink-3); font-size: 12.5px; }
.hist-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.hist-act { background: var(--surface); border: 1px solid var(--line-2); color: var(--rose-deep); border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 38px; }
.hist-act:hover { background: var(--rose-tint); border-color: var(--rose); }
.hist-act.danger { color: var(--danger); }
.hist-act.danger:hover { background: var(--danger-tint); border-color: #e0a99f; }

/* ============================================================
   MODE VOCAL — conversation temps réel (plein écran, mains-libres)
   ============================================================ */
.voice-convo-btn {
  background: linear-gradient(135deg, var(--rose), #7b2ff7);
  color: #fff; border: none; border-radius: var(--radius-pill);
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px;
  box-shadow: 0 3px 10px rgba(123,47,247,.25); transition: filter .15s, transform .1s;
}
.voice-convo-btn:hover { filter: brightness(1.08); }
.voice-convo-btn:active { transform: scale(.97); }

.voice-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  color: #ede7f6; overflow: hidden;
  background: radial-gradient(130% 80% at 50% 30%, #1b1030 0%, #120a22 45%, #080510 100%);
  animation: voicefade .28s ease both;
}
@keyframes voicefade { from { opacity: 0; } to { opacity: 1; } }
/* animated neon glowing border */
.voice-overlay::before {
  content: ""; position: absolute; inset: 7px; border-radius: 36px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, #ff3ea5, #7b2ff7, #2f6bff, #21d4fd, #ff3ea5);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; animation: voiceborder 8s linear infinite;
}
@keyframes voiceborder { to { background-position: 300% 0; } }

.voice-top { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.voice-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #f0e7fb; }
.voice-top-sp { width: 44px; }
.voice-back {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #ede7f6; font-size: 20px; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.voice-back:hover { background: rgba(255,255,255,.16); }

.voice-transcript {
  position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; width: 100%;
  margin: 14px 0 6px; padding: 4px 2px;
  display: flex; flex-direction: column; gap: 14px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}
.voice-transcript::-webkit-scrollbar { width: 0; }
.voice-line { font-size: 16px; line-height: 1.5; max-width: 92%; }
.voice-line.user { align-self: flex-end; text-align: right; color: #ffc8e4; }
.voice-line.ai { align-self: flex-start; color: #e9def5; }
.voice-line .who { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .45; margin-bottom: 3px; }

.voice-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* orbe plasma 3D */
.voice-orb {
  position: relative; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: none; background: #0a0612;
  box-shadow: 0 0 56px 10px rgba(150,60,255,.4), 0 0 120px 34px rgba(40,120,255,.2);
  transition: transform .08s linear, box-shadow .3s ease;
}
.voice-orb .vbl { position: absolute; border-radius: 50%; filter: blur(16px); mix-blend-mode: screen; }
.vbl1 { width: 120px; height: 120px; left: 6px; top: 0; background: radial-gradient(circle, #ff3ea5, transparent 64%); animation: vm1 6s ease-in-out infinite alternate; }
.vbl2 { width: 130px; height: 130px; right: 0; top: 8px; background: radial-gradient(circle, #7b2ff7, transparent 64%); animation: vm2 7.5s ease-in-out infinite alternate; }
.vbl3 { width: 120px; height: 120px; left: 0; bottom: -6px; background: radial-gradient(circle, #21d4fd, transparent 64%); animation: vm3 6.8s ease-in-out infinite alternate; }
.vbl4 { width: 104px; height: 104px; right: 6px; bottom: 0; background: radial-gradient(circle, #2f6bff, transparent 64%); animation: vm4 8.2s ease-in-out infinite alternate; }
@keyframes vm1 { to { transform: translate(34px, 40px) scale(1.18); } }
@keyframes vm2 { to { transform: translate(-40px, 30px) scale(.85); } }
@keyframes vm3 { to { transform: translate(38px, -34px) scale(1.15); } }
@keyframes vm4 { to { transform: translate(-30px, -26px) scale(1.2); } }
.voice-orb .vglass { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 26%, rgba(255,255,255,.6), rgba(255,255,255,.06) 32%, transparent 55%); }
.voice-orb .vrim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -14px 34px rgba(60,0,110,.55), inset 0 6px 22px rgba(255,255,255,.14); }
.voice-orb.listening { box-shadow: 0 0 72px 16px rgba(255,62,165,.5), 0 0 140px 40px rgba(123,47,247,.3); }
.voice-orb.speaking { animation: orbSpeak 2.4s ease-in-out infinite; }
@keyframes orbSpeak {
  0%, 100% { box-shadow: 0 0 60px 12px rgba(33,212,253,.45), 0 0 130px 36px rgba(123,47,247,.28); }
  50% { box-shadow: 0 0 92px 22px rgba(255,62,165,.55), 0 0 150px 44px rgba(47,107,255,.34); }
}
.voice-orb.thinking { filter: saturate(1.25); }

.voice-status { font-size: 14.5px; letter-spacing: .03em; color: #cdb6e8; min-height: 20px; font-weight: 500; }

.voice-wave { display: flex; align-items: center; gap: 4px; height: 26px; opacity: .3; transition: opacity .25s; }
.voice-wave.active { opacity: 1; }
.voice-wave i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(#21d4fd, #ff3ea5); transform: scaleY(.22); }
.voice-wave.active i { animation: wv 1s ease-in-out infinite; }
.voice-wave i:nth-child(1) { animation-delay: 0s; } .voice-wave i:nth-child(2) { animation-delay: .12s; }
.voice-wave i:nth-child(3) { animation-delay: .24s; } .voice-wave i:nth-child(4) { animation-delay: .36s; }
.voice-wave i:nth-child(5) { animation-delay: .18s; } .voice-wave i:nth-child(6) { animation-delay: .3s; }
.voice-wave i:nth-child(7) { animation-delay: .42s; } .voice-wave i:nth-child(8) { animation-delay: .22s; }
.voice-wave i:nth-child(9) { animation-delay: .1s; }
@keyframes wv { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

.voice-controls { position: relative; z-index: 2; width: 100%; max-width: 360px; margin-top: 22px; display: flex; align-items: center; justify-content: space-around; }
.vctrl { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: #b9a9d6; font-size: 11px; font-weight: 500; }
.vctrl-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); transition: background .15s; }
.vctrl:hover .vctrl-ic { background: rgba(255,255,255,.14); }
.vctrl-mic .vmic-ic {
  width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; border: none;
  background: radial-gradient(circle at 40% 35%, #ff6ec4, #c1396b 60%, #7b1f6a);
  box-shadow: 0 0 30px 6px rgba(255,77,157,.5); transition: transform .1s;
}
.vctrl-mic:active .vmic-ic { transform: scale(.95); }
.vctrl-mic.recording .vmic-ic { background: radial-gradient(circle at 40% 35%, #ff8fb0, #e0464a 60%, #a02a2e); animation: micrec 1.1s ease-in-out infinite; }
@keyframes micrec { 0%, 100% { box-shadow: 0 0 30px 6px rgba(224,70,74,.5); } 50% { box-shadow: 0 0 46px 12px rgba(224,70,74,.72); } }

@media (max-width: 360px) {
  .voice-orb { width: 142px; height: 142px; }
  .vctrl-mic .vmic-ic { width: 68px; height: 68px; font-size: 26px; }
  .vctrl-ic { width: 46px; height: 46px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-overlay::before, .voice-orb .vbl, .voice-orb.speaking, .voice-wave.active i, .vctrl-mic.recording .vmic-ic { animation: none; }
}

/* ============================================================
   TABLEAU DE BORD — accueil clinicien
   ============================================================ */
.dash { max-width: 920px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.dash h2 { font-family: var(--font-display); font-size: 17px; margin: 0; }

/* hero */
.dash-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, rgba(123,92,255,.20), rgba(224,81,138,.13));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.dash-hero::after {
  content: ""; position: absolute; right: -46px; top: -46px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,110,196,.28), transparent 70%); pointer-events: none;
}
.dash-hero-txt { position: relative; z-index: 1; min-width: 0; }
.dash-hello { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); margin: 0 0 2px; text-transform: none; }
.dash-prof { color: var(--rose-deep); }
.dash-name { font-family: var(--font-display); font-size: clamp(22px, 4.6vw, 30px); font-weight: 600; margin: 0 0 6px; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.dash-sub { margin: 0; max-width: 46ch; }
.dash-hero-orb {
  flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ff6ec4, #c1396b 52%, #7b2ff7); box-shadow: 0 6px 26px rgba(123,92,255,.5);
  animation: orbFloat 3.6s ease-in-out infinite;
}
.dash-hero-orb svg { width: 28px; height: 28px; fill: #fff; }

/* stats */
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; display: flex; flex-direction: column; min-width: 0; }
.stat-val { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; color: var(--rose-deep); }
.stat-text .stat-val { font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-lbl { font-size: 13px; color: var(--ink-2); margin-top: 7px; }
.stat-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* sections */
.dash-section { display: flex; flex-direction: column; gap: 12px; }
.dash-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-link { background: none; border: none; color: var(--rose); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; min-height: 0; }
.dash-link:hover { color: var(--gold); }

/* quick actions */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dash-tile {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-height: 100px;
  transition: border-color .15s, transform .12s, background .15s, box-shadow .18s;
}
.dash-tile:hover { border-color: var(--rose); background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.dash-tile:active { transform: translateY(0) scale(.99); }
.dash-tile-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 7px; background: var(--rose-tint); color: var(--rose-deep); }
.dash-tile-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-tile.accent .dash-tile-ic { background: linear-gradient(135deg, var(--rose), var(--violet)); color: #fff; box-shadow: 0 4px 14px rgba(123,92,255,.4); }
.dash-tile-t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.dash-tile-d { font-size: 12.5px; color: var(--ink-3); }

/* recent */
.dash-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.recent-card { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .12s; }
.recent-card:hover { border-color: var(--rose); transform: translateY(-2px); }
.recent-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.recent-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.recent-badge { flex-shrink: 0; background: var(--rose-tint); color: var(--rose-deep); border-radius: var(--radius-pill); padding: 3px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.recent-sum { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-when { font-size: 12px; color: var(--ink-3); }
.dash-empty { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 16px; margin: 0; }

/* suggestions */
.dash-suggs { display: flex; flex-direction: column; gap: 8px; }
.dash-sugg { display: flex; align-items: center; gap: 11px; text-align: left; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.4; cursor: pointer; transition: border-color .15s, background .15s; }
.dash-sugg:hover { border-color: var(--rose); background: var(--rose-tint); }
.dash-sugg svg { flex-shrink: 0; width: 17px; height: 17px; fill: var(--rose-deep); }

@media (max-width: 560px) {
  .dash { gap: 16px; }
  .dash-hero { padding: 18px 18px; }
  .dash-hero-orb { display: none; }
  .dash-stats { gap: 8px; }
  .stat-card { padding: 13px 12px; }
  .stat-val { font-size: 23px; }
  .stat-text .stat-val { font-size: 14.5px; }
  .stat-lbl { font-size: 12px; }
  .dash-tile { min-height: 92px; padding: 13px; }
}
@media (max-width: 400px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}