/*
  Grimoire v50 — Tiny Comfort UI Polish
  Safe patch rules:
  - CSS only. No app logic changed.
  - Does not add Supabase, tarot logic, new scripts, or heavy assets.
  - Keeps the working v49 behaviour exactly as-is.
*/

:root {
  --v50-panel: rgba(255, 255, 255, 0.058);
  --v50-panel-strong: rgba(255, 255, 255, 0.092);
  --v50-border: rgba(255, 255, 255, 0.145);
  --v50-soft-glow: 0 14px 38px rgba(11, 8, 20, 0.24);
  --v50-focus: 0 0 0 3px rgba(217, 182, 255, 0.30);
}

:root[data-theme="dawn"] {
  --v50-panel: rgba(255, 255, 255, 0.82);
  --v50-panel-strong: rgba(255, 255, 255, 0.94);
  --v50-border: rgba(72, 44, 78, 0.13);
  --v50-soft-glow: 0 18px 48px rgba(105, 61, 98, 0.13);
  --v50-focus: 0 0 0 3px rgba(157, 78, 221, 0.20);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.028));
  scrollbar-gutter: stable;
}

.brand {
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
}

.brand-text p {
  max-width: 23ch;
}

.control-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.62);
  margin-top: 8px;
}

:root[data-theme="dawn"] .control-label {
  color: rgba(33,20,14,0.56);
  background: rgba(255,255,255,0.62);
  border-color: rgba(33,20,14,0.07);
}

.controls {
  gap: 10px;
}

.controls .row {
  gap: 9px;
}

.btn,
.input,
.textarea,
.select,
.chip,
.spell-item,
.card,
.notice,
.control-group,
.dialog,
.tarot-panel,
.tarot-result-panel,
.tarot-draw-card,
.tarot-lib-card {
  border-color: var(--v50-border);
}

.btn,
.chip,
.input,
.select,
.textarea {
  min-height: 40px;
}

.controls .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 10px;
  line-height: 1.2;
  background: var(--v50-panel);
}

.controls .btn:hover,
.controls .btn:focus-visible {
  background: var(--v50-panel-strong);
}

.controls .btn::before {
  opacity: 0.86;
  font-size: 14px;
  line-height: 1;
}

#askGrimoireBtn::before { content: "✦"; }
#todayBtn::before { content: "☾"; }
#aiChatBtn::before { content: "✧"; }
#startHereBtn::before { content: "⌂"; }
#toolsBtn::before { content: "⚒"; }
#booksBtn::before { content: "☰"; }
#knowledgeBtn::before { content: "✎"; }
#ingredientsBtn::before { content: "✿"; }
#runesBtn::before { content: "ᚱ"; }
#newBtn::before { content: "+"; }
#spellWizardBtn::before { content: "✺"; }
#intentBuilderBtn::before { content: "◎"; }
#corrMixerBtn::before { content: "⚗"; }
#ritualLogsBtn::before { content: "☑"; }
#shoppingBtn::before { content: "🧺"; }
#themeBtn::before { content: "◐"; }
#importBtn::before { content: "⇣"; }
#exportBtn::before { content: "⇡"; }
#accountBtn::before { content: "☁"; }

.control-group > summary {
  padding: 4px 2px;
}

.control-group > summary::after {
  content: "  ↓";
  color: var(--accent);
}

.control-group[open] > summary::after {
  content: "  ↑";
}

.search,
.filters,
.list-header,
.sidebar-footer {
  padding-left: 4px;
  padding-right: 4px;
}

.spell-list {
  gap: 10px;
}

.spell-item {
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.spell-item[aria-selected="true"] {
  box-shadow: var(--v50-soft-glow), 0 0 0 1px rgba(217, 182, 255, 0.22) inset;
}

.topbar {
  gap: 8px;
}

.card {
  box-shadow: var(--v50-soft-glow);
}

.section,
.use-panel,
.log-item,
.reader-note-card {
  border-color: var(--v50-border);
}

.dialog {
  box-shadow: 0 24px 70px rgba(0,0,0,0.36);
}

.dialog-body {
  scrollbar-gutter: stable;
}

.btn:focus-visible,
.input:focus,
.textarea:focus,
.select:focus,
.chip:focus-visible,
.spell-item:focus-visible,
.link:focus-visible,
.tarot-action:focus-visible,
.tarot-tab:focus-visible {
  outline: none;
  box-shadow: var(--v50-focus);
}

/* GrimoireGPT: softer panel without touching the JS. */
#aiChatDialog .dialog-body,
#aiChatDialog .ai-chat-v34-body {
  border-radius: 22px;
}

#aiChatDialog .ai-chat-messages,
#aiChatDialog #aiChatMessages {
  scroll-behavior: smooth;
}

#aiChatDialog .ai-chat-composer,
#aiChatDialog .ai-chat-suggestions,
#aiChatDialog .ai-chat-toolbar {
  border-color: var(--v50-border);
}

/* Tarot: keep it pretty, but slightly calmer and easier to read. */
.tarot-panel {
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}

.tarot-toolbar {
  scrollbar-gutter: stable;
}

.tarot-tab,
.tarot-action,
.tarot-card-mini {
  min-height: 40px;
}

.tarot-card-mini,
.tarot-result-panel,
.tarot-draw-card {
  background: rgba(255,255,255,.055);
}

.tarot-card-meaning,
.tarot-card-ritual,
.tarot-result-panel p {
  line-height: 1.55;
}

@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .controls .btn {
    min-height: 44px;
  }

  .topbar {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .dialog {
    width: min(100vw - 12px, 860px);
  }
}

@media (max-width: 520px) {
  .brand-text h1 {
    font-size: 21px;
  }

  .brand-text p,
  .meta,
  .label,
  .control-group > summary {
    font-size: 12px;
  }

  .controls .row {
    grid-template-columns: 1fr 1fr;
  }

  .controls .row-single {
    grid-template-columns: 1fr;
  }

  .controls .btn {
    font-size: 13px;
  }

  #aiChatDialog .dialog-body,
  #aiChatDialog .ai-chat-v34-body {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .btn,
  .chip,
  .spell-item,
  .tarot-action,
  .tarot-tab {
    transition: none !important;
  }
}