/* Sofia ADHD/Dyslexia-First Compose Features
   Owned by Email robot. Loaded after the main Blod Bolge overlay. */

/* Sofia warm-paper polish: full-height flow, pressable actions, anchored footer. */
.bb-compose-sofia {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  background: linear-gradient(180deg, var(--bb-cream, #FAF7F3) 0%, var(--bb-white, #FFFDFB) 100%);
  color: var(--bb-warm-text, #5C4D43);
}

.bb-compose-sofia-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 12px 7px 14px;
  border-bottom: 1px solid rgba(92, 77, 67, 0.06);
}

/* ── #2991: "Ny samtale" reset (quiet pill) ──────────────────
   Hidden in the welcome/empty state; revealed only during active chat via
   :has(.bb-compose-sofia-body--active-chat). margin-right:auto keeps it on the
   left while the title + fold chevron stay clustered on the right. */
.bb-sofia-reset-btn {
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 5px 10px;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 8px;
  /* White chip, same language as the suggestion/refine pills. */
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(58, 47, 38, 0.07);
  color: var(--bb-warm-text, #5C4D43);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.bb-sofia-reset-icon {
  flex: 0 0 auto;
}

.bb-compose-sofia:has(.bb-compose-sofia-body--active-chat) .bb-sofia-reset-btn {
  display: inline-flex;
}

.bb-sofia-reset-btn:hover {
  background: rgba(168, 197, 184, 0.18);
  border-color: rgba(110, 138, 126, 0.35);
  color: var(--bb-sage-dark, #4A7A68);
}

.bb-sofia-reset-btn:focus-visible {
  outline: none;
  border-color: var(--bb-sage-dark, #4A7A68);
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.25);
}

.bb-sofia-close-btn {
  display: none;
}

.email-compose-embed .bb-sofia-close-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: rgba(92, 77, 67, 0.7);
  transition: background .15s ease, color .15s ease;
}

.email-compose-embed .bb-sofia-close-btn:hover {
  background: rgba(92, 77, 67, 0.08);
  color: rgb(92, 77, 67);
}

.email-compose-embed .bb-sofia-close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(92, 77, 67, 0.18);
}

.bb-compose-sofia-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bb-compose-sofia .ask-ai-messages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 16px 20px;
  background: #FBF8F2;
}

/* ── Chat message bubbles ─────────────────────────────────────
   Mirrors the /skrivebord/ AI card (.ai-msg): the person speaks in a
   filled bubble on the right; Sofia answers as flat, flowing text on the
   left (her drafts/cards bring their own surface). Light-mode base only —
   dark mode is handled in email-darkmode-detail-polish.css.
   Restores styling that was stranded on the retired .bb-sofia-chat-* markup
   when message rendering moved to the shared .ask-ai-msg contract. */
.bb-compose-sofia .ask-ai-msg {
  animation: sofia-fade-in 0.18s ease;
  max-width: 100%;
}

/* Design panel 2026-07-02 (Morten): the solid dark-brown fill was the heaviest ink in the whole
   panel, spent on an acknowledgement — replaced with warm linen so the DRAFT stays the loudest
   thing. 6.36:1 text contrast; radius joins the app's 12px vocabulary (tail kept). Button taps
   no longer echo at all — this bubble now only appears for the user's own typed words. */
.bb-compose-sofia .ask-ai-msg-user {
  align-self: flex-end;
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 12px 12px 4px 12px;
  background: #EBE3D8;
  color: var(--bb-warm-text, #5C4D43);
  border: 1px solid rgba(228, 220, 212, 0.7);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.05);
}

.bb-compose-sofia .ask-ai-msg-ai {
  align-self: stretch;
  max-width: 100%;
  background: transparent;
  color: #3A2F26;
  font-family: var(--font-family);
  font-size: var(--email-fs-body-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.bb-compose-sofia .ask-ai-msg-ai strong { font-weight: 650; }

/* Calm spacing for plain replies (chat/help) — never touches the draft
   result card, which owns its own internal layout. */
.bb-compose-sofia .ask-ai-msg-ai:not(:has(.bb-sofia-result-actions)) p { margin: 0 0 6px; }
.bb-compose-sofia .ask-ai-msg-ai:not(:has(.bb-sofia-result-actions)) p:last-child { margin-bottom: 0; }
.bb-compose-sofia .ask-ai-msg-ai:not(:has(.bb-sofia-result-actions)) ul,
.bb-compose-sofia .ask-ai-msg-ai:not(:has(.bb-sofia-result-actions)) ol { margin: 6px 0 8px; padding-left: 1.3em; }
.bb-compose-sofia .ask-ai-msg-ai:not(:has(.bb-sofia-result-actions)) li { margin-bottom: 4px; line-height: 1.5; }

.bb-compose-sofia .ask-ai-msg.is-quiet { opacity: 0.82; }

/* Thinking state ("Sofia skriver…") — three calm pulsing dots. */
.bb-compose-sofia .ask-ai-msg-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bb-sage-dark, #4A7A68);
}

.bb-compose-sofia .ask-ai-dots {
  display: inline-flex;
  gap: 4px;
}

.bb-compose-sofia .ask-ai-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  animation: sofia-pulse 1.2s ease-in-out infinite;
}

.bb-compose-sofia .ask-ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.bb-compose-sofia .ask-ai-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── UX audit fixes (4-persona review) ────────────────────────
   #1 The cold-start suggestion buttons must never sit above a live chat.
   JS clears them; this is the belt-and-suspenders guarantee. */
.bb-compose-sofia .ask-ai-messages:has(.ask-ai-msg:not(.is-quiet)) .ask-ai-welcome {
  display: none !important;
}

/* #2 (revised): the floating voice orb is a tool many use to WRITE by voice and it
   is already draggable with a persisted position — so the ORB ball stays available.
   But its PROACTIVE suggestion pill (#ss-orb-pill — e.g. a calendar nudge) must not
   interrupt mid-compose (round-2 audit #4), so suppress just the pill while the
   compose dialog is open; it returns when the dialog closes. The orb itself is untouched. */
body.email-compose-is-open #ss-orb-pill { display: none !important; }

/* Design panel 2026-07-02: the "Kun et forslag" proposal-flag line was removed from the JS
   (dyslexia reading load; the headline + explicit Indsæt button carry the meaning) — its
   styles went with it. */

/* #8 Give Sofia's plain replies a quiet anchor so consecutive turns don't blur.
   Never touches the draft card (own surface) or the loading/quiet states. */
.bb-compose-sofia .ask-ai-msg-ai:not(:has(.bb-sofia-result-actions)):not(.ask-ai-msg-loading):not(.is-quiet) {
  border-left: 2px solid rgba(110, 138, 126, 0.30);
  padding-left: 11px;
}

/* #9 Reassure that nothing is sent automatically (shown in the empty state). */
.bb-compose-sofia .bb-sofia-reassure {
  margin: 12px 2px 0;
  font: 400 11.5px/1.4 var(--font-family);
  color: var(--bb-warm-text-light, #8B7B6B);
  text-align: center;
  opacity: 0.9;
}

/* ── Row: transparent layout slot ────────────────────────── */
.bb-compose-sofia .ask-ai-input-row {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: 100%;
}

/* ── Shell: single chrome surface ────────────────────────── */
.bb-compose-sofia .calm-input-shell {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  /* 19/7 (Morten): rent hvidt felt — creme faldt i ét med panel-baggrunden. */
  background: #FFFFFF;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 14px;
  margin: 8px 12px 12px;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.bb-compose-sofia .calm-input-shell:focus-within {
  border-color: rgba(228, 220, 212, 0.7);
  outline: none;
  box-shadow: none;
}

.bb-compose-sofia .ask-ai-input.ask-ai-input-highlight {
  border-color: rgba(110, 138, 126, 0.45);
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.12);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.bb-compose-sofia .ask-ai-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  height: auto;
  padding: 6px 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--bb-warm-text, #5C4D43);
  resize: none;
  max-height: 120px;
  overflow-y: auto;
}

.bb-compose-sofia .ask-ai-input::placeholder {
  color: #9A8E82;
  font-weight: 400;
}

.bb-compose-sofia .ask-ai-mic {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  border: 0;
  background: transparent;
  color: rgb(92, 77, 67);
}

.bb-compose-sofia .ask-ai-mic svg,
.bb-compose-sofia .ask-ai-send svg {
  width: 18px;
  height: 18px;
}

.bb-compose-sofia .ask-ai-mic:hover {
  background: rgba(228, 220, 212, 0.35);
  color: #5C4D43;
}

.bb-compose-sofia .ask-ai-send {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  border: none;
  background: #6E8A7E;
  color: #fff;
}

.bb-compose-sofia .ask-ai-send:hover {
  background: #4A7A68;
}

.email-page .bb-compose-sofia .ask-ai-send:hover:not(:disabled) {
  background: #4A7A68;
}

.bb-compose-sofia .ask-ai-send:active {
  transform: scale(0.96);
}

.bb-compose-sofia .ask-ai-mic:focus-visible,
.bb-compose-sofia .ask-ai-send:focus-visible {
  outline: 2px solid #6e8a7e;
  outline-offset: 2px;
}

.bb-compose-sofia .ask-ai-send:disabled {
  background: #c9d3cd;
  cursor: default;
  transform: none;
}

/* ── Mic recording state ────────────────────────────────── */
.bb-compose-sofia .ask-ai-mic.recording,
.bb-compose-sofia .ask-ai-mic.ss-mic--listening,
.bb-compose-sofia .ask-ai-mic.ss-mic--recording,
.bb-compose-sofia .ask-ai-mic.is-recording {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}

.bb-compose-sofia .ask-ai-mic:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}


.bb-sofia-reply-chips {
  padding: 0 16px 12px;
}

.bb-sofia-chips-label {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--bb-warm-text-light, #8B7B6B);
  margin: 0 0 8px;
  letter-spacing: 0;
}

.bb-sofia-reply-chip {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(168, 197, 184, 0.08);
  border: 1.5px solid rgba(168, 197, 184, 0.25);
  border-radius: 14px;
  color: var(--bb-warm-text, #5C4D43);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.bb-sofia-reply-chip:hover {
  border-color: var(--bb-sage-dark, #4A7A68);
  background: rgba(168, 197, 184, 0.14);
  transform: translateY(-1px);
}

.bb-sofia-reply-chip:focus-visible {
  outline: 2px solid #6e8a7e; /* was outline:none with an inert offset — chips were invisible to keyboard */
  outline-offset: 2px;
}

.bb-sofia-reply-chip-label {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--bb-sage-dark, #4A7A68);
  margin-bottom: 2px;
}

.bb-sofia-reply-chip-preview {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--bb-warm-text, #5C4D43);
  line-height: 1.4;
}

.bb-sofia-reply-chip--custom {
  background: transparent;
  border-style: dashed;
  opacity: 0.76;
}

.bb-sofia-reply-chip--custom:hover {
  opacity: 1;
}

.bb-sofia-chip-skeleton {
  display: block;
}

.bb-sofia-chip-skeleton-item {
  height: 52px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(168, 197, 184, 0.08) 25%, rgba(168, 197, 184, 0.15) 50%, rgba(168, 197, 184, 0.08) 75%);
  background-size: 200% 100%;
  border-radius: 14px;
  animation: sofia-shimmer 1.5s infinite;
}

.bb-sofia-chip-skeleton--short {
  width: 70%;
  height: 44px;
}

/* Input-card rules removed — compose Sofia now uses .ask-ai-input-row contract */

/* ── Welcome loading state (#2282) ───────────────────────────── */

.ask-ai-welcome--loading .ask-ai-suggestion {
  pointer-events: none;
  opacity: 0.5;
}

.ask-ai-welcome--loading .ask-ai-suggestion[aria-busy="true"] {
  opacity: 1;
}

.ask-ai-suggestion__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ask-ai-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes ask-ai-spin {
  to { transform: rotate(360deg); }
}

/* ── Skeleton bubble (#2282) ─────────────────────────────────── */

.ask-ai-message--skeleton {
  display: block;
  padding: 16px 18px;
  border-radius: 14px 14px 14px 4px;
  background: #FFFEFB;
  max-width: 320px;
  width: 88%;
  margin: 8px 0;
  box-sizing: border-box;
}

.bb-compose-sofia .ask-ai-message--skeleton {
  display: block;
  padding: 16px 18px;
  max-width: 320px;
  width: 88%;
  box-sizing: border-box;
}

.ask-ai-skeleton-line {
  height: 11px;
  border-radius: 6px;
  margin: 6px 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(110,138,126,0.10) 25%, rgba(110,138,126,0.20) 50%, rgba(110,138,126,0.10) 75%);
  background-size: 200% 100%;
  animation: calmShimmer 1.4s ease-in-out infinite;
}

.ask-ai-skeleton-line:nth-child(1) { width: 55%; }
.ask-ai-skeleton-line:last-child { width: 80%; }

@keyframes calmShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Loading ──────────────────────────────────────────────────── */

.bb-sofia-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0 16px 12px;
}

.bb-sofia-loading-text {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--bb-sage-dark, #4A7A68);
  animation: sofia-pulse 1.5s ease-in-out infinite;
}

/* ── Compose Flash Confirm ────────────────────────────────────── */

.bb-sofia-flash {
  animation: sofia-flash-confirm 0.3s ease-out;
}

@keyframes sofia-flash-confirm {
  0% { box-shadow: 0 0 0 0 rgba(139, 175, 156, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(139, 175, 156, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(139, 175, 156, 0); }
}

/* ── Calendar Warning ─────────────────────────────────────────── */

.bb-sofia-calendar-warn {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: #856404;
  animation: sofia-fade-in 0.2s ease-out;
}

/* ── TTS Button ─────────────────────────────────────────── */

.bb-sofia-tts-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 32px);
  min-height: 44px;
  margin: 8px 16px;
  padding: 12px 14px;
  background: var(--bb-white, #FFFDFB);
  border: 1px solid rgba(92, 77, 67, 0.16);
  border-radius: 14px;
  color: var(--bb-warm-text, #5C4D43);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.bb-sofia-tts-btn:hover {
  border-color: rgba(92, 77, 67, 0.24);
  background: var(--bb-cream, #FAF7F3);
  box-shadow: 0 4px 12px rgba(92, 77, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.bb-sofia-tts-btn.is-playing {
  border-color: var(--bb-sage-dark, #4A7A68);
  background: rgba(168, 197, 184, 0.1);
}

.bb-sofia-tts-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--bb-sage-dark, #4A7A68);
}

.bb-sofia-tts-btn.is-playing .bb-sofia-tts-icon svg {
  stroke: var(--bb-sage-dark, #4A7A68);
  animation: sofia-pulse 1.5s infinite;
}

.bb-sofia-tts-label {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bb-warm-text, #5C4D43);
}

@keyframes sofia-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes sofia-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Context Bar ────────────────────────────────────────── */

.bb-sofia-context-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px;
  margin: 4px 16px 12px;
  background: rgba(78, 83, 112, 0.05);
  border-radius: 10px;
  border-left: 3px solid var(--bb-slate-dark, #4E5370);
}

.bb-sofia-context-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.bb-sofia-context-icon svg {
  stroke: var(--bb-slate-dark, #4E5370);
}

.bb-sofia-context-text {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--bb-warm-text, #5C4D43);
}

.bb-sofia-context-loading {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--bb-warm-text-light, #8B7B6B);
  font-style: italic;
}

/* ── Mic Recording ──────────────────────────────────────── */

.bb-compose-sofia .ask-ai-mic.is-recording,
.bb-compose-sofia .ask-ai-mic.ss-mic--listening,
.bb-compose-sofia .ask-ai-mic.ss-mic--recording {
  background: var(--bb-rose-dark, #9B6050);
  border-color: var(--bb-rose-dark, #9B6050);
  color: var(--bb-white, #F7F2EA);
}

.bb-compose-sofia .ask-ai-mic.is-recording svg,
.bb-compose-sofia .ask-ai-mic.ss-mic--listening svg,
.bb-compose-sofia .ask-ai-mic.ss-mic--recording svg {
  stroke: currentColor;
  animation: sofia-pulse 1s infinite;
}

/* ── Messages ───────────────────────────────────────────── */

.bb-sofia-message {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bb-sofia-message--success {
  background: rgba(168, 197, 184, 0.12);
  border-color: rgba(74, 122, 104, 0.2);
}

.bb-sofia-message--info {
  background: rgba(78, 83, 112, 0.08);
  border-color: rgba(78, 83, 112, 0.16);
}

.bb-sofia-message--error {
  background: rgba(212, 168, 154, 0.1);
  border-color: rgba(155, 96, 80, 0.2);
}

.bb-sofia-message-icon {
  flex: 0 0 auto;
  font-weight: var(--font-weight-bold);
}

.bb-sofia-message--success .bb-sofia-message-icon {
  color: var(--bb-sage-dark, #4A7A68);
}

.bb-sofia-message--error .bb-sofia-message-icon {
  color: var(--bb-rose-dark, #9B6050);
}

/* ── Reduced Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bb-compose-sofia .ask-ai-msg,
  .bb-compose-sofia .calm-input-shell,
  .bb-sofia-chip-skeleton,
  .bb-sofia-loading-text,
  .bb-compose-sofia .ask-ai-mic.is-recording,
  .bb-sofia-flash,
  .bb-sofia-calendar-warn,
  .bb-sofia-reply-chip,
  .bb-compose-sofia .ask-ai-mic,
  .bb-compose-sofia .ask-ai-send,
  .bb-sofia-tts-btn,
  .ask-ai-message--skeleton,
  .ask-ai-skeleton-line,
  .ask-ai-suggestion__spinner,
  .email-compose-embed .bb-sofia-close-btn {
    transition: none !important;
    animation: none !important;
  }

  .bb-sofia-reply-chip:hover,
  .bb-compose-sofia .ask-ai-mic:hover,
  .bb-compose-sofia .ask-ai-send:hover,
  .bb-compose-sofia .ask-ai-mic,
  .bb-compose-sofia .ask-ai-send {
    transform: none !important;
  }

  @keyframes sofia-shimmer {
    0%, 100% { background-position: 0 0; }
  }

  @keyframes sofia-pulse {
    0%, 100% { opacity: 1; }
  }

  @keyframes calmShimmer {
    0%, 100% { background-position: 0 0; }
  }

  @keyframes ask-ai-spin {
    to { transform: rotate(0deg); }
  }
}

/* ── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .bb-sofia-reply-chip {
    min-height: 48px;
    padding: 14px 16px;
  }
}

[data-theme="dark"] .bb-compose-sofia-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bb-sofia-reset-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 221, 212, 0.18);
  color: #B8A898;
}

[data-theme="dark"] .bb-sofia-reset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(168, 197, 184, 0.4);
  color: #E8DDD4;
}

[data-theme="dark"] .email-compose-embed .bb-sofia-close-btn {
  color: rgba(232, 221, 212, 0.72);
}

[data-theme="dark"] .email-compose-embed .bb-sofia-close-btn:hover,
[data-theme="dark"] .email-compose-embed .bb-sofia-close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #E8DDD4;
}

/* ── Dark Mode ──────────────────────────────────────────── */

[data-theme="dark"] .bb-compose-sofia .calm-input-shell {
  background: rgba(42, 38, 34, 0.6) !important;
  border-color: rgba(232, 221, 212, 0.16) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .bb-compose-sofia .ask-ai-input {
  color: #e8ddd4 !important;
}

[data-theme="dark"] .bb-compose-sofia .ask-ai-input::placeholder {
  color: #a89888 !important;
}

[data-theme="dark"] .bb-compose-sofia .ask-ai-mic {
  color: #a89888 !important;
}

[data-theme="dark"] .bb-compose-sofia .ask-ai-send {
  background: rgba(232, 221, 212, 0.18) !important;
}

[data-theme="dark"] .bb-compose-sofia .ask-ai-send:hover {
  background: rgba(232, 221, 212, 0.26) !important;
}

[data-theme="dark"] .bb-compose-sofia .ask-ai-send:disabled {
  background: rgba(232, 221, 212, 0.10) !important;
}

[data-theme="dark"] .ask-ai-message--skeleton {
  background: rgba(168,197,184,0.06);
}

[data-theme="dark"] .ask-ai-skeleton-line {
  background: linear-gradient(90deg, rgba(110,138,126,0.10) 25%, rgba(110,138,126,0.18) 50%, rgba(110,138,126,0.10) 75%);
  background-size: 200% 100%;
}

[data-theme="dark"] .bb-sofia-reply-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 221, 212, 0.14);
}

[data-theme="dark"] .bb-sofia-reply-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(232, 221, 212, 0.24);
}

[data-theme="dark"] .bb-sofia-reply-chip-label {
  color: var(--bb-warm-text-light, #C9BAAA);
}

[data-theme="dark"] .bb-sofia-reply-chip-preview,
[data-theme="dark"] .bb-sofia-context-text,
[data-theme="dark"] .bb-sofia-tts-label {
  color: #E8DDD4;
}

[data-theme="dark"] .bb-sofia-chip-preview {
  color: #a89888 !important;
}

[data-theme="dark"] .bb-sofia-loading-text {
  color: var(--bb-warm-text-light, #C9BAAA) !important;
}

[data-theme="dark"] .bb-sofia-calendar-warn {
  background: rgba(255, 193, 7, 0.08) !important;
  border-color: rgba(255, 193, 7, 0.2) !important;
  color: #ffc107 !important;
}

[data-theme="dark"] .bb-sofia-chips-label {
  color: #a89888 !important;
}

[data-theme="dark"] .bb-sofia-tts-btn {
  background: rgba(78, 83, 112, 0.08);
  border-color: rgba(78, 83, 112, 0.2);
}

[data-theme="dark"] .bb-sofia-tts-btn:hover {
  background: rgba(78, 83, 112, 0.14);
}

[data-theme="dark"] .bb-sofia-context-bar {
  background: rgba(78, 83, 112, 0.08);
  border-left-color: rgba(78, 83, 112, 0.4);
}

[data-theme="dark"] .bb-sofia-message--success {
  background: rgba(168, 197, 184, 0.08);
  border-color: rgba(168, 197, 184, 0.15);
  color: #E8DDD4;
}

[data-theme="dark"] .bb-sofia-message--info {
  background: rgba(78, 83, 112, 0.08);
  border-color: rgba(78, 83, 112, 0.2);
  color: #E8DDD4;
}

[data-theme="dark"] .bb-sofia-message--error {
  background: rgba(212, 168, 154, 0.06);
  border-color: rgba(212, 168, 154, 0.12);
  color: #E8DDD4;
}

@keyframes sofia-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Smart Draft Button ───────────────────────────────── */

.bb-sofia-smart-draft {
  padding: 12px 16px 8px;
  animation: sofia-fade-in 0.25s ease;
}

.bb-sofia-smart-draft-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  background: var(--bb-sage-dark, #4A7A68);
  border: none;
  border-radius: 14px;
  color: var(--bb-white, #F7F2EA);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.bb-sofia-smart-draft-btn:hover {
  background: var(--bb-sage-text, #3D6B57);
  transform: translateY(-1px);
}

.bb-sofia-smart-draft-btn:active {
  transform: scale(0.98);
}

.bb-sofia-smart-draft-btn:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.bb-sofia-smart-draft-btn.is-loading .bb-sofia-smart-draft-icon {
  animation: sofia-pulse 1s infinite;
}

.bb-sofia-smart-draft-icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.bb-sofia-smart-draft-text {
  flex: 1;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: left;
}

.bb-sofia-smart-draft-arrow {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  opacity: 0.7;
}

.bb-sofia-smart-draft-hint {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--bb-warm-text-light, #8B7B6B);
  margin: 8px 0 0;
  padding-left: 2px;
}

/* ── Refinement Chips ───────────────────────────────────── */

.bb-sofia-refinement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 12px;
  animation: sofia-fade-in 0.25s ease;
}

.bb-sofia-refinement-chip {
  min-height: 36px;
  padding: 8px 16px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bb-sage-dark, #4A7A68);
  background: transparent;
  border: 1px solid rgba(168, 197, 184, 0.4);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.bb-sofia-refinement-chip:hover {
  background: rgba(168, 197, 184, 0.15);
  border-color: var(--bb-sage-dark, #4A7A68);
  transform: translateY(-1px);
}

.bb-sofia-refinement-chip:active {
  transform: scale(0.96);
}

.bb-sofia-refinement-chip.is-active {
  background: rgba(168, 197, 184, 0.3);
  border-color: var(--bb-sage-dark, #4A7A68);
  animation: sofia-pulse 1.2s infinite;
}

.bb-sofia-refinement-chip:disabled {
  opacity: 0.5;
  cursor: progress;
  transform: none;
}

/* ── Dark Mode — Smart Draft & Refinement ─────────────── */

[data-theme="dark"] .bb-sofia-smart-draft-btn {
  background: rgba(232, 221, 212, 0.16);
}

[data-theme="dark"] .bb-sofia-smart-draft-btn:hover {
  background: rgba(232, 221, 212, 0.24);
}

[data-theme="dark"] .bb-sofia-refinement-chip {
  color: var(--bb-warm-text-light, #C9BAAA) !important;
  background: transparent !important;
  border-color: rgba(232, 221, 212, 0.20) !important;
}

[data-theme="dark"] .bb-sofia-refinement-chip:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(232, 221, 212, 0.28) !important;
}

[data-theme="dark"] .bb-sofia-refinement-chip.is-active {
  background: rgba(232, 221, 212, 0.18) !important;
  border-color: rgba(232, 221, 212, 0.34) !important;
}

[data-theme="dark"] .bb-sofia-smart-draft-hint {
  color: #B8A898;
}

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

.bb-sofia-draft-cards {
  padding: 4px 16px 12px;
  animation: sofia-fade-in 0.25s ease;
}

.bb-sofia-draft-cards-label {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--bb-sage-dark, #4A7A68);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.bb-sofia-draft-card {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(168, 197, 184, 0.06);
  border: 1.5px solid rgba(168, 197, 184, 0.2);
  border-radius: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bb-sofia-draft-card:hover {
  border-color: rgba(168, 197, 184, 0.4);
  background: rgba(168, 197, 184, 0.1);
}

.bb-sofia-draft-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bb-sofia-draft-card-label {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--bb-sage-dark, #4A7A68);
}

.bb-sofia-draft-card-badge {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bb-sage-dark, #4A7A68);
  background: rgba(168, 197, 184, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bb-sofia-draft-card-preview {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--bb-warm-text, #5C4D43);
  margin: 0 0 10px;
}

.bb-sofia-draft-card-use {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bb-sage-dark, #4A7A68);
  background: rgba(168, 197, 184, 0.12);
  border: 1.5px solid rgba(168, 197, 184, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.bb-sofia-draft-card-use:hover {
  background: var(--bb-sage-dark, #4A7A68);
  border-color: var(--bb-sage-dark, #4A7A68);
  color: var(--bb-white, #F7F2EA);
  transform: translateY(-1px);
}

.bb-sofia-draft-card-use:focus-visible {
  outline: 2px solid #6e8a7e; /* was outline:none with an inert offset */
  outline-offset: 2px;
}

.bb-sofia-draft-card-use:active {
  transform: scale(0.97);
}

.bb-sofia-draft-cards-skeleton {
  display: block;
}

.bb-sofia-draft-card-skeleton {
  height: 96px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(168, 197, 184, 0.06) 25%, rgba(168, 197, 184, 0.12) 50%, rgba(168, 197, 184, 0.06) 75%);
  background-size: 200% 100%;
  border-radius: 14px;
  animation: sofia-shimmer 1.5s infinite;
}

/* ── Draft Cards Dark Mode ────────────────────────────── */

[data-theme="dark"] .bb-sofia-draft-card {
  background: rgba(168, 197, 184, 0.04);
  border-color: rgba(168, 197, 184, 0.12);
}

[data-theme="dark"] .bb-sofia-draft-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(232, 221, 212, 0.22);
}

[data-theme="dark"] .bb-sofia-draft-card-label {
  color: var(--bb-warm-text-light, #C9BAAA);
}

[data-theme="dark"] .bb-sofia-draft-card-badge {
  color: var(--bb-warm-text-light, #C9BAAA);
  background: rgba(232, 221, 212, 0.08);
}

[data-theme="dark"] .bb-sofia-draft-card-preview {
  color: #E8DDD4;
}

[data-theme="dark"] .bb-sofia-draft-cards-label {
  color: var(--bb-warm-text-light, #C9BAAA);
}

[data-theme="dark"] .bb-sofia-draft-card-use {
  color: var(--bb-warm-text-light, #C9BAAA);
  background: rgba(232, 221, 212, 0.08);
  border-color: rgba(232, 221, 212, 0.18);
}

[data-theme="dark"] .bb-sofia-draft-card-use:hover {
  background: rgba(232, 221, 212, 0.18);
  border-color: rgba(232, 221, 212, 0.28);
  color: #E8DDD4;
}

/* ── AI Snippet Loading ───────────────────────────────── */

.email-snippet-loading {
  display: inline;
  color: var(--bb-sage-dark, #4A7A68);
  font-size: var(--font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  .bb-sofia-smart-draft-btn,
  .bb-sofia-refinement-chip,
  .bb-sofia-refinement-chips,
  .bb-sofia-smart-draft,
  .bb-sofia-draft-card,
  .bb-sofia-draft-card-use,
  .bb-sofia-draft-cards {
    transition: none !important;
    animation: none !important;
  }

  .bb-sofia-smart-draft-btn:hover,
  .bb-sofia-refinement-chip:hover,
  .bb-sofia-draft-card-use:hover {
    transform: none !important;
  }

  .email-snippet-loading {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .bb-sofia-refinement-chip {
    min-height: 40px;
  }
}

html[data-theme="dark"] .bb-compose-sofia .ask-ai-mic.is-recording,
html[data-theme="dark"] .bb-compose-sofia .ask-ai-mic.ss-mic--listening,
html[data-theme="dark"] .bb-compose-sofia .ask-ai-mic.ss-mic--recording,
[data-theme="dark"] .bb-compose-sofia .ask-ai-mic.is-recording,
[data-theme="dark"] .bb-compose-sofia .ask-ai-mic.ss-mic--listening,
[data-theme="dark"] .bb-compose-sofia .ask-ai-mic.ss-mic--recording {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #c0392b !important;
  background-color: #c0392b !important;
  border-color: #c0392b !important;
  color: #fff !important;
}

/* ── Post-Draft Chips (calendar warning + task suggestion) ──── */

.sofia-post-draft-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
  max-width: 100%;
  animation: sofia-chip-slide-in 0.2s ease;
}

@keyframes sofia-chip-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sofia-calendar-warning,
.sofia-task-suggestion,
.sofia-chip-success {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.sofia-calendar-warning {
  background: rgba(212, 168, 154, 0.15);
  border: 1.5px solid rgba(155, 96, 80, 0.2);
  color: var(--bb-warm-text, #5C4D43);
}

.sofia-task-suggestion {
  background: rgba(139, 175, 156, 0.15);
  border: 1.5px solid rgba(74, 122, 104, 0.2);
  color: var(--bb-warm-text, #5C4D43);
}

.sofia-chip-success {
  background: rgba(74, 160, 110, 0.12);
  border: 1.5px solid rgba(74, 160, 110, 0.25);
  color: var(--bb-sage-dark, #4A7A68);
  font-weight: 600;
  animation: sofia-chip-success-fade 3s ease forwards;
}

@keyframes sofia-chip-success-fade {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

.sofia-chip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.sofia-calendar-warning .sofia-chip-icon svg {
  stroke: var(--bb-rose-dark, #9B6050);
}

.sofia-task-suggestion .sofia-chip-icon svg {
  stroke: var(--bb-sage-dark, #4A7A68);
}

.sofia-chip-success .sofia-chip-icon {
  font-size: var(--font-size-md);
  color: var(--bb-sage-dark, #4A7A68);
}

.sofia-chip-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sofia-chip-due {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bb-sage-dark, #4A7A68);
  background: rgba(139, 175, 156, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.sofia-chip-create {
  flex-shrink: 0;
  min-height: 32px;
  padding: 4px 14px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--bb-white, #F7F2EA);
  background: var(--bb-sage-dark, #4A7A68);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.sofia-chip-create:hover {
  background: var(--bb-sage-text, #3D6B57);
  transform: translateY(-1px);
}

.sofia-chip-create:active {
  transform: scale(0.96);
}

.sofia-chip-create:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.sofia-chip-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  line-height: 1;
  color: var(--bb-warm-text-light, #8B7B6B);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.sofia-chip-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

/* Design panel 2026-07-02: the post-draft chips were keyboard-invisible (no focus rule at all). */
.sofia-chip-create:focus-visible,
.sofia-chip-dismiss:focus-visible {
  outline: 2px solid #6e8a7e;
  outline-offset: 2px;
}

/* The linen user bubble's light border must not glow in dark (bg+color are themed by
   darkmode-detail-polish; only the 2026-07-02 border needs a dark twin). */
[data-theme="dark"] .bb-compose-sofia .ask-ai-msg-user {
  border-color: rgba(232, 221, 212, 0.14);
}

/* ── Post-Draft Chips — Dark Mode ─────────────────────────── */

[data-theme="dark"] .sofia-calendar-warning {
  background: rgba(212, 168, 154, 0.1) !important;
  border-color: rgba(212, 168, 154, 0.18) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .sofia-task-suggestion {
  background: rgba(232, 221, 212, 0.08) !important;
  border-color: rgba(232, 221, 212, 0.18) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .sofia-chip-success {
  background: rgba(232, 221, 212, 0.08) !important;
  border-color: rgba(232, 221, 212, 0.18) !important;
  color: var(--bb-warm-text-light, #C9BAAA) !important;
}

[data-theme="dark"] .sofia-chip-icon svg {
  opacity: 0.9 !important;
}

[data-theme="dark"] .sofia-chip-due {
  background: rgba(232, 221, 212, 0.10) !important;
  color: var(--bb-warm-text-light, #C9BAAA) !important;
}

[data-theme="dark"] .sofia-chip-create {
  background: rgba(232, 221, 212, 0.18) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .sofia-chip-create:hover {
  background: rgba(232, 221, 212, 0.26) !important;
}

[data-theme="dark"] .sofia-chip-dismiss {
  color: #B8A898 !important;
}

[data-theme="dark"] .sofia-chip-dismiss:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Post-Draft Chips — Mobile ─────────────────────────────── */

@media (max-width: 600px) {
  .sofia-calendar-warning,
  .sofia-task-suggestion,
  .sofia-chip-success {
    flex-wrap: wrap;
    min-height: 44px;
    padding: 10px 12px;
  }

  .sofia-chip-text {
    flex-basis: calc(100% - 60px);
  }

  .sofia-chip-due {
    order: 3;
  }

  .sofia-chip-create {
    min-height: 44px;
    flex-grow: 1;
    order: 4;
  }

  .sofia-chip-dismiss {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Post-Draft Chips — Reduced Motion ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sofia-post-draft-chips,
  .sofia-chip-create,
  .sofia-chip-success {
    transition: none !important;
    animation: none !important;
  }

  .sofia-chip-create:hover {
    transform: none !important;
  }
}

/* ── Sofia Trigger Button ────────────────────────────────── */

.bb-sofia-trigger-wrap {
  padding: 8px 16px 4px;
  position: relative;
}

.bb-sofia-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  min-height: 36px;
  background: transparent;
  border: 1px solid rgba(228, 220, 212, 0.4);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bb-sofia-trigger-btn:hover {
  border-color: var(--bb-sage, #A8C5B8);
  background: var(--bb-sage-bg, #F2F8F5);
}

.bb-sofia-trigger-icon {
  width: 14px;
  height: 14px;
  stroke: var(--bb-sage, #A8C5B8);
  flex-shrink: 0;
}

.bb-sofia-trigger-text {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bb-warm-text-light, #8B7B6B);
}

/* ── Sofia Menu ──────────────────────────────────────────── */

.bb-sofia-menu {
  position: absolute;
  left: 16px;
  bottom: calc(100% + 4px);
  z-index: 100;
  min-width: 200px;
  background: var(--sk-bg-surface, #FFFEFB);
  border: 1px solid var(--sk-border, rgba(228, 220, 212, 0.72));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.bb-sofia-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

.bb-sofia-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bb-warm-text, #5C4D43);
  text-align: left;
  transition: background 0.15s ease;
}

.bb-sofia-menu-item:hover {
  background: rgba(168, 197, 184, 0.12);
}

.bb-sofia-menu-item svg {
  flex-shrink: 0;
  stroke: var(--bb-sage-dark, #4A7A68);
}

/* ── Single Draft Card Actions Row ───────────────────────── */

.bb-sofia-draft-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-sofia-draft-card-regen {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bb-sage-dark, #4A7A68);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bb-sofia-draft-card-regen:hover {
  color: var(--bb-sage-text, #3D6B57);
}

/* ── Inline Context Summary ──────────────────────────────── */

.bb-sofia-context-bar--inline {
  margin: 4px 16px 8px;
  border: none;
  background: transparent;
  border-left: none;
  padding: 0 0 0 2px;
}

.bb-sofia-context-bar--inline .bb-sofia-context-text {
  font-size: var(--font-size-sm);
  color: var(--sk-text-secondary, var(--bb-warm-text-light, #8B7B6B));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  cursor: default;
}

.bb-sofia-context-bar--inline .bb-sofia-context-text.is-expandable {
  cursor: pointer;
}

.bb-sofia-context-bar--inline .bb-sofia-context-text.is-expanded {
  white-space: normal;
}

/* ── Sofia Trigger — Dark Mode ───────────────────────────── */

[data-theme="dark"] .bb-sofia-trigger-btn {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bb-sofia-trigger-btn:hover {
  border-color: var(--bb-sage, #A8C5B8) !important;
  background: rgba(168, 197, 184, 0.1) !important;
}

[data-theme="dark"] .bb-sofia-trigger-text {
  color: #B8A898 !important;
}

[data-theme="dark"] .bb-sofia-menu {
  background: #241F1B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bb-sofia-menu-item {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .bb-sofia-menu-item:hover {
  background: rgba(168, 197, 184, 0.1) !important;
}

[data-theme="dark"] .bb-sofia-draft-card-regen {
  color: #A8C5B8 !important;
}

[data-theme="dark"] .bb-sofia-context-bar--inline .bb-sofia-context-text {
  color: #B8A898 !important;
}

/* ── Sofia Trigger — Mobile ──────────────────────────────── */

@media (max-width: 768px) {
  .bb-sofia-trigger-btn {
    min-height: 44px;
    padding: 8px 16px;
  }

  .bb-sofia-menu-item {
    min-height: 48px;
  }
}

/* ── Sofia Trigger — Reduced Motion ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bb-sofia-trigger-btn,
  .bb-sofia-menu {
    transition: none !important;
  }

  .bb-sofia-menu.is-open {
    transform: none !important;
  }
}

/* ── Compose Sofia post-draft frontier ─────────────────────── */

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(228, 220, 212, 0.9) !important;
  /* Pure white + a real shadow: on the cream panel the pills must read as
     pressable buttons at a glance, not as tinted rows (Morten 2026-07-02). */
  background: #FFFFFF !important;
  color: #3A2F26 !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  gap: 10px !important;
  box-shadow: 0 1px 3px rgba(58, 47, 38, 0.07) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #5C4D43 !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion--primary {
  background: #4A7A68 !important;
  border-color: #4A7A68 !important;
  color: #FFFEFB !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion--primary svg {
  color: #FFFEFB !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion--primary:hover {
  background: #3F6A5A !important;
  border-color: #3F6A5A !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion:not(.ask-ai-suggestion--primary):hover {
  background: #FBF8F2 !important;
  border-color: #DCD3C5 !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion:active {
  transform: translateY(1px) !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion:focus-visible {
  outline: 2px solid #4A7A68 !important;
  outline-offset: 2px !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion:focus:not(:focus-visible) {
  outline: none !important;
}

/* ── Tone popover wrapper ─────────────────────────────────── */

.email-page .bb-compose-sofia .ask-ai-welcome .calm-tone-wrap {
  position: relative;
  width: 100%;
}

.email-page .bb-compose-sofia .ask-ai-welcome .calm-tone-chevron {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: transform 120ms ease !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion[aria-expanded="true"] .calm-tone-chevron {
  transform: rotate(180deg) !important;
}

.email-page .bb-compose-sofia .ask-ai-welcome .calm-tone-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  /* Pure white like the pills — the popover is a raised surface (Morten 2026-07-02). */
  background: #FFFFFF;
  border: 1px solid #E8E1D6;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(58, 47, 38, 0.1);
  z-index: 20;
}

/* ── Tone chips ───────────────────────────────────────────── */

.email-page .bb-compose-sofia .calm-tone-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  /* Buttons don't inherit font-family — without this the chips rendered in the
     browser's default button font, off from the rest of the panel. */
  font-family: var(--font-family, Inter, system-ui, sans-serif);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms ease;
}

.email-page .bb-compose-sofia .calm-tone-chip:hover {
  background: #FBF8F2;
}

.email-page .bb-compose-sofia .calm-tone-chip:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 2px;
}

.email-page .bb-compose-sofia .calm-tone-chip:focus:not(:focus-visible) {
  outline: none;
}

.email-page .bb-compose-sofia .calm-tone-label {
  color: #3A2F26;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.email-page .bb-compose-sofia .calm-tone-sub {
  color: #9A8E82;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion:active {
    transform: none !important;
  }
  .email-page .bb-compose-sofia .ask-ai-welcome .calm-tone-chevron {
    transition: none !important;
  }
}

/* ── Dark theme ───────────────────────────────────────────── */

[data-theme="dark"] .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion {
  /* Dark twin of the white-pill lift: enough surface to read as a button. */
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #F0EBE5 !important;
}

[data-theme="dark"] .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion svg {
  color: #C4B8AB !important;
}

[data-theme="dark"] .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion--primary {
  background: #4A7A68 !important;
  border-color: #4A7A68 !important;
  color: #F0EBE5 !important;
}

[data-theme="dark"] .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion--primary svg {
  color: rgba(240, 235, 229, 0.85) !important;
}

[data-theme="dark"] .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion--primary:hover {
  background: #5A8A78 !important;
  border-color: #5A8A78 !important;
}

[data-theme="dark"] .email-page .bb-compose-sofia .ask-ai-welcome .ask-ai-suggestion:not(.ask-ai-suggestion--primary):hover {
  background: rgba(168, 197, 184, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .email-page .bb-compose-sofia .calm-tone-pop {
  background: #2A241E;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .email-page .bb-compose-sofia .calm-tone-chip:hover {
  background: rgba(168, 197, 184, 0.1);
}

[data-theme="dark"] .email-page .bb-compose-sofia .calm-tone-label {
  color: #F0EBE5;
}

[data-theme="dark"] .email-page .bb-compose-sofia .calm-tone-sub {
  color: #9A8E82;
}


/* ── Smart chips læring (PR-2): why-tag, altid?-tilbud, lært-kvittering ──
   Canon-tokens (CHAT-DESIGN-CANON §2/§6): ghost-geometri, --sage accent,
   quiet-lines 12.5-13px --ink2. Dark via var-flip — ingen hårde farver. */
.email-page .bb-compose-sofia .ask-ai-suggestion__why {
  margin-left: auto;
  font-size: var(--email-fs-micro);
  font-weight: 600;
  /* Follow the CHIP's own ink, never a fixed token. The chip surface changes underneath this pill —
     cream/white (dark text) in the resting state, sage-green (#4A7A68, white text) when it is the
     primary/active one — while --text-secondary is near-black in the light theme. On green that was
     2.25:1, under the 4.5:1 AA floor: the "du vælger den tit" tag was unreadable.
     Pairing per state does not work here: post-draft chips are rendered with primaryIndex -1
     (compose-sofia.js:1585), so the green chip carries no --primary class to hook onto. currentColor
     is correct in every state and both themes at once, with no rule to keep in sync.
     The border keeps its quiet look via color-mix; browsers without it fall back to the solid
     currentColor border declared on the line above. */
  color: currentColor;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.email-page .bb-compose-sofia .ss-chip-offer {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color, #E6DFD4);
  border-radius: 12px;
  background: var(--bg-primary, #fff);
  padding: 8px 10px;
  font-size: var(--email-fs-note);
  color: var(--text-primary, #2C2A26);
  margin-top: 8px;
}
.email-page .bb-compose-sofia .ss-chip-offer__q { line-height: 1.4; }
.email-page .bb-compose-sofia .ss-chip-offer__yes {
  background: var(--sk-sage, #5F7263);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: var(--email-fs-note);
  font-weight: 600;
  cursor: pointer;
  flex: none;
}
.email-page .bb-compose-sofia .ss-chip-offer__x {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #E6DFD4);
  background: none;
  color: var(--text-secondary, #6B675E);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
}
.email-page .bb-compose-sofia .ss-chip-offer__x::after {
  content: '';
  position: absolute;
  inset: -7px; /* 40px usynligt tap-felt */
}
.email-page .bb-compose-sofia .ss-chip-quiet {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--email-fs-note);
  color: var(--text-secondary, #6B675E);
  padding: 6px 2px 0;
  line-height: 1.45;
}
.email-page .bb-compose-sofia .ss-chip-quiet svg { flex: none; color: var(--sk-good, #2F7A4D); }
.email-page .bb-compose-sofia .ss-chip-quiet__undo {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--email-fs-note);
  color: var(--text-secondary, #6B675E);
  text-decoration: underline;
  cursor: pointer;
}
.email-page .bb-compose-sofia .ss-chip-offer__yes:focus-visible,
.email-page .bb-compose-sofia .ss-chip-offer__x:focus-visible,
.email-page .bb-compose-sofia .ss-chip-quiet__undo:focus-visible {
  outline: 2px solid var(--text-primary, #2C2A26);
  outline-offset: 2px;
}
[data-theme="dark"] .email-page .bb-compose-sofia .ss-chip-quiet__undo,
[data-theme="dark"] .email-page .bb-compose-sofia .ss-chip-quiet {
  color: var(--text-secondary, #A79F92);
}