/* ============================================================
   Kidora Cross-Cutting Polish (Phase 11)
   ------------------------------------------------------------
   Final pass over toasts, empty/loading states, scrollbars,
   skip link, mobile sidebar drawer chrome. Everything below
   was scattered across the inline CSS in dark-mode form;
   this pulls each into the new token system.
   ============================================================ */

/* ============================================================
   Skip link — visible on focus, sky pill
   ============================================================ */
[data-design="storybook"] .k-skip:focus {
  left: 12px;
  top: 12px;
  width: auto;
  padding: 10px 18px;
  background: var(--k-sky);
  color: var(--k-ink-on-color);
  border-radius: var(--k-r-md);
  font-family: var(--k-font-sans);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--k-shadow);
}

/* ============================================================
   Toasts — unify the 3 different toast styles in use
   (.k-toast, #at-toast, .fire-toast) onto one look.
   ============================================================ */
[data-design="storybook"] #at-toast,
[data-design="storybook"] .fire-toast,
[data-design="sunny"] #at-toast,
[data-design="sunny"] .fire-toast {
  background: var(--k-ink);
  color: var(--k-ink-on-color);
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: var(--k-r-pill);
  box-shadow: var(--k-shadow);
  letter-spacing: 0.01em;
}

[data-design="storybook"] .k-toast {
  background: var(--k-surface);
  color: var(--k-ink);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  box-shadow: var(--k-shadow);
  font-family: var(--k-font-sans);
}
[data-design="storybook"] .k-toast[data-tone="success"] { border-left-color: var(--k-good); }
[data-design="storybook"] .k-toast[data-tone="danger"]  { border-left-color: var(--k-bad); }
[data-design="storybook"] .k-toast[data-tone="warning"] { border-left-color: var(--k-warn); }
[data-design="storybook"] .k-toast__icon { color: var(--k-good); }
[data-design="storybook"] .k-toast[data-tone="danger"]  .k-toast__icon { color: var(--k-bad); }
[data-design="storybook"] .k-toast[data-tone="warning"] .k-toast__icon { color: var(--k-warn); }
[data-design="storybook"] .k-toast__body { color: var(--k-ink); }
[data-design="storybook"] .k-toast__action {
  color: var(--k-sky);
  font-family: var(--k-font-sans);
  font-weight: 800;
}

/* ============================================================
   Skeleton loaders — light bg pulse
   ============================================================ */
[data-design="storybook"] .k-skeleton {
  background: linear-gradient(
    90deg,
    var(--k-bg-alt) 0%,
    var(--k-surface-tint) 50%,
    var(--k-bg-alt) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--k-r-sm);
}

/* ============================================================
   Empty / loading state primitives
   ============================================================ */
[data-design="storybook"] .k-state {
  color: var(--k-ink);
  font-family: var(--k-font-sans);
}
[data-design="storybook"] .k-state[data-tone="danger"]  .k-state__icon { background: var(--k-bad-soft);  color: var(--k-bad); }
[data-design="storybook"] .k-state[data-tone="neutral"] .k-state__icon { background: var(--k-bg-alt);   color: var(--k-ink-muted); }
[data-design="storybook"] .k-state[data-tone="success"] .k-state__icon { background: var(--k-good-soft); color: var(--k-good); }
[data-design="storybook"] .k-state[data-tone="warning"] .k-state__icon { background: var(--k-warn-soft); color: var(--k-warn); }
[data-design="storybook"] .k-state__title { color: var(--k-ink); font-family: var(--k-font-display); font-weight: 800; }
[data-design="storybook"] .k-state__body  { color: var(--k-ink-soft); }

/* Generic ".dp-loading", ".fire-empty", ".cscore-loading" already in
   their respective sweep files. This covers anything that slipped through. */
[data-design="storybook"] [class*="empty"]:not(.dp-empty):not(.fire-empty),
[data-design="storybook"] [class*="loading"]:not(.dp-loading):not(.cscore-loading) {
  color: var(--k-ink-muted);
}

/* ============================================================
   Scrollbars — thin, neutral on light surface
   ============================================================ */
[data-design="storybook"] #messages::-webkit-scrollbar { width: 6px; }
[data-design="storybook"] #messages::-webkit-scrollbar-track { background: transparent; }
[data-design="storybook"] #messages::-webkit-scrollbar-thumb {
  background: var(--k-line-strong);
  border-radius: var(--k-r-pill);
}
[data-design="storybook"] #messages::-webkit-scrollbar-thumb:hover { background: var(--k-ink-muted); }

[data-design="storybook"] #sidebar { scrollbar-width: thin; scrollbar-color: var(--k-line-strong) transparent; }
[data-design="storybook"] #sidebar::-webkit-scrollbar { width: 6px; }
[data-design="storybook"] #sidebar::-webkit-scrollbar-track { background: transparent; }
[data-design="storybook"] #sidebar::-webkit-scrollbar-thumb {
  background: var(--k-line-strong);
  border-radius: var(--k-r-pill);
}

[data-design="storybook"] .modal-body::-webkit-scrollbar,
[data-design="storybook"] .fire-body::-webkit-scrollbar,
[data-design="storybook"] .ocfs-body::-webkit-scrollbar,
[data-design="storybook"] .cscore-body::-webkit-scrollbar { width: 6px; }
[data-design="storybook"] .modal-body::-webkit-scrollbar-thumb,
[data-design="storybook"] .fire-body::-webkit-scrollbar-thumb,
[data-design="storybook"] .ocfs-body::-webkit-scrollbar-thumb,
[data-design="storybook"] .cscore-body::-webkit-scrollbar-thumb {
  background: var(--k-line-strong);
  border-radius: var(--k-r-pill);
}

/* ============================================================
   Mobile sidebar drawer
   ============================================================ */
@media (max-width: 900px) {
  [data-design="storybook"] #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 400;
    transform: translateX(-100%);
    transition: transform var(--k-dur-base) var(--k-ease);
    box-shadow: var(--k-shadow-lg);
  }
  [data-design="storybook"] #sidebar.open,
  [data-design="storybook"] #sidebar[data-open="true"] {
    transform: translateX(0);
  }
  [data-design="storybook"] #sb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 34, 56, 0.36);
    backdrop-filter: blur(2px);
    z-index: 300;
    /* iOS Safari only synthesizes click events from touch on elements it
       considers "interactive". For a non-button <div> with just an
       onclick attribute, this means cursor:pointer MUST be set or the
       tap silently dies (visible as "I tap the chat side but nothing
       happens"). Real bug reported on iPhone 2026-05-23 — desktop +
       Android Chrome worked because they don't have this quirk. */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* The legacy toggleSidebar JS adds class `.show` on the backdrop while the
     sidebar itself uses `.open` (storybook's preferred convention). Match
     both class names here so the backdrop becomes visible AND clickable
     when the sidebar opens — without this, tapping the right-side chat
     strip on mobile fell through to #messages instead of closeSidebar(),
     leaving owners no way back to the chat view. */
  [data-design="storybook"] #sb-backdrop.open,
  [data-design="storybook"] #sb-backdrop.show,
  [data-design="storybook"] #sb-backdrop[data-open="true"] { display: block; }

  [data-design="storybook"] .sb-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 40px;
    height: 40px;
    padding: 0 13px 0 11px;
    border-radius: var(--k-r-md);
    background: var(--k-bg-alt);
    color: var(--k-ink);
    border: none;
    font-size: 20px;
  }
  /* Visible "Menu" label so a non-technical owner recognizes the bare ☰ as
     "everything else lives here" (the sidebar holds Payments/Staff/OCFS). The
     toggle is display:none on desktop, so this only ever shows on mobile. */
  [data-design="storybook"] .sb-toggle .sb-toggle-label { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
  [data-design="storybook"] .sb-toggle:hover { background: var(--k-sky-soft); color: var(--k-sky); }

  [data-design="storybook"] .sb-close {
    display: block;
    background: var(--k-bg-alt);
    color: var(--k-ink-soft);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 0 12px auto;
    border: none;
    font-size: 18px;
    text-align: center;
    line-height: 1;
  }
  [data-design="storybook"] .sb-close:hover { background: var(--k-bad-soft); color: var(--k-bad); }
}

/* ============================================================
   Sabrina avatar SVG color helpers — make sure rim/face/cheeks
   pull from new tokens (avatar SVGs may inherit currentColor).
   ============================================================ */
[data-design="storybook"] .msg-avatar svg,
[data-design="sunny"] .msg-avatar svg {
  color: var(--k-coral);
}

/* ============================================================
   Focus rings — consistent everywhere
   ============================================================ */
[data-design="storybook"] :focus-visible,
[data-design="sunny"] :focus-visible {
  outline: 3px solid var(--k-primary-soft);
  outline-offset: 2px;
  border-radius: var(--k-r-sm);
}

/* ============================================================
   Reduced motion respect — kill keyframe animations and slow
   transitions, but keep fast state transitions so hover/focus
   feedback still feels responsive (just instant instead of eased).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="storybook"] *,
  [data-design="sunny"] * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* Cap, don't zero, transition duration — state changes stay visible
       (button hover, focus ring, modal close) but with no easing curve. */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Stop the Tablet Mode goat from walking — decorative loop */
  [data-design="storybook"] #tablet-overlay .goat-scene *,
  [data-design="storybook"] #tablet-overlay .goat-strip * {
    animation: none !important;
  }
}

/* ============================================================
   Print — strip dark backgrounds, keep ink readable
   ============================================================ */
@media print {
  [data-design="storybook"] body,
  [data-design="sunny"] body {
    background: #fff !important;
    color: #000 !important;
  }
  [data-design="storybook"] #sidebar,
  [data-design="storybook"] .topbar,
  [data-design="storybook"] .quick-bar,
  [data-design="storybook"] .input-bar,
  [data-design="storybook"] .input-hint { display: none !important; }
}