/* ---------- Rooster — gedeelde styles ----------
 * Mobile-first, modern, kalme teal + warm accent.
 */

:root {
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --ink: #0F172A;
  --ink-muted: #475569;
  --ink-faint: #94A3B8;

  --primary: #0F766E;        /* teal-700 */
  --primary-deep: #115E59;   /* teal-800 */
  --primary-soft: #CCFBF1;   /* teal-100 */
  --primary-ghost: rgba(15,118,110,.08);

  --accent: #F59E0B;
  --accent-soft: #FEF3C7;

  --avail: #15803D;
  --avail-bg: #DCFCE7;
  --avail-border: #BBF7D0;

  --pref: #B45309;
  --pref-bg: #FEF3C7;
  --pref-border: #FDE68A;

  --unavail: #B91C1C;
  --unavail-bg: #FEE2E2;
  --unavail-border: #FECACA;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.05);
  --shadow: 0 4px 12px -4px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 18px 40px -16px rgba(15,23,42,.18);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ---------- layout ---------- */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
}
.app-bar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background .15s ease;
}
.app-bar a.brand:hover { background: var(--surface-soft); }
.app-bar a.brand:hover .brand-mark { transform: scale(1.04); }
.app-bar .brand-mark { transition: transform .15s ease; }
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), #14B8A6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: -.02em;
}
.brand-name { font-size: 16px; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .12em; }
.app-bar .spacer { flex: 1; }

/* ---------- mock user-switcher (demo-pill) ---------- */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.user-pill:hover { border-color: var(--border-strong); }
.user-pill .avatar { width: 26px; height: 26px; font-size: 10px; }
.user-pill .chev { font-size: 11px; color: var(--ink-faint); margin-right: 4px; }
.demo-tag {
  background: var(--accent-soft);
  color: #92400E;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}

/* ---------- main content ---------- */
.main {
  flex: 1;
  padding: 16px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px; /* ruimte voor sticky bottom-nav */
}
.main.wide {
  max-width: 1080px;
}

/* ---------- headings ---------- */
h1.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.page-sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin: 22px 0 10px;
}

/* ---------- card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 12px; }
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.card-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ---------- avatar ---------- */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(15,118,110,.55);
}
.btn-primary:hover { background: var(--primary-deep); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-soft); }
.btn-link {
  background: transparent;
  color: var(--primary);
  border: none;
  padding: 6px 8px;
  font-weight: 600;
}
.btn-link:hover { color: var(--primary-deep); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 22px; font-size: 15px; }

/* ---------- segmented tabs ---------- */
.tabs {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tab.active {
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.tab:hover:not(.active) { background: var(--surface-soft); }

/* ---------- calendar ---------- */
.cal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.cal-header span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-day {
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cal-day .day-n { font-size: 14px; line-height: 1; }
.cal-day .day-st {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}
.cal-day.empty { visibility: hidden; }
.cal-day:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.cal-day.past { opacity: .35; cursor: default; }
.cal-day.past:hover { transform: none; border-color: var(--border); }
.cal-day.today { box-shadow: 0 0 0 3px rgba(15,118,110,.18); }

.cal-day.available { background: var(--avail-bg); border-color: var(--avail-border); color: var(--avail); }
.cal-day.preferno  { background: var(--pref-bg);  border-color: var(--pref-border);  color: var(--pref); }
.cal-day.unavailable { background: var(--unavail-bg); border-color: var(--unavail-border); color: var(--unavail); }
.cal-day.scheduled::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.cal-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- status keuze (dialog) ---------- */
.day-sheet {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--surface);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 22px 18px 28px;
  box-shadow: 0 -10px 30px -10px rgba(15,23,42,.18);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 80;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.day-sheet.show { transform: translateY(0); }
.day-sheet-grip {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 99px;
  margin: -8px auto 16px;
}
.day-sheet h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.choice-row { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.choice.available { color: var(--avail); border-color: var(--avail-border); background: var(--avail-bg); }
.choice.preferno  { color: var(--pref);  border-color: var(--pref-border);  background: var(--pref-bg); }
.choice.unavailable { color: var(--unavail); border-color: var(--unavail-border); background: var(--unavail-bg); }
.choice.clear { color: var(--ink-muted); }
.choice .ic { font-size: 18px; }

.backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.4);
  z-index: 70;
  display: none;
}
.backdrop.show { display: block; }

/* ---------- shift card ---------- */
.shift {
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.shift + .shift { margin-top: 10px; }
.shift-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.shift-name {
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; gap: 6px;
}
.shift-time {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.shift-people {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.person-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
}
.person-chip.removable { padding-right: 4px; }
.person-chip .x {
  border: none; background: transparent;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-muted);
  cursor: pointer;
}
.person-chip .x:hover { background: var(--unavail-bg); color: var(--unavail); }
.person-chip.empty {
  color: var(--ink-faint);
  border-style: dashed;
  font-style: italic;
}

/* ---------- progress bar ---------- */
.bar {
  height: 8px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #14B8A6);
  border-radius: 99px;
  transition: width .35s ease;
}

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-avail { background: var(--avail-bg); color: var(--avail); }
.badge-pref  { background: var(--pref-bg);  color: var(--pref); }
.badge-unavail { background: var(--unavail-bg); color: var(--unavail); }
.badge-warn { background: var(--accent-soft); color: #92400E; }
.badge-info { background: var(--primary-soft); color: var(--primary-deep); }
.badge-muted { background: var(--surface-soft); color: var(--ink-muted); border: 1px solid var(--border); }

/* ---------- list row ---------- */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.row + .row { border-top: 1px solid var(--border); }
.row .grow { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-size: 14px; }
.row-sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translateX(-50%) translateY(120px);
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  max-width: 360px;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- modal (publish-preview) ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal.show { display: flex; }
.modal-card {
  background: var(--surface);
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-head { padding: 18px 20px 8px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

.mail {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
}
.mail + .mail { margin-top: 10px; }
.mail-head { font-weight: 600; margin-bottom: 6px; }
.mail-meta { font-size: 11px; color: var(--ink-muted); margin-bottom: 8px; }
.mail-body { white-space: pre-wrap; font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--ink-muted); line-height: 1.55; }

/* ---------- bottom-nav (mobile employee) ---------- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 8px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 30;
}
.bottom-nav button {
  background: transparent;
  border: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
}
.bottom-nav button.active { color: var(--primary); }
.bottom-nav button .ic { font-size: 18px; }

/* ---------- form inputs ---------- */
.form-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,118,110,.15);
}
.form-input[type="date"] { font-variant-numeric: tabular-nums; }
textarea.form-input { resize: vertical; min-height: 60px; line-height: 1.5; }

/* ---------- balance card visual ---------- */
.balance {
  background: linear-gradient(135deg, var(--primary), #14B8A6);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 8px 24px -10px rgba(15,118,110,.5);
}
.balance .b-label { font-size: 12px; opacity: .9; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.balance .b-main { font-size: 32px; font-weight: 700; line-height: 1.1; margin-top: 6px; letter-spacing: -.02em; }
.balance .b-sub { font-size: 13px; opacity: .85; margin-top: 4px; }
.balance .b-bar { height: 6px; background: rgba(255,255,255,.22); border-radius: 99px; overflow: hidden; margin-top: 14px; }
.balance .b-bar > span { display: block; height: 100%; background: #fff; border-radius: 99px; }

/* ---------- request card ---------- */
.req {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.req + .req { margin-top: 10px; }
.req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.req-range { font-weight: 600; font-size: 14px; }
.req-note { font-size: 13px; color: var(--ink-muted); margin-top: 3px; line-height: 1.45; }
.req-meta { font-size: 11px; color: var(--ink-faint); margin-top: 6px; }
.req-actions { display: flex; gap: 8px; margin-top: 12px; }
.req-actions .btn { flex: 1; padding: 9px 12px; font-size: 13px; }
.btn-approve { background: var(--avail); color: #fff; }
.btn-approve:hover { background: #166534; }
.btn-reject { background: var(--surface); color: var(--unavail); border: 1.5px solid var(--unavail-border); }
.btn-reject:hover { background: var(--unavail-bg); }

/* ---------- reminder banner ---------- */
.banner {
  background: var(--accent-soft);
  border: 1px solid #FDE68A;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.banner .b-ic { font-size: 22px; flex-shrink: 0; }
.banner .b-txt { flex: 1; min-width: 0; }
.banner .b-title { font-weight: 600; color: #92400E; font-size: 14px; }
.banner .b-sub { font-size: 12px; color: #B45309; }

/* ---------- rol-badge ---------- */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px 2px 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: .02em;
  white-space: nowrap;
}
.role-badge.role-bediening { background: #DBEAFE; border-color: #BFDBFE; color: #1D4ED8; }
.role-badge.role-keuken    { background: #FFEDD5; border-color: #FED7AA; color: #C2410C; }
.role-badge.role-bar       { background: #EDE9FE; border-color: #DDD6FE; color: #6D28D9; }
.role-badge.role-allround  { background: var(--surface-soft); border-color: var(--border); color: var(--ink-muted); }

/* ---------- swap-aanbod card (werknemer-zijde) ---------- */
.swap-offer {
  background: var(--surface);
  border: 1.5px dashed var(--accent);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.swap-offer + .swap-offer { margin-top: 10px; }
.swap-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: #92400E;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- helpers ---------- */
.hstack { display: flex; align-items: center; gap: 8px; }
.vstack { display: flex; flex-direction: column; gap: 8px; }
.spacer-12 { height: 12px; }
.spacer-24 { height: 24px; }
.muted { color: var(--ink-muted); }
.right { margin-left: auto; }
.center { text-align: center; }
.text-sm { font-size: 13px; }
.hidden { display: none !important; }
.text-mono { font-variant-numeric: tabular-nums; }

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .main.wide { padding: 32px; }
  .main.wide h1.page-title { font-size: 28px; }
  .cal-day { font-size: 15px; }
}

/* User-switcher menu (demo) */
.switcher {
  position: absolute;
  top: 60px; right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 40;
  display: none;
  min-width: 240px;
}
.switcher.show { display: block; }
.switcher .row {
  border: none !important;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.switcher .row:hover { background: var(--surface-soft); }
.switcher .row.current { background: var(--primary-ghost); }
.switcher-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--ink-faint);
  padding: 8px 10px 4px;
}

/* Day card op werkgever-scherm (per-dag-planning) */
.day-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.day-card + .day-card { margin-top: 10px; }
.day-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.day-card-date { font-weight: 700; font-size: 15px; }
.day-card-meta { font-size: 11px; color: var(--ink-muted); }

/* Selector (om iemand aan een dienst toe te voegen) */
.add-picker {
  position: relative;
  display: inline-block;
}
.add-trigger {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.add-trigger:hover { background: var(--primary-ghost); border-color: var(--primary); }
.add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 240px;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
}
.add-menu .opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.add-menu .opt:hover { background: var(--surface-soft); }
.add-menu .opt.blocked {
  opacity: .5; cursor: not-allowed;
}
.add-menu .opt.blocked:hover { background: transparent; }
.add-menu .opt-note { font-size: 11px; color: var(--ink-muted); }
.add-menu-empty { padding: 12px; color: var(--ink-muted); font-size: 13px; text-align: center; }