/* Agape AI — dark premium.
   Foundation: tokens, the canvas, the orb, glass, and shared primitives.
   Component styles live in css/*.css. No inline styles anywhere (CSP). */

:root {
  color-scheme: dark;

  /* Ground */
  --bg: #07080c;
  --bg-raise: #0c0d13;
  --bg-solid: #111219;
  --bg-menu: #14151d;

  /* Glass */
  --glass-1: rgba(255, 255, 255, .025);
  --glass-2: rgba(255, 255, 255, .045);
  --glass-3: rgba(255, 255, 255, .06);
  --glass-hover: rgba(255, 255, 255, .075);
  --hairline: rgba(255, 255, 255, .07);
  --hairline-2: rgba(255, 255, 255, .1);
  --hairline-3: rgba(255, 255, 255, .16);
  --edge: rgba(255, 255, 255, .09);
  --blur: blur(22px) saturate(140%);

  /* Ink — every grey here clears WCAG AA on the ground and on glass, including
     hovered and selected glass over the light leaks (--text-3 is ≥ 4.7:1 there) */
  --text-1: #eeeef3;
  --text-2: #b6b7c1;
  --text-3: #9a9ba6;
  --text-inverse: #0c0b19;

  /* Accent: one luminous family, used only for primary actions, focus, the
     active nav indicator, links and the orb. Everything else is monochrome. */
  --iris: #9c8cff;
  --sky: #7cc4ff;
  --accent-grad: linear-gradient(135deg, #ab9dff 0%, #8fb9ff 55%, #7cc8ff 100%);
  --accent-grad-v: linear-gradient(180deg, #b3a6ff, var(--sky));
  --accent-line: rgba(179, 168, 255, .7);
  --accent-ring: 0 0 0 4px rgba(156, 140, 255, .16);
  --accent-glow: 0 10px 28px -10px rgba(140, 125, 255, .7);
  --accent-glow-hover: 0 12px 34px -8px rgba(140, 125, 255, .85);
  --link: #b8adff;
  --focus: #b3a8ff;

  /* Weights that exist in every system face (Segoe UI renders 500–640 as one Semibold) */
  --fw-regular: 400;
  --fw-semibold: 600;

  --danger: #ff9aa2;
  --danger-bg: rgba(255, 110, 125, .09);
  --danger-line: rgba(255, 130, 140, .28);
  --ok: #8fe3c0;
  --warn: #ffd08a;

  /* Shape and depth */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-nav: 10px;
  --r-md: 12px;
  --r-card: 18px;
  --r-comp: 24px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 64px -24px rgba(0, 0, 0, .8);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, .35), 0 40px 100px -30px rgba(0, 0, 0, .9);
  --top-light: inset 0 1px 0 rgba(255, 255, 255, .07);

  /* Type */
  --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 160ms;
  --dur: 200ms;
  --slow: 240ms;

  /* Layout */
  --sidebar-w: 272px;
  --rail-w: 68px;
  --topbar-h: 56px;
  --chat-w: 760px;
  --home-w: 860px;
}

* { box-sizing: border-box; }

/* Inherited: every scroller gets the quiet tinted bar, not the platform default. */
:root { scrollbar-color: rgba(255, 255, 255, .14) transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--text-1);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* The visual viewport, not the layout viewport: 100dvh alone does not keep the
   composer above the iOS keyboard. app.js keeps --app-height in sync. */
#app {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  background: var(--bg);
}

.view { position: relative; z-index: 1; height: 100%; }
[hidden] { display: none !important; }

button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); }
ul, ol { margin: 0; padding: 0; }
kbd { font-family: var(--font); }
mark { background: rgba(156, 140, 255, .22); color: var(--text-1); border-radius: 3px; padding: 0 1px; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection { background: rgba(156, 140, 255, .35); color: #fff; }

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

.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- Canvas */

.canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, #10111a 0%, rgba(7, 8, 12, 0) 60%),
    var(--bg);
}

.leak {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Centred behind the orb: on sign-in (about a quarter down the screen), and on
   Home in the middle of the main area rather than the whole window. */
.leak-iris {
  width: 72vmax;
  height: 72vmax;
  left: calc(50% - 36vmax);
  top: calc(24vh - 36vmax);
  background: radial-gradient(circle, rgba(132, 112, 255, .26) 0%, rgba(132, 112, 255, .09) 36%, rgba(132, 112, 255, 0) 66%);
  animation: drift-iris 46s ease-in-out infinite alternate;
}
#app:has(> #view-app:not([hidden])) .leak-iris {
  top: calc(20vh - 36vmax);
  left: calc(50% + var(--sidebar-w) / 2 - 36vmax);
}
#app:has(> #view-app.is-rail:not([hidden])) .leak-iris { left: calc(50% + var(--rail-w) / 2 - 36vmax); }
@media (max-width: 767.98px) {
  #app:has(> #view-app:not([hidden])) .leak-iris { left: calc(50% - 36vmax); }
}

.leak-teal {
  width: 64vmax;
  height: 64vmax;
  left: -26vmax;
  bottom: -34vmax;
  background: radial-gradient(circle, rgba(64, 196, 206, .17) 0%, rgba(64, 196, 206, .05) 38%, rgba(64, 196, 206, 0) 66%);
  animation: drift-teal 58s ease-in-out infinite alternate;
}

.leak-peach {
  width: 48vmax;
  height: 48vmax;
  right: -20vmax;
  top: 18%;
  background: radial-gradient(circle, rgba(255, 170, 140, .09) 0%, rgba(255, 170, 140, .03) 40%, rgba(255, 170, 140, 0) 66%);
  animation: drift-peach 64s ease-in-out infinite alternate;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%);
}

@keyframes drift-iris {
  from { transform: translate3d(-4vmax, 0, 0) scale(1); }
  to { transform: translate3d(5vmax, 3vmax, 0) scale(1.08); }
}
@keyframes drift-teal {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8vmax, -5vmax, 0) scale(1.1); }
}
@keyframes drift-peach {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-7vmax, 6vmax, 0); }
}

/* ---------------------------------------------------------------------- Orb */

.orb {
  --orb: 96px;
  position: relative;
  display: block;
  width: var(--orb);
  height: var(--orb);
  flex: none;
  border-radius: 50%;
  isolation: isolate;
  animation: orb-breathe 7s ease-in-out infinite;
}

.orb span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.orb-bloom {
  inset: -48%;
  z-index: -1;
  background: radial-gradient(circle, rgba(176, 156, 255, .42) 0%, rgba(124, 196, 255, .17) 32%, rgba(255, 170, 205, .07) 50%, rgba(0, 0, 0, 0) 68%);
  animation: orb-bloom 7s ease-in-out infinite;
}

.orb-core {
  inset: 0;
  overflow: hidden;
  background: #a9a2ff;
  transform: translateZ(0);
}

.orb-swirl {
  inset: -22%;
  background: conic-gradient(from 0deg, #ff86c4 0deg, #ffbf94 58deg, #fff1f6 100deg, #a197ff 158deg, #62d3ff 218deg, #d4f6ff 262deg, #b08aff 312deg, #ff86c4 360deg);
  filter: blur(calc(var(--orb) * .045)) saturate(1.25);
  animation: orb-spin 18s linear infinite;
}

.orb-swirl::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 104, 176, .9), rgba(255, 104, 176, 0) 48%),
    radial-gradient(circle at 74% 70%, rgba(72, 196, 255, .9), rgba(72, 196, 255, 0) 50%),
    radial-gradient(circle at 72% 24%, rgba(255, 196, 150, .75), rgba(255, 196, 150, 0) 42%);
  filter: blur(calc(var(--orb) * .06));
  animation: orb-spin 10s linear infinite reverse;
}

.orb-glass {
  inset: 0;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .38) 5%, rgba(255, 255, 255, 0) 17%),
    radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 68% 90%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(30, 16, 90, .38) 100%);
  box-shadow:
    inset 0 0 calc(var(--orb) * .08) rgba(255, 255, 255, .38),
    inset calc(var(--orb) * -.06) calc(var(--orb) * -.09) calc(var(--orb) * .2) rgba(40, 22, 120, .42),
    0 0 0 1px rgba(255, 255, 255, .08);
}

/* The live orb: js/orb.js draws a WebGL shader into this canvas and marks the orb
   .is-live once the first frame is in. Until then, and wherever WebGL is missing,
   the CSS layers above are the orb. The shader brings its own light, so the
   glass keeps only its edge. */
.orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  visibility: hidden;
}
.orb.is-live .orb-canvas { visibility: visible; }
.orb.is-live .orb-core { background: #130c3c; }
.orb.is-live .orb-swirl,
.orb.is-live .orb-core::after { display: none; }
.orb.is-live .orb-glass {
  background: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

/* The logo, on the glass above the ink (live or CSS), on the orbs big enough to
   read it: at sidebar and avatar size it is a white smudge. The shadow keeps it
   legible when a bright ribbon passes behind it. */
.orb-splash .orb-glass::after,
.orb-auth .orb-glass::after,
.orb-hero .orb-glass::after {
  content: "";
  position: absolute;
  inset: 20%;
  background: url("/img/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--orb) * .012) calc(var(--orb) * .03) rgba(16, 8, 60, .55));
}

.orb-splash { --orb: 64px; }
.orb-auth { --orb: 128px; }
.orb-hero { --orb: 104px; }
.orb-avatar { --orb: 28px; }
.orb-mini { --orb: 22px; }
.orb-avatar .orb-bloom, .orb-mini .orb-bloom { inset: -34%; opacity: .7; }

/* Thinking: the geometry and the spin durations stay put (changing a running
   animation's duration jumps its angle); a shimmer fades in over the core and the
   orb and bloom breathe faster on a symmetric curve. */
.orb-core::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 40deg, rgba(255, 255, 255, 0) 90deg);
  filter: blur(calc(var(--orb) * .05));
  opacity: 0;
  animation: orb-spin 1.6s linear infinite paused;
  transition: opacity var(--slow) var(--ease);
}
.orb.is-thinking { animation: orb-pulse 1.8s ease-in-out infinite; }
.orb.is-thinking .orb-core::after { opacity: 1; animation-play-state: running; }
.orb.is-thinking .orb-bloom { animation: orb-bloom-fast 1.8s ease-in-out infinite; }

@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes orb-bloom {
  0%, 100% { opacity: .78; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes orb-bloom-fast {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* -------------------------------------------------------------------- Glass */

.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .028) 100%);
  border: 1px solid var(--hairline);
  box-shadow: var(--top-light), var(--shadow-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg-solid); }
}

/* Pointer-following spotlight for cards (js sets --mx / --my with setProperty). */
.spot {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 0%;
}
.spot .spot-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
.spot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
.spot:hover .spot-glow, .spot:hover::after,
.spot:focus-visible .spot-glow, .spot:focus-visible::after { opacity: 1; }

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--text-1);
  background: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), transform 120ms var(--ease), opacity var(--dur);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.is-busy { opacity: .75; }

.btn-primary {
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  background: var(--accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(40, 30, 110, .25), var(--accent-glow);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.07) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(40, 30, 110, .25), var(--accent-glow-hover);
}

.btn-quiet {
  background: rgba(255, 255, 255, .04);
  border-color: var(--hairline-2);
  box-shadow: var(--top-light);
}
.btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .075); border-color: var(--hairline-3); }

.btn-danger {
  color: #ffd2d6;
  background: rgba(255, 96, 112, .16);
  border-color: rgba(255, 128, 140, .38);
  box-shadow: var(--top-light);
}
.btn-danger:hover:not(:disabled) { background: rgba(255, 96, 112, .24); }

.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: var(--r-nav); gap: 6px; }
.btn-block { display: flex; width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-nav);
  color: var(--text-2);
  background: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .065); color: var(--text-1); }
/* Pressed look only for buttons that open something; the sidebar toggle's
   aria-expanded describes the sidebar, not a popup. */
.icon-btn[aria-haspopup][aria-expanded="true"],
#btn-menu[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: var(--text-1); }
.icon-btn-sm { width: 28px; height: 28px; border-radius: var(--r-sm); }

.link-btn {
  position: relative;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--link);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 173, 255, .45);
  cursor: pointer;
}
.link-btn:hover { text-decoration-color: currentColor; }
/* A bigger hit area than the text, without moving the layout. */
.link-btn::after { content: ""; position: absolute; inset: -10px -8px; }

.btn-ghost-sm {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-nav);
  background: none;
  color: var(--text-3);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.btn-ghost-sm:hover:not(:disabled) { color: var(--text-1); background: rgba(255, 255, 255, .04); }

.ico {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.ico svg, svg.ico { width: 100%; height: 100%; display: block; }
.ico-sm { width: 16px; height: 16px; }
.btn .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------- Fields */

.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

.field {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-2);
  background: rgba(255, 255, 255, .035);
  color: var(--text-1);
  font-size: 15px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field::placeholder { color: var(--text-3); }
.field:hover { border-color: var(--hairline-3); }
.field:focus {
  /* Transparent, not none: forced-colors mode paints it in the system colour. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--accent-line);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--accent-ring);
}
.field[aria-invalid="true"] { border-color: var(--danger-line); }

/* Browser autofill would otherwise lay its own slab over the glass field. */
.field:-webkit-autofill,
.field:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text-1);
  caret-color: var(--iris);
  -webkit-box-shadow: inset 0 0 0 100px #15161d;
  transition: background-color 600000s 0s;
}
.field:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 100px #191a22, var(--accent-ring);
}
.field-error { min-height: 1.4em; margin-top: 6px; font-size: 13px; color: var(--danger); }

/* Set by the business owner, or otherwise not ours to change: still focusable and readable. */
.field[readonly] {
  color: var(--text-2);
  background: rgba(255, 255, 255, .015);
  border-color: var(--hairline);
  box-shadow: none;
  cursor: default;
}
.field[readonly]:hover { border-color: var(--hairline); }

.field-group + .field-group { margin-top: 16px; }

.field-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.field-hint .ico { width: 14px; height: 14px; opacity: .55; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.field-hint.is-met { color: var(--ok); }
.field-hint.is-met .ico { opacity: 1; }
.field-hint + .field-error { margin-top: 4px; }

/* Password with a show/hide toggle inside the field's right edge. */
.password-field { position: relative; }
.password-field .field { padding-right: 52px; }
.pw-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.pw-toggle:hover { color: var(--text-1); background: rgba(255, 255, 255, .06); }
.pw-toggle[aria-pressed="true"] { color: var(--text-1); }
.pw-toggle:focus-visible { outline-offset: -2px; }
.pw-toggle .ico { width: 18px; height: 18px; }
/* Edge and old Chromium paint their own reveal button over ours. */
.password-field .field::-ms-reveal { display: none; }

/* ------------------------------------------------------------ Small pieces */

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04);
  color: var(--text-3);
  font-size: 11px;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: rgba(255, 255, 255, .05);
  color: var(--text-2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}
.chip-ok { color: var(--ok); border-color: rgba(143, 227, 192, .28); background: rgba(143, 227, 192, .07); }
.chip-warn { color: var(--warn); border-color: rgba(255, 208, 138, .3); background: rgba(255, 208, 138, .07); }

.section-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  color: var(--text-1);
}

/* ----------------------------------------------------------------- Loading */

.view-centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.splash-text { font-size: 13px; color: var(--text-3); letter-spacing: .02em; }

/* ---------------------------------------------------------------- Skeleton */

.skel {
  display: block;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, .035) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes text-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------------------------------------------- Reduced motion */

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

/* ------------------------------------------------------------ Forced colours */

/* Box-shadow rings vanish and backgrounds are overridden in Windows High
   Contrast, so every indicator that relies on them gets a real outline there. */
@media (forced-colors: active) {
  .menu-item:focus-visible,
  .palette-option[aria-selected="true"],
  .account-btn:focus-visible,
  .menu-row:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  .field:focus, .search-input:focus, .otp-box:focus, .palette-search:focus-within { outline: 2px solid Highlight; outline-offset: 0; }
  .composer:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
  .nav-item[aria-current="page"], .conv-link[aria-current="page"] { outline: 1px solid CanvasText; }
}

/* -------------------------------------------------------------- Tap targets */

/* Phones: every control is at least 44px to the touch. */
@media (max-width: 767.98px) {
  .icon-btn, .icon-btn-sm { width: 44px; height: 44px; }
  .btn-sm, .btn-ghost-sm { min-height: 44px; }
  /* Centred in the 48px field (Settings' 44px field overrides top in overlays.css). */
  .pw-toggle { width: 44px; height: 44px; top: 2px; right: 2px; }
}