/* ============================================================
   Zero-UI theme — a thin reskin layer ON TOP of Bootstrap 5.
   Load AFTER bootstrap.min.css. Works for both the single-page
   shell (index.html) and standalone full-page view renders.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --zu-bg:#FAF8F4;
  --zu-surface:#FFFFFF;
  --zu-ink:#2B2722;
  --zu-soft:#6F665A;
  --zu-faint:#A8A192;
  --zu-line:#E9E3D9;
  --zu-panel:#FAF7F1;
  --zu-accent:#15786A;
  --zu-accent-tint:rgba(21,120,106,.12);
  --zu-accent-soft:rgba(21,120,106,.07);
  --zu-amber:#B07A2B;
  --zu-amber-tint:#F6ECDA;
  --zu-danger:#B0413A;
  --zu-danger-tint:#F6E2E0;
  --zu-stream-width:720px;
  --zu-shadow:0 1px 2px rgba(43,39,34,.04), 0 18px 44px -24px rgba(43,39,34,.28);
  --zu-shadow-card:0 1px 2px rgba(43,39,34,.04), 0 22px 50px -30px rgba(43,39,34,.30);
  --zu-ease:cubic-bezier(.22,1,.36,1);
}

body {
  background:var(--zu-bg);
  color:var(--zu-ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.zu-mono { font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ── App shell (single-page) ─────────────────────────────── */
.zu-app { position:fixed; inset:0; overflow:hidden; }

.zu-header {
  position:absolute; top:0; left:0; right:0; height:64px; z-index:20;
  display:flex; align-items:center; justify-content:space-between; padding:0 26px;
}
/* .zu-app clips overflow (needed for the thread/dock animations), so on narrow
   viewports the chip-button row can outgrow the header and get silently cut
   off the right edge — including "Iš naujo" (#zu-reset), the last item.
   min-width:0 lets this flex child actually shrink below its content size;
   overflow-x:auto then makes the excess reachable by a horizontal swipe
   instead of invisible. Scrollbar hidden since it's a UI chrome row, not content. */
.zu-header-right {
  min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  /* overflow-x:auto forces overflow-y to also clip (a lone 'visible' axis
     isn't allowed once the other isn't) — which cropped #zu-bell-count, the
     notification badge deliberately positioned top:-6px to poke above the
     bell button. padding-top/margin-top cancel out to reserve room for it
     inside this box without shifting the row within the 64px header. */
  padding-top:8px; margin-top:-8px;
}
.zu-header-right::-webkit-scrollbar { display:none; }
.zu-header-right > * { flex:none; }
.zu-mark {
  display:flex; align-items:center; gap:1px; font-weight:700; font-size:18px;
  letter-spacing:-.02em; cursor:pointer; user-select:none; color:var(--zu-ink);
  flex:none;
}
.zu-mark .dot { color:var(--zu-accent); }
/* Base chip-button look, shared by Atsijungti, the assist bell, the report
   button, and "Iš naujo". Always visible on its own — .zu-reset (below) is an
   additive modifier for the one button that should stay hidden until active. */
.zu-chip-btn {
  display:flex; align-items:center; gap:9px; background:var(--zu-surface);
  border:1px solid var(--zu-line); color:var(--zu-soft); font-size:13px; font-weight:500;
  padding:7px 11px 7px 13px; border-radius:11px; cursor:pointer; white-space:nowrap;
  transition:opacity .3s ease, transform .3s ease, border-color .2s;
}
.zu-chip-btn:hover { border-color:var(--zu-accent); color:var(--zu-ink); }
.zu-chip-btn kbd {
  font-family:'JetBrains Mono',monospace; font-size:11px; background:#F1ECE2; color:#8A8170;
  padding:2px 6px; border-radius:6px; border:none; box-shadow:none;
}
/* Hide-until-active modifier — only "Iš naujo" (#zu-reset) should carry this. */
.zu-reset { opacity:0; pointer-events:none; transform:translateY(-5px); }
.zu-app.zu-active .zu-reset { opacity:1; pointer-events:auto; transform:none; }

/* ── Thread ──────────────────────────────────────────────── */
.zu-thread { position:absolute; inset:0; padding:96px 22px 176px; overflow-y:auto; transition:opacity .28s ease; }
.zu-stream { max-width:var(--zu-stream-width); margin:0 auto; width:100%; }
.zu-thread::-webkit-scrollbar { width:11px; }
.zu-thread::-webkit-scrollbar-thumb { background:#E2DBCF; border-radius:10px; border:3px solid var(--zu-bg); }
.zu-thread::-webkit-scrollbar-track { background:transparent; }

.zu-veil {
  position:absolute; left:0; right:0; bottom:0; height:176px; z-index:10; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
  background:linear-gradient(to top, var(--zu-bg) 32%, rgba(250,248,244,0) 100%);
}
.zu-app.zu-active .zu-veil { opacity:1; }

/* ── First-login intro modal ─────────────────────────────── */
.zu-modal-veil {
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
  background:rgba(43,39,34,.42); backdrop-filter:blur(2px);
}
.zu-modal-card {
  width:min(420px,100%); background:var(--zu-surface); border:1px solid var(--zu-line);
  border-radius:18px; padding:26px 24px 22px; box-shadow:var(--zu-shadow-card);
}
.zu-modal-card p { margin:0 0 13px; font-size:14.5px; line-height:1.55; color:var(--zu-soft); }
.zu-modal-card p:last-of-type { margin-bottom:18px; }
.zu-modal-card kbd {
  font-family:'JetBrains Mono',monospace; font-size:11px; background:#F1ECE2; color:#8A8170;
  padding:2px 6px; border-radius:6px; border:none; box-shadow:none;
}
.zu-modal-card .btn { border-radius:12px; background:var(--zu-accent); border-color:var(--zu-accent); }
.zu-modal-card .btn:hover { filter:brightness(1.08); }

/* Swipeable multi-tip carousel variant of the intro modal (.zu-intro-card is
   added alongside .zu-modal-card, not instead of it — only padding is
   overridden here, source order after .zu-modal-card above makes that win). */
.zu-intro-card { padding:22px 0 22px; overflow:hidden; }

.zu-intro-head {
  display:flex; align-items:center; justify-content:space-between; padding:0 24px 14px;
}
.zu-intro-head .zu-mark { font-size:16px; margin:0; }
#zu-intro-skip {
  border:none; background:transparent; color:var(--zu-faint); font-size:12.5px;
  font-weight:500; cursor:pointer; padding:4px;
}
#zu-intro-skip:hover { color:var(--zu-soft); }

.zu-intro-viewport { overflow:hidden; }
.zu-intro-track {
  display:flex; touch-action:pan-y; cursor:grab;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.zu-intro-track.zu-dragging { transition:none; cursor:grabbing; }

.zu-intro-slide {
  flex:0 0 100%; width:100%; box-sizing:border-box; padding:6px 26px 0;
  text-align:center; user-select:none;
}
.zu-intro-glyph {
  width:52px; height:52px; border-radius:14px; background:var(--zu-accent-soft);
  color:var(--zu-accent); display:flex; align-items:center; justify-content:center;
  font-size:22px; margin:0 auto 16px;
}
.zu-intro-title { font-size:17.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:9px; }
.zu-intro-slide p { margin:0 0 6px; font-size:14.5px; line-height:1.6; color:var(--zu-soft); min-height:66px; }

.zu-intro-dots { display:flex; align-items:center; justify-content:center; gap:7px; margin:18px 0 20px; }
.zu-intro-dots button {
  width:7px; height:7px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background:var(--zu-line); transition:width .25s ease, background .25s ease;
}
.zu-intro-dots button.zu-active { width:20px; background:var(--zu-accent); }

.zu-intro-foot { padding:0 24px; }
.zu-intro-hint {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; color:var(--zu-faint);
}
#zu-intro-close { border-radius:12px; }

@media (max-width:480px) {
  .zu-intro-slide p { min-height:76px; }
}

/* ── Dock / composer ─────────────────────────────────────── */
.zu-dock {
  position:absolute; left:50%; width:min(var(--zu-stream-width),92vw); z-index:15;
  bottom:50%; transform:translate(-50%,50%);
  transition:bottom .65s var(--zu-ease), transform .65s var(--zu-ease);
}
.zu-app.zu-active .zu-dock { bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%,0); }

.zu-greeting {
  text-align:center; margin:0 0 24px; overflow:hidden; max-height:240px; opacity:1;
  transition:max-height .55s var(--zu-ease), opacity .4s ease, margin .55s var(--zu-ease);
}
.zu-greeting h1 { font-size:34px; font-weight:600; letter-spacing:-.025em; margin:0 0 11px; line-height:1.12; }
.zu-greeting p { margin:0; color:var(--zu-soft); font-size:15.5px; line-height:1.55; }
.zu-app.zu-active .zu-greeting { max-height:0; opacity:0; margin:0; }

.zu-composer {
  display:flex; align-items:center; gap:8px; background:var(--zu-surface);
  border:1px solid #E4DDD2; border-radius:17px; padding:8px 8px 8px 19px;
  box-shadow:var(--zu-shadow); transition:border-color .2s ease, box-shadow .25s ease;
}
.zu-composer:focus-within { border-color:var(--zu-accent); box-shadow:var(--zu-shadow), 0 0 0 3px var(--zu-accent-soft); }
.zu-input {
  flex:1; border:none; outline:none; background:transparent; font-size:16.5px; color:var(--zu-ink);
  padding:11px 0; min-width:0; font-family:inherit;
}
.zu-input::placeholder { color:var(--zu-faint); }
.zu-send {
  width:43px; height:43px; border-radius:12px; border:none; background:var(--zu-accent); color:#fff;
  font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none;
  transition:transform .15s ease, filter .2s ease; box-shadow:0 6px 16px -8px rgba(21,120,106,.6);
}
.zu-send:hover { transform:scale(1.06); filter:brightness(1.05); }

.zu-examples {
  margin-top:18px; overflow:hidden; max-height:160px; opacity:1;
  transition:max-height .55s var(--zu-ease), opacity .4s ease, margin .55s var(--zu-ease);
}
.zu-app.zu-active .zu-examples { max-height:0; opacity:0; margin-top:0; }
.zu-examples-label {
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.16em; color:var(--zu-faint); margin-bottom:11px;
}
.zu-examples-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.zu-ex {
  border:1px solid var(--zu-line); background:var(--zu-surface); color:var(--zu-soft);
  font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer; transition:all .2s ease;
}
.zu-ex:hover { border-color:var(--zu-accent); color:var(--zu-ink); background:var(--zu-accent-soft); }

/* ── Turns (entrance animated by JS via inline styles) ───── */
.zu-turn { margin:0 0 20px; }
.zu-user { display:flex; justify-content:flex-end; }
.zu-user .bubble {
  max-width:80%; background:var(--zu-accent-tint); color:var(--zu-ink);
  padding:12px 17px; border-radius:18px 18px 5px 18px; font-size:15px; line-height:1.5;
}
.zu-sys { display:flex; gap:13px; align-items:flex-start; }
.zu-avatar {
  width:30px; height:30px; border-radius:50%; background:var(--zu-accent); flex:none;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
  box-shadow:0 4px 10px -4px rgba(21,120,106,.6);
}
.zu-avatar::after { content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.zu-col { flex:1; min-width:0; }

.zu-meta {
  display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--zu-faint); letter-spacing:.02em; margin:5px 0 9px;
}
.zu-meta-dot { width:6px; height:6px; border-radius:50%; background:var(--zu-accent); animation:zu-pulse 1.6s ease-in-out infinite; }

.zu-card {
  background:var(--zu-surface); border:1px solid var(--zu-line); border-radius:18px;
  box-shadow:var(--zu-shadow-card); overflow:hidden;
}
.zu-card-head { display:flex; align-items:center; gap:12px; padding:17px 21px; border-bottom:1px solid var(--zu-line); }
.zu-glyph {
  width:38px; height:38px; border-radius:11px; background:var(--zu-accent-soft);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--zu-accent);
}
.zu-card-titles { flex:1; min-width:0; }
.zu-card-name { font-size:16.5px; font-weight:600; color:var(--zu-ink); letter-spacing:-.01em; }
.zu-card-sub { font-size:10.5px; color:var(--zu-faint); margin-top:2px; letter-spacing:.02em; }
.zu-card-body { padding:20px 22px; }
.zu-card-foot { padding:0 22px 20px; }

.zu-pill { flex:none; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap; }
.zu-pill-accent { background:var(--zu-accent-soft); color:var(--zu-accent); }
.zu-pill-amber  { background:var(--zu-amber-tint); color:var(--zu-amber); }
.zu-pill-danger { background:var(--zu-danger-tint); color:var(--zu-danger); }

/* clarify question + chips */
.zu-clarify .zu-card-body { padding:19px 21px; }
.zu-question { font-size:17px; font-weight:500; color:var(--zu-ink); line-height:1.4; }
.zu-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.zu-chip {
  border:1px solid var(--zu-line); background:var(--zu-surface); color:var(--zu-ink);
  font-size:14px; font-weight:500; padding:9px 15px; border-radius:999px; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, opacity .35s ease, transform .35s ease;
}
.zu-chip:hover { background:var(--zu-accent-soft); border-color:var(--zu-accent); }
.zu-hint { font-size:12.5px; color:var(--zu-faint); margin-top:14px; display:flex; align-items:center; gap:5px; }

/* locked (answered) cards fade back */
.zu-locked { opacity:.5; }
.zu-locked .zu-chip, .zu-locked button { pointer-events:none; cursor:default; }

/* saved (zu-done) view cards: minimized after save, head click toggles detail.
   Controls inside stay disabled forever — a save can never be repeated. */
.zu-done .zu-card-head { cursor:pointer; user-select:none; }
.zu-done .zu-card-head::after {
  content:"›"; margin-left:auto; font-size:17px; color:var(--zu-faint);
  transform:rotate(90deg); transition:transform .25s ease;
}
.zu-done.zu-collapsed .zu-card-head::after { transform:rotate(0deg); }
.zu-done .zu-card-head .zu-pill-saved { margin-left:8px; }
.zu-done.zu-collapsed .zu-card-body { display:none; }
.zu-done.zu-collapsed .zu-card-head { border-bottom:none; }
.zu-done .zu-card-body { opacity:.75; }
.zu-done .zu-card-body input:disabled,
.zu-done .zu-card-body select:disabled,
.zu-done .zu-card-body textarea:disabled { background:transparent; border-color:var(--zu-line); }
.zu-done .zu-card-body button:disabled { display:none; }

/* field grid used by result views */
.zu-fields { display:flex; flex-wrap:wrap; gap:22px; margin-bottom:18px; }
.zu-field { min-width:90px; }
.zu-field-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:var(--zu-faint); margin-bottom:5px; }
.zu-field-value { font-size:15.5px; font-weight:600; color:var(--zu-ink); }
.zu-block-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:var(--zu-faint); margin-bottom:7px; }
.zu-quote {
  background:var(--zu-panel); border-left:3px solid var(--zu-accent); border-radius:0 10px 10px 0;
  padding:13px 16px; font-size:14.5px; line-height:1.55; color:var(--zu-ink);
}
.zu-note-line { font-size:12px; color:var(--zu-faint); margin-top:9px; }

/* db skeleton */
.zu-skel { display:flex; flex-direction:column; gap:9px; }
.zu-skel-bar {
  height:13px; border-radius:7px;
  background-image:linear-gradient(90deg,var(--zu-panel) 0%,#F2ECE1 50%,var(--zu-panel) 100%);
  background-size:600px 100%; animation:zu-shim 1.5s infinite linear;
}

/* thinking dots */
.zu-dots { display:flex; gap:5px; align-items:center; padding:11px 0 2px; }
.zu-dots span { width:7px; height:7px; border-radius:50%; background:var(--zu-faint); animation:zu-dot 1.3s infinite; }

/* ── Bootstrap component overrides, scoped to themed views ─ */
.zu-view .card { border:none !important; border-radius:14px; box-shadow:none; background:var(--zu-panel); }
.zu-view .table { margin:0; }
.zu-view .table > :not(caption) > * > * { background:transparent; border-color:var(--zu-line); color:var(--zu-ink); }
.zu-view .table thead th,
.zu-view .table-light th {
  background:var(--zu-panel); color:var(--zu-faint); font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; border-color:var(--zu-line);
}
.zu-view .table-hover > tbody > tr:hover > * { background:var(--zu-accent-soft); }

.zu-view .form-label { color:var(--zu-soft); font-size:13px; font-weight:600; margin-bottom:6px; }
.zu-view .form-control,
.zu-view .form-select {
  border:1px solid var(--zu-line); border-radius:10px; background:var(--zu-surface);
  color:var(--zu-ink); font-size:14.5px; padding:10px 13px;
}
.zu-view .form-control:focus,
.zu-view .form-select:focus { border-color:var(--zu-accent); box-shadow:0 0 0 3px var(--zu-accent-soft); }
.zu-view .form-control[readonly] { background:var(--zu-panel); color:var(--zu-soft); }
.zu-view .form-check-input:checked { background-color:var(--zu-accent); border-color:var(--zu-accent); }
.zu-view .form-check-input:focus { box-shadow:0 0 0 3px var(--zu-accent-soft); border-color:var(--zu-accent); }

.zu-view .btn { border-radius:12px; font-weight:600; padding:13px; font-size:15px; }
.zu-view .btn-sm { padding:6px 12px; font-size:13px; border-radius:9px; }
.zu-view .btn-primary { background:var(--zu-accent); border-color:var(--zu-accent); }
.zu-view .btn-primary:hover:not(:disabled) { filter:brightness(1.07); background:var(--zu-accent); border-color:var(--zu-accent); }
.zu-view .btn-warning { background:var(--zu-amber); border-color:var(--zu-amber); color:#fff; }
.zu-view .btn-danger  { background:var(--zu-danger); border-color:var(--zu-danger); }
.zu-view .btn-outline-primary { color:var(--zu-accent); border-color:var(--zu-accent); }
.zu-view .btn-outline-primary:hover { background:var(--zu-accent); color:#fff; }
.zu-view .btn:disabled { opacity:.55; }
.zu-view .alert-info { background:var(--zu-accent-soft); border:1px solid var(--zu-accent-tint); color:var(--zu-ink); border-radius:11px; }
.zu-view .stat { font-size:2rem; font-weight:700; }
.zu-view code { color:var(--zu-accent); background:var(--zu-accent-soft); padding:1px 6px; border-radius:5px; }

/* ── Standalone full-page render (non-HTMX execute) ──────── */
.zu-standalone { background:var(--zu-bg); }
.zu-standalone-wrap { max-width:var(--zu-stream-width); margin:0 auto; padding:46px 22px 64px; }

/* Login screen's organization brand column — logo badge + org name, with the
   Zero·UI product mark demoted to a small tag underneath (imported design:
   "Klaipėdos lakštutė login redesign"). */
.zu-login-brand {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; margin-bottom:30px;
}
.zu-login-logo-badge {
  width:96px; height:96px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 26%, #FFFFFF 0%, var(--zu-bg) 70%, var(--zu-bg) 100%);
  box-shadow:0 2px 2px rgba(255,255,255,.95) inset, -3px -3px 5px rgba(255,255,255,.55) inset,
    0 -10px 14px -6px rgba(43,39,34,.12) inset, 4px 6px 9px -4px rgba(43,39,34,.16) inset,
    0 0 24px 6px rgba(250,248,244,1);
}
.zu-login-logo { height:48px; width:auto; flex:none; filter:drop-shadow(0 2px 3px rgba(43,39,34,.18)); }
@keyframes zu-badge-float {
  0% { transform:translate(0,0); }
  25% { transform:translate(2px,-2px); }
  50% { transform:translate(-1px,1px); }
  75% { transform:translate(-2px,-1px); }
  100% { transform:translate(0,0); }
}
.zu-login-logo-badge { animation:zu-badge-float 9s ease-in-out infinite; }
.zu-login-org {
  display:flex; align-items:center; gap:12px; width:100%;
  font-weight:600; font-size:14.5px; color:var(--zu-ink);
  letter-spacing:.14em; text-transform:uppercase;
}
.zu-login-org::before, .zu-login-org::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--zu-bg), var(--zu-line) 50%, var(--zu-bg));
}
.zu-login-brand .zu-mark {
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--zu-faint); cursor:default;
}
.zu-back {
  display:inline-flex; align-items:center; gap:7px; color:var(--zu-soft); text-decoration:none;
  font-size:14px; font-weight:500; margin-bottom:22px;
}
.zu-back:hover { color:var(--zu-accent); }

/* ── Wide content (tables) scrolls inside its own container ─ */
.zu-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Weekly-plan drag-and-drop grid (healthcare/plan-form.html) ──────────
   touch-action:none on chips/cells is required, not decorative — without it
   mobile browsers try to pan/scroll on the same pointerdown our JS uses to
   start a drag or a long-press-to-clear timer, and the two fight each other. */
.zu-plan-grid {
  display:grid; grid-template-columns:140px repeat(5,1fr); gap:1px;
  background:var(--zu-line); border:1px solid var(--zu-line); border-radius:12px;
  overflow:hidden; min-width:640px;
}
.zu-plan-corner, .zu-plan-col-head, .zu-plan-row-head { background:var(--zu-panel); }
.zu-plan-col-head, .zu-plan-row-head {
  padding:8px 10px; font-size:12.5px; font-weight:600; color:var(--zu-soft); display:flex; align-items:center;
}
.zu-plan-row-head { position:sticky; left:0; z-index:1; font-weight:600; color:var(--zu-ink); }
.zu-plan-cell {
  background:var(--zu-surface); min-height:46px; padding:6px 8px; position:relative;
  display:flex; align-items:center; touch-action:none; cursor:pointer;
}
.zu-plan-cell[data-activity-id] { background:var(--zu-accent-tint); }
.zu-plan-cell-label { font-size:12.5px; color:var(--zu-ink); line-height:1.25; padding-right:16px; }
.zu-plan-cell-clear {
  position:absolute; top:3px; right:4px; width:16px; height:16px; line-height:16px; text-align:center;
  border-radius:50%; font-size:12px; color:var(--zu-soft); background:var(--zu-surface);
  opacity:0; transition:opacity .15s ease; cursor:pointer;
}
.zu-plan-cell:hover .zu-plan-cell-clear { opacity:1; }
.zu-plan-cell-clear:hover { background:var(--zu-danger-tint); color:var(--zu-danger); }

.zu-plan-palette { display:flex; flex-wrap:wrap; gap:8px; }
.zu-plan-chip {
  border:1px solid var(--zu-line); background:var(--zu-surface); color:var(--zu-ink);
  font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px; cursor:grab;
  touch-action:none; user-select:none;
}
.zu-plan-chip:hover { background:var(--zu-accent-soft); border-color:var(--zu-accent); }
.zu-plan-chip-ghost {
  position:fixed; z-index:50; pointer-events:none; transform:translate(-50%,-50%);
  box-shadow:var(--zu-shadow); opacity:.92;
}

/* ── Staff↔activity bulk assignment (healthcare/activity-assign.html) ────
   Rows are activities, not weekday cells — each row holds a variable SET of
   assigned staff chips (a staff member can be assigned to several activities
   at once), unlike .zu-plan-*'s one-value-per-cell grid. touch-action:none
   for the same reason as .zu-plan-*: without it, mobile browsers try to pan
   on the same pointerdown our drag/long-press JS uses. */
.zu-assign-row {
  background:var(--zu-surface); border:1px solid var(--zu-line); border-radius:12px;
  padding:10px 12px; margin-bottom:8px; touch-action:none;
}
.zu-assign-row-label { font-size:13px; font-weight:600; color:var(--zu-ink); margin-bottom:6px; }
.zu-assign-row-chips { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; }

.zu-assign-row-chip {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--zu-line); background:var(--zu-accent-tint); color:var(--zu-ink);
  font-size:12.5px; font-weight:500; padding:5px 8px 5px 10px; border-radius:999px;
}
.zu-assign-row-chip-clear {
  width:15px; height:15px; line-height:15px; text-align:center; border-radius:50%;
  font-size:11px; color:var(--zu-soft); background:var(--zu-surface);
  opacity:0; transition:opacity .15s ease; cursor:pointer;
}
.zu-assign-row-chip:hover .zu-assign-row-chip-clear { opacity:1; }
.zu-assign-row-chip-clear:hover { background:var(--zu-danger-tint); color:var(--zu-danger); }

.zu-assign-palette { display:flex; flex-wrap:wrap; gap:8px; }
.zu-assign-chip {
  border:1px solid var(--zu-line); background:var(--zu-surface); color:var(--zu-ink);
  font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px; cursor:grab;
  touch-action:none; user-select:none;
}
.zu-assign-chip:hover { background:var(--zu-accent-soft); border-color:var(--zu-accent); }
.zu-assign-chip-ghost {
  position:fixed; z-index:50; pointer-events:none; transform:translate(-50%,-50%);
  box-shadow:var(--zu-shadow); opacity:.92;
}

@media (max-width: 480px) {
  .zu-plan-grid { grid-template-columns:104px repeat(5,minmax(78px,1fr)); }
  .zu-plan-cell-label { font-size:11.5px; }
}

/* ── Phone layout (PWA) ──────────────────────────────────────
   The app installs to home screens (see manifest.webmanifest);
   these rules make the chat shell fit a 360–480px viewport. */
@media (max-width: 480px) {
  .zu-header { padding:0 12px; height:58px; gap:6px; }
  .zu-header-right { gap:7px !important; }
  .zu-mark { font-size:16px; }
  /* Widest chip by far ("🚩 Pranešti apie klaidą") — dropping its label to
     icon-only is what actually gets "Iš naujo" back within reach on phones,
     rather than relying solely on the header-right horizontal scroll. */
  #zu-problem-report .zu-chip-label { display:none; }
  #zu-problem-report { padding:6px 9px; }
  .zu-whoami .zu-pill { display:none; }          /* role pill — name is enough */
  .zu-whoami strong { max-width:96px; display:inline-block; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
  .zu-chip-btn { padding:6px 9px; font-size:12px; gap:6px; }
  .zu-chip-btn kbd { display:none; }             /* Esc hint is keyboard-only anyway */

  .zu-thread { padding:78px 12px 162px; }
  .zu-user .bubble { max-width:90%; font-size:14.5px; }
  .zu-sys { gap:9px; }
  .zu-avatar { width:26px; height:26px; }

  .zu-card-head { padding:13px 14px; gap:9px; }
  .zu-card-body { padding:15px 14px; }
  .zu-card-foot { padding:0 14px 15px; }
  .zu-glyph { width:32px; height:32px; }
  .zu-fields { gap:14px; }

  .zu-dock { width:min(var(--zu-stream-width), 96vw); }
  .zu-greeting h1 { font-size:25px; }
  .zu-greeting p { font-size:14px; }
  .zu-composer { padding:6px 6px 6px 14px; }

  .zu-standalone-wrap { padding:28px 14px 48px; }
}

/* ── pending-account picker (healthcare/account-activate-form.html) ──────
   CSS-only "show more" — no JS, so it works regardless of script-execution
   timing inside an HTMX-swapped fragment. The checkbox must be the FIRST
   child of .zu-pending-list so the general sibling combinator (~) reaches
   every row and the toggle label that follow it. */
.zu-pending-list { display:flex; flex-direction:column; gap:2px; }
.zu-pending-row {
  display:flex; align-items:center; gap:10px; padding:9px 4px; cursor:pointer;
  border-radius:10px; font-size:14.5px;
}
.zu-pending-row:hover { background:var(--zu-panel); }
.zu-pending-row input[type="radio"] { flex:none; accent-color:var(--zu-accent); }
/* Disambiguates two pending accounts sharing a full name (full_name has no
   uniqueness constraint on purpose — username is the only field that does). */
.zu-pending-username { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--zu-faint); }
.zu-pending-toggle:not(:checked) ~ .zu-pending-extra { display:none; }
.zu-pending-more-btn {
  color:var(--zu-accent); font-size:13px; font-weight:600; cursor:pointer;
  padding:8px 4px 2px; display:inline-block;
}
.zu-pending-toggle:checked ~ .zu-pending-more-btn { display:none; }

/* ── photo gallery: thumbnails + fullscreen viewer ──────────── */
.zu-photo-thumb { cursor:pointer; }
.zu-photo-header { color:var(--zu-soft); font-size:14px; margin-bottom:10px; }

.zu-photo-viewer {
  position:fixed; inset:0; z-index:1050; background:rgba(20,18,15,.92);
  display:flex; align-items:center; justify-content:center;
}
.zu-pv-img { max-width:92vw; max-height:88vh; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.zu-pv-close {
  position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.zu-pv-close:hover { background:rgba(255,255,255,.22); }
.zu-pv-zone {
  position:absolute; top:0; bottom:0; width:33%; cursor:pointer;
  display:flex; align-items:center; background:transparent; border:none;
}
.zu-pv-prev { left:0; justify-content:flex-start; }
.zu-pv-next { right:0; justify-content:flex-end; }
.zu-pv-zone::before {
  content:''; width:44px; height:44px; margin:0 14px; border-radius:50%;
  background:rgba(255,255,255,.12) center/20px no-repeat;
  opacity:0; transition:opacity .2s ease;
}
.zu-pv-prev::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.zu-pv-next::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
.zu-pv-zone:hover::before { opacity:1; }
.zu-pv-counter {
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  color:#fff; font-size:13px; letter-spacing:.04em; background:rgba(255,255,255,.12);
  padding:5px 12px; border-radius:20px;
}

@media (max-width:576px) {
  .zu-pv-close { top:10px; right:10px; width:36px; height:36px; font-size:20px; }
  .zu-pv-zone::before { width:38px; height:38px; margin:0 6px; }
}

/* ── keyframes ───────────────────────────────────────────── */
@keyframes zu-dot   { 0%,80%,100%{opacity:.2;transform:translateY(0);} 40%{opacity:1;transform:translateY(-3px);} }
@keyframes zu-pulse { 0%,100%{opacity:.35;} 50%{opacity:1;} }
@keyframes zu-shim  { 0%{background-position:-220px 0;} 100%{background-position:360px 0;} }

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