/* ============================================================
   CLAYMORPHISM SKIN — both themes.
   Soft extruded surfaces: one outer drop shadow + a light inner
   bevel (top-left) + a dark inner bevel (bottom-right), puffy
   radii, squishy motion. Gradients & brand colors unchanged.
   Loaded after components/theme files so overrides win.
   The landing page keeps its glass/neural design (.landing scope
   uses its own lp-* components; shared .btn there also goes clay).
   ============================================================ */
:root {
  --clay-r: 22px;
  --clay-r-sm: 14px;
  --clay-out: 0 16px 34px rgba(0, 0, 0, .48), 0 4px 10px rgba(0, 0, 0, .3);
  --clay-hi: inset 5px 5px 12px rgba(255, 255, 255, .055);
  --clay-lo: inset -7px -7px 14px rgba(0, 0, 0, .38);
  --clay-press-hi: inset 6px 6px 12px rgba(0, 0, 0, .45);
  --clay-press-lo: inset -4px -4px 10px rgba(255, 255, 255, .05);
  --clay-pop: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme="light"] {
  --clay-out: 0 16px 30px rgba(140, 152, 164, .35), 0 4px 10px rgba(140, 152, 164, .22);
  --clay-hi: inset 6px 6px 14px rgba(255, 255, 255, .95);
  --clay-lo: inset -8px -8px 16px rgba(186, 196, 206, .5);
  --clay-press-hi: inset 6px 6px 12px rgba(170, 182, 194, .55);
  --clay-press-lo: inset -4px -4px 10px rgba(255, 255, 255, .85);
}

/* ---------- entrance + motion ---------- */
@keyframes clayIn { from { transform: translateY(10px) scale(.975); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes clayGlow {
  0%, 100% { box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo), 0 0 0 0 color-mix(in srgb, var(--bio) 0%, transparent); }
  50% { box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo), 0 0 26px -6px color-mix(in srgb, var(--bio) 45%, transparent); }
}

/* ---------- cards: extruded clay slabs ---------- */
#content .card, #kb-content .card, .auth-card, .modal {
  border-radius: var(--clay-r);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, #ffffff 6%), color-mix(in srgb, var(--surface) 94%, #000000 4%));
  backdrop-filter: none;
  box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo);
  animation: clayIn .45s var(--clay-pop) both;
  transition: transform .25s var(--clay-pop), box-shadow .3s ease;
}
#content .card:hover, #kb-content .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo), 0 0 30px -8px color-mix(in srgb, var(--bio) 35%, transparent);
}
#content .card .kicker { text-shadow: 0 0 14px color-mix(in srgb, var(--bio) 40%, transparent); }
.stat-card .big { text-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 0 22px color-mix(in srgb, var(--bio) 24%, transparent); }

/* ---------- buttons: puffy, squishy, gradient kept ---------- */
.btn {
  border-radius: var(--clay-r-sm);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bio) 30%, transparent),
              inset 2px 3px 6px rgba(255, 255, 255, .35),
              inset -3px -4px 8px rgba(0, 0, 0, .22);
  transition: transform .18s var(--clay-pop), box-shadow .22s ease, filter .2s;
}
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--bio) 42%, transparent),
              inset 2px 3px 6px rgba(255, 255, 255, .4),
              inset -3px -4px 8px rgba(0, 0, 0, .22);
}
.btn:active {
  transform: translateY(1px) scale(.955);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--bio) 25%, transparent),
              inset 4px 5px 9px rgba(0, 0, 0, .28),
              inset -2px -2px 6px rgba(255, 255, 255, .18);
}
.btn-ghost {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 86%, #ffffff 7%), color-mix(in srgb, var(--surface) 95%, #000000 5%));
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22), var(--clay-hi), inset -3px -3px 8px rgba(0, 0, 0, .18);
}
:root[data-theme="light"] .btn-ghost { box-shadow: 0 6px 14px rgba(140, 152, 164, .28), var(--clay-hi), inset -3px -3px 8px rgba(186, 196, 206, .4); }
.btn-ghost:hover { border-color: var(--bio); color: var(--bio); box-shadow: 0 10px 20px rgba(0, 0, 0, .25), var(--clay-hi), 0 0 18px -4px color-mix(in srgb, var(--bio) 45%, transparent); }
.btn-ghost:active { transform: scale(.955); box-shadow: var(--clay-press-hi), var(--clay-press-lo); }
.btn-danger { box-shadow: 0 8px 18px color-mix(in srgb, var(--danger) 35%, transparent), inset 2px 3px 6px rgba(255, 255, 255, .3), inset -3px -4px 8px rgba(0, 0, 0, .25); }

/* ---------- inputs: pressed-into-the-clay wells ---------- */
.input, select.input, textarea.input {
  border-radius: var(--clay-r-sm);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, #000000 4%);
  box-shadow: var(--clay-press-hi), var(--clay-press-lo);
  transition: box-shadow .25s ease, border-color .25s;
}
:root[data-theme="light"] .input, :root[data-theme="light"] select.input, :root[data-theme="light"] textarea.input {
  background: color-mix(in srgb, var(--surface-2) 80%, #ffffff 18%);
}
.input:focus {
  border-color: var(--bio);
  box-shadow: var(--clay-press-hi), var(--clay-press-lo), 0 0 0 3px var(--bio-soft), 0 0 18px -4px color-mix(in srgb, var(--bio) 40%, transparent);
}

/* ---------- auth tabs: clay track with a raised active pill ---------- */
.auth-tabs {
  border-radius: var(--clay-r-sm);
  background: color-mix(in srgb, var(--surface-2) 92%, #000000 4%);
  box-shadow: var(--clay-press-hi), var(--clay-press-lo);
  padding: 6px;
}
.auth-tabs button { border-radius: 10px; transition: transform .2s var(--clay-pop), box-shadow .2s; }
.auth-tabs button.active {
  box-shadow: 0 5px 12px color-mix(in srgb, var(--bio) 35%, transparent), inset 2px 2px 5px rgba(255, 255, 255, .35), inset -2px -3px 6px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}

/* ---------- sidebar: clay rail, floating active pill ---------- */
.sidebar { border-right: none; box-shadow: 8px 0 26px rgba(0, 0, 0, .25), var(--clay-hi); }
:root[data-theme="light"] .sidebar { box-shadow: 8px 0 22px rgba(140, 152, 164, .2), var(--clay-hi); }
.nav-item { border-radius: var(--clay-r-sm); transition: transform .18s var(--clay-pop), box-shadow .2s, background .2s, color .2s; }
.nav-item:hover { transform: translateX(3px); }
.nav-item.active {
  background: linear-gradient(145deg, color-mix(in srgb, var(--bio) 16%, var(--surface)), color-mix(in srgb, var(--bio) 8%, var(--surface)));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--bio) 25%, transparent), inset 2px 2px 5px rgba(255, 255, 255, .1), inset -2px -3px 6px rgba(0, 0, 0, .2);
  animation: clayGlow 3.5s ease-in-out infinite;
}

/* ---------- tables: clay tray, floating rows ---------- */
.table-wrap {
  border: none; border-radius: var(--clay-r);
  box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, #ffffff 5%), color-mix(in srgb, var(--surface) 95%, #000000 4%));
  animation: clayIn .45s var(--clay-pop) both;
}
.tbl tbody tr { transition: background .2s, transform .15s, box-shadow .2s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--bio) 7%, transparent); box-shadow: inset 3px 0 0 var(--bio); }

/* ---------- badges & chips: soft clay pebbles ---------- */
.badge { box-shadow: inset 1.5px 1.5px 3px rgba(255, 255, 255, .18), inset -1.5px -2px 3px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .18); }
:root[data-theme="light"] .badge { box-shadow: inset 1.5px 1.5px 3px rgba(255, 255, 255, .7), inset -1.5px -2px 3px rgba(160, 172, 184, .35), 0 2px 5px rgba(140, 152, 164, .2); }
.chip {
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 85%, #ffffff 6%), color-mix(in srgb, var(--surface-2) 95%, #000000 5%));
  box-shadow: 0 4px 9px rgba(0, 0, 0, .2), inset 2px 2px 4px rgba(255, 255, 255, .07), inset -2px -2px 5px rgba(0, 0, 0, .18);
  transition: transform .18s var(--clay-pop), box-shadow .2s, color .2s, border-color .2s;
}
:root[data-theme="light"] .chip { box-shadow: 0 4px 9px rgba(140, 152, 164, .22), inset 2px 2px 4px rgba(255, 255, 255, .8), inset -2px -2px 5px rgba(186, 196, 206, .4); }
.chip:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 16px rgba(0, 0, 0, .25), 0 0 16px -4px color-mix(in srgb, var(--bio) 40%, transparent), inset 2px 2px 4px rgba(255, 255, 255, .1); }

/* ---------- chat bubbles: squishy clay ---------- */
.bubble { border-radius: 20px; box-shadow: 0 8px 18px rgba(0, 0, 0, .22), inset 2px 3px 6px rgba(255, 255, 255, .06), inset -3px -4px 8px rgba(0, 0, 0, .2); animation: clayIn .4s var(--clay-pop) both; }
:root[data-theme="light"] .bubble { box-shadow: 0 8px 16px rgba(140, 152, 164, .22), inset 2px 3px 6px rgba(255, 255, 255, .75), inset -3px -4px 8px rgba(186, 196, 206, .35); }
.bubble.mine { box-shadow: 0 8px 18px color-mix(in srgb, var(--bio) 22%, transparent), inset 2px 3px 6px rgba(255, 255, 255, .1), inset -3px -4px 8px rgba(0, 0, 0, .18); }
.bubble.system { box-shadow: none; animation: none; }

/* ---------- toasts & modal: floating clay ---------- */
.toast {
  border-radius: var(--clay-r-sm);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo);
  animation: clayIn .35s var(--clay-pop) both;
}
.toast.ok { box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo), 0 0 22px -6px color-mix(in srgb, var(--ok) 55%, transparent); }
.toast.err { box-shadow: var(--clay-out), var(--clay-hi), var(--clay-lo), 0 0 22px -6px color-mix(in srgb, var(--danger) 55%, transparent); }
.modal { animation: clayIn .35s var(--clay-pop) both; }

/* ---------- misc consoles ---------- */
.announce { border-radius: 0 var(--clay-r-sm) var(--clay-r-sm) 0; box-shadow: 0 6px 14px rgba(0, 0, 0, .18), inset 2px 2px 5px rgba(255, 255, 255, .05); }
.timeline .tl-item::before { box-shadow: 0 0 10px var(--bio); }
.rating-stars b.on { text-shadow: 0 0 14px color-mix(in srgb, var(--marker) 65%, transparent); }
.side-foot .btn-sm, .topbar .burger { border-radius: 12px; }
.burger { box-shadow: 0 5px 12px rgba(0, 0, 0, .22), var(--clay-hi), inset -2px -2px 6px rgba(0, 0, 0, .18); border: none; }

/* ---------- ambient: a touch more glow in the console ---------- */
.shell .main h1 { text-shadow: 0 0 26px color-mix(in srgb, var(--bio) 18%, transparent); }
.ins-panel { border-radius: 18px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #content .card, .table-wrap, .bubble, .toast, .modal { animation: none; }
  .nav-item.active { animation: none; }
}

/* attachment chip actions */
.chip .dl { margin-left: 4px; padding: 0 4px; border-radius: 6px; color: var(--ink-50); }
.chip .dl:hover { color: var(--marker); text-shadow: 0 0 10px color-mix(in srgb, var(--marker) 60%, transparent); }