/* ─── WOW v6: AI-Powered Selection Toolbar ─── */
/* [Læs op] | [Omformulér] [Forkort] [Professionel] */
/* ZERO purple. ZERO red focus rings. Clean neutral design. */

/* ─── Keep wm-nudge in editor, but unblock sidebar + toolbar ─── */
/* writing-mode.css dims sidebar/toolbar when editor is blank via .editor-empty.
   We match its EXACT selectors (incl :not()) to win the specificity war. */
.grammar-page.editor-empty .top-controls { opacity: 1 !important; pointer-events: auto !important; }
.grammar-page.editor-empty .counter-nav-div { opacity: 1 !important; pointer-events: auto !important; }
.grammar-page.editor-empty .correction-sidebar { pointer-events: auto !important; }
.grammar-page.editor-empty .correction-sidebar > *:not(.sidebar-controls) { opacity: 1 !important; }
.grammar-page.editor-empty .correction-sidebar > * { opacity: 1 !important; }
.grammar-page.editor-empty .sidebar-controls { opacity: 1 !important; }
.grammar-page.editor-empty .sidebar-controls > *:not(.dk-translation-box) { opacity: 1 !important; pointer-events: auto !important; }
.grammar-page.editor-empty .sidebar-controls > * { opacity: 1 !important; pointer-events: auto !important; }
.grammar-page.editor-empty .sidebar-dropdown-items { opacity: 1 !important; pointer-events: auto !important; }

/* ─── Override bundle's red hover/active tab — charcoal matches our design ─── */
.sidebar-dropdown-items .hk-dropdown-option:not(.active):hover {
  background: rgba(0, 0, 0, 0.04);
  color: inherit;
}
.sidebar-dropdown-items .hk-dropdown-option:not(.active):hover svg {
  stroke: currentColor;
  color: inherit;
}
[data-theme="dark"] .sidebar-dropdown-items .hk-dropdown-option:not(.active):hover {
  background: rgba(255, 255, 255, 0.06);
}
.sidebar-dropdown-items .hk-dropdown-option.active {
  background: linear-gradient(135deg, #4f5e6f 0%, #3b4857 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.sidebar-dropdown-items .hk-dropdown-option.active svg {
  stroke: #fff;
  color: #fff;
  fill: none;
}
.sidebar-dropdown-items .hk-dropdown-option.active span {
  color: #fff;
}
[data-theme="dark"] .sidebar-dropdown-items .hk-dropdown-option.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .sidebar-dropdown-items .hk-dropdown-option.active svg {
  stroke: #fff !important;
  color: #fff !important;
}
[data-theme="dark"] .sidebar-dropdown-items .hk-dropdown-option.active span {
  color: #fff !important;
}

/* ─── KILL the bundle's selection-toolbar ─── */
#selection-toolbar {
  display: none !important;
}

/* ─── Kill sidebar-controls entirely — writing form has its own language picker ─── */
.correction-sidebar .sidebar-controls {
  display: none !important;
}
.skrivsikkert-ui.ss-highlight-popup {
  display: none !important;
}

/* ─── Floating toolbar on text selection ─── */
.hte-toolbar {
  position: fixed;
  z-index: 20000;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 252, 248, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid rgba(230, 225, 218, 0.5);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.15s cubic-bezier(0.25,1,0.5,1), transform 0.15s cubic-bezier(0.25,1,0.5,1);
  pointer-events: none;
  font-family: var(--font-family, 'Nunito Sans', system-ui, sans-serif);
}
.hte-toolbar.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
[data-theme="dark"] .hte-toolbar {
  background: rgba(38, 36, 48, 0.95);
  border-color: rgba(80, 70, 90, 0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
}

/* ─── Toolbar Buttons ─── */
.hte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgb(115, 113, 108);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.hte-btn:hover {
  background: rgba(200, 180, 160, 0.15);
  color: rgb(19, 19, 19);
}
.hte-btn:active {
  transform: scale(0.93);
  background: rgba(200, 180, 160, 0.25);
}

.hte-btn--util { color: rgb(115, 113, 108); }
.hte-btn--action { color: rgb(115, 113, 108); }

.hte-btn--active {
  background: rgba(74, 87, 104, 0.10);
  color: #4a5768;
}

/* TTS loading pulse — subtle opacity breathe while audio loads */
@keyframes tts-loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hte-btn--loading {
  animation: tts-loading-pulse 1.2s ease infinite;
  pointer-events: none;
}

[data-theme="dark"] .hte-btn { color: #a098a8; }
[data-theme="dark"] .hte-btn:hover { background: rgba(255, 255, 255, 0.08); color: #c8c0d0; }
[data-theme="dark"] .hte-btn:active { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .hte-btn--active { background: rgba(74, 87, 104, 0.18); color: #b0bcc8; }

/* AI star button — neutral charcoal + shimmer */
.hte-btn--ai-star {
  color: #4a5768;
  position: relative;
  overflow: hidden;
}
.hte-btn--ai-star:hover {
  background: rgba(74, 87, 104, 0.08);
  color: rgb(19, 19, 19);
}
.hte-btn--ai-star:active {
  background: rgba(74, 87, 104, 0.16);
}
.hte-btn--ai-star svg {
  fill: currentColor;
  stroke: none;
}
/* Diagonal shimmer sweep — premium sparkle feel */
.hte-btn--ai-star::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  animation: sparkle-shimmer 4s ease infinite;
  pointer-events: none;
}
@keyframes sparkle-shimmer {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translateX(350%); opacity: 0; }
  31%, 99% { transform: translateX(-100%); opacity: 0; }
}
.hte-btn--ai-star:hover::after { animation-play-state: paused; opacity: 0; }
[data-theme="dark"] .hte-btn--ai-star { color: #c1c9d4; }
[data-theme="dark"] .hte-btn--ai-star:hover { background: rgba(193, 201, 212, 0.10); color: #e0e4ea; }
[data-theme="dark"] .hte-btn--ai-star::after { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); }

.hte-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.hte-btn--active svg { fill: currentColor; stroke: currentColor; }

.hte-divider {
  width: 1px; height: 16px;
  background: rgba(200, 180, 160, 0.3);
  margin: 0 3px; flex-shrink: 0;
}
[data-theme="dark"] .hte-divider { background: rgba(120, 110, 140, 0.25); }

@media (max-width: 700px) {
  .hte-btn { width: 36px; height: 36px; }
  .hte-btn svg { width: 18px; height: 18px; }
  .hte-toolbar { gap: 1px; padding: 3px; }
}

/* ════════════════════════════════════════════════
   AI CARD — floating chat panel
   ════════════════════════════════════════════════ */

.ai-card {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20001;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FCFCFA 0%, #FAFAF8 100%);
  border: 0.5px solid #E8E8E3;
  border-top-color: #EFEDE8;
  border-radius: 16px;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.03),
    0 2px 8px rgba(60,50,40,0.06),
    0 12px 40px rgba(60,50,40,0.10);
  font-family: 'Nunito Sans', sans-serif;
  animation: aiCardIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.ai-card.closing { animation: aiCardOut 0.18s ease forwards; }

@keyframes aiCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aiCardOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* ── Sidebar mode: AI card inside sidebar panel ── */
.ai-panel-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* When AI panel is active, clip overflow and fill height */
#ai-panel[style*="display: flex"] {
  overflow: hidden;
  height: 100%;
}

.ai-card--sidebar {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: 100%;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  background: #fafaf8 !important;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .ai-card--sidebar {
  background: var(--color-card, #1a2035) !important;
  border-color: transparent !important;
}
.ai-card--sidebar .ai-card-header {
  padding: 4px 12px;
  min-height: 0;
  height: 0;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
  transition: height 0.15s, min-height 0.15s, padding 0.15s;
}
.ai-card--sidebar .ai-card-header:has(.ai-new-chat-btn.visible) {
  min-height: 28px;
  height: auto;
  padding: 4px 12px;
}
[data-theme="dark"] .ai-card--sidebar .ai-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: transparent;
}

/* ── "Ny samtale" reset button ── */
.ai-new-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #8A8578);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s;
}
.ai-new-chat-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.ai-new-chat-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text, #566a7f);
}
.ai-new-chat-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme="dark"] .ai-new-chat-btn {
  color: #8592a3;
}
[data-theme="dark"] .ai-new-chat-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #cfd3ec;
}

/* Messages/chips area — center welcome + summary, top-align conversation */
/* Match .correction-content padding (20px) */
.ai-card--sidebar .ai-card-messages {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: 0;
  gap: 16px;
  background: #fafaf8;
}
[data-theme="dark"] .ai-card--sidebar .ai-card-messages {
  background: var(--color-card, #1a2035);
}
/* When conversation is active (messages flowing), align to top */
.ai-card--sidebar .ai-card-messages:has(.ai-msg) {
  justify-content: flex-start;
}

/* Match .sidebar-controls padding (0 20px 20px) */
.ai-card--sidebar .ai-card-input-row {
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  padding: 12px 24px 24px;
  margin: 0 !important;
  background: transparent;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
[data-theme="dark"] .ai-card--sidebar .ai-card-input-row {
  background: transparent;
}

/* ════════════════════════════════════════════════
   AI WELCOME STATE — centered icon + heading + chips
   Polished assistant feel, not a dead empty panel
   ════════════════════════════════════════════════ */

.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  text-align: center;
}

/* Icon badge with primary color tint */
.ai-welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #f0f1f5, #e4e6eb);
  color: #4a5568;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ai-welcome-icon svg {
  stroke: #4a5568;
  fill: none;
  width: 24px;
  height: 24px;
}
[data-theme="dark"] .ai-welcome-icon {
  background: linear-gradient(145deg, #2a3042, #232838);
  color: #cfd3ec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .ai-welcome-icon svg { stroke: #cfd3ec; }

/* Heading */
.ai-welcome-heading {
  font-size: 17px;
  font-weight: 650;
  color: var(--color-text, #2d3748);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .ai-welcome-heading { color: #cfd3ec; }

.ai-welcome-subtext {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-text-secondary, #8A8578);
  text-align: center;
  margin-bottom: 8px;
  margin-top: 4px;
  line-height: 1.4;
}
[data-theme="dark"] .ai-welcome-subtext { color: #8592a3; }

/* ── Chips inside sidebar: polished card-style buttons ── */
.ai-welcome .ai-chips {
  width: 100%;
  gap: 6px;
}
.ai-welcome .ai-chips--more { width: 100%; }

.ai-card--sidebar .ai-chip {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 10px;
  gap: 10px;
  transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
}
/* Chips toggle (Flere muligheder) — use accent color */
.ai-welcome .ai-chips-toggle {
  width: 100%;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a5568;
  opacity: 0.75;
}
.ai-welcome .ai-chips-toggle:hover { opacity: 1; }
[data-theme="dark"] .ai-welcome .ai-chips-toggle { color: #a3aed0; }

[data-theme="dark"] .ai-card {
  background: #2f3349;
  border-color: rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 2px 8px rgba(0,0,0,0.2),
    0 12px 40px rgba(0,0,0,0.3);
}

/* ── Header ── */
.ai-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 44px;
  background: #fff;
  border-bottom: 0.5px solid #ECEAE6;
  flex-shrink: 0;
}
[data-theme="dark"] .ai-card-header { border-color: rgba(255, 255, 255, 0.06); background: #333753; }

.ai-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #566a7f);
}
[data-theme="dark"] .ai-card-title { color: #cfd3ec; }
.ai-card-title svg { color: var(--color-text-secondary, rgb(60, 60, 58)); }

.ai-card-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.ai-card-close:hover { background: rgba(0,0,0,0.05); color: var(--color-text, #566a7f); }
[data-theme="dark"] .ai-card-close { color: #a3aed0; }
[data-theme="dark"] .ai-card-close:hover { background: rgba(255,255,255,0.06); color: #cfd3ec; }

/* ── Selected text quote ── */
.ai-card-quote {
  padding: 8px 16px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  background: #F5F4F0;
  border-bottom: 0.5px solid #ECEAE6;
  box-shadow: inset 0 1px 2px rgba(60,50,40,0.03);
  flex-shrink: 0;
  max-height: 52px;
  overflow: hidden;
}
[data-theme="dark"] .ai-card-quote {
  background: rgba(255,255,255,0.03);
  color: #8592a3;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Messages area ── */
.ai-card-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 120px;
  scroll-behavior: smooth;
}
/* Center the welcome state in both floating card and sidebar */
.ai-card-messages:has(.ai-welcome) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.ai-card-messages::-webkit-scrollbar { width: 4px; }
.ai-card-messages::-webkit-scrollbar-track { background: transparent; }
.ai-card-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 4px; }
.ai-card-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); }
[data-theme="dark"] .ai-card-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ai-card-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── Messages ── */
.ai-msg {
  animation: aiMsgIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-msg--user {
  align-self: flex-end;
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  background: var(--color-text, #384551);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.6;
  word-wrap: break-word;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.ai-msg--user p { margin: 0; }

[data-theme="dark"] .ai-msg--user {
  background: rgba(255, 255, 255, 0.12);
}

/* ── AI message wrapper ── */
.ai-msg-wrapper { position: relative; }

.ai-msg--assistant {
  align-self: flex-start;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text, #566a7f);
}
.ai-msg--assistant .ai-msg-wrapper {
  background: var(--sk-bg-subtle, #f5f5f3);
  padding: 12px 16px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  max-width: 82%;
}
[data-theme="dark"] .ai-msg--assistant { color: var(--color-text, #e8ecf4); }
[data-theme="dark"] .ai-msg--assistant .ai-msg-wrapper {
  background: var(--sk-bg-subtle, #1e2538);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ai-msg--assistant p { margin: 0 0 0.75em 0; }
.ai-msg--assistant p:first-child { margin-top: 0; }
.ai-msg--assistant p:last-child { margin-bottom: 0; }
.ai-msg--assistant strong { font-weight: 650; color: var(--color-text, #4a5568); }
[data-theme="dark"] .ai-msg--assistant strong { color: #f0f3fa; }
.ai-msg--assistant em { font-style: italic; }
.ai-msg--assistant ol, .ai-msg--assistant ul {
  margin: 0.5em 0 0.75em 0;
  padding-left: 1.4em;
}
.ai-msg--assistant ol { list-style: decimal; }
.ai-msg--assistant ul { list-style: disc; }
.ai-msg--assistant li {
  margin-bottom: 0.4em;
  padding-left: 0.2em;
  line-height: 1.65;
}
.ai-msg--assistant li:last-child { margin-bottom: 0; }
.ai-msg--assistant code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.15em 0.35em;
  border-radius: 5px;
  font-size: 0.875em;
  font-family: 'SF Mono', Consolas, monospace;
}
[data-theme="dark"] .ai-msg--assistant code { background: rgba(255, 255, 255, 0.06); }

.ai-msg--assistant blockquote {
  margin: 0.6em 0;
  padding: 8px 14px;
  border-left: 3px solid rgba(0, 0, 0, 0.12);
  border-radius: 0 8px 8px 0;
  background: rgba(0, 0, 0, 0.025);
  font-style: normal;
  font-weight: 450;
  font-size: 13px;
  color: var(--color-text-secondary, rgb(60, 60, 58));
}
.ai-msg--assistant blockquote p { margin: 0; }
[data-theme="dark"] .ai-msg--assistant blockquote {
  border-left-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.ai-msg--assistant hr {
  border: none;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  margin: 0.75em 0;
}
[data-theme="dark"] .ai-msg--assistant hr {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Message action buttons — matched to email ask-ai ── */
.ai-msg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .ai-msg-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.ai-msg-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s ease;
  position: relative;
}
.ai-msg-action-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  min-width: 44px;
  min-height: 44px;
}
.ai-msg-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary, #566a7f);
  opacity: 1;
}
.ai-msg-action-btn.active { color: rgb(19, 19, 19); opacity: 1; }
.ai-msg-action-btn.done { color: #22c55e; opacity: 1; }
.ai-msg-action-btn.loading { opacity: 1; }
.ai-msg-action-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
[data-theme="dark"] .ai-msg-action-btn { color: rgba(255, 255, 255, 0.35); }
[data-theme="dark"] .ai-msg-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

/* ── Loading state — shimmer skeleton ── */
.ai-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  width: 100%;
}
.ai-loading-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(74,85,104,0.08), rgba(74,85,104,0.03));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aiIconPulse 2s ease infinite;
}
.ai-loading-icon svg {
  width: 22px;
  height: 22px;
  stroke: #4a5568;
  fill: none;
  stroke-width: 1.5;
  opacity: 0.5;
}
@keyframes aiIconPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}
.ai-loading-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  letter-spacing: 0.02em;
}
.ai-loading-bar {
  width: 120px;
  height: 3px;
  background: rgba(74,85,104,0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-top: -4px;
}
.ai-loading-bar-fill {
  width: 40%;
  height: 100%;
  background: #4a5568;
  border-radius: 6px;
  opacity: 0.3;
  animation: aiBarSlide 1.8s ease infinite;
}
@keyframes aiBarSlide {
  0% { transform: translateX(-100%); opacity: 0.2; }
  50% { opacity: 0.5; }
  100% { transform: translateX(350%); opacity: 0.2; }
}
[data-theme="dark"] .ai-loading-icon {
  background: linear-gradient(135deg, rgba(207,211,236,0.10), rgba(207,211,236,0.04));
}
[data-theme="dark"] .ai-loading-icon svg { stroke: #cfd3ec; }
[data-theme="dark"] .ai-loading-text { color: #8592a3; }
[data-theme="dark"] .ai-loading-bar { background: rgba(207,211,236,0.08); }
[data-theme="dark"] .ai-loading-bar-fill { background: #cfd3ec; }

/* ── Legacy loading dots (chat mode) ── */
.ai-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--color-text-secondary, rgb(60, 60, 58));
}
.ai-loading-dots span { font-weight: 500; }
.ai-dot {
  width: 6px; height: 6px;
  background: var(--color-text-secondary, rgb(60, 60, 58));
  opacity: 0.4;
  border-radius: 50%;
  animation: aiDotPulse 1.4s ease infinite;
}
.ai-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 0.8; transform: scale(1.15); }
}
[data-theme="dark"] .ai-loading-dots { color: #8592a3; }
[data-theme="dark"] .ai-dot { background: #8592a3; }

/* ── Loading message bubble ── */
.ai-msg--loading {
  align-self: flex-start;
}
.ai-msg--loading .ai-loading-dots {
  background: var(--sk-bg-subtle, #f5f5f3);
  padding: 12px 16px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .ai-msg--loading .ai-loading-dots {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ai-msg--error {
  color: #b91c1c;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(220,53,69,0.06);
  border-radius: 10px;
  line-height: 1.5;
}
[data-theme="dark"] .ai-msg--error { background: rgba(220,53,69,0.1); color: #fca5a5; }

/* ── Chips (vertical, full-width) ── */
.ai-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
.ai-chips--more {
  padding-top: 0;
}
.ai-chips-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--color-text-secondary, #8A8578);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.ai-chips-toggle:hover { opacity: 1; }
[data-theme="dark"] .ai-chips-toggle { color: #8592a3; }

.ai-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
  text-align: left;
}
.ai-chip:hover {
  background: #fff;
  color: var(--color-text, #4a5568);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
  transform: translateY(-1px);
}
.ai-chip:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); }

.ai-chip svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none; stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.5;
  padding: 5px;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 8px;
  box-sizing: content-box;
}
.ai-chip:hover svg { opacity: 0.7; background: rgba(0, 0, 0, 0.045); }

.ai-chip-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text, #3a4a5c);
  line-height: 1.2;
}
.ai-chip-desc {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-secondary, #8A8578);
  margin-left: auto;
  opacity: 0.6;
  white-space: nowrap;
}
.ai-chip:hover .ai-chip-label { color: var(--color-text, #4a5568); }
.ai-chip:hover .ai-chip-desc { opacity: 0.9; }

[data-theme="dark"] .ai-chip {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #a3aed0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .ai-chip:hover {
  background: rgba(255,255,255,0.09);
  color: #cfd3ec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}
[data-theme="dark"] .ai-chip svg { stroke: #8592a3; background: rgba(255,255,255,0.06); }
[data-theme="dark"] .ai-chip-label { color: #cfd3ec; }
[data-theme="dark"] .ai-chip-desc { color: #6c7293; }
[data-theme="dark"] .ai-chip:hover .ai-chip-label { color: #e2e5f1; }

/* ── Input row (Google/Apple style — buttons INSIDE input) ── */
.ai-card-input-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-top: 0.5px solid #ECEAE6;
  flex-shrink: 0;
  background: #fff;
}
[data-theme="dark"] .ai-card-input-row {
  border-color: rgba(255, 255, 255, 0.06);
  background: transparent;
}

.ai-card-input-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: #fff;
  padding: 4px 4px 4px 16px;
  min-height: 46px;
  gap: 2px;
  box-sizing: border-box;
  transition: border-color 200ms, box-shadow 200ms, background 200ms;
}

.ai-card-input-wrap:focus-within {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
  background: var(--color-card, #fff);
}

[data-theme="dark"] .ai-card-input-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .ai-card-input-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.09);
}

.ai-card-input {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--color-text, #566a7f);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-width: 0;
  resize: none;
  overflow-y: hidden;
  line-height: 1.45;
  max-height: 120px;
  min-height: 20px;
  align-self: center;
}
.ai-card-input::placeholder {
  color: var(--color-text-secondary, rgb(60, 60, 58));
  opacity: 0.5;
}
[data-theme="dark"] .ai-card-input { color: var(--color-text, #e8ecf4); background: transparent !important; }
[data-theme="dark"] .ai-card-input::placeholder { color: rgba(255, 255, 255, 0.3); }

/* ── Mic + Send buttons (inside the input pill) ── */
.ai-card-mic,
.ai-card-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  padding: 0;
  transition: background 150ms, transform 120ms, opacity 150ms;
}

.ai-card-mic {
  color: var(--color-text-secondary, rgb(60, 60, 58));
  align-self: center;
  margin: 0;
  padding: 0;
}
.ai-card-mic:hover { background: rgba(0,0,0,0.04); color: var(--color-text, #566a7f); }
.ai-card-mic.recording {
  background: transparent;
  color: #dc3545;
  animation: none;
  position: relative;
}
.ai-card-mic.recording::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: #dc3545;
  border-radius: 50%;
  animation: micDot 1.5s ease infinite;
}
@keyframes micDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.ai-card-mic.connecting { opacity: 0.4; cursor: wait; }
.ai-card-mic.denied { color: #dc3545; animation: micShake 0.4s ease; }
@keyframes micShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
}
.ai-card-mic svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
[data-theme="dark"] .ai-card-mic { color: rgba(255, 255, 255, 0.35); }
[data-theme="dark"] .ai-card-mic:hover { background: rgba(255,255,255,0.06); color: #cfd3ec; }
[data-theme="dark"] .ai-card-mic.recording { background: transparent; color: #ef4444; }
[data-theme="dark"] .ai-card-mic.recording::after { background: #ef4444; }

.ai-card-send {
  background: var(--color-text, #384551);
  color: #fff;
}
.ai-card-send:hover { background: var(--color-text-secondary, rgb(60, 60, 58)); transform: scale(1.06); }
.ai-card-send:active { transform: scale(0.94); }
.ai-card-send:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; }
.ai-card-send svg {
  width: 15px; height: 15px;
  stroke: #fff; fill: none; stroke-width: 2;
}
[data-theme="dark"] .ai-card-send { background: rgba(255, 255, 255, 0.85); color: #1a2035; }
[data-theme="dark"] .ai-card-send:hover { background: #fff; }
[data-theme="dark"] .ai-card-send:disabled { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.3); }
[data-theme="dark"] .ai-card-send svg { stroke: #2f3349; }

/* ── Action buttons ── */
.ai-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ai-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 0.5px solid #E8E8E3;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text, #566a7f);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60,50,40,0.04);
  transition: all 0.15s;
  white-space: nowrap;
}
.ai-action-btn:hover { background: #FAFAF8; box-shadow: 0 2px 4px rgba(60,50,40,0.06); }
.ai-action-btn:active { transform: scale(0.97); }
.ai-action-btn:disabled { opacity: 0.5; cursor: default; }

.ai-action-btn--primary {
  background: #4a5568;
  border-color: #4a5568;
  color: #fff;
}
.ai-action-btn--primary:hover { background: #3d4756; }

[data-theme="dark"] .ai-action-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #cfd3ec;
}
[data-theme="dark"] .ai-action-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ai-action-btn--primary { background: #cfd3ec; border-color: #cfd3ec; color: #2f3349; }
[data-theme="dark"] .ai-action-btn--primary:hover { background: #e2e5f1; }

/* ── Citations ── */
.ai-citations {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 11.5px;
  color: var(--color-text-secondary, rgb(60, 60, 58));
}
[data-theme="dark"] .ai-citations { border-color: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary, #8a92a6); }
.ai-citations-label { font-weight: 650; margin-right: 4px; }
.ai-cite-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.2em;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
  font-size: 10px;
  padding: 0 3px;
  border-radius: 6px;
  margin: 0 1px;
  vertical-align: super;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.ai-cite-ref:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-text, #566a7f);
}
[data-theme="dark"] .ai-cite-ref { background: rgba(255, 255, 255, 0.08); color: var(--color-text-secondary, #8a92a6); }
[data-theme="dark"] .ai-cite-ref:hover { background: rgba(255, 255, 255, 0.14); color: #cfd3ec; }
.ai-cite-item { display: inline; margin-right: 8px; }

/* ── Shimmer fallback ── */
.ai-shimmer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text-secondary, rgb(60, 60, 58));
}

/* ════════════════════════════════════════════════
   CALENDAR PREVIEW
   ════════════════════════════════════════════════ */

.cal-preview { margin-bottom: 4px; }
.cal-preview-title {
  font-size: 15px; font-weight: 650;
  color: var(--color-text, #566a7f);
  margin-bottom: 10px; line-height: 1.3;
}
[data-theme="dark"] .cal-preview-title { color: #cfd3ec; }
.cal-preview-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-text-secondary, rgb(60, 60, 58));
  margin-bottom: 6px;
}
.cal-preview-row svg { flex-shrink: 0; opacity: 0.7; }
[data-theme="dark"] .cal-preview-row { color: #a3aed0; }
.cal-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════ */

.hte-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 20002;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--color-card, #fff);
  border: 0.5px solid var(--color-border, #e7e7e8);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--color-text, #566a7f);
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; white-space: nowrap;
  max-width: calc(100vw - 48px);
}
.hte-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.hte-toast svg { flex-shrink: 0; }
[data-theme="dark"] .hte-toast {
  background: #2f3349; border-color: rgba(255, 255, 255, 0.08);
  color: #cfd3ec; box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.hte-toast-link {
  color: #4a5568; text-decoration: none;
  font-weight: 650; margin-left: 4px;
}
.hte-toast-link:hover { text-decoration: underline; }
[data-theme="dark"] .hte-toast-link { color: #a3aed0; }

/* ── Spin icon ── */
@keyframes aiSpin { to { transform: rotate(360deg); } }
.spin-icon { animation: aiSpin 0.8s linear infinite; }

/* ════════════════════════════════════════════════
   INLINE CORRECTIONS — Grammarly-style background highlights
   No underlines. Clean colored backgrounds per category.
   Must beat bundle rule: #inputText *:not(.word-highlight) { background: #fff !important }
   ════════════════════════════════════════════════ */

/* ── Base correction mark ── */
#inputText mark.inline-correction {
  background-color: rgba(234, 179, 8, 0.18) !important;
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: 6px;
  cursor: pointer;
  padding: 1px 1px;
  position: relative;
  transition: background-color 0.15s ease, opacity 0.2s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── SPELLING — Soft red background ── */
#inputText mark.inline-correction[data-type="spelling"] {
  background-color: rgba(220, 38, 38, 0.15) !important;
}
#inputText mark.inline-correction[data-type="spelling"]:hover {
  background-color: rgba(220, 38, 38, 0.28) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="spelling"] {
  background-color: rgba(248, 113, 113, 0.18) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="spelling"]:hover {
  background-color: rgba(248, 113, 113, 0.32) !important;
}

/* ── GRAMMAR — Soft blue background ── */
#inputText mark.inline-correction[data-type="grammar"] {
  background-color: rgba(37, 99, 235, 0.14) !important;
}
#inputText mark.inline-correction[data-type="grammar"]:hover {
  background-color: rgba(37, 99, 235, 0.26) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="grammar"] {
  background-color: rgba(96, 165, 250, 0.18) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="grammar"]:hover {
  background-color: rgba(96, 165, 250, 0.32) !important;
}

/* ── STYLE — Soft purple background ── */
#inputText mark.inline-correction[data-type="style"] {
  background-color: rgba(124, 58, 237, 0.14) !important;
}
#inputText mark.inline-correction[data-type="style"]:hover {
  background-color: rgba(124, 58, 237, 0.26) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="style"] {
  background-color: rgba(167, 139, 250, 0.18) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="style"]:hover {
  background-color: rgba(167, 139, 250, 0.32) !important;
}

/* ── ENHANCEMENT — Soft teal background ── */
#inputText mark.inline-correction[data-type="enhancement"] {
  background-color: rgba(13, 148, 136, 0.15) !important;
}
#inputText mark.inline-correction[data-type="enhancement"]:hover {
  background-color: rgba(13, 148, 136, 0.28) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="enhancement"] {
  background-color: rgba(45, 212, 191, 0.18) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="enhancement"]:hover {
  background-color: rgba(45, 212, 191, 0.32) !important;
}

/* ── Sentence-scope: full paragraph highlight (Tone tab purple) ── */
#inputText mark.inline-correction[data-type="sentence"] {
  background-color: rgba(107, 91, 149, 0.10) !important;
  border-left: 3px solid rgba(107, 91, 149, 0.5);
  padding: 2px 1px;
  border-radius: 6px;
}
#inputText mark.inline-correction[data-type="sentence"]:hover {
  background-color: rgba(107, 91, 149, 0.20) !important;
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="sentence"] {
  background-color: rgba(155, 139, 191, 0.15) !important;
  border-left-color: rgba(155, 139, 191, 0.45);
}
[data-theme="dark"] #inputText mark.inline-correction[data-type="sentence"]:hover {
  background-color: rgba(155, 139, 191, 0.28) !important;
}

/* ── Panel isolation: hide marks from inactive tab ── */
#inputText mark.inline-correction.panel-hidden {
  background: transparent !important;
  border-color: transparent !important;
  cursor: text !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* ── Tone Diagnosis Card (observation + recommended action, merged) ── */
.tone-diagnosis {
  margin-top: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  text-align: center;
  max-width: 260px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tone-diagnosis--ok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #67c23a;
  font-weight: 500;
  background: rgba(103, 194, 58, 0.06);
  border-color: rgba(103, 194, 58, 0.15);
}
.tone-diagnosis--ok svg { stroke: #67c23a; flex-shrink: 0; }

/* ── Tone Result Score Card (none state) ── */
.tone-result {
  margin: 16px 0 8px;
}
.tone-result-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
}
.tone-result-num {
  font-size: 40px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -1px;
}
.tone-result-max {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-muted, #a1acb8);
}
.tone-result-verdict {
  font-size: 13px;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  font-weight: 500;
}
.tone-result-dims {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 2px;
}
.tone-result-dim {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.2px;
}
[data-theme="dark"] .tone-result-max { color: #6d7a88; }
[data-theme="dark"] .tone-result-verdict { color: #8592a3; }
[data-theme="dark"] .tone-result-dim {
  color: #8592a3;
  background: rgba(255, 255, 255, 0.06);
}
.tone-diagnosis-text {
  font-size: 13px;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: left;
}
.tone-diagnosis-text strong {
  color: var(--color-text, #384551);
}
.tone-diagnosis-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--color-text-muted, #a1acb8);
  margin-bottom: 14px;
}
.tone-diagnosis-more svg { stroke: var(--color-text-muted, #a1acb8); flex-shrink: 0; }
.tone-diagnosis-action {
  display: inline-block;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: var(--color-text, #384551);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.tone-diagnosis-action:hover { background: #2c3640; transform: translateY(-1px); }
.tone-diagnosis-action:active { transform: translateY(0); }
[data-theme="dark"] .tone-diagnosis {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .tone-diagnosis-more { color: #6d7a88; }
[data-theme="dark"] .tone-diagnosis-more svg { stroke: #6d7a88; }
[data-theme="dark"] .tone-diagnosis--ok {
  background: rgba(103, 194, 58, 0.08);
  border-color: rgba(103, 194, 58, 0.18);
}
[data-theme="dark"] .tone-diagnosis-text { color: #8592a3; }
[data-theme="dark"] .tone-diagnosis-action { background: #5a6acb; }
[data-theme="dark"] .tone-diagnosis-action:hover { background: #6b7ad6; }

/* ── Tone Consistency Bar ── */
.tone-consistency {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.tone-consistency-track {
  width: 100px;
  height: 5px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  overflow: hidden;
}
.tone-consistency-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}
.tone-consistency-label {
  font-size: 12px;
  color: var(--color-text-secondary, #8A8578);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .tone-consistency-track { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .tone-consistency-label { color: #8592a3; }

/* ── Paragraph Tone Map ── */
.tone-para-map {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  max-width: 240px;
}
.tone-para-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--color-text-secondary, #8A8578);
}
.tone-para-row--warn { color: #e07a5f; }
.tone-para-num { font-weight: 500; min-width: 52px; }
.tone-para-tone { flex: 1; }
.tone-para-ok { color: #67c23a; font-size: 11px; }
.tone-para-warn { color: #e07a5f; font-size: 11px; }
[data-theme="dark"] .tone-para-map { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .tone-para-row { color: #8592a3; }
[data-theme="dark"] .tone-para-row--warn { color: #e8967d; }

/* ── In-Editor Tone Highlights (amber underline — unique differentiator) ── */
#inputText .tone-hl {
  background: linear-gradient(transparent 65%, rgba(234, 179, 8, 0.28) 65%);
  border-radius: 1px;
  transition: background 0.2s;
}
#inputText .tone-hl:hover {
  background: linear-gradient(transparent 50%, rgba(234, 179, 8, 0.38) 50%);
}
[data-theme="dark"] #inputText .tone-hl {
  background: linear-gradient(transparent 65%, rgba(234, 179, 8, 0.22) 65%);
}
[data-theme="dark"] #inputText .tone-hl:hover {
  background: linear-gradient(transparent 50%, rgba(234, 179, 8, 0.32) 50%);
}

/* ── Tone dimension pills (descriptive labels, not action badges) ── */
.tone-dimensions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tone-dimension {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-secondary, #8A8578);
  cursor: default;
}
[data-theme="dark"] .tone-dimension {
  background: rgba(255, 255, 255, 0.06);
  color: #8592a3;
}

/* ── Tone back navigation ── */
.tone-back-nav {
  margin-top: 20px;
  padding-top: 10px;
  text-align: center;
}
.tone-back-link {
  background: none;
  border: none;
  padding: 6px 12px;
  color: var(--color-text-secondary, #8A8578);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s;
}
.tone-back-link:hover {
  color: var(--color-text, #384551);
}
[data-theme="dark"] .tone-back-link {
  color: #8592a3;
}
[data-theme="dark"] .tone-back-link:hover {
  color: #cfd3ec;
}

/* ── Fallback: no type attribute ── */
#inputText mark.inline-correction:not([data-type]) {
  background-color: rgba(234, 179, 8, 0.18) !important;
}
#inputText mark.inline-correction:not([data-type]):hover {
  background-color: rgba(234, 179, 8, 0.30) !important;
}

/* ── Entrance animation ── */
@keyframes correction-appear {
  0%   { background-color: rgba(234, 179, 8, 0.35); }
  100% { background-color: transparent; }
}
#inputText mark.inline-correction.just-appeared {
  animation: correction-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Correction popup ── */
.correction-popup {
  position: fixed;
  z-index: 100000;
  background: #fff;
  border: 0.5px solid #E8E8E3;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(60,50,40,0.14), 0 2px 8px rgba(60,50,40,0.06);
  font-family: 'Nunito Sans', sans-serif;
  padding: 0;
  max-width: 360px;
  min-width: 240px;
  overflow: hidden;
  animation: corrPopIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top left;
}
@keyframes corrPopIn {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.correction-popup--exiting {
  animation: corrPopOut 0.12s ease forwards;
}
@keyframes corrPopOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.97) translateY(4px); }
}
[data-theme="dark"] .correction-popup {
  background: #2f3349;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Category badge ── */
.correction-popup-category {
  padding: 10px 14px 0;
}
.correction-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.correction-popup-badge svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.correction-popup-badge--spelling {
  background: #fef2f2; color: #dc2626; border: 0.5px solid rgba(220,38,38,0.15);
}
.correction-popup-badge--grammar {
  background: #eff6ff; color: #2563eb; border: 0.5px solid rgba(37,99,235,0.15);
}
.correction-popup-badge--style {
  background: #f5f3ff; color: #7c3aed; border: 0.5px solid rgba(124,58,237,0.15);
}
.correction-popup-badge--enhancement {
  background: #f0fdfa; color: #0d9488; border: 0.5px solid rgba(13,148,136,0.15);
}
[data-theme="dark"] .correction-popup-badge--spelling {
  background: rgba(220,38,38,0.12); color: #fca5a5; border-color: rgba(252,165,165,0.15);
}
[data-theme="dark"] .correction-popup-badge--grammar {
  background: rgba(37,99,235,0.12); color: #93c5fd; border-color: rgba(147,197,253,0.15);
}
[data-theme="dark"] .correction-popup-badge--style {
  background: rgba(124,58,237,0.12); color: #c4b5fd; border-color: rgba(196,181,253,0.15);
}
[data-theme="dark"] .correction-popup-badge--enhancement {
  background: rgba(13,148,136,0.12); color: #5eead4; border-color: rgba(94,234,212,0.15);
}

/* ── Before → After preview ── */
.correction-popup-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 8px 14px;
}
.correction-popup-old {
  color: #b91c1c;
  text-decoration: line-through;
  text-decoration-color: rgba(185,28,28,0.4);
  font-weight: 500;
  background: rgba(185,28,28,0.06);
  padding: 1px 4px;
  border-radius: 6px;
}
[data-theme="dark"] .correction-popup-old {
  color: #fca5a5;
  text-decoration-color: rgba(252,165,165,0.4);
  background: rgba(252,165,165,0.08);
}
.correction-popup-arrow {
  stroke: var(--color-text-secondary, #8A8578);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.4;
}
.correction-popup-new {
  color: #15803d;
  font-weight: 650;
  background: rgba(21,128,61,0.06);
  padding: 1px 4px;
  border-radius: 6px;
}
[data-theme="dark"] .correction-popup-new {
  color: #86efac;
  background: rgba(134,239,172,0.08);
}
.correction-popup-label {
  color: var(--color-text-secondary, #8A8578);
  font-style: italic;
  font-size: 13px;
}

/* ── Explanation line ── */
.correction-popup-explanation {
  padding: 0 14px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary, #8A8578);
  border-bottom: 0.5px solid #f0efe9;
}
[data-theme="dark"] .correction-popup-explanation {
  color: #8592a3;
  border-bottom-color: #3b4065;
}

/* ── Explanation row: text + expand + TTS ── */
.correction-popup-explain-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.correction-popup-explain-text {
  flex: 1;
  min-width: 0;
}
.correction-popup-explain-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.correction-popup-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #8A8578);
  cursor: pointer;
  transition: all 0.15s ease;
}
.correction-popup-expand-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--color-text-primary, #4a5768);
}
[data-theme="dark"] .correction-popup-expand-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #c0c8d4;
}
.correction-popup-expand-btn svg {
  transition: transform 200ms ease;
}
.correction-popup-expand-btn.open svg {
  transform: rotate(180deg);
}
/* TTS button — same color as expand chevron */
.correction-popup-tts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #8A8578);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.correction-popup-tts-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--color-text-primary, #4a5768);
}
.correction-popup-tts-btn.active {
  color: rgb(19, 19, 19);
}
.correction-popup-tts-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none !important;
}
[data-theme="dark"] .correction-popup-tts-btn {
  color: var(--color-text-secondary, #8a92a6);
}
[data-theme="dark"] .correction-popup-tts-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #e8ecf4;
}
[data-theme="dark"] .correction-popup-tts-btn.active {
  color: #a78bfa;
}

/* ── Expandable detail ── */
.correction-popup-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease, padding 250ms ease;
  padding: 0;
}
.correction-popup-detail.open {
  max-height: 120px;
  padding: 6px 0 0;
}
.correction-popup-detail p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-secondary, #8A8578);
  opacity: 0.85;
}
[data-theme="dark"] .correction-popup-detail p {
  color: #8592a3;
}

/* ── Action buttons ── */
.correction-popup-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
}
.correction-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 0.5px solid #E8E8E3;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.correction-popup-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.correction-popup-btn--accept {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  flex: 1;
  justify-content: center;
}
.correction-popup-btn--accept:hover { background: #15803d; }
.correction-popup-btn--accept:active { transform: scale(0.97); }
.correction-popup-btn--reject {
  color: var(--color-text-secondary, rgb(60, 60, 58));
}
.correction-popup-btn--reject:hover {
  background: #f8f8f6;
  border-color: #ddd;
  color: var(--color-text, #566a7f);
}

/* Keyboard shortcut hints */
.correction-popup-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 650;
  font-family: 'SF Mono', 'Consolas', monospace;
  line-height: 1.5;
  border-radius: 6px;
  opacity: 0.7;
}
.correction-popup-btn--accept .correction-popup-kbd {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,0.2);
}
.correction-popup-btn--reject .correction-popup-kbd {
  background: rgba(0,0,0,0.04);
  color: inherit;
  border: 0.5px solid rgba(0,0,0,0.08);
}

/* ── Accept All (inside popup) ── */
.correction-popup-accept-all {
  padding: 4px 14px 0;
}
.correction-popup-btn--accept-all {
  width: 100%;
  justify-content: center;
  background: transparent;
  border: 0.5px solid #16a34a;
  color: #16a34a;
  font-weight: 600;
}
.correction-popup-btn--accept-all:hover {
  background: #16a34a;
  color: #fff;
}
.correction-popup-btn--accept-all:active {
  transform: scale(0.98);
}
[data-theme="dark"] .correction-popup-btn--accept-all {
  border-color: #22c55e;
  color: #22c55e;
}
[data-theme="dark"] .correction-popup-btn--accept-all:hover {
  background: #22c55e;
  color: #fff;
}

/* ── Footer link ── */
.correction-popup-footer {
  padding: 6px 14px 10px;
}
.correction-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--color-text-secondary, #8A8578);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.correction-popup-link:hover {
  opacity: 1;
  color: var(--color-text, #566a7f);
}
.correction-popup-link svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
}

/* ── Dark mode popup ── */
[data-theme="dark"] .correction-popup-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #a3aed0;
}
[data-theme="dark"] .correction-popup-btn--accept {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
[data-theme="dark"] .correction-popup-btn--accept:hover { background: #15803d; }
[data-theme="dark"] .correction-popup-btn--reject:hover {
  background: rgba(255,255,255,0.06);
  border-color: #6c7293;
  color: #cfd3ec;
}
[data-theme="dark"] .correction-popup-link { color: #6c7293; }
[data-theme="dark"] .correction-popup-link:hover { color: #a3aed0; }
[data-theme="dark"] .correction-popup-btn--reject .correction-popup-kbd {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}

/* ── Focus dimming — fade other marks when popup is open (Grammarly-style) ── */
#inputText.correction-focused mark.inline-correction {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
#inputText.correction-focused mark.inline-correction.correction-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.5);
  border-radius: 6px;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

/* ── Premium popup polish ── */
.correction-popup {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}
.correction-popup-btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
.correction-popup-btn--reject:hover {
  transform: translateY(-1px);
}
.correction-popup-kbd {
  opacity: 0.85;
}
[data-theme="dark"] #inputText.correction-focused mark.inline-correction {
  opacity: 0.35;
}
[data-theme="dark"] #inputText.correction-focused mark.inline-correction.correction-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.4);
}
[data-theme="dark"] .correction-popup {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ── Category summary badges (in AI card) ── */
.correction-summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}
.correction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  user-select: none;
}
.correction-badge:hover {
  transform: scale(1.06);
}
.correction-badge:active {
  transform: scale(0.96);
}
.correction-badge--active {
  box-shadow: 0 0 0 2px currentColor;
  transform: scale(1.06);
}
.correction-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.correction-badge--spelling { color: #dc2626; background: rgba(220,38,38,0.08); }
.correction-badge--grammar { color: #2563eb; background: rgba(37,99,235,0.08); }
.correction-badge--style { color: #7c3aed; background: rgba(124,58,237,0.08); }
.correction-badge--enhancement { color: #0d9488; background: rgba(13,148,136,0.08); }
/* (tone-dimension pills are styled separately below — not using correction-badge) */
[data-theme="dark"] .correction-badge--spelling { color: #fca5a5; background: rgba(248,113,113,0.12); }
[data-theme="dark"] .correction-badge--grammar { color: #93c5fd; background: rgba(96,165,250,0.12); }
[data-theme="dark"] .correction-badge--style { color: #c4b5fd; background: rgba(167,139,250,0.12); }
[data-theme="dark"] .correction-badge--enhancement { color: #5eead4; background: rgba(45,212,191,0.12); }
/* (correction-badge--tone removed — using tone-dimension instead) */

/* ── Dimmed corrections when category filter is active ── */
#inputText mark.inline-correction.correction-dimmed {
  opacity: 0.15 !important;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ── Correction summary (in AI card) ── */
.correction-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px;
  gap: 8px;
}
.correction-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.correction-summary-count {
  font-size: 15px;
  font-weight: 650;
  color: var(--color-text, #566a7f);
}
[data-theme="dark"] .correction-summary-count { color: #cfd3ec; }

.correction-summary-hint {
  font-size: 12.5px;
  color: var(--color-text-secondary, #8A8578);
  line-height: 1.5;
}
[data-theme="dark"] .correction-summary-hint { color: #8592a3; }

.correction-summary-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ── Correction loading ── */
.correction-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 0;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ai-card, .ai-card.closing, .ai-msg, .hte-toolbar { animation: none !important; transition: none !important; }
  .ai-dot, .ai-card-mic.recording, .spin-icon { animation: none !important; }
  .correction-popup { animation: none !important; }
}


/* ════════════════════════════════════════════════
   AI DIAGNOSIS — text analysis cards
   ════════════════════════════════════════════════ */

.ai-diagnosis {
  width: 100%;
  margin: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-diagnosis-empty {
  font-size: 12.5px;
  color: var(--color-text-secondary, #8A8578);
  text-align: center;
  padding: 8px 0;
  line-height: 1.4;
}
.ai-diagnosis-empty strong {
  font-weight: 650;
  color: var(--color-text, #566a7f);
}
[data-theme="dark"] .ai-diagnosis-empty { color: #8592a3; }
[data-theme="dark"] .ai-diagnosis-empty strong { color: #cfd3ec; }

.ai-diagnosis-good {
  font-size: 12.5px;
  color: #16a34a;
  text-align: center;
  padding: 10px 12px;
  background: #f0fdf4;
  border-radius: 10px;
  border-left: 3px solid #22c55e;
  line-height: 1.4;
}
[data-theme="dark"] .ai-diagnosis-good {
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
  border-left-color: #4ade80;
}

/* Diagnosis card */
.ai-diagnosis-card {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-left: 3px solid #e5e5ea;
  animation: aiDiagIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aiDiagIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-diagnosis-card--positive { border-left-color: #22c55e; }
.ai-diagnosis-card--suggestion { border-left-color: #f59e0b; }
.ai-diagnosis-card--issue { border-left-color: #ef4444; }

[data-theme="dark"] .ai-diagnosis-card {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ai-diagnosis-card-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text, #566a7f);
}
[data-theme="dark"] .ai-diagnosis-card-text { color: #cfd3ec; }

/* Loading shimmer */
.ai-diagnosis-loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-diagnosis-shimmer {
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f0f0ee 25%, #e8e8e4 50%, #f0f0ee 75%);
  background-size: 200% 100%;
  animation: diagShimmer 1.5s infinite;
}
@keyframes diagShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-theme="dark"] .ai-diagnosis-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
}




/* ════════════════════════════════════════════════
   AI PANEL v2 — Primary action + unified action list
   ════════════════════════════════════════════════ */

/* ── Primary action card (Analysér tekst) ── */
/* ── Primary chip: soft dark charcoal, not harsh black ──
 * Inspired by .ai-card-send but softer — readable white text on muted charcoal.
 * Stefan: "WAY too black" on solid #384551. Use a subtle gradient to lift it. */
.ai-chip--primary {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(135deg, #4f5e6f 0%, #3b4857 50%, #364252 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.25s ease;
  text-align: left;
  margin-bottom: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.ai-chip--primary:hover {
  background: linear-gradient(135deg, #566780 0%, #415264 50%, #3b4d5e 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.ai-chip--primary:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), inset 0 1px 3px rgba(0,0,0,0.1);
  transition-duration: 0.1s;
}
.ai-chip--primary svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.95;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: content-box;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ai-chip--primary:hover svg {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.04);
}
.ai-chip--primary .ai-chip-label {
  font-weight: 650;
  font-size: 15px;
  color: #fff;
}

[data-theme="dark"] .ai-chip--primary {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.06);
  color: #1a2035;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .ai-chip--primary:hover {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .ai-chip--primary svg {
  stroke: #2f3349;
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .ai-chip--primary .ai-chip-label {
  color: #1a2035;
}

/* ── Sparkle icon animation (primary chip) ── */
@keyframes ai-sparkle-spin {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.7; }
  25%  { transform: rotate(8deg) scale(1.05); opacity: 0.9; }
  50%  { transform: rotate(0deg) scale(1.1); opacity: 1; }
  75%  { transform: rotate(-8deg) scale(1.05); opacity: 0.9; }
  100% { transform: rotate(0deg) scale(1); opacity: 0.7; }
}
@keyframes ai-plus-blink {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.ai-sparkle-icon {
  transform-origin: center;
}
.ai-spark-main {
  animation: ai-sparkle-spin 3s ease-in-out infinite;
  transform-origin: 12px 12px;
  will-change: transform, opacity;
}
.ai-spark-plus {
  animation: ai-plus-blink 1.8s ease infinite;
  transform-origin: 21px 5px;
  will-change: transform, opacity;
}
.ai-spark-plus:last-child {
  animation-delay: 0.9s;
}

/* Hover — faster, more alive */
.ai-chip--primary:hover .ai-spark-main {
  animation-duration: 1.2s;
}
.ai-chip--primary:hover .ai-spark-plus {
  animation-duration: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .ai-spark-main, .ai-spark-plus { animation: none !important; opacity: 0.7; }
  .tone-bar { animation: none !important; opacity: 0.7; }
}

/* ── Tone equalizer icon animation (primary chip) ── */
@keyframes tone-bar-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50%      { transform: scaleY(1.3); opacity: 1; }
}
.tone-eq-icon {
  transform-origin: center;
}
.tone-bar {
  transform-origin: center;
  animation: tone-bar-pulse 2.4s ease infinite;
  will-change: transform, opacity;
}
.tone-bar-1 { animation-delay: 0s; }
.tone-bar-2 { animation-delay: 0.2s; }
.tone-bar-3 { animation-delay: 0.4s; }
.tone-bar-4 { animation-delay: 0.6s; }
.tone-bar-5 { animation-delay: 0.3s; }
.tone-bar-6 { animation-delay: 0.1s; }
.ai-chip--primary:hover .tone-bar {
  animation-duration: 0.8s;
}

.ai-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-chip--primary .ai-chip-desc {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
  letter-spacing: 0.01em;
  margin-left: 0;
  white-space: normal;
}
[data-theme="dark"] .ai-chip--primary .ai-chip-desc {
  color: rgba(26, 32, 53, 0.6);
}
/* CRITICAL: prevent generic .ai-chip:hover from turning white text dark on the charcoal button */
.ai-chip--primary:hover .ai-chip-label,
.ai-chip--primary:hover .ai-chip-desc {
  color: #fff !important;
}
[data-theme="dark"] .ai-chip--primary:hover .ai-chip-label {
  color: #1a2035 !important;
}
[data-theme="dark"] .ai-chip--primary:hover .ai-chip-desc {
  color: rgba(26, 32, 53, 0.6) !important;
}

/* ── Unified action list (3 quick actions) ── */
.ai-actions-list {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ai-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--color-text, #4a5568);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: left;
  position: relative;
}

.ai-action-item + .ai-action-item {
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ai-action-item:hover {
  background: rgba(0, 0, 0, 0.028);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.ai-action-item:active {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(0) scale(0.98);
  box-shadow: none;
  transition-duration: 0.08s;
}

.ai-action-item svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.55;
  padding: 6px;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 8px;
  box-sizing: content-box;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.ai-action-item:hover svg {
  opacity: 0.75;
  background: rgba(0, 0, 0, 0.06);
  transform: scale(1.05);
}

.ai-action-label {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-text-primary, rgb(19, 19, 19));
  letter-spacing: -0.005em;
}

/* No color-coded borders — clean neutral style */
.ai-action--grammar,
.ai-action--improve,
.ai-action--formal { border-left: none; }
.ai-action--grammar svg,
.ai-action--improve svg,
.ai-action--formal svg { stroke: currentColor; opacity: 0.5; }

/* Dark mode */
[data-theme="dark"] .ai-actions-list {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .ai-action-item {
  color: #cfd3ec;
}
[data-theme="dark"] .ai-action-item + .ai-action-item {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .ai-action-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
[data-theme="dark"] .ai-action-item svg {
  background: rgba(255, 255, 255, 0.06);
  stroke: #8592a3;
}
[data-theme="dark"] .ai-action-item:hover svg {
  background: rgba(255, 255, 255, 0.1);
  stroke: #cfd3ec;
}
[data-theme="dark"] .ai-action-label { color: #cfd3ec !important; }




/* ── "eller vælg selv" divider between primary + action list ── */
.ai-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 16px 0;
  color: var(--color-text-secondary, #8A8578);
  font-size: 11px;
  font-weight: 400;
}
.ai-divider::before,
.ai-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0.6;
}
[data-theme="dark"] .ai-divider {
  color: #8592a3;
}
[data-theme="dark"] .ai-divider::before,
[data-theme="dark"] .ai-divider::after {
  background: rgba(255, 255, 255, 0.1);
}


/* ── Subtext italic ── */
.ai-welcome-subtext {
  font-style: italic;
}
/* ════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .ai-card {
    bottom: 0; right: 0; left: 0;
    width: 100%; max-width: 100%; max-height: 75vh;
    border-radius: 14px 14px 0 0; border-bottom: none;
  }
  .ai-chips { gap: 6px; }
  .ai-chip { padding: 9px 12px; font-size: 12.5px; }
  .ai-chip-desc { display: none; }
  .ai-welcome { max-width: 100%; }
  .ai-welcome-heading { font-size: 13px; }
  .ai-welcome-subtext { display: none; }

  /* Bottom sheet popup on mobile */
  .correction-popup {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-width: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    animation: corrPopSlideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
  .correction-popup--exiting { animation: corrPopSlideDown 0.15s ease forwards; }
  @keyframes corrPopSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes corrPopSlideDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
  }
  .correction-popup::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 6px;
    margin: 10px auto 4px;
  }
  [data-theme="dark"] .correction-popup::before { background: #4b5563; }
  .correction-popup-btn { padding: 12px 16px; font-size: 14px; }
  .correction-popup-btn--accept { flex: 2; }
}

/* ── AI Empty State — "write some text first" ── */
.ai-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  min-height: 200px;
  gap: 4px;
}

.ai-empty-icon {
  width: 44px;
  height: 44px;
  color: var(--color-text-primary, rgb(19, 19, 19));
  opacity: 0.6;
  margin-bottom: 12px;
}

.ai-empty-headline {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  font-weight: 650;
  color: var(--color-text-primary, rgb(19, 19, 19));
  line-height: 1.3;
  margin-bottom: 6px;
}

.ai-empty-body {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary, rgb(60, 60, 58));
  line-height: 1.5;
  max-width: 220px;
  margin-top: 4px;
}

.ai-empty-btn {
  margin-top: 16px;
  padding: 8px 24px;
  background: transparent;
  color: var(--color-text-primary, rgb(19, 19, 19));
  border: 0.5px solid var(--color-text-primary, rgb(19, 19, 19));
  border-radius: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-empty-btn:hover {
  background: var(--color-text-primary, rgb(19, 19, 19));
  color: #fff;
}

[data-theme="dark"] .ai-empty-headline { color: #cfd3ec; }
[data-theme="dark"] .ai-empty-body { color: #8592a3; }
[data-theme="dark"] .ai-empty-icon { color: #c4c5d0; opacity: 0.5; }
[data-theme="dark"] .ai-empty-btn { border-color: #c4c5d0; color: #c4c5d0; }
[data-theme="dark"] .ai-empty-btn:hover { background: #c4c5d0; color: #fff; }

/* Completion state — matches ai-empty-state layout */
.ai-completion-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(74, 87, 104, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  animation: completion-pop 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.ai-completion-icon svg {
  stroke: #4a5768;
}
/* Checkmark draw-in animation (Stripe-style) */
.ai-completion-icon svg path,
.ai-completion-icon svg polyline {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: completion-draw 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes completion-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes completion-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.ai-completion-state .ai-empty-headline { animation: completion-fade 0.4s ease 0.2s both; }
.ai-completion-state .ai-empty-body { animation: completion-fade 0.4s ease 0.3s both; }
.ai-completion-state .ai-empty-btn { animation: completion-fade 0.4s ease 0.4s both; }
@keyframes completion-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .ai-completion-icon { background: rgba(193, 201, 212, 0.10); }
[data-theme="dark"] .ai-completion-icon svg { stroke: #c1c9d4; }

/* Cancel button on loading state */
.ai-cancel-btn { opacity: 0; animation: completion-fade 0.4s ease 1.5s both; }

/* Better spacing for correction summary inside ai-empty-state */
.ai-completion-state .correction-summary-badges { margin-top: 12px; }
.ai-completion-state .ai-empty-body { margin-top: 8px; }
.ai-completion-state .correction-summary-actions { margin-top: 16px; gap: 10px; }
.ai-completion-state .ai-empty-headline { margin-top: 4px; }

/* ── Standardized spacing for all assistant panel states ── */
/* Base: 8px icon→heading, 12px heading→body, 12px body→badges, 16px →buttons */
.ai-empty-state { gap: 0; }
.ai-empty-state .ai-completion-icon { margin-bottom: 8px; }
.ai-empty-state .ai-loading-icon { margin-bottom: 8px; }
.ai-empty-state .ai-empty-icon { margin-bottom: 8px; }
.ai-empty-state .ai-empty-headline { margin-top: 0; margin-bottom: 0; }
.ai-empty-state .ai-empty-body { margin-top: 12px; }
.ai-empty-state .correction-summary-badges { margin-top: 12px; }
.ai-empty-state .ai-empty-btn { margin-top: 16px; }
.ai-empty-state .correction-summary-actions { margin-top: 16px; gap: 10px; }
.ai-empty-state .ai-loading-bar { margin-top: 12px; }
.ai-empty-state .ai-cancel-btn { margin-top: 16px; }
/* Remove old scattered overrides */
.ai-completion-state .ai-empty-body { margin-top: 12px; }
.ai-completion-state .correction-summary-badges { margin-top: 12px; }
.ai-completion-state .correction-summary-actions { margin-top: 16px; }
.ai-completion-state .ai-empty-headline { margin-top: 0; }

/* ── Chip group sections ── */
.ai-chip-group { margin-top: 20px; width: 100%; }
.ai-chip-group:first-of-type { margin-top: 16px; }
.ai-chip-group + .ai-chip-group { padding-top: 0; }
.ai-chip-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-secondary, #97928a);
  margin-bottom: 4px;
  padding-left: 12px;
  opacity: 0.7;
  text-align: left;
}
[data-theme="dark"] .ai-chip-group-label { color: #6c7293; }
[data-theme="dark"] .ai-chip-group + .ai-chip-group { border-color: rgba(255,255,255,0.06); }

/* Remove old toggle & more styles (no longer used) */
.ai-chips-toggle, .ai-chips--more { display: none; }

/* Hide old group elements */
.ai-chip-group-label { display: none; }
.ai-chip-group { margin-top: 0; }

/* ════════════════════════════════════════════════
   NUCLEAR: Kill ALL focus rings — Apple style
   Cursor is the only indicator. No outlines, no rings.
   ════════════════════════════════════════════════ */
button:focus,
button:focus-visible,
.ai-chip:focus,
.ai-chip:focus-visible,
.ai-chip--primary:focus,
.ai-chip--primary:focus-visible,
.ai-action-item:focus,
.ai-action-item:focus-visible,
.ai-card-send:focus,
.ai-card-send:focus-visible,
.ai-card-mic:focus,
.ai-card-mic:focus-visible,
.ai-card-input:focus,
.ai-card-input:focus-visible,
.hk-dropdown-option:focus,
.hk-dropdown-option:focus-visible,
.hk-dropdown-option:active,
.correction-popup-btn:focus,
.correction-popup-btn:focus-visible,
.hte-btn:focus,
.hte-btn:focus-visible,
.sidebar-icon-btn:focus,
.sidebar-icon-btn:focus-visible,
.correction-level-container:focus,
.correction-level-container:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Also kill on the correction sidebar buttons */
.correction-sidebar button:focus,
.correction-sidebar button:focus-visible,
#ai-panel button:focus,
#ai-panel button:focus-visible,
#tone-panel button:focus,
#tone-panel button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Tone Tab ── */

#tone-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Tone tab uses same CSS as AI tab — no custom styles needed */