/* ==========================================================================
   Coffer Brand Layer — Backstage-flavored Operational Intelligence Platform
   --------------------------------------------------------------------------
   Loaded AFTER Sure's compiled tailwind so we win the cascade.
   Strategy: redefine Sure's semantic tokens to map to a cool-slate OKLCH
   palette in dark mode, then add Coffer-specific component skinning.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Force dark theme + cool-slate token overrides
   -------------------------------------------------------------------------- */

:root,
:host,
[data-theme="dark"],
[data-theme="system"] {
  /* Cool-slate canvas (Backstage exact values) */
  --color-gray-25:  oklch(0.21  0.006 286);
  --color-gray-50:  oklch(0.18  0.006 286);
  --color-gray-100: oklch(0.22  0.006 286);
  --color-gray-200: oklch(0.27  0.006 286);
  --color-gray-300: oklch(0.34  0.006 286);
  --color-gray-400: oklch(0.55  0.012 286);
  --color-gray-500: oklch(0.66  0.012 286);
  --color-gray-600: oklch(0.74  0.010 286);
  --color-gray-700: oklch(0.32  0.006 286);
  --color-gray-800: oklch(0.20  0.006 286);
  --color-gray-900: oklch(0.141 0.005 285.823);

  /* Semantic surfaces — slate cards on near-black canvas */
  --coffer-canvas:    oklch(0.141 0.005 285.823);
  --coffer-card:      rgb(15 23 42 / 0.40);     /* slate-900 / 40 */
  --coffer-card-edge: rgb(255 255 255 / 0.05);
  --coffer-elevated:  rgb(15 23 42 / 0.65);

  /* Brand blue (indigo accent from Backstage) */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Tone semantic remaps */
  --color-primary: var(--color-blue-600);
  --coffer-emerald: 16,185,129;
  --coffer-red:     239,68,68;
  --coffer-amber:   245,158,11;
  --coffer-blue:    59,130,246;
  --coffer-slate:   100,116,139;
}

/* --------------------------------------------------------------------------
   2. Force dark theme everywhere (override theme=system that resolves light)
   -------------------------------------------------------------------------- */

html { color-scheme: dark; }

html:not([data-theme="dark"]) {
  /* If not explicitly dark, still apply our overrides via :root above.
     We also flip text colors for light theme so light readers still see Coffer. */
}

/* Body canvas — black slate, never pure black */
:where(html, body) {
  background-color: var(--coffer-canvas) !important;
  color: rgb(255 255 255 / 0.92);
}

/* --------------------------------------------------------------------------
   3. Re-skin Sure's surface/container utilities
   -------------------------------------------------------------------------- */

:where(.bg-surface) { background-color: var(--coffer-canvas) !important; }
:where(.bg-surface-inset, .bg-surface-inset-hover:hover) { background-color: rgb(255 255 255 / 0.04) !important; }
:where(.bg-container) {
  background-color: var(--coffer-card) !important;
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
}
:where(.bg-container-inset) { background-color: rgb(255 255 255 / 0.04) !important; }

/* Borders — barely-there white at low opacity */
:where(.border, .border-primary, .border-secondary, .border-tertiary) {
  border-color: var(--coffer-card-edge) !important;
}
:where(.shadow-border-xs, .shadow-border-sm) {
  box-shadow: inset 0 0 0 1px var(--coffer-card-edge) !important;
}

/* Text colors */
:where(.text-primary)    { color: rgb(255 255 255 / 0.95) !important; }
:where(.text-secondary)  { color: rgb(255 255 255 / 0.55) !important; }
:where(.text-tertiary)   { color: rgb(255 255 255 / 0.40) !important; }
:where(.text-inverse)    { color: #ffffff !important; }
:where(.text-destructive){ color: rgb(var(--coffer-red)) !important; }

/* --------------------------------------------------------------------------
   4. Cards — rounded-3xl panels with backdrop-blur
   -------------------------------------------------------------------------- */

:where(.bg-container, .bg-container-inset),
:where([class*="rounded-xl"].bg-container),
:where(.shadow-border-xs.bg-container) {
  border-radius: 1.5rem !important;            /* 24px ~ rounded-3xl */
  border: 1px solid var(--coffer-card-edge);
}

/* Smaller "tile" components keep their existing radius but get the dark fill */
:where(.rounded-md, .rounded-lg) {
  /* leave radii alone — only re-skin */
}

/* --------------------------------------------------------------------------
   5. Labels + headings — Backstage font-black uppercase tracking-widest
   -------------------------------------------------------------------------- */

:where(.form-field__label, label[for], dt, .label, [class*="__label"]) {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgb(255 255 255 / 0.55) !important;
}

/* But NOT every label — leave button labels and inline checkbox labels alone */
:where(button label, .btn label, label.inline) {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Big stat-style values (used on dashboard amounts) */
:where(.tabular-nums, output, [class*="amount"], [class*="balance"], [class*="-value"]) {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   6. Form inputs — dark surface, blue focus ring
   -------------------------------------------------------------------------- */

:where(.form-field) {
  border-radius: 0.875rem !important;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid var(--coffer-card-edge);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
:where(.form-field):focus-within {
  border-color: rgb(var(--coffer-blue) / 0.45);
  box-shadow: 0 0 0 3px rgb(var(--coffer-blue) / 0.18);
  background: rgb(255 255 255 / 0.05);
}
:where(.form-field__body) {
  padding: 0.625rem 0.875rem;
}
:where(.form-field__label) {
  margin-bottom: 0.25rem;
  display: block;
}
:where(.form-field__input,
       input[type="text"],
       input[type="email"],
       input[type="password"],
       input[type="number"],
       input[type="search"],
       input[type="url"],
       input[type="tel"],
       input[type="date"],
       textarea,
       select) {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  font-size: 0.9375rem;
}
:where(.form-field__input)::placeholder,
:where(input)::placeholder,
:where(textarea)::placeholder {
  color: rgb(255 255 255 / 0.30) !important;
}

/* Standalone inputs (no .form-field wrapper) get their own dark skin */
:where(input:not(.form-field__input):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
       textarea:not(.form-field__input),
       select:not(.form-field__input)) {
  background: rgb(255 255 255 / 0.03) !important;
  border: 1px solid var(--coffer-card-edge) !important;
  border-radius: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   7. Primary buttons — indigo blue, rounded-xl, font-black uppercase
   -------------------------------------------------------------------------- */

:where(button[type="submit"],
       .btn-primary,
       [data-variant="primary"],
       a.bg-inverse,
       button.bg-inverse,
       .bg-inverse:where(button, a)) {
  background: var(--color-blue-600) !important;
  color: #fff !important;
  border-radius: 0.875rem !important;
  height: 2.5rem;
  padding: 0 1.125rem !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 18px rgb(var(--coffer-blue) / 0.25);
  transition: background 200ms ease, box-shadow 200ms ease, transform 80ms ease;
}
:where(button[type="submit"],
       .btn-primary,
       [data-variant="primary"],
       a.bg-inverse,
       button.bg-inverse):hover {
  background: var(--color-blue-700) !important;
  box-shadow: 0 0 24px rgb(var(--coffer-blue) / 0.40);
}
:where(button[type="submit"]):active { transform: translateY(1px); }

/* Hover/state on Sure's bg-inverse-hover */
:where(.bg-inverse-hover):hover { background-color: var(--color-blue-700) !important; }

/* Destructive variant keeps red */
:where([data-variant="destructive"]) {
  background: rgb(var(--coffer-red)) !important;
  box-shadow: 0 0 18px rgb(var(--coffer-red) / 0.30);
}

/* Outline / secondary buttons */
:where([data-variant="outline-destructive"], .btn-outline) {
  background: transparent !important;
  border: 1px solid var(--coffer-card-edge) !important;
  color: rgb(255 255 255 / 0.85) !important;
  border-radius: 0.875rem !important;
}

/* --------------------------------------------------------------------------
   8. Lit pill status badges
   -------------------------------------------------------------------------- */

.coffer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid;
  ring: 1px inset;
}
.coffer-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.coffer-pill--emerald {
  color: #6ee7b7;
  background: rgb(var(--coffer-emerald) / 0.15);
  border-color: rgb(var(--coffer-emerald) / 0.40);
  box-shadow: 0 0 10px rgb(var(--coffer-emerald) / 0.25), inset 0 0 0 1px rgb(var(--coffer-emerald) / 0.30);
}
.coffer-pill--blue {
  color: #93c5fd;
  background: rgb(var(--coffer-blue) / 0.15);
  border-color: rgb(var(--coffer-blue) / 0.40);
  box-shadow: 0 0 10px rgb(var(--coffer-blue) / 0.25), inset 0 0 0 1px rgb(var(--coffer-blue) / 0.30);
}
.coffer-pill--amber {
  color: #fcd34d;
  background: rgb(var(--coffer-amber) / 0.15);
  border-color: rgb(var(--coffer-amber) / 0.40);
  box-shadow: 0 0 10px rgb(var(--coffer-amber) / 0.25), inset 0 0 0 1px rgb(var(--coffer-amber) / 0.30);
}
.coffer-pill--red {
  color: #fca5a5;
  background: rgb(var(--coffer-red) / 0.15);
  border-color: rgb(var(--coffer-red) / 0.40);
  box-shadow: 0 0 10px rgb(var(--coffer-red) / 0.25), inset 0 0 0 1px rgb(var(--coffer-red) / 0.30);
}
.coffer-pill--slate {
  color: rgb(255 255 255 / 0.65);
  background: rgb(var(--coffer-slate) / 0.15);
  border-color: rgb(var(--coffer-slate) / 0.40);
  box-shadow: 0 0 10px rgb(var(--coffer-slate) / 0.25), inset 0 0 0 1px rgb(var(--coffer-slate) / 0.30);
}

/* Sure's existing pill-shaped tags get the slate treatment by default */
:where([class*="badge"], [class*="status"], [class*="pill"], [class*="tag"]):not(.coffer-pill):not([class*="badge-cell"]) {
  border-radius: 9999px;
}

/* --------------------------------------------------------------------------
   9. Top tabs (when present)
   -------------------------------------------------------------------------- */

.coffer-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
  background: transparent;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.coffer-tab:hover { color: #fff; background: rgb(255 255 255 / 0.04); }
.coffer-tab[data-state="active"],
.coffer-tab.active {
  background: var(--color-blue-600);
  color: #fff;
  box-shadow: 0 0 18px rgb(var(--coffer-blue) / 0.35);
}

/* --------------------------------------------------------------------------
   10. Coffer wordmark
   -------------------------------------------------------------------------- */

.coffer-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  text-decoration: none;
}
.coffer-wordmark__name {
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #fff;
}
.coffer-wordmark__tagline {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.20);
}

/* --------------------------------------------------------------------------
   11. Ring colors
   -------------------------------------------------------------------------- */

:where(*:focus-visible) {
  outline-color: rgb(var(--coffer-blue) / 0.55) !important;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Cockpit aliveness — keyframes + utility classes
   -------------------------------------------------------------------------- */

@keyframes coffer-stat-pulse {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.12; }
}
@keyframes coffer-status-running {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}
@keyframes coffer-status-broken {
  0%, 100% { box-shadow: 0 0 4px  rgb(var(--coffer-red) / 0.45), inset 0 0 0 1px rgb(var(--coffer-red) / 0.40); }
  50%      { box-shadow: 0 0 10px rgb(var(--coffer-red) / 0.65), inset 0 0 0 1px rgb(var(--coffer-red) / 0.55); }
}
@keyframes coffer-status-erroring {
  0%, 100% { opacity: 1;    box-shadow: 0 0 4px rgb(var(--coffer-amber) / 0.40); }
  50%      { opacity: 0.86; box-shadow: 0 0 12px rgb(var(--coffer-amber) / 0.65); }
}
@keyframes coffer-ticker-flash {
  0%   { background-color: rgb(var(--coffer-emerald) / 0); }
  20%  { background-color: rgb(var(--coffer-emerald) / 0.18); }
  100% { background-color: rgb(var(--coffer-emerald) / 0); }
}

.coffer-anim-stat-pulse      { animation: coffer-stat-pulse 3s ease-in-out infinite; }
.coffer-anim-running         { animation: coffer-status-running 2s ease-in-out infinite; }
.coffer-anim-broken          { animation: coffer-status-broken 3s ease-in-out infinite; }
.coffer-anim-erroring        { animation: coffer-status-erroring 1.5s ease-in-out infinite; }
.coffer-anim-ticker-flash    { animation: coffer-ticker-flash 1s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .coffer-anim-stat-pulse,
  .coffer-anim-running,
  .coffer-anim-broken,
  .coffer-anim-erroring,
  .coffer-anim-ticker-flash {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. Auth shell — center the card, give it Coffer chrome
   -------------------------------------------------------------------------- */

.coffer-auth-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgb(var(--coffer-blue) / 0.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgb(var(--coffer-emerald) / 0.05), transparent 50%),
    var(--coffer-canvas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  overflow: hidden;
}
.coffer-auth-shell > * { position: relative; z-index: 1; }
.coffer-auth-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 92vw);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  filter: blur(1.5px) saturate(0.6);
  animation: coffer-anim-stat-pulse 6s ease-in-out infinite;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .coffer-auth-glyph { animation: none !important; }
}
.coffer-auth-card {
  width: 100%;
  max-width: 28rem;
  background: var(--coffer-card);
  border: 1px solid var(--coffer-card-edge);
  border-radius: 1.5rem;
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  padding: 2rem;
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.5);
}
.coffer-auth-meta {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.30);
}

/* --------------------------------------------------------------------------
   14. Top utility cluster
   -------------------------------------------------------------------------- */

.coffer-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgb(0 0 0 / 0.4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--coffer-card-edge);
  gap: 1rem;
}
.coffer-topbar__cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   15. Hide-existing helpers (used by chrome layout to suppress original brand)
   -------------------------------------------------------------------------- */

.coffer-hide { display: none !important; }

/* --------------------------------------------------------------------------
   16. Misc bits — spinner color, links
   -------------------------------------------------------------------------- */

:where(a:not(.coffer-tab):not(.coffer-pill):not(.coffer-wordmark)):where(.text-primary, .hover\:underline) {
  color: rgb(var(--coffer-blue));
}
:where(a:not(.coffer-tab):not(.coffer-pill):not(.coffer-wordmark)):where(.text-primary):hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* Footer — match canvas */
:where(footer) {
  color: rgb(255 255 255 / 0.40);
}
:where(footer a) { color: rgb(255 255 255 / 0.55) !important; }
:where(footer a:hover) { color: #fff !important; }

/* Translation_missing pretty-print so it doesn't break the page visually */
:where(.translation_missing) {
  color: inherit;
  font-style: normal;
  border: none;
  background: transparent;
}

/* ===========================================================================
   Coffer chat bubble — draggable, bottom-right by default, expands existing
   right-sidebar drawer. Hides itself when drawer is open.
   =========================================================================== */
#coffer-chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background: rgb(15 23 42 / 0.85);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgb(var(--coffer-blue) / 0.45);
  box-shadow:
    0 0 24px rgb(var(--coffer-blue) / 0.35),
    0 8px 24px -4px rgb(0 0 0 / 0.5),
    inset 0 0 0 1px rgb(255 255 255 / 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: rgb(var(--coffer-blue) / 0.9);
  cursor: grab;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#coffer-chat-bubble:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 36px rgb(var(--coffer-blue) / 0.55),
    0 12px 32px -4px rgb(0 0 0 / 0.6),
    inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
#coffer-chat-bubble:active { cursor: grabbing; transform: scale(0.96); }
#coffer-chat-bubble.is-dragging { cursor: grabbing; transition: none; }
.coffer-chat-bubble__glyph {
  width: 26px;
  height: 26px;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgb(var(--coffer-blue) / 0.5));
  pointer-events: none;
}
.coffer-chat-bubble__label {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  pointer-events: none;
}
/* Hide bubble when right-sidebar drawer is expanded (using existing data-target hooks) */
[data-app-layout-target='rightSidebar']:not(.w-0) ~ #coffer-chat-bubble,
.right-sidebar-open #coffer-chat-bubble { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* Subtle 4s pulse so the bubble feels alive */
@keyframes coffer-bubble-pulse {
  0%, 100% { box-shadow: 0 0 24px rgb(var(--coffer-blue) / 0.35), 0 8px 24px -4px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.04); }
  50%      { box-shadow: 0 0 32px rgb(var(--coffer-blue) / 0.5),  0 8px 24px -4px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
}
#coffer-chat-bubble:not(:hover):not(.is-dragging) { animation: coffer-bubble-pulse 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #coffer-chat-bubble { animation: none !important; }
}

/* Inline drag JS injected via brand CSS sibling, see coffer-chat-bubble.js below */

/* ===========================================================================
   COFFER DRAWER — resizable AI chat panel (Backstage cockpit aesthetic)
   The drawer is rendered by Sure's existing right-sidebar block. We re-skin
   it via CSS only, never touching the chat partials.
   =========================================================================== */
:root { --coffer-drawer-width: 420px; }

/* Width override: when Sure's stimulus toggles 'w-full' on, we swap to var */
[data-app-layout-target='rightSidebar'].coffer-drawer.w-full {
  width: var(--coffer-drawer-width) !important;
  max-width: none !important;
  background:
    linear-gradient(to bottom right, rgba(255,255,255,0.025), transparent 60%, rgba(0,0,0,0.20)),
    rgb(15 23 42 / 0.55);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  border-left: 1px solid var(--coffer-card-edge);
}
[data-app-layout-target='rightSidebar'].coffer-drawer.w-0 { width: 0 !important; }

/* Resize handle on the drawer's LEFT edge */
#coffer-drawer-resize {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#coffer-drawer-resize::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 32px;
  border-radius: 2px;
  background: rgb(var(--coffer-blue) / 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
}
#coffer-drawer-resize:hover, #coffer-drawer-resize.is-resizing {
  background: rgb(var(--coffer-blue) / 0.08);
  box-shadow: inset 1px 0 0 rgb(var(--coffer-blue) / 0.5);
}
#coffer-drawer-resize:hover::before, #coffer-drawer-resize.is-resizing::before { opacity: 1; }
[data-app-layout-target='rightSidebar'].w-0 #coffer-drawer-resize { display: none; }
body.coffer-drawer-resizing { cursor: ew-resize !important; user-select: none !important; }

/* Drawer interior — backstage section-header polish on the chat nav */
[data-app-layout-target='rightSidebar'] #chat-container nav {
  padding: 16px 18px;
  border-bottom: 1px solid var(--coffer-card-edge);
  background: rgb(15 23 42 / 0.30);
}
[data-app-layout-target='rightSidebar'] #chat-container nav h2,
[data-app-layout-target='rightSidebar'] #chat-container nav [class*='title'] {
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: rgb(var(--coffer-blue) / 0.85) !important;
}

/* Chat input — Backstage primary-button styling on the send action */
[data-app-layout-target='rightSidebar'] form button[type='submit'] {
  background: rgb(var(--coffer-blue) / 1) !important;
  color: white !important;
  border-radius: 0.875rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
  box-shadow: 0 0 14px rgb(var(--coffer-blue) / 0.35) !important;
}

/* Chat messages — denser Backstage spacing, blue accent for AI, white for user */
[data-app-layout-target='rightSidebar'] #chat-container [class*='message'],
[data-app-layout-target='rightSidebar'] #chat-container article {
  border-radius: 1rem;
}

/* ==================================================================== */
/* Backstage tile + lit-pill tones — fallback for un-compiled Tailwind   */
/* Restores rounded-square colored icon containers on row glyphs and    */
/* lit-pill status badges. Mirrors backstage-brand "5 tones" recipe.    */
/* ==================================================================== */

/* Glyph tile backgrounds (h-10 w-10 rounded-2xl ring-1 ring-inset) */
.bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.10) !important; }
.bg-blue-500\/10    { background-color: rgb(59 130 246 / 0.10) !important; }
.bg-amber-500\/10   { background-color: rgb(245 158 11 / 0.10) !important; }
.bg-red-500\/10     { background-color: rgb(239 68 68 / 0.10) !important; }
.bg-slate-500\/10   { background-color: rgb(100 116 139 / 0.10) !important; }

/* Lit-pill backgrounds (rounded-full border) */
.bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.15) !important; }
.bg-blue-500\/15    { background-color: rgb(59 130 246 / 0.15) !important; }
.bg-amber-500\/15   { background-color: rgb(245 158 11 / 0.15) !important; }
.bg-red-500\/15     { background-color: rgb(239 68 68 / 0.15) !important; }
.bg-slate-500\/15   { background-color: rgb(100 116 139 / 0.15) !important; }

/* Tone foreground (icons) */
.text-emerald-300 { color: rgb(110 231 183) !important; }
.text-blue-300    { color: rgb(147 197 253) !important; }
.text-amber-300   { color: rgb(252 211 77)  !important; }
.text-red-300     { color: rgb(252 165 165) !important; }
.text-slate-300   { color: rgb(203 213 225) !important; }

/* Tone foreground (pill text — slightly lighter shade) */
.text-emerald-200 { color: rgb(167 243 208) !important; }
.text-blue-200    { color: rgb(191 219 254) !important; }
.text-amber-200   { color: rgb(253 230 138) !important; }
.text-red-200     { color: rgb(254 202 202) !important; }
.text-slate-200   { color: rgb(226 232 240) !important; }

/* Tile inner ring (ring-1 ring-inset ring-{tone}-400/20) */
.ring-emerald-400\/20 { box-shadow: inset 0 0 0 1px rgb(52 211 153 / 0.20) !important; }
.ring-blue-400\/20    { box-shadow: inset 0 0 0 1px rgb(96 165 250 / 0.20) !important; }
.ring-amber-400\/20   { box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.20) !important; }
.ring-red-400\/20     { box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.20) !important; }
.ring-slate-400\/20   { box-shadow: inset 0 0 0 1px rgb(148 163 184 / 0.20) !important; }
.ring-emerald-400\/30 { box-shadow: inset 0 0 0 1px rgb(52 211 153 / 0.30) !important; }
.ring-blue-400\/30    { box-shadow: inset 0 0 0 1px rgb(96 165 250 / 0.30) !important; }
.ring-amber-400\/30   { box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.30) !important; }
.ring-red-400\/30     { box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.30) !important; }
.ring-slate-400\/30   { box-shadow: inset 0 0 0 1px rgb(148 163 184 / 0.30) !important; }

/* Lit-pill border (border + tone color) */
.border-emerald-500\/40 { border-color: rgb(16 185 129 / 0.40) !important; }
.border-blue-500\/40    { border-color: rgb(59 130 246 / 0.40) !important; }
.border-amber-500\/40   { border-color: rgb(245 158 11 / 0.40) !important; }
.border-red-500\/40     { border-color: rgb(239 68 68 / 0.40) !important; }
.border-slate-500\/40   { border-color: rgb(100 116 139 / 0.40) !important; }

/* Cockpit aliveness — running pulse, broken throb, erroring blink */
@keyframes coffer-pill-running  { 0%,100% { opacity: 1 } 50% { opacity: 0.78 } }
@keyframes coffer-pill-broken   { 0%,100% { box-shadow: 0 0 4px rgb(239 68 68 / 0.40) } 50% { box-shadow: 0 0 14px rgb(239 68 68 / 0.55) } }
@keyframes coffer-pill-erroring { 0%,100% { opacity: 1; box-shadow: 0 0 6px rgb(245 158 11 / 0.35) } 50% { opacity: 0.86; box-shadow: 0 0 12px rgb(245 158 11 / 0.55) } }
.coffer-anim-running  { animation: coffer-pill-running  2s ease-in-out infinite; }
.coffer-anim-broken   { animation: coffer-pill-broken   3s ease-in-out infinite; }
.coffer-anim-erroring { animation: coffer-pill-erroring 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .coffer-anim-running, .coffer-anim-broken, .coffer-anim-erroring { animation: none !important; }
}

/* Primary button icons — fg-inverse must follow text-inverse to white,
   since we flipped bg-inverse to blue. Original Sure assumed white-on-light. */
:where(.fg-inverse) { color: #ffffff !important; fill: currentColor; }
:where(.bg-inverse, [data-variant="primary"]) svg,
:where(.bg-inverse, [data-variant="primary"]) :where(.fg-inverse, .text-inverse) {
  color: #ffffff !important;
  stroke: currentColor;
}

/* ==================================================================== */
/* Chat bubble — brain becomes faded background watermark, AI is hero    */
/* ==================================================================== */
.coffer-chat-bubble__watermark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 18%;            /* lets brain breathe to ~64% of bubble */
  color: rgb(255 255 255 / 0.18);   /* faded — true watermark */
  filter: drop-shadow(0 0 8px rgb(var(--coffer-blue) / 0.30));
  pointer-events: none;
  z-index: 0;
}
.coffer-chat-bubble__label {
  position: relative;
  z-index: 1;
  font-size: 22px !important;       /* AI is the hero — ~50% of bubble */
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.98) !important;
  text-shadow: 0 0 10px rgb(var(--coffer-blue) / 0.65);
  pointer-events: none;
}
/* Make the bubble itself relative-positioned so absolute watermark anchors */
#coffer-chat-bubble {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep inheriting other layout (size, color, animation) from earlier rules */
}

/* Auth shell — restore vertical centering. The footer wrapper inside the shell
   uses mt-auto, which consumes all bottom space under flex justify-content:center
   and pushes the auth card to the top. Override to a fixed margin so the whole
   column centers naturally. */
.coffer-auth-shell > .mt-auto {
  margin-top: 2rem !important;
}

/* Account list row spacing — minimum vertical gap so rows don't sit flush
   against each other inside the Cash/Loans/CreditCards group containers. */
.coffer-account-row + .coffer-account-row { margin-top: 0.5rem; }
.coffer-account-row { margin-bottom: 0.25rem; }

/* Coffer pills (streak, +Receipt) — never let the label wrap onto 2 lines */
.coffer-pill { white-space: nowrap; }

.coffer-wordmark__tagline { white-space: nowrap; }

/* Mobile fix: utility classes must beat .coffer-pill display:inline-flex */
.coffer-pill.hidden { display: none !important; }

/* Primary button fix: enforce centered icon+text, constrained icon size,
   proper vertical padding so the button is not boxy on mobile */
:where(a, button).bg-inverse,
:where([data-variant="primary"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  height: 2.25rem !important;
  padding: 0 1rem !important;
  line-height: 1 !important;
  vertical-align: middle;
}
:where(a, button).bg-inverse > svg,
:where([data-variant="primary"]) > svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

/* Onboarding/auth form input fields — give them a visible bordered box
   so they match the other sections on the page. */
.coffer-onboarding-card .bg-container,
.coffer-onboarding-card form .field {
  border: 1px solid rgb(255 255 255 / 0.08) !important;
  border-radius: 0.875rem !important;
  background: rgb(15 17 21 / 0.55) !important;
  padding: 0.85rem 1rem !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.coffer-onboarding-card .bg-container:focus-within,
.coffer-onboarding-card form .field:focus-within {
  border-color: rgb(var(--coffer-blue) / 0.55) !important;
  box-shadow: 0 0 0 3px rgb(var(--coffer-blue) / 0.10) !important;
}
.coffer-onboarding-card .bg-container input,
.coffer-onboarding-card .bg-container select,
.coffer-onboarding-card form .field input {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  outline: none !important;
}

/* Force the bordered-box treatment on every form-field wrapper inside the
   onboarding wizard. Higher specificity + explicit overrides to beat any
   tailwind utility / Sure default styles. */
.coffer-onboarding-card form > div > .bg-container,
.coffer-onboarding-card form .bg-container,
.coffer-onboarding-card .styled-form-input-container,
.coffer-onboarding-card div.bg-container {
  display: block !important;
  border: 1px solid rgb(255 255 255 / 0.10) !important;
  border-radius: 0.875rem !important;
  background: rgb(15 17 21 / 0.55) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.02) inset;
}
.coffer-onboarding-card form input[type="text"],
.coffer-onboarding-card form input[type="email"],
.coffer-onboarding-card form input[type="password"],
.coffer-onboarding-card form input[type="number"],
.coffer-onboarding-card form input[type="date"],
.coffer-onboarding-card form select,
.coffer-onboarding-card form textarea {
  background: transparent !important;
  border: 0 !important;
  padding: 0.25rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
  color: rgb(255 255 255 / 0.95) !important;
}
.coffer-onboarding-card .bg-container:focus-within,
.coffer-onboarding-card form .bg-container:focus-within {
  border-color: rgb(var(--coffer-blue) / 0.55) !important;
  box-shadow: 0 0 0 3px rgb(var(--coffer-blue) / 0.10) !important;
}

/* Onboarding wizard — outer card padding + breathing room between sections.
   Andrew complaint: inner panels were touching the edges of the outer card,
   no even spacing. Forces a generous inner-padding on the card and adds
   gaps between every direct child of the show form. */
.coffer-onboarding-card {
  padding: 2rem 1.5rem !important;
  margin: 1.5rem auto !important;
  max-width: 640px !important;
}
@media (min-width: 768px) {
  .coffer-onboarding-card {
    padding: 2.5rem 2.5rem !important;
    margin: 2rem auto !important;
  }
}
.coffer-onboarding-card form > div + div,
.coffer-onboarding-card form > * + * {
  margin-top: 1rem !important;
}
.coffer-onboarding-card form > div.mb-6 {
  margin-bottom: 1.5rem !important;
}

/* Remove the inner dark "bg-surface" rectangle on onboarding pages —
   we already have the outer .coffer-onboarding-card surface, no need
   for a second layer of dark on top. Also widen the card. */
.coffer-onboarding-card {
  max-width: 640px !important;
}
.coffer-onboarding-card > div,
.coffer-onboarding-card .bg-surface,
.coffer-onboarding-card div.bg-surface {
  background: transparent !important;
  background-color: transparent !important;
  max-width: none !important;
}
.coffer-onboarding-card form {
  max-width: none !important;
  width: 100% !important;
}

/* Global list-row spacing fix — Sure stacks rows flush inside many panels
   (Bank Sync providers, accounts list, etc.) without visible gap. Add a
   subtle gap between every direct child of common list containers. */
.bg-container > div + div,
.bg-container > a + a,
.bg-container > div + a,
.bg-container > a + div,
.coffer-stat-tile > div + div,
[data-controller="bulk-select"] > div + div {
  margin-top: 0.5rem !important;
}
/* Provider list / connections list — add vertical gap between cards */
.bg-container > .group + .group,
.bg-container .flex.items-center + .flex.items-center {
  margin-top: 0.5rem !important;
}

/* DISABLE over-aggressive sibling spacing rules where they break Sures
   built-in dividers. These rules earlier were stamping margin between
   Sure account-rows that already have hairline dividers, creating ghost
   gray lines and double-borders. */
.bg-container > div + div,
.bg-container > * + *,
.shadow-border-xs > * + * {
  margin-top: 0 !important;
}
/* Re-enable spacing ONLY on specific list pages where flush-stacking
   was actually a problem (categories, tags, providers, captures-receipts). */
[data-controller~="categories"] turbo-frame + turbo-frame,
[id^="categories"] turbo-frame + turbo-frame,
.coffer-providers-list > * + *,
#coffer-recent-receipts > * + * {
  margin-top: 0.5rem !important;
}

/* === Saturated amount colors === */
:where(.text-red-200, .text-rose-200, .text-rose-300) {
  color: rgb(239 80 100) !important;
}
:where(.text-emerald-200, .text-emerald-300, .text-green-200) {
  color: rgb(34 197 130) !important;
}

/* === Z-index fix for combobox / category-picker dropdowns === */
[role="listbox"],
.hw-combobox__listbox,
hw-combobox [popover],
hw-combobox dialog,
[data-controller~="hw-combobox"] [role="listbox"] {
  z-index: 100 !important;
  position: relative;
}
hw-combobox [data-hw-combobox-target="popover"],
[data-hw-combobox-target="popover"] {
  z-index: 100 !important;
  background: rgb(15 17 21 / 0.98) !important;
  backdrop-filter: blur(24px);
  border: 1px solid rgb(255 255 255 / 0.10);
  border-radius: 0.875rem;
  box-shadow: 0 12px 48px rgb(0 0 0 / 0.55);
}

/* === User-menu dropdown opaque background === */
[data-controller~="DS--menu"] [role="menu"],
[data-DS--menu-target="menu"],
[role="menu"] {
  background: rgb(12 14 18 / 0.98) !important;
  backdrop-filter: blur(24px);
  border: 1px solid rgb(255 255 255 / 0.10) !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 12px 48px rgb(0 0 0 / 0.6) !important;
  z-index: 100 !important;
}
[role="menu"] a,
[role="menu"] button {
  background: transparent !important;
  color: rgb(255 255 255 / 0.92) !important;
}
[role="menu"] a:hover,
[role="menu"] button:hover {
  background: rgb(255 255 255 / 0.04) !important;
}