/* =====================================================================
   AkiliChat V64 — Modern design system (design refresh + accessibility)
   Loaded after style.css: this layer unifies colours, spacing, surfaces,
   navigation and form controls without touching the app's DOM contracts.
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
/* The app ships three themes (medium = default light, light, dark). V64 keeps
   that contract: the "medium" theme is a bright, airy interface with a blue
   brand header, while "dark" is a deep navy one. Both share the same geometry
   and accent language so components never need theme-specific rules. */
:root,
:root[data-theme="medium"] {
  --bg: #f3f6fc;
  --bg-accent: #eaf1fa;
  --panel: #ffffff;
  --card: #ffffff;
  --border: rgba(15, 35, 64, .12);
  --text: #0b1524;
  --muted: #526078;
  --primary: #0e72ed;
  --danger: #d81f45;
  --shadow: 0 18px 40px rgba(15, 35, 64, .12);
  --radius: 20px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;

  --d64-bg: #f3f6fc;
  --d64-bg-2: #eaf1fa;
  --d64-elev: #ffffff;
  --d64-elev-2: #f7faff;
  --d64-surface: #ffffff;
  --d64-soft: rgba(15, 35, 64, .045);
  --d64-soft-strong: rgba(15, 35, 64, .085);
  --d64-line: rgba(15, 35, 64, .12);
  --d64-line-strong: rgba(15, 35, 64, .24);
  --d64-text: #0b1524;
  --d64-muted: #526078;
  --d64-primary: #0e72ed;
  --d64-primary-2: #0b57bf;
  --d64-cyan: #0a7ea8;
  --d64-lime: #4f8f00;
  --d64-success: #12833f;
  --d64-danger: #d81f45;
  --d64-focus: #0b5fbf;
  --d64-ring: rgba(14, 114, 237, .22);
  --d64-shadow-lg: 0 26px 60px rgba(15, 35, 64, .18);
  --d64-shadow-md: 0 12px 28px rgba(15, 35, 64, .12);
  --d64-radius-xl: 26px;
  --d64-radius-lg: 20px;
  --d64-radius-md: 14px;
  --d64-radius-sm: 10px;
  --d64-safe-top: var(--akili-safe-top, env(safe-area-inset-top, 0px));
  --d64-safe-bottom: var(--akili-safe-bottom, env(safe-area-inset-bottom, 0px));
  --d64-tabbar: 0px;

  /* Legacy "V29 premium" tokens used by the existing shell: keep them in sync
     with the V64 palette so every inherited surface agrees. */
  --v29-page: #f3f6fc;
  --v29-page-alt: #eaf1fa;
  --v29-surface: #ffffff;
  --v29-surface-soft: #f7faff;
  --v29-text: #0b1524;
  --v29-subtext: #526078;
  --v29-line: rgba(15, 35, 64, .12);
  --v29-header-a: #0e72ed;
  --v29-header-b: #0a9bc4;
  --v29-header-c: #1fc88f;
  --v29-green: #12833f;
  --v29-blue: #0e72ed;
  --v29-purple: #5b4be0;
  --v29-shadow: 0 14px 34px rgba(15, 35, 64, .12);
  --v29-shadow-soft: 0 8px 22px rgba(15, 35, 64, .08);
  --v29-radius-xl: 28px;
  --v29-radius-lg: 22px;
  --v29-radius-md: 17px;
}

:root[data-theme="dark"] {
  --bg: #050a14;
  --bg-accent: #03060d;
  --panel: #0a1322;
  --card: #0e1930;
  --border: rgba(138, 168, 208, .16);
  --text: #f0f5ff;
  --muted: #a4b3ca;

  --d64-bg: #050a14;
  --d64-bg-2: #03060d;
  --d64-elev: #0a1322;
  --d64-elev-2: #060d18;
  --d64-surface: rgba(12, 22, 38, .94);
  --d64-soft: rgba(255, 255, 255, .05);
  --d64-soft-strong: rgba(255, 255, 255, .095);
  --d64-line: rgba(138, 168, 208, .16);
  --d64-line-strong: rgba(138, 168, 208, .30);
  --d64-text: #f0f5ff;
  --d64-muted: #a4b3ca;
  --d64-primary: #2e8bff;
  --d64-primary-2: #1b6fe0;
  --d64-cyan: #39d0ff;
  --d64-lime: #a8ff24;
  --d64-success: #22c55e;
  --d64-danger: #ff5a76;
  --d64-focus: #8ecbff;
  --d64-ring: rgba(46, 139, 255, .30);
  --d64-shadow-lg: 0 30px 80px rgba(0, 5, 16, .55);
  --d64-shadow-md: 0 14px 34px rgba(0, 5, 16, .38);

  --v29-page: #050a14;
  --v29-page-alt: #03060d;
  --v29-surface: #0a1322;
  --v29-surface-soft: #0e1930;
  --v29-text: #f0f5ff;
  --v29-subtext: #a4b3ca;
  --v29-line: rgba(138, 168, 208, .16);
  --v29-header-a: #0e5ad0;
  --v29-header-b: #0786a8;
  --v29-header-c: #0f9c74;
  --v29-green: #4ade80;
  --v29-blue: #60a5fa;
  --v29-purple: #a78bfa;
  --v29-shadow: 0 18px 42px rgba(0, 0, 0, .32);
  --v29-shadow-soft: 0 10px 26px rgba(0, 0, 0, .22);
}

:root[data-theme="light"] {
  --bg: #f7faff;
  --bg-accent: #eef4fd;
  --panel: #ffffff;
  --card: #ffffff;
  --border: rgba(15, 35, 64, .11);
  --text: #0b1524;
  --muted: #4f6076;
  --primary: #0e72ed;
  --danger: #cf123c;
  --shadow: 0 18px 40px rgba(15, 35, 64, .10);

  --d64-bg: #f7faff;
  --d64-bg-2: #eef4fd;
  --d64-elev: #ffffff;
  --d64-elev-2: #fbfdff;
  --d64-surface: #ffffff;
  --d64-soft: rgba(15, 35, 64, .04);
  --d64-soft-strong: rgba(15, 35, 64, .075);
  --d64-line: rgba(15, 35, 64, .11);
  --d64-line-strong: rgba(15, 35, 64, .22);
  --d64-text: #0b1524;
  --d64-muted: #4f6076;
  --d64-primary: #0e72ed;
  --d64-primary-2: #0b57bf;
  --d64-cyan: #0a7ea8;
  --d64-lime: #4f8f00;
  --d64-success: #12833f;
  --d64-danger: #cf123c;
  --d64-focus: #0b5fbf;
  --d64-ring: rgba(14, 114, 237, .22);
  --d64-shadow-lg: 0 26px 60px rgba(15, 35, 64, .14);
  --d64-shadow-md: 0 12px 28px rgba(15, 35, 64, .10);

  --v29-page: #f7faff;
  --v29-page-alt: #eef4fd;
  --v29-surface: #ffffff;
  --v29-surface-soft: #fbfdff;
  --v29-text: #0b1524;
  --v29-subtext: #4f6076;
  --v29-line: rgba(15, 35, 64, .11);
  --v29-header-a: #0e72ed;
  --v29-header-b: #0a9bc4;
  --v29-header-c: #1fc88f;
  --v29-shadow: 0 14px 34px rgba(15, 35, 64, .10);
  --v29-shadow-soft: 0 8px 22px rgba(15, 35, 64, .07);
}

/* ------------------------------------------------------------- base/global */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(46, 139, 255, .16), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(57, 208, 255, .10), transparent 55%),
    var(--d64-bg);
  color: var(--d64-text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

body.is-auth-screen {
  background:
    radial-gradient(1200px 700px at 8% -8%, rgba(46, 139, 255, .22), transparent 58%),
    radial-gradient(900px 600px at 100% 10%, rgba(168, 255, 36, .10), transparent 55%),
    var(--d64-bg);
}

:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(27, 111, 224, .14), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(10, 126, 168, .10), transparent 55%),
    var(--d64-bg);
}

::selection { background: rgba(46, 139, 255, .35); color: #fff; }
:root[data-theme="light"] ::selection { color: #06121f; }

/* Keep scrollbars discreet but visible (WCAG 2.2 - not hidden). */
* { scrollbar-width: thin; scrollbar-color: var(--d64-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--d64-line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.akili-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.ic--sm { width: 16px; height: 16px; }
.ic--xs { width: 13px; height: 13px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- focus/accessibility */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--d64-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Never remove focus indicators entirely, even for mouse users on controls. */
.btn:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.item:focus-visible {
  outline: 3px solid var(--d64-focus);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: max(10px, var(--d64-safe-top));
  left: 12px;
  z-index: 10050;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--d64-elev);
  color: var(--d64-text);
  border: 1px solid var(--d64-line-strong);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Comfortable tap targets everywhere (Android recommendation: 48dp). */
@media (pointer: coarse) {
  button, .btn, .icon-btn, .tab, .item, select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  .icon-btn { min-width: 44px; }
  a.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --d64-line: var(--d64-line-strong);
    --d64-muted: #dbe6f7;
  }
  :root[data-theme="light"] { --d64-muted: #24354b; }
  .btn, .icon-btn, .item, .tab, input, select, textarea { border-width: 2px; }
}

@media (forced-colors: active) {
  .btn, .icon-btn, .item, .tab, .tabbar-item, .live-btn { border: 1px solid ButtonBorder; }
  .live-top-btn__dot, .tabbar-item__badge { forced-color-adjust: none; }
}

/* ------------------------------------------------------------------ icons */
.icon-btn .ic { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ shell */
.app {
  grid-template-columns: minmax(320px, 384px) 1fr;
  height: 100vh;
  height: 100dvh;
  background: transparent;
}

.sidebar {
  padding: 14px;
  gap: 12px;
  border-right: 1px solid var(--d64-line);
  background: color-mix(in srgb, var(--d64-elev-2) 88%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  min-height: 0;
}
.sidebar::before,
.sidebar::after { display: none !important; }

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--d64-line);
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(46, 139, 255, .16), rgba(57, 208, 255, .06) 55%, rgba(168, 255, 36, .05));
  box-shadow: none;
}
:root[data-theme="light"] .brand {
  background: linear-gradient(150deg, rgba(27, 111, 224, .10), rgba(10, 126, 168, .05) 60%, rgba(79, 143, 0, .05));
}
.brand-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 13px;
  overflow: hidden;
  background: var(--d64-soft);
  box-shadow: 0 6px 18px rgba(3, 14, 32, .35);
}
.brand-logo { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 13px; }
.brand-copy { min-width: 0; }
.brand-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-tagline {
  font-size: 10.5px;
  color: var(--d64-muted);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.brand-actions .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }

.live-top-btn {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  gap: 5px;
  border-radius: 999px !important;
  border-color: rgba(168, 255, 36, .38) !important;
  background: rgba(168, 255, 36, .12) !important;
  color: #dcffb4 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
:root[data-theme="light"] .live-top-btn { color: #2f5c00 !important; border-color: rgba(79, 143, 0, .35) !important; background: rgba(79, 143, 0, .10) !important; }
.live-top-btn .ic { width: 16px; height: 16px; }
.live-top-btn__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d64-lime);
  box-shadow: 0 0 0 3px rgba(168, 255, 36, .18);
  animation: d64Pulse 2.4s ease-in-out infinite;
}
.live-top-btn__label { display: inline; }

@keyframes d64Pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.86); }
}

.panel {
  border: 1px solid var(--d64-line);
  border-radius: var(--d64-radius-lg);
  background: color-mix(in srgb, var(--d64-elev) 88%, transparent);
  padding: 14px;
  box-shadow: none;
}

/* ------------------------------------------------------------------- auth */
.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: var(--d64-radius-xl);
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(46, 139, 255, .18), transparent 65%),
    linear-gradient(180deg, var(--d64-elev), var(--d64-elev-2));
  border: 1px solid var(--d64-line);
  overflow: auto;
}
.auth-hero { display: flex; flex-direction: column; gap: 8px; }
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(168, 255, 36, .28);
  background: rgba(168, 255, 36, .10);
  color: #d9ffab;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
:root[data-theme="light"] .auth-eyebrow { color: #315c00; background: rgba(79, 143, 0, .10); border-color: rgba(79, 143, 0, .28); }
.auth-title {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 31px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
}
.auth-title-accent {
  background: linear-gradient(100deg, var(--d64-primary), var(--d64-cyan) 55%, var(--d64-lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .auth-title-accent { background: linear-gradient(100deg, #1259bb, #0a7ea8 60%, #4f8f00); -webkit-background-clip: text; background-clip: text; }
.auth-sub { margin: 0; color: var(--d64-muted); font-size: 13.5px; line-height: 1.5; }
.auth-features {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 2px 0 0;
}
.auth-features li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  color: var(--d64-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.auth-features .ic { color: var(--d64-cyan); }

.auth-panel .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 0;
  border-radius: 14px;
  background: var(--d64-soft);
  border: 1px solid var(--d64-line);
}
.auth-panel .tab {
  min-height: 42px;
  border: 0 !important;
  border-radius: 11px;
  background: transparent !important;
  color: var(--d64-muted);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-panel .tab.active {
  background: var(--d64-elev) !important;
  color: var(--d64-text) !important;
  box-shadow: 0 8px 20px rgba(0, 6, 18, .28);
}
:root[data-theme="light"] .auth-panel .tab.active { box-shadow: 0 6px 16px rgba(15, 35, 64, .12); }

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--d64-muted);
}
.field-control { position: relative; display: flex; align-items: center; }
.field-control > input,
.field-control > select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px 12px 38px;
  border-radius: 13px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  color: var(--d64-text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field-control > input[type="date"] { padding-left: 14px; }
.field-control > select { padding-left: 38px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field-control > input:focus,
.field-control > select:focus {
  outline: none;
  border-color: var(--d64-primary);
  box-shadow: 0 0 0 4px var(--d64-ring);
  background: var(--d64-elev);
}
.field-control > input::placeholder { color: color-mix(in srgb, var(--d64-muted) 78%, transparent); }
.field-icon {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--d64-muted);
  pointer-events: none;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-hint {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 193, 7, .12);
  border: 1px solid rgba(255, 193, 7, .35);
  color: #ffdf8a;
  font-size: 12px;
}
:root[data-theme="light"] .field-hint { color: #6b4d00; }

/* Password reveal button: readable in every theme. */
.field-control .eye-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  color: var(--d64-text) !important;
  background: var(--d64-soft-strong) !important;
  border: 1px solid var(--d64-line) !important;
  box-shadow: none !important;
}
.field-control .eye-btn:hover { background: var(--d64-soft) !important; }
.field-control > input[type="password"],
.field-control > input[type="text"] { padding-right: 52px; }

.password-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: -2px; }
.password-strength span { height: 4px; border-radius: 99px; background: var(--d64-soft-strong); transition: background .18s ease; }
.password-strength[data-score="1"] span:nth-child(-n+1) { background: #ff6b6b; }
.password-strength[data-score="2"] span:nth-child(-n+2) { background: #ffb020; }
.password-strength[data-score="3"] span:nth-child(-n+3) { background: #6ad48a; }
.password-strength[data-score="4"] span:nth-child(-n+4) { background: var(--d64-lime); }

.auth-hint { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--d64-muted); }
.auth-text-button {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--d64-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-text-button:hover { color: var(--d64-cyan); }
.auth-legal-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--d64-muted); text-align: center; }
.auth-legal-note a { color: var(--d64-primary); }
.auth-status {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.auth-form-heading h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.auth-form-heading p { margin: 0; font-size: 12.5px; color: var(--d64-muted); line-height: 1.45; }

/* --------------------------------------------------------------- controls */
.btn {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 13px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  color: var(--d64-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--d64-soft-strong); }
.btn:active { transform: scale(.985); }
.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--d64-primary), var(--d64-primary-2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(46, 139, 255, .28);
}
.btn.primary:hover { box-shadow: 0 12px 30px rgba(46, 139, 255, .38); }
.btn.danger {
  border-color: transparent;
  background: linear-gradient(135deg, #ff6b83, #e11d48);
  color: #fff;
  box-shadow: 0 10px 24px rgba(225, 29, 72, .25);
}
.btn.small { min-height: 36px; padding: 7px 11px; font-size: 12.5px; border-radius: 10px; }
.btn--block { width: 100%; min-height: 50px; font-size: 15px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.icon-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  color: var(--d64-text);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--d64-soft-strong); border-color: var(--d64-line-strong); }
.icon-btn:active { transform: scale(.96); }

input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--d64-text);
  background: var(--d64-soft);
  border: 1px solid var(--d64-line);
  border-radius: 13px;
}
input:focus, select:focus, textarea:focus { border-color: var(--d64-primary); box-shadow: 0 0 0 4px var(--d64-ring); outline: none; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--d64-muted) 78%, transparent); }

/* ----------------------------------------------------------- main navigation */
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
  padding: 12px;
  overflow: hidden;
}

.module-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
}
.module-chip {
  width: 100%;
  height: 58px;
  min-height: 58px;
  flex-direction: column;
  gap: 4px;
  border-radius: 14px;
  background: var(--d64-soft);
  padding: 6px 4px;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--d64-muted);
  white-space: nowrap;
  overflow: hidden;
}
.module-chip .ic { width: 20px; height: 20px; color: var(--d64-text); }
.module-chip:hover { color: var(--d64-text); background: var(--d64-soft-strong); border-color: var(--d64-line-strong); }
.module-chip__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.akilinext-entry-logo { width: 20px; height: 20px; object-fit: contain; }
.header-module-btn { padding: 0 !important; }

/* Akili Live promo card in the conversation list */
.live-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(46, 139, 255, .38);
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(57, 208, 255, .34), transparent 70%),
    linear-gradient(120deg, rgba(46, 139, 255, .28), rgba(27, 111, 224, .16) 55%, rgba(168, 255, 36, .14));
  color: var(--d64-text);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.live-hero:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(6, 24, 56, .35); border-color: rgba(57, 208, 255, .6); }
.live-hero:active { transform: scale(.995); }
.live-hero__glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 255, 36, .35), transparent 65%);
  filter: blur(6px);
  pointer-events: none;
}
.live-hero__icon {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(5, 12, 24, .35);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(6px);
}
:root[data-theme="light"] .live-hero__icon { background: rgba(255, 255, 255, .75); color: var(--d64-primary); border-color: rgba(15, 35, 64, .12); }
.live-hero__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.live-hero__title { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.live-hero__title strong { color: var(--d64-lime); }
:root[data-theme="light"] .live-hero__title strong { color: #3f7500; }
.live-hero__sub { font-size: 11.5px; color: var(--d64-muted); }
.live-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5, 12, 24, .30);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
:root[data-theme="light"] .live-hero__cta { background: rgba(255, 255, 255, .8); color: var(--d64-primary); border-color: rgba(15, 35, 64, .12); }

.search-row { display: flex; gap: 8px; margin: 0; align-items: center; }
.search-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.search-field__icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--d64-muted); pointer-events: none; }
.search-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 37px;
  border-radius: 13px;
  background: var(--d64-soft);
  border: 1px solid var(--d64-line);
  font-size: 14px;
}
#btnNewChat { min-width: 78px; height: 44px; padding: 0 12px; font-size: 13px; }
.btn--icon-text { white-space: nowrap; }

.friend-request-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 13px;
  border: 1px solid rgba(168, 255, 36, .3);
  background: rgba(168, 255, 36, .10);
  font-size: 12px;
  color: var(--d64-text);
}
:root[data-theme="light"] .friend-request-hint { background: rgba(79, 143, 0, .08); border-color: rgba(79, 143, 0, .28); }

/* Conversation list */
#conversationList {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px;
  scroll-behavior: smooth;
}
#conversationList .item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#conversationList .item:hover { background: var(--d64-soft); border-color: var(--d64-line); }
#conversationList .item.active {
  background: linear-gradient(90deg, rgba(46, 139, 255, .20), rgba(46, 139, 255, .05));
  border-color: rgba(46, 139, 255, .38);
}
:root[data-theme="light"] #conversationList .item.active { background: linear-gradient(90deg, rgba(27, 111, 224, .13), rgba(27, 111, 224, .03)); }
#conversationList .avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 15px;
  background: linear-gradient(145deg, rgba(46, 139, 255, .35), rgba(57, 208, 255, .20));
  border: 1px solid var(--d64-line);
  overflow: visible;
}
#conversationList .avatar img { border-radius: 15px; }
#conversationList .item.is-online .avatar::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--d64-success);
  border: 2.5px solid var(--d64-elev-2);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
}
#conversationList .item-title {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#conversationList .item-sub {
  font-size: 12px;
  color: var(--d64-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#conversationList .item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
#conversationList .item:hover .item-actions,
#conversationList .item:focus-within .item-actions,
#conversationList .item.active .item-actions { opacity: 1; }
#conversationList .item-privacy,
#conversationList .item-del {
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--d64-muted);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#conversationList .item-privacy:hover,
#conversationList .item-del:hover { background: var(--d64-soft-strong); color: var(--d64-text); }
#conversationList .item.is-blocked { opacity: .62; }
#conversationList:empty::after {
  content: "Aucune conversation pour l’instant. Lancez une discussion ou essayez Akili Live.";
  display: block;
  padding: 22px 12px;
  text-align: center;
  color: var(--d64-muted);
  font-size: 13px;
  line-height: 1.5;
}
.profile-icon-badges { position: absolute; right: -4px; bottom: -4px; display: flex; gap: 2px; }
.profile-icon-badge {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  background: var(--d64-elev);
  border: 1px solid var(--d64-line);
  line-height: 1;
}

.sidebar-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 2px;
  padding: 0;
}
.sidebar-footer .btn {
  min-height: 40px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 9px;
}
.sidebar-footer .btn.primary { grid-column: span 2; }
.friend-request-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--d64-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.sidebar-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  padding-top: 8px;
  margin-top: 0;
  border-top: 1px solid var(--d64-line);
  font-size: 10.5px;
  color: var(--d64-muted);
}
.sidebar-legal a { color: var(--d64-muted); text-decoration: none; }
.sidebar-legal a:hover { color: var(--d64-text); text-decoration: underline; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  min-height: 64px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--d64-line);
  background: color-mix(in srgb, var(--d64-elev-2) 86%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { gap: 10px; }
.topbar-actions { gap: 4px; }
#chatName { font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
#chatMeta { font-size: 11.5px; }
#chatHeaderAvatar { width: 40px; height: 40px; border-radius: 14px; }
#chatHeaderAvatar img { border-radius: 13px; }
.back-btn { display: none; }

/* ------------------------------------------------------------------- chat */
.content { padding: 0; }
.messages {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg-row { margin: 6px 0; }
.msg {
  max-width: min(680px, 86%);
  padding: 9px 12px;
  border-radius: 18px;
  border: 1px solid var(--d64-line);
  background: var(--d64-surface);
  box-shadow: none;
  font-size: 14.5px;
  line-height: 1.42;
}
.msg.me {
  background: linear-gradient(135deg, #2e8bff, #1b6fe0);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(27, 111, 224, .22);
}
.msg.me a { color: #eaf5ff; }
.msg.me .msg-meta,
.msg.me .muted { color: rgba(255, 255, 255, .78); }
.msg-meta { margin-top: 5px; font-size: 10.5px; color: var(--d64-muted); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text-original { margin-top: 4px; font-size: 12px; opacity: .78; border-left: 2px solid var(--d64-line-strong); padding-left: 8px; }
.msg-media-img, .msg-media-video { border-radius: 14px; max-width: 100%; }
.msg-reply-btn, .msg-react-btn, .msg-report-btn, .msg-del {
  width: 30px; height: 30px; min-width: 30px; min-height: 30px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--d64-muted);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-reply-btn:hover, .msg-react-btn:hover, .msg-report-btn:hover, .msg-del:hover {
  background: var(--d64-soft-strong); color: var(--d64-text);
}
.msg.me .msg-reply-btn, .msg.me .msg-react-btn, .msg.me .msg-del { color: rgba(255, 255, 255, .82); }
.msg.me .msg-reply-btn:hover, .msg.me .msg-react-btn:hover, .msg.me .msg-del:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.msg-actions { display: inline-flex; gap: 2px; }
.typing { padding: 4px 16px 0; font-size: 11.5px; color: var(--d64-muted); }

.composer {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px calc(10px + var(--akili-safe-bottom, 0px) + var(--d64-tabbar));
  border-top: 1px solid var(--d64-line);
  background: color-mix(in srgb, var(--d64-elev-2) 90%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.composer .icon-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 12px; background: transparent; border-color: transparent; color: var(--d64-muted); }
.composer .icon-btn:hover { background: var(--d64-soft-strong); color: var(--d64-text); }
#messageInput {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 46px;
  max-height: 132px;
  padding: 12px 15px;
  border-radius: 16px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  color: var(--d64-text);
  font-size: 15px;
  line-height: 1.3;
  resize: none;
}
#messageInput:focus { border-color: var(--d64-primary); box-shadow: 0 0 0 4px var(--d64-ring); }
.btn--send { min-width: 48px; width: auto; height: 46px; min-height: 46px; border-radius: 16px; padding: 0 14px; gap: 6px; }
.btn--send .ic { width: 18px; height: 18px; }
.btn--send__label { font-size: 13px; }

/* Composer action strip: on phones the seven attachment buttons get their own
   row, which keeps every feature reachable without squeezing the text field. */
.composer-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer-actions::-webkit-scrollbar { display: none; }
.composer-actions .icon-btn { flex: 0 0 auto; }

/* "More" composer menu (mobile) */
.composer-more {
  position: fixed;
  right: 12px;
  bottom: calc(84px + var(--akili-safe-bottom, 0px) + var(--d64-tabbar));
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--d64-line);
  background: var(--d64-elev);
  box-shadow: var(--d64-shadow-md);
  min-width: 172px;
}
.composer-more__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--d64-text);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.composer-more__item:hover { background: var(--d64-soft-strong); }

#emojiPanel {
  border: 1px solid var(--d64-line);
  border-radius: 18px 18px 0 0;
  background: var(--d64-elev);
  box-shadow: var(--d64-shadow-md);
}
.emoji-btn { border-radius: 11px; border-color: transparent; background: transparent; }
.emoji-btn:hover { background: var(--d64-soft-strong); }

.voice-recorder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--d64-line);
  background: var(--d64-elev-2);
  font-size: 13px;
}
.voice-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--d64-danger); animation: d64Pulse 1.2s infinite; }

/* --------------------------------------------------------------- home view */
#emptyState.empty-brand,
#emptyState {
  border: 0;
  background: transparent;
  padding: 0;
  display: block;
  overflow-y: auto;
}
.brand-landing {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(780px, 100%);
  margin: 0 auto;
  padding: 10px 4px 20px;
}
.landing-copy { display: flex; align-items: center; gap: 14px; }
.landing-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(3, 16, 38, .38);
  flex: 0 0 auto;
}
.empty-title { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
#emptyState .muted { font-size: 13px; line-height: 1.5; margin-top: 5px; color: var(--d64-muted); }

.live-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(46, 139, 255, .36);
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(57, 208, 255, .26), transparent 70%),
    linear-gradient(120deg, rgba(46, 139, 255, .22), rgba(27, 111, 224, .10) 60%, rgba(168, 255, 36, .10));
  color: var(--d64-text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.live-cta-card:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(3, 16, 38, .4); border-color: rgba(57, 208, 255, .6); }
.live-cta-card__visual { position: relative; width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; }
.live-cta-card__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(57, 208, 255, .45);
  animation: d64Ripple 3s ease-out infinite;
}
.live-cta-card__ring--2 { animation-delay: 1.5s; }
@keyframes d64Ripple {
  0% { transform: scale(.7); opacity: .85; }
  100% { transform: scale(1.35); opacity: 0; }
}
.live-cta-card__icon {
  width: 30px; height: 30px;
  color: #fff;
  background: linear-gradient(135deg, var(--d64-primary), var(--d64-cyan));
  border-radius: 50%;
  padding: 13px;
  box-sizing: content-box;
  box-shadow: 0 8px 22px rgba(46, 139, 255, .4);
  position: relative;
  z-index: 1;
}
.live-cta-card__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.live-cta-card__eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--d64-cyan); }
:root[data-theme="light"] .live-cta-card__eyebrow { color: #0a6f95; }
.live-cta-card__title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.live-cta-card__sub { font-size: 12.5px; color: var(--d64-muted); line-height: 1.45; max-width: 48ch; }
.live-cta-card__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--d64-primary), var(--d64-primary-2));
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(46, 139, 255, .3);
}
.landing-hero {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--d64-line);
  box-shadow: var(--d64-shadow-md);
}
.landing-features { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-features span {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--d64-muted);
}

/* ------------------------------------------------------------------ modals */
.modal { padding: 16px; background: rgba(2, 7, 16, .62); backdrop-filter: blur(8px); }
.modal-card {
  width: min(600px, 96vw);
  border-radius: 26px;
  border: 1px solid var(--d64-line);
  background: linear-gradient(180deg, var(--d64-elev), var(--d64-elev-2));
  box-shadow: var(--d64-shadow-lg);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--d64-line);
  font-weight: 750;
  font-size: 16px;
  letter-spacing: -.015em;
}
.modal-body { padding: 16px; gap: 12px; }
.modal--wide .modal-card { width: min(1080px, 96vw); }
@media (max-width: 900px) {
  .modal.modal--mobile-full .modal-card { border-radius: 0; }
}

.dialog-description { font-size: 14px; line-height: 1.55; color: var(--d64-text); }

/* Settings: native-looking switches */
.settings-feature-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--d64-line);
  background: var(--d64-soft);
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--d64-line);
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
}
.settings-toggle-row:last-of-type { border-bottom: 0; }
.settings-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
  min-width: 46px;
  min-height: 27px;
  border-radius: 999px;
  background: var(--d64-soft-strong);
  border: 1px solid var(--d64-line-strong);
  position: relative;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  margin: 0;
}
.settings-toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
  transition: transform .18s ease;
}
.settings-toggle-row input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--d64-primary), var(--d64-primary-2));
  border-color: transparent;
}
.settings-toggle-row input[type="checkbox"]:checked::after { transform: translateX(19px); }
.settings-select-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13.5px; }
.settings-select-row select { min-height: 40px; }
.settings-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ------------------------------------------------------------------ toasts */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--d64-safe-bottom, 0px));
  transform: translate(-50%, 18px);
  z-index: 5000;
  max-width: min(420px, 90vw);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--d64-line-strong);
  background: color-mix(in srgb, var(--d64-elev) 96%, transparent);
  color: var(--d64-text);
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.4;
  box-shadow: var(--d64-shadow-md);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.app-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.offline-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  top: max(10px, var(--d64-safe-top));
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 176, 32, .45);
  background: color-mix(in srgb, #3a2a08 92%, transparent);
  color: #ffe3a3;
  font-size: 12.5px;
  box-shadow: var(--d64-shadow-md);
}
:root[data-theme="light"] .offline-banner { background: #fff7e6; color: #6a4a00; }

/* --------------------------------------------------------------- tab bar */
.tabbar { display: none; }

@media (max-width: 920px) {
  :root { --d64-tabbar: 0px; }

  .app { grid-template-columns: 1fr !important; }
  .sidebar { padding: 12px 12px calc(84px + var(--d64-safe-bottom, 0px)); gap: 10px; border-right: 0; background: transparent; }
  .panel { border-radius: 20px; }
  .brand { padding: 9px 10px; border-radius: 16px; }
  .brand-tagline { display: none; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px 8px calc(6px + var(--d64-safe-bottom, 0px));
    border-top: 1px solid var(--d64-line);
    background: color-mix(in srgb, var(--d64-elev-2) 92%, transparent);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 -12px 30px rgba(0, 5, 16, .28);
  }
  .tabbar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--d64-muted);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
  }
  .tabbar-item .ic { width: 22px; height: 22px; }
  .tabbar-item[aria-current="page"] { color: var(--d64-text); background: rgba(46, 139, 255, .13); }
  .tabbar-item[aria-current="page"] .ic { color: var(--d64-cyan); }
  .tabbar-item--live .ic { color: var(--d64-lime); }
  .tabbar-item--live[aria-current="page"] { background: rgba(168, 255, 36, .12); }
  .tabbar-item__badge {
    position: absolute;
    top: 7px;
    right: calc(50% - 17px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d64-lime);
    box-shadow: 0 0 0 3px rgba(168, 255, 36, .16);
  }

  body:not(.is-authenticated) .tabbar { display: none; }
  body.chat-mode .tabbar { display: none; }
  body.live-open .tabbar { display: none; }
  body.chat-mode .sidebar { display: none; }
  body.chat-mode .main { display: flex; }
  body.chat-mode .content { padding: 0; }
  body.chat-mode .messages { padding: 10px 10px 4px; }
  body.chat-mode .msg { max-width: 90%; }
  body:not(.chat-mode) .main { display: none; }

  .composer { padding-bottom: calc(10px + var(--akili-safe-bottom, 0px)); flex-wrap: wrap; row-gap: 6px; }
  .composer-actions { flex: 1 1 100%; order: 1; justify-content: space-between; gap: 0; }
  .composer-actions .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  #messageInput { order: 2; flex: 1 1 auto; }
  .btn--send { order: 3; }
  body.chat-mode .btn--send__label { display: none; }
  body.chat-mode .btn--send { min-width: 46px; width: 46px; padding: 0; border-radius: 50%; }
  .sidebar-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .brand-actions { gap: 4px; }
  .brand-actions .icon-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .brand-title { font-size: 16px; }
  .live-top-btn { padding: 0 8px !important; }
  .auth-panel { padding: 14px; }
  .field-row { grid-template-columns: 1fr; }
  .live-cta-card { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .live-cta-card__action { grid-column: 1 / -1; justify-content: center; }
  .landing-copy { align-items: flex-start; }
  .module-chip { height: 54px; min-height: 54px; font-size: 10px; }
  .tabbar-item { font-size: 9.5px; }
}

@media (min-width: 921px) {
  .tabbar { display: none !important; }
  .composer-actions { overflow: visible; }
}

/* Low-data / low-power modes keep the interface usable but lighter. */
.low-data-mode .live-cta-card__ring,
.low-power-mode .live-cta-card__ring { animation: none; }
.low-power-mode .live-top-btn__dot { animation: none; }

/* =====================================================================
   V64 final compatibility layer
   The historical stylesheet contains a "V29 premium" skin with !important
   declarations. The rules below are intentionally equally specific and load
   last, so the V64 surface language always wins while every legacy layout
   (search pill, footer tiles, chat header) keeps working untouched.
   ===================================================================== */

/* Brand header ------------------------------------------------------- */
.brand { gap: 12px; }
.brand .brand-mark {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: 0 8px 20px rgba(4, 30, 70, .25);
}
.brand .brand-logo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 13px !important;
  object-fit: cover;
}
.brand-title { color: #fff !important; letter-spacing: -.02em; }
.brand-tagline { color: rgba(255, 255, 255, .86) !important; }
.brand-actions .icon-btn {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}
.brand-actions .icon-btn:hover { background: rgba(255, 255, 255, .24) !important; }

/* Solid lime Akili Live pill: readable on the blue header in every theme. */
.live-top-btn {
  color: #0b2a00 !important;
  background: linear-gradient(135deg, #d4ff9a, #9bef2f) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(9, 46, 0, .28);
}
.live-top-btn__dot { background: #14520a; box-shadow: 0 0 0 3px rgba(20, 82, 10, .22); }

/* Authenticated shell ------------------------------------------------ */
body.is-authenticated .search-row::before { opacity: .55 !important; }
.search-field__icon { display: none !important; }
body.is-authenticated #conversationList.list {
  gap: 4px !important;
  padding: 2px !important;
}
body.is-authenticated #mainPanel.panel:not(.hidden) { overflow: hidden; }

/* Auth card: consistent with V64 in medium, light and dark themes. */
body.is-auth-screen #authPanel,
body.auth-booting #authPanel {
  width: min(540px, 100%) !important;
  margin: 0 auto 18px !important;
  padding: 16px !important;
  border: 1px solid var(--d64-line) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, var(--d64-elev), var(--d64-elev-2)) !important;
  color: var(--d64-text) !important;
  box-shadow: var(--d64-shadow-lg) !important;
  backdrop-filter: blur(18px);
}
body.is-auth-screen #authPanel .tabs,
body.auth-booting #authPanel .tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--d64-line) !important;
  border-radius: 14px !important;
  background: var(--d64-soft) !important;
}
body.is-auth-screen #authPanel .tab,
body.auth-booting #authPanel .tab {
  min-height: 42px;
  padding: 10px 8px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--d64-muted) !important;
  box-shadow: none !important;
  font-weight: 700;
}
body.is-auth-screen #authPanel .tab.active,
body.auth-booting #authPanel .tab.active {
  background: var(--d64-elev) !important;
  color: var(--d64-text) !important;
  box-shadow: 0 8px 20px rgba(15, 35, 64, .10) !important;
}
body.is-auth-screen #authPanel .tab.active::after,
body.auth-booting #authPanel .tab.active::after {
  content: none !important;
  display: none !important;
}
body.is-auth-screen #authPanel .form,
body.auth-booting #authPanel .form {
  gap: 12px !important;
  padding: 0 !important;
}
body.is-auth-screen #authPanel input,
body.is-auth-screen #authPanel select,
body.auth-booting #authPanel input,
body.auth-booting #authPanel select {
  min-height: 48px !important;
  border-radius: 13px !important;
  border: 1px solid var(--d64-line) !important;
  background: var(--d64-soft) !important;
  color: var(--d64-text) !important;
  font-size: 15px !important;
}
body.is-auth-screen #authPanel input:focus,
body.is-auth-screen #authPanel select:focus,
body.auth-booting #authPanel input:focus,
body.auth-booting #authPanel select:focus {
  border-color: var(--d64-primary) !important;
  box-shadow: 0 0 0 4px var(--d64-ring) !important;
}
body.is-auth-screen #authPanel .btn.primary,
body.auth-booting #authPanel .btn.primary {
  min-height: 50px !important;
  border-radius: 13px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--d64-primary), var(--d64-primary-2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(14, 114, 237, .28) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}
.auth-eyebrow {
  color: #2f5c00;
  background: rgba(79, 143, 0, .10);
  border-color: rgba(79, 143, 0, .26);
}
:root[data-theme="dark"] .auth-eyebrow {
  color: #d9ffab;
  background: rgba(168, 255, 36, .10);
  border-color: rgba(168, 255, 36, .26);
}

/* Live promo surfaces are always on a saturated gradient: keep white text. */
.live-hero,
.live-hero:hover { color: #fff !important; }
.live-hero__title { color: #fff !important; }
.live-hero__title strong { color: #e2ffb5 !important; }
.live-hero__sub { color: rgba(255, 255, 255, .84) !important; }
.live-hero__cta {
  color: #fff !important;
  background: rgba(3, 16, 38, .34) !important;
  border-color: rgba(255, 255, 255, .30) !important;
}
.live-cta-card,
.live-cta-card:hover { color: #fff !important; }
.live-cta-card__title { color: #fff !important; }
.live-cta-card__sub { color: rgba(255, 255, 255, .84) !important; }
.live-cta-card__eyebrow { color: #e2ffb5 !important; }
.live-cta-card__action {
  background: #fff !important;
  color: #0b57bf !important;
  box-shadow: 0 10px 22px rgba(2, 16, 40, .22) !important;
}

/* Chat header, modal head and primary surfaces stay on the brand gradient:
   ensure every text node inside them keeps AA contrast. */
.topbar, .topbar * { text-shadow: none; }
#chatName { color: #fff; }
#chatMeta { color: rgba(255, 255, 255, .82) !important; }

/* Message bubbles on light surfaces */
.msg { color: var(--d64-text); }
.msg .muted { color: var(--d64-muted); }
.msg.me, .msg.me .muted, .msg.me a { color: #fff; }
.msg.me .msg-meta { color: rgba(255, 255, 255, .80); }

/* Tab bar: light glass with a clear active state. */
@media (max-width: 920px) {
  .tabbar {
    background: color-mix(in srgb, var(--d64-elev) 94%, transparent);
    box-shadow: 0 -10px 26px rgba(15, 35, 64, .10);
  }
  .tabbar-item { color: var(--d64-muted); }
  .tabbar-item[aria-current="page"] {
    color: var(--d64-primary);
    background: rgba(14, 114, 237, .10);
  }
  .tabbar-item[aria-current="page"] .ic { color: var(--d64-primary); }
}

/* Dark theme refinements */
:root[data-theme="dark"] .brand .brand-mark { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .live-cta-card__action { color: #0b1524 !important; }
:root[data-theme="dark"] .tabbar { box-shadow: 0 -10px 26px rgba(0, 0, 0, .35); }

/* Android 15+ insets are applied natively to the WebView; keep a minimum
   breathing room on devices that report a zero safe area. */
@supports (padding: max(0px)) {
  .live-header { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
}

/* Composer: hide the legacy tiles so the action strip stays airy. */
.composer-actions .icon-btn,
.composer .icon-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--d64-muted) !important;
}
.composer-actions .icon-btn:hover,
.composer .icon-btn:hover {
  background: var(--d64-soft-strong) !important;
  color: var(--d64-text) !important;
}
.composer-actions .icon-btn:focus-visible,
.composer .icon-btn:focus-visible {
  border-color: var(--d64-primary) !important;
}

/* Very small screens (≤ 360 dp, e.g. 480 px @ 240 dpi): keep the brand header
   on one line by collapsing the Live pill to its icon and trimming the title. */
@media (max-width: 360px) {
  .brand { gap: 8px; padding-left: 12px !important; padding-right: 12px !important; }
  .brand-left { min-width: 0; overflow: hidden; }
  .brand-title {
    font-size: 19px !important;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-actions { gap: 4px !important; flex-wrap: nowrap; }
  .brand-actions .icon-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  .live-top-btn { width: 36px !important; min-width: 36px !important; padding: 0 !important; position: relative; }
  .live-top-btn__label { display: none !important; }
  .live-top-btn__dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; }
  .brand-mark { width: 34px !important; height: 34px !important; }
  .module-chip { font-size: 9.5px; }
  .live-hero { padding: 10px; gap: 8px; }
  .live-hero__cta { display: none; }
}

/* =========================================================================
   V66 — correctifs de la liste des conversations
   ========================================================================= */

/* 1. Bloquer / supprimer : visibles en permanence.
   L'ancienne règle ne les révélait qu'au survol (:hover), impossible sur un
   écran tactile : les boutons restaient transparents mais cliquables. */
#conversationList .item-actions {
  opacity: 1 !important;
  gap: 6px !important;
  transition: none !important;
}
#conversationList .item-privacy,
#conversationList .item-del {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid var(--d64-line) !important;
  background: var(--d64-elev) !important;
  color: var(--d64-text) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(15, 35, 64, .08) !important;
}
#conversationList .item-privacy {
  color: var(--d64-danger) !important;
}
#conversationList .item-del {
  color: var(--d64-danger) !important;
  background: color-mix(in srgb, var(--d64-danger) 10%, var(--d64-elev)) !important;
  border-color: color-mix(in srgb, var(--d64-danger) 30%, var(--d64-line)) !important;
}
#conversationList .item-privacy:hover,
#conversationList .item-del:hover {
  background: var(--d64-soft-strong) !important;
}
#conversationList .item-privacy:focus-visible,
#conversationList .item-del:focus-visible {
  outline: 3px solid var(--d64-focus);
  outline-offset: 2px;
}

/* 2. Paramètres / déconnexion : un seul pictogramme.
   style.css dessine déjà une icône via ::before ; le SVG inline ajouté dans
   le bouton produisait un second engrenage / une seconde croix superposés. */
#btnSettings::before,
#btnLogout::before,
#btnLive::before {
  content: none !important;
  display: none !important;
}
#btnSettings .ic,
#btnLogout .ic,
#btnLive .ic {
  width: 21px;
  height: 21px;
}

/* 3. Jeux / AkiliNext / Actualités : surface pleine et texte lisible.
   .auth-only-action forçait display:inline-flex !important sur la rail, ce
   qui cassait la grille 3 colonnes et rendait les tuiles transparentes. */
body.is-authenticated .module-rail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
.module-chip {
  background: var(--d64-elev) !important;
  border: 1px solid var(--d64-line) !important;
  color: var(--d64-text) !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(15, 35, 64, .06) !important;
}
.module-chip .ic {
  color: var(--d64-primary) !important;
}
.module-chip__label {
  display: block !important;
  color: var(--d64-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-chip:hover {
  background: var(--d64-soft-strong) !important;
  border-color: var(--d64-line-strong) !important;
}

/* 4. Un seul accès Boutique sur mobile : la tuile du pied de liste faisait
   doublon avec l'onglet Boutique de la barre inférieure. On conserve la tuile
   sur ordinateur (où la barre d'onglets n'existe pas). */
@media (max-width: 920px) {
  body.is-authenticated .sidebar-footer #btnMonetization {
    display: none !important;
  }
}