/* ==========================================================================
   SophIA UI — design tokens & component classes
   Static CSS: safe to drop into wwwroot/css/theme.css of a Razor Pages app.
   Works together with Tailwind CDN (see assets/tailwind.js).
   ========================================================================== */

:root {
  /* surfaces — warm limestone and ash, earthy without reading brown */
  --s-bg: 242 242 237;
  --s-surface: 250 250 246;
  --s-surface-2: 231 231 224;
  --s-line: 205 205 196;
  --s-fg: 42 43 39;
  --s-muted: 112 112 103;

  /* brand + status — fired terracotta, sage and dry ochre */
  --s-brand: 159 73 52;
  --s-brand-fg: 255 249 245;
  --s-accent: 105 119 88;
  --s-ok: 88 118 79;
  --s-warn: 174 119 39;
  --s-err: 158 61 48;

  /* shape & motion */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-card: 0 1px 2px rgb(42 43 39 / 0.05), 0 8px 24px -16px rgb(42 43 39 / 0.2);
  --shadow-pop: 0 12px 40px -12px rgb(42 43 39 / 0.3);
}

.dark {
  /* graphite with a subtle olive warmth — neutral, never blue or brown */
  --s-bg: 27 28 25;
  --s-surface: 36 37 33;
  --s-surface-2: 46 47 42;
  --s-line: 65 66 59;
  --s-fg: 235 235 227;
  --s-muted: 157 158 146;
  --s-brand: 211 118 88;
  --s-brand-fg: 33 25 20;
  --s-accent: 146 163 119;
  --s-ok: 135 166 111;
  --s-warn: 215 158 72;
  --s-err: 216 105 88;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -20px rgb(0 0 0 / 0.7);
  --shadow-pop: 0 16px 48px -16px rgb(0 0 0 / 0.75);
}


/* ---------- base ---------- */
html { scroll-behavior: smooth; }
/* #220: a person who asked for less motion gets no scrolling animation either. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* #208: the hidden attribute always hides. A class that sets display (a flex row, a grid) would otherwise win over
   Tailwind's preflight rule and show what the script hid; no element needs a special [hidden] rule of its own. */
[hidden]:not([hidden="until-found" i]) { display: none !important; }
body {
  background: rgb(var(--s-bg));
  color: rgb(var(--s-fg));
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgb(var(--s-brand) / 0.25); }
:focus-visible { outline: 2px solid rgb(var(--s-brand)); outline-offset: 2px; }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--s-line)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--s-line)); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

/* ---------- layout ---------- */
.app { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: rgb(var(--s-surface));
  border-right: 1px solid rgb(var(--s-line));
  transition: width .28s var(--ease), transform .28s var(--ease);
}
.app-main {
  margin-left: var(--sidebar-w);
  transition: margin-left .28s var(--ease);
  min-height: 100vh; display: flex; flex-direction: column;
}
/* collapsed (desktop) */
.app.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.app.is-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }
.app.is-collapsed .collapse-hide { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
.app.is-collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.app.is-collapsed .nav-group-label { opacity: 0; height: 0; margin: 0; overflow: hidden; }

/* mobile: sidebar becomes a drawer */
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-pop); }
  .app.is-open .sidebar { transform: none; }
  .app-main, .app.is-collapsed .app-main { margin-left: 0; }
  .app.is-collapsed .sidebar { width: var(--sidebar-w); }
  .app.is-collapsed .collapse-hide { opacity: 1; width: auto; }
  .app.is-collapsed .nav-link { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgb(9 11 18 / .5); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
  .app.is-open .scrim { opacity: 1; pointer-events: auto; }
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: rgb(var(--s-surface) / .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--s-line));
}

/* ---------- nav ---------- */
.nav-group-label {
  padding: 0 .75rem; margin: 1rem 0 .35rem;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--s-muted));
  transition: opacity .2s var(--ease);
}
.nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; margin: 2px .5rem;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
  color: rgb(var(--s-muted));
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-link:hover { background: rgb(var(--s-surface-2)); color: rgb(var(--s-fg)); }
.nav-link.is-active { background: rgb(var(--s-brand) / .12); color: rgb(var(--s-brand)); }
.dark .nav-link.is-active { background: rgb(var(--s-brand) / .16); }
.nav-link svg { width: 18px; height: 18px; flex: none; }
/* #116, D142: what is waiting on a page, on its entry and on its group. */
.topbar-divider { color: rgb(var(--s-line)); user-select: none; }
.nav-badge { margin-left: auto; min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: rgb(var(--s-warn) / .18); color: rgb(var(--s-warn)); font-size: 11px; font-weight: 700; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.nav-badge.is-dot { min-width: .5rem; width: .5rem; height: .5rem; padding: 0; line-height: 0; background: rgb(var(--s-warn)); }

/* ---------- cards & panels ---------- */
.card {
  background: rgb(var(--s-surface));
  border: 1px solid rgb(var(--s-line));
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.card-hover { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: rgb(var(--s-brand) / .35); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid rgb(var(--s-line));
  font-size: 13px; font-weight: 700;
}
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--s-muted)); }
.stat-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.stat-note { font-size: 12px; color: rgb(var(--s-muted)); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 38px; padding: 0 .95rem;
  white-space: nowrap; flex-shrink: 0; /* a label never wraps: a flex row would otherwise squeeze it to its longest word */
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--s-brand)); color: rgb(var(--s-brand-fg)); }
.btn-primary:hover { background: rgb(var(--s-brand) / .88); }
.btn-ghost { background: transparent; color: rgb(var(--s-fg)); border-color: rgb(var(--s-line)); }
.btn-ghost:hover { background: rgb(var(--s-surface-2)); }
.btn-quiet { background: transparent; color: rgb(var(--s-muted)); }
.btn-quiet:hover { background: rgb(var(--s-surface-2)); color: rgb(var(--s-fg)); }
.btn-danger { background: rgb(var(--s-err) / .12); color: rgb(var(--s-err)); border-color: rgb(var(--s-err) / .25); }
.btn-danger:hover { background: rgb(var(--s-err) / .18); }
.btn-icon { width: 38px; padding: 0; }
.btn-sm { height: 30px; font-size: 12px; padding: 0 .7rem; }

.field { display: block; }
.label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--s-muted)); margin-bottom: .35rem; }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 .75rem;
  background: rgb(var(--s-surface-2));
  border: 1px solid rgb(var(--s-line));
  border-radius: var(--r-sm);
  color: rgb(var(--s-fg)); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: .65rem .75rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: rgb(var(--s-muted)); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: rgb(var(--s-brand));
  box-shadow: 0 0 0 3px rgb(var(--s-brand) / .18);
}
/* A number field keeps the theme's own box and nothing else: the browser's spinner is drawn by the browser, in the
   browser's colours, and cannot be themed. The value is typed, and the field still validates as a number. */
.input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

.input-code { letter-spacing: .45em; text-align: center; font-weight: 700; font-family: ui-monospace, "SFMono-Regular", monospace; }
.hint { font-size: 12px; color: rgb(var(--s-muted)); margin-top: .35rem; }

/* Every checkbox and radio follows the theme, wherever it sits and whatever class its label has (owner, 2026-09-30: the
   brand colour was given only inside .check, so each new list of checkboxes showed the browser's blue until someone
   noticed). A page never sets this for itself. */
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--s-brand)); }
.dark input[type="checkbox"], .dark input[type="radio"] { color-scheme: dark; }

.check { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; color: rgb(var(--s-muted)); cursor: pointer; }
.check input { width: 16px; height: 16px; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem; border-radius: 999px;
  /* A badge is one line: "Version 4" broken across two lines reads as two things. */
  white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgb(var(--s-surface-2)); color: rgb(var(--s-muted));
  border: 1px solid rgb(var(--s-line));
}
.badge-ok { background: rgb(var(--s-ok) / .12); color: rgb(var(--s-ok)); border-color: rgb(var(--s-ok) / .25); }
.badge-warn { background: rgb(var(--s-warn) / .14); color: rgb(var(--s-warn)); border-color: rgb(var(--s-warn) / .28); }
.badge-err { background: rgb(var(--s-err) / .12); color: rgb(var(--s-err)); border-color: rgb(var(--s-err) / .25); }
.badge-brand { background: rgb(var(--s-brand) / .12); color: rgb(var(--s-brand)); border-color: rgb(var(--s-brand) / .25); }
.dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table thead th {
  text-align: left; padding: .6rem 1rem;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--s-muted));
  background: rgb(var(--s-surface-2));
  border-bottom: 1px solid rgb(var(--s-line));
}
.table tbody td { padding: .7rem 1rem; border-bottom: 1px solid rgb(var(--s-line) / .7); }
.table tbody tr:hover { background: rgb(var(--s-surface-2) / .7); }
.table tbody tr.is-selected { background: rgb(var(--s-brand) / .08); }
.table tbody tr.is-danger { background: rgb(var(--s-err) / .06); }
.mono { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 12px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid rgb(var(--s-line)); }
.tab {
  padding: .55rem .85rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 700; color: rgb(var(--s-muted));
  background: none; cursor: pointer;
}
.tab:hover { color: rgb(var(--s-fg)); }
.tab.is-active { color: rgb(var(--s-brand)); border-bottom-color: rgb(var(--s-brand)); }
.tab-panel[hidden] { display: none; }

/* ---------- list rows ---------- */
.row-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .7rem 1rem; border-bottom: 1px solid rgb(var(--s-line) / .7);
  font-size: 13px;
}
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: rgb(var(--s-surface-2) / .7); }
.row-time { font-size: 11px; color: rgb(var(--s-muted)); white-space: nowrap; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 1rem; }
.modal.is-open { display: grid; }
.modal-scrim { position: absolute; inset: 0; background: rgb(9 11 18 / .55); backdrop-filter: blur(2px); }
.modal-card { position: relative; width: 100%; max-width: 440px; background: rgb(var(--s-surface)); border: 1px solid rgb(var(--s-line)); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; min-width: 260px;
  background: rgb(var(--s-surface)); border: 1px solid rgb(var(--s-line));
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  font-size: 13px; font-weight: 600;
  animation: pop .22s var(--ease);
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px;
  background: rgb(var(--s-brand)); color: rgb(var(--s-brand-fg));
  border: 0; cursor: pointer; box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- misc ---------- */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark span { flex: 1; background: rgb(var(--s-brand) / .35); border-radius: 2px 2px 0 0; }
.spark span.hi { background: rgb(var(--s-brand)); }
.divider { height: 1px; background: rgb(var(--s-line)); }
.kbd { font-family: ui-monospace, monospace; font-size: 11px; padding: .15rem .4rem; border: 1px solid rgb(var(--s-line)); border-radius: 6px; color: rgb(var(--s-muted)); background: rgb(var(--s-surface-2)); }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.page-sub { font-size: 13px; color: rgb(var(--s-muted)); }
.crumb { font-size: 12px; color: rgb(var(--s-muted)); }
.crumb b { color: rgb(var(--s-fg)); font-weight: 700; }

/* ---------- session rows + context menu (chat sidebar) ---------- */
.session-row { position: relative; }
.session-row .session-kebab {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; color: rgb(var(--s-muted));
  opacity: 0; transition: opacity .15s var(--ease), background .15s var(--ease);
}
.session-row:hover .session-kebab,
.session-row .session-kebab[aria-expanded="true"] { opacity: 1; }
.session-kebab:hover { background: rgb(var(--s-surface-2)); color: rgb(var(--s-fg)); }
/* A conversation in the history is one of many: smaller and lighter than the sidebar's own links (owner, 2026-09-30). */
.session-row .nav-link { padding: .4rem 2.2rem .4rem .75rem; gap: .55rem; font-size: 12.5px; font-weight: 500; }
.session-row .nav-link svg { width: 15px; height: 15px; }
.sidebar.is-collapsed .session-kebab { display: none; }

.menu {
  position: absolute; z-index: 60; min-width: 208px;
  background: rgb(var(--s-surface));
  border: 1px solid rgb(var(--s-line));
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: .35rem; display: none;
}
.menu[data-open="true"] { display: block; }
.menu-label { padding: .35rem .55rem; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--s-muted)); }
.menu-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .55rem; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: rgb(var(--s-fg));
  background: transparent; text-align: left; cursor: pointer;
}
.menu-item svg { width: 16px; height: 16px; flex: none; color: rgb(var(--s-muted)); }
.menu-item:hover { background: rgb(var(--s-surface-2)); }
.menu-item.is-danger { color: rgb(var(--s-err)); }
.menu-item.is-danger svg { color: rgb(var(--s-err)); }
.menu-sep { height: 1px; margin: .3rem .25rem; background: rgb(var(--s-line)); }
[data-nav-group-body] .session-row .nav-link { padding-left: 1.65rem; }

/* ---------- setup wizard ---------- */
.step-rail { display: flex; flex-direction: column; gap: .15rem; }
.step-item {
  display: flex; gap: .75rem; align-items: flex-start; width: 100%;
  padding: .6rem .7rem; border-radius: var(--r-md);
  text-align: left; background: transparent; cursor: pointer;
}
.step-item:hover { background: rgb(var(--s-surface-2)); }
.step-item .step-dot {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 99px; font-size: 12px; font-weight: 800;
  background: rgb(var(--s-surface-2)); color: rgb(var(--s-muted));
  border: 1px solid rgb(var(--s-line));
}
.step-item .step-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.step-item .step-desc { font-size: 12px; color: rgb(var(--s-muted)); }
.step-item[data-state="current"] { background: rgb(var(--s-brand) / .1); }
.step-item[data-state="current"] .step-dot { background: rgb(var(--s-brand)); color: rgb(var(--s-brand-fg)); border-color: transparent; }
.step-item[data-state="current"] .step-name { color: rgb(var(--s-brand)); }
.step-item[data-state="done"] .step-dot { background: rgb(var(--s-ok) / .15); color: rgb(var(--s-ok)); border-color: rgb(var(--s-ok) / .3); }
.step-pane { display: none; }
.step-pane[data-active="true"] { display: block; animation: stepIn .28s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.progress { height: 8px; border-radius: 99px; background: rgb(var(--s-surface-2)); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; background: rgb(var(--s-brand)); transition: width .4s var(--ease); }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgb(var(--s-line) / .7); font-size: 13.5px; }
.check-row:last-child { border-bottom: 0; }

/* ---------- photo background (Bing daily image) ---------- */
.photo-stage { position: relative; min-height: 100vh; background: transparent; }
.photo-stage > .photo-content { position: relative; z-index: 1; }
body:has(.photo-stage) { background: transparent; }
.photo-bg {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  /* calm the picture down before anything sits on top of it */
  filter: saturate(.82) contrast(.92) brightness(.95) blur(var(--photo-blur, 2px));
  transform: scale(1.04); /* hides blur edges */
}
.photo-veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--s-bg) / .10), transparent 60%),
    linear-gradient(180deg, rgb(var(--s-bg) / var(--veil-top, .62)) 0%, rgb(var(--s-bg) / var(--veil-mid, .74)) 45%, rgb(var(--s-bg) / var(--veil-bot, .88)) 100%);
}
[data-veil="soft"]   { --veil-top: .38; --veil-mid: .52; --veil-bot: .72; --photo-blur: 0px; }
[data-veil="calm"]   { --veil-top: .62; --veil-mid: .74; --veil-bot: .88; --photo-blur: 2px; }
[data-veil="quiet"]  { --veil-top: .80; --veil-mid: .88; --veil-bot: .96; --photo-blur: 6px; }

.glass {
  background: rgb(var(--s-surface) / .72);
  border: 1px solid rgb(var(--s-line) / .8);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: 0 18px 44px -28px rgb(24 16 10 / .5);
}
.dark .glass { background: rgb(var(--s-surface) / .62); }
.glass-soft { background: rgb(var(--s-surface) / .5); border: 1px solid rgb(var(--s-line) / .6); border-radius: var(--r-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* reading surface: text never sits directly on the photo */
.reader { background: rgb(var(--s-surface) / .86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dark .reader { background: rgb(var(--s-surface) / .78); }
.photo-credit {
  position: fixed; right: 1rem; bottom: 4.75rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem; font-size: 11px; border-radius: 999px;
  color: rgb(var(--s-fg) / .9);
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-soft, .reader, .photo-credit { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(var(--s-surface)); }
  .photo-bg { display: none; }
}

/* ---------- message actions (copy / retry / export / kebab menu) ---------- */
.msg { position: relative; }
.msg-actions {
  display: flex; align-items: center; gap: .15rem; margin-top: .4rem;
  opacity: 0; transform: translateY(-2px);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg-actions.is-pinned { opacity: 1; transform: none; }
@media (hover: none) { .msg-actions { opacity: 1; transform: none; } }
.msg-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; color: rgb(var(--s-muted)); background: transparent;
  border: 0; cursor: pointer; transition: background .15s, color .15s;
}
.msg-btn:hover { background: rgb(var(--s-surface-2)); color: rgb(var(--s-fg)); }
.msg-btn.is-on { color: rgb(var(--s-brand)); background: rgb(var(--s-brand) / .12); }
.msg-btn svg { width: 16px; height: 16px; }
.msg-meta { font-size: 11px; color: rgb(var(--s-muted)); padding-inline: .25rem; }

/* ---------- photo background variant of the chat shell ---------- */
.app-photo { position: relative; z-index: 1; background: transparent; }
.app-photo .sidebar,
.app-photo .topbar {
  background: rgb(var(--s-surface) / .72);
  backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.dark .app-photo .sidebar, .dark .app-photo .topbar { background: rgb(var(--s-surface) / .6); }
.app-photo .card {
  background: rgb(var(--s-surface) / .82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dark .app-photo .card { background: rgb(var(--s-surface) / .72); }
.app-photo .select, .app-photo .textarea, .app-photo .input { background: transparent; }
body:has(.app-photo) { background: transparent; }

/* ---------- collapsed rail: tooltips + flyouts ---------- */
.app.is-collapsed [data-nav-group-body] { display: none; }

.rail-tip {
  position: fixed; z-index: 90;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgb(var(--s-fg));
  color: rgb(var(--s-bg));
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity .15s var(--ease);
}
.rail-tip.is-visible { opacity: 1; }

.rail-flyout {
  position: fixed; z-index: 90;
  min-width: 220px; max-width: 280px;
  padding: 8px;
  border-radius: var(--r-md);
  background: rgb(var(--s-surface));
  border: 1px solid rgb(var(--s-line));
  box-shadow: var(--shadow-pop);
  animation: railFlyIn .16s var(--ease);
}
@keyframes railFlyIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.rail-flyout-title {
  padding: 6px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--s-muted));
  border-bottom: 1px solid rgb(var(--s-line));
  margin-bottom: 4px;
}
.rail-flyout-link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  color: rgb(var(--s-fg));
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-flyout-link:hover { background: rgb(var(--s-surface-2)); }
.rail-flyout-empty { padding: 8px 10px; font-size: 12px; color: rgb(var(--s-muted)); }

/* flyout rows with kebab */
.rail-flyout-row { position: relative; display: flex; align-items: center; }
.rail-flyout-row .rail-flyout-link { flex: 1; min-width: 0; }
.rail-flyout-kebab {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  color: rgb(var(--s-muted));
  opacity: 0;
}
.rail-flyout-row:hover .rail-flyout-kebab,
.rail-flyout-kebab[aria-expanded="true"] { opacity: 1; }
.rail-flyout-kebab:hover { background: rgb(var(--s-surface-2)); color: rgb(var(--s-fg)); }

/* menus must float above rail & flyouts */
.menu { z-index: 95; }

/* ---------- starting-up / waiting for services page ---------- */
.gears { position: relative; width: 132px; height: 132px; margin-inline: auto; }
.gear { position: absolute; color: rgb(var(--s-muted)); animation: gearSpin 9s linear infinite; }
.gear-lg { inset: 0; width: 96px; height: 96px; color: rgb(var(--s-brand)); }
.gear-md { right: 0; top: 6px; width: 56px; height: 56px; animation-direction: reverse; animation-duration: 5.2s; }
.gear-sm { right: 34px; bottom: 0; width: 34px; height: 34px; color: rgb(var(--s-accent)); animation-duration: 3.2s; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gear { animation: none; } }

.svc-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .9rem; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
}
.svc-dot { width: 9px; height: 9px; border-radius: 99px; flex: none; }
.svc-dot.pending { background: rgb(var(--s-warn)); animation: svcPulse 1.4s var(--ease) infinite; }
.svc-dot.ok { background: rgb(var(--s-ok)); }
.svc-dot.waiting { background: rgb(var(--s-line)); }
@keyframes svcPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.svc-bar { height: 6px; border-radius: 99px; background: rgb(var(--s-surface-2)); overflow: hidden; }
.svc-bar > span {
  display: block; height: 100%; width: 38%; border-radius: 99px;
  background: rgb(var(--s-brand));
  animation: svcSlide 1.8s var(--ease) infinite;
}
@keyframes svcSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
/* Bug #201: once the Starting page gives up, the gears and the bar stop, a row that did not answer turns red, and the
   panel says what did not answer and what to do. */
.svc-dot.failed { background: rgb(var(--s-err)); }
[data-starting][data-failed] .gear, [data-starting][data-failed] .svc-bar > span { animation: none; }
[data-starting][data-failed] .svc-bar > span { width: 100%; background: rgb(var(--s-err)); }
.svc-failed {
  padding: .9rem 1rem; border-radius: var(--r-sm);
  border: 1px solid rgb(var(--s-err) / .35); background: rgb(var(--s-err) / .08);
}

/* ---------- SophIA owl brand mark ---------- */
.sophia-logo {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwNDggMjA0OCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNDIsNTYsNzcpIiBkPSJNIDEwMDYuMTkgNTMuNDE0MSBDIDEwMDguMyA1My4zNjQyIDEwMTAuNDEgNTMuMzUwNSAxMDEyLjUyIDUzLjM3MyBDIDEwMTguNDYgNTMuNDYyNyAxMDI1LjQzIDU1LjAzMDcgMTAzMi4wNCA1NS4zNjAyIEMgMTA0Ny45OCA1Ni4xNTQ1IDEwNjUuMzIgNTUuNzEzMyAxMDgxLjA3IDU2Ljk5NDYgQyAxMjIyLjIzIDY3LjEyNTQgMTM1OC44NSAxMTEuMjMyIDE0NzkuMjkgMTg1LjU1NyBDIDE1MDEuMyAxOTkuMzA2IDE1NjAuNDcgMjM1LjQ2OCAxNTY5LjYzIDI2MS40OTIgQyAxNTc1Ljc5IDI3OC45ODQgMTU3My4xIDMxNi43OTQgMTU3My40NiAzMzcuODc0IEMgMTU3My42NSAzNDguNiAxNTcyLjk0IDM5NS4zMSAxNTYzLjI3IDQwNS4wNjYgQyAxNTQ3Ljg0IDQxMi41NDMgMTQ5OS4yMSA0MTAuNDYyIDE0ODAuOTUgNDExLjg5NSBDIDEzNzcuNzYgNDE5LjkwNiAxMjgwLjU3IDQ2My41NzIgMTIwNi4wNSA1MzUuNDAzIEMgMTE5OS4xNiA1NDIuMTExIDExOTEuNzQgNTUxLjIzMiAxMTg1LjMyIDU1OC41NTYgQyAxMTQzLjU4IDYwNi4xNjEgMTExMy4wMyA2NjMuMTE3IDEwOTUuMDUgNzIzLjc2IEMgMTA4NS42MyA3NTUuNTM1IDEwODEuNDkgNzY3LjU5OCAxMDgwLjgxIDgwMC44MjQgQyAxMDkxLjYxIDgxNC4xODMgMTEwMS43NSA4MjguMTMyIDExMTIuMjQgODQxLjc0NiBDIDExMjEuOTcgODU0LjM3MyAxMTMzLjYzIDg2Ny4yMzYgMTE0MC44OCA4ODEuNDY4IEMgMTE0NC44OCA4ODkuMzE5IDExNDguNDkgODk5Ljg2MyAxMTQ3LjI2IDkwOC43NzkgQyAxMTQ1LjI2IDkyMy4yMzEgMTA2Ny4wNyAxMDcyLjYyIDEwNTQuNTEgMTA5Mi43MSBDIDEwNTAuNzMgMTA5OC43NiAxMDQ3LjIgMTEwMy4yOSAxMDQxLjYxIDExMDcuNzUgQyAxMDMyLjI0IDExMTIuNDQgMTAyNi43NSAxMTExLjUzIDEwMTYuNzUgMTExMC42MSBDIDEwMDguNjkgMTEwMy43NSAxMDAyLjAzIDEwOTYuMjIgOTk2LjQ3OCAxMDg3LjE5IEMgOTkwLjE2NyAxMDc2LjkyIDk4NS44OSAxMDY1LjM3IDk4MC4zNiAxMDU0LjY2IEMgOTY2Ljg1MyAxMDI4LjUyIDkwOS41NjggOTI0LjAwNCA5MDcuODk2IDkwNC43NDQgQyA5MDcuMzI4IDg5OC4yMDMgOTA4LjUyOCA4OTIuMjUyIDkxMS4wOTkgODg2LjI3MSBDIDkxNi43ODUgODczLjA0MSA5MjYuODgzIDg2MS41OTcgOTM1LjMwNiA4NTAuMDM0IEMgOTQ4LjM2NCA4MzIuMTA1IDk2MS4yNDggODE0LjA0IDk3NS40MDIgNzk2Ljk1IEMgOTc1Ljg1NyA3NjkuNzk1IDk2OC43MDYgNzQ3LjIzOSA5NjAuODMxIDcyMS42MzggQyA5MjAuNzkgNTkxLjQ2NCA4MjcuODQ5IDQ5MC4wOTYgNzAwLjI5MSA0NDEuNTgxIEMgNjY2LjUxMyA0MjguNzMzIDYzOS4yMDcgNDE5LjYwNyA2MDIuNjMxIDQxNS4xMzggQyA1NzguMjgxIDQxMi4zMDcgNTUzLjgxMyA0MTAuNTkxIDUyOS4zMDYgNDA5Ljk5NiBDIDUyMC44ODkgNDA5LjczOCA1MTIuMDgzIDQxMC44NTggNTAzLjczNSA0MTAuMTk4IEMgNDk5Ljc1NiA0MDkuODg0IDQ5Mi42MzUgNDA4LjkyMSA0ODkuNDQgNDA2Ljk5OCBDIDQ4My43MTYgNDAzLjU1MiA0NzkuNTYgMzkxLjEwNiA0NzguODE4IDM4NC45ODkgQyA0NzQuOTk5IDM1My41MDcgNDY4LjU3NyAyNjguMjA2IDQ4Ni40MDEgMjQzLjMxMiBDIDQ5Ni4xNSAyMjkuNjk2IDUzOS4yMjkgMTk5LjkzMSA1NTQuNjIgMTg5LjcyIEMgNjUxLjYzNiAxMjUuMzU2IDc2OS44ODUgODEuMDg1NiA4ODQuOTM1IDY0LjI4ODYgQyA5MDIuNTc3IDYxLjcxMzEgOTI4LjM2MSA1OC4xNzczIDk0NS42NTggNTcuMDY5MSBDIDk2Ny43NzkgNTUuNjUxOCA5ODMuMjI2IDU2LjMyOSAxMDA2LjE5IDUzLjQxNDEgeiBNIDUyNi4yOCAzMjguNDUxIEMgNTU0LjgxMyAzMjAuNDQ1IDU2OS4xODIgMzIyLjU0NyA1OTcuMDU1IDMyNC44NDYgQyA2NjkuODY2IDMzMS4zMTQgNzQwLjQ3MyAzNTMuMTc0IDgwNC4yMDEgMzg4Ljk3OSBDIDg5MS4zNjIgNDM4LjI5MyA5NjIuNyA1MTEuMzc3IDEwMDkuODkgNTk5LjcwMyBDIDEwMTcuODQgNjE0LjcxOSAxMDIxLjQ1IDYyNS42OTggMTAyOC4wMiA2NDAuMTgzIEMgMTAzMS44NCA2MzAuMjQyIDEwMzguNTcgNjEzLjY4NCAxMDQzLjQ1IDYwNC4zMTYgQyAxMDUzLjcgNTgyLjk4NCAxMDY1LjkyIDU2My45NDMgMTA3OS4zMSA1NDQuNDg0IEMgMTE0MC4wMyA0NTUuMDM5IDEyMjcuOTIgMzg3LjUwNiAxMzI5Ljk4IDM1MS44NjkgQyAxMzc1LjU5IDMzNi4yNjIgMTQyMy4xNSAzMjcuMTE2IDE0NzEuMjkgMzI0LjY5NiBDIDE0OTAuMjMgMzIzLjY1OSAxNDkzLjg5IDMyMS4xMDcgMTUxMi41NiAzMjYuNjMxIEMgMTQ5NC4zIDMwOS4zMTMgMTQ4MC41NCAyOTkuMTg0IDE0NjAuMDQgMjg0LjQ1MSBDIDEzNTguMDQgMjEyLjQwNSAxMjM5LjcyIDE2Ni44ODUgMTExNS43MyAxNTEuOTk3IEMgMTA2OC41NCAxNDYuNzI2IDEwMDkuMTYgMTQ3LjQ0NSA5NjEuMDE5IDE0OC40NDUgQyA5MTYuNTI4IDE1My4wMTcgODc3LjY0NSAxNTcuMTkgODMzLjY3NCAxNjcuMzI2IEMgNzI3LjQgMTkxLjgyNSA2MDQuOTg3IDI1Mi4wODcgNTI2LjI4IDMyOC40NTEgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNDIsNTYsNzcpIiBkPSJNIDEyOTIuMDggMTgyNS4yNSBDIDEyOTEuNDUgMTgxOC43NyAxMjkxLjMgMTgxMy45MSAxMjkxLjI2IDE4MDcuMzcgTCAxMjkxLjE4IDE2OTEuMDQgQyAxMjkxLjE5IDE2NjkuNTkgMTI5MC4zOSAxNjQ2LjA1IDEyOTIuMjEgMTYyNC44MiBDIDEyOTkuNDYgMTU0MC42NSAxMzY2LjMyIDE1MjEuMTkgMTQyNy41MSAxNDc2LjY4IEMgMTQ2My4yMyAxNDUwLjM2IDE0OTYuODYgMTQyMS4zIDE1MjguMDcgMTM4OS43NiBDIDE2NTQuNjYgMTI2MS45NSAxNzMwLjQ4IDEwOTIuNDggMTc0MS40MSA5MTIuOTI0IEMgMTc0Mi41OSA4OTMuMzg0IDE3NDIuMTEgODczLjUzNCAxNzQxLjkyIDg1My45NTkgQyAxNzQxLjc3IDgzOC42MjcgMTczOS44NyA4MjMuMTEgMTczOC4zNSA4MDcuODU3IEMgMTczMS40MiA3MzguMzA4IDE3MTQuODggNjcyLjY0NCAxNjg5LjI0IDYwNy42NTcgQyAxNjg2LjA5IDU5OS42NzUgMTY3Ni44MSA1NzUuMjE0IDE2NzEuNTUgNTY5LjgyNiBDIDE2NjUuMzQgNTYzLjQ2NCAxNjQxLjU0IDU2OC44MjYgMTYzMS40IDU1OC4xMjkgQyAxNjI3Ljk5IDU1NC41MzggMTYyNy42NSA1NDkuMDQyIDE2MjcuNzYgNTQ0LjM0NyBDIDE2MjguMDIgNTMzLjYxOCAxNjMyLjE4IDUyMi45NzIgMTYzNS41OCA1MTIuOTIgQyAxNjQ5LjExIDQ3Mi45NiAxNjcxLjkzIDQyOC43NSAxNzAzLjQyIDM5OS44NTEgQyAxNzU2LjY3IDM1MC45ODQgMTgxNS43IDMyOC4xODEgMTg4Ny44MSAzMzEuNTI1IEMgMTkwMS41IDMzMi4xNiAxOTE0LjUgMzM0LjAzMyAxOTI0LjE5IDM0NC42MzUgQyAxOTI1LjA5IDM2OS4zMDQgMTkxNC42NiAzOTkuMTIyIDE5MDQuMDYgNDIxLjEzNyBDIDE4ODMuNjUgNDYzLjE5OSAxODU0LjcgNDk1LjUzMSAxODE0LjAzIDUxOS4yIEMgMTc5OC40MiA1MjguMjg1IDE3NzkuOTQgNTM3Ljc2IDE3NjIuMzIgNTQxLjU5NCBDIDE4MTMuMDUgNjQ1LjA5OSAxODMyLjU0IDc2Mi4xODQgMTgzNS45IDg3Ni43MjUgQyAxODM2LjIxIDg4Ny41MDggMTgzNC4yOSA5MDYuNDkzIDE4MzMuODggOTE4LjQ4NiBDIDE4MjYuMjggMTE0MC45OCAxNzE2LjIgMTM1My44NSAxNTUwLjczIDE1MDEuMDIgQyAxNTIyLjI3IDE1MjYuMTggMTQ5Mi4yNyAxNTQ5LjU0IDE0NjAuODkgMTU3MC45NyBDIDE0NDYuOTggMTU4MC42MiAxNDExLjY2IDE2MDEuMDEgMTQwMi40NSAxNjExLjEgQyAxMzk3LjQ5IDE2MTYuNDkgMTM5My44NSAxNjIyLjk2IDEzOTEuODEgMTYzMCBDIDEzODEuNTcgMTY2NC4yOCAxMzg4Ljc0IDE3MjEuMjMgMTM4OC40NyAxNzU3LjY5IEMgMTM4OC4xNyAxNzk2LjcyIDEzODkuNDUgMTgzNi40MSAxMzg4LjczIDE4NzUuNDYgQyAxMzg4LjAzIDE5MTMuMDQgMTM5OC4xNCAxOTgzLjgxIDEzNDMuMDkgMTk4NS42IEMgMTMxNC42MyAxOTg2LjU3IDEyOTAuOTUgMTk1Ny4yNyAxMjcyLjExIDE5MzguMzkgTCAxMjIzLjA1IDE4ODkuMzggTCAxMDM1LjA4IDE3MDEuNjYgQyA5MjYuMTcxIDE3MDEuNjQgNzc5LjcwNSAxNjY2Ljg4IDY4MS44OTggMTYxOS43OSBDIDQ3OS42MjUgMTUyMi4zOCAzMTcuMzg0IDEzNDkuNDQgMjQ0LjQwNSAxMTM1LjM2IEMgMjIwLjg1OSAxMDY1Ljk5IDIwNy4wMjEgOTkzLjY5MiAyMDMuMjgzIDkyMC41MjYgQyAxOTYuOTY2IDc5OS40MTYgMjIxLjg0OCA2NDguNjI2IDI3NS4zOTggNTM5LjcxNCBDIDI0MS4zMjIgNTI1Ljk1NCAyMDcuNDU2IDUwNC4yMjkgMTgyLjcwMiA0NzYuODk0IEMgMTU1LjI3IDQ0Ni42MDQgMTI0LjA4NiAzODUuNjg5IDEyNy4yNjYgMzQzLjYyNSBDIDEzOC4yNDQgMzMzLjA4NyAxNTEuMTQgMzMyLjkyNCAxNjYuMDQ0IDMzMS40MzMgQyAxNzkuOTUgMzMwLjc4NiAxOTMuNjkxIDMzMC45MiAyMDguMjA5IDMzMi40MTEgQyAzMTYuNTM4IDM0My41MzEgNDA0Ljc5NCA0NDAuNjE5IDQyMS42MTEgNTQ1LjQ0IEMgNDIxLjkwNiA1NDcuMjgzIDQxOS42OTcgNTUzLjI0OSA0MTguOTc1IDU1NS4yMzEgQyA0MDEuNDMyIDU2Ny4zNTEgMzg5LjUxOSA1NjYuMjk4IDM2OC43MzMgNTY2Ljk3NiBDIDM1OS45OTEgNTc5LjIxNiAzNTQuODU0IDU5Mi41NDkgMzQ4LjkxNCA2MDYuMzUyIEMgMzE5LjI0NSA2NzcuMDE4IDMwMS44NTcgNzUyLjIzIDI5Ny41IDgyOC43NDcgQyAyOTAuMzY1IDk3Ni4xMTEgMzE4LjgyMSAxMTAzLjkyIDM5Mi45MjkgMTIzMS4zNCBDIDUyNC40MzQgMTQ1Ny40NCA3NjAuNDc4IDE1OTIuNjUgMTAyMC4zOCAxNjAzLjY5IEMgMTA3My44MiAxNjA1Ljk2IDEwNjcuOCAxNjAzLjY2IDExMDYuNzkgMTY0MS4zNSBMIDExNDkuNzcgMTY4Mi44MyBMIDEyMzYuMiAxNzY4LjgyIEMgMTI1My45NyAxNzg2LjUzIDEyNzUuNTcgMTgwNy4wMSAxMjkyLjA4IDE4MjUuMjUgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNDIsNTYsNzcpIiBkPSJNIDE4MjIuNDYgNTYuMzM3OCBDIDE4MjUuNzYgNTYuMjg0NiAxODMwLjc0IDU2LjM5MTEgMTgzMi42NSA1OS41ODQ3IEMgMTg0NS40NiA4MS4wNTg0IDE4NDYuMzUgMTE4LjY5MSAxODQ0LjU3IDE0Mi4yNzcgQyAxODQwLjkxIDE5Mi43ODggMTgyNC4xOSAyMzUuNjA2IDE3OTMuOTQgMjc1LjkxIEMgMTc2Mi44MSAzMTcuMzk2IDE3MjAuMTggMzQ3LjU3MiAxNjcxLjA4IDM2NC4zMTMgQyAxNjY0Ljc3IDM2Ni40NjYgMTY1NS45NyAzNjkuNjEyIDE2NDkuMjUgMzY5LjA4NCBDIDE2MzIuMjcgMzY1Ljk5IDE2MjguOCAzNTcuNjE0IDE2MjYuMjcgMzQxLjA5MiBDIDE2MTUuNzkgMjczLjg1OCAxNjMyLjM5IDIwNS4yMSAxNjcyLjQzIDE1MC4xOTMgQyAxNzA3LjA1IDEwMy41NzUgMTc2NC43NSA2NS4wNDY0IDE4MjIuNDYgNTYuMzM3OCB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYig0Miw1Niw3NykiIGQ9Ik0gMjIzLjQ4NiA1Ni45NjQ1IEMgMjM0Ljk5NiA1Ni4xMzE2IDI1MC44MTkgNjAuOTQ1NCAyNjEuNTkyIDY0LjkyMSBDIDMyNC42MzkgODcuNjc2NCAzNzUuOTg4IDEzNC42NjcgNDA0LjIzMiAxOTUuNDU1IEMgNDI0Ljk4OCAyNDAuNzQ0IDQzNC40NDIgMzA3LjczIDQxOC45MjMgMzU3LjQ3MiBDIDQxNy45NDkgMzYwLjU5NSA0MTUuMDc3IDM2NS45MTYgNDExLjc3NyAzNjcuMzUgQyAzNzAuNzEgMzcyLjY1MiAzMTAuMjgxIDMzMi44NTYgMjgyLjM1NiAzMDUuMDYxIEMgMjM1LjQ2OCAyNTguOTMyIDIwOC43ODggMTk2LjA5MSAyMDguMTY1IDEzMC4zMTggQyAyMDguMDk0IDEwNi45NTEgMjA2LjEyOSA3NC4zOTY4IDIyMy40ODYgNTYuOTY0NSB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYig0Miw1Niw3NykiIGQ9Ik0gMTM4OC44OCA2MDcuNDY5IEMgMTQ1MC45IDYwNi4zNDkgMTUwMi4xMyA2NTUuNjQgMTUwMy40IDcxNy42NjEgQyAxNTA0LjY3IDc3OS42ODEgMTQ1NS41MSA4MzEuMDMgMTM5My40OSA4MzIuNDU0IEMgMTMzMS4yNiA4MzMuODgzIDEyNzkuNjkgNzg0LjUxIDEyNzguNDEgNzIyLjI3NCBDIDEyNzcuMTQgNjYwLjAzOCAxMzI2LjY0IDYwOC41OTIgMTM4OC44OCA2MDcuNDY5IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDQyLDU2LDc3KSIgZD0iTSA2NTguNDc5IDYwNy42NTcgQyA3MjAuNTUzIDYwNi41ODEgNzcxLjc1NCA2NTYuMDEyIDc3Mi44NjMgNzE4LjA4NSBDIDc3My45NzEgNzgwLjE1OCA3MjQuNTY2IDgzMS4zODUgNjYyLjQ5NCA4MzIuNTI1IEMgNjAwLjM3NiA4MzMuNjY2IDU0OS4xMDQgNzg0LjIxOCA1NDcuOTk1IDcyMi4xIEMgNTQ2Ljg4NSA2NTkuOTgyIDU5Ni4zNiA2MDguNzM1IDY1OC40NzkgNjA3LjY1NyB6Ii8+Cjwvc3ZnPg==") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwNDggMjA0OCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNDIsNTYsNzcpIiBkPSJNIDEwMDYuMTkgNTMuNDE0MSBDIDEwMDguMyA1My4zNjQyIDEwMTAuNDEgNTMuMzUwNSAxMDEyLjUyIDUzLjM3MyBDIDEwMTguNDYgNTMuNDYyNyAxMDI1LjQzIDU1LjAzMDcgMTAzMi4wNCA1NS4zNjAyIEMgMTA0Ny45OCA1Ni4xNTQ1IDEwNjUuMzIgNTUuNzEzMyAxMDgxLjA3IDU2Ljk5NDYgQyAxMjIyLjIzIDY3LjEyNTQgMTM1OC44NSAxMTEuMjMyIDE0NzkuMjkgMTg1LjU1NyBDIDE1MDEuMyAxOTkuMzA2IDE1NjAuNDcgMjM1LjQ2OCAxNTY5LjYzIDI2MS40OTIgQyAxNTc1Ljc5IDI3OC45ODQgMTU3My4xIDMxNi43OTQgMTU3My40NiAzMzcuODc0IEMgMTU3My42NSAzNDguNiAxNTcyLjk0IDM5NS4zMSAxNTYzLjI3IDQwNS4wNjYgQyAxNTQ3Ljg0IDQxMi41NDMgMTQ5OS4yMSA0MTAuNDYyIDE0ODAuOTUgNDExLjg5NSBDIDEzNzcuNzYgNDE5LjkwNiAxMjgwLjU3IDQ2My41NzIgMTIwNi4wNSA1MzUuNDAzIEMgMTE5OS4xNiA1NDIuMTExIDExOTEuNzQgNTUxLjIzMiAxMTg1LjMyIDU1OC41NTYgQyAxMTQzLjU4IDYwNi4xNjEgMTExMy4wMyA2NjMuMTE3IDEwOTUuMDUgNzIzLjc2IEMgMTA4NS42MyA3NTUuNTM1IDEwODEuNDkgNzY3LjU5OCAxMDgwLjgxIDgwMC44MjQgQyAxMDkxLjYxIDgxNC4xODMgMTEwMS43NSA4MjguMTMyIDExMTIuMjQgODQxLjc0NiBDIDExMjEuOTcgODU0LjM3MyAxMTMzLjYzIDg2Ny4yMzYgMTE0MC44OCA4ODEuNDY4IEMgMTE0NC44OCA4ODkuMzE5IDExNDguNDkgODk5Ljg2MyAxMTQ3LjI2IDkwOC43NzkgQyAxMTQ1LjI2IDkyMy4yMzEgMTA2Ny4wNyAxMDcyLjYyIDEwNTQuNTEgMTA5Mi43MSBDIDEwNTAuNzMgMTA5OC43NiAxMDQ3LjIgMTEwMy4yOSAxMDQxLjYxIDExMDcuNzUgQyAxMDMyLjI0IDExMTIuNDQgMTAyNi43NSAxMTExLjUzIDEwMTYuNzUgMTExMC42MSBDIDEwMDguNjkgMTEwMy43NSAxMDAyLjAzIDEwOTYuMjIgOTk2LjQ3OCAxMDg3LjE5IEMgOTkwLjE2NyAxMDc2LjkyIDk4NS44OSAxMDY1LjM3IDk4MC4zNiAxMDU0LjY2IEMgOTY2Ljg1MyAxMDI4LjUyIDkwOS41NjggOTI0LjAwNCA5MDcuODk2IDkwNC43NDQgQyA5MDcuMzI4IDg5OC4yMDMgOTA4LjUyOCA4OTIuMjUyIDkxMS4wOTkgODg2LjI3MSBDIDkxNi43ODUgODczLjA0MSA5MjYuODgzIDg2MS41OTcgOTM1LjMwNiA4NTAuMDM0IEMgOTQ4LjM2NCA4MzIuMTA1IDk2MS4yNDggODE0LjA0IDk3NS40MDIgNzk2Ljk1IEMgOTc1Ljg1NyA3NjkuNzk1IDk2OC43MDYgNzQ3LjIzOSA5NjAuODMxIDcyMS42MzggQyA5MjAuNzkgNTkxLjQ2NCA4MjcuODQ5IDQ5MC4wOTYgNzAwLjI5MSA0NDEuNTgxIEMgNjY2LjUxMyA0MjguNzMzIDYzOS4yMDcgNDE5LjYwNyA2MDIuNjMxIDQxNS4xMzggQyA1NzguMjgxIDQxMi4zMDcgNTUzLjgxMyA0MTAuNTkxIDUyOS4zMDYgNDA5Ljk5NiBDIDUyMC44ODkgNDA5LjczOCA1MTIuMDgzIDQxMC44NTggNTAzLjczNSA0MTAuMTk4IEMgNDk5Ljc1NiA0MDkuODg0IDQ5Mi42MzUgNDA4LjkyMSA0ODkuNDQgNDA2Ljk5OCBDIDQ4My43MTYgNDAzLjU1MiA0NzkuNTYgMzkxLjEwNiA0NzguODE4IDM4NC45ODkgQyA0NzQuOTk5IDM1My41MDcgNDY4LjU3NyAyNjguMjA2IDQ4Ni40MDEgMjQzLjMxMiBDIDQ5Ni4xNSAyMjkuNjk2IDUzOS4yMjkgMTk5LjkzMSA1NTQuNjIgMTg5LjcyIEMgNjUxLjYzNiAxMjUuMzU2IDc2OS44ODUgODEuMDg1NiA4ODQuOTM1IDY0LjI4ODYgQyA5MDIuNTc3IDYxLjcxMzEgOTI4LjM2MSA1OC4xNzczIDk0NS42NTggNTcuMDY5MSBDIDk2Ny43NzkgNTUuNjUxOCA5ODMuMjI2IDU2LjMyOSAxMDA2LjE5IDUzLjQxNDEgeiBNIDUyNi4yOCAzMjguNDUxIEMgNTU0LjgxMyAzMjAuNDQ1IDU2OS4xODIgMzIyLjU0NyA1OTcuMDU1IDMyNC44NDYgQyA2NjkuODY2IDMzMS4zMTQgNzQwLjQ3MyAzNTMuMTc0IDgwNC4yMDEgMzg4Ljk3OSBDIDg5MS4zNjIgNDM4LjI5MyA5NjIuNyA1MTEuMzc3IDEwMDkuODkgNTk5LjcwMyBDIDEwMTcuODQgNjE0LjcxOSAxMDIxLjQ1IDYyNS42OTggMTAyOC4wMiA2NDAuMTgzIEMgMTAzMS44NCA2MzAuMjQyIDEwMzguNTcgNjEzLjY4NCAxMDQzLjQ1IDYwNC4zMTYgQyAxMDUzLjcgNTgyLjk4NCAxMDY1LjkyIDU2My45NDMgMTA3OS4zMSA1NDQuNDg0IEMgMTE0MC4wMyA0NTUuMDM5IDEyMjcuOTIgMzg3LjUwNiAxMzI5Ljk4IDM1MS44NjkgQyAxMzc1LjU5IDMzNi4yNjIgMTQyMy4xNSAzMjcuMTE2IDE0NzEuMjkgMzI0LjY5NiBDIDE0OTAuMjMgMzIzLjY1OSAxNDkzLjg5IDMyMS4xMDcgMTUxMi41NiAzMjYuNjMxIEMgMTQ5NC4zIDMwOS4zMTMgMTQ4MC41NCAyOTkuMTg0IDE0NjAuMDQgMjg0LjQ1MSBDIDEzNTguMDQgMjEyLjQwNSAxMjM5LjcyIDE2Ni44ODUgMTExNS43MyAxNTEuOTk3IEMgMTA2OC41NCAxNDYuNzI2IDEwMDkuMTYgMTQ3LjQ0NSA5NjEuMDE5IDE0OC40NDUgQyA5MTYuNTI4IDE1My4wMTcgODc3LjY0NSAxNTcuMTkgODMzLjY3NCAxNjcuMzI2IEMgNzI3LjQgMTkxLjgyNSA2MDQuOTg3IDI1Mi4wODcgNTI2LjI4IDMyOC40NTEgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNDIsNTYsNzcpIiBkPSJNIDEyOTIuMDggMTgyNS4yNSBDIDEyOTEuNDUgMTgxOC43NyAxMjkxLjMgMTgxMy45MSAxMjkxLjI2IDE4MDcuMzcgTCAxMjkxLjE4IDE2OTEuMDQgQyAxMjkxLjE5IDE2NjkuNTkgMTI5MC4zOSAxNjQ2LjA1IDEyOTIuMjEgMTYyNC44MiBDIDEyOTkuNDYgMTU0MC42NSAxMzY2LjMyIDE1MjEuMTkgMTQyNy41MSAxNDc2LjY4IEMgMTQ2My4yMyAxNDUwLjM2IDE0OTYuODYgMTQyMS4zIDE1MjguMDcgMTM4OS43NiBDIDE2NTQuNjYgMTI2MS45NSAxNzMwLjQ4IDEwOTIuNDggMTc0MS40MSA5MTIuOTI0IEMgMTc0Mi41OSA4OTMuMzg0IDE3NDIuMTEgODczLjUzNCAxNzQxLjkyIDg1My45NTkgQyAxNzQxLjc3IDgzOC42MjcgMTczOS44NyA4MjMuMTEgMTczOC4zNSA4MDcuODU3IEMgMTczMS40MiA3MzguMzA4IDE3MTQuODggNjcyLjY0NCAxNjg5LjI0IDYwNy42NTcgQyAxNjg2LjA5IDU5OS42NzUgMTY3Ni44MSA1NzUuMjE0IDE2NzEuNTUgNTY5LjgyNiBDIDE2NjUuMzQgNTYzLjQ2NCAxNjQxLjU0IDU2OC44MjYgMTYzMS40IDU1OC4xMjkgQyAxNjI3Ljk5IDU1NC41MzggMTYyNy42NSA1NDkuMDQyIDE2MjcuNzYgNTQ0LjM0NyBDIDE2MjguMDIgNTMzLjYxOCAxNjMyLjE4IDUyMi45NzIgMTYzNS41OCA1MTIuOTIgQyAxNjQ5LjExIDQ3Mi45NiAxNjcxLjkzIDQyOC43NSAxNzAzLjQyIDM5OS44NTEgQyAxNzU2LjY3IDM1MC45ODQgMTgxNS43IDMyOC4xODEgMTg4Ny44MSAzMzEuNTI1IEMgMTkwMS41IDMzMi4xNiAxOTE0LjUgMzM0LjAzMyAxOTI0LjE5IDM0NC42MzUgQyAxOTI1LjA5IDM2OS4zMDQgMTkxNC42NiAzOTkuMTIyIDE5MDQuMDYgNDIxLjEzNyBDIDE4ODMuNjUgNDYzLjE5OSAxODU0LjcgNDk1LjUzMSAxODE0LjAzIDUxOS4yIEMgMTc5OC40MiA1MjguMjg1IDE3NzkuOTQgNTM3Ljc2IDE3NjIuMzIgNTQxLjU5NCBDIDE4MTMuMDUgNjQ1LjA5OSAxODMyLjU0IDc2Mi4xODQgMTgzNS45IDg3Ni43MjUgQyAxODM2LjIxIDg4Ny41MDggMTgzNC4yOSA5MDYuNDkzIDE4MzMuODggOTE4LjQ4NiBDIDE4MjYuMjggMTE0MC45OCAxNzE2LjIgMTM1My44NSAxNTUwLjczIDE1MDEuMDIgQyAxNTIyLjI3IDE1MjYuMTggMTQ5Mi4yNyAxNTQ5LjU0IDE0NjAuODkgMTU3MC45NyBDIDE0NDYuOTggMTU4MC42MiAxNDExLjY2IDE2MDEuMDEgMTQwMi40NSAxNjExLjEgQyAxMzk3LjQ5IDE2MTYuNDkgMTM5My44NSAxNjIyLjk2IDEzOTEuODEgMTYzMCBDIDEzODEuNTcgMTY2NC4yOCAxMzg4Ljc0IDE3MjEuMjMgMTM4OC40NyAxNzU3LjY5IEMgMTM4OC4xNyAxNzk2LjcyIDEzODkuNDUgMTgzNi40MSAxMzg4LjczIDE4NzUuNDYgQyAxMzg4LjAzIDE5MTMuMDQgMTM5OC4xNCAxOTgzLjgxIDEzNDMuMDkgMTk4NS42IEMgMTMxNC42MyAxOTg2LjU3IDEyOTAuOTUgMTk1Ny4yNyAxMjcyLjExIDE5MzguMzkgTCAxMjIzLjA1IDE4ODkuMzggTCAxMDM1LjA4IDE3MDEuNjYgQyA5MjYuMTcxIDE3MDEuNjQgNzc5LjcwNSAxNjY2Ljg4IDY4MS44OTggMTYxOS43OSBDIDQ3OS42MjUgMTUyMi4zOCAzMTcuMzg0IDEzNDkuNDQgMjQ0LjQwNSAxMTM1LjM2IEMgMjIwLjg1OSAxMDY1Ljk5IDIwNy4wMjEgOTkzLjY5MiAyMDMuMjgzIDkyMC41MjYgQyAxOTYuOTY2IDc5OS40MTYgMjIxLjg0OCA2NDguNjI2IDI3NS4zOTggNTM5LjcxNCBDIDI0MS4zMjIgNTI1Ljk1NCAyMDcuNDU2IDUwNC4yMjkgMTgyLjcwMiA0NzYuODk0IEMgMTU1LjI3IDQ0Ni42MDQgMTI0LjA4NiAzODUuNjg5IDEyNy4yNjYgMzQzLjYyNSBDIDEzOC4yNDQgMzMzLjA4NyAxNTEuMTQgMzMyLjkyNCAxNjYuMDQ0IDMzMS40MzMgQyAxNzkuOTUgMzMwLjc4NiAxOTMuNjkxIDMzMC45MiAyMDguMjA5IDMzMi40MTEgQyAzMTYuNTM4IDM0My41MzEgNDA0Ljc5NCA0NDAuNjE5IDQyMS42MTEgNTQ1LjQ0IEMgNDIxLjkwNiA1NDcuMjgzIDQxOS42OTcgNTUzLjI0OSA0MTguOTc1IDU1NS4yMzEgQyA0MDEuNDMyIDU2Ny4zNTEgMzg5LjUxOSA1NjYuMjk4IDM2OC43MzMgNTY2Ljk3NiBDIDM1OS45OTEgNTc5LjIxNiAzNTQuODU0IDU5Mi41NDkgMzQ4LjkxNCA2MDYuMzUyIEMgMzE5LjI0NSA2NzcuMDE4IDMwMS44NTcgNzUyLjIzIDI5Ny41IDgyOC43NDcgQyAyOTAuMzY1IDk3Ni4xMTEgMzE4LjgyMSAxMTAzLjkyIDM5Mi45MjkgMTIzMS4zNCBDIDUyNC40MzQgMTQ1Ny40NCA3NjAuNDc4IDE1OTIuNjUgMTAyMC4zOCAxNjAzLjY5IEMgMTA3My44MiAxNjA1Ljk2IDEwNjcuOCAxNjAzLjY2IDExMDYuNzkgMTY0MS4zNSBMIDExNDkuNzcgMTY4Mi44MyBMIDEyMzYuMiAxNzY4LjgyIEMgMTI1My45NyAxNzg2LjUzIDEyNzUuNTcgMTgwNy4wMSAxMjkyLjA4IDE4MjUuMjUgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNDIsNTYsNzcpIiBkPSJNIDE4MjIuNDYgNTYuMzM3OCBDIDE4MjUuNzYgNTYuMjg0NiAxODMwLjc0IDU2LjM5MTEgMTgzMi42NSA1OS41ODQ3IEMgMTg0NS40NiA4MS4wNTg0IDE4NDYuMzUgMTE4LjY5MSAxODQ0LjU3IDE0Mi4yNzcgQyAxODQwLjkxIDE5Mi43ODggMTgyNC4xOSAyMzUuNjA2IDE3OTMuOTQgMjc1LjkxIEMgMTc2Mi44MSAzMTcuMzk2IDE3MjAuMTggMzQ3LjU3MiAxNjcxLjA4IDM2NC4zMTMgQyAxNjY0Ljc3IDM2Ni40NjYgMTY1NS45NyAzNjkuNjEyIDE2NDkuMjUgMzY5LjA4NCBDIDE2MzIuMjcgMzY1Ljk5IDE2MjguOCAzNTcuNjE0IDE2MjYuMjcgMzQxLjA5MiBDIDE2MTUuNzkgMjczLjg1OCAxNjMyLjM5IDIwNS4yMSAxNjcyLjQzIDE1MC4xOTMgQyAxNzA3LjA1IDEwMy41NzUgMTc2NC43NSA2NS4wNDY0IDE4MjIuNDYgNTYuMzM3OCB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYig0Miw1Niw3NykiIGQ9Ik0gMjIzLjQ4NiA1Ni45NjQ1IEMgMjM0Ljk5NiA1Ni4xMzE2IDI1MC44MTkgNjAuOTQ1NCAyNjEuNTkyIDY0LjkyMSBDIDMyNC42MzkgODcuNjc2NCAzNzUuOTg4IDEzNC42NjcgNDA0LjIzMiAxOTUuNDU1IEMgNDI0Ljk4OCAyNDAuNzQ0IDQzNC40NDIgMzA3LjczIDQxOC45MjMgMzU3LjQ3MiBDIDQxNy45NDkgMzYwLjU5NSA0MTUuMDc3IDM2NS45MTYgNDExLjc3NyAzNjcuMzUgQyAzNzAuNzEgMzcyLjY1MiAzMTAuMjgxIDMzMi44NTYgMjgyLjM1NiAzMDUuMDYxIEMgMjM1LjQ2OCAyNTguOTMyIDIwOC43ODggMTk2LjA5MSAyMDguMTY1IDEzMC4zMTggQyAyMDguMDk0IDEwNi45NTEgMjA2LjEyOSA3NC4zOTY4IDIyMy40ODYgNTYuOTY0NSB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYig0Miw1Niw3NykiIGQ9Ik0gMTM4OC44OCA2MDcuNDY5IEMgMTQ1MC45IDYwNi4zNDkgMTUwMi4xMyA2NTUuNjQgMTUwMy40IDcxNy42NjEgQyAxNTA0LjY3IDc3OS42ODEgMTQ1NS41MSA4MzEuMDMgMTM5My40OSA4MzIuNDU0IEMgMTMzMS4yNiA4MzMuODgzIDEyNzkuNjkgNzg0LjUxIDEyNzguNDEgNzIyLjI3NCBDIDEyNzcuMTQgNjYwLjAzOCAxMzI2LjY0IDYwOC41OTIgMTM4OC44OCA2MDcuNDY5IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDQyLDU2LDc3KSIgZD0iTSA2NTguNDc5IDYwNy42NTcgQyA3MjAuNTUzIDYwNi41ODEgNzcxLjc1NCA2NTYuMDEyIDc3Mi44NjMgNzE4LjA4NSBDIDc3My45NzEgNzgwLjE1OCA3MjQuNTY2IDgzMS4zODUgNjYyLjQ5NCA4MzIuNTI1IEMgNjAwLjM3NiA4MzMuNjY2IDU0OS4xMDQgNzg0LjIxOCA1NDcuOTk1IDcyMi4xIEMgNTQ2Ljg4NSA2NTkuOTgyIDU5Ni4zNiA2MDguNzM1IDY1OC40NzkgNjA3LjY1NyB6Ii8+Cjwvc3ZnPg==") center / contain no-repeat;
}
.sophia-logo-sm { width: 1rem; height: 1rem; }
.sophia-logo-md { width: 1.25rem; height: 1.25rem; }
.sophia-logo-lg { width: 1.5rem; height: 1.5rem; }