/* Precision Workspace visual system
   Architecture: primitives -> semantic tokens -> component states. */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("/fonts/readex-pro-arabic.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("/fonts/readex-pro-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Primitive palette */
  --neutral-0: #ffffff;
  --neutral-25: #fbfcfe;
  --neutral-50: #f5f7fa;
  --neutral-100: #eef1f5;
  --neutral-150: #e7ebf0;
  --neutral-200: #dce1e8;
  --neutral-300: #c6cdd7;
  --neutral-500: #737b87;
  --neutral-650: #515966;
  --neutral-900: #171a20;
  --blue-50: #eaf0ff;
  --blue-100: #dce6ff;
  --blue-600: #3157d5;
  --blue-700: #2748b5;
  --blue-800: #203c96;
  --violet-500: #725cf6;
  --cyan-400: #34c6c3;

  /* Semantic surfaces */
  --canvas: var(--neutral-50);
  --sidebar: var(--neutral-100);
  --surface: var(--neutral-25);
  --raised: var(--neutral-0);
  --subtle: #f0f3f7;
  --hover: #e9edf3;
  --line: var(--neutral-200);
  --line-strong: var(--neutral-300);
  --text: var(--neutral-900);
  --muted: var(--neutral-650);
  --quiet: #6a7280;
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-pressed: var(--blue-800);
  --accent-soft: var(--blue-50);
  --on-accent: #ffffff;
  --success: #147a54;
  --success-soft: #e2f4ec;
  --warning: #9a5a16;
  --warning-soft: #fff1db;
  --danger: #b63643;
  --danger-soft: #fde9ec;
  --assistant: #6555da;
  --assistant-soft: #eeebff;

  /* Component geometry and motion */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .055), 0 0 0 1px rgba(15, 23, 42, .018);
  --shadow-md: 0 12px 30px -16px rgba(15, 23, 42, .24), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-overlay: 0 28px 80px -24px rgba(9, 14, 28, .42), 0 8px 24px rgba(9, 14, 28, .1);
  --radius-sm: 8px;
  --radius-control: 12px;
  --radius-panel: 18px;
  --radius-modal: 24px;
  --radius-sheet: 30px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-panel: 260ms;

  /* Rashed identity: never reused as general decoration. */
  --voice-core: #111622;
  --voice-violet: #7a61ff;
  --voice-blue: #4a8dff;
  --voice-cyan: #32ccc6;
  --voice-rose: #ef72ae;

  font-family: "Readex Pro", "SF Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

html { background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0;
}
button, input, textarea, select { font-family: inherit; font-synthesis: none; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
.ui-icon { display: block; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; overflow: visible; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 72%, white); outline-offset: 2px; }

/* Application chrome */
.app { background: var(--canvas); }
.side {
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  background: var(--sidebar);
}
.brand { gap: 12px; }
.brand-mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border: 1px solid #252d3b;
  border-radius: 13px;
  background: #171d28;
  color: #f7f9ff;
  box-shadow: 0 5px 14px rgba(23, 29, 40, .16), inset 0 1px rgba(255, 255, 255, .08);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand strong { font-size: 15px; font-weight: 600; }
.brand small, .side-account { color: var(--quiet); font-size: 12.5px; }
.status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }

.nav { gap: 4px; }
.nav button {
  position: relative;
  min-height: 46px;
  padding-inline: 10px;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 14px;
  font-weight: 450;
  transition: color var(--motion-standard) ease, background var(--motion-standard) ease, transform var(--motion-fast) var(--ease);
}
.nav .ico { width: 30px; height: 30px; border-radius: 9px; transition: background var(--motion-standard) ease, color var(--motion-standard) ease; }
.nav .ico svg { width: 20px; height: 20px; }
.nav button[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-pressed);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  font-weight: 550;
}
.nav button[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  inset-block: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}
.nav button[aria-current="page"] .ico { background: color-mix(in srgb, white 78%, transparent); color: var(--accent); }

.top {
  border-color: color-mix(in srgb, var(--line) 76%, transparent);
  background: color-mix(in srgb, var(--raised) 82%, transparent);
  box-shadow: 0 1px rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(145%) blur(18px);
  backdrop-filter: saturate(145%) blur(18px);
}
.top h1 { font-size: 18px; font-weight: 600; }
.top p { margin-top: 0; color: var(--quiet); font-size: 12.5px; }
.global-search {
  min-height: 42px;
  border-color: transparent;
  border-radius: 14px;
  background: color-mix(in srgb, var(--subtle) 92%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent);
  color: var(--muted);
  font-size: 14px;
}
.global-search kbd {
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  font-size: 12px;
}

/* Controls */
.btn {
  min-height: 42px;
  border-color: var(--line);
  border-radius: var(--radius-control);
  background: var(--raised);
  box-shadow: 0 1px 1px rgba(15, 23, 42, .025);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) ease;
}
.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 7px 16px -9px color-mix(in srgb, var(--accent) 68%, transparent);
}
.btn.primary:active { border-color: var(--accent-pressed); background: var(--accent-pressed); }
.btn.compact { min-height: 34px; font-size: 12.5px; }
.icon-btn { width: 42px; height: 42px; min-height: 42px; }
.sync { color: var(--muted); font-size: 12.5px; box-shadow: none; }
.sync::after { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--raised); }

.search, .input, .textarea, .select {
  min-height: 44px;
  border-color: var(--line);
  border-radius: var(--radius-control);
  background: var(--raised);
  box-shadow: inset 0 1px rgba(15, 23, 42, .018);
  font-size: 15px;
}
.search:focus, .input:focus, .textarea:focus, .select:focus {
  border-color: color-mix(in srgb, var(--accent) 78%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.field label, .field-row > label:first-child { color: var(--muted); font-size: 13px; font-weight: 500; }
.search::placeholder, .input::placeholder, .textarea::placeholder { color: var(--quiet); }

/* Information surfaces */
.main { background: var(--canvas); }
.page-intro h2 { font-size: clamp(26px, 2.7vw, 32px); font-weight: 600; }
.page-intro p { color: var(--muted); font-size: 14px; }
.page-date { color: var(--quiet); font-size: 13px; font-weight: 450; }
.section-title h3 { font-size: 17px; font-weight: 600; }
.section-title p, .save-state, .section-count { font-size: 12.5px; }
.section-count { background: var(--subtle); }

.work-list, .rail-section > :not(.section-title), .tools-list { border-color: var(--line); }
.work-row, .recent-person, .pinned-price, .tool-row { border-color: color-mix(in srgb, var(--line) 84%, transparent); }
.work-row { min-height: 74px; }
.work-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--subtle);
  color: var(--muted);
}
.work-copy strong { font-size: 15px; font-weight: 550; }
.work-copy small, .recent-person small, .pinned-price small, .tool-row small { color: var(--quiet); font-size: 12.5px; }
.recent-person strong, .pinned-price strong { font-size: 14px; font-weight: 550; }

.relationship-shell, .calculator-shell, .table-wrap {
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: var(--radius-panel);
  background: var(--raised);
  box-shadow: var(--shadow-sm);
}
.relationship-list-pane {
  border-color: var(--line);
  background: #f8f9fb;
}
.detail { background: var(--raised); }
.collection-head strong, .profile-section-head h4, .offer-section-head strong { font-weight: 600; }
.collection-head small, .collection-head strong span { color: var(--quiet); font-size: 12.5px; }
.filter-row { gap: 6px; }
.filter-pill { min-height: 34px; padding-inline: 12px; font-size: 12.5px; font-weight: 450; }
.filter-pill.active { background: var(--accent-soft); color: var(--accent-pressed); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.record { min-height: 72px; border-radius: 12px; }
.record.active { background: var(--accent-soft); }
.record.active::after { width: 3px; background: var(--accent); }
.record-avatar, .profile-avatar, .voice-record-avatar {
  border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--line));
  background: #edf1f7;
  color: var(--accent-pressed);
  font-weight: 600;
}
.record-copy strong { font-size: 14px; font-weight: 550; }
.record-copy small, .record-copy em { color: var(--quiet); font-size: 12px; }
.record-status { min-height: 24px; font-size: 12px; font-weight: 450; }
.profile-identity h3 { font-size: 24px; font-weight: 600; }
.profile-kicker, .profile-identity p { font-size: 13px; }
.profile-hero, .profile-section + .profile-section, .field-row { border-color: var(--line); }
.missing-strip { border: 1px solid color-mix(in srgb, var(--warning) 13%, transparent); border-radius: 14px; background: var(--warning-soft); }
.missing-strip strong { color: #6f430d; }
.assistant-action { border-color: color-mix(in srgb, var(--assistant) 22%, var(--line)); color: var(--assistant); }
.assistant-action .inline-wave { color: var(--assistant); }
.activity-panel { border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 16px; background: var(--subtle); }

.offer-editor, .offer-section, .offer-sidebar, .calc-form { background: var(--raised); }
.offer-workspace { gap: 24px; }
.offer-section, .offer-editor { border-color: var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-sm); }
.offer-trust, .manual-share-note { color: var(--quiet); font-size: 12.5px; }
.attachment-picker { border-color: var(--line); border-radius: 14px; background: var(--surface); }
.attachment-icon { border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.attachment-icon svg { width: 19px; height: 19px; }
.tool-row { min-height: 90px; border-radius: 12px; }
.tool-icon { border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.tool-row strong { font-weight: 550; }
.calc-result { background: var(--subtle); }
.total { font-weight: 600; letter-spacing: -.025em; }
.table thead { background: var(--subtle); }
.table th { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.table td { font-size: 13px; }

/* Dialogs use solid material; blur belongs to the backdrop. */
dialog::backdrop { background: rgba(10, 14, 22, .52); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal {
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius-modal);
  background: var(--raised);
  box-shadow: var(--shadow-overlay);
}
.modal-head h3 { font-size: 21px; font-weight: 600; }
.modal-head p, .auth-intro { font-size: 13px; }
.modal-head .icon-btn { border-color: transparent; background: var(--subtle); }
.auth-logo { border-radius: 16px; background: var(--accent-soft); color: var(--accent); }

/* Rashed: one visual anatomy from launcher to full conversation. */
.voice-launch {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #252d3a;
  border-radius: 50%;
  isolation: isolate;
  background: var(--voice-core);
  color: #ffffff;
  box-shadow: 0 8px 18px -9px rgba(17, 22, 34, .78), inset 0 1px rgba(255, 255, 255, .08);
  transition: transform var(--motion-standard) var(--ease), box-shadow var(--motion-standard) ease;
}
.voice-launch::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from 210deg, var(--voice-violet), var(--voice-blue), var(--voice-cyan), var(--voice-rose), var(--voice-violet));
  opacity: .72;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.voice-launch::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--voice-blue) 30%, transparent);
  filter: blur(10px);
  opacity: 0;
  transform: scale(.82);
}
.voice-sigil { position: relative; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.voice-bars, .inline-wave, .voice-wave { display: flex; align-items: center; justify-content: center; direction: ltr; }
.voice-bars { height: 20px; gap: 2px; }
.voice-bars i, .inline-wave i, .voice-wave i { display: block; border-radius: 999px; background: currentColor; transform-origin: center; }
.voice-bars i { width: 2px; }
.voice-bars i:nth-child(1) { height: 6px; }
.voice-bars i:nth-child(2) { height: 12px; }
.voice-bars i:nth-child(3) { height: 18px; }
.voice-bars i:nth-child(4) { height: 9px; }
.voice-bars i:nth-child(5) { height: 15px; }
.voice-bars i:nth-child(6) { height: 11px; }
.voice-bars i:nth-child(7) { height: 6px; }
.voice-launch[data-state="listening"]::after, .voice-launch[data-state="speaking"]::after { opacity: .74; animation: signal-halo 1.65s ease-in-out infinite; }
.voice-launch[data-state="thinking"]::before { animation: signal-orbit 1.35s linear infinite; }
.voice-launch[data-state="listening"] .voice-bars i { animation: signal-listen .64s ease-in-out infinite alternate; }
.voice-launch[data-state="speaking"] .voice-bars i { animation: signal-speak .48s ease-in-out infinite alternate; }
.voice-launch .voice-bars i:nth-child(2), .voice-launch .voice-bars i:nth-child(6) { animation-delay: -.18s; }
.voice-launch .voice-bars i:nth-child(3), .voice-launch .voice-bars i:nth-child(5) { animation-delay: -.34s; }
.voice-launch .voice-bars i:nth-child(4) { animation-delay: -.09s; }

.voice-dialog { width: min(650px, calc(100vw - 32px)); height: min(750px, calc(100dvh - 32px)); border-radius: var(--radius-sheet); overflow: hidden; }
.voice {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: inherit;
  background:
    radial-gradient(ellipse 74% 46% at 50% -12%, rgba(86, 111, 255, .18), transparent 68%),
    linear-gradient(180deg, #151925 0%, #0c1018 100%);
  color: #f6f7fb;
  box-shadow: var(--shadow-overlay), inset 0 1px rgba(255, 255, 255, .055);
}
.voice::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 64%);
  mask-image: linear-gradient(to bottom, black, transparent 64%);
}
.voice-head { position: relative; z-index: 2; min-height: 56px; padding: 0 2px 14px; border-color: rgba(255, 255, 255, .085); }
.voice-head .icon-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .055);
  color: #e8eaf2;
  box-shadow: none;
}
.voice-name { position: relative; padding-inline: 28px; }
.voice-name::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 50%;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--voice-violet), var(--voice-blue), var(--voice-cyan), var(--voice-violet));
  box-shadow: 0 0 14px rgba(74, 141, 255, .34);
  opacity: 0;
  transform: translateY(-50%) scale(.72);
  transition: opacity var(--motion-standard) ease, transform var(--motion-standard) var(--ease);
}
.voice[data-audio-state="speaking"] .voice-name::before { opacity: 1; transform: translateY(-50%) scale(1); animation: signal-status 1.2s ease-in-out infinite; }
.voice-name strong { color: #f7f8fc; font-size: 16px; font-weight: 550; }
.voice-name small, .voice-privacy { color: #9ba4b5; font-size: 12px; }
.voice-body { position: relative; z-index: 1; padding: 18px 12px; }
.voice-meta { min-height: 30px; }
.voice-scope, .voice-status { color: #98a1b2; font-size: 12px; }
.voice-status.ready { color: #71d7ae; }
.voice-status.off { color: #f1bf7b; }
.voice-status-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .045); }
.voice-record {
  min-height: 66px;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, .085);
  border-radius: 16px;
  background: rgba(255, 255, 255, .052);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}
.voice-record-avatar { border-color: rgba(151, 139, 255, .22); background: rgba(122, 97, 255, .14); color: #beb4ff; }
.voice-record strong { color: #f1f3f8; font-size: 14px; font-weight: 550; }
.voice-record small { color: #9ca5b6; font-size: 12px; }
.voice-record .record-status { background: rgba(255, 255, 255, .065); color: #aeb5c2; }
.voice-record .record-status.needs { background: rgba(238, 169, 78, .14); color: #f0bd79; }
.voice-center { padding-top: 34px; }
.voice-visual {
  width: 116px;
  height: 116px;
  flex-basis: 116px;
  border-radius: 50%;
  isolation: isolate;
}
.voice-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from 220deg, var(--voice-violet), var(--voice-blue), var(--voice-cyan), var(--voice-rose), var(--voice-violet));
  opacity: .9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.voice-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8px;
  border-radius: inherit;
  background: radial-gradient(circle at 36% 28%, #25324d 0%, #151c2d 40%, #0d111b 74%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), inset 0 -14px 30px rgba(0, 0, 0, .26), 0 14px 36px rgba(0, 0, 0, .28);
}
.voice-core { position: relative; z-index: 3; width: 78px; height: 78px; color: #f9faff; isolation: isolate; }
.voice-core::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 141, 255, .3), rgba(122, 97, 255, .12) 42%, transparent 70%);
  filter: blur(10px);
  opacity: .62;
}
.voice-wave { height: 44px; gap: 3.5px; }
.voice-wave i { width: 3px; }
.voice-wave i:nth-child(1) { height: 8px; }
.voice-wave i:nth-child(2) { height: 18px; }
.voice-wave i:nth-child(3) { height: 31px; }
.voice-wave i:nth-child(4) { height: 16px; }
.voice-wave i:nth-child(5) { height: 27px; }
.voice-wave i:nth-child(6) { height: 19px; }
.voice-wave i:nth-child(7) { height: 9px; }
.voice-visual[data-state="listening"] .voice-core::before { animation: signal-halo 1.7s ease-in-out infinite; }
.voice-visual[data-state="listening"] .voice-wave i { animation: signal-listen .68s ease-in-out infinite alternate; }
.voice-visual[data-state="thinking"]::before { background: conic-gradient(from 0deg, transparent 0 12%, var(--voice-violet) 18% 34%, transparent 40% 60%, var(--voice-blue) 66% 83%, transparent 90%); animation: signal-orbit 1.35s linear infinite; }
.voice-visual[data-state="thinking"] .voice-wave { opacity: .42; transform: scale(.76); }
.voice-visual[data-state="speaking"] .voice-core::before { animation: signal-halo 1.15s ease-in-out infinite; }
.voice-visual[data-state="speaking"] .voice-wave i { animation: signal-speak .52s ease-in-out infinite alternate; }
.voice-visual .voice-wave i:nth-child(2), .voice-visual .voice-wave i:nth-child(6) { animation-delay: -.21s; }
.voice-visual .voice-wave i:nth-child(3), .voice-visual .voice-wave i:nth-child(5) { animation-delay: -.39s; }
.voice-visual .voice-wave i:nth-child(4) { animation-delay: -.11s; }
.voice-visual[data-symbol="success"]::before { background: #55d39d; }
.voice-visual[data-symbol="success"] .voice-core::before { background: radial-gradient(circle, rgba(85, 211, 157, .32), transparent 68%); }
.voice-visual[data-symbol="warning"]::before { background: #e8a858; }
.voice-visual[data-symbol="warning"] .voice-core::before { background: radial-gradient(circle, rgba(232, 168, 88, .3), transparent 68%); }
.voice-symbol { width: 40px; height: 40px; }
.voice-kicker { margin-top: 20px; color: #a99dff; font-size: 12.5px; font-weight: 550; }
.voice-body h3 { margin-top: 5px; color: #f7f8fc; font-size: 30px; line-height: 1.38; font-weight: 550; }
.voice-body p { color: #aab2c1; font-size: 14px; line-height: 1.85; }
.voice-note { color: #eab46d; font-size: 12.5px; }
.voice-actions .btn { border-color: rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .07); color: #eef0f6; box-shadow: none; }
.voice-actions .btn.primary { border-color: #f2f4fb; background: #f2f4fb; color: #111622; box-shadow: 0 12px 30px -18px rgba(255, 255, 255, .7); }
.voice-review h3 { color: #f7f8fc; font-size: 25px; }
.proposal, .proposal-row { border-color: rgba(255, 255, 255, .09); }
.proposal-row > span:first-child, .proposal-values del, .proposal-values b { color: #929cac; font-size: 12px; }
.proposal-values strong { color: #b8afff; font-size: 13px; }
.transcript { border-color: rgba(255, 255, 255, .09); border-radius: 15px; background: rgba(255, 255, 255, .06); color: #f4f6fa !important; }
.voice-input {
  position: relative;
  z-index: 2;
  min-height: 62px;
  padding: 7px;
  border-color: rgba(255, 255, 255, .105);
  border-radius: 19px;
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 16px 34px -22px rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.voice-input .icon-btn { border-color: transparent; background: transparent; color: #b8c0d0; box-shadow: none; }
.voice-input #micButton { color: #b9afff; }
.voice-input #assistantSend { border-radius: 14px; background: #f3f5fa; color: #111622; }
.voice-input input { color: #f4f6fa; font-size: 15px; }
.voice-input input::placeholder { color: #818b9d; }
.voice-input:focus-within { border-color: rgba(169, 157, 255, .56); box-shadow: 0 0 0 4px rgba(122, 97, 255, .12), 0 16px 34px -22px rgba(0, 0, 0, .72); }
.voice[data-stage="listening"] #micButton { background: rgba(255, 112, 128, .13); color: #ff8f9d; }

.toast { border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: #171d28; box-shadow: var(--shadow-overlay); font-size: 13px; }
.media-thumb, .media small { font-size: 12px; }

@keyframes signal-orbit { to { transform: rotate(1turn); } }
@keyframes signal-halo { 0%, 100% { opacity: .36; transform: scale(.84); } 50% { opacity: .86; transform: scale(1.08); } }
@keyframes signal-status { 0%, 100% { opacity: .55; transform: translateY(-50%) scale(.82); } 50% { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes signal-listen { to { transform: scaleY(.46); opacity: .68; } }
@keyframes signal-speak { from { transform: scaleY(.55); opacity: .72; } to { transform: scaleY(1.16); opacity: 1; } }

@media (hover: hover) {
  .nav button:hover { background: color-mix(in srgb, var(--raised) 72%, transparent); color: var(--text); }
  .btn:hover { border-color: var(--line-strong); background: var(--hover); box-shadow: var(--shadow-sm); }
  .btn.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }
  .btn.primary:active, .btn.primary:hover:active { border-color: var(--accent-pressed); background: var(--accent-pressed); color: var(--on-accent); transform: scale(.98); }
  .global-search:hover { border-color: transparent; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
  .record:hover, .recent-person:hover, .tool-row:hover { background: var(--hover); }
  .voice-launch:hover { transform: translateY(-1px) scale(1.025); box-shadow: 0 12px 24px -11px rgba(17, 22, 34, .88), inset 0 1px rgba(255, 255, 255, .1); }
  .voice-actions .btn:hover { background: rgba(255, 255, 255, .11); color: white; }
  .voice-actions .btn.primary:hover { border-color: white; background: white; color: #111622; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #0b0e12;
    --sidebar: #11151b;
    --surface: #141920;
    --raised: #171c24;
    --subtle: #1e242d;
    --hover: #252d38;
    --line: #2c3440;
    --line-strong: #424c5b;
    --text: #f4f6f9;
    --muted: #b8c0cb;
    --quiet: #929ca9;
    --accent: #86a4ff;
    --accent-hover: #a0b7ff;
    --accent-pressed: #c0ceff;
    --accent-soft: #1b2a52;
    --on-accent: #11182b;
    --success: #62d5a4;
    --success-soft: #17372b;
    --warning: #efbd78;
    --warning-soft: #3b2b19;
    --danger: #ff929f;
    --danger-soft: #442328;
    --assistant: #b0a5ff;
    --assistant-soft: #29244b;
  }
  .relationship-list-pane { background: #131820; }
  .brand-mark { border-color: #3b4555; background: #202733; }
  .nav button[aria-current="page"] .ico { background: rgba(255, 255, 255, .055); }
  .top { background: color-mix(in srgb, #11161d 84%, transparent); box-shadow: 0 1px rgba(255, 255, 255, .025); }
  .global-search kbd { background: #1b212a; }
  .record-avatar, .profile-avatar { border-color: #303a49; background: #202833; color: var(--accent); }
  .missing-strip strong { color: #ffd59c; }
  .offer-editor, .offer-section, .offer-sidebar, .calc-form { background: var(--raised); }
  .modal { border-color: #343d49; background: #181e26; }
  .toast { background: #eff3f8; color: #171c24; }
}

@media (max-width: 820px) {
  .side {
    border-color: color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--raised) 82%, transparent);
    box-shadow: 0 -8px 28px -22px rgba(15, 23, 42, .52);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
    backdrop-filter: saturate(150%) blur(20px);
  }
  .nav button { min-height: 60px; border-radius: 12px; font-size: 12px; }
  .nav button[aria-current="page"] { background: transparent; box-shadow: none; }
  .nav button[aria-current="page"]::after { inset: auto 30% 2px; width: 40%; height: 3px; }
  .nav button[aria-current="page"] .ico { background: var(--accent-soft); }
  .top { background: color-mix(in srgb, var(--raised) 84%, transparent); }
  .top h1 { font-size: 19px; }
  .global-search { min-height: 44px; }
  .voice-launch, #newButton { width: 42px; height: 42px; min-height: 42px; }
  .relationship-shell, .table-wrap { box-shadow: none; }
  .relationship-list-pane { background: transparent; }
  .record { border-color: var(--line); border-radius: 0; }
  .detail { background: transparent; }
  .table tr { border-radius: 16px; box-shadow: var(--shadow-sm); }
  .modal { border-radius: 24px 24px 0 0; }
  .auth-dialog { border-radius: 24px; }
  .voice-dialog { border-radius: 0; }
  .voice { padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); }
  .voice-center { padding-top: 30px; }
  .voice-visual { width: 108px; height: 108px; flex-basis: 108px; }
  .voice-body h3 { font-size: 28px; }
  .voice-input { min-height: 60px; }
}

@media (max-width: 430px) {
  .page-intro h2 { font-size: 25px; }
  .profile-identity h3 { font-size: 22px; }
  .voice-visual { width: 102px; height: 102px; flex-basis: 102px; }
  .voice-body h3 { font-size: 26px; }
}

@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); }
  .top, .side, .voice-input { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .global-search, .btn, .search, .input, .textarea, .select { box-shadow: inset 0 0 0 1px var(--line-strong); }
}

@media (forced-colors: active) {
  .voice-launch, .voice-visual::after, .voice-input { border: 2px solid ButtonText; background: Canvas; color: CanvasText; box-shadow: none; }
  .voice-launch::before, .voice-launch::after, .voice-visual::before, .voice-core::before, .voice-name::before { display: none; }
  .voice-bars i, .voice-wave i { background: CanvasText; }
  .voice-actions .btn.primary, .voice-input #assistantSend { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-launch::before, .voice-launch::after, .voice-bars i, .voice-visual::before, .voice-core::before, .voice-wave i, .voice-name::before { animation: none !important; }
}