/* SAUDSD AI — macOS-inspired glass UI, RTL */
* { box-sizing: border-box; }

:root {
  --bg: #07080c;
  --bg-accent-a: #101522;
  --bg-accent-b: #0a0d14;
  --panel: rgba(28, 30, 36, 0.78);
  --panel2: rgba(36, 40, 48, 0.88);
  --line: rgba(255, 255, 255, 0.1);
  --fg: #f5f5f7;
  --muted: #9898a0;
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.18);
  --err: #ff453a;
  --warn: #ff9f0a;
  --warn-strong: #ff6723;
  --glass-bg: rgba(22, 24, 30, 0.62);
  --glass-bg-strong: rgba(18, 20, 26, 0.78);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --glass-blur: 22px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 0 var(--glass-highlight) inset, 0 8px 32px rgba(0, 0, 0, 0.28);
  --body-bg:
    radial-gradient(ellipse 58% 46% at 88% 4%, rgba(10, 132, 255, 0.28), transparent 68%),
    radial-gradient(ellipse 48% 40% at 6% 94%, rgba(94, 92, 230, 0.22), transparent 70%),
    radial-gradient(ellipse 34% 28% at 52% 54%, rgba(0, 199, 255, 0.08), transparent 72%),
    linear-gradient(145deg, #111827 0%, #070b14 46%, #02040a 100%);
  --surface: var(--glass-bg);
  --surface-strong: var(--glass-bg-strong);
  --surface-input: rgba(255, 255, 255, 0.06);
  --surface-border: var(--glass-border);
  --surface-blur: blur(var(--glass-blur)) saturate(165%);
  --chat-surface: transparent;
  --chat-bubble-assistant-bg: var(--panel2);
  --chat-bubble-assistant-border: rgba(255, 255, 255, 0.12);
  --chat-bubble-assistant-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.18);
  --chat-bubble-assistant-fg: var(--fg);
  --chat-bubble-system-fg: var(--muted);
  --metric-size: 1.75rem;
  --enter-ms: 180ms;
}

html.light-theme {
  --bg: #eef0f6;
  --bg-accent-a: #ffffff;
  --bg-accent-b: #e3e6ef;
  --panel: rgba(255, 255, 255, 0.72);
  --panel2: rgba(255, 255, 255, 0.92);
  --line: rgba(0, 0, 0, 0.08);
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --accent: #007aff;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 28px rgba(0, 0, 0, 0.06);
  --body-bg:
    radial-gradient(ellipse 62% 48% at 92% 2%, rgba(0, 122, 255, 0.17), transparent 68%),
    radial-gradient(ellipse 52% 44% at 4% 96%, rgba(175, 82, 222, 0.13), transparent 72%),
    radial-gradient(ellipse 38% 30% at 48% 52%, rgba(90, 200, 250, 0.12), transparent 74%),
    linear-gradient(145deg, #ffffff 0%, #f3f7ff 48%, #e9edf7 100%);
  --surface-input: rgba(255, 255, 255, 0.92);
  --chat-surface: #d8dce8;
  --chat-bubble-assistant-bg: #ffffff;
  --chat-bubble-assistant-border: rgba(0, 0, 0, 0.22);
  --chat-bubble-assistant-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 22px rgba(0, 0, 0, 0.1);
  --chat-bubble-assistant-fg: #1d1d1f;
  --chat-bubble-system-fg: #515154;
  --chat-bubble-user-bg: #0056b3;
}

html.plain-theme {
  --surface-blur: none;
}

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--body-bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  .page.active {
    animation: page-enter var(--enter-ms) ease-out both;
  }
  .card {
    animation: card-enter calc(var(--enter-ms) + 20ms) ease-out both;
  }
  #chatView:not(.hide) {
    animation: chat-enter var(--enter-ms) ease-out both;
  }
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chat-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page.active,
  .card,
  #chatView:not(.hide) {
    animation: none !important;
  }
}

.hide { display: none !important; }

input, textarea, button {
  font: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface-input);
  color: var(--fg);
  padding: 10px 12px;
  outline: none;
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}
input:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
button {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent));
  border-color: color-mix(in srgb, var(--accent) 80%, black 20%);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(10, 132, 255, 0.22);
}
button:hover { filter: brightness(1.06); }
button.btn-secondary {
  background: var(--surface-input);
  border-color: var(--surface-border);
  color: var(--fg);
  filter: none;
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}
button.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-input));
  filter: none;
}
button.btn-consequential {
  background: linear-gradient(135deg, var(--warn), var(--warn-strong));
  border-color: var(--warn-strong);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(230, 126, 34, 0.35);
}
button.btn-consequential:hover {
  filter: brightness(1.06);
}
button.danger {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
textarea { width: 100%; resize: vertical; }

.err { color: var(--err); min-height: 18px; margin-top: 8px; font-size: 13px; }

/* ---------- login ---------- */
.login {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login .card { width: 100%; max-width: 360px; text-align: center; }
.login input { width: 100%; margin: 10px 0; }
.login button { width: 100%; }

.brand { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.sub { color: var(--muted); font-size: 12px; line-height: 1.45; }
.title { font-size: 22px; font-weight: 700; margin: 4px 0 0; }
.metric-label {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 6px;
}
.metric-value {
  font-size: var(--metric-size);
  font-weight: 800;
  line-height: 1.15;
  color: var(--accent);
}
.section-heading {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---------- shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100%;
  background: transparent;
}
.side {
  background: var(--surface-strong);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border-inline-start: 1px solid var(--surface-border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-inline-end: 2px;
}
.nav a, .bottom a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-label { line-height: 1.25; }
.nav a:hover {
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
  border-color: var(--surface-border);
}
.nav a.active {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-border));
  font-weight: 700;
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
}
.bottom { margin-top: auto; }

.main { padding: 20px 24px; background: transparent; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.toolbar { display: flex; gap: 10px; align-items: center; }
.guest-portal-btn { flex: 1 1 140px; min-width: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.card {
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.home-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.quick-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: var(--fg);
  font-weight: 700;
  box-shadow: var(--shadow-card);
}
.quick-link-card .nav-icon { width: 22px; height: 22px; color: var(--accent); }
.theme-segment {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: var(--surface-input);
  border: 1px solid var(--surface-border);
  margin: 10px 0 12px;
}
.theme-segment-btn {
  min-width: 88px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 700;
}
.theme-segment-btn.active {
  background: var(--panel2);
  color: var(--fg);
  border-color: var(--surface-border);
  box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 4px 12px rgba(0, 0, 0, 0.12);
}
.header-link-chats,
.settings-chat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-link-chats .nav-icon,
.settings-chat-link .nav-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.metric .metric-value { margin-top: 2px; }
.card-fill {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.home-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100dvh - 110px);
}
.home-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.home-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  flex: 1;
  align-items: stretch;
}
.home-metrics .card,
.home-panels .card {
  height: 100%;
}
.empty-state {
  margin-top: 8px;
  padding: 14px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.empty-state p { margin: 0; }
.settings-stack {
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.settings-stack.settings-wide {
  max-width: min(100%, 720px);
}
.settings-section-body { margin: 10px 0 14px; }
.settings-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.settings-reset-btn { margin-top: 8px; }
.settings-preset-grid {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}
.settings-preset-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  text-align: start;
  background: var(--surface);
}
.settings-preset-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.settings-preset-card .preset-name { font-weight: 700; margin-bottom: 4px; }
.settings-memory-list,
.settings-injected {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.settings-memory-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.settings-memory-item.injected {
  border-color: var(--accent);
}
.settings-forget {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.settings-hard-limits {
  white-space: pre-wrap;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.chat-preset-badge {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .settings-row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  cursor: pointer;
}
.settings-toggle input {
  width: auto;
  margin: 0;
}
.settings-note { margin: 8px 0 12px; }
.settings-fallback-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 180, 60, 0.14);
  border: 1px solid rgba(255, 180, 60, 0.35);
  color: var(--text-secondary, #b8c0d0);
  line-height: 1.5;
}
.card .row {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.card .row.active-row { border-inline-start: 3px solid var(--accent); padding-inline-start: 8px; }
.card .row:last-child { border-bottom: 0; }

.section-label { margin-top: 14px; font-weight: 600; }
.hint { margin-bottom: 10px; }

.action-card, .file-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.action-head, .file-head { font-weight: 700; margin-bottom: 4px; }
.action-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.action-controls select,
.action-controls input[type="date"] {
  min-width: 120px;
}
.btn-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
button.danger {
  background: #c0392b;
  border-color: #c0392b;
}
.edge-row { font-size: 13px; }

.graph {
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px;
  overflow: auto;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  min-height: 40px;
}

/* ---------- pages ---------- */
.page { display: none; }
.page.active { display: block; }

/* Route guards: keep /chat from ever showing the dashboard shell */
html[data-route="chat"] #app,
html[data-route="chat"] #chooser {
  display: none !important;
}

html[data-route="app"] #chatView,
html[data-route="app"] #chooser {
  display: none !important;
}

body.mode-chat #app,
body.mode-chat #chooser {
  display: none !important;
}

body.mode-app #chatView,
body.mode-app #chooser {
  display: none !important;
}

html[data-route="chat"] #chatView:not(.hide) {
  display: flex !important;
}

.mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  .shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    grid-template-columns: 1fr;
  }

  .side {
    display: none !important;
  }

  .main {
    flex: 1;
    overflow: auto;
    padding: 14px 14px calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-strong);
    backdrop-filter: var(--surface-blur);
    -webkit-backdrop-filter: var(--surface-blur);
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .mobile-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    gap: 4px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-strong);
    backdrop-filter: var(--surface-blur);
    -webkit-backdrop-filter: var(--surface-blur);
    border-top: 1px solid var(--surface-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav a {
    flex: 1 0 auto;
    min-width: 58px;
    max-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    text-decoration: none;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.15;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
  }

  .mobile-nav a .nav-icon {
    width: 22px;
    height: 22px;
  }

  .mobile-nav a.active {
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--fg);
    font-weight: 700;
  }

  html[data-route="chat"] .mobile-nav,
  body.mode-chat .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .chat-menu-btn,
  .chat-header-new {
    display: inline-flex;
  }

  .view-header-actions .header-link,
  .view-header-actions .header-btn:not(.chat-mobile-logout),
  .chat-preset-badge {
    display: none;
  }

  .view-header {
    flex-shrink: 0;
    z-index: 35;
  }

  .chat-sidebar-backdrop {
    position: fixed;
    inset: 0;
    top: var(--chat-header-height, 57px);
    z-index: 28;
    background: rgba(4, 8, 16, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .chat-sidebar-backdrop.hide {
    display: none;
  }

  .chat-sidebar {
    position: fixed;
    top: var(--chat-header-height, 57px);
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(300px, 88vw);
    max-width: 88vw;
    z-index: 40;
    transform: translateX(0);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  }

  html[dir="rtl"] .chat-sidebar {
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.4);
  }

  html:not([dir="rtl"]) .chat-sidebar {
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.4);
  }

  html[dir="rtl"] .chat-sidebar.collapsed {
    transform: translateX(100%);
  }

  html:not([dir="rtl"]) .chat-sidebar.collapsed {
    transform: translateX(-100%);
  }
}

@media (min-width: 1024px) {
  .chat-menu-btn,
  .chat-header-new,
  .chat-sidebar-backdrop {
    display: none !important;
  }

  .chat-sidebar {
    position: relative;
    transform: none !important;
    box-shadow: none;
    width: 280px;
    max-width: none;
  }

  .chat-sidebar.collapsed {
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .chooser-actions { grid-template-columns: 1fr; }
  .chat-input-row {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .chat-input-row textarea {
    min-width: 0;
  }
  .chat-input-row button:last-child {
    min-width: 64px;
    width: auto;
    height: 44px;
    padding-inline: 14px;
  }
}

.blind-panel textarea { width: 100%; margin-top: 6px; }
.blind-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.blind-note { margin: 0 0 8px; }
.blind-columns-wrap { margin-top: 14px; }
.blind-columns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.blind-col-row {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 180px) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface-input);
}
.blind-col-name {
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}
.blind-col-drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.blind-col-drop input { width: auto; margin: 0; }
.blind-actions { margin-top: 14px; flex-wrap: wrap; }
.blind-output { margin-top: 16px; }
.blind-output .section-heading { margin-top: 12px; }
.blind-pre {
  white-space: pre-wrap;
  background: #0b1220;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 12px;
  max-height: 320px;
  overflow: auto;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.file-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  direction: rtl;
}
.file-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  direction: rtl;
}
.file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--surface-border);
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
}
.file-picker-name {
  color: var(--muted);
  font-size: 13px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
}
.check-inline input { width: auto; margin: 0; }
.empty-state.compact {
  margin-top: 0;
  padding: 10px 12px;
}

/* ---------- chooser ---------- */
.chooser-card { max-width: 420px; }
.chooser-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.chooser-btn {
  width: 100%;
  padding: 16px 14px;
  font-size: 18px;
}
.chooser-btn-alt {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--fg);
}

/* ---------- full-screen chat (/chat) ---------- */
.chat-shell {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
}
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-strong);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
}
.view-header-start {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-menu-btn {
  display: none;
}
.chat-header-new {
  display: none;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}
.chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.chat-sidebar {
  width: 280px;
  flex: 0 0 280px;
  border-inline-start: 1px solid var(--surface-border);
  background: var(--surface-strong);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-new-btn {
  margin: 0;
  width: 100%;
  text-align: start;
  background: var(--panel2);
  border-color: var(--line);
  color: var(--fg);
  min-height: 44px;
}
.chat-sidebar-toolbar {
  padding: 12px 12px 0;
  display: grid;
  gap: 10px;
  flex-shrink: 0;
}
.chat-sidebar-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.chat-sidebar-tab {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.chat-sidebar-tab.active {
  background: var(--accent-soft);
  border-color: rgba(10, 132, 255, 0.35);
  color: var(--fg);
}
.chat-session-empty {
  padding: 16px 12px;
  text-align: center;
}
.chat-header-new-label {
  display: none;
  font-size: 13px;
  font-weight: 600;
  margin-inline-start: 2px;
}
.chat-header-new-icon {
  line-height: 1;
  font-size: 22px;
  font-weight: 700;
}
.chat-session-menu-btn {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 10px;
}
.chat-session-menu-btn svg {
  width: 18px;
  height: 18px;
}
.chat-session-row {
  position: relative;
}
.chat-session-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--panel2);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 4px;
}
.chat-session-menu-item {
  width: 100%;
  min-height: 40px;
  text-align: start;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  font: inherit;
  padding: 8px 10px;
  cursor: pointer;
}
.chat-session-menu-item.chat-session-menu-archive {
  color: var(--fg);
}
.chat-session-menu-item.chat-session-menu-delete,
.chat-session-menu-item.danger {
  color: #ffb4aa;
  border-color: rgba(192, 57, 43, 0.35);
}
.chat-session-menu-item.chat-session-menu-restore {
  color: var(--accent);
}
@media (max-width: 1023px) {
  .chat-header-new-label {
    display: inline;
  }
  .chat-header-new {
    width: auto;
    padding-inline: 10px;
    gap: 2px;
  }
}
.chat-session-groups {
  flex: 1;
  overflow: auto;
  padding: 0 8px 12px;
}
.chat-session-group {
  margin-top: 10px;
}
.chat-session-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
}
.chat-session-item {
  display: block;
  width: 100%;
  text-align: start;
  padding: 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  line-height: 1.35;
  min-height: 44px;
}
.chat-session-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 4px;
}
.chat-session-row .chat-session-item {
  flex: 1;
  margin-bottom: 0;
}
.chat-session-rename-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--accent);
  background: var(--panel2);
  color: var(--fg);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  line-height: 1.35;
}
.chat-session-delete {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-height: 28px;
  padding: 0;
  margin-inline-start: 4px;
  font-size: 14px;
  line-height: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
}
.chat-session-delete .trash-icon {
  width: 16px;
  height: 16px;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .chat-session-delete:hover {
    background: rgba(192, 57, 43, 0.18);
    border-color: rgba(192, 57, 43, 0.55);
    color: #ffb4aa;
  }
}
@media (pointer: coarse) {
  .chat-session-delete {
    color: var(--muted);
    background: transparent;
  }
}
.graph-toolbar { margin-bottom: 12px; flex-wrap: wrap; }
.graph-entity-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.graph-entity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.graph-entity-title { font-weight: 700; flex: 1; min-width: 0; }
.graph-entity-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.graph-relations {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.graph-relation-row {
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-size: 14px;
}
.graph-relation-empty { margin-top: 6px; }
.graph-chat-panel { margin-top: 14px; }
.graph-chat-thread {
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.graph-chat-bubble {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.graph-chat-bubble.user { background: var(--panel2); }
.graph-proposal-host { display: grid; gap: 8px; margin-bottom: 10px; }
.graph-proposal-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.graph-proposal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.graph-chat-input-row {
  display: grid;
  gap: 8px;
}
@media (min-width: 640px) {
  .graph-chat-input-row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.chat-session-item:hover {
  background: var(--panel2);
}
.chat-session-item.active {
  background: var(--panel2);
  border-color: var(--accent);
  font-weight: 700;
}
.chat-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.compact-brand { font-size: 18px; }
.view-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.header-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel2);
}
.header-btn {
  padding: 8px 12px;
  font-size: 14px;
}
.chat-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--chat-surface, transparent);
}
.chat-thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.chat-thread-spacer {
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
}
.chat-thread-inner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.chat-thread {
  flex: 0 0 auto;
  width: 100%;
  max-width: 70ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 100%;
  padding: 10px 12px;
  margin-inline: 10px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 14px;
  position: relative;
}
.chat-bubble.user {
  align-self: start;
  background: var(--chat-bubble-user-bg, var(--accent));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.user.has-image {
  background: transparent;
  color: var(--fg);
  padding: 0;
}
.chat-bubble.user.has-image .chat-bubble-text,
.chat-bubble.user.has-image .chat-attachment-tag {
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}
.chat-bubble.assistant {
  align-self: end;
  background: var(--chat-bubble-assistant-bg, var(--panel2));
  color: var(--chat-bubble-assistant-fg, var(--fg));
  border: 1px solid var(--chat-bubble-assistant-border, var(--line));
  box-shadow: var(--chat-bubble-assistant-shadow, 0 1px 0 rgba(255, 255, 255, 0.04));
  border-bottom-left-radius: 4px;
}
.chat-main.chat-drop-active {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.chat-bubble.system {
  align-self: center;
  margin-inline: auto;
  background: transparent;
  color: var(--chat-bubble-system-fg, var(--muted));
  font-size: 12px;
  padding: 4px 8px;
}
.chat-bubble img,
.chat-attachment-thumb {
  display: block;
  max-width: min(100%, 280px);
  border-radius: 10px;
  margin: 0;
  border: 1px solid var(--chat-bubble-assistant-border, var(--line));
  box-shadow: var(--chat-bubble-assistant-shadow, none);
  cursor: zoom-in;
}
.chat-attachment-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}
.chat-image-lightbox img {
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.chat-image-lightbox-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.chat-bubble.user.has-image img,
.chat-bubble.user.has-image .chat-attachment-thumb {
  max-width: min(100%, 320px);
  border-radius: 12px;
}
.chat-bubble-actions {
  display: none;
}
.chat-copy-btn {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  background: rgba(9, 14, 23, 0.72);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  z-index: 1;
}
.chat-copy-btn .copy-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.chat-copy-btn.copied {
  color: var(--accent);
  border-color: var(--accent);
}
.chat-bubble.user .chat-copy-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.chat-bubble-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline-start: 34px;
}
.chat-code-block {
  position: relative;
  background: #0b1220;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.chat-code-block pre {
  margin: 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 0;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.chat-code-block .chat-copy-btn {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
}
.chat-typing-indicator {
  align-self: end;
  margin-inline: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border: 1px solid var(--surface-border);
}
.chat-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}
.chat-typing-dot:nth-child(2) { animation-delay: .15s; }
.chat-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes chat-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-4px); opacity: 1; }
}
.chat-output {
  margin: 0;
  min-height: calc(100% - 8px);
  background: transparent;
  border: 0;
  padding: 0;
}
.chat-input-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 12;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(120, 160, 220, 0.28);
  background: rgba(17, 26, 43, 0.78);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.38);
}
.chat-input-row textarea {
  margin: 0;
  min-height: 44px;
  max-height: 144px;
  overflow-y: auto;
  resize: none;
  line-height: 1.45;
  background: var(--surface-input);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 10px 12px;
}
.chat-bubble.assistant.has-image {
  padding: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.chat-bubble.assistant.has-image img {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  display: block;
}
.chat-input-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: end;
}
.chat-icon-btn {
  min-width: 44px;
  height: 44px;
  padding: 0;
  font-size: 18px;
  background: transparent;
  border-color: var(--surface-border);
  color: var(--fg);
}
.chat-image-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.chat-image-preview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}
.chat-image-preview button {
  margin-inline-start: auto;
  background: #c0392b;
  border-color: #c0392b;
}
.project-toolbar {
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.project-toolbar input {
  min-width: 140px;
  flex: 1;
}
.project-edit {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.project-edit input,
.project-edit textarea {
  width: 100%;
}
.chat-input-bar button {
  min-width: 72px;
  height: 44px;
  padding-inline: 16px;
}

/* Calendar */
.cal-toolbar {
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cal-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  min-width: 140px;
}
.cal-tz-label {
  width: 100%;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 4px;
}
.cal-view-active {
  border-color: var(--accent);
  background: var(--panel2);
}
.cal-provider-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.cal-weekday {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-day-cell {
  min-height: 92px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-input);
  color: var(--fg);
  text-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-day-cell:hover:not(:disabled) {
  border-color: var(--accent);
}
.cal-day-outside {
  opacity: 0.35;
  cursor: default;
}
.cal-day-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(47, 129, 247, 0.35);
}
.cal-day-num {
  font-weight: 700;
  font-size: 14px;
}
.cal-day-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.cal-chip {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(47, 129, 247, 0.18);
}
.cal-chip-more {
  background: rgba(139, 160, 196, 0.18);
  color: var(--muted);
}
.cal-kind-action .cal-chip,
.cal-event-row.cal-kind-action .cal-event-kind { color: var(--warn); }
.cal-kind-action .cal-chip { background: rgba(230, 126, 34, 0.18); }
.cal-kind-scheduled .cal-chip,
.cal-event-row.cal-kind-scheduled .cal-event-kind { color: var(--muted); }
.cal-kind-scheduled .cal-chip { background: rgba(139, 160, 196, 0.18); }
.cal-kind-google .cal-chip,
.cal-event-row.cal-kind-google .cal-event-kind { color: #63b3ed; }
.cal-kind-google .cal-chip { background: rgba(99, 179, 237, 0.18); }
.cal-day-view {
  display: grid;
  gap: 10px;
}
.cal-event-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-input);
}
.cal-event-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.cal-event-time {
  font-size: 12px;
  color: var(--muted);
  min-width: 64px;
}
.cal-event-kind {
  font-size: 11px;
  font-weight: 700;
}
.cal-event-title {
  flex: 1;
  min-width: 0;
}
.cal-event-details {
  margin-top: 6px;
}
.cal-event-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cal-del-btn {
  font-size: 12px;
  padding: 4px 10px;
}
.cal-event-row.cal-sched-disabled {
  opacity: 0.62;
}
.cal-event-row.cal-sched-disabled .cal-event-title {
  text-decoration: line-through;
}
.cal-event-next-run {
  margin-top: 4px;
  font-size: 12px;
}
.cal-event-row {
  position: relative;
}
.cal-sched-menu-btn {
  min-width: 34px;
  min-height: 30px;
  padding: 0 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cal-sched-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 20;
}
.cal-sched-menu-item {
  display: block;
  width: 100%;
  text-align: start;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.cal-sched-menu-item:hover {
  background: var(--panel2);
}
.cal-sched-menu-item.danger {
  color: var(--danger);
}
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1200;
}
.cal-modal-card {
  width: min(480px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.cal-modal-title {
  font-weight: 700;
  margin-bottom: 12px;
}
.cal-modal-body textarea,
.cal-modal-body input {
  width: 100%;
}
.cal-modal-preview {
  margin-top: 10px;
  min-height: 1.2em;
}
.cal-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.cal-form {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.cal-form input,
.cal-form textarea {
  width: 100%;
}
@media (max-width: 720px) {
  .cal-day-cell { min-height: 72px; padding: 6px; }
  .cal-chip { font-size: 10px; }
}

.image-edit-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}
.image-edit-consent-modal.hide { display: none; }
.image-edit-consent-card {
  width: min(420px, 100%);
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--panel2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.image-edit-consent-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.image-edit-consent-filename {
  margin-bottom: 12px;
  word-break: break-all;
}
.image-edit-consent-thumb {
  display: block;
  width: min(280px, 100%);
  max-height: 220px;
  object-fit: contain;
  margin: 0 auto 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.2);
}
.image-edit-consent-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.chat-privacy-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--fg);
}
.file-privacy-badge {
  display: inline-block;
  margin-top: 4px;
  margin-inline-end: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 159, 10, 0.18);
  color: var(--fg);
}

/* ========== Workspace shell (Phase 1 redesign) ========== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-work-sm: 8px;
  --radius-work-md: 12px;
  --radius-work-lg: 16px;
  --sidebar-width: 260px;
}

.brand-logo { display: block; max-width: 100%; height: auto; }
.brand-logo-full { width: min(180px, 100%); }
.brand-logo-mark { width: 36px; height: 36px; }
.chat-brand-mark { width: 32px; height: 32px; }

.shell {
  grid-template-columns: var(--sidebar-width) 1fr;
}

.workspace-sidebar {
  padding: var(--space-4) var(--space-3);
  gap: var(--space-3);
}

.sidebar-brand {
  display: block;
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-2);
  text-decoration: none;
}

.sidebar-logo-collapsed { display: none; }
.sidebar-version { font-size: 10px; opacity: 0.75; padding-inline: var(--space-2); }

.workspace-nav { gap: 2px; }
.nav-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--space-3) var(--space-3) var(--space-1);
  margin-top: var(--space-1);
}
.nav-section-label:first-child { margin-top: 0; }

.workspace-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.workspace-content {
  flex: 1;
  padding: var(--space-4) var(--space-5);
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-strong);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  position: sticky;
  top: 0;
  z-index: 12;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  flex: 0 0 auto;
  min-width: 120px;
}

.topbar-center { flex: 1; min-width: 0; max-width: 520px; margin-inline: auto; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.global-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-radius: var(--radius-work-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-input);
  min-height: 40px;
}
.global-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2) 0;
  box-shadow: none;
  min-width: 0;
}
.global-search input:focus { box-shadow: none; }
.global-search-icon { color: var(--muted); font-size: 16px; }

.topbar-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--space-3);
}

button.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
  box-shadow: none;
}
button.btn-ghost:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  filter: none;
}

.quick-action-wrap,
.user-menu-wrap { position: relative; }

.quick-action-menu,
.user-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-width: 220px;
  background: var(--panel2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-work-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2);
  z-index: 30;
}

.menu-item-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  text-align: start;
  background: transparent;
  border: none;
  color: var(--fg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-work-sm);
  font-weight: 500;
  box-shadow: none;
}
.menu-item-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  filter: none;
}
.menu-item-btn.danger { color: #ff6961; }

.workspace-home { display: flex; flex-direction: column; gap: var(--space-5); }

.home-primary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 168px;
  border-radius: var(--radius-work-lg);
  padding: var(--space-4);
}

.stat-card-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.stat-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--fg);
}

.stat-card-meta { line-height: 1.5; min-height: 2.8em; }
.stat-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.stat-card-cta { margin-top: auto; align-self: flex-start; }

.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 25%, transparent);
  overflow: hidden;
}
.progress-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #5e5ce6);
  border-radius: inherit;
  transition: width .35s ease;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.home-action-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-work-md);
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--fg);
  font-weight: 600;
  text-align: start;
  box-shadow: var(--shadow-card);
}
.home-action-card .nav-icon { color: var(--accent); width: 22px; height: 22px; }

.home-secondary-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.section-header-row .section-title { margin: 0; }

.activity-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.activity-filter-btn {
  padding: 4px 10px;
  font-size: 11px;
  min-height: 0;
  background: transparent;
  border-color: var(--surface-border);
  color: var(--muted);
  box-shadow: none;
}
.activity-filter-btn.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-border));
  color: var(--fg);
}

.activity-feed,
.insights-list { display: flex; flex-direction: column; gap: var(--space-2); }

.activity-item,
.insight-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
}
.activity-item:last-child,
.insight-item:last-child { border-bottom: none; }

.activity-time { font-size: 11px; color: var(--muted); padding-top: 2px; }
.activity-body { font-size: 14px; line-height: 1.45; }
.insight-item { grid-template-columns: 1fr; }
.insight-item::before {
  content: "◆";
  color: var(--accent);
  font-size: 10px;
  margin-bottom: var(--space-1);
}

.settings-shell { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-border);
}
.settings-tab {
  background: transparent;
  border-color: var(--surface-border);
  color: var(--muted);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  box-shadow: none;
}
.settings-tab.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-border));
  color: var(--fg);
}
.settings-tab-panel { display: none; flex-direction: column; gap: var(--space-4); }
.settings-tab-panel.active { display: flex; }

.advanced-collapse summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-2) 0;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh var(--space-4) var(--space-4);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.command-palette-card {
  width: min(560px, 100%);
  background: var(--panel2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-work-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.command-palette-card input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--surface-border);
  border-radius: 0;
  padding: var(--space-4);
  box-shadow: none;
}
.command-palette-results { max-height: 360px; overflow: auto; }
.command-palette-item {
  display: block;
  width: 100%;
  text-align: start;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--fg);
  box-shadow: none;
}
.command-palette-item:hover,
.command-palette-item.active {
  background: var(--accent-soft);
  filter: none;
}

@media (max-width: 1100px) {
  .home-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-secondary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr !important; }
  .workspace-sidebar { display: none !important; }
  .workspace-content { padding: var(--space-3); }
  .app-topbar {
    flex-wrap: wrap;
    padding: var(--space-3);
  }
  .topbar-center { order: 3; flex: 1 1 100%; max-width: none; margin-inline: 0; }
  .home-primary-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 18px; min-width: 0; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-width: 72px; }
  .sidebar-logo-expanded { display: none; }
  .sidebar-logo-collapsed { display: block; width: 36px; margin-inline: auto; }
  .nav-label,
  .nav-section-label,
  .sidebar-version,
  .workspace-bottom .nav-label { display: none; }
  .nav a, .bottom a { justify-content: center; padding-inline: var(--space-2); }
}

html.light-theme .brand-logo-full text,
html.light-theme .sidebar-brand .brand-logo-full { filter: none; }
html.light-theme .stat-card-title { color: var(--fg); }


/* ========== Usability improvements ========== */
:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 2px;
}

.command-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.command-palette-item kbd {
  direction: ltr;
  min-width: 34px;
  padding: 2px 6px;
  border: 1px solid var(--surface-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-input);
  color: var(--muted);
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.command-palette-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
}
.command-palette-results:empty::after {
  content: "لا توجد نتائج";
  display: block;
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
}

@media (max-width: 768px) {
  .workspace-content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav {
    overflow-x: hidden;
    justify-content: stretch;
  }

  .mobile-nav a {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 54px;
    padding-inline: 2px;
  }

  .mobile-nav a .nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-btn,
  .menu-item-btn,
  .home-action-card,
  .settings-tab {
    min-height: 44px;
  }

  .quick-action-menu,
  .user-menu-panel {
    position: fixed;
    top: auto;
    right: var(--space-3);
    left: var(--space-3);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    border-radius: var(--radius-work-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  }

  .command-palette {
    padding: max(8vh, 56px) var(--space-3) var(--space-3);
  }

  .command-palette-card {
    max-height: 78dvh;
  }

  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .settings-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

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


/* ========== Apple-inspired liquid glass polish (v2.4.2) ========== */
:root {
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-work-sm: 14px;
  --radius-work-md: 20px;
  --radius-work-lg: 26px;
  --glass-blur: 28px;
  --liquid-border: color-mix(in srgb, var(--glass-border) 72%, white 28%);
  --liquid-highlight: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.025) 46%, transparent 72%);
  --liquid-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 18px 48px rgba(0,0,0,.24);
}

html.light-theme {
  --bg: #edf1f8;
  --panel: rgba(255,255,255,.58);
  --panel2: rgba(255,255,255,.74);
  --glass-bg: rgba(255,255,255,.48);
  --glass-bg-strong: rgba(255,255,255,.70);
  --surface-input: rgba(255,255,255,.62);
  --glass-border: rgba(52,65,90,.13);
  --liquid-border: rgba(255,255,255,.86);
  --liquid-shadow: 0 1px 0 rgba(255,255,255,.96) inset, 0 18px 48px rgba(68,84,115,.12);
  --chat-surface:
    radial-gradient(900px 460px at 75% 100%, rgba(0,122,255,.09), transparent 62%),
    linear-gradient(165deg, #f7f9fd, #e7ecf5);
}

.card,
.stat-card,
.home-action-card,
.quick-action-menu,
.user-menu-panel,
.command-palette-card,
.settings-tab-panel > .card,
.chat-sidebar,
.chat-session-row,
.chat-new-btn,
.chat-sidebar-tab,
.app-topbar,
.view-header {
  border-color: var(--liquid-border);
  background-color: var(--surface);
  background-image: var(--liquid-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(175%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(175%);
  box-shadow: var(--liquid-shadow);
}

.card,
.stat-card,
.settings-tab-panel > .card {
  border-radius: var(--radius-lg);
}

.home-action-card,
.menu-item-btn,
.command-palette-item,
.settings-tab,
.nav a,
.bottom a,
.chat-session-row,
.chat-new-btn,
.chat-sidebar-tab {
  border-radius: var(--radius-md);
}

button,
input,
textarea,
select,
.file-picker-btn {
  border-radius: var(--radius-sm);
}

button {
  transition: transform .18s ease, filter .18s ease, background-color .18s ease, box-shadow .18s ease;
}
button:hover {
  transform: translateY(-1px);
}
button:active {
  transform: scale(.975);
}

.workspace-sidebar {
  margin: 12px 0 12px 12px;
  border: 1px solid var(--liquid-border);
  border-radius: 30px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  box-shadow: var(--liquid-shadow);
}

.sidebar-brand {
  margin: 2px 2px 10px;
  padding: 10px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-input) 72%, transparent);
  border: 1px solid var(--liquid-border);
}

.sidebar-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  direction: ltr;
  min-height: 46px;
}

.sidebar-brand-lockup .brand-logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 0;
  object-fit: contain;
  transform: translateY(-1px);
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.sidebar-brand-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
  transform: translateY(1px);
}
.sidebar-brand-copy strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
}
.sidebar-brand-copy small {
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
}

.chat-brand-mark {
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(0,122,255,.20);
}

.login .brand-logo-full,
.chooser-card .brand-logo-full {
  width: min(210px, 72vw);
  max-height: 118px;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 18px 52px rgba(0,122,255,.12);
}

.app-topbar {
  margin: 12px 14px 0;
  border: 1px solid var(--liquid-border);
  border-radius: 24px;
  position: sticky;
  top: 10px;
}

.global-search {
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-input) 82%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}

.settings-tabs {
  padding: 6px;
  border: 1px solid var(--liquid-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
}

.settings-tab {
  border-color: transparent;
}
.settings-tab.active {
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface-input));
  box-shadow: 0 8px 24px rgba(0,122,255,.13), 0 1px 0 rgba(255,255,255,.35) inset;
}

.chat-shell {
  background: var(--chat-surface);
}

.chat-sidebar {
  margin: 12px 12px 12px 0;
  border: 1px solid var(--liquid-border);
  border-radius: 28px;
  overflow: hidden;
}

.chat-session-row {
  margin-block: 5px;
  border: 1px solid transparent;
  box-shadow: none;
}
.chat-session-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-input));
}
.chat-session-row.active {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface-input));
  box-shadow: 0 8px 24px rgba(0,122,255,.12);
}

.chat-input-bar {
  margin: 0 16px 14px;
  padding: 8px;
  border: 1px solid var(--liquid-border);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 18px 52px rgba(0,0,0,.26);
}

.chat-input-row {
  gap: 8px;
  align-items: center;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--surface-border) 72%, transparent);
  border-radius: 21px;
  background: color-mix(in srgb, var(--surface-input) 84%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}

.chat-input-row textarea {
  min-height: 46px;
  padding: 11px 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.chat-input-row textarea:focus {
  border: 0;
  box-shadow: none;
}

.chat-input-row button,
.chat-icon-btn {
  min-width: 46px;
  height: 46px;
  border-radius: 16px;
}

.chat-input-row button:last-child {
  min-width: 74px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,122,255,.25), 0 1px 0 rgba(255,255,255,.28) inset;
}

html.light-theme .chat-input-bar {
  background: rgba(255,255,255,.66);
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 #fff inset, 0 18px 52px rgba(67,83,113,.18);
}

html.light-theme .chat-input-row {
  background: rgba(255,255,255,.78);
  border-color: rgba(70,87,118,.11);
  box-shadow: 0 1px 0 #fff inset, 0 8px 26px rgba(64,82,112,.08);
}

html.light-theme .chat-icon-btn {
  background: rgba(255,255,255,.72);
  border-color: rgba(68,84,112,.12);
  color: #32343a;
}

html.light-theme .chat-thread-scroll {
  background: transparent;
}

html.light-theme .chat-sidebar {
  background: rgba(255,255,255,.64);
}

@media (max-width: 768px) {
  .workspace-sidebar { margin: 0; border-radius: 0; }
  .app-topbar {
    margin: 8px 8px 0;
    top: 6px;
    border-radius: 20px;
  }
  .chat-input-bar {
    margin: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px;
  }
  .chat-input-row { border-radius: 18px; }
  .chat-sidebar {
    margin: 0;
    border-radius: 0 0 0 24px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar-brand-lockup { justify-content: center; }
}


/* ========== Adaptive SAUDSD AI logo v2.4.3 ========== */
.brand-lockup-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  direction: ltr;
  margin: 0 auto 12px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--liquid-border);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface-input) 76%, transparent);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  box-shadow: var(--liquid-shadow);
}

.brand-lockup-large .brand-logo-mark {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 122, 255, .24));
}

.brand-lockup-title {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  letter-spacing: .045em;
}

.brand-lockup-title strong {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 850;
  color: var(--fg);
}

.brand-lockup-title small {
  font-size: clamp(16px, 3vw, 21px);
  font-weight: 850;
  color: var(--accent);
}

.sidebar-brand-lockup .brand-logo-mark,
.chat-brand-mark,
.brand-lockup-large .brand-logo-mark {
  background: transparent;
}

html.light-theme .sidebar-brand-lockup .brand-logo-mark,
html.light-theme .chat-brand-mark,
html.light-theme .brand-lockup-large .brand-logo-mark {
  filter: drop-shadow(0 9px 20px rgba(30, 91, 190, .18));
}

@media (max-width: 480px) {
  .brand-lockup-large {
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 22px;
  }
  .brand-lockup-large .brand-logo-mark {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
}


/* ========== Mobile chat layout hardening v2.4.4 ========== */
@media (max-width: 600px) {
  .view-header {
    min-height: 64px;
    height: 64px;
    flex: 0 0 64px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 0;
    box-sizing: border-box;
  }

  .view-header-start {
    width: 100%;
    min-width: 0;
    gap: 8px;
    justify-content: flex-start;
  }

  .chat-menu-btn,
  .chat-header-new {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px;
    height: 46px !important;
    padding: 0 !important;
    flex: 0 0 46px;
    border-radius: 16px;
  }

  .chat-header-new-label {
    display: none !important;
  }

  .chat-header-new-icon {
    font-size: 27px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .chat-brand-mark {
    order: 3;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    object-fit: contain;
    border-radius: 13px;
  }

  .chat-body {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .chat-pane,
  .chat-main,
  .chat-thread-scroll {
    width: 100%;
    min-width: 0;
  }

  .chat-sidebar-backdrop {
    top: 64px !important;
    bottom: 0;
  }

  .chat-sidebar {
    top: 64px !important;
    bottom: 0 !important;
    width: min(360px, 92vw) !important;
    max-width: 92vw !important;
    margin: 0 !important;
    border-radius: 24px 0 0 0 !important;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  html[dir="rtl"] .chat-sidebar {
    right: 0 !important;
    left: auto !important;
    border-inline-start: 1px solid var(--liquid-border);
  }

  html:not([dir="rtl"]) .chat-sidebar {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 24px 0 0 !important;
  }

  html[dir="rtl"] .chat-sidebar.collapsed {
    transform: translateX(105%) !important;
  }

  html:not([dir="rtl"]) .chat-sidebar.collapsed {
    transform: translateX(-105%) !important;
  }

  .chat-sidebar-toolbar {
    padding: 12px 12px 0;
    gap: 8px;
  }

  .chat-new-btn {
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 17px;
  }

  .chat-sidebar-tab {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 15px;
  }

  .chat-session-groups {
    padding: 4px 10px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .chat-session-row {
    gap: 6px;
    margin-block: 5px;
    border-radius: 17px;
  }

  .chat-session-item {
    min-width: 0;
    min-height: 48px;
    padding: 11px 13px;
    border-radius: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-session-menu-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .chat-input-bar {
    margin: 0 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 5px !important;
    border-radius: 22px !important;
  }

  .chat-input-row {
    grid-template-columns: 46px minmax(0, 1fr) 62px;
    gap: 6px;
    padding: 3px;
    border-radius: 18px;
  }

  .chat-input-row textarea {
    min-width: 0;
    min-height: 44px;
    max-height: 116px;
    padding: 10px 8px;
    font-size: 16px;
    line-height: 1.4;
  }

  .chat-input-row .chat-icon-btn,
  .chat-input-row button:last-child {
    min-width: 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 15px;
  }

  .chat-input-row button:last-child {
    min-width: 62px;
    width: 62px;
    padding-inline: 8px;
    font-size: 15px;
  }

  .chat-thread-inner {
    padding-inline: 10px;
  }

  .chat-thread-spacer {
    min-height: 12px;
  }
}

@media (max-width: 360px) {
  .view-header { padding-inline: 7px; }
  .view-header-start { gap: 6px; }
  .chat-menu-btn,
  .chat-header-new {
    width: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px;
  }
  .chat-brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px;
  }
}


/* Conversation actions + mobile header spacing */
.chat-session-menu-btn {
  display: inline-grid !important;
  place-items: center;
  opacity: .72 !important;
  visibility: visible !important;
  flex: 0 0 34px;
}
.chat-session-menu-btn:hover,
.chat-session-menu-btn:focus-visible { opacity: 1 !important; }
.chat-session-group.pinned .chat-session-label {
  color: var(--accent);
  font-weight: 700;
}
.chat-brand-mark { margin-inline: 6px; }
.chat-view-header-start { gap: 12px !important; }
@media (max-width: 480px) {
  .chat-view-header-start { gap: 10px !important; }
  .chat-brand-mark { margin-inline: 4px; }
  .chat-session-menu-btn { min-width: 36px; min-height: 36px; }
}

/* Keep the conversation action reachable on narrow RTL drawers. */
.chat-session-row { width: 100%; min-width: 0; }
.chat-session-row .chat-session-item { min-width: 0; width: auto; }
.chat-session-menu-btn {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 38px;
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  overflow: visible;
}

/* Privacy classification is blocking and phone-safe. */
.image-edit-consent-modal { overscroll-behavior: contain; }
.image-edit-consent-card { width: min(92vw, 460px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.image-edit-consent-actions button { min-width: 0; }
@media (max-width: 390px) {
  .image-edit-consent-card { width: calc(100vw - 24px); padding: 16px; border-radius: 22px; }
  .image-edit-consent-thumb { max-height: 42dvh; object-fit: contain; }
  .image-edit-consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .image-edit-consent-actions button { padding-inline: 8px; min-height: 44px; }
}

/* Privacy dialog: solid, legible, and explicit about the outbound choice. */
.image-edit-consent-modal {
  background: rgba(2, 5, 12, 0.84) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}
.image-edit-consent-card {
  background: #171a22 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62) !important;
}
html.light-theme .image-edit-consent-modal {
  background: rgba(25, 32, 48, 0.58) !important;
}
html.light-theme .image-edit-consent-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.image-edit-consent-actions [data-consent-choice="personal"] {
  background: rgba(48, 209, 88, 0.13);
  border-color: rgba(48, 209, 88, 0.42);
  color: var(--fg);
}
.image-edit-consent-actions [data-consent-choice="general"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.3);
  font-weight: 700;
}
.image-edit-consent-actions [data-consent-choice="cancel"] {
  background: transparent;
  color: var(--muted);
}

/* 2.5.3 privacy actions: green stays local, neutral blue permits OpenAI. */
.image-edit-consent-actions [data-consent-choice="personal"] {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.3) !important;
  font-weight: 700;
}
.image-edit-consent-actions [data-consent-choice="general"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
  font-weight: 700;
}
.image-edit-consent-filename,
.chat-attachment-tag,
.chat-bubble.has-image .chat-bubble-text {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  text-overflow: clip;
}


/* =========================================================
   Liquid Glass UI v2.6 — spatial, adaptive, production layer
   ========================================================= */
:root {
  --liquid-blur: 25px;
  --liquid-radius: clamp(16px, 1.35vw, 24px);
  --liquid-radius-sm: clamp(12px, 1vw, 18px);
  --liquid-surface: rgba(24, 28, 38, 0.48);
  --liquid-surface-strong: rgba(18, 22, 31, 0.68);
  --liquid-edge-a: rgba(255, 255, 255, 0.42);
  --liquid-edge-b: rgba(255, 255, 255, 0.07);
  --liquid-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset,
    0 22px 60px rgba(0, 0, 0, 0.38),
    0 5px 16px rgba(0, 0, 0, 0.24);
  --liquid-shadow-float:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 30px 90px rgba(0, 0, 0, 0.46),
    0 10px 28px rgba(0, 0, 0, 0.28);
  --liquid-spring: 520ms linear(
    0, .012, .045, .093, .151, .214, .279, .342, .4, .452,
    .496, .532, .561, .583, .599, .61, .616, .618, .617,
    .615, .613, .613, .616, .623, .635, .652, .673, .698,
    .726, .755, .786, .816, .845, .873, .898, .92, .939,
    .955, .968, .978, .986, .992, .996, .998, 1
  );
  --metric-size: clamp(1.55rem, 2.2vw, 2.15rem);
}

html.light-theme {
  --liquid-surface: rgba(255, 255, 255, 0.52);
  --liquid-surface-strong: rgba(248, 250, 255, 0.72);
  --liquid-edge-a: rgba(255, 255, 255, 0.98);
  --liquid-edge-b: rgba(40, 55, 85, 0.12);
  --liquid-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 -1px 0 rgba(85, 105, 145, 0.09) inset,
    0 22px 62px rgba(45, 62, 100, 0.13),
    0 5px 18px rgba(45, 62, 100, 0.08);
  --liquid-shadow-float:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 32px 90px rgba(45, 62, 100, 0.2),
    0 10px 30px rgba(45, 62, 100, 0.12);
}

html, body {
  min-width: 280px;
  background-image:
    radial-gradient(70vw 58vw at 95% -12%, rgba(10, 132, 255, .23), transparent 63%),
    radial-gradient(58vw 46vw at -8% 106%, rgba(175, 82, 222, .16), transparent 66%),
    radial-gradient(38vw 30vw at 48% 55%, rgba(50, 215, 190, .07), transparent 72%),
    linear-gradient(155deg, #151a26 0%, #070910 48%, #030407 100%);
  background-attachment: fixed;
}

html.light-theme body {
  background-image:
    radial-gradient(72vw 58vw at 98% -10%, rgba(0, 122, 255, .17), transparent 62%),
    radial-gradient(58vw 48vw at -8% 105%, rgba(175, 82, 222, .12), transparent 66%),
    linear-gradient(155deg, #fdfdff 0%, #edf1f9 50%, #e4e9f4 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
  filter: blur(44px);
  opacity: .75;
}
body::before {
  width: min(38vw, 560px);
  aspect-ratio: 1;
  inset: 10vh auto auto 8vw;
  background: rgba(10, 132, 255, .1);
}
body::after {
  width: min(34vw, 480px);
  aspect-ratio: 1;
  inset: auto 7vw 4vh auto;
  background: rgba(94, 92, 230, .1);
}

/* Refractive one-pixel edge shared by every floating surface. */
.card,
.side,
.mobile-nav,
.view-header,
.chat-sidebar,
.chat-composer,
.chat-bubble.assistant,
.chat-image-bubble,
.modal-card,
.floating-menu,
.command-palette-card,
.settings-tabs,
.quick-link-card,
.login .card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), transparent 42%),
    linear-gradient(var(--liquid-surface), var(--liquid-surface));
  border: 1px solid transparent;
  background-clip: padding-box;
  backdrop-filter: blur(var(--liquid-blur)) saturate(180%) contrast(105%);
  -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(180%) contrast(105%);
  box-shadow: var(--liquid-shadow);
}

.card::before,
.side::before,
.mobile-nav::before,
.view-header::before,
.chat-sidebar::before,
.chat-composer::before,
.chat-bubble.assistant::before,
.chat-image-bubble::before,
.modal-card::before,
.floating-menu::before,
.command-palette-card::before,
.settings-tabs::before,
.quick-link-card::before,
.login .card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--liquid-edge-a), var(--liquid-edge-b) 42%, rgba(10,132,255,.25) 72%, var(--liquid-edge-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card,
.login .card { border-radius: var(--liquid-radius); }
.quick-link-card,
.settings-tabs,
.chat-composer,
.chat-bubble.assistant,
.chat-image-bubble { border-radius: var(--liquid-radius-sm); }

.shell { perspective: 1400px; }
.side {
  z-index: 30;
  margin: 12px;
  border-radius: calc(var(--liquid-radius) + 2px);
  min-height: calc(100dvh - 24px);
}
.main {
  position: relative;
  z-index: 2;
  padding: clamp(16px, 2.2vw, 34px);
}
.top {
  gap: 14px;
  min-height: 48px;
}
.title {
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  letter-spacing: -.025em;
}
.sub { font-size: clamp(.72rem, .75vw, .82rem); }
.grid,
.home-panels { gap: clamp(12px, 1.4vw, 20px); }
.card { padding: clamp(14px, 1.45vw, 22px); }

.nav a,
.bottom a,
.mobile-nav a,
.settings-tab,
.menu-item-btn,
button,
.quick-link-card,
.chat-session-item {
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center;
  will-change: transform, filter, background-color;
  transition:
    transform var(--liquid-spring),
    box-shadow 280ms ease,
    background-color 240ms ease,
    border-color 240ms ease,
    filter 220ms ease;
}

.nav a:hover,
.bottom a:hover,
.settings-tab:hover,
.menu-item-btn:hover,
.quick-link-card:hover,
.chat-session-item:hover {
  transform: translate3d(0, -2px, 12px) scale(1.012);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 12px 30px rgba(0,0,0,.22);
}
.nav a:active,
.bottom a:active,
.mobile-nav a:active,
.settings-tab:active,
.menu-item-btn:active,
button:active,
.quick-link-card:active,
.chat-session-item:active {
  transform: translate3d(0, 1px, 0) scale(.965);
  transition-duration: 110ms;
}
.nav a.active,
.mobile-nav a.active,
.settings-tab.active {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--accent-soft) 82%, var(--liquid-surface-strong)), color-mix(in srgb, var(--accent-soft) 82%, var(--liquid-surface-strong)));
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 8px 24px rgba(10,132,255,.16);
}

button {
  min-height: 42px;
  border-radius: 13px;
  padding-inline: clamp(13px, 1.3vw, 20px);
}
button:hover {
  filter: brightness(1.08) saturate(1.06);
  transform: translate3d(0,-2px,8px) scale(1.015);
}
input,
textarea,
select {
  min-height: 42px;
  background: color-mix(in srgb, var(--liquid-surface-strong) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--liquid-edge-a) 25%, var(--surface-border));
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 22px rgba(0,0,0,.08);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 72%, white 10%);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 30px rgba(10,132,255,.1);
}

.floating-menu,
.command-palette-card,
.modal-card {
  z-index: 90;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 38%),
    linear-gradient(var(--liquid-surface-strong), var(--liquid-surface-strong));
  box-shadow: var(--liquid-shadow-float);
}
.floating-menu:not(.hide),
.command-palette:not(.hide) .command-palette-card,
.modal:not(.hide) .modal-card {
  animation: liquid-menu-in var(--liquid-spring) both;
}
@keyframes liquid-menu-in {
  0% { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(6px); }
  48% { opacity: 1; transform: translateY(-3px) scale(1.012); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-layout { gap: clamp(10px, 1.2vw, 18px); }
.chat-sidebar {
  z-index: 20;
  border-radius: var(--liquid-radius);
  margin: 10px;
  overflow: hidden;
}
.chat-thread {
  scroll-behavior: smooth;
  padding-inline: clamp(12px, 4vw, 68px);
}
.chat-bubble {
  max-width: min(780px, 88%);
}
.chat-bubble.assistant,
.chat-image-bubble {
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 15px 42px rgba(0,0,0,.22);
}
.chat-composer {
  z-index: 32;
  margin: clamp(8px, 1.4vw, 18px);
  box-shadow: var(--liquid-shadow-float);
}
.chat-attachment-thumb,
.chat-image-bubble img {
  border-radius: calc(var(--liquid-radius-sm) - 4px);
}

.settings-tabs {
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .card:not(.chat-bubble):hover {
    transform: translate3d(0,-3px,18px);
    box-shadow: var(--liquid-shadow-float);
  }
  .card {
    transition: transform var(--liquid-spring), box-shadow 300ms ease;
  }
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: clamp(210px, 23vw, 240px) minmax(0,1fr); }
  .home-panels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
}

@media (max-width: 768px) {
  :root {
    --liquid-blur: 22px;
    --liquid-radius: 18px;
    --liquid-radius-sm: 15px;
  }
  body::before { width: 80vw; inset: 8vh auto auto -25vw; }
  body::after { width: 76vw; inset: auto -25vw 5vh auto; }
  .main {
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .top {
    margin: 0 -2px 12px;
    padding: 10px 8px;
    border-radius: 16px;
    backdrop-filter: blur(var(--liquid-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(180%);
  }
  .card { padding: 15px; }
  .grid,
  .home-metrics,
  .home-panels { grid-template-columns: minmax(0,1fr); }
  .home-quick-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quick-link-card { min-height: 64px; padding: 12px; }
  .mobile-nav {
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 22px;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    box-shadow: var(--liquid-shadow-float);
  }
  .mobile-nav a { min-width: 56px; }
  .chat-thread { padding-inline: 10px; }
  .chat-bubble { max-width: 94%; }
  .chat-composer { margin: 8px; border-radius: 18px; }
  .chat-sidebar { margin: 0; border-radius: 0 0 0 22px; }
}

@media (max-width: 420px) {
  .home-quick-links { grid-template-columns: minmax(0,1fr); }
  .toolbar { gap: 7px; }
  button { min-height: 44px; }
  .title { font-size: 1.35rem; }
  .chat-bubble { max-width: 97%; }
}

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

@supports not (backdrop-filter: blur(1px)) {
  .card,
  .side,
  .mobile-nav,
  .view-header,
  .chat-sidebar,
  .chat-composer,
  .chat-bubble.assistant,
  .chat-image-bubble,
  .modal-card,
  .floating-menu,
  .command-palette-card,
  .settings-tabs,
  .quick-link-card,
  .login .card {
    background: var(--panel2);
  }
}


/* Compact Liquid Glass chat composer v2.6.2 */
.chat-input-bar {
  position: sticky;
  bottom: 0;
  z-index: 42;
  width: calc(100% - clamp(16px, 2vw, 32px));
  margin: 0 auto clamp(8px, 1.2vw, 14px);
  padding: 5px;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 44%),
    linear-gradient(rgba(20,24,33,.72), rgba(20,24,33,.72));
  background-clip: padding-box;
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 14px 42px rgba(0,0,0,.3);
}

.chat-input-bar::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 46%, rgba(10,132,255,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.chat-input-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: end;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  box-shadow: none;
}

.chat-input-row textarea,
.chat-input-row textarea:focus {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  max-height: 132px;
  margin: 0;
  padding: 10px 11px 9px;
  border: 0;
  border-radius: 13px;
  outline: 0;
  resize: none;
  overflow-y: auto;
  color: var(--fg);
  background: transparent;
  box-shadow: none;
  transform: none;
  font-size: clamp(15px, 1vw, 16px);
  line-height: 1.42;
  scrollbar-width: thin;
}

.chat-input-row textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.chat-input-row .chat-icon-btn,
.chat-input-row button:last-child {
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  align-self: end;
  border-radius: 13px;
}

.chat-input-row .chat-icon-btn {
  width: 42px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;
  font-size: 17px;
}

.chat-input-row button:last-child {
  min-width: 68px;
  padding-inline: 14px;
  font-size: 15px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 7px 18px rgba(10,132,255,.22);
}

.chat-image-preview {
  margin: 0 2px 2px;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

html.light-theme .chat-input-bar {
  background:
    linear-gradient(145deg, rgba(255,255,255,.9), transparent 46%),
    linear-gradient(rgba(247,249,255,.76), rgba(247,249,255,.76));
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(70,90,125,.08) inset,
    0 14px 38px rgba(55,72,105,.14);
}

html.light-theme .chat-input-row {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.light-theme .chat-input-row .chat-icon-btn {
  background: rgba(255,255,255,.55);
  border-color: rgba(55,75,110,.1);
}

@media (max-width: 600px) {
  .chat-input-bar {
    width: calc(100% - 12px);
    margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    padding: 4px;
    border-radius: 18px;
  }
  .chat-input-row {
    grid-template-columns: 40px minmax(0, 1fr) 58px;
    gap: 4px;
    min-height: 42px;
  }
  .chat-input-row .chat-icon-btn,
  .chat-input-row button:last-child {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }
  .chat-input-row button:last-child {
    width: 58px;
    min-width: 58px;
    padding-inline: 7px;
    font-size: 14px;
  }
  .chat-input-row textarea,
  .chat-input-row textarea:focus {
    min-height: 40px;
    max-height: 112px;
    padding: 9px 8px 8px;
    font-size: 16px;
  }
}


/* Conversation options stacking fix v2.6.3 */
.chat-session-groups,
.chat-session-group {
  position: relative;
  isolation: auto;
}
.chat-session-row {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.chat-session-row.menu-open {
  z-index: 500;
}
.chat-session-row.menu-open .chat-session-menu-btn {
  position: relative;
  z-index: 502;
}
.chat-session-menu-panel {
  z-index: 501;
  min-width: 168px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 42%),
    linear-gradient(rgba(25,29,39,.97), rgba(25,29,39,.97));
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 18px 48px rgba(0,0,0,.48);
}
.chat-session-menu-item {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.025);
}
.chat-session-menu-item:hover {
  background: rgba(10,132,255,.18);
}
html.light-theme .chat-session-menu-panel {
  border-color: rgba(60,78,110,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), transparent 44%),
    linear-gradient(rgba(246,248,253,.98), rgba(246,248,253,.98));
  box-shadow:
    0 1px 0 #fff inset,
    0 18px 48px rgba(45,62,94,.22);
}
html.light-theme .chat-session-menu-item {
  background: rgba(255,255,255,.5);
}
html.light-theme .chat-session-menu-item:hover {
  background: rgba(0,122,255,.12);
}


/* ---------- v2.6.5 atmospheric canvas + modern attachments ---------- */
html {
  min-height: 100%;
  background-color: var(--bg);
}
body {
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--body-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.shell,
.app,
#app,
.page-shell {
  min-height: 100dvh;
}
.chat-icon-btn[title="رفع ملف"] {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--surface-border) 72%, var(--glass-highlight));
  border-radius: 50%;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, white 8%), color-mix(in srgb, var(--surface-strong) 88%, transparent)),
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.2), transparent 46%);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 8px 20px rgba(0,0,0,.14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  transition: transform .34s cubic-bezier(.2,.8,.2,1.15), border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.chat-icon-btn[title="رفع ملف"]::after {
  content: "";
  position: absolute;
  inset: -40% 55% -40% -30%;
  transform: rotate(18deg) translateX(-160%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: transform .5s ease;
  pointer-events: none;
}
.chat-icon-btn[title="رفع ملف"]:hover,
.chat-icon-btn[title="رفع ملف"]:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--surface-border));
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 0 0 3px var(--accent-soft), 0 10px 24px rgba(0,122,255,.18);
  transform: translateY(-1px) scale(1.04);
}
.chat-icon-btn[title="رفع ملف"]:hover::after {
  transform: rotate(18deg) translateX(260%);
}
.chat-icon-btn[title="رفع ملف"]:active {
  transform: scale(.92);
}
.chat-icon-btn[title="رفع ملف"] svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}

/* Guest portal owns an adaptive, self-contained theme. */
.guest-portal-page {
  --guest-fg: #f5f7ff;
  --guest-muted: #a9b2c7;
  --guest-card: rgba(12, 18, 31, .68);
  --guest-input: rgba(5, 10, 20, .66);
  --guest-border: rgba(255,255,255,.15);
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  overflow-x: hidden;
  color: var(--guest-fg);
  background:
    radial-gradient(ellipse 58% 48% at 88% 4%, rgba(10,132,255,.34), transparent 68%),
    radial-gradient(ellipse 48% 42% at 4% 96%, rgba(94,92,230,.27), transparent 72%),
    linear-gradient(145deg, #111827, #050914 52%, #02040a);
  background-attachment: fixed;
}
.guest-portal-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 480px);
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--guest-border);
  border-radius: 28px;
  color: var(--guest-fg);
  background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 40%), var(--guest-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 30px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}
.guest-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.guest-brand img {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 10px 20px rgba(10,132,255,.3));
}
.guest-brand-copy strong {
  display: block;
  font-size: 1rem;
}
.guest-brand-copy span {
  color: var(--guest-muted);
  font-size: .78rem;
}
.guest-portal-card .title {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  color: var(--guest-fg);
}
.guest-portal-card .sub {
  color: var(--guest-muted);
  line-height: 1.7;
}
.guest-portal-card input[type="text"],
.guest-portal-card input[type="number"],
.guest-portal-card input[type="file"] {
  color: var(--guest-fg);
  background: var(--guest-input);
  border-color: var(--guest-border);
}
.guest-portal-card .guest-primary {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(145deg, #1597ff, #0062d8);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 14px 30px rgba(0,98,216,.28);
}
.guest-portal-card .guest-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 36px rgba(0,98,216,.34);
}
.guest-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 12px;
  border: 1px solid var(--guest-border);
  border-radius: 14px;
  color: var(--guest-muted);
  background: rgba(255,255,255,.04);
  font-size: .78rem;
  line-height: 1.55;
}
.guest-portal-card .toolbar button {
  min-height: 42px;
}
@media (prefers-color-scheme: light) {
  .guest-portal-page {
    --guest-fg: #172033;
    --guest-muted: #63708a;
    --guest-card: rgba(255,255,255,.68);
    --guest-input: rgba(255,255,255,.78);
    --guest-border: rgba(26,53,91,.13);
    background:
      radial-gradient(ellipse 62% 48% at 92% 2%, rgba(0,122,255,.2), transparent 68%),
      radial-gradient(ellipse 52% 44% at 4% 96%, rgba(175,82,222,.15), transparent 72%),
      radial-gradient(ellipse 34% 26% at 48% 50%, rgba(90,200,250,.13), transparent 74%),
      linear-gradient(145deg, #fff, #f3f7ff 50%, #e8edf8);
  }
  .guest-portal-card {
    box-shadow: 0 1px 0 #fff inset, 0 30px 80px rgba(52,72,110,.16);
  }
  .guest-privacy-note { background: rgba(255,255,255,.42); }
}
@media (max-width: 560px) {
  .guest-portal-page { padding: 12px; place-items: start center; }
  .guest-portal-card { margin-block: 12px; border-radius: 24px; }
}


/* ========== Mobile security + viewport hardening v2.6.7 ========== */
[hidden],
.hide {
  display: none !important;
}
html:not(.auth-ok) #chooser,
html:not(.auth-ok) #chatView,
html:not(.auth-ok) #app,
html:not(.auth-ok) #mobileNav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  #chatView.chat-shell:not(.hide):not([hidden]) {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  #chatView .view-header {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #chatView .chat-body {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #chatView .chat-pane {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #chatView .chat-main,
  #chatView .chat-thread-scroll,
  #chatView .chat-thread-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #chatView .chat-thread-inner {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  #chatView .chat-sidebar {
    position: fixed !important;
    flex: none !important;
    top: 64px !important;
    bottom: 0 !important;
    width: min(360px, 92vw) !important;
    max-width: 92vw !important;
  }
  #chatView .chat-input-bar {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 0 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #chatView .chat-input-row {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 40px minmax(0, 1fr) 58px !important;
  }
  #chatView .chat-input-row textarea {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* Mobile chat dashboard shortcut v2.6.8 */
.chat-dashboard-btn {
  display: none;
}
.chat-dashboard-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
@media (max-width: 1023px) {
  .chat-dashboard-btn {
    display: inline-grid !important;
    place-items: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    color: var(--accent);
    border-radius: 16px;
  }
}
@media (max-width: 360px) {
  .chat-dashboard-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}


/* Mobile floating menus open below their trigger v2.6.9 */
@media (max-width: 768px) {
  .quick-action-menu,
  .user-menu-panel {
    position: fixed !important;
    top: var(--menu-mobile-top, 132px) !important;
    right: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    max-height: var(--menu-mobile-max-height, calc(100dvh - 230px)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 120 !important;
    transform-origin: top center;
  }
  .quick-action-menu:not(.hide),
  .user-menu-panel:not(.hide) {
    animation: mobile-menu-drop .22s cubic-bezier(.2,.8,.2,1) both;
  }
}
@keyframes mobile-menu-drop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* Compact all-day pill + mobile calendar v2.6.10 */
.cal-all-day-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 7px 14px;
  gap: 7px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--fg);
  background: var(--surface-input);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.cal-all-day-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--surface-border));
  transform: translateY(-1px);
}
.cal-all-day-toggle:active { transform: scale(.97); }
.cal-all-day-toggle input {
  position: absolute;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.cal-all-day-toggle span::before {
  content: "";
  display: inline-block;
  inline-size: 0;
  overflow: hidden;
  vertical-align: -1px;
  transition: inline-size .18s ease, margin .18s ease;
}
.cal-all-day-toggle:has(input:checked) {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(145deg, #1597ff, #006edb);
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 8px 20px rgba(10,132,255,.22);
}
.cal-all-day-toggle:has(input:checked) span::before {
  content: "✓";
  inline-size: 1em;
  margin-inline-end: 5px;
}
@media (max-width: 720px) {
  #p-calendar .card { padding: 12px; }
  #p-calendar .cal-toolbar {
    gap: 6px;
    align-items: center;
  }
  #p-calendar .cal-toolbar button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }
  #p-calendar .cal-title {
    width: 100%;
    text-align: center;
    order: -1;
  }
  #p-calendar .cal-tz-label {
    width: 100%;
    text-align: center;
  }
  .cal-weekdays,
  .cal-grid { gap: 4px; }
  .cal-weekday { font-size: 10px; }
  .cal-day-cell {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1.08;
    padding: 5px !important;
    gap: 4px;
    border-radius: 9px;
    overflow: hidden;
  }
  .cal-day-num {
    align-self: center;
    font-size: 12px;
    line-height: 1;
  }
  .cal-day-chips {
    width: 100%;
    min-height: 7px;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3px;
  }
  .cal-chip:not(.cal-chip-more) {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .cal-chip-more {
    width: auto;
    max-width: 100%;
    padding: 1px 4px;
    font-size: 8px;
    line-height: 1.2;
    border-radius: 5px;
  }
  .cal-form { gap: 9px; }
  .cal-all-day-toggle {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* Project-scoped conversations (2.5.1) */
.chat-project-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(42vw, 220px);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.2;
  min-height: 36px;
}
.chat-project-picker-caret { opacity: 0.7; font-size: 10px; }
.chat-project-picker-menu {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
  max-width: min(92vw, 320px);
  max-height: 50vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  padding: 6px;
}
#chatProjectPickerMenu:not(.hide) {
  top: calc(var(--chat-header-offset, 56px));
  inset-inline-start: max(12px, env(safe-area-inset-left));
}
.chat-project-picker-item {
  display: block;
  width: 100%;
  text-align: start;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font: inherit;
}
.chat-project-picker-item:hover,
.chat-project-picker-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.chat-project-filter-wrap { display: block; margin-top: 8px; }
.chat-project-filter {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  padding: 6px 8px;
}
.chat-session-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-session-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-session-project-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-project-context-hint {
  display: inline-flex;
  align-items: center;
  max-width: min(46vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-bubble.system .chat-bubble-text {
  opacity: 0.82;
  font-size: 12px;
}
.project-chat-toolbar { margin-top: 12px; }
.project-conversation-row { cursor: pointer; }
.project-conversation-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (max-width: 1023px) {
  .chat-project-picker-btn { max-width: min(56vw, 240px); }
  .view-header-actions .chat-project-context-hint { display: none; }
}

/* Engineering scripts library */
.scripts-toolbar {
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.scripts-toolbar select,
.scripts-toolbar input[type="search"] {
  min-width: 140px;
  flex: 1;
}
.scripts-grid .scripts-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.script-code-input,
.script-code-block {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
#scriptsList {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 3px;
  scrollbar-width: thin;
}
.script-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  text-align: start;
  padding: 7px 10px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  color: var(--fg);
  background: color-mix(in srgb, var(--surface-input) 72%, transparent);
  box-shadow: 0 1px 0 var(--glass-highlight) inset;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.script-list-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--surface-border));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-input));
}
.script-list-item-active {
  border-color: var(--accent, #007aff);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-input));
}
.script-list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.2;
}
.script-list-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}
.script-list-host,
.script-list-version {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel2) 82%, transparent);
  border: 1px solid var(--surface-border);
}
.script-list-chevron {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  #scriptsList { max-height: 240px; }
  .script-list-item {
    grid-template-columns: minmax(0, 1fr) auto 14px;
    min-height: 42px;
    gap: 6px;
    padding: 6px 8px;
  }
  .script-list-host { display: none; }
}
.script-detail-head { margin-bottom: 12px; }
.script-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.script-copy-btn { font-weight: 700; }
.script-version-list { display: grid; gap: 10px; margin-top: 8px; }
.script-version-row {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
}

/* Dark-theme form contrast and balanced brand lockup */
.sidebar-brand,
.sidebar-brand:link,
.sidebar-brand:visited {
  color: var(--fg);
}
.sidebar-brand-copy strong {
  color: var(--fg);
  text-shadow: none;
}
.sidebar-brand-copy small {
  color: var(--accent);
  text-shadow: none;
}
#p-scripts :where(input, textarea, select) {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--accent);
}
#p-scripts select {
  color-scheme: dark;
}
#p-scripts select option {
  color: #f4f7ff;
  background: #101827;
}
#p-scripts :where(input, textarea)::placeholder {
  color: var(--muted);
  opacity: .86;
  -webkit-text-fill-color: var(--muted);
}
html.light-theme #p-scripts :where(input, textarea, select) {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
}
html.light-theme #p-scripts select {
  color-scheme: light;
}
html.light-theme #p-scripts select option {
  color: #17191f;
  background: #f7f9fc;
}



/* Post-merge regression fixes (version-neutral) */
.settings-provider-block {
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 0 12px;
  margin-block: 8px;
  background: var(--surface-input);
}
.settings-provider-block > summary {
  cursor: pointer;
  list-style-position: inside;
  padding-block: 11px;
  margin: 0;
  user-select: none;
}
.settings-provider-block[open] > summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.settings-provider-block .settings-model-row {
  padding-block: 5px;
  overflow-wrap: anywhere;
}
.calendar-loading {
  display: grid;
  place-items: center;
  min-height: 160px;
  text-align: center;
}
.chat-project-picker-menu {
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
}


/* Option menus use stronger glass for text contrast */
.quick-action-menu,
.user-menu-panel,
.chat-project-picker-menu,
.chat-session-menu-panel,
.cal-sched-menu-panel {
  background-color: rgba(22, 26, 34, 0.94) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.018) 48%, transparent 76%);
  backdrop-filter: blur(25px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(175%) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 18px 48px rgba(0,0,0,.32) !important;
}
html.light-theme .quick-action-menu,
html.light-theme .user-menu-panel,
html.light-theme .chat-project-picker-menu,
html.light-theme .chat-session-menu-panel,
html.light-theme .cal-sched-menu-panel {
  background-color: rgba(235, 241, 249, 0.94) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.16) 52%, transparent 78%);
  border-color: rgba(52,65,90,.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 18px 48px rgba(68,84,115,.20) !important;
}



/* R2 + Google Drive storage monitoring */
.storage-monitor-toolbar {
  display: flex;
  justify-content: flex-start;
  margin: 16px 0 12px;
}
.storage-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.storage-monitor-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface-input) 78%, transparent);
  box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 10px 28px rgba(0,0,0,.08);
}
.storage-monitor-card p {
  margin: 8px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.storage-monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.storage-status {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.storage-status.is-ok {
  color: #8ff0b2;
  background: rgba(52,199,89,.16);
  border: 1px solid rgba(52,199,89,.34);
}
.storage-status.is-error {
  color: #ffaaa5;
  background: rgba(255,59,48,.15);
  border: 1px solid rgba(255,59,48,.32);
}
.storage-monitor-error {
  color: #ffaaa5 !important;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255,59,48,.10);
}
.storage-monitor-checked {
  margin-top: 10px;
}
html.light-theme .storage-status.is-ok {
  color: #176b34;
  background: rgba(52,199,89,.12);
}
html.light-theme .storage-status.is-error,
html.light-theme .storage-monitor-error {
  color: #a8241d !important;
}
@media (max-width: 680px) {
  .storage-monitor-grid {
    grid-template-columns: 1fr;
  }
  .storage-monitor-toolbar button {
    width: 100%;
  }
}


/* login-modern-direct-20260831d */
.login-screen{min-height:100dvh;position:relative;overflow:hidden;isolation:isolate;padding:24px}
.login-screen::before,.login-screen::after{content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(18px)}
.login-screen::before{width:520px;height:520px;top:-240px;right:-180px;background:radial-gradient(circle,rgba(0,153,255,.26),rgba(28,76,210,.08) 52%,transparent 72%)}
.login-screen::after{width:460px;height:460px;left:-190px;bottom:-220px;background:radial-gradient(circle,rgba(78,74,255,.20),rgba(0,201,255,.06) 52%,transparent 72%)}
.login-card-modern{width:min(420px,100%)!important;max-width:420px!important;padding:30px 26px 24px!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;border:1px solid rgba(111,190,255,.20)!important;backdrop-filter:blur(28px) saturate(170%)!important;-webkit-backdrop-filter:blur(28px) saturate(170%)!important;box-shadow:0 1px 0 rgba(255,255,255,.13) inset,0 30px 80px rgba(0,0,0,.34)!important}
.login-brand-zone{display:grid;justify-items:center;gap:9px;margin-bottom:26px}.login-logo-shell{width:112px;height:112px;display:grid;place-items:center;border-radius:30px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.13),transparent 38%),rgba(5,16,38,.28);border:1px solid rgba(85,198,255,.16);box-shadow:0 18px 50px rgba(0,125,255,.18),0 1px 0 rgba(255,255,255,.10) inset}.login-logo-shell .brand-logo-mark{width:94px!important;height:94px!important;object-fit:contain;filter:drop-shadow(0 10px 23px rgba(0,146,255,.24))}.login-brand-title{direction:ltr;display:flex;align-items:baseline;gap:7px;line-height:1}.login-brand-title strong{font-size:30px;font-weight:850;letter-spacing:.055em}.login-brand-title small{font-size:17px;font-weight:850;color:var(--accent);letter-spacing:.08em}.login-tagline{color:var(--muted);font-size:13px;margin-top:3px}.login-form-zone{display:grid;gap:11px;text-align:start}.login-field-label{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--fg) 80%,var(--muted));padding-inline:3px}.login-card-modern input{width:100%;min-height:54px;margin:0!important;border-radius:16px;padding:12px 15px;background:color-mix(in srgb,var(--surface-input) 90%,transparent)}.login-primary-btn{width:100%;min-height:52px;border-radius:16px;font-weight:800;margin-top:2px}.login-verification-step{margin-top:8px}.login-verification-copy{text-align:center;margin-bottom:10px}.login-step-divider{display:flex;align-items:center;gap:10px;margin:10px 0 12px;color:var(--muted);font-size:11px;font-weight:700}.login-step-divider::before,.login-step-divider::after{content:"";height:1px;flex:1;background:var(--surface-border)}.login-security-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:19px;color:var(--muted);font-size:11px}.login-security-note .login-security-dot{width:7px;height:7px;border-radius:50%;background:#30d158;box-shadow:0 0 10px rgba(48,209,88,.38)}html.light-theme .login-card-modern{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,249,255,.70))!important;border-color:rgba(32,110,200,.14)!important;box-shadow:0 1px 0 #fff inset,0 30px 70px rgba(41,76,130,.14)!important}html.light-theme .login-logo-shell{background:linear-gradient(145deg,#fff,rgba(231,243,255,.78));border-color:rgba(0,122,255,.12)}html.light-theme .login-card-modern input{background:rgba(255,255,255,.90)}@media(max-width:480px){.login-screen{padding:18px}.login-card-modern{padding:26px 20px 22px!important;border-radius:26px!important}.login-logo-shell{width:98px;height:98px;border-radius:27px}.login-logo-shell .brand-logo-mark{width:82px!important;height:82px!important}.login-brand-title strong{font-size:27px}}

/* ============================================================
   LOGIN SCREEN — CONSOLIDATED 2026-09-02
   ============================================================ */
/* login-refresh-direct */.login-screen {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 100dvh;
      padding: clamp(22px, 5vw, 56px);
    }
    .login-screen::before,
    .login-screen::after {
      content: "";
      position: fixed;
      z-index: -2;
      pointer-events: none;
      border-radius: 999px;
      filter: blur(12px);
    }
    .login-screen::before {
      width: min(760px, 74vw);
      aspect-ratio: 1;
      inset: -30% auto auto -18%;
      background: radial-gradient(circle, rgba(0, 173, 255, .22), rgba(17, 91, 255, .08) 46%, transparent 72%);
    }
    .login-screen::after {
      width: min(680px, 68vw);
      aspect-ratio: 1;
      inset: auto -22% -36% auto;
      background: radial-gradient(circle, rgba(73, 96, 255, .20), rgba(0, 210, 255, .06) 46%, transparent 72%);
    }
    .login-card-modern {
      position: relative;
      width: min(430px, 100%);
      max-width: none !important;
      padding: clamp(24px, 5vw, 34px) !important;
      border-radius: 30px !important;
      overflow: hidden;
      text-align: center;
      background:
        linear-gradient(145deg, rgba(255,255,255,.08), transparent 34%),
        color-mix(in srgb, var(--surface-strong) 90%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--surface-border) 74%, rgba(88, 196, 255, .28)) !important;
      backdrop-filter: blur(30px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 34px 90px rgba(0,0,0,.34), 0 0 0 1px rgba(44,174,255,.04) !important;
    }
    .login-card-modern::before {
      content: "";
      position: absolute;
      inset: 0 10% auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(120,220,255,.7), transparent);
      opacity: .75;
    }
    .login-brand-zone { display: grid; justify-items: center; gap: 9px; margin-bottom: 28px; }
    .login-logo-shell {
      width: 96px;
      height: 96px;
      display: grid;
      place-items: center;
      border-radius: 27px;
      background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.14), transparent 40%), rgba(8, 18, 40, .30);
      border: 1px solid rgba(115, 213, 255, .18);
      box-shadow: 0 18px 44px rgba(0, 115, 255, .18), 0 1px 0 rgba(255,255,255,.12) inset;
    }
    .login-logo-shell .brand-logo-mark { width: 78px !important; height: 78px !important; filter: drop-shadow(0 10px 22px rgba(0, 151, 255, .24)); }
    .login-brand-title { display: inline-flex; align-items: baseline; gap: 7px; direction: ltr; line-height: 1; }
    .login-brand-title strong { font-size: clamp(26px, 7vw, 32px); letter-spacing: .055em; font-weight: 850; }
    .login-brand-title small { font-size: clamp(15px, 4vw, 18px); font-weight: 850; color: var(--accent); letter-spacing: .08em; }
    .login-tagline { color: var(--muted); font-size: 13px; letter-spacing: .01em; margin-top: 2px; }
    .login-form-zone { display: grid; gap: 11px; text-align: start; }
    .login-field-label { color: color-mix(in srgb, var(--fg) 80%, var(--muted)); font-size: 12px; font-weight: 700; padding-inline: 3px; }
    .login-card-modern input {
      width: 100%; min-height: 52px; margin: 0 !important; border-radius: 15px; padding: 12px 15px;
      background: color-mix(in srgb, var(--surface-input) 90%, transparent);
      border-color: color-mix(in srgb, var(--surface-border) 82%, rgba(0, 154, 255, .22));
      box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 10px 26px rgba(0,0,0,.08);
    }
    .login-card-modern input:focus { border-color: color-mix(in srgb, var(--accent) 68%, white 12%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 78%, transparent), 0 1px 0 var(--glass-highlight) inset; }
    .login-primary-btn { width: 100%; min-height: 50px; margin-top: 2px; border-radius: 15px; font-weight: 780; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 12px 30px rgba(0, 122, 255, .24); }
    .login-verification-step { margin-top: 8px; padding-top: 2px; }
    .login-verification-copy { text-align: center; margin: 2px 0 10px; }
    .login-step-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .login-step-divider::before, .login-step-divider::after { content: ""; height: 1px; flex: 1; background: var(--surface-border); }
    .login-security-note { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; color: var(--muted); font-size: 11px; }
    .login-security-dot { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 10px rgba(48, 209, 88, .38); }
    html.light-theme .login-card-modern {
      background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.58) 52%, rgba(245,249,255,.72)) !important;
      border-color: rgba(51, 116, 190, .14) !important;
      box-shadow: 0 1px 0 #fff inset, 0 30px 76px rgba(40, 70, 120, .14) !important;
    }
    html.light-theme .login-logo-shell { background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(231,243,255,.74)); border-color: rgba(0, 122, 255, .12); box-shadow: 0 18px 40px rgba(0, 93, 190, .12), 0 1px 0 #fff inset; }
    html.light-theme .login-card-modern input { background: rgba(255,255,255,.88); }
    @media (max-width: 480px) {
      .login-screen { padding: 18px; }
      .login-card-modern { border-radius: 26px !important; padding: 24px 20px !important; }
      .login-logo-shell { width: 86px; height: 86px; border-radius: 24px; }
      .login-logo-shell .brand-logo-mark { width: 70px !important; height: 70px !important; }
      .login-brand-zone { margin-bottom: 24px; }
    }

/* login-polish-20260902a *//* login-polish-20260902a */
    .login-screen{background:radial-gradient(circle at 18% 16%,rgba(48,167,255,.12),transparent 26%),radial-gradient(circle at 82% 78%,rgba(87,93,255,.12),transparent 30%)}
    .login-screen::before{animation:loginAuroraA 12s ease-in-out infinite alternate}.login-screen::after{animation:loginAuroraB 15s ease-in-out infinite alternate}
    .login-card-modern{transform-origin:50% 58%;animation:loginCardEnter 720ms cubic-bezier(.2,.9,.2,1) both}
    .login-brand-zone-hero{gap:12px;margin-bottom:30px}
    .login-wordmark{direction:ltr;display:inline-flex;align-items:center;justify-content:center;gap:0;line-height:1;min-height:74px;user-select:none;animation:loginWordmarkEnter 820ms 90ms cubic-bezier(.16,1,.3,1) both}
    .login-wordmark-mark{width:76px;height:76px;object-fit:contain;margin-right:-6px;filter:drop-shadow(0 10px 26px rgba(0,145,255,.22));animation:loginMarkFloat 5.5s 1s ease-in-out infinite}
    .login-wordmark-rest{font-size:clamp(30px,7vw,38px);font-weight:850;letter-spacing:.055em;color:var(--fg);transform:translateY(1px)}
    .login-wordmark-ai{font-size:clamp(17px,4vw,21px);font-weight:850;letter-spacing:.08em;color:var(--accent);margin-left:8px;transform:translateY(4px)}
    .login-tagline{font-size:13px;letter-spacing:.012em;animation:loginFadeUp 680ms 220ms ease both}.login-form-zone{animation:loginFadeUp 700ms 300ms ease both}.login-security-note{animation:loginFadeUp 650ms 420ms ease both}
    .login-password-wrap{position:relative;width:100%}.login-password-wrap #token{padding-inline-end:52px}
    .login-password-toggle{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);width:40px!important;height:40px;min-height:40px!important;padding:0!important;margin:0!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;display:grid;place-items:center;transition:background .18s ease,color .18s ease,transform .18s ease}
    .login-password-toggle:hover{background:color-mix(in srgb,var(--accent-soft) 58%,transparent)!important;color:var(--fg)!important}.login-password-toggle:active{transform:translateY(-50%) scale(.94)}
    .login-password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.login-password-toggle .eye-closed{display:none}.login-password-toggle.is-visible .eye-open{display:none}.login-password-toggle.is-visible .eye-closed{display:block}
    .login-primary-btn{transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.login-primary-btn:hover{transform:translateY(-1px)}.login-primary-btn:active{transform:scale(.985)}
    html.light-theme .login-wordmark-mark{filter:drop-shadow(0 10px 24px rgba(0,108,220,.16))}
    @keyframes loginCardEnter{from{opacity:0;transform:translateY(18px) scale(.975);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
    @keyframes loginWordmarkEnter{from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
    @keyframes loginFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @keyframes loginMarkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    @keyframes loginAuroraA{from{transform:translate3d(-2%,-1%,0) scale(1);opacity:.9}to{transform:translate3d(5%,4%,0) scale(1.08);opacity:1}}
    @keyframes loginAuroraB{from{transform:translate3d(2%,2%,0) scale(1);opacity:.82}to{transform:translate3d(-5%,-4%,0) scale(1.1);opacity:1}}
    @media(max-width:480px){.login-wordmark-mark{width:66px;height:66px;margin-right:-5px}.login-wordmark-rest{font-size:31px}.login-wordmark-ai{font-size:18px;margin-left:6px}}
    @media(prefers-reduced-motion:reduce){.login-screen::before,.login-screen::after,.login-card-modern,.login-wordmark,.login-wordmark-mark,.login-tagline,.login-form-zone,.login-security-note{animation:none!important}}

/* login-cyber-20260902c *//* login-cyber-20260902c: cinematic circuit backdrop + theme toggle + live glass */
    .login-screen{display:flex;align-items:center;justify-content:center}
    .login-cyber-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
    .login-cyber-img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transition:opacity .35s ease,transform .18s linear}
    .login-cyber-light{opacity:0}
    html.light-theme .login-cyber-dark{opacity:0}
    html.light-theme .login-cyber-light{opacity:1}
    .login-cyber-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,.55) 100%)}
    html.light-theme .login-cyber-vignette{background:radial-gradient(ellipse at center,rgba(255,255,255,.08) 22%,rgba(15,23,42,.22) 100%)}
    .login-cyber-spot{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(560px circle at 70% 24%,rgba(34,211,238,.16),transparent 62%)}
    html.light-theme .login-cyber-spot{mix-blend-mode:multiply;background:radial-gradient(560px circle at 70% 24%,rgba(14,165,233,.14),transparent 62%)}
    .login-theme-toggle{
      position:absolute!important;top:14px!important;inset-inline-end:14px!important;inset-inline-start:auto!important;
      z-index:4;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;
      padding:0!important;margin:0!important;flex:none!important;
      border:1px solid rgba(255,255,255,.18)!important;border-radius:14px!important;
      background:rgba(8,16,32,.45)!important;color:#e8f6ff!important;
      backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
      display:grid!important;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.22)
    }
    html.light-theme .login-theme-toggle{background:rgba(255,255,255,.7)!important;color:#123!important;border-color:rgba(255,255,255,.8)!important}
    .login-theme-toggle svg{width:18px;height:18px}
    .login-theme-toggle .icon-sun{display:none}
    html.light-theme .login-theme-toggle .icon-moon{display:none}
    html.light-theme .login-theme-toggle .icon-sun{display:block}
    .login-card-modern{position:relative;z-index:1;overflow:hidden;isolation:isolate}
    .login-card-sheen{pointer-events:none;position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,70%) var(--my,22%),rgba(165,243,252,.22),transparent 48%);mix-blend-mode:screen;opacity:.9}
    html.light-theme .login-card-sheen{background:radial-gradient(420px circle at var(--mx,70%) var(--my,22%),rgba(255,255,255,.5),transparent 46%);mix-blend-mode:soft-light}
    .login-wordmark{align-items:center!important;gap:2px;height:48px!important;min-height:48px!important}
    .login-wordmark-mark{width:48px!important;height:48px!important;margin-right:-3px;animation:none}
    .login-wordmark-rest{font-size:48px!important;letter-spacing:.02em;color:var(--fg);transform:none!important;line-height:48px!important;height:48px;font-weight:800}
    .login-wordmark-ai{font-size:22px!important;letter-spacing:.06em;color:#5eead4!important;margin-left:6px;transform:none!important;line-height:48px!important;height:48px;font-weight:800}
    html.light-theme .login-wordmark-ai{color:#0f766e!important}
    .login-tagline{font-size:13px;color:color-mix(in srgb,var(--muted) 88%, #67e8f9)}
    .login-security-note{width:100%;display:flex!important;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:var(--muted);font-size:12px}
    .login-security-lock{width:14px;height:14px;flex:none;color:#34d399;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
    @media(max-width:480px){
      .login-wordmark,.login-wordmark-mark,.login-wordmark-rest,.login-wordmark-ai{height:42px!important}
      .login-wordmark-mark{width:42px!important}
      .login-wordmark-rest{font-size:42px!important;line-height:42px!important}
      .login-wordmark-ai{font-size:19px!important;line-height:42px!important}
    }
    @media(prefers-reduced-motion:reduce){.login-cyber-img{transition:none}}

/* Login transport status and footer */
.login-security-note.is-checking{color:var(--muted)}
.login-security-note.is-secure{color:#34d399}
.login-security-note.is-insecure{color:#f59e0b}
.login-security-icon{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.login-security-warning{display:none}
.login-security-note.is-insecure .login-security-lock{display:none}
.login-security-note.is-insecure .login-security-warning{display:block}
.login-copyright{margin-top:9px;text-align:center;color:var(--muted);font-size:11px;line-height:1.5;opacity:.82}


/* Login visual refinement 2026-09-02f */
.login-screen>.login-theme-toggle{
  position:fixed!important;top:max(18px,env(safe-area-inset-top))!important;left:max(18px,env(safe-area-inset-left))!important;
  right:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;z-index:30!important;
}
.login-wordmark{height:auto!important;min-height:54px!important;gap:1px!important}
.login-wordmark-mark{width:54px!important;height:54px!important;margin-right:-3px!important}
.login-wordmark-rest{
  height:auto!important;line-height:.95!important;font-family:"Sora","Avenir Next","Century Gothic","Segoe UI",sans-serif!important;
  font-size:42px!important;font-weight:700!important;letter-spacing:-.035em!important;
  color:#dceaf7!important;
  background:linear-gradient(180deg,#ffffff 0%,#c6dcef 72%,#9fbfd9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.login-wordmark-ai{
  align-self:center;height:auto!important;line-height:1!important;margin:2px 0 0 9px!important;
  font-family:"Sora","Avenir Next","Segoe UI",sans-serif!important;font-size:16px!important;font-weight:800!important;
  letter-spacing:.12em!important;color:#49d9ff!important;text-shadow:0 0 18px rgba(36,180,255,.28);
}
html.light-theme .login-wordmark-rest{background:linear-gradient(180deg,#17324a,#315f7d);-webkit-background-clip:text;background-clip:text}
html.light-theme .login-wordmark-ai{color:#087ea4!important;text-shadow:none}
.login-tagline{margin-top:7px!important;font-size:12.5px!important;letter-spacing:.01em!important}
.login-security-note{
  width:auto!important;max-width:100%!important;display:inline-flex!important;white-space:nowrap!important;
  margin:20px auto 0!important;padding:7px 11px!important;border-radius:999px!important;
  font-size:11.5px!important;line-height:1!important;background:rgba(52,211,153,.07);
  border:1px solid rgba(52,211,153,.16);
}
.login-security-note.is-insecure{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2)}
.login-security-note #loginSecurityText{width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.login-copyright{
  position:fixed!important;left:50%!important;bottom:max(14px,env(safe-area-inset-bottom))!important;z-index:20!important;
  transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0!important;
  color:rgba(190,211,228,.72)!important;font-size:11px!important;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.45);
}
html.light-theme .login-copyright{color:rgba(31,65,88,.68)!important;text-shadow:none}
@media(max-width:480px){
  .login-screen>.login-theme-toggle{top:max(12px,env(safe-area-inset-top))!important;left:max(12px,env(safe-area-inset-left))!important}
  .login-wordmark{min-height:46px!important}
  .login-wordmark-mark{width:46px!important;height:46px!important}
  .login-wordmark-rest{font-size:35px!important}
  .login-wordmark-ai{font-size:13px!important;margin-left:7px!important}
  .login-security-note{font-size:10.5px!important}
  .login-copyright{font-size:10px!important}
}



/* SAUD AI 3.0 LOGIN INTEGRATION */
.login-v3{
  --login-v3-fg:#f6f8fc;
  --login-v3-muted:rgba(221,228,240,.62);
  --login-v3-line:rgba(255,255,255,.095);
  --login-v3-panel:rgba(14,18,26,.68);
  --login-v3-blue:#3c91f4;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 4%,rgba(62,115,187,.18),transparent 34%),
    radial-gradient(circle at 12% 88%,rgba(42,70,112,.11),transparent 30%),
    linear-gradient(180deg,#0b0e14 0%,#07090d 100%)!important;
}
.login-v3 .login-cyber-img{display:none!important}
.login-v3 .login-cyber-bg{background:transparent!important}
.login-v3 .login-cyber-vignette{
  background:linear-gradient(180deg,rgba(6,8,12,.05),rgba(6,8,12,.36))!important;
}
.login-v3 .login-cyber-spot{opacity:.42!important;filter:blur(70px)!important}
.login-v3-card{
  width:min(430px,calc(100vw - 32px))!important;
  max-width:430px!important;
  padding:26px 26px 22px!important;
  border:1px solid var(--login-v3-line)!important;
  border-radius:28px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018) 48%),
    var(--login-v3-panel)!important;
  backdrop-filter:blur(30px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(145%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 28px 80px rgba(0,0,0,.36)!important;
}
.login-v3-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(88,144,219,.04));
}
.login-v3-release{
  position:absolute;top:17px;left:18px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:25px;padding:0 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;
  background:rgba(255,255,255,.035);color:rgba(232,238,248,.56);font:700 10px/1 Sora,system-ui,sans-serif;letter-spacing:.08em;
}
.login-v3 .login-brand-zone-hero{margin-bottom:18px!important;gap:8px!important}
.login-v3 .login-wordmark{transform:none!important}
.login-v3 .login-wordmark-mark{filter:drop-shadow(0 9px 22px rgba(0,0,0,.25))}
.login-v3 .login-tagline{font-size:12.5px!important;color:var(--login-v3-muted)!important;letter-spacing:0!important}
.login-v3-pillars{display:flex;justify-content:center;gap:6px;margin-top:3px;direction:ltr}
.login-v3-pillars span{
  padding:4px 8px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(255,255,255,.025);
  color:rgba(218,225,237,.48);font:700 8.5px/1.2 Sora,system-ui,sans-serif;letter-spacing:.1em;
}
.login-v3 .login-form-zone{position:relative;z-index:1}
.login-v3-welcome{display:grid;gap:4px;margin:4px 0 15px;text-align:right}
.login-v3-welcome strong{font-size:17px;line-height:1.35;color:var(--login-v3-fg)}
.login-v3-welcome span{font-size:11.5px;line-height:1.6;color:var(--login-v3-muted)}
.login-v3 .temp-login-mode{
  padding:4px!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:14px!important;background:rgba(0,0,0,.14)!important;
}
.login-v3 .temp-login-mode button{border-radius:10px!important;min-height:36px!important;font-size:11.5px!important}
.login-v3 .temp-login-mode button[aria-pressed="true"]{
  background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 1px 0 rgba(255,255,255,.08) inset!important;
}
.login-v3 .login-field-label{margin-top:14px!important;color:var(--login-v3-muted)!important;font-size:11px!important}
.login-v3 .login-password-wrap,
.login-v3 .login-verification-step input{
  border-color:rgba(255,255,255,.09)!important;border-radius:15px!important;background:rgba(2,5,9,.22)!important;box-shadow:0 1px 0 rgba(255,255,255,.025) inset!important;
}
.login-v3 .login-password-wrap:focus-within{
  border-color:rgba(91,155,235,.42)!important;box-shadow:0 0 0 3px rgba(60,145,244,.08)!important;
}
.login-v3 .login-password-wrap input{min-height:47px!important;font-size:15px!important}
.login-v3-primary{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-height:47px!important;margin-top:14px!important;
  border-radius:14px!important;border-color:rgba(255,255,255,.12)!important;
  background:linear-gradient(145deg,#347fda,#2468bb)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px rgba(26,92,169,.19)!important;
}
.login-v3-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.login-v3-primary:active{transform:translateY(0) scale(.99)}
.login-v3-arrow{opacity:.68;font-size:14px}
.login-v3 .login-security-note{
  margin-top:16px!important;padding-top:14px!important;border-top:1px solid rgba(255,255,255,.065)!important;
  background:transparent!important;border-radius:0!important;justify-content:center!important;color:var(--login-v3-muted)!important;
}
.login-v3 .login-security-note.is-secure{color:rgba(160,215,181,.72)!important}
.login-v3 .login-copyright{color:rgba(210,218,230,.38)!important}
html.light-theme .login-v3{
  --login-v3-fg:#172033;--login-v3-muted:rgba(54,68,91,.62);--login-v3-line:rgba(55,75,110,.12);--login-v3-panel:rgba(250,252,255,.78);
  background:radial-gradient(circle at 50% 5%,rgba(91,145,213,.14),transparent 34%),linear-gradient(180deg,#f4f7fb,#e9eef6)!important;
}
html.light-theme .login-v3-card{background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.64)),var(--login-v3-panel)!important;box-shadow:0 1px 0 #fff inset,0 26px 70px rgba(60,78,108,.14)!important}
html.light-theme .login-v3 .temp-login-mode{background:rgba(84,103,133,.045)!important}
html.light-theme .login-v3 .login-password-wrap,
html.light-theme .login-v3 .login-verification-step input{background:rgba(255,255,255,.58)!important;border-color:rgba(55,75,110,.11)!important}
@media(max-width:600px){
  .login-v3-card{width:calc(100vw - 24px)!important;padding:23px 20px 20px!important;border-radius:24px!important}
  .login-v3-release{top:14px;left:14px}
  .login-v3 .login-brand-zone-hero{margin-bottom:15px!important}
  .login-v3-welcome{margin-bottom:12px}
  .login-v3-pillars span{padding:4px 7px;font-size:8px}
}


/* SAUD AI 3.0 TECH HUB */
.tech-hub-page{--tech-line:color-mix(in srgb,var(--line) 82%,transparent);--tech-soft:color-mix(in srgb,var(--panel2) 78%,transparent);display:none;gap:18px;max-width:1180px;margin:0 auto}
.tech-hub-page.active{display:grid}.tech-hub-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:4px 2px 2px}.tech-hub-hero h2{margin:4px 0 5px;font-size:clamp(1.5rem,2.4vw,2.05rem)}.tech-eyebrow,.tech-kicker{font:750 10px/1.2 Sora,system-ui,sans-serif;letter-spacing:.11em;color:color-mix(in srgb,var(--accent) 72%,var(--muted));direction:ltr}.tech-pulse-card{display:flex;align-items:center;gap:10px;min-width:190px;padding:11px 14px;border:1px solid var(--tech-line);border-radius:16px;background:var(--tech-soft)}.tech-pulse-card>div{display:grid;gap:2px}.tech-pulse-card strong{font-size:12px}.tech-pulse-card small{color:var(--muted);font-size:10px}.tech-pulse-dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--accent) 78%,#fff);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 11%,transparent)}
.tech-tabs{display:flex;gap:7px;padding:5px;border:1px solid var(--tech-line);border-radius:17px;background:color-mix(in srgb,var(--panel) 76%,transparent);overflow-x:auto}.tech-tab{flex:0 0 auto;min-height:38px;padding:7px 13px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font-size:12px}.tech-tab.active{color:var(--fg);background:color-mix(in srgb,var(--panel2) 88%,transparent);border-color:var(--tech-line);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}.tech-panel{display:none}.tech-panel.active{display:block}.tech-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:13px}.tech-section-head h3,.tech-workbench h3{margin:3px 0 4px;font-size:1.05rem}.tech-filter-chips{display:flex;gap:6px;flex-wrap:wrap}.tech-filter-chips button,.tech-post-actions button{min-height:35px;padding:6px 11px;border-radius:11px;border:1px solid var(--tech-line);background:var(--tech-soft);color:var(--muted);font-size:11px}.tech-filter-chips button.active{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 35%,var(--tech-line));background:color-mix(in srgb,var(--accent) 10%,var(--tech-soft))}
.tech-news-feed{display:grid;gap:10px}.tech-empty-card{display:flex;align-items:center;gap:15px;padding:22px;border:1px dashed color-mix(in srgb,var(--line) 95%,transparent);border-radius:20px;background:color-mix(in srgb,var(--panel2) 50%,transparent)}.tech-empty-card strong{display:block;margin-bottom:4px}.tech-empty-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}.tech-empty-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,var(--panel2));font-size:22px}
.tech-workbench,.tech-editor-card,.tech-preview-card{padding:18px;border:1px solid var(--tech-line);border-radius:20px;background:color-mix(in srgb,var(--panel) 82%,transparent)}.tech-workbench-copy{margin-bottom:14px}.tech-chat-thread{display:grid;gap:8px;min-height:160px;max-height:340px;overflow:auto;padding:12px;border:1px solid var(--tech-line);border-radius:16px;background:color-mix(in srgb,var(--bg) 32%,transparent)}.tech-message{width:fit-content;max-width:min(680px,88%);padding:10px 12px;border-radius:14px;font-size:12px;line-height:1.65}.tech-message.assistant{background:var(--tech-soft);border:1px solid var(--tech-line)}.tech-message.user{margin-inline-start:auto;background:color-mix(in srgb,var(--accent) 16%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--tech-line))}.tech-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}.tech-composer textarea,.tech-inline-form input,.tech-post-textarea{width:100%;border:1px solid var(--tech-line);border-radius:14px;background:color-mix(in srgb,var(--bg) 28%,transparent);color:var(--fg);outline:0}.tech-composer textarea{min-height:46px;max-height:130px;padding:11px 12px;resize:vertical}.tech-composer button{align-self:end;min-height:46px}
.tech-post-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:12px}.tech-post-textarea{min-height:220px;padding:13px;resize:vertical;font:inherit;line-height:1.65}.tech-post-textarea:focus,.tech-composer textarea:focus,.tech-inline-form input:focus{border-color:color-mix(in srgb,var(--accent) 42%,var(--tech-line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}.tech-post-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.tech-preview-card{display:grid;align-content:start;gap:12px}.tech-post-preview{min-height:160px;padding:15px;border-radius:16px;background:color-mix(in srgb,var(--bg) 30%,transparent);border:1px solid var(--tech-line);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font-size:13px}.tech-local-badge{padding:5px 8px;border:1px solid var(--tech-line);border-radius:999px;color:var(--muted);font-size:9px;direction:ltr}
.tech-inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:10px 0 14px}.tech-inline-form input{min-height:44px;padding:9px 12px}.tech-token-list{display:flex;gap:8px;flex-wrap:wrap}.tech-token{display:inline-flex;align-items:center;gap:7px;padding:7px 9px 7px 11px;border:1px solid var(--tech-line);border-radius:999px;background:var(--tech-soft);font-size:11px}.tech-token button{width:24px;height:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--muted)}.tech-source-list{display:grid;gap:8px}.tech-source-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--tech-line);border-radius:14px;background:var(--tech-soft)}.tech-source-row>div{display:grid;gap:2px}.tech-source-row small{font-size:9px;color:var(--muted)}.tech-mini-empty{padding:14px;border:1px dashed var(--tech-line);border-radius:14px;color:var(--muted);font-size:11px;text-align:center}.tech-trust-note{margin-top:14px;padding:11px 13px;border-inline-start:3px solid color-mix(in srgb,var(--accent) 52%,transparent);border-radius:10px;background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--muted);font-size:10.5px;line-height:1.65}.tech-trust-note strong{color:var(--fg)}
@media(max-width:760px){.tech-hub-hero{display:grid}.tech-pulse-card{min-width:0;width:100%}.tech-post-grid{grid-template-columns:1fr}.tech-composer,.tech-inline-form{grid-template-columns:1fr}.tech-composer button,.tech-inline-form button{width:100%}.tech-empty-card{align-items:flex-start}.tech-tabs{margin-inline:-2px}.tech-hub-page{gap:14px}}

/* MOBILE SETTINGS TABS — compact active pill 2026-09-08 */
@media (max-width: 760px) {
  .settings-tabs {
    align-items: center;
    gap: 4px;
    padding: 4px;
    min-height: 48px;
    border-radius: 16px;
    scroll-padding-inline: 10px;
  }
  .settings-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px !important;
    height: 40px;
    padding: 7px 12px;
    line-height: 1.1;
    border-radius: 12px !important;
    white-space: nowrap;
  }
  .settings-tab.active {
    min-height: 40px !important;
    height: 40px;
    box-shadow: 0 4px 14px rgba(10,132,255,.12), 0 1px 0 rgba(255,255,255,.22) inset;
  }
}