/* ═══════════════════════════════════════════════════════════════════
   Ákotí theme bridge

   The vendored components in static/akoti/ hardcode their own palette —
   #1a2f5e navy, #a8c8e8 blue, #e8b4b8 pink — and use no custom properties,
   so there is nothing to redefine. This file retints them to the tokens in
   tokens.css instead. Never edit a file under static/akoti/; change it here.

   What is deliberately left alone: the asymmetric brick radii and the inset
   "engrave" shadows. Those two things are the Ákotí signature. Flattening
   them into ordinary rounded rectangles would remove the reason for using
   the library at all.

   Load order matters — this file must come after every akoti/*.css and
   before app-extras.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ───────────────────────────────────────────────────────
   Slate is the app's solid tone. Navy would read as a second brand. */

.akoti-btn {
  border-color: var(--line);
  color: var(--ink);
  min-height: var(--tap);              /* touch target, not decoration */
  font-size: 14px;
}
@media (min-width: 700px) {
  .akoti-btn { min-height: 0; font-size: 13px; }
  .akoti-btn.lg, .akoti-btn.xl { min-height: var(--tap); }
}
.akoti-btn:focus-visible { outline-color: var(--blue); }
.akoti-btn:hover { box-shadow: 0 2px 8px rgba(61, 74, 92, .1); }

.akoti-btn.primary {
  background: var(--slate);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 6px rgba(61, 74, 92, .18);
}
.akoti-btn.primary:hover { background: #33404f; }

.akoti-btn.secondary {
  background: var(--blue-wash);
  border-color: rgba(127, 178, 221, .5);
  color: var(--blue-deep);
}
.akoti-btn.secondary:hover { background: #dceaf7; }

.akoti-btn.ghost { border-color: var(--line); color: var(--ink); }
.akoti-btn.ghost:hover { background: var(--surface-2); }
.akoti-btn.link { color: var(--blue-deep); }
.akoti-btn.success { background: var(--ok); border-color: transparent; }
.akoti-btn.danger { background: var(--alert); border-color: transparent; }
.akoti-btn.warning { background: var(--warn); border-color: transparent; }
.akoti-btn.bronze { background: var(--bronze); border-color: transparent; }

/* ── Cards ─────────────────────────────────────────────────────────── */

.akoti-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--brick);
  box-shadow: var(--engrave);
}
@media (hover: hover) {
  .akoti-card:hover { border-radius: var(--brick-flip); }
  .akoti-card-flat:hover { border-radius: var(--brick); }
}
.akoti-card-title { font-family: var(--font-display); color: var(--ink); }
.akoti-card-subtitle, .akoti-card-body { color: var(--muted); }
.akoti-card-body { color: var(--ink); }
.akoti-card-action { color: var(--blue-deep); }
.akoti-card-action:hover { color: var(--pink-deep); }
.akoti-card-footer { border-top-color: var(--line-soft); }
.akoti-card-flat { background: var(--surface-2); }
.akoti-card-elevated { box-shadow: 0 4px 16px rgba(61, 74, 92, .08); }
.akoti-card-clickable:hover { border-color: var(--blue); }

.akoti-card-primary { background: var(--slate); border-color: transparent; }
.akoti-card-primary .akoti-card-action { color: var(--blue); }
.akoti-card-dark { background: var(--ink); border-color: transparent; }

/* ── Fields ────────────────────────────────────────────────────────
   The 16px floor is not a style choice: iOS zooms the whole page when a
   focused input is smaller than that. */

.akoti-label { color: var(--muted); }
.akoti-label .required { color: var(--alert); }

.akoti-input {
  font-size: 16px;
  min-height: var(--tap);
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--brick-sm);
  box-shadow: var(--engrave);
}
.akoti-input:hover { border-color: rgba(61, 74, 92, .24); }
.akoti-input:focus {
  border-color: var(--blue);
  border-radius: var(--brick-sm-flip);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(127, 178, 221, .22), var(--engrave);
}
.akoti-input::placeholder { color: var(--faint); }
.akoti-input.sm { font-size: 16px; }        /* size shrinks padding, not text */
.akoti-input.lg { font-size: 16px; }
.akoti-textarea { min-height: 96px; line-height: 1.6; }

.akoti-input.error { border-color: var(--alert); }
.akoti-input.error:focus { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(194, 91, 102, .18); }
.akoti-input.success { border-color: var(--ok); }
.akoti-input.success:focus { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(47, 143, 118, .18); }
.akoti-field-hint { color: var(--muted); font-size: 12.5px; }
.akoti-field-error { color: var(--alert); }
.akoti-input:disabled { background: var(--surface-2); color: var(--faint); }
.akoti-input-icon .aki { color: var(--faint); }
.akoti-input-icon .akoti-input:focus ~ .aki,
.akoti-input-icon .akoti-input:focus + .aki { color: var(--blue-deep); }

/* Select and checkbox arrive from akoti-forms.css / akoti-checkbox.css.
   The classes really are `akoti-check` / `akoti-check-mark` — there is no
   `.akoti-checkbox`, and rules written against that name styled nothing. */
.akoti-select, select.akoti-input { background-color: var(--surface-2); }
.akoti-check input:checked + .akoti-check-mark,
.akoti-radio input:checked + .akoti-radio-mark {
  background: var(--slate); border-color: var(--slate);
}
.akoti-switch input:checked + .akoti-switch-track { background: var(--blue-deep); }

/* ── Badges and tags ───────────────────────────────────────────────── */

.akoti-badge { background: var(--slate); }
.akoti-badge.primary { background: var(--slate); }
.akoti-badge.info { background: var(--blue-wash); color: var(--blue-deep); }
.akoti-badge.success { background: var(--ok-wash); color: var(--ok); }
.akoti-badge.warning { background: var(--warn-wash); color: var(--warn); }
.akoti-badge.danger { background: var(--alert-wash); color: var(--alert); }
.akoti-badge.muted { background: var(--surface-2); color: var(--muted); }
.akoti-badge.bronze { background: #fbf1e6; color: #8b5e20; }
.akoti-badge.outline.primary, .akoti-badge.outline.info { color: var(--blue-deep); }
.akoti-badge.outline.success { color: var(--ok); }
.akoti-badge.outline.warning { color: var(--warn); }
.akoti-badge.outline.danger { color: var(--alert); }
.akoti-badge.outline.muted { color: var(--muted); }

.akoti-tag { background: var(--surface-2); color: var(--ink); border-color: var(--line-soft); }
.akoti-tag:hover { background: var(--blue-wash); }
.akoti-tag.primary { background: var(--blue-wash); border-color: rgba(127,178,221,.5); color: var(--blue-deep); }
.akoti-tag.success { background: var(--ok-wash); border-color: rgba(47,143,118,.35); color: var(--ok); }
.akoti-tag.warning { background: var(--warn-wash); border-color: rgba(192,127,46,.35); color: var(--warn); }
.akoti-tag.danger { background: var(--alert-wash); border-color: rgba(194,91,102,.35); color: var(--alert); }
.akoti-tag-remove:hover { background: var(--alert); }

.akoti-dot.primary { background: var(--slate); }
.akoti-dot.info { background: var(--blue-deep); }
.akoti-dot.success { background: var(--ok); }
.akoti-dot.warning { background: var(--warn); }
.akoti-dot.danger { background: var(--alert); }
.akoti-status { color: var(--muted); }

/* ── Lists ─────────────────────────────────────────────────────────── */

.akoti-list-item { border-bottom-color: var(--line-soft); color: var(--ink); }
.akoti-list-item.akoti-list-clickable { min-height: var(--tap); }
.akoti-list-item.akoti-list-clickable:hover { background: var(--blue-wash); }
.akoti-list-title { color: var(--ink); font-weight: 700; }
.akoti-list-desc, .akoti-list-meta { color: var(--muted); }
.akoti-list-item > .aki { color: var(--faint); }
.akoti-list-bordered .akoti-list-item { border-color: var(--line); box-shadow: var(--engrave); }
.akoti-list-bordered .akoti-list-item:hover { border-color: var(--blue); }
.akoti-list-striped .akoti-list-item:nth-child(even) { background: var(--surface-2); }
.akoti-dl dt { color: var(--muted); }
.akoti-dl dd { color: var(--ink); }

/* ── Empty states, stats, alerts, progress ─────────────────────────── */

.akoti-empty-icon { background: var(--surface-2); color: var(--faint); }
.akoti-empty-title { font-family: var(--font-display); color: var(--ink); }
.akoti-empty-desc { color: var(--muted); }
.akoti-empty.akoti-empty-card {
  background: var(--surface-2); border-color: var(--line); border-radius: var(--brick);
}

.akoti-stat { background: var(--surface); border-color: var(--line); border-radius: var(--brick); box-shadow: var(--engrave); }
.akoti-stat-icon { background: var(--blue-wash); color: var(--blue-deep); }
.akoti-stat-icon.blue { background: var(--blue-wash); color: var(--blue-deep); }
.akoti-stat-icon.green { background: var(--ok-wash); color: var(--ok); }
.akoti-stat-icon.amber { background: var(--warn-wash); color: var(--warn); }
.akoti-stat-icon.red { background: var(--alert-wash); color: var(--alert); }
.akoti-stat-icon.purple { background: var(--pink-wash); color: var(--pink-deep); }  /* no purple in this app */
.akoti-stat-icon.bronze { background: #fbf1e6; color: #8b5e20; }
.akoti-stat-label { color: var(--muted); }
.akoti-stat-value { font-family: var(--font-display); color: var(--ink); }
.akoti-stat-trend.up { color: var(--ok); }
.akoti-stat-trend.down { color: var(--alert); }
.akoti-stat-trend.flat { color: var(--muted); }

.akoti-alert { border-radius: var(--brick-sm); }
.akoti-alert.info { background: var(--blue-wash); border-color: rgba(127,178,221,.5); color: var(--blue-deep); }
.akoti-alert.success { background: var(--ok-wash); border-color: rgba(47,143,118,.4); color: #1f6b57; }
.akoti-alert.warning { background: var(--warn-wash); border-color: rgba(192,127,46,.4); color: #8f5c1d; }
.akoti-alert.danger { background: var(--alert-wash); border-color: rgba(194,91,102,.4); color: #8d3944; }

.akoti-progress-bar, .akoti-progress > span, .akoti-progress-fill { background: var(--blue-deep); }
.akoti-divider { border-color: var(--line-soft); }
.akoti-avatar { background: var(--blue-wash); color: var(--blue-deep); }

/* ── Tabs, accordion, modal, tooltip, skeleton, markdown ───────────── */

/* The v2 components use short prefixes — aka2 / akt2 / akm2. Rules written
   against .akoti-tabs-v2 or .akoti-accordion-v2 matched nothing at all. */
.akt2-tab { color: var(--muted); }
.akt2-radio:checked + .akt2-tab { color: var(--ink); border-color: var(--blue); }
.akt2-badge { background: var(--blue-wash); color: var(--blue-deep); }

.aka2-trigger { color: var(--ink); min-height: var(--tap); }
.aka2-trigger:hover { background: var(--surface-2); }
.aka2-item { border-color: var(--line-soft); }
.aka2-label { font-weight: 600; }

.akm2::backdrop { background: rgba(34, 34, 42, .42); }
.akm2-title { font-family: var(--font-display); color: var(--ink); }
.akoti-tooltip::after { background: var(--ink); }
.akl-skeleton { background: linear-gradient(90deg, var(--surface-2), #eaeef3, var(--surface-2)); }
.akoti-md { color: var(--ink); font-family: var(--font-body); }
.akoti-md h1, .akoti-md h2, .akoti-md h3 { font-family: var(--font-display); }
.akoti-md a { color: var(--blue-deep); }
.akoti-md code { background: var(--surface-2); }
.akoti-md blockquote { border-left-color: var(--pink); background: var(--pink-wash); }

/* Icons inherit the surrounding text colour; only the sizes need a floor. */
.aki { color: inherit; }

/* ── Sidebar ───────────────────────────────────────────────────────
   Two changes beyond colour.

   First, the vendored file sets `position: sticky` with a max-width:768px
   block that switches to off-canvas. This app's breakpoint is 960px and the
   codebase carries no max-width queries, so the mobile-first base below is
   off-canvas and a min-width:960px query puts it back in the flow. Between
   769px and 959px the vendored max-width block simply does not apply, and
   these rules win because this file loads later.

   Second, height is 100svh rather than 100vh so mobile browser chrome cannot
   push the footer of the sidebar out of reach. */

.akoti-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100svh;
  z-index: 60;
  width: 264px;
  max-width: 84vw;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  background: var(--slate);
  font-family: var(--font-body);
  padding-left: env(safe-area-inset-left);
  box-shadow: 2px 0 18px rgba(34, 34, 42, .18);
}
.akoti-sidebar.akoti-sb-open { transform: translateX(0); }

.akoti-sb-header { border-bottom-color: rgba(255, 255, 255, .1); gap: 10px; }
.akoti-sb-brand {
  font-family: var(--font-display); font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: #fff;
}
.akoti-sb-toggle {
  width: var(--tap); height: var(--tap);
  border-radius: 10px 4px 10px 4px;
  font-size: 22px; line-height: 1;
}
.akoti-sb-nav { padding: 6px 8px 14px; }
.akoti-sb-section { color: rgba(255, 255, 255, .38); }
.akoti-sb-item { min-height: var(--tap); font-size: 14px; }
.akoti-sb-item.active {
  background: rgba(127, 178, 221, .2);
  color: #eaf3fb;
  box-shadow: inset 3px 0 0 var(--blue);
}
.akoti-sb-icon { display: inline-flex; align-items: center; justify-content: center; }
.akoti-sb-badge { background: var(--pink); color: var(--ink); }
.akoti-sb-footer {
  border-top-color: rgba(255, 255, 255, .1);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.akoti-sb-user { font-size: 12.5px; color: rgba(255, 255, 255, .62); }

@media (min-width: 960px) {
  .akoti-sidebar {
    position: sticky;
    transform: none;
    max-width: none;
    box-shadow: 2px 0 12px rgba(34, 34, 42, .06);
  }
  .akoti-sb-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .akoti-sidebar { transition: none; }
}

/* ── Float-ai coach ────────────────────────────────────────────────
   The launcher clears the toast stack and the safe-area gesture bar. Its
   organic blob radius is Ákotí's, and it stays. */

.akf-trigger {
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: 16px;
  width: var(--tap); height: var(--tap);
  background: linear-gradient(135deg, var(--blue), var(--pink));
  box-shadow: 0 4px 20px rgba(127, 178, 221, .4), inset 0 2px 4px rgba(255, 255, 255, .3);
}
.akf-trigger::before { background: linear-gradient(135deg, var(--pink), var(--blue)); }
.akf-trigger::after { border-color: rgba(127, 178, 221, .3); }
.akf-trigger-icon { color: var(--slate); font-family: var(--font-display); font-size: 19px; }
.akf-badge { background: var(--pink); }
@media (min-width: 700px) {
  .akf-trigger { bottom: 22px; right: 22px; width: 54px; height: 54px; }
  .akf-trigger-icon { font-size: 22px; }
}

.akf-panel {
  bottom: calc(78px + env(safe-area-inset-bottom));
  left: 12px; right: 12px; width: auto;
  height: min(520px, calc(100svh - 150px));
  background: var(--surface);
  border-radius: var(--brick);
  box-shadow: 0 12px 48px rgba(34, 34, 42, .16), 0 0 0 1px var(--line-soft), var(--engrave);
}
@media (min-width: 560px) {
  .akf-panel { left: auto; right: 22px; width: 372px; bottom: 88px; }
}
.akf-header { background: var(--surface-2); border-bottom-color: var(--line-soft); }
.akf-header::after { background: linear-gradient(90deg, var(--blue), var(--pink)); }
.akf-avatar { background: linear-gradient(135deg, var(--blue), var(--blue-wash)); color: var(--slate); }
.akf-header-title { font-family: var(--font-display); color: var(--ink); font-size: 14px; }
.akf-header-status { color: var(--muted); }
.akf-online-dot { background: var(--ok); }
.akf-header-btn { width: 34px; height: 34px; color: var(--muted); }
.akf-header-btn:hover { background: var(--blue-wash); color: var(--ink); }
.akf-welcome-icon { background: linear-gradient(135deg, var(--blue-wash), var(--pink-wash)); }
.akf-welcome h3 { font-family: var(--font-display); color: var(--ink); }
.akf-welcome p { color: var(--muted); font-size: 13.5px; }
.akf-msg-user .akf-msg-avatar { background: var(--pink); color: var(--ink); }
.akf-msg-ai .akf-msg-avatar { background: var(--blue); color: var(--slate); }
.akf-bubble { color: var(--ink); font-size: 14px; }
.akf-msg-user .akf-bubble { background: var(--pink-wash); border-color: rgba(232, 180, 184, .45); }
.akf-msg-ai .akf-bubble { background: var(--blue-wash); border-color: rgba(127, 178, 221, .35); }
.akf-bubble code { background: var(--surface-2); }
.akf-time { color: var(--faint); }
.akf-thinking-dot { background: var(--blue); }
.akf-thinking-dot:nth-child(2) { background: var(--pink); }
.akf-cursor { background: var(--blue-deep); }
.akf-input-bar { background: var(--surface-2); border-top-color: var(--line-soft); }
.akf-input {
  font-size: 16px;                     /* 16px floor, same reason as elsewhere */
  background: var(--surface); border-color: var(--line); color: var(--ink);
  min-height: var(--tap);
}
.akf-input:focus { border-color: var(--blue); }
.akf-input::placeholder { color: var(--faint); }
.akf-input:disabled { background: var(--surface-2); color: var(--faint); }
.akf-send { width: var(--tap); height: var(--tap); background: var(--slate); color: #fff; }
.akf-send:hover { background: #33404f; }
.akf-footer { color: var(--faint); border-top-color: var(--line-soft); }
.akf-footer span { color: var(--blue-deep); }
.akf-suggestion { color: var(--blue-deep); background: var(--blue-wash); border-color: rgba(127,178,221,.35); }
.akf-suggestion:hover { background: var(--blue); color: var(--slate); border-color: var(--blue); }
.akm-action-btn { color: var(--muted); }
.akm-action-btn.akm-active { background: var(--blue-wash); color: var(--blue-deep); border-color: rgba(127,178,221,.4); }

/* Ákotí's card footer is a nowrap flex row, which squashes anything wider than
   two buttons on a phone. This variant lets a footer hold a field plus actions
   without overflowing at 360px. */
.akoti-card-footer.wrap { flex-wrap: wrap; row-gap: 8px; }