#chat-app *,
  #chat-app *::before,
  #chat-app *::after {
    box-sizing: border-box;
  }

  /* #3832: the border/background strips must not hit Sofia's [EMBED:] action cards —
     chat-embeds.js renders <button class="ss-embed-card ...">, styled by /embeds/embed.css
     with class-only (0,n,0) selectors that this ID reset (1,0,1) silently beat: every card
     surface computed to rgba(0,0,0,0) on /chat/ no matter what embed.css said. :where()
     adds zero specificity, so the destructive reset still applies at exactly (1,0,1) to
     every other button. font/cursor/color stay universal: the cards inherit page typography
     from here, and their text colors live on inner spans, not the button itself. */
  #chat-main button {
    font-family: inherit;
    cursor: pointer;
    color: inherit;
  }

  #chat-main button:where(:not(.ss-embed-card)) {
    border: none;
    background: none;
  }

  :root {
    --card-todo-bg: #FDF7F3;
    --card-email-bg: #F5FAF7;
    --card-calendar-bg: #F5F7FC;
    --card-meta-neutral: rgba(92, 77, 67, 0.82);
    --avatar-dark: #3A2E42;
    --chat-send-from: var(--sage-dark, #4A7A68);
    --chat-send-to: var(--sage-dark, #4A7A68);
    --chat-send-hover-from: var(--sage-darker, #3D6B57);
    --chat-send-hover-to: var(--sage-darker, #3D6B57);
  }

  html[data-theme="dark"] {
    /* readable warm-light twin of --card-meta-neutral; never the light brown on dark cards */
    --card-meta-neutral: rgba(200, 190, 178, 0.70);
  }

  .bb-lang-list {
    min-width: 160px;
    padding: 6px 0;
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: 12px;
    background: rgba(255, 254, 251, 0.96);
    box-shadow: 0 8px 24px rgba(92, 77, 67, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: fixed;
    z-index: 200; /* --z-dropdown */
  }

  .bb-lang-list[hidden] {
    display: none !important;
  }

  .bb-lang-option {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    color: var(--warm-text, #5C4D43);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.4;
    text-align: start;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .bb-lang-option:hover {
    background: rgba(212, 168, 154, 0.10);
  }

  .bb-lang-option.bb-lang-active {
    color: var(--rose-dark, #9B6050);
    font-weight: var(--font-weight-semibold);
  }

  html, body {
    height: 100%;
    font-family: var(--font-family);
    background: var(--cream);
    color: var(--warm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .app {
    display: flex;
    height: 100vh;
    position: relative;
    background:
      radial-gradient(ellipse at 74% 18%, rgba(212, 168, 154, 0.055) 0%, transparent 48%),
      radial-gradient(ellipse at 22% 86%, rgba(168, 197, 184, 0.045) 0%, transparent 48%),
      linear-gradient(180deg, var(--cream, #FAF7F3) 0%, var(--pill-bg, #F0EAE4) 100%);
  }

  .app::before {
    content: none;
    background-image: none;
    display: none;
  }

  .main {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    position: relative;
  }

  body:not(.chat-ny-in-conversation) #chat-app.app .main {
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 138, 126, 0.18) transparent;
  }
  body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar {
    width: 5px;
  }
  body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar-track {
    background: transparent;
  }
  body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar-thumb {
    background: rgba(110, 138, 126, 0.18);
    border-radius: 999px;
  }
  body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar-thumb:hover {
    background: rgba(110, 138, 126, 0.28);
  }
  [data-theme="dark"] body:not(.chat-ny-in-conversation) #chat-app.app .main {
    scrollbar-color: rgba(255, 254, 251, 0.15) transparent;
  }
  [data-theme="dark"] body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar-thumb {
    background: rgba(255, 254, 251, 0.15);
  }
  [data-theme="dark"] body:not(.chat-ny-in-conversation) #chat-app.app .main::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 254, 251, 0.24);
  }

  .main::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(212, 168, 154, 0.16);
    pointer-events: none;
  }

  .main::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -120px;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    border: 1px solid rgba(212, 168, 154, 0.10);
    pointer-events: none;
  }

  .decorative-arcs {
    position: absolute;
    top: -200px;
    right: -160px;
    width: 660px;
    height: 660px;
    border-radius: 50%;
    border: 1px solid rgba(212, 168, 154, 0.12) !important;
    pointer-events: none;
    opacity: 0.6;
  }

  .decorative-arcs-2 {
    position: absolute;
    top: -80px;
    right: -40px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(212, 168, 154, 0.26) !important;
    pointer-events: none;
    opacity: 0.5;
  }

  .decorative-arcs-bl {
    position: absolute;
    bottom: -190px;
    inset-inline-start: 38px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(168, 197, 184, 0.09);
    pointer-events: none;
    opacity: 0.45;
  }

  .content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 40px 100px;
  }

  .content {
    padding-top: 48px;
  }

  .greeting {
    text-align: center;
    margin-bottom: 32px;
  }

  .greeting h1 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-6xl);
    color: var(--warm-text);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

  .greeting p {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-base);
    color: var(--muted);
    line-height: 1.6;
  }

  .input-wrapper {
    position: relative;
    margin: 0 auto 24px;
    max-width: 720px;
  }

  .input-glow {
    position: absolute;
    inset: -16px;
    border-radius: 38px;
    background: radial-gradient(ellipse at center, rgba(168, 197, 184, 0.12) 0%, transparent 65%);
    pointer-events: none;
  }

  .input-card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-card, 18px);
    padding: 16px 20px;
    border: 1px solid rgba(228, 220, 212, 0.6);
    box-shadow:
      0 2px 8px rgba(92, 77, 67, 0.06),
      0 8px 32px rgba(92, 77, 67, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .input-card:focus-within {
    border-color: rgba(74, 122, 104, 0.45);
    box-shadow:
      0 2px 8px rgba(92, 77, 67, 0.06),
      0 8px 32px rgba(92, 77, 67, 0.04);
  }

  .input-card .chat-input-field {
    width: 100%;
    border: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-family: var(--font-family);
    font-style: normal;
    font-size: var(--font-size-lg);
    color: var(--warm-text);
    background: transparent;
    margin-bottom: 0;
  }

  .input-card .chat-input-field::placeholder {
    color: var(--muted);
    opacity: 1;
    font-family: var(--font-family);
  }

  .input-card .chat-empty-input-area,
  .input-card .chat-input-box {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .input-card .chat-input-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  .input-card .chat-file-preview {
    margin-bottom: 0;
    padding-inline-start: 14px;
    padding-inline-end: 14px;
  }

  .input-card textarea.chat-input-field {
    display: block;
    min-height: 32px !important;
    height: 32px;
    max-height: 180px;
    padding: 4px 14px !important;
    resize: none;
    line-height: 1.4;
    overflow-y: hidden;
  }

  /* Quill welcome composer (#chat-direct-input) — contenteditable replacing the old <textarea>
     to fix the iOS empty-caret bug (WebKit 176896). Mirror textarea.chat-input-field metrics
     on .ql-editor so it looks identical; the caret now lives in a real DOM text node. */
  .input-card #chat-direct-input.ql-container {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    border: none;
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    color: var(--warm-text);
  }
  .input-card #chat-direct-input .ql-editor {
    position: relative;
    min-height: 32px;
    max-height: 180px;
    padding: 4px 14px;
    line-height: 1.4;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
  }
  .input-card #chat-direct-input .ql-editor.ql-blank::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 14px;
    right: 14px;
    color: var(--muted);
    font-style: normal;
    font-family: var(--font-family);
    pointer-events: none;
  }
  /* Quill base resets, scoped to the composer (we don't load Quill's global stylesheet). */
  .input-card #chat-direct-input .ql-editor p {
    margin: 0;
    padding: 0;
  }
  .input-card #chat-direct-input .ql-clipboard {
    position: absolute;
    left: -100000px;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }

  .input-card textarea.chat-input-field,
  .input-card #chat-direct-input .ql-editor {
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 138, 126, 0.22) transparent;
  }

  .input-card textarea.chat-input-field::-webkit-scrollbar,
  .input-card #chat-direct-input .ql-editor::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .input-card textarea.chat-input-field::-webkit-scrollbar-track,
  .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-track {
    background: transparent;
  }

  .input-card textarea.chat-input-field::-webkit-scrollbar-button,
  .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  .input-card textarea.chat-input-field::-webkit-scrollbar-thumb,
  .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-thumb {
    background: rgba(110, 138, 126, 0.22);
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
  }

  .input-card textarea.chat-input-field::-webkit-scrollbar-thumb:hover,
  .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(110, 138, 126, 0.34);
    background-clip: content-box;
  }

  html[data-theme="dark"] .input-card textarea.chat-input-field,
  html[data-theme="dark"] .input-card #chat-direct-input .ql-editor,
  [data-theme="dark"] .input-card textarea.chat-input-field,
  [data-theme="dark"] .input-card #chat-direct-input .ql-editor {
    scrollbar-color: rgba(255, 254, 251, 0.18) transparent;
  }

  html[data-theme="dark"] .input-card textarea.chat-input-field::-webkit-scrollbar-thumb,
  html[data-theme="dark"] .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-thumb,
  [data-theme="dark"] .input-card textarea.chat-input-field::-webkit-scrollbar-thumb,
  [data-theme="dark"] .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-thumb {
    background: rgba(255, 254, 251, 0.18);
    background-clip: content-box;
  }

  html[data-theme="dark"] .input-card textarea.chat-input-field::-webkit-scrollbar-thumb:hover,
  html[data-theme="dark"] .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .input-card textarea.chat-input-field::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .input-card #chat-direct-input .ql-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 254, 251, 0.28);
    background-clip: content-box;
  }

  .input-card .chat-input-box {
    overflow: visible;
  }

  .input-card .chat-input-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    margin-top: 13px;
    padding: 0 !important;
  }

  .input-card .chat-input-toolbar-left,
  .input-card .chat-input-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .input-card .chat-upload-btn {
    width: 44px;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px !important;
    max-height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border: 1px solid var(--divider);
    color: var(--warm-text);
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .input-card .chat-upload-btn:hover {
    background: var(--rose-bg);
    border-color: var(--rose-light);
  }

  .input-card .chat-input-action {
    width: 44px;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px !important;
    max-height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--warm-text-light);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .input-card .chat-input-action:hover {
    background: var(--sage-bg);
    color: var(--warm-text);
  }

  .input-card .chat-send-btn {
    width: 44px;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px !important;
    max-height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sage-dark, #4A7A68);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .input-card .chat-send-btn:hover {
    background: var(--sage-darker, #3D6B57);
    transform: scale(1.02);
    box-shadow: 0 3px 10px rgba(92, 77, 67, 0.20);
  }

  .input-card .chat-send-btn.is-empty {
    opacity: 0.35;
    box-shadow: none;
  }

  .chat-ny-prompt-area,
  .chat-prompt-area {
    position: relative;
    z-index: 10;
    max-width: 960px !important;
    margin: 0 auto 36px;
  }

  .quick-actions,
  .chat-prompt-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 960px !important;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .quick-actions:empty,
  .chat-prompt-chips:empty {
    display: none;
  }

  .chat-ny-prompt-area .quick-action,
  .chat-ny-prompt-area .chat-prompt-chip,
  body:not(.chat-ny-in-conversation) .quick-action,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip {
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 20px;
    border: 1px solid rgba(228, 220, 212, 0.7) !important;
    background: rgba(255, 254, 251, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--warm-text);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    box-shadow:
      0 1px 4px rgba(92, 77, 67, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  .quick-action:hover,
  .chat-prompt-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(92, 77, 67, 0.08);
    border-color: rgba(110, 138, 126, 0.45);
    background: rgba(255, 254, 251, 0.95);
  }

  .chat-prompt-chip svg {
    width: 18px;
    height: 18px;
  }

  /* Generic chip: warm fallback for chips without data-color */
  .chat-prompt-chip {
    background: rgba(255, 254, 251, 0.86) !important;
    border: 1px solid rgba(228, 220, 212, 0.72) !important;
    color: var(--warm-text) !important;
  }

  /* Colored chips must come after the generic !important fallback. */
  .quick-action--rose,
  .chat-ny-prompt-area .quick-action--rose,
  body:not(.chat-ny-in-conversation) .quick-action--rose,
  .chat-prompt-chip[data-color="red"],
  .chat-prompt-chip[data-color="orange"],
  .chat-prompt-chip[data-color="pink"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="red"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="orange"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="pink"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="red"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="orange"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="pink"] {
    background: rgba(251, 230, 224, 0.65) !important;
    border-color: rgba(212, 168, 154, 0.35) !important;
  }

  .quick-action--sage,
  .chat-ny-prompt-area .quick-action--sage,
  body:not(.chat-ny-in-conversation) .quick-action--sage,
  .chat-prompt-chip[data-color="green"],
  .chat-prompt-chip[data-color="yellow"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="green"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="yellow"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="green"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="yellow"] {
    background: rgba(230, 245, 238, 0.55) !important;
    border-color: rgba(160, 200, 180, 0.35) !important;
  }

  .quick-action--slate,
  .chat-ny-prompt-area .quick-action--slate,
  body:not(.chat-ny-in-conversation) .quick-action--slate,
  .chat-prompt-chip[data-color="gray"],
  .chat-prompt-chip[data-color="blue"],
  .chat-prompt-chip[data-color="purple"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="gray"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="blue"],
  .chat-ny-prompt-area .chat-prompt-chip[data-color="purple"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="gray"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="blue"],
  body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="purple"] {
    background: rgba(224, 232, 248, 0.50) !important;
    border-color: rgba(168, 176, 196, 0.35) !important;
  }

  .chat-prompt-chip:hover {
    background: rgba(255, 254, 251, 0.95) !important;
    border-color: rgba(110, 138, 126, 0.45) !important;
  }

  .chat-prompt-chip[data-color="red"]:hover,
  .chat-prompt-chip[data-color="orange"]:hover,
  .chat-prompt-chip[data-color="pink"]:hover {
    background: rgba(251, 230, 224, 0.95) !important;
    border-color: rgba(212, 168, 154, 0.5) !important;
  }

  .chat-prompt-chip[data-color="green"]:hover,
  .chat-prompt-chip[data-color="yellow"]:hover {
    background: rgba(230, 245, 238, 0.95) !important;
    border-color: rgba(160, 200, 180, 0.5) !important;
  }

  .chat-prompt-chip[data-color="gray"]:hover,
  .chat-prompt-chip[data-color="blue"]:hover,
  .chat-prompt-chip[data-color="purple"]:hover {
    background: rgba(234, 238, 248, 0.95) !important;
    border-color: rgba(168, 176, 196, 0.5) !important;
  }

  /* #3101 — the "+ Ny" create chip is a quiet, transparent ghost affordance so
     it reads as "add a category", not as one more saved category. The active
     welcome cascade above force-applies a frosted-glass fill + solid border +
     shadow via !important, and `#chat-main button` resets border/background, so
     the distinct treatment has to out-specify them (compound class + body guard)
     and use !important. background:transparent plus backdrop-filter:none and
     box-shadow:none are all required for the fill to actually read as transparent
     rather than a faint frosted button. */
  .chat-prompt-chip.chat-prompt-add,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip.chat-prompt-add {
    background: transparent !important;
    border: 1.5px dashed rgba(110, 138, 126, 0.45) !important;
    color: #587164 !important;
    font-weight: var(--font-weight-semibold) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .chat-prompt-chip.chat-prompt-add svg {
    color: currentColor !important;
    opacity: 0.9;
  }

  /* Sage hover (replaces the old rose tint). Border stays dashed (inherited from
     the resting rule); the soft lift shadow is inherited from the welcome
     .chat-prompt-chip:hover so the ghost gains depth on hover. */
  .chat-prompt-chip.chat-prompt-add:hover,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip.chat-prompt-add:hover {
    background: rgba(110, 138, 126, 0.08) !important;
    border-color: rgba(110, 138, 126, 0.7) !important;
    color: #4A7A68 !important;
  }

  .chat-prompt-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 20px;
    right: 20px;
    width: auto;
    transform: none;
    z-index: 100 !important;
    pointer-events: auto;
  }

  @media (max-width: 768px) {
    .chat-prompt-panel {
      position: fixed !important;
      top: auto !important;
      bottom: var(--mn-bar-height, 60px) !important;
      left: 0 !important;
      right: 0 !important;
      width: auto !important;
      height: auto !important;
      z-index: 9990 !important;
      background: transparent !important;
      box-shadow: none !important;
      transform: none !important;
      border-radius: 0 !important;
      pointer-events: auto;
    }
    .chat-prompt-panel::before {
      display: none !important;
    }
    .chat-prompt-panel-inner,
    .chat-prompt-panel-inner[data-color] {
      background: var(--color-card, #fff) !important;
      border-radius: 18px !important;
      max-height: min(60dvh, 440px);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      margin: 0 12px 8px !important;
      padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 2px 20px rgba(92, 77, 67, 0.14), 0 0 0 1px rgba(228, 220, 212, 0.4) !important;
    }
  }

  .chat-prompt-panel-inner,
  .chat-prompt-panel-inner[data-color] {
    background: rgba(255, 254, 251, 1) !important;
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: var(--radius-card, 18px);
    box-shadow:
      0 24px 70px rgba(92, 77, 67, 0.12),
      0 4px 14px rgba(92, 77, 67, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 16px;
    overflow: visible;
    margin-bottom: 20px;
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
  }

  .chat-prompt-panel-header {
    min-height: 42px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(228, 220, 212, 0.5);
  }

  .chat-prompt-icon-picker {
    display: grid;
    grid-template-columns: repeat(6, 38px);
    gap: 8px;
    align-items: center;
    margin-top: 10px;
  }

  .chat-prompt-icon-btn,
  .chat-prompt-color-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .chat-prompt-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(92, 77, 67, 0.1);
    background: rgba(255, 254, 251, 0.86);
  }

  .chat-prompt-icon-btn.is-selected {
    background: var(--rose-bg);
    border-color: rgba(212, 168, 154, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 168, 154, 0.16);
  }

  .chat-prompt-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
  }

  .chat-prompt-color-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 254, 251, 0.95);
    box-shadow: 0 0 0 1px rgba(92, 77, 67, 0.12);
  }

  .chat-prompt-color-btn.is-selected {
    box-shadow: 0 0 0 3px rgba(212, 168, 154, 0.28);
  }

  .chat-prompt-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(228, 220, 212, 0.4);
  }

  .chat-prompt-panel-header + .chat-prompt-form {
    border-top: 0 !important;
  }

  .chat-prompt-form-input,
  .chat-prompt-form textarea {
    width: 100%;
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: 12px;
    background: rgba(255, 254, 251, 0.96);
    color: var(--warm-text);
    padding: 11px 12px;
  }

  .chat-prompt-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
  }

  .quick-action:active,
  .chat-prompt-chip:active {
    transform: scale(0.97) !important;
    box-shadow: 0 1px 3px rgba(92, 77, 67, 0.06);
    transition-duration: 0.08s;
  }

  body:not(.chat-ny-in-conversation) .quick-action:focus-visible,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip:focus-visible {
    outline: 2px solid #4A7A68 !important;
    outline-offset: 2px !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .quick-action:focus-visible,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip:focus-visible {
    outline-color: #7CB8A4 !important;
  }

  .chat-prompt-panel-title {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text);
  }

  .chat-prompt-panel-header svg {
    color: var(--warm-text-light);
  }

  .chat-prompt-header-action {
    border-radius: 10px;
    transition: all 0.15s ease;
  }

  .chat-prompt-header-action:hover {
    background: rgba(212, 168, 154, 0.12);
    color: var(--warm-text);
  }

  .chat-prompt-cat-delete:hover {
    background: rgba(184, 84, 80, 0.08);
    color: color-mix(in srgb, var(--rose-dark, #9B6050) 82%, var(--color-error, #ff3e1d) 18%);
  }

  .chat-prompt-panel-close {
    border-radius: 10px;
    width: 34px;
    height: 34px;
  }

  .chat-prompt-panel-close:hover {
    background: rgba(212, 168, 154, 0.10);
    color: var(--warm-text);
  }

  @keyframes promptPanelIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .chat-prompt-panel {
    animation: promptPanelIn 0.2s ease both;
  }

  .chat-prompt-panel-inner[data-color="red"],
  .chat-prompt-panel-inner[data-color="orange"],
  .chat-prompt-panel-inner[data-color="pink"] {
    background: rgba(251, 243, 240, 1) !important;
    border-color: rgba(232, 212, 206, 0.6);
  }

  .chat-prompt-panel-inner[data-color="green"],
  .chat-prompt-panel-inner[data-color="yellow"] {
    background: rgba(242, 248, 245, 1) !important;
    border-color: rgba(200, 221, 210, 0.6);
  }

  .chat-prompt-panel-inner[data-color="gray"],
  .chat-prompt-panel-inner[data-color="blue"],
  .chat-prompt-panel-inner[data-color="purple"] {
    background: rgba(248, 244, 240, 1) !important;
    border-color: rgba(228, 220, 212, 0.6);
  }

  .chat-prompt-item {
    border-bottom: 1px solid rgba(228, 220, 212, 0.35);
    border-radius: 10px;
    transition: all 0.15s ease;
  }

  .chat-prompt-item:last-child {
    border-bottom-color: transparent;
  }

  .chat-prompt-item:hover {
    background: rgba(212, 168, 154, 0.06);
    border-color: transparent;
  }

  .chat-prompt-suggestion-btn {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--warm-text);
    height: 42px;
    padding: 11px 10px;
    border-radius: 10px;
  }

  .chat-prompt-arrow {
    color: var(--warm-text-light);
  }
  .chat-prompt-item-edit,
  .chat-prompt-item-delete {
    border-radius: 8px;
    transition: all 0.15s ease;
  }

  .chat-prompt-item-edit:hover {
    background: rgba(212, 168, 154, 0.10);
    color: var(--warm-text);
  }

  .chat-prompt-item-delete:hover {
    background: rgba(184, 84, 80, 0.08);
    color: color-mix(in srgb, var(--rose-dark, #9B6050) 82%, var(--color-error, #ff3e1d) 18%);
  }

  .chat-prompt-delete-confirm {
    color: var(--warm-text-light);
    font-family: var(--font-family);
  }

  .chat-prompt-delete-no {
    border-radius: 10px;
    color: var(--warm-text-light);
  }

  .chat-prompt-delete-no:hover {
    background: rgba(212, 168, 154, 0.10);
    color: var(--warm-text);
  }

  .chat-prompt-delete-yes {
    border-radius: 10px;
    background: color-mix(in srgb, var(--rose-dark, #9B6050) 82%, var(--color-error, #ff3e1d) 18%);
  }

  .chat-prompt-delete-yes:hover {
    background: color-mix(in srgb, var(--rose-dark, #9B6050) 88%, var(--color-error, #ff3e1d) 12%);
  }

  .chat-prompt-add-row {
    border-top: 1px solid rgba(228, 220, 212, 0.4);
    padding: 10px 6px 4px;
    margin-top: 4px;
  }

  .chat-prompt-add-prompt-btn {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--warm-text-light);
    border-radius: 10px;
    padding: 8px 12px;
  }

  .chat-prompt-add-prompt-btn:hover {
    background: rgba(212, 168, 154, 0.08);
    color: var(--warm-text);
  }

  .chat-prompt-add-prompt-btn svg {
    color: var(--rose);
  }

  .chat-prompt-empty {
    padding: 24px 12px 16px;
  }

  .chat-prompt-empty p:first-child {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text);
  }

  .chat-prompt-empty p {
    font-family: var(--font-family);
    color: var(--warm-text-light);
    font-size: var(--font-size-base);
    line-height: 1.4;
  }

  .chat-prompt-form-label {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text);
    letter-spacing: 0;
    margin-bottom: 6px;
    margin-top: 12px;
  }

  .chat-prompt-icon-picker {
    display: grid;
    grid-template-columns: repeat(6, 38px);
    gap: 8px;
    padding: 6px 0 12px;
  }

  .chat-prompt-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(228, 220, 212, 0.5);
    background: rgba(255, 254, 251, 0.7);
    color: var(--warm-text-light);
    transition: all 0.15s ease;
  }

  .chat-prompt-icon-btn:hover {
    background: rgba(255, 254, 251, 0.95);
    border-color: rgba(212, 168, 154, 0.4);
    color: var(--warm-text);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.06);
  }

  .chat-prompt-icon-btn.is-selected {
    background: var(--rose-bg);
    border-color: rgba(212, 168, 154, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 168, 154, 0.16);
    color: var(--warm-text);
  }

  .chat-prompt-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 0 12px;
  }

  .chat-prompt-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 254, 251, 0.95);
    box-shadow: 0 0 0 1px rgba(92, 77, 67, 0.10);
    transition: all 0.15s ease;
  }

  .chat-prompt-color-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 1px rgba(92, 77, 67, 0.15);
  }

  .chat-prompt-color-btn.is-selected {
    box-shadow:
      0 0 0 2px rgba(255, 254, 251, 0.95),
      0 0 0 4px rgba(212, 168, 154, 0.5);
    transform: scale(1.08);
  }

  .chat-prompt-color-none {
    border: 2px dashed rgba(184, 168, 152, 0.3);
  }

  .chat-prompt-form-input,
  .chat-prompt-form textarea {
    width: 100%;
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: 14px;
    background: rgba(255, 254, 251, 0.7);
    backdrop-filter: blur(8px);
    color: var(--warm-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .chat-prompt-form-input:focus-visible,
  .chat-prompt-form textarea:focus-visible {
    box-shadow: none;
    outline: none;
    background: rgba(255, 254, 251, 0.95);
  }

  .chat-prompt-form-input::placeholder,
  .chat-prompt-form textarea::placeholder {
    font-family: var(--font-family);
    color: var(--muted);
  }

  .chat-prompt-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
  }

  .chat-prompt-form-cancel,
  .chat-prompt-form-save {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: 12px;
    padding: 8px 20px;
    transition: all 0.2s ease;
  }

  .chat-prompt-form-cancel {
    background: transparent;
    color: var(--warm-text-light);
    border: 1px solid rgba(228, 220, 212, 0.6);
  }

  .chat-prompt-form-cancel:hover {
    background: rgba(255, 254, 251, 0.9);
    border-color: rgba(212, 168, 154, 0.4);
    color: var(--warm-text);
  }

  .chat-prompt-form-save {
    background: var(--rose-dark, #9B6050) !important;
    color: var(--white, #FFFEFB) !important;
    border: none;
    box-shadow: 0 4px 12px rgba(155, 96, 80, 0.3);
    filter: none !important;
  }

  .chat-prompt-form-save:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(155, 96, 80, 0.4);
    background: var(--rose-dark, #9B6050) !important;
    filter: none !important;
  }

  [data-theme="dark"] .chat-prompt-form-save {
    background: var(--rose-dark, #E8B8A8) !important;
    color: #1c1b18 !important;
  }

  [data-theme="dark"] .chat-prompt-form-save:hover {
    background: var(--rose, #D4A89A) !important;
  }

  .chat-prompt-form-save:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(155, 96, 80, 0.25);
  }

  /* ── Prompt Builder: Byg med Sofia ── */

  .chat-prompt-build-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--white, #FFFEFB);
    background: var(--rose-dark, #9B6050);
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .chat-prompt-build-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .chat-prompt-build-btn:hover {
    background: var(--rose, #D4A89A);
    transform: scale(1.02);
  }
  .chat-prompt-build-btn:focus-visible {
    outline: 2px solid var(--rose-dark, #9B6050);
    outline-offset: 2px;
  }
  [data-theme="dark"] .chat-prompt-build-btn {
    background: var(--rose-dark, #E8B8A8);
    color: #1c1b18;
  }
  [data-theme="dark"] .chat-prompt-build-btn:hover {
    background: var(--rose, #D4A89A);
  }

  .chat-prompt-manual-btn {
    font-size: var(--font-size-sm) !important;
    color: var(--warm-text-light) !important;
    background: transparent !important;
    border: 1px solid rgba(228, 220, 212, 0.5) !important;
    min-height: 44px;
  }
  .chat-prompt-manual-btn:hover {
    background: rgba(255, 254, 251, 0.8) !important;
    border-color: rgba(212, 168, 154, 0.4) !important;
  }
  [data-theme="dark"] .chat-prompt-manual-btn {
    color: var(--warm-text-light, #a09890) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  [data-theme="dark"] .chat-prompt-manual-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .chat-prompt-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px 16px;
    align-items: center;
  }

  .chat-prompt-builder {
    padding: 4px 18px 16px;
  }

  .chat-prompt-builder-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
  }
  .chat-prompt-builder-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(58, 47, 38, 0.12);
    transition: background 0.2s ease;
  }
  .chat-prompt-builder-dot.is-done {
    background: var(--sage, #4A7A68);
  }
  .chat-prompt-builder-dot.is-current {
    background: var(--rose-dark, #9B6050);
    box-shadow: 0 0 0 3px rgba(155, 96, 80, 0.2);
  }
  [data-theme="dark"] .chat-prompt-builder-dot {
    background: rgba(255, 255, 255, 0.15);
  }
  [data-theme="dark"] .chat-prompt-builder-dot.is-done {
    background: var(--sage, #8FA593);
  }
  [data-theme="dark"] .chat-prompt-builder-dot.is-current {
    background: var(--rose-dark, #E8B8A8);
    box-shadow: 0 0 0 3px rgba(232, 184, 168, 0.25);
  }

  .chat-prompt-builder-question {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text);
    margin: 0 0 12px;
    line-height: 1.4;
  }

  .chat-prompt-builder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .chat-prompt-builder-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text);
    background: rgba(255, 254, 251, 0.7);
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s ease;
  }
  .chat-prompt-builder-chip:hover {
    background: rgba(255, 254, 251, 0.95);
    border-color: rgba(212, 168, 154, 0.5);
    transform: translateY(-1px);
  }
  .chat-prompt-builder-chip:focus-visible {
    outline: 2px solid var(--rose-dark, #9B6050);
    outline-offset: 2px;
  }
  .chat-prompt-builder-chip.is-selected {
    background: var(--rose-dark, #9B6050);
    color: var(--white, #FFFEFB);
    border-color: var(--rose-dark, #9B6050);
  }
  [data-theme="dark"] .chat-prompt-builder-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--warm-text, #E8DDD4);
  }
  [data-theme="dark"] .chat-prompt-builder-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }
  [data-theme="dark"] .chat-prompt-builder-chip.is-selected {
    background: var(--rose-dark, #E8B8A8);
    color: #1c1b18;
    border-color: var(--rose-dark, #E8B8A8);
  }

  .chat-prompt-builder-other-input,
  .chat-prompt-builder-textarea {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--warm-text);
    background: rgba(255, 254, 251, 0.8);
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s ease;
  }

  .chat-prompt-builder-other-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
  }

  .chat-prompt-builder-other-row .chat-prompt-builder-other-input {
    margin-top: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  .chat-prompt-builder-other-input.is-invalid {
    border-color: color-mix(in srgb, var(--rose-dark, #9B6050) 72%, var(--color-error, #ff3e1d) 28%);
    box-shadow: 0 0 0 3px rgba(155, 96, 80, 0.14);
  }
  .chat-prompt-builder-other-input:focus,
  .chat-prompt-builder-textarea:focus {
    outline: none;
    border-color: var(--rose-dark, #9B6050);
    box-shadow: 0 0 0 3px rgba(155, 96, 80, 0.12);
  }
  [data-theme="dark"] .chat-prompt-builder-other-input,
  [data-theme="dark"] .chat-prompt-builder-textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--warm-text, #E8DDD4);
  }
  [data-theme="dark"] .chat-prompt-builder-other-input:focus,
  [data-theme="dark"] .chat-prompt-builder-textarea:focus {
    border-color: var(--rose-dark, #E8B8A8);
    box-shadow: 0 0 0 3px rgba(232, 184, 168, 0.15);
  }

  .chat-prompt-builder-nav {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }

  .chat-prompt-builder-back {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text-light);
    background: transparent;
    border: 1px solid rgba(228, 220, 212, 0.5);
    border-radius: 10px;
    padding: 6px 14px;
    cursor: pointer;
    min-height: 36px;
    transition: all 0.15s ease;
  }
  .chat-prompt-builder-back:hover {
    background: rgba(255, 254, 251, 0.8);
    border-color: rgba(212, 168, 154, 0.4);
  }
  .chat-prompt-builder-back:focus-visible {
    outline: 2px solid var(--rose-dark, #9B6050);
    outline-offset: 2px;
  }
  [data-theme="dark"] .chat-prompt-builder-back {
    color: var(--warm-text-light, #a09890);
    border-color: rgba(255, 255, 255, 0.12);
  }
  [data-theme="dark"] .chat-prompt-builder-back:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .chat-prompt-builder-next {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--white, #FFFEFB);
    background: var(--rose-dark, #9B6050);
    border: none;
    border-radius: 10px;
    padding: 6px 16px;
    cursor: pointer;
    min-height: 36px;
    margin-inline-start: auto;
    transition: background 0.2s ease;
  }

  .chat-prompt-builder-other-next {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  .chat-prompt-builder-status {
    min-height: 20px;
    margin: 10px 0 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--warm-text-light);
  }

  .chat-prompt-builder-save[disabled],
  .chat-prompt-builder-next[disabled] {
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
  }
  .chat-prompt-builder-next:hover {
    background: var(--rose, #D4A89A);
  }
  .chat-prompt-builder-next:focus-visible {
    outline: 2px solid var(--rose-dark, #9B6050);
    outline-offset: 2px;
  }
  [data-theme="dark"] .chat-prompt-builder-next {
    background: var(--rose-dark, #E8B8A8);
    color: #1c1b18;
  }

  [data-theme="dark"] .chat-prompt-builder-status {
    color: var(--warm-text-light, #a09890);
  }

  .chat-prompt-builder-preview {
    padding: 4px 18px 16px;
  }

  .chat-prompt-builder-preview-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--warm-text);
    background: rgba(255, 254, 251, 0.6);
    border: 1px solid rgba(228, 220, 212, 0.4);
    border-radius: 8px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }
  .chat-prompt-builder-preview-cat svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }
  [data-theme="dark"] .chat-prompt-builder-preview-cat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .chat-prompt-builder-preview-actions {
    flex-wrap: wrap;
  }

  .chat-prompt-builder-adjust {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text-light);
    background: transparent;
    border: 1px solid rgba(228, 220, 212, 0.5);
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s ease;
  }
  .chat-prompt-builder-adjust:hover {
    background: rgba(255, 254, 251, 0.8);
    border-color: rgba(212, 168, 154, 0.4);
  }
  .chat-prompt-builder-adjust:focus-visible {
    outline: 2px solid var(--rose-dark, #9B6050);
    outline-offset: 2px;
  }
  [data-theme="dark"] .chat-prompt-builder-adjust {
    color: var(--warm-text-light, #a09890);
    border-color: rgba(255, 255, 255, 0.12);
  }
  [data-theme="dark"] .chat-prompt-builder-adjust:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .chat-prompt-builder-save-current {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text-light);
    background: rgba(58, 47, 38, 0.06);
    border: 1px solid rgba(228, 220, 212, 0.5);
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s ease;
  }
  .chat-prompt-builder-save-current:hover {
    background: rgba(58, 47, 38, 0.12);
    border-color: rgba(212, 168, 154, 0.4);
  }
  .chat-prompt-builder-save-current:focus-visible {
    outline: 2px solid var(--rose-dark, #9B6050);
    outline-offset: 2px;
  }
  [data-theme="dark"] .chat-prompt-builder-save-current {
    color: var(--warm-text-light, #a09890);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }
  [data-theme="dark"] .chat-prompt-builder-save-current:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .chat-prompt-top-actions {
    padding: 8px 0 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .chat-prompt-builder-chip,
    .chat-prompt-build-btn,
    .chat-prompt-builder-dot {
      transition: none;
    }
  }

  @media (max-width: 767px) {
    .input-card {
      padding: 12px 14px;
      border-radius: var(--radius-card, 18px);
    }

    .input-card .chat-input-toolbar {
      margin-top: 11px;
    }

    .chat-prompt-panel-inner,
    .chat-prompt-panel-inner[data-color] {
      padding: 12px 14px;
    }

    .chat-prompt-icon-picker {
      grid-template-columns: repeat(4, 38px);
      gap: 10px;
      justify-content: center;
    }

    .chat-prompt-form-input,
    .chat-prompt-form textarea {
      font-size: var(--font-size-base);
      padding: 12px 14px;
      border-radius: 12px;
    }

    .chat-prompt-form-save,
    .chat-prompt-form-cancel {
      padding: 10px 22px;
      font-size: var(--font-size-base);
    }

    .chat-prompt-builder {
      padding: 4px 14px 14px;
    }

    .chat-prompt-builder-chips {
      gap: 6px;
    }

    .chat-prompt-builder-chip {
      font-size: var(--font-size-sm);
      padding: 8px 12px;
      min-height: 44px;
    }

    .chat-prompt-builder-other-row {
      flex-direction: column;
    }

    .chat-prompt-builder-other-next {
      width: 100%;
      justify-content: center;
    }

    .chat-prompt-builder-preview {
      padding: 4px 14px 14px;
    }

    .chat-prompt-add-row {
      padding: 10px 14px 14px;
    }

    .chat-prompt-build-btn {
      flex: 1 1 auto;
      justify-content: center;
    }

    .chat-prompt-manual-btn {
      flex: 0 1 auto;
    }
  }

  /* ── Hide global mobile nav inside chat conversation ── */
  @media (max-width: 767px) {
    body.chat-ny-in-conversation #bb-mobile-nav {
      display: none !important;
    }
    body.chat-ny-in-conversation .mn-fab-group {
      display: none !important;
    }
    body.chat-ny-in-conversation .mn-more-sheet,
    body.chat-ny-in-conversation .mn-more-backdrop {
      display: none !important;
    }
    body.chat-ny-in-conversation .chat-prompt-panel {
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  /* samtale-craft 17/7: radial hues SWAPPED (sage top-right, rose bottom-left) — user bubbles are
     right-aligned sage now; the rose glow sat exactly behind them (rose ~15° vs sage ~153°
     = near-complementary hue vibration at the bubble edge). Both hues stay in the language. */
  body.chat-ny-in-conversation,
  body.chat-ny-in-conversation .app {
    background:
      radial-gradient(ellipse at 74% 18%, rgba(168, 197, 184, 0.05) 0%, transparent 48%),
      radial-gradient(ellipse at 22% 86%, rgba(212, 168, 154, 0.05) 0%, transparent 48%),
      linear-gradient(180deg, var(--cream, #FAF7F3) 0%, var(--pill-bg, #F0EAE4) 100%) !important;
  }

  body.chat-ny-in-conversation .main {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overflow: clip !important;
    overscroll-behavior: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.chat-ny-in-conversation .decorative-arcs,
  body.chat-ny-in-conversation .decorative-arcs-2,
  body.chat-ny-in-conversation .decorative-arcs-bl,
  body.chat-ny-in-conversation .main::before,
  body.chat-ny-in-conversation .main::after,
  body.chat-ny-in-conversation .app::after {
    display: block;
  }

  body.chat-ny-in-conversation #bb-sidebar::before {
    display: block !important;
  }

  body.chat-ny-in-conversation #chat-main {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overflow: clip !important;
  }

  body.chat-ny-in-conversation #chat-empty-voksen {
    display: none !important;
  }

  body.chat-ny-in-conversation #chat-conversation-panel {
    display: flex !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.chat-ny-in-conversation .chat-ny-conversation > .chat-messages,
  body.chat-ny-in-conversation .chat-ny-conversation > .chat-input {
    width: min(768px, 100%, calc(100vw - 48px)) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation :is(#chat-messages, .chat-messages, .chat-input, .chat-input-box) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* maskheader-craft: indholdet toner selv ud i toppen af scroll-fladen (mask-image), i stedet
     for at headeren maler en farveplade henover. Pladen kunne aldrig ramme canvassen — den er
     IKKE flad (lodret cream→putty-rampe + to radiale glød), så enhver malet farve viste sig som
     en fremmed firkant med forkert tone. Masken er farveløs: den fader indholdets alpha og lader
     den ægte canvas (inkl. glød og dark-tema) stå urørt bagved. Stops er monotone og lander
     blødt i 1 (ingen optrukket streg — gul linje-lærdommen). Begge prefixes; browsere uden
     mask-støtte viser blot indhold til kanten (gracefuld degradering).
     :not(.ss-pdf-reader-open)-gaten er BÆRENDE: pdf-/chunk-reader-panelerne er position:fixed
     MED #chat-conversation-panel som DOM-forælder — mask på panelet ville både fade deres
     top og gøre panelet til containing block for fixed. Gaten løfter masken mens de er åbne
     (de dækker alligevel indholdet). */
  body.chat-ny-in-conversation:not(.ss-pdf-reader-open) .chat-ny-conversation {
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.25) 14px,
      rgba(0, 0, 0, 0.60) 28px,
      rgba(0, 0, 0, 0.90) 40px,
      #000 48px) !important;
    mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.25) 14px,
      rgba(0, 0, 0, 0.60) 28px,
      rgba(0, 0, 0, 0.90) 40px,
      #000 48px) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation {
    scrollbar-gutter: stable both-edges;
  }
  /* Firefox-only standard properties */
  @supports not selector(::-webkit-scrollbar) {
    body.chat-ny-in-conversation .chat-ny-conversation {
      scrollbar-width: thin;
      scrollbar-color: rgba(0,0,0,0.15) transparent;
    }
  }
  /* WebKit/Chromium fine control */
  body.chat-ny-in-conversation .chat-ny-conversation::-webkit-scrollbar {
    width: 6px;
  }
  body.chat-ny-in-conversation .chat-ny-conversation::-webkit-scrollbar-track {
    background: transparent;
  }
  body.chat-ny-in-conversation .chat-ny-conversation::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
  }
  body.chat-ny-in-conversation .chat-ny-conversation::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
  }
  /* Dark mode — must use !important */
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15) !important;
  }
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25) !important;
  }
  @supports not selector(::-webkit-scrollbar) {
    [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation {
      scrollbar-color: rgba(255,255,255,0.15) transparent !important;
    }
  }

  /* maskheader-craft: headeren er nu sin egen række OVER scroll-panelet (#chat-main-flex-barn,
     flyttet ud af .chat-ny-conversation i index.html) og maler INGEN baggrund — canvassen står
     urørt igennem, og indholdet opløses via masken på scroll-fladen lige under den. Erstatter
     veil-æraen (samtale-craft-pas 17/7): en malet plade kan aldrig ramme en lagdelt canvas, og
     dark-tvillingen bortfalder helt fordi masken er farveløs. Bredde-formlen matcher panelets
     kolonne, margin-inline centrerer (headeren står i #chat-main, som ikke centrerer børn). */
  body.chat-ny-in-conversation .chat-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto !important;
    width: min(768px, 100%, calc(100vw - 48px));
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    min-height: 58px;
    padding: 10px 0 4px;
    border: 0;
    background: none !important;
    z-index: 60;
  }

  body.chat-ny-in-conversation .chat-message.received + .chat-message.sent {
    margin-top: 70px !important;
  }

  body.chat-ny-in-conversation .chat-header-user {
    display: flex !important;
    align-items: center;
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    z-index: 2;
  }

  body.chat-ny-in-conversation .chat-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: 1px solid rgba(228, 220, 212, 0.72);
    background: rgba(255, 254, 251, 0.76);
    color: var(--warm-text);
    box-shadow:
      0 2px 8px rgba(92, 77, 67, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.84);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }

  body.chat-ny-in-conversation .chat-back-btn:hover {
    transform: translateX(-1px);
    background: var(--rose-bg);
    box-shadow:
      0 4px 14px rgba(92, 77, 67, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  /* samtale-craft 17/7: pressed state — same grammar as .ss-scroll-fab:active (scale .95/.96).
     Elevation logic: rest 2/8 → hover 4/14 → press 1/4. Inherits the 0.2s ease transition. */
  body.chat-ny-in-conversation .chat-back-btn:active {
    transform: translateX(-1px) scale(0.96);
    box-shadow:
      0 1px 4px rgba(92, 77, 67, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }

  /* The header places the button with inset-inline-start (logical), but translateX is
     physical — mirror the nudge in RTL so it still moves toward the leading edge. */
  html[dir="rtl"] body.chat-ny-in-conversation .chat-back-btn:hover {
    transform: translateX(1px);
  }
  html[dir="rtl"] body.chat-ny-in-conversation .chat-back-btn:active {
    transform: translateX(1px) scale(0.96);
  }

  /* samtale-craft 17/7: "Vis mindre" re-collapse calls scrollIntoView({block:'nearest'}) — without a scroll
     margin the bubble top pins BEHIND the 58px sticky veil. 58 + 12 breath. */
  body.chat-ny-in-conversation .chat-bubble {
    scroll-margin-top: 70px;
  }

  body.chat-ny-in-conversation .chat-back-chevron {
    width: 20px;
    height: 20px;
  }
  [dir="rtl"] body.chat-ny-in-conversation .chat-back-chevron {
    transform: scaleX(-1);
  }

  body.chat-ny-in-conversation .chat-messages {
    flex: 1 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    /* maskheader-craft: top-luften skal være ≥ maskens 48px fade-dybde, ellers står første
       besked halvt opløst i hvile (mask-tvillingen til gul linje-fælden). 52px = 48 + 4 cushion. */
    padding: 52px 0 0 !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .chat-message {
    min-height: fit-content !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.chat-ny-in-conversation .chat-input {
    position: sticky !important;
    bottom: 16px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    padding: 16px 0 0 !important;
    background: linear-gradient(to top,
      rgba(250, 247, 243, 1) 0%,
      rgba(250, 247, 243, 1) 50%,
      rgba(250, 247, 243, 0) 100%) !important;
    border-end-start-radius: 18px !important;
    border-end-end-radius: 18px !important;
    overflow: hidden !important;
  }

  body.chat-ny-in-conversation .chat-input-box {
    /* #3177: welcome-parity surface (the higher-specificity .chat-ny-conversation
       rule below is the operative one; kept in sync here to avoid a stale fallback). */
    border: 1px solid rgba(228, 220, 212, 0.6) !important;
    border-radius: var(--radius-card, 18px);
    background: var(--white, #FFFEFB) !important;
    box-shadow:
      0 2px 8px rgba(92, 77, 67, 0.06),
      0 8px 32px rgba(92, 77, 67, 0.04) !important;
  }

  /* Agent-edit ring (.ss-agent-edited) on the in-conversation composer. #chat-input is
     overflow:hidden with zero horizontal/bottom padding, which would clip the outset sage
     ring on .chat-input-box. Lift the clip only while the ring is present so it hugs the
     full rounded box exactly like the welcome .input-card. Scoped via :has — modern browsers
     only; older ones keep the (still-present) ring, just clipped at the edges (graceful). */
  body.chat-ny-in-conversation #chat-input:has(.ss-agent-edited) {
    overflow: visible !important;
  }

  /* The agent-edit ring is a box-shadow injected on the element (HL_CSS in
     chat/js/live-agent/ss-dom-operator.js). Now that it targets the composer CARD
     (.input-card page 1, .chat-input-box page 2), the card's OWN higher-specificity
     !important box-shadow would SUPPRESS the ring, making it invisible — the in-conversation
     resting shadow (css ~1897/~2134), :focus-within{box-shadow:none} (css ~2155/~3451), AND
     the welcome rule `html body:not(.chat-ny-in-conversation):not(#_calm) .input-card`
     (css ~3xxx) which uses a phantom-id :not(#_calm) to reach specificity (1,2,2). Re-assert
     the ring (full + fade-out, light + dark) scoped under TWO real ids (#main-content #chat-main
     / #chat-input → specificity 2,2,0) so it decisively beats every competitor. Values mirror
     HL_CSS — keep in sync. Verified by _ringproof/prove.cjs (page 1 + page 2, focused + not). */
  #main-content #chat-main .input-card.ss-agent-edited,
  #main-content #chat-input .chat-input-box.ss-agent-edited {
    box-shadow: 0 0 0 2px rgba(110, 138, 126, 0.62), 0 0 0 5px rgba(110, 138, 126, 0.12) !important;
  }
  #main-content #chat-main .input-card.ss-agent-edited.ss-agent-edited--out,
  #main-content #chat-input .chat-input-box.ss-agent-edited.ss-agent-edited--out {
    box-shadow: 0 0 0 2px rgba(110, 138, 126, 0), 0 0 0 5px rgba(110, 138, 126, 0) !important;
  }
  [data-theme="dark"] #main-content #chat-main .input-card.ss-agent-edited,
  [data-theme="dark"] #main-content #chat-input .chat-input-box.ss-agent-edited {
    box-shadow: 0 0 0 2px rgba(166, 203, 187, 0.65), 0 0 0 5px rgba(166, 203, 187, 0.14) !important;
  }
  [data-theme="dark"] #main-content #chat-main .input-card.ss-agent-edited.ss-agent-edited--out,
  [data-theme="dark"] #main-content #chat-input .chat-input-box.ss-agent-edited.ss-agent-edited--out {
    box-shadow: 0 0 0 2px rgba(166, 203, 187, 0), 0 0 0 5px rgba(166, 203, 187, 0) !important;
  }

  /* ===== Scroll-to-bottom FAB ===== */
  body.chat-ny-in-conversation #ss-scroll-bottom-fab {
    align-self: center !important;
    position: sticky !important;
    bottom: 140px !important;
    margin-top: -48px !important;
  }

  @media (max-width: 767px) {
    body.chat-ny-in-conversation #ss-scroll-bottom-fab {
      bottom: 170px !important;
    }
  }

  .ss-scroll-fab {
    z-index: 50;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(228, 220, 212, 0.6);
    border-radius: 50%;
    background: rgba(255, 254, 251, 0.92);
    color: var(--warm-text, #5C4D43);
    box-shadow: 0 4px 16px rgba(92, 77, 67, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ss-scroll-fab.ss-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ss-scroll-fab:hover {
    background: rgba(255, 254, 251, 1);
    box-shadow: 0 6px 20px rgba(92, 77, 67, 0.18);
    transform: scale(1.08);
  }

  .ss-scroll-fab:active {
    transform: scale(0.95);
  }

  /* QA HIGH (WCAG 2.4.7): visible keyboard focus rings for chat's interactive BUTTONS + the scroll FAB.
     NOTE: the composer textareas are intentionally excluded — a 2px offset outline on the rounded
     textarea clipped into an ugly grey arc on real iOS; their focus shows via .input-card:focus-within.
     The buttons/FAB previously set outline:none with no replacement
     (so does the shared .focus-ring utility), leaving keyboard users unable to see what was focused.
     Theme-aware sage ring (follows the send/mic accent) with >=3:1 contrast on both the warm light bg
     (#4A7A68 ~4.6:1) and the dark #1E1C1A bg (#7CB8A4 ~8:1). :focus-visible can't render in headless engines, so this is proven by
     CSS cascade (this rule is (2,1,2)+!important, beating the (0,2,0) outline:none rules) + contrast. */
  body:has(#chat-app) :is(
    button#chat-send-btn, button#chat-direct-send,
    button#chat-mic-btn, button#chat-direct-mic-btn,
    label#chat-upload-btn, label#chat-direct-upload-btn,
    button.chat-plus-btn,
    button.ss-voice-trigger,
    button#ss-scroll-bottom-fab,
    button.chat-msg-action-btn,
    button#chat-back-btn,
    button.chat-bubble-show-more
  ):focus-visible {
    outline: 2px solid #4A7A68 !important;
    outline-offset: 2px !important;
  }
  [data-theme="dark"] body:has(#chat-app) :is(
    button#chat-send-btn, button#chat-direct-send,
    button#chat-mic-btn, button#chat-direct-mic-btn,
    label#chat-upload-btn, label#chat-direct-upload-btn,
    button.chat-plus-btn,
    button.ss-voice-trigger,
    button#ss-scroll-bottom-fab,
    button.chat-msg-action-btn,
    button#chat-back-btn,
    button.chat-bubble-show-more
  ):focus-visible {
    outline-color: #7CB8A4 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-scroll-fab {
      transition: none;
    }
  }

  @media (max-width: 640px) {
    .ss-scroll-fab {
      width: 44px;
      height: 44px;
    }
  }

  /* ── Conversation dropdown, confirm dialog, input and bubbles ── */

  body.chat-ny-in-conversation .confirm-overlay,
  body.chat-ny-in-conversation .chat-confirm-overlay,
  body.chat-ny-in-conversation [class*="modal-overlay"],
  body.chat-ny-in-conversation [class*="dialog-overlay"] {
    background: rgba(92, 77, 67, 0.24) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  body.chat-ny-in-conversation .confirm-dialog,
  body.chat-ny-in-conversation .chat-confirm-dialog,
  body.chat-ny-in-conversation [class*="modal-content"],
  body.chat-ny-in-conversation [class*="dialog-content"] {
    min-width: 320px !important;
    max-width: min(420px, calc(100vw - 40px)) !important;
    padding: 24px !important;
    border: 1px solid rgba(228, 220, 212, 0.72) !important;
    border-radius: var(--radius-card, 18px) !important;
    background: rgba(255, 254, 251, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow:
      0 4px 16px rgba(92, 77, 67, 0.08),
      0 16px 48px rgba(92, 77, 67, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  }

  body.chat-ny-in-conversation .confirm-title,
  body.chat-ny-in-conversation .confirm-message {
    color: var(--warm-text, #5C4D43) !important;
  }

  body.chat-ny-in-conversation .confirm-title {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin: 0 0 8px !important;
  }

  body.chat-ny-in-conversation .confirm-message {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.55 !important;
    margin: 0 0 22px !important;
  }

  body.chat-ny-in-conversation .confirm-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  body.chat-ny-in-conversation .chat-confirm-dialog textarea,
  body.chat-ny-in-conversation [class*="dialog-content"] input,
  body.chat-ny-in-conversation [class*="dialog-content"] textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(228, 220, 212, 0.6) !important;
    border-radius: 12px !important;
    background: rgba(255, 254, 251, 0.92) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    color: var(--warm-text, #5C4D43) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(212, 168, 154, 0.10) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  body.chat-ny-in-conversation .chat-confirm-dialog textarea:focus-visible,
  body.chat-ny-in-conversation [class*="dialog-content"] input:focus-visible,
  body.chat-ny-in-conversation [class*="dialog-content"] textarea:focus-visible {
    border-color: var(--rose, #D4A89A) !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .confirm-btn,
  body.chat-ny-in-conversation .chat-confirm-dialog button,
  body.chat-ny-in-conversation [class*="dialog-content"] button {
    min-height: 42px !important;
    padding: 10px 20px !important;
    border: 1px solid rgba(228, 220, 212, 0.6) !important;
    border-radius: 14px !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  body.chat-ny-in-conversation .confirm-cancel,
  body.chat-ny-in-conversation .chat-confirm-dialog button:first-of-type,
  body.chat-ny-in-conversation [class*="dialog-content"] button:first-of-type {
    background: rgba(255, 254, 251, 0.92) !important;
    color: var(--warm-text, #5C4D43) !important;
  }

  body.chat-ny-in-conversation .confirm-cancel:hover,
  body.chat-ny-in-conversation .chat-confirm-dialog button:first-of-type:hover {
    background: rgba(212, 168, 154, 0.10) !important;
  }

  body.chat-ny-in-conversation .confirm-ok,
  body.chat-ny-in-conversation .chat-confirm-dialog button:last-of-type,
  body.chat-ny-in-conversation [class*="dialog-content"] button:last-of-type {
    background: var(--rose-dark, #9B6050) !important;
    border-color: transparent !important;
    color: var(--white, #FFFEFB) !important;
    box-shadow: 0 4px 12px rgba(155, 96, 80, 0.3) !important;
  }

  body.chat-ny-in-conversation .confirm-ok:hover,
  body.chat-ny-in-conversation .chat-confirm-dialog button:last-of-type:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(155, 96, 80, 0.4) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box {
    /* #3177: converge the sticky conversation pill with the welcome .input-card
       surface — calmer border, opaque warm-white, soft welcome-grade shadow. The old
       translucent 0.86 + blur(12px) frosted treatment read heavier/older than the
       welcome composer; opaque also drops the per-scroll-frame backdrop-blur cost on
       mobile. Sticky placement, the gradient dock separation, focus-within, the
       rose-dark send/confirm action system, and dark mode are intentionally unchanged. */
    border: 1px solid rgba(228, 220, 212, 0.6) !important;
    border-radius: var(--radius-card, 18px) !important;
    background: var(--white, #FFFEFB) !important;
    box-shadow:
      0 2px 8px rgba(92, 77, 67, 0.06),
      0 8px 32px rgba(92, 77, 67, 0.04) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box textarea,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box input {
    font-family: var(--font-family) !important;
    font-style: normal !important;
    font-size: var(--font-size-base) !important;
    color: var(--warm-text, #5C4D43) !important;
    min-height: 44px;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box textarea::placeholder,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box input::placeholder {
    font-family: var(--font-family) !important;
    font-style: normal !important;
    color: var(--warm-text-light, #8A7E72) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box:focus-within {
    border-color: rgba(212, 168, 154, 0.3) !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--sage-dark, #4A7A68) !important;
    color: var(--white, #FFFEFB) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.18) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn:not(.is-empty):not([hidden]),
  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn.is-stop:not([hidden]) {
    display: inline-flex !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 3px 10px rgba(92, 77, 67, 0.24) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--white, #FFFEFB) !important;
    stroke: var(--white, #FFFEFB) !important;
  }

  body.chat-ny-in-conversation .chat-message.sent .chat-bubble,
  body.chat-ny-in-conversation .chat-message.user .chat-bubble,
  body.chat-ny-in-conversation .chat-message--user .chat-bubble {
    /* samtale-craft 17/7: rosa→falmet VARM grøn (fortsætter #6045's welcome-flytning).
       Mortens dom på v1: sage-stoppene (B−R +5) læste BLÅT på den varme cream — reglen er nu
       B UNDER R (her R−B +6): composited lander stoppene på rgb(248,251,243)→rgb(230,239,224),
       en falmet gul-grøn, ikke teal. Ink stays #5C4D43 (6.9:1 on the deep stop). Surface tier
       only: never #4A7A68/#3D6B57 as fill or ink here (rank rule — the send button owns accent
       tier). --ss-bubble-fade-rgb feeds the is-collapsed fade in chat-messages.css so the fade
       can never drift from the skin again. */
    --ss-bubble-fade-rgb: 238, 242, 233;
    background: linear-gradient(135deg, rgba(250, 252, 247, 0.95), rgba(236, 241, 232, 0.88)) !important;
    border: 1px solid rgba(150, 170, 145, 0.26) !important;
    /* Physical ownership tail: user is always right, independent of the
       bubble's own dir=auto text direction. */
    border-radius: 22px 22px 6px 22px!important;
    /* Hug content up to max-width. Without an explicit width the bubble is a
       block that the flex chain squeezes below its own word width, breaking
       short words mid-word on mobile (e.g. "Farvel" -> "Farv/el", "Godmorgen").
       content-box keeps fit-content based on text width instead of letting
       border-box padding eat into the word; max-width keeps long text/URLs
       wrapping, and 26px preserves the old 60px border-box minimum. */
    width: fit-content !important;
    /* samtale-craft 17/7: content-box means padding sits OUTSIDE max-width — at 100% a long wrapping
       message bled 32px (2×16 inline padding) past the column and clipped at the panel edge
       (and dragged the end-aligned "Vis mere" label with it). Cap to the column minus the
       padding; fit-content word-protection for short words is untouched. */
    max-width: calc(100% - 32px) !important;
    box-sizing: content-box !important;
    min-width: 26px !important;
    color: var(--warm-text, #5C4D43) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.6 !important;
    /* shadow stays warm brown (shadows take the page's shade, never the object's hue);
       highlight carries the warm-green cast — pure white on a G-dominant fill reads frosty */
    box-shadow:
      0 1px 2px rgba(92, 77, 67, 0.04),
      inset 0 1px 0 rgba(252, 254, 249, 0.5) !important;
  }

  /* AI-beskeder: no visible bubble */
  body.chat-ny-in-conversation .chat-message.received .chat-bubble,
  body.chat-ny-in-conversation .chat-message.assistant .chat-bubble,
  body.chat-ny-in-conversation .chat-message--assistant .chat-bubble {
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--warm-text, #5C4D43) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .chat-message-time {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    color: var(--warm-text-light, #8A7E72) !important;
  }

  /* Keep message actions out of normal flow.
     The bundle renders `.chat-msg-footer` below every bubble; if it stays in flow,
     short conversations look vertically loose even when the input is sticky. */
  body.chat-ny-in-conversation .chat-message {
    position: relative !important;
    overflow: visible !important;
  }

  body.chat-ny-in-conversation .chat-message-content {
    position: relative !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body.chat-ny-in-conversation .chat-msg-footer {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    height: 28px !important;
    margin-top: 12px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 6 !important;
  }

  body.chat-ny-in-conversation .chat-message.sent .chat-msg-footer,
  body.chat-ny-in-conversation .chat-message.user .chat-msg-footer,
  body.chat-ny-in-conversation .chat-message--user .chat-msg-footer {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    justify-content: flex-end !important;
    top: calc(100% + 2px) !important;
    margin-top: 4px !important;
  }

  /* Hover bridge — keeps :hover active while cursor crosses to the edit footer */
  body.chat-ny-in-conversation .chat-message.sent::after,
  body.chat-ny-in-conversation .chat-message.user::after,
  body.chat-ny-in-conversation .chat-message--user::after {
    content: '' !important;
    position: absolute !important;
    inset-inline-end: 0 !important;
    top: 100% !important;
    width: 100% !important;
    height: 34px !important;
    z-index: 5 !important;
  }

  body.chat-ny-in-conversation .chat-message:hover .chat-msg-footer,
  body.chat-ny-in-conversation .chat-message:focus-within .chat-msg-footer {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.chat-ny-in-conversation .chat-message.received,
  body.chat-ny-in-conversation .chat-message.assistant,
  body.chat-ny-in-conversation .chat-message--assistant {
    margin-bottom: 14px !important;
  }

  body.chat-ny-in-conversation .chat-message.received .chat-msg-footer,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-footer,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-footer {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.chat-ny-in-conversation .chat-message.received .chat-msg-actions,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-actions,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-actions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn {
    opacity: 1 !important;
    color: var(--warm-text, #5C4D43) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn:hover,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn:hover,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn:hover,
  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn:focus-visible,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn:focus-visible,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn:focus-visible {
    background: rgba(212, 168, 154, 0.10) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn svg,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn svg,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn svg,
  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn path,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn path,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn path,
  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn rect,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn rect,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn rect,
  body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn polygon,
  body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn polygon,
  body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn polygon {
    opacity: 1 !important;
    stroke: currentColor !important;
  }

  body.chat-ny-in-conversation .chat-msg-action-btn.tts-playing {
    color: var(--warm-text, #5C4D43) !important;
    opacity: 1 !important;
    background: rgba(212, 168, 154, 0.15) !important;
    border-radius: 6px !important;
  }

  body.chat-ny-in-conversation .chat-msg-action-btn.tts-paused {
    color: var(--warm-text, #5C4D43) !important;
    opacity: 0.8 !important;
    background: rgba(212, 168, 154, 0.10) !important;
    border-radius: 6px !important;
  }

  body.chat-ny-in-conversation .chat-tts-active-block {
    /* visual styling now in chat-tts-highlight.css (#2760) */
  }

  body.chat-ny-in-conversation .chat-tts-block-playing .chat-tts-active-block {
    /* visual styling now in chat-tts-highlight.css (#2760) */
  }

  .section-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    padding: 0 24px;
  }

  .section-divider::before,
  .section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--divider), transparent);
  }

  .section-divider span {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--warm-text-light);
    white-space: nowrap;
    letter-spacing: 0;
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 20px;
  }

  @media (max-width: 1100px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 640px) {
    .cards { grid-template-columns: 1fr; gap: 16px; }
  }

  .card {
    border-radius: var(--radius-card, 18px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(228, 220, 212, 0.6);
    box-shadow:
      0 1px 2px rgba(92, 77, 67, 0.06),
      0 4px 16px rgba(92, 77, 67, 0.05),
      0 12px 40px rgba(92, 77, 67, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .card[data-card-href] {
    cursor: pointer;
  }

  .card[data-card-href]:focus-visible {
    outline: none;
    outline-offset: 4px;
  }

  .card:hover,
  .card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(92, 77, 67, 0.20);
    box-shadow: none;

  }

  body.onb-active .card[data-card-href] {
    pointer-events: none;
    cursor: default;
  }

  body.onb-active .card:hover,
  body.onb-active .card:focus-within {
    transform: none;
    border-color: rgba(228, 220, 212, 0.6);
    box-shadow:
      0 1px 2px rgba(92, 77, 67, 0.06),
      0 4px 16px rgba(92, 77, 67, 0.05),
      0 12px 40px rgba(92, 77, 67, 0.03);
  }

  @media (prefers-reduced-motion: reduce) {
    #chat-app .main *,
    #chat-app .main *::before,
    #chat-app .main *::after {
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important;
    }
  }

  .card-item--ai .card-item-link {
    display: inline-flex;
    min-height: 44px;
    flex-direction: column;
    justify-content: center;
  }

  .card-item--sending {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .card-item--sending .card-item-link {
    flex-direction: row;
    align-items: center;
  }

  .card-item--sending .card-item-link::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--sage-dark, #4A7A68);
    border-top-color: transparent;
    border-radius: 50%;
    animation: card-ai-spin 0.6s linear infinite;
    margin-inline-start: 8px;
    vertical-align: middle;
  }

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

  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .card-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .card-dot--rose {
    background: var(--rose);
    box-shadow: 0 2px 8px rgba(212, 168, 154, 0.4);
  }

  .card-dot--sage {
    background: var(--sage);
    box-shadow: 0 2px 8px rgba(168, 197, 184, 0.4);
  }

  .card-dot--slate {
    background: var(--slate);
    box-shadow: 0 2px 8px rgba(168, 176, 196, 0.4);
  }

  .card-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2xl);
    color: var(--warm-text);
    flex: 1;
  }

  .card-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text-light);
  }

  .card-count::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: card-pulse 1.8s ease-in-out infinite;
  }

  @keyframes card-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }

  .card-divider {
    height: 1px;
    margin: 14px 0 16px;
    opacity: 1;
    border-radius: 999px;
  }

  .card-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .card-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--font-size-base);
    color: var(--warm-text);
    line-height: 1.55;
    transform-origin: left center;
    transition: background 0.2s ease, filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  }

  html[dir="rtl"] .card-item {
    transform-origin: right center;
  }

  .card-item.is-completing {
    pointer-events: none;
    animation: cardItemCompleteOut 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  html[dir="rtl"] .card-item.is-completing {
    animation-name: cardItemCompleteOutRtl;
  }

  .card-item.is-completing .card-item-text {
    color: var(--warm-text-light);
  }

  .card-item-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--rose);
    margin-top: 1px;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .card-item-checkbox:hover { background: var(--rose-light); }

  .card-item-checkbox::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 999px;
    background: rgba(212, 168, 154, 0.22);
    opacity: 0;
    transform: scale(0.35);
    pointer-events: none;
  }

  .card-item-checkbox.is-checked {
    background: var(--rose);
    border-color: var(--rose);
    box-shadow: 0 0 0 6px rgba(212, 168, 154, 0);
    transform: scale(1.08);
    animation: cardCheckboxPop 320ms cubic-bezier(0.2, 1.4, 0.32, 1);
  }

  .card-item-checkbox.is-checked::before {
    animation: cardCheckboxRipple 360ms ease-out;
  }

  .card-item-checkbox.is-checked::after {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: cardCheckboxTick 180ms ease-out;
  }

  button.card-item-checkbox {
    background: transparent;
    padding: 0;
  }

  @keyframes cardCheckboxPop {
    0% { transform: scale(0.72); }
    62% { transform: scale(1.16); }
    100% { transform: scale(1.08); }
  }

  @keyframes cardCheckboxRipple {
    0% { opacity: 0.9; transform: scale(0.25); }
    100% { opacity: 0; transform: scale(1.6); }
  }

  @keyframes cardCheckboxTick {
    0% { opacity: 0; transform: rotate(45deg) scale(0.3); }
    100% { opacity: 1; transform: rotate(45deg) scale(1); }
  }

  @keyframes cardItemCompleteOut {
    0% {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: saturate(1);
    }
    58% {
      opacity: 1;
      transform: translateX(4px) scale(0.995);
      filter: saturate(0.95);
    }
    100% {
      opacity: 0;
      transform: translateX(14px) scale(0.985);
      filter: saturate(0.8);
    }
  }

  @keyframes cardItemCompleteOutRtl {
    0% {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: saturate(1);
    }
    58% {
      opacity: 1;
      transform: translateX(-4px) scale(0.995);
      filter: saturate(0.95);
    }
    100% {
      opacity: 0;
      transform: translateX(-14px) scale(0.985);
      filter: saturate(0.8);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card-item,
    .card-item.is-completing,
    .card-item-checkbox,
    .card-item-checkbox.is-checked,
    .card-item-checkbox.is-checked::before,
    .card-item-checkbox.is-checked::after {
      animation: none !important;
      transition: none !important;
    }

    .card-item.is-completing {
      opacity: 0.55;
      transform: none;
    }
  }

  .card-item-text {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: var(--font-weight-normal);
  }

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

  .card-item-meta {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-base);
    color: var(--warm-text-light);
  }

  .card-status {
    font-size: var(--font-size-base);
    color: var(--warm-text-light);
    line-height: 1.5;
  }

  .card-status strong {
    color: var(--warm-text);
    font-weight: var(--font-weight-semibold);
  }

  .program-footer {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .program-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--warm-text);
    background: rgba(255, 254, 251, 0.72);
    border: 1px solid rgba(92, 77, 67, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .program-action:hover,
  .program-action:focus-visible {
    color: #3A2F26;
    background: rgba(255, 254, 251, 0.95);
    outline: none;
    outline-offset: 2px;
  }

  /* ══════════════════════════════════════════════
     SIGNAL CARDS - ADHD-first redesign
     ══════════════════════════════════════════════ */

  .cards .card .card-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    margin: 0 -4px;
    border-radius: var(--radius-card, 18px);
  }

  .card-body-title {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--warm-text, #5C4D43);
    line-height: 1.4;
    margin-bottom: 4px;
  }

  .cards .card .card-body-meta {
    position: static;
    margin: 0;
    padding: 0;
    min-height: 21px;
    line-height: 21px;
    display: block;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--card-meta-neutral, rgba(92, 77, 67, 0.62));
  }

  [data-theme="dark"] .card[data-card-href]:focus-visible {
    outline: none;
  }

  [data-theme="dark"] .card-body-title {
    color: #E8DDD4;
  }

  [data-theme="dark"] .card-body-meta {
    color: var(--rose, #D4A89A);
  }

  .card-item-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
  }

  .card-item-link:hover .card-item-text,
  .card-item-link:focus-visible .card-item-text {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .sofia-live-note {
    margin-top: 14px;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--warm-text-light);
    text-align: center;
  }

  .card-item-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin-top: 4px;
  }

  .card-item-dot--rose { background: var(--rose, #D4A89A); }
  .card-item-dot--sage { background: var(--sage, #A8C5B8); }
  .card-item-dot--slate { background: var(--slate, #A8B0C4); }

  .content {
    max-width: 1180px;
    padding-top: 36px;
  }

  .greeting {
    margin-bottom: 40px;
  }

  .greeting h1 {
    font-size: clamp(42px, 4.2vw, 54px);
    line-height: 1.05;
    color: #3A2F26;
    margin-bottom: 14px;
    letter-spacing: 0;
  }

  .greeting p {
    font-family: var(--font-family);
    font-style: normal;
    font-size: var(--font-size-lg);
    line-height: 1.45;
    color: rgba(92, 77, 67, 0.68);
  }

  .input-wrapper {
    width: min(960px, calc(100vw - 184px));
    max-width: none;
    margin-bottom: 30px;
  }

  .input-glow {
    inset: -22px;
    border-radius: 48px;
    background:
      radial-gradient(ellipse at 50% 55%, rgba(168, 197, 184, 0.1) 0%, transparent 68%);
  }

  .input-card {
    min-height: 210px;
    border-radius: 30px;
    padding: 34px 48px 36px;
    border: 1px solid rgba(228, 220, 212, 0.86);
    box-shadow:
      0 1px 2px rgba(92, 77, 67, 0.06),
      0 10px 34px rgba(92, 77, 67, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  .input-card .chat-input-field {
    font-size: var(--font-size-4xl);
    line-height: 1.4;
  }

  .input-card textarea.chat-input-field {
    min-height: 44px !important;
    height: 44px;
  }

  .input-card .chat-input-toolbar {
    min-height: 58px;
    margin-top: 56px;
  }

  .input-card .chat-upload-btn,
  .input-card .chat-input-action {
    width: 54px;
    height: 54px !important;
    min-width: 54px;
    min-height: 54px !important;
    max-height: 54px;
  }

  .input-card .chat-upload-btn {
    background: rgba(255, 254, 251, 0.86);
    border-color: rgba(228, 220, 212, 0.9);
    box-shadow:
      0 4px 14px rgba(92, 77, 67, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .input-card .chat-send-btn {
    width: 64px;
    height: 64px !important;
    min-width: 64px;
    min-height: 64px !important;
    max-height: 64px;
    background: linear-gradient(135deg, var(--chat-send-from) 0%, var(--chat-send-to) 100%);
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.16);
  }

  .input-card .chat-send-btn:hover {
    background: linear-gradient(135deg, var(--chat-send-hover-from) 0%, var(--chat-send-hover-to) 100%);
    box-shadow: 0 3px 10px rgba(92, 77, 67, 0.20);
  }

  .input-card .chat-send-btn.is-empty {
    opacity: 0.82;
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.10);
    background: linear-gradient(135deg, rgba(110, 138, 126, 0.55) 0%, rgba(74, 122, 104, 0.55) 100%);
  }

  .chat-ny-prompt-area,
  .chat-prompt-area {
    max-width: 960px !important;
    margin-bottom: 42px;
  }

  .quick-actions,
  .chat-prompt-chips {
    max-width: 960px !important;
    gap: 14px !important;
  }

  .chat-ny-prompt-area .quick-action,
  .chat-ny-prompt-area .chat-prompt-chip {
    min-height: 48px;
    padding: 12px 24px !important;
    border-radius: 24px;
    font-size: var(--font-size-base);
    box-shadow:
      0 2px 5px rgba(92, 77, 67, 0.05),
      0 8px 24px rgba(92, 77, 67, 0.04);
  }

  @media (max-width: 767px) {
    .content {
      padding-inline-start: 20px;
      padding-inline-end: 20px;
    }

    .greeting h1 {
      font-size: var(--font-size-6xl);
    }

    .greeting p {
      font-size: var(--font-size-base);
      font-family: var(--font-family);
      font-style: italic;
    }

    .input-wrapper {
      width: 100%;
    }

    .input-card {
      min-height: 132px;
      border-radius: var(--radius-card, 18px);
      padding: 16px 18px;
    }

    .input-card .chat-input-field {
      font-size: var(--font-size-lg);
    }

    .input-card textarea.chat-input-field {
      min-height: 34px !important;
      height: 34px;
    }

    .input-card .chat-input-toolbar {
      min-height: 46px;
      margin-top: 22px;
    }

    .input-card .chat-upload-btn,
    .input-card .chat-input-action,
    .input-card .chat-send-btn {
      width: 44px;
      height: 44px !important;
      min-width: 44px;
      min-height: 44px !important;
      max-height: 44px;
    }

    .chat-ny-prompt-area,
    .chat-prompt-area,
    .quick-actions,
    .chat-prompt-chips {
      max-width: 100% !important;
    }

    .chat-ny-prompt-area .quick-action,
    .chat-ny-prompt-area .chat-prompt-chip,
    body:not(.chat-ny-in-conversation) .quick-action,
    body:not(.chat-ny-in-conversation) .chat-prompt-chip {
      min-height: 44px;
      padding: 10px 18px !important;
      gap: 10px;
      font-size: var(--font-size-base);
      line-height: 1.4;
    }
  }

  /* Touch target minimum 44px for mobile */
  @media (max-width: 767px) {
    .voice-overlay-close,
    .voice-type-toggle,
    .voice-stop-btn,
    .chat-prompt-panel-close,
    .chat-prompt-item-edit,
    .chat-prompt-item-delete,
    .chat-prompt-icon-btn,
    .chat-prompt-color-btn {
      width: 48px !important;
      height: 48px !important;
      min-height: 48px !important;
      min-width: 48px !important;
    }

    .voice-action-pill {
      min-height: 48px !important;
      min-width: 48px !important;
      height: auto !important;
      padding: 13px 20px !important;
    }

    .voice-stop-btn {
      width: auto !important;
      padding: 13px 20px !important;
    }

    .skip-link,
    .skip-link:focus-visible {
      min-height: 44px;
      padding: 12px 24px;
    }
  }

  .content {
    padding-top: 34px;
  }

  .greeting {
    margin-bottom: 34px;
  }

  .greeting h1 {
    font-size: var(--text-h1, 32px);
    line-height: 1.08;
    margin-bottom: 10px;
  }

  .greeting p {
    font-size: var(--font-size-base);
    color: rgba(92, 77, 67, 0.72);
  }

  .input-wrapper {
    width: min(920px, calc(100vw - 204px));
    margin-bottom: 24px;
  }

  .input-card {
    min-height: 178px;
    border-radius: 28px;
    padding: 30px 48px 28px;
  }

  .input-card .chat-input-field {
    font-size: var(--font-size-xl);
  }

  .input-card textarea.chat-input-field {
    min-height: 38px !important;
    height: 38px;
  }

  .input-card .chat-input-toolbar {
    min-height: 54px;
    margin-top: 40px;
  }

  .input-card .chat-upload-btn,
  .input-card .chat-input-action {
    width: 52px;
    height: 52px !important;
    min-width: 52px;
    min-height: 52px !important;
    max-height: 52px;
  }

  .input-card .chat-send-btn {
    width: 58px;
    height: 58px !important;
    min-width: 58px;
    min-height: 58px !important;
    max-height: 58px;
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.16);
  }

  .input-card .chat-send-btn:hover {
    box-shadow: 0 3px 10px rgba(92, 77, 67, 0.20);
  }

  .input-card .chat-send-btn.is-empty {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.10);
  }

  .chat-ny-prompt-area,
  .chat-prompt-area {
    margin-bottom: 34px;
  }

  .quick-action,
  .chat-prompt-chip {
    min-height: 42px;
    padding: 10px 22px;
    font-size: var(--font-size-base);
  }

  @media (max-width: 767px) {
    .input-wrapper {
      width: 100%;
    }

    .input-card {
      min-height: 132px;
      padding: 16px 18px;
    }
  }

  /* Final premium composer reset */
  body:not(.chat-ny-in-conversation) .content {
    max-width: 1160px;
    padding-top: 62px;
    padding-bottom: 24px;
  }

  @media (max-width: 767px) {
    body.has-mn-bar:not(.chat-ny-in-conversation) #chat-empty-voksen {
      padding-bottom: calc(var(--mn-bar-height, 60px) + 24px) !important;
    }
  }

  body:not(.chat-ny-in-conversation) .greeting {
    margin-bottom: 40px;
  }

  body:not(.chat-ny-in-conversation) .greeting h1 {
    max-width: 760px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-bottom: 12px;
    font-family: var(--font-family);
    font-size: clamp(32px, 3.45vw, 48px) !important;
    line-height: 1.08;
    font-weight: var(--font-weight-semibold);
    color: #3A2F26;
    letter-spacing: -0.02em;
  }

  body:not(.chat-ny-in-conversation) .greeting p {
    font-family: var(--font-family);
    font-style: normal;
    font-size: var(--font-size-lg);
    line-height: 1.45;
    color: rgba(92, 77, 67, 0.7);
  }

  body:not(.chat-ny-in-conversation) .input-wrapper {
    width: min(960px, calc(100vw - 280px));
    max-width: none !important;
    margin: 0 auto 28px;
  }

  html[data-theme="dark"] .input-glow {
    display: none;
  }

  body:not(.chat-ny-in-conversation) .input-glow {
    inset: -18px;
    border-radius: 42px;
    background: radial-gradient(ellipse at center, rgba(168, 197, 184, 0.085) 0%, transparent 70%);
  }

  body:not(.chat-ny-in-conversation) .input-card {
    min-height: 206px !important;
    border-radius: 26px !important;
    padding: 30px 32px 28px !important;
    background: rgba(255, 254, 251, 0.52) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid rgba(228, 220, 212, 0.92) !important;
    box-shadow:
      0 1px 2px rgba(92, 77, 67, 0.06),
      0 12px 34px rgba(92, 77, 67, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 58%;
    border-radius: 25px 25px 18px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.62;
    z-index: 0;
  }

  body:not(.chat-ny-in-conversation) .input-card:focus-within {
    border-color: rgba(74, 122, 104, 0.5) !important;
    box-shadow:
      0 1px 2px rgba(58, 47, 38, 0.04),
      0 4px 16px rgba(58, 47, 38, 0.04) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-field {
    font-size: var(--font-size-xl) !important;
    line-height: 1.4;
    color: var(--warm-text);
  }

  body:not(.chat-ny-in-conversation) .input-card textarea.chat-input-field {
    min-height: 38px !important;
    height: 38px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-empty-input-area,
  body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome {
    width: 100% !important;
    max-width: none !important;
    position: relative;
    z-index: 1;
    overflow: visible !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar {
    width: 100% !important;
    max-width: none !important;
    min-height: 58px;
    margin-top: 50px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-plus-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn,
  body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-radius: 50% !important;
    background: rgba(255, 254, 251, 0.9) !important;
    border: 1px solid rgba(228, 220, 212, 0.92) !important;
    box-shadow:
      0 5px 16px rgba(92, 77, 67, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition:
      transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      color 0.2s ease;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn:hover,
  body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.98) 0%, rgba(243, 248, 245, 0.92) 100%) !important;
    border-color: rgba(110, 138, 126, 0.5) !important;
    color: #3A2F26;
    box-shadow:
      0 0 0 4px rgba(110, 138, 126, 0.10),
      0 9px 20px rgba(92, 77, 67, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn:active,
  body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:active {
    transform: translateY(0) scale(0.985);
    box-shadow:
      0 3px 10px rgba(92, 77, 67, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-action {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
      transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
      background 0.2s ease,
      color 0.2s ease;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-action:hover {
    transform: translateY(-1px);
    background: rgba(251, 243, 240, 0.58) !important;
    color: var(--warm-text);
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn {
    color: var(--warm-text-light, #6F6259) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn:hover {
    color: var(--warm-text, #4F443D) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.15px;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn svg,
  body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn svg,
  body:not(.chat-ny-in-conversation) .input-card .chat-input-action svg,
  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn svg {
    transform-origin: 50% 50%;
    transition:
      transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s ease;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn:hover svg,
  body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:hover svg,
  body:not(.chat-ny-in-conversation) .input-card .chat-input-action:hover svg {
    transform: scale(1.08);
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn,
  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty {
    position: relative;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    border-radius: 50% !important;
    overflow: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-clip: padding-box !important;
    color: var(--white) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn:hover {
    transform: translateY(-1px) scale(1.02);
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--chat-send-from) 0%, var(--chat-send-to) 100%);
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.12);
    pointer-events: none;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn:hover::before {
    background: linear-gradient(135deg, var(--chat-send-hover-from) 0%, var(--chat-send-hover-to) 100%);
    box-shadow: 0 3px 10px rgba(92, 77, 67, 0.16);
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn:active::before {
    box-shadow: 0 1px 4px rgba(92, 77, 67, 0.14);
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty::before {
    background: linear-gradient(135deg, rgba(110, 138, 126, 0.55) 0%, rgba(74, 122, 104, 0.55) 100%);
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.08);
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty:hover::before {
    background: linear-gradient(135deg, rgba(110, 138, 126, 0.55) 0%, rgba(74, 122, 104, 0.55) 100%);
    box-shadow: 0 2px 8px rgba(92, 77, 67, 0.08);
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn::after {
    content: none !important;
    display: none !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn svg {
    position: relative;
    z-index: 1;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn:hover svg {
    transform: translateY(-1px);
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn:active {
    transform: translateY(0) scale(0.985);
  }

  body:not(.chat-ny-in-conversation) .chat-ny-prompt-area,
  body:not(.chat-ny-in-conversation) .chat-prompt-area {
    max-width: 960px;
    margin: 0 auto 40px;
  }

  body:not(.chat-ny-in-conversation) .quick-actions,
  body:not(.chat-ny-in-conversation) .chat-prompt-chips {
    max-width: 960px !important;
    gap: 14px !important;
  }

  body:not(.chat-ny-in-conversation) .quick-action,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip {
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 22px;
    font-size: var(--font-size-base);
  }

  body:not(.chat-ny-in-conversation) .quick-action:active,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip:active {
    transform: scale(0.97) !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-field,
  body:not(.chat-ny-in-conversation) .input-card .chat-input-field::placeholder {
    line-height: 1.45 !important;
  }

  body:not(.chat-ny-in-conversation) .input-card textarea.chat-input-field {
    min-height: 48px !important;
    padding: 4px 14px 8px !important;
    overflow-y: hidden;
  }

  .chat-plus-menu,
  .chat-doc-picker {
    border: 1px solid rgba(228, 220, 212, 0.78) !important;
    border-radius: 18px !important;
    background: rgba(255, 254, 251, 1) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
      0 10px 34px rgba(92, 77, 67, 0.12),
      0 2px 8px rgba(92, 77, 67, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    overflow: hidden;
  }

  .chat-plus-menu-item,
  .chat-plus-menu-toggle,
  .chat-doc-import-gdocs {
    min-height: 38px;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    color: var(--warm-text) !important;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }

  .chat-plus-menu-item:hover,
  .chat-plus-menu-toggle:hover,
  .chat-doc-import-gdocs:hover {
    background: rgba(251, 243, 240, 0.84) !important;
    color: var(--icon-active) !important;
  }

  .chat-plus-menu-item svg,
  .chat-plus-menu-toggle svg,
  .chat-doc-import-gdocs svg {
    color: var(--warm-text-light) !important;
  }

  .chat-plus-menu-sep {
    background: rgba(228, 220, 212, 0.82) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body:not(.chat-ny-in-conversation) .input-card *,
    body:not(.chat-ny-in-conversation) .quick-action,
    body:not(.chat-ny-in-conversation) .chat-prompt-chip {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }

  @media (max-width: 767px) {
    body:not(.chat-ny-in-conversation) .content {
      padding: 40px 20px 24px;
    }

    body:not(.chat-ny-in-conversation) .greeting h1 {
      font-size: var(--font-size-7xl) !important;
    }

    body:not(.chat-ny-in-conversation) .input-wrapper {
      width: 100%;
    }

    body:not(.chat-ny-in-conversation) .input-card {
      min-height: 132px !important;
      padding: 16px 18px !important;
      border-radius: var(--radius-card, 18px) !important;
    }

    body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar {
      margin-top: 22px !important;
      min-height: 46px;
    }

    body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn,
    body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn,
    body:not(.chat-ny-in-conversation) .input-card .chat-input-action,
    body:not(.chat-ny-in-conversation) .input-card .chat-send-btn {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      border-width: 0 !important;
    }
  }

  .skip-link {
    position: absolute;
    top: -60px;
    inset-inline-start: 0;
    background: var(--warm-text);
    color: var(--white);
    padding: 12px 24px;
    z-index: 9000; /* --z-skip */
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: 8px; border-end-start-radius: 0;
    text-decoration: none;
    transition: top 0.15s ease;
  }

  .skip-link:focus-visible {
    top: 0;
  }

  /* Prompt panel premium cascade guards */
  body:not(.chat-ny-in-conversation) .quick-action,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip {
    box-shadow:
      0 1px 4px rgba(92, 77, 67, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  }

  body:not(.chat-ny-in-conversation) .quick-action:hover,
  body:not(.chat-ny-in-conversation) .chat-prompt-chip:hover {
    box-shadow:
      0 4px 14px rgba(92, 77, 67, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }

  /* #3101 — sage hover for the "+ Ny" ghost chip (was the rose tint). Higher
     specificity than the welcome hover above, so this is the cascade winner;
     keeps the soft lift shadow but drops the rose glow ring. */
  body:not(.chat-ny-in-conversation) .chat-prompt-chip.chat-prompt-add:hover {
    background: rgba(110, 138, 126, 0.08) !important;
    border-color: rgba(110, 138, 126, 0.7) !important;
    color: #4A7A68 !important;
    box-shadow:
      0 4px 14px rgba(92, 77, 67, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }

  body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-list .chat-prompt-item:hover,
  body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-list .chat-prompt-item:focus-within,
  body:not(.chat-ny-in-conversation) .chat-prompt-item:hover {
    background: rgba(212, 168, 154, 0.06) !important;
    border-color: transparent !important;
  }

  body:not(.chat-ny-in-conversation) .chat-prompt-form .chat-prompt-form-input,
  body:not(.chat-ny-in-conversation) .chat-prompt-form textarea {
    border: 1px solid rgba(228, 220, 212, 0.6) !important;
    border-radius: 14px !important;
    background: rgba(255, 254, 251, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--warm-text) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    padding: 12px 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-form .chat-prompt-form-input:focus-visible,
  body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-form textarea:focus-visible,
  body:not(.chat-ny-in-conversation) .chat-prompt-form .chat-prompt-form-input:focus-visible,
  body:not(.chat-ny-in-conversation) .chat-prompt-form textarea:focus-visible {
    border-color: rgba(212, 168, 154, 0.5) !important;
    box-shadow: none !important;
    outline: none !important;
    outline-offset: 2px !important;
    background: rgba(255, 254, 251, 0.9) !important;
  }

  @media (max-width: 767px) {
    body:not(.chat-ny-in-conversation) .chat-prompt-form .chat-prompt-form-input,
    body:not(.chat-ny-in-conversation) .chat-prompt-form textarea {
      font-size: var(--font-size-base) !important;
      padding: 12px 14px !important;
      border-radius: 12px !important;
    }
  }

  /* === Blød Bølge Warm Dark === */
  [data-theme="dark"] body,
  [data-theme="dark"] body.chat-ny-in-conversation,
  [data-theme="dark"] .app,
  [data-theme="dark"] body.chat-ny-in-conversation .app {
    /* #3225 — consume the shared app dark canvas (single source of truth in
       assets/css/blod-bolge-shell.css). Fallback keeps /chat/ identical if the
       shell ever fails to load; on /chat/ the token resolves to the same value. */
    background: var(--app-dark-canvas, linear-gradient(180deg, var(--color-bg, #171512) 0%, var(--color-card, #201B18) 55%, var(--color-bg, #181613) 100%)) !important;
    color: #E8DDD4;
  }

  [data-theme="dark"] .main,
  [data-theme="dark"] #chat-main {
    background: transparent !important;
    color: #E8DDD4;
  }

  /* maskheader-craft: dark har INGEN egen header-regel længere. Veil-æraens dark-plade
     (rgba(30,28,26)-rampen, der aldrig matchede dark-canvasgradienten #171512→#201B18) er død;
     masken på scroll-fladen er farveløs og virker identisk i begge temaer. */

  [data-theme="dark"] body.chat-ny-in-conversation .chat-input {
    background: linear-gradient(to top,
      rgba(30, 28, 26, 1) 0%,
      rgba(30, 28, 26, 1) 50%,
      rgba(30, 28, 26, 0) 100%) !important;
  }

  [data-theme="dark"] .main::before,
  [data-theme="dark"] .main::after {
    border-color: rgba(212, 168, 154, 0.08);
  }

  [data-theme="dark"] .decorative-arcs,
  [data-theme="dark"] .decorative-arcs-2 {
    border-color: rgba(212, 168, 154, 0.07);
    opacity: 0.38;
  }

  [data-theme="dark"] .decorative-arcs-bl,
  [data-theme="dark"] .decorative-arcs-bl-2 {
    border-color: rgba(168, 197, 184, 0.07);
    opacity: 0.35;
  }

  [data-theme="dark"] .input-card,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card,
  [data-theme="dark"] .card,
  [data-theme="dark"] .chat-input-box,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-input-box,
  [data-theme="dark"] .chat-prompt-panel-inner,
  [data-theme="dark"] .chat-prompt-form-input,
  [data-theme="dark"] .chat-prompt-form textarea,
  [data-theme="dark"] .chat-plus-menu,
  [data-theme="dark"] .chat-doc-picker,
  [data-theme="dark"] .quick-action,
  [data-theme="dark"] .chat-prompt-chip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] .chat-plus-menu,
  [data-theme="dark"] .chat-doc-picker {
    /* chip-v2 bug 2: .95-alpha UDEN backdrop-blur (slås fra ovenfor) lod
       welcome-teksten skinne igennem pladen — menupladen er SOLID i dark. */
    background: rgb(46, 42, 38) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    box-shadow:
      0 10px 34px rgba(20, 18, 15, 0.4),
      0 2px 8px rgba(20, 18, 15, 0.3),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  [data-theme="dark"] .chat-plus-menu-item,
  [data-theme="dark"] .chat-plus-menu-toggle,
  [data-theme="dark"] .chat-doc-import-gdocs {
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .chat-plus-menu-item:hover,
  [data-theme="dark"] .chat-plus-menu-toggle:hover,
  [data-theme="dark"] .chat-doc-import-gdocs:hover {
    background: rgba(232, 224, 216, 0.08) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .chat-plus-menu-item svg,
  [data-theme="dark"] .chat-plus-menu-toggle svg,
  [data-theme="dark"] .chat-doc-import-gdocs svg {
    color: rgba(232, 224, 216, 0.6) !important;
  }

  [data-theme="dark"] .chat-plus-menu-sep {
    background: rgba(232, 224, 216, 0.08) !important;
  }

  [data-theme="dark"] .greeting h1,
  [data-theme="dark"] .card-title,
  [data-theme="dark"] .chat-prompt-panel-title {
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .card-dot--rose {
    background: rgba(212, 168, 154, 0.74) !important;
    box-shadow: 0 2px 6px rgba(212, 168, 154, 0.14) !important;
  }

  [data-theme="dark"] .card-dot--sage {
    background: rgba(168, 197, 184, 0.72) !important;
    box-shadow: 0 2px 6px rgba(168, 197, 184, 0.12) !important;
  }

  [data-theme="dark"] .card-dot--slate {
    background: rgba(168, 176, 196, 0.72) !important;
    box-shadow: 0 2px 6px rgba(168, 176, 196, 0.12) !important;
  }

  [data-theme="dark"] .card-count::after {
    width: 7px !important;
    height: 7px !important;
    opacity: 0.52 !important;
    animation: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .greeting p,
  [data-theme="dark"] .card-item-text,
  [data-theme="dark"] .card-item-meta,
  [data-theme="dark"] .card-empty,
  [data-theme="dark"] .chat-message-time,
  [data-theme="dark"] .chat-prompt-empty p {
    color: var(--color-text-secondary, #B8AFA6) !important;
  }

  [data-theme="dark"] .card,
  [data-theme="dark"] .chat-message.received .chat-bubble,
  [data-theme="dark"] .chat-message.sent .chat-bubble,
  [data-theme="dark"] .chat-bubble-file-chip,
  [data-theme="dark"] .chat-code-block,
  [data-theme="dark"] .chat-prompt-item {
    background: rgb(42, 38, 34) !important;
    border-color: rgba(232, 224, 216, 0.08) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .card:hover,
  [data-theme="dark"] .card:focus-within {
    border-color: rgba(232, 224, 216, 0.18) !important;
  }

  [data-theme="dark"] body.onb-active .card:hover,
  [data-theme="dark"] body.onb-active .card:focus-within {
    border-color: rgba(232, 224, 216, 0.06) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card {
    background: rgba(42, 38, 34, 0.85) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    box-shadow:
      0 14px 40px rgba(20, 18, 15, 0.34),
      0 2px 8px rgba(20, 18, 15, 0.22),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card::before {
    background: linear-gradient(180deg, rgba(232, 224, 216, 0.06) 0%, rgba(232, 224, 216, 0) 100%) !important;
    opacity: 0.42;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card:focus-within {
    border-color: rgba(168, 197, 184, 0.35) !important;
    box-shadow:
      0 14px 40px rgba(20, 18, 15, 0.34),
      0 2px 8px rgba(20, 18, 15, 0.22),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  [data-theme="dark"] .chat-ny-prompt-area .quick-action,
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .quick-action,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip,
  [data-theme="dark"] .chat-prompt-chip,
  [data-theme="dark"] .quick-action {
    background: rgba(42, 38, 34, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
    color: #E8DDD4 !important;
    box-shadow:
      0 1px 4px rgba(20, 18, 15, 0.30),
      inset 0 1px 0 rgba(232, 224, 216, 0.07) !important;
  }

  [data-theme="dark"] .bb-lang-list {
    border-color: rgba(200, 190, 178, 0.15);
    background: rgba(42, 38, 34, 0.96);
    box-shadow: 0 8px 24px rgba(20, 18, 15, 0.34);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-theme="dark"] .bb-lang-option {
    color: #E8DDD4;
  }

  [data-theme="dark"] .bb-lang-option:hover {
    background: rgba(212, 168, 154, 0.10);
  }

  [data-theme="dark"] .bb-lang-option.bb-lang-active {
    color: var(--rose-light, #F4E8E2);
  }

  [data-theme="dark"] .quick-action--rose,
  [data-theme="dark"] .chat-ny-prompt-area .quick-action--rose,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .quick-action--rose,
  [data-theme="dark"] .chat-prompt-chip[data-color="red"],
  [data-theme="dark"] .chat-prompt-chip[data-color="orange"],
  [data-theme="dark"] .chat-prompt-chip[data-color="pink"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="red"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="orange"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="pink"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="red"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="orange"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="pink"] {
    background: rgba(212, 168, 154, 0.16) !important;
    border-color: rgba(212, 168, 154, 0.19) !important;
  }

  [data-theme="dark"] .quick-action--sage,
  [data-theme="dark"] .chat-ny-prompt-area .quick-action--sage,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .quick-action--sage,
  [data-theme="dark"] .chat-prompt-chip[data-color="green"],
  [data-theme="dark"] .chat-prompt-chip[data-color="yellow"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="green"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="yellow"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="green"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="yellow"] {
    background: rgba(160, 200, 170, 0.14) !important;
    border-color: rgba(160, 200, 170, 0.16) !important;
  }

  [data-theme="dark"] .quick-action--slate,
  [data-theme="dark"] .chat-ny-prompt-area .quick-action--slate,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .quick-action--slate,
  [data-theme="dark"] .chat-prompt-chip[data-color="gray"],
  [data-theme="dark"] .chat-prompt-chip[data-color="blue"],
  [data-theme="dark"] .chat-prompt-chip[data-color="purple"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="gray"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="blue"],
  [data-theme="dark"] .chat-ny-prompt-area .chat-prompt-chip[data-color="purple"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="gray"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="blue"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip[data-color="purple"] {
    background: rgba(168, 176, 196, 0.14) !important;
    border-color: rgba(168, 176, 196, 0.16) !important;
  }

  /* --- chat-prompt-panel dark mode --- */
  [data-theme="dark"] .chat-prompt-panel-inner,
  [data-theme="dark"] .chat-prompt-panel-inner[data-color],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="red"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="orange"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="pink"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="green"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="yellow"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="gray"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="blue"],
  [data-theme="dark"] .chat-prompt-panel-inner[data-color="purple"] {
    background: rgba(42, 38, 34, 1) !important;
    border: 1px solid rgba(232, 224, 216, 0.10) !important;
    color: #E8DDD4 !important;
    position: relative;
    isolation: isolate;
    box-shadow:
      0 24px 70px rgba(20, 18, 15, 0.45),
      0 4px 14px rgba(20, 18, 15, 0.3),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  [data-theme="dark"] .chat-prompt-panel-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgb(42, 38, 34);
    pointer-events: none;
  }

  [data-theme="dark"] .chat-prompt-panel-inner > * {
    position: relative;
    z-index: 1;
  }

  [data-theme="dark"] .card-item--sending .card-item-link::after {
    border-color: var(--sage, #A8C5B8) !important;
    border-top-color: transparent !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-input,
  body.chat-ny-in-conversation[data-theme="dark"] .chat-input {
    background: linear-gradient(to top,
      rgba(30, 28, 26, 1) 0%,
      rgba(30, 28, 26, 1) 50%,
      rgba(30, 28, 26, 0) 100%) !important;
  }

  [data-theme="dark"] .ss-scroll-fab {
    background: rgba(42, 38, 34, 0.88);
    border-color: rgba(200, 190, 178, 0.15);
    color: #E8DDD4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] .ss-scroll-fab:hover {
    background: rgba(42, 38, 34, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .chat-input-box,
  [data-theme="dark"] .chat-input-box--welcome,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-input-box,
  [data-theme="dark"] .chat-prompt-form-input,
  [data-theme="dark"] .chat-prompt-form textarea,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-form .chat-prompt-form-input,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-form textarea {
    background: rgba(42, 38, 34, 0.60) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    color: #E8DDD4 !important;
  }

  html[data-theme="dark"] body.chat-ny-in-conversation .chat-input-box {
    background: rgb(42, 38, 34) !important;
  }

  [data-theme="dark"] .chat-input-field,
  [data-theme="dark"] .chat-input-field::placeholder,
  [data-theme="dark"] .chat-prompt-form-input::placeholder,
  [data-theme="dark"] .chat-prompt-form textarea::placeholder {
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .chat-input-field::placeholder,
  [data-theme="dark"] .chat-prompt-form-input::placeholder,
  [data-theme="dark"] .chat-prompt-form textarea::placeholder {
    opacity: 0.62;
  }

  [data-theme="dark"] .chat-prompt-panel-inner .chat-prompt-form-input,
  [data-theme="dark"] .chat-prompt-panel-inner .chat-prompt-form textarea {
    background: rgba(52, 47, 42, 0.90) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-panel-inner .chat-prompt-form .chat-prompt-form-input,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-panel-inner .chat-prompt-form textarea {
    background: rgba(52, 47, 42, 0.90) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-panel-inner .chat-prompt-form .chat-prompt-form-input:focus-visible,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .chat-prompt-panel-inner .chat-prompt-form textarea:focus-visible {
    background: rgba(52, 47, 42, 0.90) !important;
    border-color: rgba(212, 168, 154, 0.30) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  [data-theme="dark"] .chat-prompt-icon-btn {
    background: rgba(52, 47, 42, 0.80) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .chat-prompt-icon-btn.is-selected {
    background: rgba(212, 168, 154, 0.18) !important;
    border-color: rgba(212, 168, 154, 0.30) !important;
    box-shadow: 0 0 0 3px rgba(212, 168, 154, 0.10) !important;
  }

  [data-theme="dark"] .chat-prompt-color-btn {
    border-color: rgba(42, 38, 34, 0.80) !important;
    box-shadow: 0 0 0 1px rgba(232, 224, 216, 0.15) !important;
  }

  [data-theme="dark"] .chat-prompt-color-btn.is-selected {
    box-shadow: 0 0 0 3px rgba(212, 168, 154, 0.22) !important;
  }

  [data-theme="dark"] .chat-prompt-panel-header svg {
    color: rgba(232, 224, 216, 0.60) !important;
  }

  [data-theme="dark"] .chat-prompt-panel-close {
    color: rgba(232, 224, 216, 0.50) !important;
  }

  [data-theme="dark"] .chat-prompt-panel-header {
    border-bottom-color: rgba(232, 224, 216, 0.08) !important;
  }

  [data-theme="dark"] .chat-prompt-form {
    border-top-color: rgba(232, 224, 216, 0.08) !important;
  }

  html[data-theme="dark"] body.chat-ny-in-conversation .chat-input-box:focus-within,
  html[data-theme="dark"] body.chat-ny-in-conversation .chat-input:focus-within .chat-input-box,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-input-box:focus-within,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-input:focus-within .chat-input-box {
    border-color: rgba(212, 168, 154, 0.42) !important;
    box-shadow: none !important;

  }

  [data-theme="dark"] .chat-input-action:hover,
  [data-theme="dark"] .chat-upload-btn:hover,
  [data-theme="dark"] .chat-plus-btn:hover,
  [data-theme="dark"] .chat-back-btn:hover,
  [data-theme="dark"] .chat-prompt-chip:hover,
  [data-theme="dark"] .chat-prompt-header-action:hover,
  [data-theme="dark"] .chat-prompt-panel-close:hover,
  [data-theme="dark"] .chat-prompt-item:hover,
  [data-theme="dark"] .chat-prompt-item:focus-within,
  [data-theme="dark"] .chat-prompt-icon-btn:hover,
  [data-theme="dark"] .chat-prompt-color-btn:hover,
  [data-theme="dark"] .chat-prompt-form-cancel:hover {
    background: rgba(168, 197, 184, 0.10) !important;
  }

  [data-theme="dark"] .chat-prompt-header-action.chat-prompt-cat-delete:hover,
  [data-theme="dark"] .chat-prompt-cat-delete:hover {
    background: rgba(220, 38, 38, 0.12) !important;
    color: var(--color-error, #f87171) !important;
  }

  [data-theme="dark"] .chat-prompt-chip[data-color="red"]:hover,
  [data-theme="dark"] .chat-prompt-chip[data-color="orange"]:hover,
  [data-theme="dark"] .chat-prompt-chip[data-color="pink"]:hover {
    background: rgba(212, 168, 154, 0.18) !important;
    border-color: rgba(212, 168, 154, 0.22) !important;
  }

  [data-theme="dark"] .chat-prompt-chip[data-color="green"]:hover,
  [data-theme="dark"] .chat-prompt-chip[data-color="yellow"]:hover {
    background: rgba(160, 200, 170, 0.15) !important;
    border-color: rgba(160, 200, 170, 0.18) !important;
  }

  [data-theme="dark"] .chat-prompt-chip[data-color="gray"]:hover,
  [data-theme="dark"] .chat-prompt-chip[data-color="blue"]:hover,
  [data-theme="dark"] .chat-prompt-chip[data-color="purple"]:hover {
    background: rgba(168, 176, 196, 0.15) !important;
    border-color: rgba(168, 176, 196, 0.18) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn {
    width: clamp(44px, 4.6vw, 52px) !important;
    height: clamp(44px, 4.6vw, 52px) !important;
    min-width: clamp(44px, 4.6vw, 52px) !important;
    min-height: clamp(44px, 4.6vw, 52px) !important;
    max-height: clamp(44px, 4.6vw, 52px) !important;
    background: rgba(42, 38, 34, 0.78) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
    color: var(--color-text-secondary, #B8AFA6) !important;
    box-shadow:
      0 4px 14px rgba(20, 18, 15, 0.28),
      inset 0 1px 0 rgba(232, 224, 216, 0.08) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn:hover,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:hover {
    background: rgba(212, 168, 154, 0.10) !important;
    border-color: rgba(212, 168, 154, 0.28) !important;
    color: #E8DDD4 !important;
    box-shadow:
      0 0 0 4px rgba(212, 168, 154, 0.06),
      0 8px 18px rgba(20, 18, 15, 0.30),
      inset 0 1px 0 rgba(232, 224, 216, 0.10) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn {
    color: var(--color-text-secondary, #B8AFA6) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn:hover {
    background: rgba(168, 197, 184, 0.10) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty {
    width: clamp(44px, 5vw, 58px) !important;
    height: clamp(44px, 5vw, 58px) !important;
    min-width: clamp(44px, 5vw, 58px) !important;
    min-height: clamp(44px, 5vw, 58px) !important;
    max-height: clamp(44px, 5vw, 58px) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn::before {
    border: 0 solid transparent !important;
    background: linear-gradient(135deg, var(--sage-dark, #4A7A68) 0%, var(--sage-darker, #3D6B57) 100%) !important;
    box-shadow:
      0 4px 14px rgba(20, 18, 15, 0.30),
      inset 0 1px 0 rgba(232, 224, 216, 0.14) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn:hover::before {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--sage-darker, #3D6B57) 0%, var(--sage-darker, #3D6B57) 100%) !important;
    box-shadow:
      0 6px 18px rgba(20, 18, 15, 0.34),
      inset 0 1px 0 rgba(232, 224, 216, 0.16) !important;
  }

  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty::before,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty:hover::before {
    border-color: transparent !important;
    background: linear-gradient(135deg, rgba(74, 122, 104, 0.55) 0%, rgba(61, 107, 87, 0.55) 100%) !important;
    box-shadow:
      0 4px 12px rgba(20, 18, 15, 0.26),
      inset 0 1px 0 rgba(232, 224, 216, 0.12) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .confirm-overlay,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-confirm-overlay,
  [data-theme="dark"] body.chat-ny-in-conversation [class*="modal-overlay"],
  [data-theme="dark"] body.chat-ny-in-conversation [class*="dialog-overlay"] {
    background: rgba(20, 18, 15, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .confirm-dialog,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-confirm-dialog,
  [data-theme="dark"] body.chat-ny-in-conversation [class*="dialog-content"],
  [data-theme="dark"] body.chat-ny-in-conversation [class*="modal-content"] {
    background: rgba(42, 38, 34, 1) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    color: #E8DDD4 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 4px 16px rgba(20, 18, 15, 0.30),
      0 16px 48px rgba(20, 18, 15, 0.22),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .confirm-title,
  [data-theme="dark"] body.chat-ny-in-conversation .confirm-message {
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-confirm-dialog textarea,
  [data-theme="dark"] body.chat-ny-in-conversation [class*="dialog-content"] input,
  [data-theme="dark"] body.chat-ny-in-conversation [class*="dialog-content"] textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
    color: #E8DDD4 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .confirm-cancel {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .confirm-ok {
    background: var(--rose, #D4A89A) !important;
    border-color: transparent !important;
    color: var(--color-bg, #1A1714) !important;
    box-shadow: 0 4px 12px rgba(212, 168, 154, 0.24) !important;
  }

  /* samtale-craft 17/7 dark: sage identity lives in the EDGE, not the fill — pushing the fill until G>R
     composited needs α≈0.24 = a glowing mint slab (+32 luminance vs today's +17); in dark a
     heavier fill costs calm faster than it buys hue. Fill = neutral-cool lift rgba-sage 0.11
     (composites rgb(47,46,42)); border = dark-mode sage token #7CB8A4 at 0.26. Ink #E8DDD4
     = 10.18:1 on the fill. */
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.sent .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.user .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--user .chat-bubble {
    --ss-bubble-fade-rgb: 45, 44, 40;
    background: rgba(168, 197, 184, 0.11) !important;
    border-color: rgba(124, 184, 164, 0.26) !important;
    color: #E8DDD4 !important;
    box-shadow: inset 0 1px 0 rgba(232, 240, 236, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.received .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.assistant .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--assistant .chat-bubble {
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #E8DDD4 !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message-time {
    color: var(--warm-text-light, #9F9184) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn {
    background: transparent !important;
    border-color: transparent !important;
    color: #E8DDD4 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn:hover,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn:hover,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn:hover,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.received .chat-msg-action-btn:focus-visible,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.assistant .chat-msg-action-btn:focus-visible,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--assistant .chat-msg-action-btn:focus-visible {
    background: rgba(212, 168, 154, 0.10) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-msg-action-btn.tts-playing {
    color: var(--warm-text, #E8DDD4) !important;
    background: rgba(255, 255, 255, 0.10) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-msg-action-btn.tts-paused {
    color: var(--warm-text, #E8DDD4) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-tts-active-block {
    /* visual styling now in chat-tts-highlight.css (#2760) */
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-tts-block-playing .chat-tts-active-block {
    /* visual styling now in chat-tts-highlight.css (#2760) */
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn {
    /* Theme-STABLE sage literal (the --sage-dark token flips to the light #7CB8A4
       in dark mode; white glyph on #7CB8A4 is ~2.2:1 = WCAG fail, vs ~4.7:1 on
       #4A7A68). Keep white readable in both themes. */
    background: #4A7A68 !important;
    color: #FFFEFB !important;
    box-shadow: 0 2px 8px rgba(20, 18, 15, 0.28) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn svg {
    color: #FFFEFB !important;
    stroke: #FFFEFB !important;
  }

  /* #3444: dark-mode conversation toolbar hover parity */
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-text-secondary, #B8AFA6) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn:hover,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn:hover {
    background: rgba(232, 224, 216, 0.08) !important;
    border-color: transparent !important;
    color: #E8DDD4 !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action {
    color: var(--color-text-secondary, #B8AFA6) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action:hover {
    background: rgba(168, 197, 184, 0.10) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn:hover {
    box-shadow: 0 3px 10px rgba(20, 18, 15, 0.34) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-toolbar button:focus-visible,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn:focus-visible {
    outline-color: #7CB8A4 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box {
    background: rgb(42, 38, 34) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
    color: #E8DDD4 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box:focus-within,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box:focus-within {
    border-color: rgba(212, 168, 154, 0.42) !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box textarea,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box input {
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box textarea::placeholder,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box input::placeholder {
    color: var(--warm-text-light, #9F9184) !important;
  }

  /* Mobile viewport hardening */
  @media (max-width: 767px) {
    .main {
      min-height: var(--ss-vv-height, 100svh);
    }

    /* (consolidated 2026-05-30 chat-ios-kb-loopfix) sticky-composer remnant removed;
       the flex-shell recovery block is the single mobile composer model. */

    .chat-prompt-chip,
    .chat-prompt-suggestion-btn {
      min-height: 44px !important;
      padding: 12px 16px !important;
      font-size: var(--font-size-base) !important;
    }

    .chat-prompt-panel .chat-prompt-item {
      min-height: 44px !important;
      padding: 12px 14px !important;
    }

    .card-item-link {
      min-height: 44px !important;
    }

    body.chat-ny-in-conversation .chat-header {
      flex-wrap: nowrap !important;
      gap: 4px !important;
    }

    body.chat-ny-in-conversation .chat-message.sent .chat-bubble,
    body.chat-ny-in-conversation .chat-message.user .chat-bubble,
    body.chat-ny-in-conversation .chat-message--user .chat-bubble {
      /* samtale-craft 17/7: content-box — subtract the 2×16 inline padding so the border-box
         stays inside the intended 88% column share (see the base rule). */
      max-width: calc(88% - 32px) !important;
      min-width: 26px !important;
    }

    body.chat-ny-in-conversation .chat-message.received .chat-bubble,
    body.chat-ny-in-conversation .chat-message.assistant .chat-bubble,
    body.chat-ny-in-conversation .chat-message--assistant .chat-bubble {
      max-width: 100% !important;
      min-width: 0 !important;
    }

    :is(.chat-bubble, .ss-tr-body) pre,
    :is(.chat-bubble, .ss-tr-body) code {
      max-width: 100% !important;
      overflow-x: auto !important;
      font-size: var(--font-size-base) !important;
    }
  }

  /* Landscape phones with keyboard pressure */
  @media (max-width: 767px) and (max-height: 400px) {
    body.chat-ny-in-conversation .chat-messages {
      padding-top: 8px !important;
    }

    body.chat-ny-in-conversation .chat-input {
      padding: 4px 0 0 !important;
    }

    .chat-input-box {
      min-height: 44px !important;
      max-height: 80px !important;
    }
  }

  /* Small phones */
  @media (max-width: 380px) {
    .greeting h1 {
      font-size: var(--font-size-2xl) !important;
    }

    .greeting p {
      font-size: var(--font-size-base) !important;
    }

    .chat-prompt-chip {
      min-height: 44px !important;
      padding: 10px 12px !important;
      font-size: var(--font-size-base) !important;
    }

    .chat-input-box,
    .chat-input-box textarea,
    .chat-input-box input {
      font-size: var(--font-size-base) !important;
    }

    body.chat-ny-in-conversation .chat-messages {
      padding-top: 16px !important;
      padding-inline-start: 0 !important;
      padding-inline-end: 0 !important;
      gap: 14px !important;
    }
  }

  @media (max-width: 380px) and (max-height: 400px) {
    body.chat-ny-in-conversation .chat-messages {
      padding-top: 8px !important;
    }
  }

  /* #3165: desktop end-clearance. The conversation shell (.chat-ny-conversation) is the
     scroller and .chat-input is sticky (bottom:16px; z-index:10) painting over content, while
     the last message's action toolbar (.chat-msg-footer, absolute, dives ~44px below the
     bubble) is z-index:6. At scroll-to-bottom the toolbar landed under the sticky input
     (elementFromPoint returned .chat-input-field). Reserve enough end-clearance that the final
     toolbar clears the input band — do NOT raise the toolbar above the input z-index. Mobile
     (@media max-width:767px) re-defines .chat-messages as the scroller with its own
     padding/margin (lines ~6128-6138), so this value only governs desktop. */
  body.chat-ny-in-conversation .chat-messages {
    padding-bottom: 88px !important;
  }

  @media (max-width: 767px) {
    body.chat-ny-in-conversation .chat-messages {
      margin-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html[data-theme="dark"] body.chat-ny-in-conversation .chat-input {
      background: linear-gradient(to top,
        var(--color-bg, #1E1C1A) 0%,
        var(--color-bg, #1E1C1A) 72%,
        rgba(30, 28, 26, 0) 100%) !important;
    }
  }

  /* Final dark conversation guard: keep the rounded input pill opaque so content cannot bleed through it. */
  html[data-theme="dark"] body.chat-ny-in-conversation .chat-input-box,
  html[data-theme="dark"] body.chat-ny-in-conversation .chat-input .chat-input-box,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-input-box,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-input .chat-input-box {
    background: rgb(42, 38, 34) !important;
    border-color: rgba(232, 224, 216, 0.12) !important;
    color: #E8DDD4 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Deep QA 2026-05-03: the welcome textarea lives inside .input-card, so the inner
     input box must stay transparent in dark mode instead of drawing a second card. */
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome {
    background: transparent !important;
    border-color: transparent !important;
    color: #E8DDD4 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Deep QA 2026-05-03: voice overlay is shared, but chat-ny exposes it here. Keep
     its local controls at BDA/WCAG touch size without editing the shared overlay. */
  body:has(#chat-app) .voice-overlay-close,
  body:has(#chat-app) .voice-type-toggle,
  body:has(#chat-app) .voice-action-pill,
  body:has(#chat-app) .voice-stop-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.4 !important;
  }

  body:has(#chat-app) .voice-type-toggle {
    height: 44px !important;
    padding: 0 16px !important;
  }

  body:has(#chat-app) .voice-overlay p,
  body:has(#chat-app) .voice-overlay button,
  body:has(#chat-app) .voice-overlay .voice-transcript-hint,
  body:has(#chat-app) .voice-overlay .voice-typed-hint,
  body:has(#chat-app) .voice-overlay .voice-footer-hint,
  body:has(#chat-app) .voice-overlay .voice-result-label,
  body:has(#chat-app) .voice-overlay .voice-result-task-meta,
  body:has(#chat-app) .voice-overlay .voice-action-pill {
    font-size: var(--font-size-base) !important;
    line-height: 1.4 !important;
  }

  body:has(#chat-app) .voice-overlay-close {
    width: 44px !important;
    height: 44px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body:has(#chat-app) .skip-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
  }

  body:has(#chat-app) .onb-skip,
  body:has(#chat-app) .onb-mini-label,
  body:has(#chat-app) .onb-mini-badge {
    font-size: var(--font-size-base) !important;
    line-height: 1.4 !important;
  }

  body:has(#chat-app) .onb-card h2,
  body:has(#chat-app) .onb-dialog h2,
  body:has(#chat-app) .onb-modal h2 {
    line-height: 1.4 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #chat-main *,
    #chat-main *::before,
    #chat-main *::after,
    body:has(#chat-app) .onb-backdrop,
    body:has(#chat-app) .onb-backdrop *,
    body:has(#chat-app) .onb-backdrop *::before,
    body:has(#chat-app) .onb-backdrop *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }

  /* Deep QA 2026-05-03: closed voice overlay must not stay in keyboard order. */
  body:has(#chat-app) .voice-overlay[aria-hidden="true"],
  body:has(#chat-app) .voice-overlay:not(.is-open),
  body:has(#chat-app) .voice-overlay-backdrop[aria-hidden="true"],
  body:has(#chat-app) .voice-overlay-backdrop:not(.is-open) {
    visibility: hidden !important;
  }

  body:has(#chat-app) .voice-overlay.is-open,
  body:has(#chat-app) .voice-overlay-backdrop.is-open {
    visibility: visible !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body:has(#chat-app) .voice-overlay,
    body:has(#chat-app) .voice-overlay-backdrop,
    body:has(#chat-app) .voice-overlay * {
      animation: none !important;
      transition: none !important;
    }
  }

  body:has(#chat-app) .voice-overlay {
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity 0.2s ease !important;
  }

  @media (max-width: 767px) and (max-height: 450px) {
    body:has(#chat-app) .voice-overlay--typing,
    body:has(#chat-app) .voice-overlay--typing.is-open {
      transform: translateX(-50%) scale(1) !important;
    }
  }

  /* Deep QA 2026-05-03: bundle/voice runtime controls are appended outside
     normal dashboard cards. Keep them touch-safe from this page overlay. */
  body:has(#chat-app) .ss-scroll-fab {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body:has(#chat-app) .chat-scroll-fab {
    display: none !important;
  }

  body:has(#chat-app) .section-label {
    font-size: var(--font-size-base) !important;
    line-height: 1.4 !important;
  }

  /* Chat-ny auto-resize restore: keep the premium shell, but let text set height. */
  body:not(.chat-ny-in-conversation) .input-card {
    min-height: 0 !important;
    padding: 15px 16px 14px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-field,
  body:not(.chat-ny-in-conversation) .input-card .chat-input-field::placeholder {
    font-family: var(--font-family) !important;
    font-style: normal !important;
    font-size: var(--font-size-lg) !important;
    line-height: 1.45 !important;
  }

  body:not(.chat-ny-in-conversation) .input-card textarea.chat-input-field {
    min-height: 48px !important;
    max-height: 200px !important;
    padding: 4px 14px 8px !important;
    overflow-y: hidden;
  }

  #chat-main :is(#chat-direct-input, #chat-input-field):focus-visible {
    outline-color: transparent !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar {
    min-height: 52px !important;
    margin-top: 12px !important;
  }

  @media (max-width: 767px) {
    body:not(.chat-ny-in-conversation) .input-card {
      min-height: 0 !important;
      padding: 8px 10px 8px !important;
    }

    body:not(.chat-ny-in-conversation) .input-card .chat-input-field,
    body:not(.chat-ny-in-conversation) .input-card .chat-input-field::placeholder {
      font-size: var(--font-size-base) !important;
    }

    body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar {
      min-height: 44px !important;
      margin-top: 10px !important;
    }
  }

  /* Visual QA 2026-05-09: keep the chat welcome surface on fixed design
     tokens after the older premium-shell overrides above. */
  html[data-theme="dark"]:has(#chat-app) {
    --color-bg: #1E1C1A !important;
    --color-bg-rgb: 30, 28, 26 !important;
    background: #1E1C1A !important;
  }

  body:not(.chat-ny-in-conversation) .input-card {
    border-radius: 18px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card::before {
    border-radius: 17px 17px 12px 12px !important;
  }

  body:not(.chat-ny-in-conversation) .chat-prompt-chip {
    border-radius: 20px !important;
  }

  body:not(.chat-ny-in-conversation) .card {
    border-radius: 16px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn,
  body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn,
  body:not(.chat-ny-in-conversation) .input-card .chat-input-action,
  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn,
  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }

  body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty {
    opacity: 0.35 !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-upload-btn,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-plus-btn,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-input-action,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-send-btn.is-empty {
    opacity: 0.35 !important;
  }

  body:has(#chat-app) .decorative-arcs,
  body:has(#chat-app) .decorative-arcs-2,
  body:has(#chat-app) .decorative-arcs-bl {
    display: block !important;
  }

  body:has(#chat-app) .card-body[data-signal="loading"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 72px !important;
    overflow: hidden !important;
  }

  body:has(#chat-app) .card-body[data-signal="loading"] .card-body-title,
  body:has(#chat-app) .card-body[data-signal="loading"] .card-body-meta {
    display: block !important;
    color: transparent !important;
    height: 14px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(212, 168, 154, 0.12) 0%, rgba(212, 168, 154, 0.24) 50%, rgba(212, 168, 154, 0.12) 100%) !important;
    background-size: 200% 100% !important;
    animation: shimmer-bar 1.5s ease-in-out infinite !important;
  }

  body:has(#chat-app) .card-body[data-signal="loading"] .card-body-title {
    width: 72% !important;
  }

  body:has(#chat-app) .card-body[data-signal="loading"] .card-body-meta {
    width: 48% !important;
    height: 12px !important;
    opacity: 0.72 !important;
  }

  html[data-theme="dark"] body:has(#chat-app) .card-body[data-signal="loading"] .card-body-title,
  html[data-theme="dark"] body:has(#chat-app) .card-body[data-signal="loading"] .card-body-meta {
    background: linear-gradient(90deg, rgba(232, 224, 216, 0.06) 0%, rgba(232, 224, 216, 0.14) 50%, rgba(232, 224, 216, 0.06) 100%) !important;
    background-size: 200% 100% !important;
  }

  html[data-theme="dark"] body.chat-ny-in-conversation .chat-back-btn,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-back-btn {
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn.is-empty {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* #3444: quiet rest state; gray composer-parity hover */
  body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn {
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--warm-text, #4F443D) !important;
    transition:
      transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      color 0.2s ease;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn:hover,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn:hover {
    background-color: rgba(92, 77, 67, 0.08) !important;
    border-color: transparent !important;
    color: #4A3D34 !important;
    box-shadow: none !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn:active,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 2px 6px rgba(92, 77, 67, 0.08) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action {
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--warm-text-light, #6F6259) !important;
    transition:
      transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
      background 0.2s ease,
      color 0.2s ease;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action:hover {
    transform: translateY(-1px);
    background: rgba(251, 243, 240, 0.58) !important;
    color: var(--warm-text, #4F443D) !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn svg,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn svg,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action svg,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-send-btn svg {
    transform-origin: 50% 50%;
    transition:
      transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s ease;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-upload-btn:hover svg,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn:hover svg,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-action:hover svg {
    transform: scale(1.08);
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-toolbar button:focus-visible,
  body.chat-ny-in-conversation .chat-ny-conversation .chat-plus-btn:focus-visible {
    outline: 2px solid #4A7A68 !important;
    outline-offset: 2px !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-toolbar button:focus:not(:focus-visible) {
    outline: none !important;
  }

  .chat-send-btn.is-empty:not(.is-stop),
  .chat-send-btn[hidden] {
    display: none !important;
  }

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

/* Chat font compliance: keep /chat/ on the Inter guide grid. */
body:has(#chat-app) {
  /* Display-scale type tokens (above global --font-size-3xl: 22px) */
  --font-size-4xl: 24px;
  --font-size-5xl: 28px;
  --font-size-6xl: 32px;
  --font-size-7xl: 36px;
  --font-size-8xl: 40px;
  /* Component-specific display sizes */
  --font-size-flow-heading: 38px;
  --font-size-flow-heading-sm: 31px;

  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
}

body:has(#chat-app) :is(
  #chat-main,
  #bb-sidebar,
  #bb-mobile-nav,
  .mn-fab-group,
  .mn-more-sheet,
  .skip-link,
  .voice-overlay,
  .voice-overlay-backdrop,
  #onb-backdrop,
  .chat-plus-menu
),
body:has(#chat-app) :is(
  #chat-main,
  #bb-sidebar,
  #bb-mobile-nav,
  .mn-fab-group,
  .mn-more-sheet,
  .voice-overlay,
  .voice-overlay-backdrop,
  #onb-backdrop,
  .chat-plus-menu
) :where(*:not(pre):not(code):not(kbd):not(samp)) {
  font-family: var(--font-family) !important;
}

body:has(#chat-app) #chat-main :is(pre, code, kbd, samp, pre *) {
  font-family: var(--font-mono, 'SF Mono', 'SFMono-Regular', Monaco, 'Cascadia Code', Consolas, monospace) !important;
  font-size: var(--font-size-sm) !important;
}

body:has(#chat-app) .greeting h1 {
  font-size: var(--font-size-8xl) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) .greeting p {
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-normal) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) :is(
  .card-title,
  .chat-prompt-panel-title,
  .confirm-title,
  #onb-backdrop .onb-screen h2
) {
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) .card-body-title {
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) .chat-prompt-chip {
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) :is(#chat-direct-input, #chat-input-field),
body:has(#chat-app) :is(#chat-direct-input, #chat-input-field)::placeholder {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-normal) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) :is(
  .chat-plus-btn,
  .chat-upload-btn,
  .chat-input-action,
  .chat-send-btn,
  .chat-msg-footer,
  .chat-msg-footer button,
  #bb-sidebar .sidebar-mic,
  #bb-sidebar .sidebar-avatar,
  .ss-scroll-fab,
  .voice-overlay-close,
  .voice-mic-btn
) {
  font-size: var(--font-size-sm) !important;
}

body:has(#chat-app) #bb-mobile-nav :is(.mn-tab, .mn-tab-label) {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) #bb-mobile-nav .mn-badge:not([data-mn-badge="email"]):not([data-mn-badge="opgaver"]) {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) :is(.mn-fab, .mn-fab-mini, .mn-more-link) {
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0 !important;
}

body:has(#chat-app) .voice-overlay-sofia-badge {
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767px) {
  body:has(#chat-app) .greeting h1 {
    font-size: var(--font-size-7xl) !important;
  }
}

@media (max-width: 380px) {
  body:has(#chat-app) .greeting h1 {
    font-size: var(--font-size-6xl) !important;
  }
}

/* Mobile composer model — CONSOLIDATED 2026-05-30 (chat-ios-kb-loopfix).
   Two dormant, mutually-contradictory mobile models used to live here (a
   position:sticky composer + a document-flow shell). Overridden only by source
   order, they were the landmines behind the iOS keyboard regression seesaw.
   Deleted. The single mobile model is now the visual-viewport pin (below) plus
   the "Mobile flex shell recovery" block (fixed-height flex shell, #chat-messages
   the sole scroller, composer as a normal bottom flex item). */

/* iOS keyboard: pin the chat shell to the visual viewport and follow its offset.
   iOS Safari does NOT support interactive-widget=resizes-content. When the keyboard
   opens, the LAYOUT viewport stays full height (window.innerHeight) while only the
   VISUAL viewport is visible above the keyboard, and iOS lets that smaller visual
   "lens" pan around the larger layout viewport. On focus it pans down into the empty
   region below the app, leaving a blank strip (scrollY stays 0 — it is a visual-
   viewport pan, not a document scroll); the first keystroke triggers a reflow that
   pans it back ("type one letter and it snaps back").

   Fix (what production chat apps do): while a chat input is focused / the keyboard is
   open, pin <html>/<body> with position:fixed and FOLLOW the visual viewport — height
   = var(--ss-vv-height) and top = var(--ss-vv-offset), both updated by
   mobile-composer-viewport.js on every visualViewport resize/scroll. The app then
   always sits exactly under the lens, so the empty region is never revealed. Uses
   top/height, NOT a transform (the flex-shell contract forbids transforms);
   #chat-messages keeps its own internal overflow scroll. Placed before the "Mobile
   flex shell recovery" block so it is a top-level rule, not part of that section. */

/* Conversation-mode html constraint.
   When position:fixed is removed on keyboard close, iOS Safari can leave a scroll
   offset on <html>, pushing the entire body (and composer) below the visible area.
   Pin html with overflow:hidden for the full conversation, not just keyboard-open. */
@media (max-width: 767px) {
  html.ss-mobile-conv-html {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
  }
}

@media (max-width: 767px) {
  html.ss-mobile-input-active,
  html.ss-mobile-kb-open {
    position: fixed !important;
    top: var(--ss-vv-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
  }
  html.ss-mobile-input-active > body,
  html.ss-mobile-kb-open > body {
    position: fixed !important;
    top: var(--ss-vv-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/* Mobile flex shell recovery.
   Keep header/back and composer outside the scroll area. Only #chat-messages
   scrolls, matching the stable public chat keyboard model without letting the
   composer become a page-level footer that can trap navigation. */
@media (max-width: 767px) {
  body:not(.chat-ny-in-conversation) .input-card textarea#chat-direct-input.chat-input-field {
    min-height: 24px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ql-container {
    min-height: 24px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor.ql-blank {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 24px !important;
    overflow-y: hidden !important;
  }

  body:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor.ql-blank::before,
  body:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor.ql-blank p {
    top: 0 !important;
    line-height: 24px !important;
  }

  body:not(.chat-ny-in-conversation) .input-card textarea#chat-direct-input.chat-input-field.ss-mobile-welcome-single-line,
  body:not(.chat-ny-in-conversation) .input-card textarea#chat-direct-input.chat-input-field:placeholder-shown {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 24px !important;
  }

  /* Conversation composer: when empty (placeholder shown), force the box to exactly
     one text line. The blanket 48px JS floor and the no-floor bundle resizers left a
     ~9px dead band below the top-aligned caret (the "phantom 2nd line" on iOS). Keep
     natural padding/line-height (the 17px id-rule wins line-height by specificity);
     just clamp the box to one line. !important beats the bundle setters' inline-normal
     height writes; the JS floor (MOBILE_CONVERSATION_MIN_TEXTAREA_HEIGHT=40) agrees. */
  body.chat-ny-in-conversation .chat-ny-conversation .chat-input-box textarea#chat-input-field:placeholder-shown {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  /* iOS empty-composer caret — REAL-DEVICE fix (round 4), PROVEN on a real iPhone 15 via the
     #2896 oracle: round 3's `line-height: normal` was the WRONG axis. On a real device the empty
     box is 24px (welcome) / 40px (conversation) but `normal` is only ~20px, so the box is TALLER
     than the line — and WebKit paints the empty textarea's caret into that ~14px gap BELOW the
     placeholder (the phantom 2nd line). `normal` even OVERRODE the welcome rule above
     (line-height:24px) that is correctly filling the box. Fix: make the EMPTY line-height EQUAL
     the box height so the caret and placeholder share ONE line box with no gap to drop into.
     Typed text (not :placeholder-shown) keeps its 1.45 leading. Desktop/automation can't see the
     blinking caret, so this is verified on a real iPhone (the screenshot proof + measured gap=0). */
  #chat-app textarea#chat-direct-input:placeholder-shown,
  #chat-app textarea#chat-direct-input:placeholder-shown::placeholder {
    line-height: 24px !important;
  }
  #chat-app textarea#chat-input-field:placeholder-shown,
  #chat-app textarea#chat-input-field:placeholder-shown::placeholder {
    line-height: 40px !important;
  }

  body:not(.chat-ny-in-conversation) .input-wrapper {
    scroll-margin-top: 24px !important;
    scroll-margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.ss-mobile-kb-open body:not(.chat-ny-in-conversation) .input-wrapper {
    scroll-margin-bottom: calc(var(--ss-kb-bottom, 0px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.chat-ny-in-conversation,
  body.chat-ny-in-conversation .app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.chat-ny-in-conversation .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body.chat-ny-in-conversation #chat-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.chat-ny-in-conversation #chat-conversation-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    overflow-anchor: none !important;
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: var(--ss-vv-height, 100dvh) !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    align-items: stretch !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    overflow-y: hidden !important;
    overflow-anchor: none !important;
    scrollbar-gutter: auto !important;
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
  }

  body.chat-ny-in-conversation,
  body.chat-ny-in-conversation :is(.app, .main, #chat-main, #chat-conversation-panel, .chat-ny-conversation) {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }

  body.chat-ny-in-conversation:has(#chat-app) :is(.decorative-arcs, .decorative-arcs-2, .decorative-arcs-bl),
  body.chat-ny-in-conversation :is(.decorative-arcs, .decorative-arcs-2, .decorative-arcs-bl),
  body.chat-ny-in-conversation #onb-backdrop:not(.is-open) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation > .chat-messages,
  body.chat-ny-in-conversation .chat-ny-conversation > .chat-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  /* maskheader-craft mobil: headeren er #chat-main-barn (udenfor panelet, som bærer 12px
     inline-padding) — den skal selv have kant-luften, og fylde hele rækken. */
  body.chat-ny-in-conversation .chat-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
    padding-inline: 12px !important;
  }

  /* maskheader-craft mobil: panelet scroller IKKE her (overflow hidden) — scroll-fladen er
     #chat-messages selv, så masken bor på den. Kortere fade (mobil-plads), samme monotone
     bløde landing i 1. Top-luften (36px) holder første besked fri af fade-dybden (30px).
     Selektoren spejler desktop-maskens :not()-form 1:1 (samme specificitet 0,2,1) — denne
     senere regel vinder på kildeorden og nulstiller panel-masken på mobil. */
  body.chat-ny-in-conversation:not(.ss-pdf-reader-open) .chat-ny-conversation {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.chat-ny-in-conversation .chat-ny-conversation > .chat-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin-bottom: 0 !important;
    padding: 36px 0 12px !important;
    overflow: hidden auto !important;
    overflow-anchor: none !important;
    scrollbar-gutter: auto !important;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.30) 9px,
      rgba(0, 0, 0, 0.70) 19px,
      rgba(0, 0, 0, 0.93) 26px,
      #000 30px) !important;
    mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.30) 9px,
      rgba(0, 0, 0, 0.70) 19px,
      rgba(0, 0, 0, 0.93) 26px,
      #000 30px) !important;
  }

  body.chat-ny-in-conversation .chat-input,
  body.chat-ny-in-conversation .chat-ny-conversation > .chat-input,
  html.ss-mobile-kb-open body.chat-ny-in-conversation .chat-input,
  html.ss-mobile-kb-open body.chat-ny-in-conversation .chat-ny-conversation > .chat-input {
    position: relative !important;
    flex: 0 0 auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    margin: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 30 !important;
    padding: 8px 0 0 !important;
    transform: none !important;
    will-change: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: var(--radius-card, 18px) !important;
  }

  body.chat-ny-in-conversation .chat-input .chat-input-box,
  html.ss-mobile-kb-open body.chat-ny-in-conversation .chat-input .chat-input-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html[data-theme="dark"] body.chat-ny-in-conversation .chat-input,
  html[data-theme="dark"].ss-mobile-kb-open body.chat-ny-in-conversation .chat-input {
    background: transparent !important;
  }

}

.sofia-signal-panel {
  width: 100%;
  max-width: 820px;
  margin: 36px auto 20px;
  padding: 0 20px;
}

.sofia-signal {
  border-radius: var(--radius-card, 18px);
  padding: 24px 28px;
  border: 1px solid rgba(228, 220, 212, 0.6);
  box-shadow:
    0 1px 2px rgba(92, 77, 67, 0.06),
    0 2px 8px rgba(92, 77, 67, 0.04);
  background: var(--white, #FFFEFB);
  transition: opacity 0.2s ease;
}

.sofia-signal--loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sofia-signal-shimmer {
  width: 60%;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(228,220,212,0.3) 25%, rgba(228,220,212,0.6) 50%, rgba(228,220,212,0.3) 75%);
  background-size: 200% 100%;
  animation: sofia-shimmer 1.5s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .sofia-signal-shimmer,
  [data-theme="dark"] .sofia-signal-shimmer {
    animation: none;
    background: rgba(228, 220, 212, 0.45);
  }
  html[data-theme="dark"] .sofia-signal-shimmer {
    background: rgba(255, 255, 255, 0.06);
  }
}

.sofia-signal--fallback {
  text-align: center;
  padding: 20px 24px;
}

.sofia-signal--degraded {
  text-align: center;
  padding: 20px 24px;
}

.sofia-signal-fallback-text {
  margin: 0 0 12px;
  font-size: var(--font-size-base, 15px);
  color: var(--warm-text-light, #8C7B6F);
  line-height: 1.5;
}

.sofia-signal-header {
  margin-bottom: 8px;
}

.sofia-signal-status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rose-dark, #9B6050);
  opacity: 0.85;
}

.sofia-signal-title {
  margin: 0 0 6px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--warm-text, #3D3028);
}

.sofia-signal-summary {
  margin: 0 0 14px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.55;
  color: var(--warm-text-light, #8C7B6F);
}

.sofia-signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sofia-signal-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 20px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  background: rgba(253, 247, 243, 0.6);
  color: var(--warm-text, #3D3028);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sofia-signal-chip:hover {
  background: rgba(253, 247, 243, 1);
  border-color: var(--rose-dark, #9B6050);
}

.sofia-signal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#chat-main .sofia-signal-action--primary {
  min-height: 40px;
  padding: 10px 22px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: 12px;
  background: var(--rose-dark, #9B6050);
  color: var(--white, #FFFEFB);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

#chat-main .sofia-signal-action--primary:hover {
  background: color-mix(in srgb, var(--rose-dark, #9B6050) 88%, black);
}

#chat-main .sofia-signal-action--primary:active {
  transform: scale(0.97);
}

.sofia-signal-time-chips {
  display: flex;
  width: 100%;
  gap: 6px;
  margin-top: 2px;
  margin-bottom: 12px;
}

#chat-main .sofia-signal-time-chip {
  min-height: 32px;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  background: transparent;
  color: var(--warm-text, #3D3028);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#chat-main .sofia-signal-time-chip:hover {
  background: rgba(253, 247, 243, 0.8);
  border-color: var(--rose-dark, #9B6050);
}

.sofia-signal-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#chat-main .sofia-signal-btn {
  min-height: 32px;
  padding: 5px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 8px;
  border: 1px solid rgba(228, 220, 212, 0.5);
  background: transparent;
  color: var(--warm-text-light, #8C7B6F);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#chat-main .sofia-signal-btn:hover {
  color: var(--warm-text, #3D3028);
  border-color: rgba(228, 220, 212, 0.9);
}

#chat-main .sofia-signal-btn--retry {
  min-height: 40px;
  padding: 8px 16px;
}

.sofia-signal-chip:focus-visible,
#chat-main .sofia-signal-action--primary:focus-visible,
#chat-main .sofia-signal-time-chip:focus-visible,
#chat-main .sofia-signal-btn:focus-visible {
  outline: 3px solid rgba(155, 96, 80, 0.32);
  outline-offset: 3px;
}

.sofia-signal-why-text {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
  background: rgba(253, 247, 243, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(228, 220, 212, 0.4);
}

.sofia-signal-trust {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--warm-text-light, #8C7B6F);
  opacity: 0.7;
  font-style: italic;
}

/* ── Sofia Signal — Dark Mode ── */

[data-theme="dark"] .sofia-signal {
  background: var(--color-surface-solid, #2B2A27);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .sofia-signal-status {
  color: var(--rose-light, #D4A090);
}

[data-theme="dark"] .sofia-signal-title {
  color: var(--color-text-primary, #FAF5EF);
}

[data-theme="dark"] .sofia-signal-summary,
[data-theme="dark"] .sofia-signal-fallback-text {
  color: var(--color-text-secondary, #A89B91);
}

[data-theme="dark"] .sofia-signal-chip {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary, #FAF5EF);
}

[data-theme="dark"] .sofia-signal-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--rose-light, #D4A090);
}

html[data-theme="dark"] #chat-main .sofia-signal-action--primary {
  background: #D4A090 !important;
  color: var(--color-bg, #1E1C1A) !important;
  border-color: #D4A090 !important;
}

html[data-theme="dark"] #chat-main .sofia-signal-action--primary:hover {
  background: color-mix(in srgb, #D4A090 85%, white) !important;
}

html[data-theme="dark"] #chat-main .sofia-signal-time-chip {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .sofia-signal-time-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rose-light, #D4A090);
}

html[data-theme="dark"] #chat-main .sofia-signal-btn {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] #chat-main .sofia-signal-btn:hover {
  color: var(--color-text-primary, #FAF5EF);
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sofia-signal-chip:focus-visible,
html[data-theme="dark"] #chat-main .sofia-signal-action--primary:focus-visible,
html[data-theme="dark"] #chat-main .sofia-signal-time-chip:focus-visible,
html[data-theme="dark"] #chat-main .sofia-signal-btn:focus-visible {
  outline-color: rgba(212, 160, 144, 0.42);
}

[data-theme="dark"] .sofia-signal-why-text {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary, #A89B91);
}

[data-theme="dark"] .sofia-signal-trust {
  color: var(--color-text-secondary, #A89B91);
}

[data-theme="dark"] .sofia-signal-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%;
  animation: sofia-shimmer 1.5s ease-in-out infinite;
}

/* ── Sofia Signal — Responsive ── */

@media (max-width: 768px) {
  .sofia-signal-panel {
    padding: 0 16px;
    margin: 26px auto 16px;
  }

  .sofia-signal {
    padding: 20px 20px;
  }

  .sofia-signal-title {
    font-size: var(--font-size-lg);
  }

  .sofia-signal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sofia-signal-action--primary {
    text-align: center;
  }

  .sofia-signal-time-chips {
    justify-content: center;
  }
}

/* SkrivSikkert composer: approved padding simplification + iOS caret-jump fix.
   The text row and footer row are separate grid areas so toolbar height cannot
   change the empty editor line Safari uses to place the caret. */
html body:not(.chat-ny-in-conversation) .input-card,
html body .input-card {
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 18px !important;
}

.input-card[data-composer-focus-surface] {
  cursor: text;
}

.input-card .chat-empty-input-area {
  padding: 0 !important;
  margin: 0 !important;
}

.input-card .chat-input-box {
  padding: 0 !important;
}

.input-card .chat-input-box--welcome {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "files"
    "editor"
    "footer";
  align-items: stretch !important;
  gap: 0 !important;
}

.input-card .chat-file-preview {
  grid-area: files;
  padding: 0 0 8px 0 !important;
}

.input-card .chat-input-field.ql-container {
  grid-area: editor;
  padding: 0 !important;
  min-height: 24px !important;
  line-height: 24px !important;
  overflow-y: hidden !important;
}

.input-card .ql-editor {
  padding: 0 !important;
  min-height: 24px !important;
  line-height: 24px !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  touch-action: manipulation;
}

.input-card #chat-direct-input .ql-editor {
  padding: 0 !important;
}

.input-card #chat-direct-input .ql-editor.ql-blank,
.input-card #chat-direct-input .ql-editor.ql-blank > p {
  white-space: normal !important;
}

.input-card #chat-direct-input .ql-editor.ql-blank > p::before {
  content: none !important;
  display: none !important;
}

.input-card .ql-editor > p {
  line-height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
}

.input-card .ql-editor.ql-blank::before,
.input-card #chat-direct-input .ql-editor.ql-blank::before {
  left: 0 !important;
  right: 0 !important;
  line-height: 24px !important;
}

.input-card textarea.chat-input-field {
  min-height: 24px !important;
  padding: 0 !important;
  line-height: 24px !important;
}

.input-card .chat-input-toolbar {
  grid-area: footer;
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
}

html body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar,
html body .input-card .chat-input-toolbar {
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  html body:not(.chat-ny-in-conversation) .input-card,
  html body .input-card {
    min-height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 28px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"],
  html body .input-card[data-mobile-native-card="1"] {
    min-height: 102px !important;
    height: auto !important;
    padding: 8px 8px 6px 8px !important;
    background: #FFFEFB !important;
    border: 1px solid #E6E1D8 !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(58, 47, 38, 0.04), 0 4px 16px rgba(58, 47, 38, 0.04) !important;
    /* #3103: visible so the growing textarea and the send button's 44px ::before tap target are not
       clipped as the composer card grows with multi-line text. */
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"]:focus-within,
  html body .input-card[data-mobile-native-card="1"]:focus-within {
    border-color: #E6E1D8 !important;
    box-shadow: 0 1px 2px rgba(58, 47, 38, 0.04), 0 4px 16px rgba(58, 47, 38, 0.04) !important;
    background: #FFFEFB !important;
  }

  /* #3126: dark mode — the mobile native welcome card uses the warm dark composer
     surface instead of the cream #FFFEFB light leak; focus keeps a dark fill so the
     light focus-within rule above cannot leak cream back in on tap. */
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"],
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"],
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] {
    background: rgba(42, 38, 34, 0.85) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    box-shadow:
      0 14px 40px rgba(20, 18, 15, 0.34),
      0 2px 8px rgba(20, 18, 15, 0.22),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"]:focus-within,
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"]:focus-within,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"]:focus-within,
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"]:focus-within {
    background: rgba(42, 38, 34, 0.85) !important;
    border-color: rgba(212, 168, 154, 0.42) !important;
    box-shadow: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-empty-input-area,
  html body .input-card .chat-empty-input-area {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome,
  html body .input-card .chat-input-box--welcome {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "files files files"
      "left editor right" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    min-height: 44px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ql-container,
  html body .input-card #chat-direct-input.ql-container {
    grid-area: editor !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar,
  html body .input-card .chat-input-toolbar {
    display: contents !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar-left,
  html body .input-card .chat-input-toolbar-left {
    grid-area: left !important;
    justify-self: start !important;
    align-self: center !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar-right,
  html body .input-card .chat-input-toolbar-right {
    grid-area: right !important;
    justify-self: end !important;
    align-self: center !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-file-preview,
  html body .input-card .chat-file-preview {
    grid-area: files !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"],
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] {
    display: grid !important;
    /* composer-quill reparents the toolbar groups onto this grid on mobile;
       keep their accepted physical placement while the textarea stays auto. */
    direction: ltr !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "files files"
      "editor editor"
      "left right" !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    column-gap: 0 !important;
    row-gap: 2px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"]:has(.chat-file-preview:not(:empty)),
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"]:has(.chat-file-preview:not(:empty)) {
    flex-wrap: wrap !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] .chat-file-preview:empty,
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] .chat-file-preview:empty {
    display: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-file-preview,
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-file-preview {
    grid-area: files !important;
    padding: 0 6px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] .chat-file-preview:not(:empty),
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] .chat-file-preview:not(:empty) {
    width: 100% !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-left,
  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-right,
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-left,
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-right {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-left,
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-left {
    grid-area: left !important;
    justify-self: start !important;
    margin-inline-start: 0 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-right,
  html body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] > .chat-input-toolbar-right {
    grid-area: right !important;
    justify-self: end !important;
    gap: 2px !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input,
  html body .input-card #chat-direct-input.ss-mobile-native-input {
    grid-area: editor !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: 140px !important;
    padding-block: 6px 4px!important; padding-inline: 12px 10px!important;
    margin: 0 !important;
    font-size: 16px !important; /* 16px floor avoids iOS zoom on native-input focus */
    line-height: 1.5 !important;
    color: #3A2F26 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
    /* #3103: a growing multi-line textarea — wrap text and grow line-by-line to the 140px cap.
       overflow-y is owned by textarea-resize.js (hidden until the cap, then auto), so it is NOT
       pinned here with !important, which would defeat the JS internal-scroll toggle. */
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    resize: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input::placeholder,
  html body .input-card #chat-direct-input.ss-mobile-native-input::placeholder {
    color: #7A6E62 !important;
    opacity: 1 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input:focus,
  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input:focus-visible,
  html body .input-card #chat-direct-input.ss-mobile-native-input:focus,
  html body .input-card #chat-direct-input.ss-mobile-native-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  body:has(#chat-app) #chat-direct-input.ss-mobile-native-input,
  body:has(#chat-app) #chat-direct-input.ss-mobile-native-input::placeholder {
    font-size: 16px !important; /* 16px floor avoids iOS zoom on native-input focus */
    line-height: 1.5 !important;
  }

  /* #3103: the empty / first single line fills its 34px box so iOS WebKit has no sub-line gap to
     drop the empty caret into — the same line-height = box-height fix proven for the old 24px
     composer, scaled to the new 34px growing-textarea floor. Typed multi-line (no single-line
     class, not :placeholder-shown) reverts to the 1.5 (=24px) leading above and grows line-by-line.
     Specificity (2 ids, 2 classes) intentionally beats the font-compliance rule so the fill applies. */
  body:has(#chat-app) #chat-direct-input.ss-mobile-native-input.ss-mobile-welcome-single-line,
  body:has(#chat-app) #chat-direct-input.ss-mobile-native-input:placeholder-shown {
    line-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"],
  html[data-theme="dark"] body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"],
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome[data-mobile-native-composer="1"],
  [data-theme="dark"] body .input-card .chat-input-box--welcome[data-mobile-native-composer="1"] {
    background: transparent !important;
    border-color: transparent !important;
    color: #E8DDD4 !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input,
  html[data-theme="dark"] body .input-card #chat-direct-input.ss-mobile-native-input,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input,
  [data-theme="dark"] body .input-card #chat-direct-input.ss-mobile-native-input {
    color: #E8DDD4 !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input::placeholder,
  html[data-theme="dark"] body .input-card #chat-direct-input.ss-mobile-native-input::placeholder,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ss-mobile-native-input::placeholder,
  [data-theme="dark"] body .input-card #chat-direct-input.ss-mobile-native-input::placeholder {
    color: rgba(232, 224, 216, 0.55) !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger {
    width: 40px !important;
    height: 40px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: none !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn svg,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action svg,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn svg,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action svg,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2px !important;
    color: #6B5B4E !important;
    stroke: #6B5B4E !important;
    transform: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action.ss-mic svg *[fill]:not([fill="none"]),
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg *[fill]:not([fill="none"]),
  html body .input-card[data-mobile-native-card="1"] .chat-input-action.ss-mic svg *[fill]:not([fill="none"]),
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg *[fill]:not([fill="none"]) {
    fill: #6B5B4E !important;
  }

  /* #3126: dark mode — toolbar icons on the warm dark mobile native card use the light
     secondary tone instead of the warm-brown light-mode ink. Mirrors the two brown icon
     rules above (stroke + fill) with [data-theme="dark"]. */
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn svg,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action svg,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"] .chat-plus-btn svg,
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"] .chat-input-action svg,
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] .chat-plus-btn svg,
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] .chat-input-action svg,
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg {
    color: var(--color-text-secondary, #B8AFA6) !important;
    stroke: var(--color-text-secondary, #B8AFA6) !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action.ss-mic svg *[fill]:not([fill="none"]),
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg *[fill]:not([fill="none"]),
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"] .chat-input-action.ss-mic svg *[fill]:not([fill="none"]),
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg *[fill]:not([fill="none"]),
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action.ss-mic svg *[fill]:not([fill="none"]),
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg *[fill]:not([fill="none"]),
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] .chat-input-action.ss-mic svg *[fill]:not([fill="none"]),
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg *[fill]:not([fill="none"]) {
    fill: var(--color-text-secondary, #B8AFA6) !important;
  }

  /* The wave trigger is a FILL-based icon: six 2.5px bars with 1.5px gaps
     (voice-mode.js waveSvg). The shared toolbar ink above paints stroke on
     every svg — right for the stroke-designed mic/plus outlines, but on the
     wave it inflates each bar past its gap and smears the icon into a blob
     (Mortens mobil-fund 4, 15/7: "a smudge next to the microphone"). Kill
     stroke on the wave only; the *[fill] rules above already carry its ink.
     Selector list mirrors the stroke rules 1:1 — same specificity, later in
     the file, so it wins in both themes. */
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  html[data-theme="dark"] body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg,
  [data-theme="dark"] body .input-card[data-mobile-native-card="1"] .ss-voice-trigger svg {
    stroke: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn:hover,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action:hover,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger:hover,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn:hover,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action:hover,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger:hover {
    background: rgba(92, 77, 67, 0.08) !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn:hover svg,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action:hover svg,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger:hover svg,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn:hover svg,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action:hover svg,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger:hover svg {
    color: #4A3D34 !important;
    stroke: #4A3D34 !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn:active,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action:active,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger:active,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn:active,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action:active,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger:active {
    transform: scale(0.92) !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn:focus-visible,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action:focus-visible,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger:focus-visible,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn:focus-visible,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action:focus-visible,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger:focus-visible {
    outline: 2px solid #5C4D43 !important;
    outline-offset: 2px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger[hidden],
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger[style*="display: none"],
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger[hidden],
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger[style*="display: none"] {
    display: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: #4A7A68 !important;
    color: #FFFEFB !important;
    box-shadow: none !important;
    transition: background .15s ease, transform .1s ease !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send:hover,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send:hover {
    background: #3D6B57 !important;
    box-shadow: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send:active,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send:active {
    transform: scale(.94) !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send:focus-visible,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send:focus-visible {
    outline: 2px solid #5C4D43 !important;
    outline-offset: 2px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send.is-empty:not(.is-stop),
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send[hidden],
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send.is-empty:not(.is-stop),
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send[hidden] {
    display: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send::before,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send svg,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send svg {
    width: 18px !important;
    height: 18px !important;
    color: #FFFEFB !important;
    stroke: #FFFEFB !important;
    stroke-width: 2.25px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send svg path,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send svg path {
    stroke: #FFFEFB !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-mic-btn svg,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-mic-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2px !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send {
    transition: none !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-plus-btn:active,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .chat-input-action:active,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] .ss-voice-trigger:active,
  html body:not(.chat-ny-in-conversation) .input-card[data-mobile-native-card="1"] #chat-direct-send:active,
  html body .input-card[data-mobile-native-card="1"] .chat-plus-btn:active,
  html body .input-card[data-mobile-native-card="1"] .chat-input-action:active,
  html body .input-card[data-mobile-native-card="1"] .ss-voice-trigger:active,
  html body .input-card[data-mobile-native-card="1"] #chat-direct-send:active {
    transform: none !important;
  }
}

@media (min-width: 768px) {
  /* PC composer polish: approved desktop metrics from the live prototype. */
  html body:not(.chat-ny-in-conversation) .input-card,
  html body .input-card {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm) .input-card:focus-within {
    border-color: rgba(74, 122, 104, 0.5) !important;
    box-shadow:
      0 1px 2px rgba(58, 47, 38, 0.04),
      0 4px 16px rgba(58, 47, 38, 0.04) !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm) .input-card {
    background: #FFFEFB !important;
    border: 1px solid #E6E1D8 !important;
    box-shadow: 0 1px 2px rgba(58, 47, 38, 0.04), 0 4px 16px rgba(58, 47, 38, 0.04) !important;
  }

  /* #3126: dark mode — the desktop welcome composer card uses the warm dark surface
     instead of the cream PC-polish above. The :not(#_calm) ID-level specificity of the
     light rule means this dark override must match it and add [data-theme="dark"] to win. */
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card {
    background: rgba(42, 38, 34, 0.85) !important;
    border: 1px solid rgba(232, 224, 216, 0.10) !important;
    box-shadow:
      0 14px 40px rgba(20, 18, 15, 0.34),
      0 2px 8px rgba(20, 18, 15, 0.22),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card:focus-within {
    border-color: rgba(168, 197, 184, 0.35) !important;
    box-shadow:
      0 14px 40px rgba(20, 18, 15, 0.34),
      0 2px 8px rgba(20, 18, 15, 0.22),
      inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
  }

  .input-card .chat-empty-input-area {
    padding: 0 !important;
    margin: 0 !important;
  }

  .input-card .chat-input-box,
  .input-card .chat-input-field.ql-container,
  .input-card textarea.chat-input-field,
  .input-card .chat-input-toolbar {
    padding: 0 !important;
  }

  .input-card .chat-file-preview {
    padding: 0 0 8px 0 !important;
  }

  html body .input-card .chat-input-field.ql-container,
  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor,
  html body .input-card #chat-direct-input .ql-editor,
  html body .input-card .ql-editor {
    min-height: 26px !important;
    height: auto !important;
    line-height: 1.5 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  html body .input-card .ql-editor {
    max-height: 180px !important;
    touch-action: manipulation;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm):not(#_x) .input-card #chat-direct-input .ql-editor {
    padding-inline-start: 11px !important;
    padding-inline-end: 11px !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor:not(.ql-blank),
  html body .input-card #chat-direct-input .ql-editor:not(.ql-blank),
  html body .input-card .ql-editor:not(.ql-blank) {
    overflow-y: auto !important;
  }

  html body .input-card .ql-editor > p {
    min-height: 26px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor.ql-blank > p::before,
  html body .input-card #chat-direct-input .ql-editor.ql-blank > p::before,
  html body .input-card .ql-editor.ql-blank::before,
  html body .input-card .ql-editor.ql-blank > p::before {
    overflow: visible !important;
    line-height: 1.5 !important;
    top: 0 !important;
    color: #7A6E62 !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm):not(#_x) .input-card #chat-direct-input .ql-editor.ql-blank::before {
    left: 11px !important;
    right: 11px !important;
  }

  .input-card .chat-input-toolbar {
    align-items: center !important;
    cursor: default !important;
  }

  .input-card .chat-input-toolbar-left,
  .input-card .chat-input-toolbar-right {
    align-items: center !important;
  }

  .input-card .chat-input-toolbar-right {
    gap: 4px !important;
  }

  html body .input-card .chat-plus-btn,
  html body .input-card .chat-input-action.ss-mic,
  html body .input-card #chat-direct-mic-btn,
  html body .input-card .ss-voice-trigger,
  html body .input-card .chat-send-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.2,.8,.2,1) !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm):not(#_x) .input-card .chat-plus-btn {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    transition: background .15s ease, transform .1s ease !important;
  }

  .input-card .chat-plus-wrap {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body .input-card .chat-plus-btn svg,
  html body .input-card .chat-input-action.ss-mic svg,
  html body:not(.chat-ny-in-conversation) .input-card #chat-direct-mic-btn svg,
  html body .input-card .ss-voice-trigger svg,
  html body .input-card .chat-send-btn svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }

  html body .input-card .chat-plus-btn svg *,
  html body .input-card .chat-input-action.ss-mic svg *,
  html body .input-card #chat-direct-mic-btn svg * {
    stroke-width: 2px !important;
    vector-effect: non-scaling-stroke;
  }

  html body .input-card .chat-plus-btn,
  html body .input-card .chat-plus-btn svg,
  html body .input-card .chat-plus-btn svg *,
  html body .input-card .chat-input-action.ss-mic,
  html body .input-card .ss-mic svg,
  html body .input-card .ss-mic svg *,
  html body .input-card #chat-direct-mic-btn svg * {
    color: #6B5B4E !important;
    stroke: #6B5B4E !important;
    fill: none !important;
  }

  html body .input-card .ss-voice-trigger,
  html body .input-card .ss-voice-trigger svg,
  html body .input-card .ss-voice-trigger svg * {
    color: #6B5B4E !important;
    fill: #6B5B4E !important;
  }

  /* #3126: dark mode — on the warm dark desktop composer card the toolbar icons use the
     light secondary tone instead of the warm-brown light-mode ink (which is near-invisible
     on the dark card). Mirrors the two brown icon rules above with [data-theme="dark"]. */
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-plus-btn,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-plus-btn svg,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-plus-btn svg *,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-input-action.ss-mic,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-mic svg,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-mic svg *,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn svg *,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-plus-btn,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-plus-btn svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-plus-btn svg *,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .chat-input-action.ss-mic,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-mic svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-mic svg *,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn svg * {
    color: var(--color-text-secondary, #B8AFA6) !important;
    stroke: var(--color-text-secondary, #B8AFA6) !important;
  }

  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger svg,
  html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger svg *,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger svg,
  [data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger svg * {
    color: var(--color-text-secondary, #B8AFA6) !important;
    fill: var(--color-text-secondary, #B8AFA6) !important;
  }

  .input-card .chat-plus-btn:hover,
  .input-card .chat-input-action.ss-mic:hover,
  .input-card .ss-voice-trigger:hover {
    background-color: rgba(92,77,67,.08) !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm):not(#_x) .input-card .chat-plus-btn:hover {
    background-color: rgba(92,77,67,.08) !important;
    box-shadow: none !important;
  }

  html body .input-card .chat-plus-btn:hover,
  html body .input-card .chat-plus-btn:hover svg,
  html body .input-card .chat-plus-btn:hover svg *,
  html body .input-card .ss-mic:hover,
  html body .input-card .ss-mic:hover svg,
  html body .input-card .ss-mic:hover svg *,
  html body .input-card .ss-voice-trigger:hover,
  html body .input-card .ss-voice-trigger:hover svg,
  html body .input-card .ss-voice-trigger:hover svg * {
    color: #4A3D34 !important;
    stroke: #4A3D34 !important;
  }

  html body .input-card .chat-plus-btn:hover svg *,
  html body .input-card .ss-mic:hover svg * {
    fill: none !important;
  }

  html body .input-card .ss-voice-trigger:hover svg,
  html body .input-card .ss-voice-trigger:hover svg * {
    fill: #4A3D34 !important;
  }

  .input-card .chat-plus-btn:active,
  .input-card .chat-input-action:active,
  .input-card .ss-voice-trigger:active {
    transform: scale(.92) !important;
  }

  .input-card .chat-input-toolbar button:focus-visible,
  .input-card .chat-plus-btn:focus-visible {
    outline: 2px solid #5C4D43 !important;
    outline-offset: 2px !important;
  }

  .input-card .chat-input-toolbar button:focus:not(:focus-visible) {
    outline: none !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger[hidden],
  html body:not(.chat-ny-in-conversation):not(#_calm) .input-card .ss-voice-trigger[style*="display: none"] {
    display: none !important;
  }

  html body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-send.is-empty:not(.is-stop),
  html body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-send[hidden] {
    display: none !important;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .input-card .chat-plus-btn,
  .input-card .chat-input-action.ss-mic,
  .input-card .ss-voice-trigger,
  .input-card .chat-send-btn {
    transition: none !important;
  }

  .input-card .chat-plus-btn:active,
  .input-card .chat-input-action:active,
  .input-card .ss-voice-trigger:active {
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .sofia-signal-panel {
    padding: 0 12px;
    margin-top: 22px;
  }

  .sofia-signal {
    padding: 16px 16px;
  }

  .sofia-signal-title {
    font-size: var(--font-size-lg);
  }

  .sofia-signal-summary {
    font-size: var(--font-size-sm);
  }

  .sofia-signal-action--primary {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
  }

  .sofia-signal-time-chip {
    padding: 5px 10px;
    font-size: var(--font-size-xs);
  }

  .sofia-signal-secondary {
    gap: 6px;
  }

  .sofia-signal-btn {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 320px) {
  .sofia-signal {
    padding: 14px 14px;
  }

  .sofia-signal-title {
    font-size: var(--font-size-base);
  }

  .sofia-signal-time-chips {
    flex-wrap: wrap;
  }
}

/* ============================================================================
   Sofia daily-brief view chooser + in-place task fold-out (#2874)
   Surface: app. Calm two-column brief, Brief/Kort/Ingen chooser, editable
   email task fold-out. Scoped under .content[data-calm-view] / .calm-brief2 so
   nothing here touches the legacy Sofia-signal rules above or the app shell.
   Sage/warm palette only; the active card never inverts in dark mode.
   ========================================================================== */

/* Exact calm display sizes from the approved prototype, expressed as tokens so the
   font-compliance gate stays var-based (the global --font-size-* scale has no 34px). */
.content {
  --calm-fs-title: 21px;
  --calm-fs-title-md: 27px;
  --calm-fs-title-sm: 24px;
  --calm-fs-empty-title: 20px;
}

/* ── Calm view state: the on-screen chooser and the legacy Kort .cards row are both
   gone (#4392/#4405). data-calm-view is still set to brief/none, but the only rule
   left here keeps the calm-empty placeholder display:none in every view — see #2952. ── */
.calm-empty {
  display: none;
}

.content[data-calm-view="brief"] .calm-empty {
  display: none;
}

/* The "Ingen" view no longer hides the brief: the on-screen chooser is gone and the
   card always shows. A stored calmDailyView="none" simply renders the card. */

/* #2952: Ingen now SUPPRESSES the calm empty placeholder entirely. The node stays
   in the DOM but computes to display:none in every calm view, so the filler copy
   is never visible or announced. */
.content[data-calm-view="none"] .calm-empty {
  display: none;
}

/* ── Calm empty state ── */
.calm-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px;
}

.calm-empty-title {
  margin: 0;
  font-size: var(--calm-fs-empty-title);
  font-weight: var(--font-weight-semibold);
  color: #3A2F26;
}

.calm-empty-body {
  margin: 0;
  font-size: var(--font-size-base, 15px);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
}

/* #2952: even welcome rhythm — calm the composer bottom gap and the history
   trigger spacing so the input card, "Tidligere samtaler", chips, and chooser
   read as one quiet column. Scroll-margin guards (mobile/iOS kb) are untouched. */
#chat-empty-voksen .input-wrapper {
  margin-bottom: 22px;
}

#chat-empty-voksen .chd-trigger {
  margin-block: 16px 0; margin-inline: 16px 0;
  position: relative;
}

/* 44px touch target without visual growth (house hit-halo pattern) */
#chat-empty-voksen .chd-trigger::before {
  content: "";
  position: absolute;
  inset: -9px;
}

/* ── Calm source-first approval card (the active Sofia card) #2874 ──
   Single-column, centered, max-width 620px. One real reply-needed email at a
   time: sender context + quote first, then the visible editable reply. Replaces
   the old two-column brief. Sage/warm palette only; never inverts in dark mode. */
#chat-main .sofia-signal--active.calm-brief2 {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 28px;
  border-radius: 18px;
  background: var(--white, #FFFEFB);
  border: 1px solid rgba(228, 220, 212, 0.6);
  box-shadow:
    0 1px 2px rgba(92, 77, 67, 0.06),
    0 8px 28px rgba(92, 77, 67, 0.06);
  text-align: start;
  overflow: hidden;
}

/* Calm reply close (✕): a neutral "close the open reply" control pinned to the card
   corner. Decision-free — it never sends and never skips ("Spring over" owns skip). Only
   the open editable reply (.calm-brief2--reply) shows it, so that card gets a positioning
   context. Warm-ghost at rest, warm-wash on hover — the same calm treatment as the dock
   .cvm-close, at the 36×36 calm icon-button size. Dark-paired below. */
/* ── Din uge morgenoverblik (Mockup A) + full Din uge view ──
   The calm "Ro i indbakken" flower card grows into the few things that matter. The card
   reuses the .calm-brief2 shell (warm #FFFEFB, light in both modes) but zeroes its padding
   so the gradient masthead runs edge-to-edge. */
#chat-main .sofia-signal--active.calm-brief2.morgen-card { padding: 0; }
#chat-main .morgen-head { position: relative; }
#chat-main .morgen-sky { display: block; width: 100%; height: auto; }
@keyframes morgenFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes morgenGlowIn { from { opacity: 0; } to { opacity: 1; } }
#chat-main .morgen-sky { animation: morgenFadeIn 0.5s ease-out both; }
#chat-main .morgen-sky .morgen-glow { animation: morgenGlowIn 0.8s ease-out 0.28s both; }
/* morgensky-dark bloom: on the dark card the glow is the brightest element, so finish it WITH the scene settle (not 0.58s later) — dark only, light timing untouched. */
html[data-theme="dark"] #chat-main .morgen-sky .morgen-glow { animation-duration: 0.6s; animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  #chat-main .morgen-sky, #chat-main .morgen-sky .morgen-glow { animation: none; }
}
#chat-main .morgen-body { padding: 10px 18px 12px; }
#chat-main .morgen-list { margin: 0 -10px; }
#chat-main .morgen-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  width: 100%;
  padding: 13px 10px;
  border-radius: 10px;
  text-align: start;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
}
/* Reply row = a clickable open-button (icon + sender + summary) + a per-item speaker on the right,
   so the user opens OR listens to just that item. Replaces the single full-width reply button. */
#chat-main .morgen-item--reply,
#chat-main .morgen-item--task,
#chat-main .morgen-item--cal { padding: 0; gap: 4px; align-items: center; border-radius: 12px; }
/* #4804 4-expert hover critique: the REPLY row is ONE hover surface — a single warm wash + a subtle
   1px lift (not two split buttons with a warm/green seam + dead gap). The open-button + speaker stay
   transparent; the speaker resolves by darkening its glyph only, never a competing green plate. */
/* Apple-tier hover critique: the warm cream read as a yellow plate (muddy under the sunset) and the
   lift had no shadow, so it looked like a glitch. Now a near-invisible warm tint + a real soft 2-layer
   shadow makes the row cleanly LIFT off a clean field; the press settles the lift back down (not a
   mid-air shrink); calmer 180ms bloom. */
/* The calm tint + soft shadow + 1px lift applies to BOTH rows (Morten: the task row "Løb i dag" felt
   dead — only the reply responded). cursor:pointer + the press-settle stay on the reply ONLY (its whole
   body opens the mail); the task body is not a click target (its actions are the check + listen), so its
   cursor stays neutral — the lift reads as "row active, controls live", not a false "click the body". */
#chat-main .morgen-item { position: relative; z-index: 0; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(.2, .6, .2, 1); }
#chat-main .morgen-item--reply { cursor: pointer; }
#chat-main .morgen-item:hover { background: #FBF8F3; box-shadow: 0 1px 2px rgba(58, 47, 38, .05), 0 2px 6px rgba(58, 47, 38, .06); transform: translateY(-1px); z-index: 1; }
#chat-main .morgen-item--reply:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(58, 47, 38, .05); transition-duration: 0.09s; }
#chat-main .morgen-item-open,
#chat-main .morgen-item-static {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 13px; align-items: flex-start;
  padding-block: 13px; padding-inline: 10px 8px; border-radius: 12px;
  text-align: start; background: transparent; border: 0; font: inherit; color: inherit;
}
#chat-main .morgen-item-open { cursor: pointer; }
#chat-main .morgen-item-open:focus-visible { outline: 2px solid #6E8A7E; outline-offset: -2px; }
/* #deep-qa: a sub-less task is ONE line — center the check, title and speaker on that line (and drop the
   +2px the check carries to bias toward the title cap in the two-line case) so nothing hangs high. */
#chat-main .morgen-item--single { align-items: center; }
#chat-main .morgen-item--single .morgen-item-static { align-items: center; }
#chat-main .morgen-item--single .task-check { margin-top: 0; }
/* The calendar appointment is one line: the type icon carries a +5px bias for the two-line reply, so zero
   it here to center the icon on the single line (same posture as .task-check above). #deep-qa. */
#chat-main .morgen-item--single .morgen-typeicon { margin-top: 0; }
#chat-main .morgen-item-speak {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-inline-end: 2px; border-radius: 10px;
  background: transparent; border: 0; color: #9A8E82; cursor: pointer;
  transition: color 0.14s ease-out, transform 0.06s ease-out;
}
/* 38px button → ≥44px hit area (inset -3px) so the listen control clears the touch-target minimum. */
#chat-main .morgen-item-speak::before { content: ""; position: absolute; inset: -3px; }
#chat-main .morgen-item-speak:hover { color: #5C4D43; }
#chat-main .morgen-item-speak:active { transform: scale(0.92); }
#chat-main .morgen-item-speak:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }
/* #4804 flow critique: the per-row speaker is "controls on demand" — hidden at rest on hover-capable
   devices, revealed when you hover/focus that row. On touch (no hover) it stays visible (otherwise
   it'd be unreachable). The resting card is then just meaning: type icon + headline + summary. */
@media (hover: hover) {
  #chat-main .morgen-item-speak { opacity: 0; transition: opacity 0.15s ease, color 0.14s ease-out, transform 0.06s ease-out; }
  #chat-main .morgen-item:hover .morgen-item-speak,
  #chat-main .morgen-item:focus-within .morgen-item-speak,
  #chat-main .morgen-item-speak:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-main .morgen-item:hover, #chat-main .morgen-item--reply:active, #chat-main .morgen-item-speak:active { transform: none; }
}
#chat-main .morgen-item-speak [data-calm-lyt-ico] { display: inline-flex; align-items: center; }
#chat-main .morgen-item-speak [data-calm-lyt-ico] svg { display: block; width: 18px; height: 18px; }
/* "Åbn i kalenderen" (calendar rows): a second on-demand control — an <a> to /kalender/?event=<id>
   next to the speaker. It CARRIES .morgen-item-speak, so box, palette, hover-reveal (the
   @media (hover:hover) block above), focus ring and dark mode all come from the speaker's rules;
   only the anchor's own defaults need neutralizing + its bare svg sized like the speaker's. */
#chat-main a.morgen-item-goto { text-decoration: none; }
#chat-main .morgen-item-goto svg { display: block; width: 18px; height: 18px; }
/* The ±3px hit-halo would overlap the speaker's by 2px across the 4px gap (two adjacent 38px controls)
   — a right-edge tap on the goto could fire the speaker. Trim ONLY the speaker-facing side to 0;
   top/bottom/left keep the full 44px reach. */
#chat-main .morgen-item-goto::before {
  inset-block: -3px;
  inset-inline-start: -3px;
  inset-inline-end: 0;
}
/* Task-check: the job's interactive checkbox (tap to complete it in kalender). Sits where the type
   icon does; calm sage, fills with a tick on done, then the row fades out. */
/* margin-top 2px (NOT -1) so the check's rendered center (2 + 12 = 14px) matches the envelope's
   (5 + 9 = 14px) — same optical center, biased to the title cap, not the two-line block. Do not
   "tidy" these to equal margins: the boxes are different sizes (24 vs 18). */
#chat-main .task-check { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6E8A7E; cursor: pointer; transition: color 0.15s, transform 0.15s; }
/* 24px glyph, but a ≥44px invisible hit area (inset -10px) — it's the one control that mutates data
   (completes a task), so it earns a full touch target without moving the icon. */
#chat-main .task-check::before { content: ""; position: absolute; inset: -10px; }
#chat-main .task-check:hover:not(:disabled) { color: #4A7A68; }
#chat-main .task-check:disabled { cursor: default; opacity: 0.5; }
#chat-main .task-check:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 2px; }
#chat-main .task-check-ico { display: inline-flex; }
#chat-main .task-check-ico svg { display: block; width: 18px; height: 18px; }
/* The "done" tick overshoots and settles (spring) — a small, satisfying confirmation beat. */
#chat-main .task-check--done { color: #5F8D6E; transform: scale(1.05); transition: color 0.15s, transform 0.22s cubic-bezier(.34, 1.4, .64, 1); }
#chat-main .morgen-item--leaving { opacity: 0; transition: opacity 0.4s ease; }
/* Full Din uge view: items are flush, so the open/static part owns the padding, wrapper stays zero. */
#chat-main .dinuge-view .morgen-item--reply,
#chat-main .dinuge-view .morgen-item--task { padding: 0; }
#chat-main .dinuge-view .morgen-item-open,
#chat-main .dinuge-view .morgen-item-static { padding-block: 12px; padding-inline: 0 8px; }
/* The envelope is a passive TYPE indicator, not an action — warm gray, so sage stays reserved for
   actions (speaker/check/chevron). 18px to match the icon family; optically centered on the title. */
/* width matches the 24px task-check so the title column lines up whether the leading slot is a type icon
   (reply/calendar) or a check (task) — the 18px icon stays 18px, centred in the 24px slot. #deep-qa
   (Morten: "Mød med søster" sat 6px right of the calendar item). */
#chat-main .morgen-typeicon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 18px; margin-top: 5px; flex: 0 0 auto; color: #9A8E82; }
#chat-main .morgen-typeicon svg { width: 18px; height: 18px; display: block; }
#chat-main .morgen-item-body { display: block; min-width: 0; }
#chat-main .morgen-item-title { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: #3A2F26; line-height: 1.4; overflow-wrap: anywhere; }
#chat-main .morgen-item-sub { display: block; font-size: var(--font-size-sm); color: #756D5F; line-height: 1.5; margin-top: 2px; }
/* Purpose-built "all clear" empty state (4-expert UI critique #4804): a centered DARK reassurance (the
   hero) over a small, quiet week link — no divider, no icon row, no collapsed footer, generous air. */
#chat-main .morgen-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 22px 24px; text-align: center; }
#chat-main .morgen-empty-text { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: #3A2F26; line-height: 1.4; }
/* §v3 PR-a look-ahead line: same muted voice as .morgen-item-sub. The -10px top margin pulls it
   back through the container's 14px flex gap to a 4px rhythm under the reassurance (title/sub pair). */
#chat-main .morgen-empty-next { margin: -10px 0 0; font-size: var(--font-size-sm); color: #756D5F; line-height: 1.5; overflow-wrap: anywhere; }
#chat-main .morgen-empty .morgen-see { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: 2px 2px; }
/* The 5s "Færdig · Fortryd" row after completing a task (undo window). */
#chat-main .morgen-done { display: flex; align-items: center; gap: 10px; padding: 13px 10px; }
#chat-main .morgen-done-ico { display: inline-flex; align-items: center; color: #5F8D6E; flex: 0 0 auto; }
#chat-main .morgen-done-ico svg { width: 20px; height: 20px; display: block; }
#chat-main .morgen-done-text { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-base); color: #9A8E82; text-decoration: line-through; }
#chat-main .morgen-undo { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: #5F8D6E; font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: 4px 7px; border-radius: 8px; transition: color 0.14s ease, background 0.14s ease; }
#chat-main .morgen-undo:hover { color: #4A7A68; background: #FBF8F3; }
#chat-main .morgen-undo:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }
#chat-main .morgen-div { height: 1px; background: #F0ECE3; margin: 0 10px; }
#chat-main .morgen-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px; }
#chat-main .morgen-see {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0; padding: 4px 2px;
  color: #4A7A68; font: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
  cursor: pointer; border-radius: 8px;
  transition: color 0.14s ease;
}
#chat-main .morgen-see:hover { color: #3D6B57; }
#chat-main .morgen-chev { flex: 0 0 auto; }
[dir="rtl"] #chat-main .morgen-chev,
[dir="rtl"] #chat-main .morgen-goto {
  transform: scaleX(-1);
}
#chat-main .morgen-lyt {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 4px 6px;
  color: #7E7668; font: inherit; font-size: var(--font-size-sm); cursor: pointer; border-radius: 8px;
  transition: color 0.14s ease;
}
#chat-main .morgen-lyt:hover { color: #5C4D43; }
/* Lyt icon vertically centered with its label (the icon span carries the swapped TTS icon) */
#chat-main .morgen-lyt [data-calm-lyt-ico],
#chat-main .dinuge-lyt [data-calm-lyt-ico] { display: inline-flex; align-items: center; }
#chat-main .morgen-lyt [data-calm-lyt-ico] svg,
#chat-main .dinuge-lyt [data-calm-lyt-ico] svg { display: block; }
#chat-main .morgen-see:focus-visible,
#chat-main .morgen-lyt:focus-visible,
#chat-main .dinuge-back:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }

#chat-main .sofia-signal--active.calm-brief2.dinuge-view { padding: 20px 22px 22px; }
#chat-main .dinuge-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; padding: 2px; margin: 0 0 12px;
  color: #7B7365; font: inherit; font-size: var(--font-size-sm); cursor: pointer; border-radius: 6px;
  transition: color 0.14s ease;
}
#chat-main .dinuge-back:hover { color: #5C4D43; }
/* The left chevron eases -2px on hover — a quiet "going back" nudge that matches the house motion. */
#chat-main .dinuge-back svg { transition: transform 0.18s cubic-bezier(.2, .6, .2, 1); }
#chat-main .dinuge-back:hover svg { transform: translateX(-2px); }
/* RTL: tilbage-semantikken peger hoejre - glyf spejles og nudgen foelger med. */
[dir="rtl"] #chat-main .dinuge-back svg { transform: scaleX(-1); }
[dir="rtl"] #chat-main .dinuge-back:hover svg { transform: translateX(2px) scaleX(-1); }
#chat-main .dinuge-h.sofia-signal-title { margin: 0 0 16px; }
#chat-main .dinuge-list { margin: 0 0 8px; }
#chat-main .dinuge-view .morgen-item { padding: 12px 0; border-radius: 0; }
#chat-main .dinuge-view .morgen-div { margin: 0; }
/* In the week view the rows are full-bleed + square (border-radius:0), so the inherited translateY lift
   + drop-shadow painted a shadow on a square edge (a "slipping plank"). Here the hover is tint-only with
   a soft inset radius — a calm list-row highlight; the row's action is the check, not the whole row. */
#chat-main .dinuge-view .morgen-item:hover { transform: none; box-shadow: none; background: #FBF8F3; border-radius: 10px; }
#chat-main .dinuge-empty { font-size: var(--font-size-base); color: #8C8A80; margin: 4px 0 8px; }
/* Section labels are now <h3>: same warm sage, AA-legible (#557E68, 4.6:1 — the old #6E9A82 was 3.15:1
   AND a 4th off-green); --first sits flush under the H2 (the H2's 16px gap does the spacing). */
#chat-main .dinuge-label { font-size: var(--font-size-sm); color: #557E68; font-weight: var(--font-weight-medium); margin: 24px 0 8px; }
#chat-main .dinuge-label--first { margin-top: 0; }
#chat-main .dinuge-cal { width: 100%; border-collapse: collapse; }
#chat-main .dinuge-cal td { padding: 12px 0; border-bottom: 1px solid #F0ECE3; vertical-align: top; font-size: var(--font-size-base); transition: background 0.14s ease; }
#chat-main .dinuge-cal tr:last-child td { border-bottom: 0; }
#chat-main .dinuge-cal tr:hover td { background: #FBF8F3; }
/* Round the hover band's ends so a calendar row hovers like a morgenoverblik card (12px), not a flat
   full-width strip (Morten: "more rounded, looks a bit better — do same across"). */
#chat-main .dinuge-cal tr:hover td:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
#chat-main .dinuge-cal tr:hover td:last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; }
#chat-main .dinuge-cal-day { color: #57564F; font-weight: var(--font-weight-medium); width: 84px; }
#chat-main .dinuge-cal-time { color: #7B7365; width: 56px; }
#chat-main .dinuge-cal-ev { color: #3A2F26; }
#chat-main .dinuge-cal-town { color: #7B7365; }
#chat-main .dinuge-cal-more { font-size: var(--font-size-sm); color: #7B7365; margin: 8px 0 0; }
/* Per-row Lyt for the week calendar — mirrors .morgen-item-speak so strong-dyslexia users can HEAR each
   appointment (Morten). Hidden at rest on hover devices, revealed on row hover/focus; on touch (no hover)
   it stays visible. The spoken text (with the natural "klokken 9" time) is prebuilt in data-speak. */
#chat-main .dinuge-cal-lyt-cell { width: 1%; white-space: nowrap; text-align: end; vertical-align: middle; padding-inline-start: 6px; }
#chat-main .dinuge-cal-lyt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: transparent; border: 0;
  color: #9A8E82; cursor: pointer; transition: color 0.14s ease-out, transform 0.06s ease-out;
}
#chat-main .dinuge-cal-lyt::before { content: ""; position: absolute; inset: -6px; } /* ≥44px touch target */
#chat-main .dinuge-cal-lyt:hover { color: #5C4D43; }
#chat-main .dinuge-cal-lyt:active { transform: scale(0.92); }
#chat-main .dinuge-cal-lyt:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }
#chat-main .dinuge-cal-lyt [data-calm-lyt-ico] { display: inline-flex; align-items: center; }
@media (hover: hover) {
  #chat-main .dinuge-cal-lyt { opacity: 0; transition: opacity 0.15s ease, color 0.14s ease-out, transform 0.06s ease-out; }
  #chat-main .dinuge-cal tr:hover .dinuge-cal-lyt,
  #chat-main .dinuge-cal tr:focus-within .dinuge-cal-lyt,
  #chat-main .dinuge-cal-lyt:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-main .dinuge-cal-lyt:active { transform: none; }
}
#chat-main .dinuge-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
/* Both pills carry a 1px border so they're the SAME height (send had border:0 → 41px, lyt 1px → 43px;
   the 2px wobble snagged the eye). The primary Send pill now uses the house motion (0.18s cubic lift +
   soft shadow + press-settle) instead of a flat 0.15s linear colour swap; the --done state never lifts. */
#chat-main .dinuge-send {
  display: inline-flex; align-items: center; gap: 8px;
  background: #DCE9D5; color: #3D6A4D; border: 1px solid transparent; border-radius: 999px;
  padding: 11px 22px; font: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
  cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(.2, .6, .2, 1);
}
#chat-main .dinuge-send:hover:not(.dinuge-send--done) { background: #D2E3C9; box-shadow: 0 1px 2px rgba(58, 47, 38, .05), 0 2px 6px rgba(58, 47, 38, .06); transform: translateY(-1px); }
#chat-main .dinuge-send:active:not(.dinuge-send--done) { transform: translateY(0); box-shadow: 0 1px 2px rgba(58, 47, 38, .05); transition-duration: 0.09s; }
#chat-main .dinuge-send:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 2px; }
#chat-main .dinuge-send--done { background: #CCE0C3; cursor: default; }
#chat-main .dinuge-lyt {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; color: #5F6B5E; border: 1px solid #ECE8DC; border-radius: 999px;
  padding: 11px 20px; font: inherit; font-size: var(--font-size-base); cursor: pointer; transition: background 0.18s ease, transform 0.09s ease;
}
#chat-main .dinuge-lyt:hover { background: #FBFAF6; }
#chat-main .dinuge-lyt:active { transform: translateY(0.5px); }
#chat-main .dinuge-lyt:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 2px; }
/* #deep-qa: a clear, calm PLAYING state for the calm Lyt buttons (Morten: dinuge-lyt had no animation/
   pause). ChatTTS swaps the icon to the two pause-bars (TTS_ICONS.playing) + adds .tts-playing /
   .tts-paused / .loading to the icon span. The icon itself goes sage + its two bars animate as a gentle
   equalizer ("it's reading aloud"), and on pause it becomes the resume ▶. These are DESCENDANT selectors
   on the icon span (reliable) — we deliberately do NOT tint the whole pill via :has(), because :has()
   ancestor styling computes stale when a descendant's class is toggled dynamically (verified live). */
/* One size for EVERY state of a calm speaker icon — rest (MORGEN_VOL), loading, playing (pause-bars),
   default — so a used speaker doesn't shrink/grow when chat-tts swaps the SVG (their width attrs differ:
   16 vs 13). #deep-qa (Morten: "the speaker changes"). */
#chat-main [data-calm-lyt-ico] svg { width: 18px; height: 18px; }
#chat-main [data-calm-lyt-ico].tts-playing,
#chat-main [data-calm-lyt-ico].tts-paused,
#chat-main [data-calm-lyt-ico].loading { color: #4A6157; }
#chat-main [data-calm-lyt-ico].tts-playing svg rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: calmLytEq 0.85s ease-in-out infinite;
}
#chat-main [data-calm-lyt-ico].tts-playing svg rect:nth-of-type(2) { animation-delay: 0.32s; }
@keyframes calmLytEq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
/* Reduced motion: drop the transforms (pill lift/press, back-chevron nudge, check overshoot) + the
   equalizer, but keep the colour/state cues — same posture as the overview's reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
  #chat-main .dinuge-send:hover:not(.dinuge-send--done),
  #chat-main .dinuge-send:active:not(.dinuge-send--done),
  #chat-main .dinuge-lyt:active,
  #chat-main .dinuge-back:hover svg,
  #chat-main .task-check--done { transform: none; }
  #chat-main [data-calm-lyt-ico].tts-playing svg rect { animation: none; }
}

#chat-main .calm-brief2--reply {
  position: relative;
}
#chat-main .calm-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--warm-text-light, #8C7B6F);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
/* 36px visual disc, ≥44px hit area (inset -4px) — it's the only way out of the card, on a touch path. */
#chat-main .calm-close::before { content: ""; position: absolute; inset: -4px; }
#chat-main .calm-close:hover {
  background: rgba(58, 47, 38, 0.06);
  color: var(--warm-text, #3A2F26);
}
#chat-main .calm-close:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
.calm-close-ico {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
html[data-theme="dark"] #chat-main .calm-close {
  color: #A89B91;
}
html[data-theme="dark"] #chat-main .calm-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FAF5EF;
}

/* Kicker, calm title, one-line reassurance */
.calm-kicker {
  margin: 0 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6E8A7E;
}

#chat-main .calm-brief2 .sofia-signal-title,
#chat-main .calm-brief2 .calm-title {
  margin: 0 0 8px;
  font-size: var(--calm-fs-title);
  line-height: 1.18;
  color: #3A2F26;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

#chat-main .calm-brief2 .sofia-signal-summary,
.calm-reassure {
  margin: 0 0 18px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
}

/* Subject context chip */
.calm-subject-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  color: var(--warm-text, #3D3028);
  background: rgba(110, 138, 126, 0.08);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calm-subject-key {
  font-weight: var(--font-weight-semibold);
  color: var(--warm-text-light, #8C7B6F);
}

/* Source-first: who wrote, their quote, and read-aloud of the visible quote */
.calm-source {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: rgba(253, 247, 243, 0.6);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 14px;
}

.calm-source-from {
  margin: 0 0 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--warm-text, #3D3028);
}

.calm-source-quote {
  margin: 0 0 12px;
  padding-block: 0; padding-inline: 12px 0;
  border-inline-start: 3px solid rgba(110, 138, 126, 0.4);
  font-size: var(--font-size-base, 15px);
  line-height: 1.55;
  color: var(--warm-text, #3D3028);
  overflow-wrap: anywhere;
}

/* #3130: the source quote splits into the current/new message and a collapsed quoted
   history. The current block keeps the readable warm body text; the toggle is a quiet
   TEXT control (never a pill) scoped under #chat-main so the global `#chat-main button`
   reset cannot strip it; the history sits below a hairline divider and is muted. */
#chat-main .calm-source-quote .calm-quote-current {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--warm-text, #3D3028);
}

#chat-main .calm-source-quote button.calm-quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0 0;
  padding: 2px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: rgb(74, 122, 104);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

#chat-main .calm-source-quote button.calm-quote-toggle:hover {
  color: rgb(58, 47, 38);
}

#chat-main .calm-source-quote .calm-quote-chevron {
  display: inline-block;
  font-size: var(--font-size-base);
  line-height: 1;
  transition: transform 0.18s cubic-bezier(.2, .6, .2, 1);
}

#chat-main .calm-source-quote button.calm-quote-toggle[aria-expanded="true"] .calm-quote-chevron {
  transform: rotate(90deg);
}

/* U+203A mirrors to a left chevron through bidi. Rotate that mirrored glyph
   counter-clockwise so expanded still points physically down in RTL. */
[dir="rtl"] #chat-main .calm-source-quote button.calm-quote-toggle[aria-expanded="true"] .calm-quote-chevron {
  transform: rotate(-90deg);
}

#chat-main .calm-source-quote .calm-quote-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(228, 220, 212, 0.7);
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--warm-text-light, #8C7B6F);
}

/* #3130: reduced motion stills the source chevron */
@media (prefers-reduced-motion: reduce) {
  #chat-main .calm-source-quote .calm-quote-chevron { transition: none; }
}

#chat-main .calm-source-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.35);
  background: transparent;
  color: #5C7468;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#chat-main .calm-source-listen:hover {
  background: rgba(110, 138, 126, 0.1);
  color: #3D3028;
}

/* ── #3136: Message-body read-aloud. A distinct, keyboard-focusable control that reads the
   OUTGOING reply draft ([data-calm-body]) aloud through the shared /chat/ ChatTTS path
   (window.ChatTTS.playMessageTTS), so dyslexia users can hear the reply they are about to
   send. It lives in the Besked field header — visually tied to the body but OUTSIDE
   [data-calm-body], so it is never serialized into body_html / autosave. The pill shares the
   matched voice-pill geometry (source "Hør beskeden" / "Ret med stemmen"); it is disabled
   (no empty TTS) while the draft skeleton loads or the body is empty. Tokens only. ── */
.calm-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.calm-body-head .calm-task-field-label {
  margin-bottom: 0;
}

#chat-main .calm-body-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.35);
  background: transparent;
  color: #5C7468;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#chat-main .calm-body-listen:hover {
  background: rgba(110, 138, 126, 0.1);
  color: #3D3028;
}

#chat-main .calm-body-listen:disabled {
  opacity: 0.45;
  cursor: default;
}

#chat-main .calm-body-listen:disabled:hover {
  background: transparent;
  color: #5C7468;
}

.calm-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Compact progress row (data-driven from the reply-needed queue) */
.calm-progress {
  margin: 0 0 18px;
}

.calm-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.calm-step {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(110, 138, 126, 0.22);
}

.calm-step--done {
  background: #6E8A7E;
}

.calm-step--current {
  background: #6E8A7E;
  box-shadow: 0 0 0 4px rgba(110, 138, 126, 0.18);
}

.calm-step-line {
  flex: 1 1 auto;
  height: 2px;
  min-width: 8px;
  max-width: 28px;
  background: rgba(110, 138, 126, 0.2);
}

.calm-step-line--done {
  background: #6E8A7E;
}

/* ── "Dit svar": the visible, editable reply (not behind a start button) ── */
.calm-task {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(228, 220, 212, 0.6);
}

.calm-task[hidden] {
  display: none;
}

.calm-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Sentence-case, not UPPERCASE+letterspaced — a stack of caps eyebrows (Dit svar / Fra / Til / Emne /
   Besked) was the card's biggest "you're in Outlook now" tell, and caps are the hardest case for
   dyslexic readers. Sentence case + a darker AA color (#756D5F, ~5.3:1; the old #8A7E72 was ~3.9:1)
   reads as a calm guide, not a form. #4804 reply-card critique. */
.calm-answer-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  color: #756D5F;
}

/* Voice-revision pill (progressive enhancement) */
/* #3137: the opener is a meaningful soft-sage AI action button (not a transparent
   ghost pill) — it opens the full type-or-speak revision dock. It is an OPENER only:
   it never owns a recording/listening state (the dock mic does). Scoped under
   #chat-main to beat the global button reset. */
#chat-main .calm-revise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.38);
  background: rgba(110, 138, 126, 0.14);
  color: #3D6A4D;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#chat-main .calm-revise:hover {
  background: rgba(110, 138, 126, 0.22);
  border-color: rgba(110, 138, 126, 0.55);
  color: #2F5847;
}

.calm-task-field {
  margin-bottom: 12px;
}

.calm-task-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  color: #756D5F;
}

.calm-letter {
  display: block;
  min-height: 1.5em;
  padding: 10px 14px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.55;
  color: var(--warm-text, #3D3028);
  background: rgba(253, 247, 243, 0.5);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  overflow-wrap: anywhere;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Lock To/Subject (and From) to one resting height — From was pinned at 44px while the contenteditable
   To/Subject were content-driven (~45 and growing), so the field stack didn't agree on a height. */
#chat-main .calm-brief2--reply .calm-letter--to,
#chat-main .calm-brief2--reply .calm-letter--subject { min-height: 45px; box-sizing: border-box; }

.calm-letter--body {
  min-height: 130px;
  padding: 16px 18px;
}

/* #3063: the Brief reply body holds real multi-paragraph email HTML, so it
   borrows the email compose editor rhythm (.ql-editor) — a generous inset, a
   blank line between paragraphs, and a first/last-child margin reset — so the
   draft reads like a real email instead of a flattened one-line blob. */
.calm-letter--body p {
  margin: 1em 0;
}

.calm-letter--body p:first-child {
  margin-top: 0;
}

.calm-letter--body p:last-child {
  margin-bottom: 0;
}

.calm-letter--body ul,
.calm-letter--body ol {
  margin: 0.5em 0;
  padding-inline-start: 1.5em;
}

.calm-letter:empty::before {
  content: attr(data-placeholder);
  color: var(--warm-text-light, #8C7B6F);
  opacity: 0.7;
}

/* #3134: the Brief reply Besked field is now a .calm-letter--body container that holds
   the editable [data-calm-body] region plus an inline signature footer, so the box
   itself is never :empty. The inner editor draws no chrome of its own (the container
   draws the box) and just fills it so the whole field stays a click/focus target. */
.calm-letter--body [data-calm-body] {
  min-height: 96px;
  outline: none;
}

/* Re-home the empty-reply placeholder onto the inner editor (the base
   .calm-letter:empty::before still serves the To/Subject fields). */
.calm-letter--body [data-calm-body]:empty::before {
  content: attr(data-placeholder);
  color: var(--warm-text-light, #8C7B6F);
  opacity: 0.7;
}

/* ── #3067: calm skeleton shown inside .calm-letter--body while the Brief reply
   draft is loading (cache lookup / generation), so the Besked field never sits
   empty with only its "Skriv dit svar …" placeholder. While loading the body is
   [aria-busy="true"] and contenteditable="false"; prepareCalmDraft clears it the
   moment cached/generated content lands. The bars reuse the existing warm calm
   border/cream palette (no new colors); styling is source-only (no runtime style
   injection). The skeleton nodes make the body non-:empty, so the placeholder is
   naturally suppressed while loading. ── */
.calm-letter--loading {
  cursor: default;
}

.calm-letter--loading .calm-skel-line {
  display: block;
  height: 0.72em;
  margin: 0 0 0.66em;
  border-radius: 6px;
  background-color: rgba(228, 220, 212, 0.6);
  background-image: linear-gradient(
    90deg,
    rgba(228, 220, 212, 0) 0%,
    rgba(253, 247, 243, 0.9) 50%,
    rgba(228, 220, 212, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 180% 100%;
  animation: calm-skel-shimmer 1.5s ease-in-out infinite;
}

.calm-letter--loading .calm-skel-line:first-child {
  margin-top: 3px;
}

.calm-letter--loading .calm-skel-line:nth-child(1) { width: 94%; }
.calm-letter--loading .calm-skel-line:nth-child(2) { width: 82%; }
.calm-letter--loading .calm-skel-line:nth-child(3) { width: 64%; }

@keyframes calm-skel-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

.calm-task-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
/* #4406: the display:flex above is an author rule that beats the UA [hidden] style, so the
   row must hide explicitly when the undo window replaces it with the Fortryd. */
.calm-task-actions[hidden] {
  display: none;
}

/* The app's ONE primary button: the same soft-green pill as the week view's "Send til email" (was a
   solid sage #6E8A7E rect — louder, only 3.75:1 white-on-sage, on the old flat 0.15s motion, and a
   different shape from its sibling screen). #DCE9D5/#3D6A4D is 4.95:1, calmer, and now carries the
   house cubic lift + press-settle. The 5s undo-send is the safety net, so a calm pill fits. */
#chat-main .calm-task-send {
  min-height: 45px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #DCE9D5;
  color: #3D6A4D;
  border: 1px solid transparent;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(.2, .6, .2, 1);
}

#chat-main .calm-task-send:hover:not([disabled]) {
  background: #D2E3C9;
  box-shadow: 0 1px 2px rgba(58, 47, 38, .05), 0 2px 6px rgba(58, 47, 38, .06);
  transform: translateY(-1px);
}

#chat-main .calm-task-send:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(58, 47, 38, .05);
  transition-duration: 0.09s;
}

#chat-main .calm-task-send[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Secondary = the week view's white outline pill ("Lyt"), so the two screens share one button system. */
#chat-main .calm-task-back {
  min-height: 45px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #756D5F;
  border: 1px solid #ECE8DC;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.18s ease, color 0.15s ease;
}

#chat-main .calm-task-back:hover {
  background: #FBFAF6;
  color: var(--warm-text, #3D3028);
}

/* #noneed: the "Behøver ikke svar?" fold + resolved strip — a considered dismissal with a
   reason, calmer than a bare skip. Same quiet palette as the secondary pill; the rows
   replace the Send/skip actions in place (targeted show/hide, like the undo-send row). */
.calm-reasons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.calm-reasons[hidden] { display: none; }
.calm-reasons-lab {
  font-size: var(--font-size-sm, 14px);
  color: #756D5F;
}
#chat-main .calm-reason {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4A4235;
  border: 1px solid #ECE8DC;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#chat-main .calm-reason:hover {
  background: #FBFAF6;
  border-color: #DCD6C6;
}
#chat-main .calm-reasons-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: #9A9184;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
#chat-main .calm-reasons-cancel:hover {
  background: #F1EEE6;
  color: #6E655A;
}
.calm-resolved {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.calm-resolved[hidden] { display: none; }
.calm-resolved-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #E7F1E9;
  color: #3D6A4D;
  flex: none;
}
.calm-resolved-msg {
  font-size: var(--font-size-base);
  color: var(--warm-text, #3D3028);
  flex: 1 1 auto;
  min-width: 120px;
}
#chat-main .calm-resolved-undo,
#chat-main .calm-resolved-next {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #756D5F;
  border: 1px solid #ECE8DC;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.18s ease, color 0.15s ease;
}
#chat-main .calm-resolved-undo:hover,
#chat-main .calm-resolved-next:hover {
  background: #FBFAF6;
  color: var(--warm-text, #3D3028);
}
.calm-resolved-next[hidden] { display: none; }
/* Reduced motion: drop the send-pill lift/press transform, keep its colour + shadow (house posture). */
@media (prefers-reduced-motion: reduce) {
  #chat-main .calm-task-send:hover:not([disabled]),
  #chat-main .calm-task-send:active:not([disabled]) { transform: none; }
}

/* #4406: send confirmation — a clear "Sendt" with the recipient quiet underneath
   (Morten: less text for dyslexia). Shown the moment the undo window opens and kept
   after the send settles. */
.calm-task-sent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
}
.calm-task-sent[hidden] {
  display: none;
}
.calm-sent-head {
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--font-weight-semibold);
  color: #6E8A7E;
  line-height: 1.3;
}
.calm-sent-to {
  font-size: var(--font-size-sm, 13px);
  color: var(--warm-text-light, #8C7B6F);
  line-height: 1.4;
  word-break: break-word;
}
/* #4406 follow-up: the confirmation echoes the SENDING account too (from → to), so a
   multi-account user can catch a wrong-identity send during the undo window. */
.calm-sent-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--font-size-sm, 13px);
  color: var(--warm-text-light, #8C7B6F);
  line-height: 1.4;
}
.calm-sent-from {
  font-weight: var(--font-weight-medium);
  color: var(--warm-text, #3D3028);
  word-break: break-word;
}
.calm-sent-arrow {
  display: inline-block;
  opacity: 0.55;
}
[dir="rtl"] #chat-main .calm-sent-arrow {
  transform: scaleX(-1);
}

/* #4406: undo-send window — a calm Fortryd whose ring depletes over the 5s window, with a
   per-second numeric countdown beside it (#4406 follow-up) so the time left is explicit. */
.calm-undo-row {
  margin-top: 14px;
}
.calm-undo-row[hidden] {
  display: none;
}
#chat-main .calm-undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-block: 0; padding-inline: 12px 18px;
  border-radius: 14px;
  background: transparent;
  color: var(--warm-text, #3D3028);
  border: 1px solid rgba(228, 220, 212, 0.85);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#chat-main .calm-undo-btn:hover {
  border-color: #6E8A7E;
  background: rgba(110, 138, 126, 0.06);
}
#chat-main .calm-undo-btn:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
.calm-undo-label {
  line-height: 1;
}
.calm-undo-count {
  display: inline-block;
  min-width: 1.1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  color: #6E8A7E;
  line-height: 1;
}
.calm-undo-ring {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: none;
}
.calm-undo-ring svg {
  width: 22px;
  height: 22px;
  transform: rotate(-90deg); /* depletion starts at 12 o'clock */
}
.calm-undo-ring__track {
  fill: none;
  stroke: rgba(110, 138, 126, 0.22);
  stroke-width: 3;
}
.calm-undo-ring__fill {
  fill: none;
  stroke: #6E8A7E;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100.53; /* circumference of r=16 */
  stroke-dashoffset: 0;
}
.calm-undo-row.is-counting .calm-undo-ring__fill {
  animation: calm-undo-deplete var(--calm-undo-dur, 5000ms) linear forwards;
}
@keyframes calm-undo-deplete {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100.53; }
}

/* #3148/Birthe: a brief calm "Udkast gemt" toast after Luk so closing feels safe, not like
   losing work. Bottom-centre, above the toolbar/orb, self-fading. */
.calm-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 10px);
  max-width: min(86vw, 360px);
  background: var(--warm-surface, #FBF7F0);
  color: var(--warm-text, #3D3028);
  border: 1px solid rgba(110, 138, 126, 0.4);
  border-radius: 12px;
  padding: 9px 16px;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 6px 22px rgba(61, 48, 40, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* Above the mobile chat-prompt panel (z 9990) + advanced-reader (z 99999) so the
     reassurance toast is never occluded at the bottom of a small screen. */
  z-index: 100002;
}
.calm-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
html[data-theme="dark"] .calm-toast {
  background: var(--color-surface-raised, #2A2520);
  color: var(--color-text-primary, #FAF5EF);
  border-color: rgba(159, 188, 175, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .calm-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}

/* While the send is held, the letter reads as committed — dimmed and non-interactive —
   so it is clear the reply is on its way (only Fortryd acts during the window). */
.calm-task--sending .calm-task-field {
  opacity: 0.5;
  pointer-events: none;
}

.calm-task-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #9B6050;
  background: rgba(155, 96, 80, 0.08);
  border: 1px solid rgba(155, 96, 80, 0.2);
  border-radius: 10px;
}

/* Voice-revision interruption notice, announced via the .calm-task-status live region.
   Collapses to zero footprint when empty so it never adds space on a normal card. */
.calm-task-note {
  margin: 12px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #6E8A7E;
}
.calm-task-note:empty {
  margin: 0;
}

/* Loading variant stays single-column and centered */
.calm-brief2--pending {
  text-align: center;
}

/* ── Focus rings: sage #6E8A7E ── */

#chat-main .calm-source-listen:focus-visible,
#chat-main .calm-source-quote button.calm-quote-toggle:focus-visible,
#chat-main .calm-body-listen:focus-visible,
#chat-main .calm-revise:focus-visible,
#chat-main .calm-task-send:focus-visible,
#chat-main .calm-task-back:focus-visible,
#chat-main .calm-reason:focus-visible,
#chat-main .calm-reasons-cancel:focus-visible,
#chat-main .calm-resolved-undo:focus-visible,
#chat-main .calm-resolved-next:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}

/* #3195 killed the green active-outline (right — it boxed every clicked field), but over-corrected to
   NO focus at all, so tabbing through To/Subject/Besked was invisible — the "where am I?" jump this
   app exists to remove. A calm sage-tinted border + a soft 3px halo (not a hard ring) shows focus
   without the outline-around-a-box problem; same treatment on the contenteditable body. #4804. */
#chat-main .calm-letter:focus,
#chat-main .calm-letter:focus-visible,
#chat-main .calm-brief2--reply .calm-letter--body:focus-within {
  outline: none;
  border-color: rgba(110, 138, 126, 0.55);
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.12);
}

/* ── Dark mode: calm card keeps its warm/sage palette (no inversion) ── */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2 {
  background: var(--white, #FFFEFB);
  border-color: rgba(228, 220, 212, 0.6);
}

/* #chat-darkmode-brief: the morgen-card IS dark-native (its body follows the --white
   token flip), so its shell must too — the light 0.6-ivory border was the brightest
   line on the dark page, and the warm-brown light shadows were invisible on dark.
   Values = the dark composer canon one step up. */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2.morgen-card {
  background: rgb(42, 38, 34);
  border-color: rgba(232, 224, 216, 0.10);
  box-shadow:
    0 2px 8px rgba(20, 18, 15, 0.22),
    0 14px 40px rgba(20, 18, 15, 0.34);
}

html[data-theme="dark"] #chat-main .calm-brief2 .sofia-signal-title,
html[data-theme="dark"] #chat-main .calm-brief2 .calm-title {
  color: #3A2F26;
}

html[data-theme="dark"] #chat-main .calm-brief2 .sofia-signal-summary,
html[data-theme="dark"] .calm-reassure {
  color: var(--warm-text-light, #8C7B6F);
}

html[data-theme="dark"] .calm-empty-title {
  color: var(--color-text-primary, #FAF5EF);
}

/* Source block + subject chip stay legible (not the warm light palette) on dark */
html[data-theme="dark"] .calm-source {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .calm-source-from,
html[data-theme="dark"] .calm-source-quote {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-source-quote {
  border-inline-start-color: rgba(110, 138, 126, 0.6);
}

/* #3130: keep the current message, the quiet toggle, and the muted history legible on
   dark without turning the toggle into a pill (border/background stay absent). */
html[data-theme="dark"] #chat-main .calm-source-quote .calm-quote-current {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-source-quote button.calm-quote-toggle {
  color: #8FB3A2;
}

html[data-theme="dark"] #chat-main .calm-source-quote button.calm-quote-toggle:hover {
  color: #C2D6CC;
}

html[data-theme="dark"] #chat-main .calm-source-quote .calm-quote-history {
  color: var(--color-text-secondary, #A89B91);
  border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] #chat-main .calm-source-listen,
html[data-theme="dark"] #chat-main .calm-body-listen {
  color: #B9CCC2;
  border-color: rgba(255, 255, 255, 0.16);
}

/* #3137: the AI opener keeps a soft-sage fill in dark mode too (not a ghost pill). */
html[data-theme="dark"] #chat-main .calm-revise {
  background: rgba(110, 138, 126, 0.24);
  border-color: rgba(110, 138, 126, 0.45);
  color: #CDE3D8;
}

html[data-theme="dark"] #chat-main .calm-revise:hover {
  background: rgba(110, 138, 126, 0.34);
  color: #FFFFFF;
}

html[data-theme="dark"] .calm-subject-chip {
  background: rgba(110, 138, 126, 0.18);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-subject-key {
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] .calm-task {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .calm-answer-title,
html[data-theme="dark"] .calm-task-field-label {
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] .calm-letter {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}

/* Ghost pill in dark mode: the base rule paints it solid #FFFFFF, which in dark mode out-shouts
   the sage primary and inverts the hierarchy (the low-priority dismiss became the brightest thing
   on the card). Go transparent with a faint border — the same quiet treatment the sibling dismiss
   controls (.calm-reason / .calm-resolved-*) already use just below. */
html[data-theme="dark"] #chat-main .calm-task-back {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text-secondary, #A89B91);
}
html[data-theme="dark"] #chat-main .calm-task-back:hover {
  border-color: #6E8A7E;
  background: rgba(110, 138, 126, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}
/* #noneed: dark-mode fold + resolved strip — match the sibling dark reply-card controls. */
html[data-theme="dark"] .calm-reasons-lab {
  color: var(--color-text-secondary, #A89B91);
}
html[data-theme="dark"] #chat-main .calm-reason,
html[data-theme="dark"] #chat-main .calm-resolved-undo,
html[data-theme="dark"] #chat-main .calm-resolved-next {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text-primary, #FAF5EF);
}
html[data-theme="dark"] #chat-main .calm-reason:hover,
html[data-theme="dark"] #chat-main .calm-resolved-undo:hover,
html[data-theme="dark"] #chat-main .calm-resolved-next:hover {
  border-color: #6E8A7E;
  background: rgba(110, 138, 126, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}
html[data-theme="dark"] #chat-main .calm-reasons-cancel {
  color: rgba(200, 190, 178, 0.62);
}
html[data-theme="dark"] #chat-main .calm-reasons-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #E8DDD4;
}
html[data-theme="dark"] .calm-resolved-ico {
  background: rgba(110, 138, 126, 0.20);
  color: #A8C5B8;
}
html[data-theme="dark"] .calm-resolved-msg {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-task-error {
  color: #E6B0A2;
  background: rgba(212, 144, 128, 0.12);
  border-color: rgba(212, 144, 128, 0.26);
}

/* #4406: undo window in dark mode — recipient and Fortryd adapt to the dark surface. */
html[data-theme="dark"] .calm-sent-to,
html[data-theme="dark"] .calm-sent-route {
  color: var(--color-text-secondary, #A89B91);
}
html[data-theme="dark"] .calm-sent-from {
  color: var(--color-text-primary, #FAF5EF);
}
html[data-theme="dark"] .calm-undo-count {
  color: #9FBCAF;
}
html[data-theme="dark"] #chat-main .calm-undo-btn {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text-primary, #FAF5EF);
}
html[data-theme="dark"] #chat-main .calm-undo-btn:hover {
  border-color: #6E8A7E;
  background: rgba(110, 138, 126, 0.14);
}
html[data-theme="dark"] .calm-undo-ring__track {
  stroke: rgba(255, 255, 255, 0.16);
}

/* ── Dark mode for the morgenoverblik + "Se hele din uge" views (the calm-brief2 .morgen-card).
   In dark mode the shared --white/--cream tokens flip to dark surfaces (#232220 card on #1c1b18
   page), so this brief is a DARK card like the reply/done/today briefs. The morgen and dinuge
   redesign only shipped light-mode colours, so its text rendered dark-on-dark. These overrides
   complete the same dark-card + light-text pattern the sibling briefs already use: text→light,
   dividers→hairline white, sage accents→a readable dark-mode sage (#A8C5B8, matches .card-dot--sage).
   #chat-darkmode-brief ── */
/* Overview (compact) */
html[data-theme="dark"] #chat-main .morgen-item-title { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .morgen-item-sub { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-empty-text { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .morgen-empty-next { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-typeicon { color: rgba(200, 190, 178, 0.62); }
html[data-theme="dark"] #chat-main .morgen-item-speak { color: rgba(200, 190, 178, 0.62); }
html[data-theme="dark"] #chat-main .morgen-item-speak:hover { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .morgen-div { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #chat-main .morgen-item:hover { background: rgba(255, 255, 255, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] #chat-main .morgen-item--reply:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] #chat-main .task-check { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .task-check:hover:not(:disabled) { color: #C2D6CC; }
html[data-theme="dark"] #chat-main .task-check--done { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-done-ico { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-done-text { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-undo { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-undo:hover { color: #C2D6CC; background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] #chat-main .morgen-see { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-see:hover { color: #C2D6CC; }
html[data-theme="dark"] #chat-main .morgen-lyt { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-lyt:hover { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .morgen-item-open:focus-visible,
html[data-theme="dark"] #chat-main .morgen-item-speak:focus-visible,
html[data-theme="dark"] #chat-main .task-check:focus-visible,
html[data-theme="dark"] #chat-main .morgen-undo:focus-visible,
html[data-theme="dark"] #chat-main .morgen-see:focus-visible,
html[data-theme="dark"] #chat-main .morgen-lyt:focus-visible { outline-color: #A8C5B8; }
/* Se hele din uge (full week) */
html[data-theme="dark"] #chat-main .dinuge-empty { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .dinuge-label { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .dinuge-view .dinuge-h.sofia-signal-title { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .dinuge-cal td { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #chat-main .dinuge-cal tr:hover td { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] #chat-main .dinuge-cal-day { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .dinuge-cal-time,
html[data-theme="dark"] #chat-main .dinuge-cal-town,
html[data-theme="dark"] #chat-main .dinuge-cal-more { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .dinuge-cal-ev { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .dinuge-cal-lyt { color: rgba(200, 190, 178, 0.62); }
html[data-theme="dark"] #chat-main .dinuge-cal-lyt:hover { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .dinuge-back { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .dinuge-back:hover { color: #E8DDD4; }
/* Week-view rows are full-bleed + square, so keep the hover FLAT in dark too (the light rule sets
   box-shadow:none; the generic dark .morgen-item:hover above would otherwise re-add the "slipping
   plank" shadow — higher specificity, no dinuge override). #chat-darkmode-brief */
html[data-theme="dark"] #chat-main .dinuge-view .morgen-item:hover { box-shadow: none; }
/* Primary "Send til email" pill — soft sage fill (mirrors the light soft-green pill) */
html[data-theme="dark"] #chat-main .dinuge-send { background: rgba(168, 197, 184, 0.16); color: #C7DDD1; }
html[data-theme="dark"] #chat-main .dinuge-send:hover:not(.dinuge-send--done) { background: rgba(168, 197, 184, 0.24); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] #chat-main .dinuge-send:active:not(.dinuge-send--done) { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] #chat-main .dinuge-send--done { background: rgba(168, 197, 184, 0.12); }
/* Secondary "Lyt" pill */
html[data-theme="dark"] #chat-main .dinuge-lyt { background: rgba(255, 255, 255, 0.05); color: var(--color-text-secondary, #A89B91); border-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] #chat-main .dinuge-lyt:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #chat-main [data-calm-lyt-ico].tts-playing,
html[data-theme="dark"] #chat-main [data-calm-lyt-ico].tts-paused,
html[data-theme="dark"] #chat-main [data-calm-lyt-ico].loading { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .dinuge-cal-lyt:focus-visible,
html[data-theme="dark"] #chat-main .dinuge-send:focus-visible,
html[data-theme="dark"] #chat-main .dinuge-lyt:focus-visible { outline-color: #A8C5B8; }

/* ── Responsive: the card is already single-column; tighten padding + stack the footer ── */
@media (max-width: 720px) {
  #chat-main .sofia-signal--active.calm-brief2 {
    padding: 22px 20px;
  }

  .calm-task-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #chat-main .calm-task-send,
  #chat-main .calm-task-back {
    width: 100%;
  }

  /* #4406: the Fortryd matches the stacked footer width and centers its label + ring. */
  #chat-main .calm-undo-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── No horizontal scroll at 360px ── */
@media (max-width: 360px) {
  /* #2952: the chooser is now a fit-content segmented track with its own 3px
     padding, so it must not inherit the old loose-row side padding. */
  .calm-empty {
    padding-inline-start: 14px;
    padding-inline-end: 14px;
  }

  #chat-main .sofia-signal--active.calm-brief2 {
    padding: 18px 16px;
  }

  .calm-subject-chip {
    white-space: normal;
  }

  .calm-answer-head {
    align-items: flex-start;
  }
}

/* ── Cover flower sway: calmFlowerSway animates the "Vigtigt i dag" cover's foreground
   flower — the one decorative animation on the calm cards. ── */
@keyframes calmFlowerSway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ── No connected mail account: calm connect onboarding card ──
   Centered welcome that reuses the calm-brief2 shell + a single bloom; the all-done
   meadow/sparks are intentionally absent (they read as "inbox cleared"). One sage CTA
   links to /email/. Same-specificity as the base .calm-brief2 rule but later in
   source, so the warm gradient + sage border win for the connect state only. */
#chat-main .sofia-signal--active.calm-brief2--connect {
  position: relative;
  box-sizing: border-box;
  display: block;
  text-align: center;
  padding: 34px 40px 36px;
  border: 1px solid rgba(110, 138, 126, 0.20);
  background: linear-gradient(157deg, #FBF4EA 0%, #FCF7EF 58%, #F5F1E6 100%);
}

#chat-main .calm-brief2--connect .calm-connect-art {
  display: flex;
  justify-content: center;
  margin: 0 0 6px;
  pointer-events: none;
}

#chat-main .calm-brief2--connect .calm-title {
  margin: 0 0 8px;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: #3A2F26;
}

#chat-main .calm-brief2--connect .calm-reassure {
  display: block;
  max-width: 380px;
  margin: 0 auto 20px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
}

#chat-main .calm-brief2--connect .calm-connect-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  background: #6E8A7E;
  color: #FFFFFF;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background 0.15s ease;
}

#chat-main .calm-brief2--connect .calm-connect-cta:hover {
  background: color-mix(in srgb, #6E8A7E 88%, black);
}

#chat-main .calm-brief2--connect .calm-connect-cta:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}

#chat-main .calm-brief2--connect .calm-connect-cta-ico {
  flex: none;
}

/* Dark mode: keep the warm/sage calm palette (no inversion), matching the done card. */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2--connect {
  border-color: rgba(110, 138, 126, 0.20);
  background: linear-gradient(157deg, #FBF4EA 0%, #FCF7EF 58%, #F5F1E6 100%);
}
html[data-theme="dark"] #chat-main .calm-brief2--connect .calm-title {
  color: #3A2F26;
}
html[data-theme="dark"] #chat-main .calm-brief2--connect .calm-reassure {
  color: #8C7B6F;
}

@media (max-width: 480px) {
  #chat-main .sofia-signal--active.calm-brief2--connect {
    padding: 30px 20px 32px;
  }
  #chat-main .calm-brief2--connect .calm-connect-cta {
    display: flex;
    width: 100%;
  }
}

/* ============================================================
   #4378 — "Vigtigt i dag" email cover. The compact calm card that fronts the
   reply flow. Reuses the all-done scene (flower, dawn glow, meadow) but with a
   left-aligned kicker/title/body + one primary action, so it reads as "here is
   the one thing" rather than the all-done "rest" headline. Warm-only, like --done.
   ============================================================ */
#chat-main .sofia-signal--active.calm-brief2--today {
  position: relative;
  box-sizing: border-box;
  padding-block: 26px 30px; padding-inline: 120px 30px;
  border: 1px solid rgba(110, 138, 126, 0.20);
  background: linear-gradient(157deg, #FBF4EA 0%, #FCF7EF 58%, #F5F1E6 100%);
}
#chat-main .sofia-signal--active.calm-brief2--today::before {
  content: "";
  position: absolute;
  inset: auto auto -10px 40px;
  width: 180px;
  height: 120px;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(245, 206, 130, 0.34), rgba(245, 206, 130, 0) 72%);
  filter: blur(8px);
  opacity: 0.7;
}
#chat-main .calm-brief2--today .calm-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
#chat-main .calm-brief2--today .calm-cover-body {
  position: relative;
  z-index: 2;
}
#chat-main .calm-brief2--today .calm-kicker {
  margin: 0 0 6px;
}
#chat-main .calm-brief2--today .calm-title {
  margin: 0 0 6px;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: #3A2F26;
}
#chat-main .calm-brief2--today .calm-reassure {
  display: block;
  margin: 0 0 16px;
  color: var(--warm-text-light, #8C7B6F);
}
#chat-main .calm-brief2--today .calm-cover-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#chat-main .calm-brief2--today .calm-cover-see {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: #6E8A7E;
  color: #FFFEFB;
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-semibold);
}
#chat-main .calm-brief2--today .calm-cover-see:hover {
  background: #5F7C70;
}
#chat-main .calm-brief2--today .calm-cover-see:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 2px;
}
#chat-main .calm-brief2--today .calm-cover-arrow {
  display: inline-block;
}
[dir="rtl"] #chat-main .calm-brief2--today .calm-cover-arrow {
  transform: scaleX(-1);
}
#chat-main .calm-brief2--today .calm-cover-skip {
  margin-inline-start: auto;
  padding: 9px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--warm-text-light, #9A8E82);
  font-size: var(--font-size-sm);
}
#chat-main .calm-brief2--today .calm-cover-skip:hover {
  color: var(--warm-text, #5C4D43);
}
#chat-main .calm-brief2--today .calm-cover-count {
  position: absolute;
  top: 20px;
  inset-inline-end: 22px;
  z-index: 2;
  font-size: var(--font-size-xs);
  color: var(--warm-text-light, #9A8E82);
}
#chat-main .calm-brief2--today .calm-flower {
  position: absolute;
  inset-inline-start: 30px;
  top: 50%;
  margin-top: -42px;
  width: 64px;
  height: 84px;
  transform-origin: 50% 100%;
  animation: calmFlowerSway 6.5s ease-in-out infinite;
  z-index: 1;
}
#chat-main .calm-brief2--today .calm-hill { fill: rgba(110, 138, 126, 0.18); }
#chat-main .calm-brief2--today .calm-stem { fill: none; stroke: #6E8A7E; stroke-width: 2.4; stroke-linecap: round; }
#chat-main .calm-brief2--today .calm-leaf { fill: #7E9B8C; }
#chat-main .calm-brief2--today .calm-petal { fill: #8FB0A0; }
#chat-main .calm-brief2--today .calm-core { fill: #E8B85C; }
#chat-main .calm-brief2--today .calm-meadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  line-height: 0;
  z-index: 1;
}
#chat-main .calm-brief2--today .calm-meadow svg { display: block; }
#chat-main .calm-brief2--today .calm-meadow-hill--back { fill: rgba(126, 155, 140, 0.20); }
#chat-main .calm-brief2--today .calm-meadow-hill--front { fill: rgba(110, 138, 126, 0.30); }
@media (prefers-reduced-motion: reduce) {
  #chat-main .calm-brief2--today .calm-flower { animation: none; }
}
@media (max-width: 480px) {
  #chat-main .sofia-signal--active.calm-brief2--today {
    padding-block: 22px 28px; padding-inline: 92px 20px;
  }
  #chat-main .calm-brief2--today .calm-flower {
    width: 52px;
    margin-top: -36px;
    inset-inline-start: 22px;
  }
  #chat-main .calm-brief2--today .calm-cover-count {
    top: 16px;
    inset-inline-end: 16px;
  }
}

/* Dark mode: the cover joins the --done family on the dark surface — a calm dark
   card, never a bright cream slab. Mirrors the --done dark treatment (dark gradient,
   light title, eased dawn glow, lifted meadow) plus the cover-only count/skip text. */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2--today {
  background: linear-gradient(157deg, #201B18 0%, #1E1C1A 58%, #181613 100%);
  border-color: rgba(143, 165, 147, 0.20);
}
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-title {
  color: #FAF5EF;
}
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-reassure,
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-cover-count,
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-cover-skip {
  color: #A89B91;
}
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-cover-skip:hover {
  color: #FAF5EF;
}
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2--today::before {
  opacity: 0.45;
}
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-meadow-hill--back {
  fill: rgba(143, 165, 147, 0.10);
}
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-meadow-hill--front {
  fill: rgba(143, 165, 147, 0.16);
}
html[data-theme="dark"] #chat-main .calm-brief2--today .calm-hill {
  fill: rgba(143, 165, 147, 0.18);
}

/* ============================================================
   #3044 — Draggable prompt category chips: calm grip affordance.
   The chips are reorderable via HTML5 drag (wired in
   chat-category-chips.js). This adds the approved quiet affordance:
   a grip-dot hint, a 1px hover/focus lift, a soft drag ghost, and a
   drop-position pill — with NO width change at rest vs hover.

   Bound to ".chat-prompt-area" — the class the JS takeover leaves on the live
   container (#chat-category-chips-container). We deliberately do NOT re-add
   "chat-ny-prompt-area": that would activate the 12px 24px !important rule
   (chat-ny-blod-bolge.css ~3402, min-height:48px too) and resize EVERY chip,
   which #3044 does not intend. Our padding-left:30px !important still wins the
   cascade over the active "body:not(.chat-ny-in-conversation) .chat-prompt-chip"
   padding (10px 22px).

   Scoped to pointer/hover devices only so touch chips stay pixel-identical
   (no gutter, no grip, no wrap shift) and tap-to-open is untouched. The
   "+ Ny" add chip is excluded everywhere via :not(.chat-prompt-add). */

/* Adding quick-actions to the chips row pulls in skrivsikkert-shared.css
   ".quick-actions { margin-bottom: 36px }"; the container already owns the
   bottom spacing, so keep the row flush (no change vs before this PR). */
.chat-prompt-area .chat-prompt-chips.quick-actions {
  margin-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add) {
    position: relative;
    cursor: grab;
    /* Constant grip gutter — identical at rest and on hover/drag so the chip
       never changes width when the grip fades in. */
    padding-inline-start: 30px !important;
    padding-inline-end: 24px !important;
  }

  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):active {
    cursor: grabbing;
  }

  /* Grip dots — decorative pseudo-element only (no DOM node, no accessible
     name). Hidden at rest, fades in on hover / keyboard focus-visible. */
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add)::before {
    content: "";
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    width: 6px;
    height: 13px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    background-image: radial-gradient(currentColor 40%, transparent 45%);
    background-size: 3px 4px;
    background-position: center;
    background-repeat: round;
    color: var(--warm-text, #5c4d43);
    pointer-events: none;
  }

  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):hover::before,
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):focus-visible::before {
    opacity: 0.4;
  }

  /* Gentle 1px lift on hover / keyboard focus. More specific than the welcome
     .chat-prompt-chip:hover, so this (not the -2px lift) applies; width stays
     constant. */
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):hover,
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(92, 77, 67, 0.08);
  }

  /* Dragged chip — soft ghost. Carries the lift in its transform so it wins
     over the :hover translateY during the drag gesture. */
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add).dragging {
    opacity: 0.5;
    transform: translateY(-1px) scale(0.97);
    box-shadow: 0 8px 22px rgba(92, 77, 67, 0.16);
    cursor: grabbing;
  }

  /* Drop indicator — a 3px pill centered in the 14px inter-chip gap. */
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add).chip-drop-before::after,
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add).chip-drop-after::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    border-radius: 3px;
    background: var(--chat-ny-accent, #d4a89a);
    opacity: 0.9;
    pointer-events: none;
  }

  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add).chip-drop-before::after {
    inset-inline-start: -8.5px;
  }

  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add).chip-drop-after::after {
    inset-inline-end: -8.5px;
  }
}

/* Reduced motion: drop the animated lift and transitions; grip is instant. */
@media (prefers-reduced-motion: reduce) {
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add),
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add)::before {
    transition: none !important;
  }

  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):hover,
  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add):focus-visible {
    transform: none;
  }

  .chat-prompt-area .chat-prompt-chips.quick-actions .chat-prompt-chip:not(.chat-prompt-add).dragging {
    transform: scale(0.97);
  }
}

/* ============================================================================
   #3065/#3137 — Sofia Brief AI revision dock (confirm-first). Surface: app.
   "Forbedr med AI" opens a calm dock BESIDE the active reply card. The dock is
   appended to document.body (the card has overflow:hidden and .main clips the X
   axis), fixed-positioned and repositioned in JS. It stays a warm LIGHT surface in
   both themes (it is portaled outside #chat-main, so the card's dark rules never
   reach it) — explicit hex, never tokens the dark theme could override. Sage =
   active/primary, muted warm = idle/previous; no emoji, no coral/blue/gold accent.
   ========================================================================== */

/* Reduced header on the active reply card: only the literal "Svar på mail" shows.
   Scoped to .calm-brief2--reply so the pending + done states keep their own copy. */
#chat-main .calm-brief2--reply .calm-kicker,
#chat-main .calm-brief2--reply .calm-reassure,
#chat-main .calm-brief2--reply .sofia-signal-summary,
#chat-main .calm-brief2--reply .calm-subject-chip {
  display: none;
}

/* The reply-card title is the literal "Svar på mail" action label at the approved
   #3065 size/rhythm. Tokens keep the font-compliance guard happy
   (--font-size-2xl = 22px, --font-weight-semibold = 600); equal specificity to the
   base .calm-title rule but later in source, so it wins for the reply card only —
   the pending/done titles keep var(--calm-fs-title). */
#chat-main .calm-brief2--reply .sofia-signal-title,
#chat-main .calm-brief2--reply .calm-title {
  font-size: var(--font-size-2xl);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}

/* ── #3118: Sofia Brief reply card — neutral source, white letter fields, a visible
   "Fra" sender select + signature preview, and unified warm-white voice pills. All
   reply-scoped (.calm-brief2--reply) so the pending/done states keep their palette,
   and every light surface has a paired dark override so the near-white hexes never
   leak onto the dark card (the #3045 light-slab failure). Source-baked, fonts
   tokenised so the chat font-compliance guard holds. ── */

/* The compact step dots add noise to a single-reply approval card — hide them here
   (pending/done never emit .calm-progress, so this is reply-only). */
#chat-main .calm-brief2--reply .calm-progress {
  display: none;
}

/* Neutral source card (was the warm cream rgba(253,247,243,.6)) so the quoted email
   reads as context, not a second editable surface competing with the answer. */
#chat-main .calm-brief2--reply .calm-source {
  background: #F4EFE8;
}

/* White letter fields (From / To / Subject / Body) so the editable answer is the
   brightest, most inviting surface on the card. */
#chat-main .calm-brief2--reply .calm-letter {
  background: #FFFEFB;
}

/* The visible "Fra" sender select: a full-width field on the letter rhythm so long
   "Name <very.long@address>" labels clip inside the box (no 360px horizontal scroll)
   rather than forcing the card wider. */
#chat-main .calm-brief2--reply .calm-letter--from {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 45px;
  padding-block: 10px; padding-inline: 14px 38px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--warm-text, #3D3028);
  /* appearance:none + a custom chevron so the rounded corners, warm-white fill and
     padding actually render on iOS/Android (native <select> chrome ignores them),
     keeping the Fra field visually consistent with the To/Subject/Body fields. */
  appearance: none;
  -webkit-appearance: none;
  background-color: #FFFEFB;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C7B6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  cursor: pointer;
}

/* #3134: the read-only signature footer renders INLINE inside the .calm-letter--body
   message box, after the editable reply — quiet and lighter, exactly the footer
   appended once on send, so the card reads like one normal outgoing email. There is no
   separate labelled "Signatur" wrapper row. */
#chat-main .calm-brief2--reply .calm-sig-preview {
  margin-top: 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
  overflow-wrap: anywhere;
  outline: none;
}

/* The footer hides via its own [hidden] when the sender has no configured signature, so
   no blank footer ever shows. Explicit guard (mirrors .calm-task[hidden]) so no future
   display rule can defeat the native [hidden] attribute. */
#chat-main .calm-brief2--reply .calm-sig-preview[hidden] {
  display: none;
}

/* #3136/#3137: share one geometry (size/padding/gap) between the source-listen
   pill, the body read-aloud pill, and the "Forbedr med AI" opener so they line up;
   each keeps its own fill (the opener is a soft-sage AI button defined in its
   base #chat-main .calm-revise rule). */
#chat-main .calm-brief2--reply .calm-source-listen,
#chat-main .calm-brief2--reply .calm-body-listen,
#chat-main .calm-brief2--reply .calm-revise {
  min-height: 36px;
  padding: 6px 14px;
  gap: 8px;
}

/* Icon wrapper inside the source listen button: ChatTTS swaps THIS span's innerHTML
   for the play/pause icon during read-aloud, leaving the "Hør beskeden" label span
   beside it untouched. */
#chat-main .calm-brief2--reply .calm-listen-ico {
  display: inline-flex;
  align-items: center;
}

/* The Fra select also stays neutral on focus so the reply card does not draw a
   green active outline around clicked fields. */
#chat-main .calm-brief2--reply .calm-letter--from:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.7);
}

/* Dark-mode equivalents (paired, reply-scoped). The reply-scoped light hexes above
   out-specify the base dark .calm-source/.calm-letter rules, so without these the
   near-white surfaces would paint a bright slab on the dark card. Values mirror the
   existing non-reply dark rules verbatim, so dark mode looks unchanged. */
html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-source {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-letter {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-letter--from {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A89B91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-sig-preview {
  color: var(--color-text-secondary, #A89B91);
}

/* ── #3147: dark-safe "Fra" sender picker ──────────────────────────────────────
   The native <select> option popup is OS/browser-controlled and renders a white,
   low-contrast menu in dark mode (and appearance:none leaks a tiled native chevron).
   We keep the native <select.calm-from-native> as the send source of truth but hide
   it visually (still focusable for keyboard + tests) and paint a custom trigger +
   role=listbox panel we fully control. The single inline-SVG chevron on the trigger
   avoids the background-image tiling trap entirely. */
#chat-main .calm-brief2--reply .calm-from-control {
  position: relative;
}

/* Hide the native select without removing it from the layout focus order or making
   it un-targetable by tests (clip, not display:none — so .value get/set + keyboard
   focus still work). Same specificity as .calm-letter--from, placed later so it wins. */
#chat-main .calm-brief2--reply .calm-from-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#chat-main .calm-brief2--reply .calm-from-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 45px;
  padding: 10px 14px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--warm-text, #3D3028);
  background-color: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#chat-main .calm-brief2--reply .calm-from-trigger:hover {
  border-color: rgba(110, 138, 126, 0.4);
}

#chat-main .calm-brief2--reply .calm-from-trigger__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-main .calm-brief2--reply .calm-from-trigger--placeholder .calm-from-trigger__label {
  color: var(--warm-text-light, #8C7B6F);
}

#chat-main .calm-brief2--reply .calm-from-trigger__chevron {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #8C7B6F;
  transition: transform 0.18s cubic-bezier(.2, .6, .2, 1);
}

#chat-main .calm-brief2--reply .calm-from-trigger.is-open .calm-from-trigger__chevron {
  transform: rotate(180deg);
}

/* Keyboard focus lands on the hidden native select; keep the visible trigger
   neutral instead of surfacing a green active outline. */
#chat-main .calm-brief2--reply .calm-from-native:focus-visible ~ .calm-from-trigger {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.75);
}

/* The listbox panel is portaled to <body> (position set by JS), so it is NOT scoped
   under #chat-main — the class name is unique to this picker. */
.calm-from-panel {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(58, 47, 38, 0.12), 0 2px 6px rgba(58, 47, 38, 0.06);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.calm-from-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.calm-from-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #3D3028;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 100ms ease;
}

.calm-from-row__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calm-from-row__check {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #4A7A68;
  visibility: hidden;
}

.calm-from-row--selected {
  background: rgba(110, 138, 126, 0.12);
  color: #4A7A68;
}

.calm-from-row--selected .calm-from-row__check {
  visibility: visible;
}

.calm-from-row--focused,
.calm-from-row:hover {
  background: rgba(154, 142, 130, 0.12);
}

.calm-from-row--selected.calm-from-row--focused,
.calm-from-row--selected:hover {
  background: rgba(110, 138, 126, 0.16);
}

.calm-from-row--disabled {
  opacity: 0.55;
  cursor: default;
}

.calm-from-row--disabled:hover {
  background: transparent;
}

/* Dark mode: a fully controlled dark panel (no white native popup) + readable rows,
   mirroring the proven Email calm-account-select dark palette. */
html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger:hover {
  border-color: rgba(110, 138, 126, 0.45);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger__chevron {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger--placeholder .calm-from-trigger__label {
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-native:focus-visible ~ .calm-from-trigger {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .calm-from-panel {
  background: #2B2A27;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .calm-from-row {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-from-row--focused,
html[data-theme="dark"] .calm-from-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .calm-from-row--disabled:hover {
  background: transparent;
}

html[data-theme="dark"] .calm-from-row--selected {
  background: rgba(110, 138, 126, 0.22);
  color: #8FBFAE;
}

html[data-theme="dark"] .calm-from-row--selected.calm-from-row--focused,
html[data-theme="dark"] .calm-from-row--selected:hover {
  background: rgba(110, 138, 126, 0.28);
}

html[data-theme="dark"] .calm-from-row__check {
  color: #8FBFAE;
}

@media (prefers-reduced-motion: reduce) {
  .calm-from-panel {
    transform: none;
    transition: opacity 140ms ease;
  }
  #chat-main .calm-brief2--reply .calm-from-trigger__chevron {
    transition: none;
  }
}

/* The reply-card title stays light-on-dark in dark mode. The #3045 dark fix only
   covered the all-done card; without this the reply title inherits the light-mode
   #3A2F26 brown and reads as a low-contrast dark-on-dark heading. */
html[data-theme="dark"] #chat-main .calm-brief2--reply .sofia-signal-title,
html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-title {
  color: #FAF5EF;
}

/* While the dock is open the active card gets a faint sage hairline (no ring, no
   layout shift — only the border colour changes). */
#chat-main .sofia-signal--active.calm-brief2.cvm-card-active {
  border-color: rgba(110, 138, 126, 0.30);
}

.cvm-dock {
  position: fixed;
  z-index: 9000;
  top: 0;
  inset-inline-start: 0;
  width: 374px;
  max-width: calc(100vw - 16px);
  max-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FBF8F2;
  border: 1px solid #ECE7DF;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(58, 47, 38, 0.10);
  color: #3A2F26;
  animation: cvmDockIn 0.2s ease;
}

@keyframes cvmDockIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cvmDockInRtl {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] .cvm-dock {
  animation-name: cvmDockInRtl;
}

.cvm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #ECE7DF;
}

.cvm-head-icon .calm-ico {
  width: 20px;
  height: 20px;
}

.cvm-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(110, 138, 126, 0.12);
  color: #6E8A7E;
}

.cvm-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cvm-title {
  margin: 0;
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-semibold);
  color: #3A2F26;
}

.cvm-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: #8C7B6F;
}

.cvm-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8C7B6F;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cvm-close:hover {
  background: rgba(58, 47, 38, 0.06);
  color: #3A2F26;
}

.cvm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cvm-dock .ask-ai-welcome {
  margin: 0 0 2px;
}

.cvm-dock:not(.cvm-dock--inline) .cvm-body:has(.ask-ai-welcome) {
  padding-bottom: 10px;
}

.cvm-dock .ask-ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cvm-dock .ask-ai-suggestion {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(110, 138, 126, 0.24);
  border-radius: 10px;
  background: #FFFEFB;
  color: #4A6157;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvm-dock .ask-ai-suggestion svg {
  flex: 0 0 auto;
  color: #6E8A7E;
}

.cvm-dock .ask-ai-suggestion:hover,
.cvm-dock .ask-ai-suggestion:focus-visible {
  background: rgba(110, 138, 126, 0.10);
  border-color: rgba(110, 138, 126, 0.42);
  color: #3D3028;
}

.cvm-dock .ask-ai-suggestion--primary {
  background: #6E8A7E;
  border-color: #6E8A7E;
  color: #FFFEFB;
}

.cvm-dock .ask-ai-suggestion--primary svg {
  color: #FFFEFB;
}

.cvm-dock .ask-ai-suggestion--primary:hover,
.cvm-dock .ask-ai-suggestion--primary:focus-visible {
  background: #5F7B70;
  border-color: #5F7B70;
  color: #FFFEFB;
}

/* #3146 — calm, thin, scoped scrollbar for the revise dock body. Scoped to .cvm-body
   (unique to the dock) so it never touches the main chat (.chat-ny-conversation) or
   email scrollbars. Light mode uses a soft warm-dark thumb; dark mode uses a soft
   light thumb so it stays visible on the dark dock surface. Firefox gets the standard
   properties via the @supports fallback (matches the .chat-ny-conversation convention). */
.cvm-body::-webkit-scrollbar {
  width: 7px;
}
.cvm-body::-webkit-scrollbar-track {
  background: transparent;
}
.cvm-body::-webkit-scrollbar-thumb {
  background: rgba(58, 47, 38, 0.18);
  border-radius: 999px;
}
.cvm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(58, 47, 38, 0.30);
}
html[data-theme="dark"] .cvm-body::-webkit-scrollbar-thumb {
  background: rgba(232, 224, 216, 0.24) !important;
}
html[data-theme="dark"] .cvm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 224, 216, 0.36) !important;
}
@supports not selector(::-webkit-scrollbar) {
  .cvm-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(58, 47, 38, 0.18) transparent;
  }
  html[data-theme="dark"] .cvm-body {
    scrollbar-color: rgba(232, 224, 216, 0.24) transparent;
  }
}

.cvm-bubble {
  max-width: 88%;
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  border-radius: 12px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

html[dir="rtl"] .cvm-body {
  direction: rtl;
}

.cvm-bubble--bot {
  align-self: flex-start;
  background: rgba(58, 47, 38, 0.05);
  color: #3D3028;
}

.cvm-bubble--user {
  align-self: flex-end;
  background: #6E8A7E;
  color: #FFFEFB;
}

/* Keep the embedded assistant conversation's physical ownership stable while
   each generated bubble resolves its own text direction with dir=auto. */
html[dir="rtl"] .cvm-bubble--bot {
  align-self: flex-end;
}

html[dir="rtl"] .cvm-bubble--user {
  align-self: flex-start;
}

/* #3394: shared action row for BOTH inline and fixed CVM docks. The primitive renders
   .chat-msg-actions[data-cvm-actions] for both variants (no more .ask-ai-msg-actions
   for fixed). Scoped via [data-cvm-actions] so main chat action rows are unaffected. */
.cvm-dock [data-cvm-actions] {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -6px;
  margin-inline-start: 2px;
}

.cvm-dock [data-cvm-opening-actions] {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  margin-inline-start: 2px;
}

html[dir="rtl"] .cvm-dock [data-cvm-actions] {
  align-self: flex-end;
}

html[dir="rtl"] .cvm-dock [data-cvm-opening-actions] {
  align-self: flex-end;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgb(58, 47, 38);
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgb(58, 47, 38);
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn svg {
  width: 15px;
  height: 15px;
}

.cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn svg {
  width: 15px;
  height: 15px;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn:hover,
.cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  opacity: 1;
  background: rgba(58, 47, 38, 0.06);
  border-color: transparent;
  color: rgb(58, 47, 38);
}
.cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  opacity: 1 !important;
  background: rgba(58, 47, 38, 0.06) !important;
  border-color: transparent !important;
  color: rgb(58, 47, 38) !important;
  outline: 1.5px solid rgba(58, 47, 38, 0.28) !important;
  outline-offset: -1.5px !important;
}
body:has(#chat-app):has(#chat-app) .cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  opacity: 1 !important;
  background: rgba(58, 47, 38, 0.06) !important;
  border-color: transparent !important;
  color: rgb(58, 47, 38) !important;
  outline: 1.5px solid rgba(58, 47, 38, 0.28) !important;
  outline-offset: -1.5px !important;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn.done,
.cvm-dock [data-cvm-actions] .chat-msg-action-btn.tts-playing,
.cvm-dock [data-cvm-actions] .chat-msg-action-btn.active {
  opacity: 1;
  color: rgb(58, 47, 38);
  border-color: transparent;
}
.cvm-dock .ask-ai-action-btn.done {
  background: rgba(58, 47, 38, 0.06);
}

/* #3374: when ChatTTS exposes an active stop control inside either CVM variant,
   keep it as visible as the play/pause state under the shared dock action row. */
.cvm-dock [data-cvm-actions] .chat-msg-action-btn.ss-tts-stop {
  opacity: 1;
}

.cvm-thinking {
  margin: 0;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  color: #8C7B6F;
}

.cvm-suggestion {
  align-self: stretch;
  padding: 12px 14px;
  background: #FFFEFB;
  border: 1px solid #ECE7DF;
  border-radius: 12px;
}

.cvm-label {
  margin: 0 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6E8A7E;
}

/* #3146 — the suggestion label + a single quiet read-aloud control share one calm row;
   the label drops its own bottom margin so the row owns the spacing. */
.cvm-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}
.cvm-suggestion-head .cvm-label {
  margin: 0;
}
.cvm-listen,
#chat-main .cvm-dock .cvm-listen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(110, 138, 126, 0.10);
  color: #6E8A7E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cvm-listen:hover,
#chat-main .cvm-dock .cvm-listen:hover {
  background: rgba(110, 138, 126, 0.20);
}
.cvm-listen svg,
#chat-main .cvm-dock .cvm-listen svg {
  width: 18px;
  height: 18px;
}
.cvm-listen.loading,
#chat-main .cvm-dock .cvm-listen.loading {
  background: rgba(110, 138, 126, 0.14);
  color: #4A6157;
  pointer-events: none;
}
.cvm-listen.loading .cvm-listen-ico,
#chat-main .cvm-dock .cvm-listen.loading .cvm-listen-ico {
  display: none;
}
.cvm-listen.loading > svg,
.cvm-listen.loading .spin-icon,
#chat-main .cvm-dock .cvm-listen.loading > svg,
#chat-main .cvm-dock .cvm-listen.loading .spin-icon {
  display: none;
}
.cvm-listen.loading::after,
#chat-main .cvm-dock .cvm-listen.loading::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(110, 138, 126, 0.30);
  border-top-color: #6E8A7E;
  border-radius: 50%;
  animation: cvmListenSpin 0.7s linear infinite;
}
.cvm-listen.tts-playing,
.cvm-listen.active,
#chat-main .cvm-dock .cvm-listen.tts-playing,
#chat-main .cvm-dock .cvm-listen.active {
  background: rgba(110, 138, 126, 0.26);
  color: #4A6157;
}
@keyframes cvmListenSpin {
  to { transform: rotate(360deg); }
}

.cvm-old {
  display: none;
  text-decoration: line-through;
}

.cvm-new {
  margin: 0 0 12px;
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: #3A2F26;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cvm-new--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  white-space: normal;
}
.cvm-new--clamped.cvm-new--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-wrap;
}
.cvm-new-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 8px;
  padding: 0;
  border: none;
  background: none;
  color: #6E8A7E;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 0.15s ease;
}
.cvm-new-toggle:hover {
  color: #4A6157;
}
.cvm-new-toggle:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
  border-radius: 4px;
}
.cvm-new-toggle-chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}
.cvm-new-toggle[aria-expanded="true"] .cvm-new-toggle-chevron {
  transform: rotate(180deg);
}

.cvm-confirm {
  display: flex;
  gap: 8px;
}

.cvm-yes,
#chat-main .cvm-dock .cvm-yes {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #6E8A7E;
  border-radius: 999px;
  background: #6E8A7E;
  color: #FFFEFB;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s ease;
}

.cvm-yes:hover,
#chat-main .cvm-dock .cvm-yes:hover {
  background: #5F7A6F;
}

.cvm-no,
#chat-main .cvm-dock .cvm-no {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(58, 47, 38, 0.18);
  border-radius: 999px;
  background: #FFFEFB;
  color: #5C4D43;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease;
}

.cvm-no:hover,
#chat-main .cvm-dock .cvm-no:hover {
  background: rgba(58, 47, 38, 0.05);
}

.cvm-result {
  margin: 0;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #6E8A7E;
}

.cvm-error {
  margin: 0;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  color: #B08068;
}

/* #3137: one native composer bar — mic (shared ss-mic STT state) + text field +
   send — replaces the old mic + hint. The rounded bar is the bordered surface; the
   controls inside are flat. .cvm-foot keeps its 12px 16px padding. */
.cvm-foot {
  padding: 12px 16px;
  border-top: 1px solid #ECE7DF;
}

.cvm-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: 5px; padding-inline: 8px 6px;
  border: 1px solid #DAD2C6;
  border-radius: 24px;
  background: #FFFEFB;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cvm-composer:focus-within {
  /* #3137 follow-up: a quiet 1px sage ring for visible keyboard focus, not the fat
     3px green halo that glowed around the whole pill on every click. */
  border-color: #6E8A7E;
  box-shadow: 0 0 0 1px rgba(110, 138, 126, 0.35);
}

.cvm-mic,
#chat-main .cvm-dock .cvm-mic {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #6E8A7E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cvm-mic:hover,
#chat-main .cvm-dock .cvm-mic:hover {
  background: rgba(110, 138, 126, 0.16);
}

/* #3137: the dock mic carries the SAME ss-mic--* state classes as #chat-direct-mic-btn
   (createStt(button) owns them) — these replace the old local listening class. */
.cvm-mic.ss-mic--connecting,
#chat-main .cvm-dock .cvm-mic.ss-mic--connecting {
  background: rgba(110, 138, 126, 0.18);
  color: #5F7A6F;
}

/* #3334: subtle listening state — transparent fill with a soft sage border instead
   of the solid filled circle that dominated the tiny dock composer. */
.cvm-mic.ss-mic--listening,
#chat-main .cvm-dock .cvm-mic.ss-mic--listening {
  background: rgba(110, 138, 126, 0.12);
  color: #4A6B5C;
  box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.45);
  animation: cvmMicPulse 2s ease-in-out infinite;
}

.cvm-mic.ss-mic--error,
#chat-main .cvm-dock .cvm-mic.ss-mic--error {
  background: rgba(194, 96, 63, 0.12);
  color: #C2603F;
}

@keyframes cvmMicPulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.45); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.25); }
}

.cvm-type-field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  height: 24px;
  max-height: min(24vh, 112px);
  border: none;
  background: transparent;
  outline: none;
  padding: 3px 2px;
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: 18px;
  color: #3D3028;
  overflow-y: hidden;
  overflow-x: hidden;
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 138, 126, 0.24) transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cvm-type-field::placeholder {
  color: #A89B8C;
}

.cvm-type-field::-webkit-scrollbar {
  width: 5px;
}

.cvm-type-field::-webkit-scrollbar-track {
  background: transparent;
}

.cvm-type-field::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.cvm-type-field::-webkit-scrollbar-thumb {
  background: rgba(110, 138, 126, 0.24);
  border-radius: 999px;
}

.cvm-type-field::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 138, 126, 0.34);
}

.cvm-type-send,
#chat-main .cvm-dock .cvm-type-send {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #6E8A7E;
  color: #FFFEFB;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.cvm-type-send:hover,
#chat-main .cvm-dock .cvm-type-send:hover {
  background: #5F7A6F;
}

.cvm-type-send:disabled,
#chat-main .cvm-dock .cvm-type-send:disabled {
  background: rgba(110, 138, 126, 0.30);
  color: #FBF8F2;
  cursor: default;
}

.cvm-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Visually-hidden polite live region for proposal/confirm announcements. */
.cvm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* #3448: the dock dialog receives programmatic focus on mobile open (tabindex=-1)
   so screen readers announce it, but must never paint a visible ring. */
.cvm-dock:focus {
  outline: none;
}

/* Focus rings for the dock controls (sage, matching the calm card). */
.cvm-close:focus-visible,
.cvm-mic:focus-visible,
.cvm-listen:focus-visible,
.cvm-type-send:focus-visible,
.cvm-trigger:focus-visible,
.cvm-quick-chip:focus-visible,
.cvm-yes:focus-visible,
.cvm-no:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}

/* =====================================================================
 * #3202 follow-up — shared INLINE dock variant. The saved-prompt "Ny prompt"
 * form mounts the SAME .cvm-dock (via window.CalmAiDock) beside the form, in its
 * inline (panel-contained) form — replacing the old bespoke prompt-only dock.
 * It reuses every .cvm-* child rule above (head / body / bubble / suggestion /
 * composer / mic / scrollbar / dark-mode / reduced-motion); only positioning, the
 * collapsible trigger and the quick-reply chips are surface-specific. Font tokens
 * only (no raw font-size/weight) to satisfy the chat font-compliance guard. (#3202)
 * =================================================================== */
.cvm-inline-host {
  margin: 4px 0 2px;
}

.cvm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(110, 138, 126, 0.30);
  border-radius: 999px;
  background: rgba(110, 138, 126, 0.10);
  color: #4A6157;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cvm-trigger:hover {
  background: rgba(110, 138, 126, 0.16);
  border-color: rgba(110, 138, 126, 0.45);
}
.cvm-trigger-ico {
  display: inline-flex;
  color: #6E8A7E;
}
.cvm-is-open .cvm-trigger {
  display: none;
}

/* Inline placement: NOT the fixed viewport float Brief uses — a panel-contained
   card beside the saved-prompt form. Overrides .cvm-dock's fixed position + width;
   the themed surface, head, body and composer all come from the shared .cvm-* rules. */
.cvm-dock--inline {
  position: static;
  z-index: auto;
  width: auto;
  max-width: none;
  max-height: var(--cvm-master-h, 380px);
  margin-top: 8px;
  cursor: default;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cvmInlineDockIn 0.18s ease;
}
.cvm-dock--inline .cvm-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.cvm-dock--inline[hidden] {
  display: none;
}
.cvm-dock--inline .cvm-body:empty {
  display: none;
}
.cvm-dock--inline .cvm-head {
  border-bottom: none;
}
.cvm-dock--inline .cvm-foot {
  padding: 14px 16px;
  border-top: none;
}
.cvm-dock:not(.cvm-dock--inline) .cvm-body:empty {
  display: none;
}
.cvm-dock:not(.cvm-dock--inline):has(> .cvm-body:empty) .cvm-head {
  border-bottom: none;
}
.cvm-dock:not(.cvm-dock--inline):has(> .cvm-body:empty) .cvm-foot {
  border-top: none;
  padding: 14px 16px;
}

@keyframes cvmInlineDockIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quick-reply chips (conversational follow-ups offered after a turn). */
.cvm-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
}
.cvm-quick-chip {
  padding: 6px 12px;
  border: 1px solid rgba(110, 138, 126, 0.34);
  border-radius: 999px;
  background: rgba(110, 138, 126, 0.08);
  color: #4A6157;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cvm-quick-chip:hover {
  background: rgba(110, 138, 126, 0.16);
}

html[data-theme="dark"] .cvm-dock,
html[data-theme="dark"] .cvm-dock--inline {
  background: #2A2520 !important;
  border-color: rgba(232, 224, 216, 0.16) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-head,
html[data-theme="dark"] .cvm-foot {
  border-color: rgba(232, 224, 216, 0.12) !important;
}
html[data-theme="dark"] .cvm-head-icon {
  background: rgba(125, 156, 142, 0.18) !important;
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-title,
html[data-theme="dark"] .cvm-new,
html[data-theme="dark"] .cvm-type-field {
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-subtitle,
html[data-theme="dark"] .cvm-close,
html[data-theme="dark"] .cvm-thinking,
html[data-theme="dark"] .cvm-old,
html[data-theme="dark"] .cvm-type-field::placeholder {
  color: #B8ADA3 !important;
}
html[data-theme="dark"] .cvm-close:hover {
  background: rgba(232, 224, 216, 0.08) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-bubble--bot {
  background: rgba(232, 224, 216, 0.08) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-bubble--user {
  background: #6F8D80 !important;
  color: #FFFEFB !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion {
  background: #322C26 !important;
  border-color: rgba(232, 224, 216, 0.14) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion svg {
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion:hover,
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion:focus-visible {
  background: rgba(232, 224, 216, 0.08) !important;
  border-color: rgba(183, 205, 193, 0.34) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion--primary {
  background: #6F8D80 !important;
  border-color: #6F8D80 !important;
  color: #FFFEFB !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion--primary svg {
  color: #FFFEFB !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn {
  border-color: transparent !important;
  color: rgba(232, 224, 216, 0.82) !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn {
  border-color: transparent !important;
  color: rgba(232, 224, 216, 0.82) !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn:hover,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn.done,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn.tts-playing,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn.active {
  background: rgba(232, 224, 216, 0.06) !important;
  border-color: transparent !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  outline: 1.5px solid rgba(232, 224, 216, 0.32) !important;
  outline-offset: -1.5px !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn:hover,
html[data-theme="dark"] .cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn:focus-visible {
  background: rgba(232, 224, 216, 0.06) !important;
  border-color: transparent !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-action-btn.done {
  background: rgba(232, 224, 216, 0.06) !important;
}
html[data-theme="dark"] .cvm-suggestion {
  background: #322C26 !important;
  border-color: rgba(232, 224, 216, 0.12) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-label,
html[data-theme="dark"] .cvm-listen,
html[data-theme="dark"] .cvm-result,
html[data-theme="dark"] .cvm-mic {
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-listen:hover,
html[data-theme="dark"] .cvm-mic:hover {
  background: rgba(125, 156, 142, 0.20) !important;
}
html[data-theme="dark"] .cvm-listen.loading {
  background: rgba(125, 156, 142, 0.16) !important;
}
html[data-theme="dark"] .cvm-listen.tts-playing,
html[data-theme="dark"] .cvm-listen.active {
  background: rgba(125, 156, 142, 0.26) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-listen.loading::after {
  border-color: rgba(183, 205, 193, 0.30) !important;
  border-top-color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-new-toggle {
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-new-toggle:hover {
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-no {
  background: #241F1B !important;
  border-color: rgba(232, 224, 216, 0.14) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-no:hover {
  background: rgba(232, 224, 216, 0.08) !important;
}
html[data-theme="dark"] .cvm-error {
  color: #E1A184 !important;
}
html[data-theme="dark"] .cvm-composer {
  background: #241F1B !important;
  border-color: rgba(232, 224, 216, 0.18) !important;
}
html[data-theme="dark"] .cvm-composer:focus-within {
  border-color: #B7CDC1 !important;
  box-shadow: 0 0 0 1px rgba(183, 205, 193, 0.32) !important;
}
html[data-theme="dark"] .cvm-mic.ss-mic--connecting {
  background: rgba(125, 156, 142, 0.22) !important;
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-mic.ss-mic--listening {
  background: rgba(125, 156, 142, 0.14) !important;
  color: #B7CDC1 !important;
  box-shadow: inset 0 0 0 1.5px rgba(183, 205, 193, 0.40) !important;
}
html[data-theme="dark"] .cvm-mic.ss-mic--error {
  background: rgba(225, 161, 132, 0.14) !important;
  color: #E1A184 !important;
}
html[data-theme="dark"] .cvm-type-send {
  background: #7D9C8E !important;
  color: #1F1B17 !important;
}
html[data-theme="dark"] .cvm-type-send:hover {
  background: #8EAD9F !important;
}
html[data-theme="dark"] .cvm-type-send:disabled {
  background: rgba(125, 156, 142, 0.28) !important;
  color: rgba(250, 245, 239, 0.68) !important;
}

/* Dark mode for inline-only trigger/chips; the shared dock surface is themed above. */
html[data-theme="dark"] .cvm-trigger {
  background: rgba(125, 156, 142, 0.16);
  border-color: rgba(125, 156, 142, 0.34);
  color: #B7CDC1;
}
html[data-theme="dark"] .cvm-trigger:hover {
  background: rgba(125, 156, 142, 0.24);
}
html[data-theme="dark"] .cvm-quick-chip {
  background: rgba(125, 156, 142, 0.14);
  border-color: rgba(125, 156, 142, 0.30);
  color: #B7CDC1;
}
html[data-theme="dark"] .cvm-quick-chip:hover {
  background: rgba(125, 156, 142, 0.22);
}

/* Mobile: the inline dock is panel-contained, so it just fills the form width with a
   shorter scroll cap — no overlap with Titel / Prompt / Annuller / Gem. */
@media (max-width: 600px) {
  .cvm-dock--inline {
    max-height: 60vh;
  }
}

/* Desktop sidecar: dock is a SIBLING of .chat-prompt-panel-inner on the PANEL,
   so each card has its own background/border. Grid lives on the panel, not the form.
   Mobile (<=640px) keeps the dock INSIDE the form for #3579 fullscreen integration. */
@media (min-width: 769px) {
  .chat-prompt-panel.chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) {
    display: grid !important;
    grid-template-columns: minmax(0, 640px) minmax(300px, 360px);
    grid-template-areas: "prompt dock";
    column-gap: 16px;
    align-items: start;
    justify-content: center;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) > .chat-prompt-panel-inner {
    grid-area: prompt;
    min-width: 0;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) > [data-calm-ai-dock] {
    grid-area: dock;
    align-self: start;
    margin: 0;
    min-width: 0;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) .cvm-dock--inline {
    max-height: var(--cvm-master-h, 440px);
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) .cvm-dock--inline .cvm-body {
    flex: 0 1 auto;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock]:not(.cvm-is-open)) > [data-calm-ai-dock] {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  /* #3448: mobile CVM bottom-sheet layout — replaces the old display:none guard.
     The fixed dock (Brief "Forbedr med AI") becomes a full-width bottom sheet
     above the mobile nav; the inline dock (prompt-builder) fills the panel width.
     The !important overrides reposition()'s inline style.left/top on the fixed
     dock so CSS owns the mobile layout without JS changes to the primitive. */
  .cvm-dock {
    position: fixed !important;
    top: auto !important;
    bottom: var(--mn-bar-height, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(60dvh, 400px);
    border-radius: 18px 18px 0 0;
    animation: cvmDockInMobile 0.2s ease;
  }
  html[dir="rtl"] .cvm-dock {
    animation-name: cvmDockInMobile;
  }
  body.chat-ny-in-conversation .cvm-dock {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cvm-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .chat-prompt-panel.chat-prompt-panel--with-ai-dock {
    max-height: calc(100dvh - var(--mn-bar-height, 60px) - 10px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* #3579: dock is now inside .chat-prompt-form */
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode [data-calm-ai-dock] {
    margin: 0 !important;
  }
  .chat-prompt-panel.chat-prompt-panel--with-ai-dock .cvm-dock--inline {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(42dvh, 320px);
  }

  /* #3448: hide mobile nav while ANY CVM dock is visible — one active task
     surface at a time. Fixed dock only exists in DOM while open; inline
     dock toggles [hidden]. */
  body:has(.cvm-dock:not(.cvm-dock--inline)) :is(#bb-mobile-nav, .mn-fab-group, .mn-more-sheet, .mn-more-backdrop),
  body:has(.cvm-dock--inline:not([hidden])) :is(#bb-mobile-nav, .mn-fab-group, .mn-more-sheet, .mn-more-backdrop) {
    display: none !important;
  }
  /* Nav hidden → dock claims the full bottom edge (conversation mode already
     has bottom: 0 via body.chat-ny-in-conversation above). */
  body:not(.chat-ny-in-conversation):has(.cvm-dock:not(.cvm-dock--inline)) .cvm-dock:not(.cvm-dock--inline) {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body:not(.chat-ny-in-conversation):has(.cvm-dock--inline:not([hidden])) .chat-prompt-panel {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  body:not(.chat-ny-in-conversation):has(.cvm-dock--inline:not([hidden])) .chat-prompt-panel.chat-prompt-panel--with-ai-dock {
    max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 10px);
  }
}

/* ---- Mobile fullscreen form-mode CVM integrated section (#3579) ---- */
@media (max-width: 640px) {
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-form > [data-calm-ai-dock] {
    margin: 20px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgb(236, 231, 223) !important;
    background: transparent !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-form > [data-calm-ai-dock] {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-dock--inline {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    animation: none !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-dock--inline .cvm-body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-close {
    display: none !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer {
    gap: 6px !important;
    border-color: #DAD2C6 !important;
    background: #FFFEFB !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-type-field {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 3px 2px !important;
    font-size: var(--font-size-sm) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-type-field:focus,
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-type-field:focus-visible {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer:focus-within {
    border-color: #6E8A7E !important;
    box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.12) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-mic {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    background: rgba(110, 138, 126, 0.12) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-type-send {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-type-send:disabled {
    background: rgba(110, 138, 126, 0.35) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-type-send:not(:disabled) {
    background: rgb(110, 138, 126) !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-dock--inline {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer {
    border-color: rgba(232, 224, 216, 0.16) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer:focus-within {
    border-color: rgba(110, 138, 126, 0.50) !important;
    box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.12) !important;
  }
}
@keyframes cvmDockInMobile {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Flash the field that just changed on "Ja, ret det" — a fading sage ring, so it
   never clobbers the field's themed background. */
.calm-letter--flash {
  animation: calmLetterFlash 0.9s ease;
}

@keyframes calmLetterFlash {
  0% { box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.35); }
  100% { box-shadow: 0 0 0 3px rgba(110, 138, 126, 0); }
}

/* Dark mode: the card's active hairline needs a slightly stronger sage so it reads
   on the dark card. */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2.cvm-card-active {
  border-color: rgba(110, 138, 126, 0.40);
}

/* #3101 — "+ Ny" add chip reduced-motion rule. Kept here, before the calm-brief
   reduced-motion block, so it is NOT the file's last `@media (prefers-reduced-
   motion: reduce)` — test-chat-calm-brief-view-contract.js targets that last one
   via lastIndexOf. */
@media (prefers-reduced-motion: reduce) {
  .chat-prompt-chip.chat-prompt-add {
    transition: none !important;
  }
}

/* ── Reduced motion: no card transition and no voice-revision pulse ── */
@media (prefers-reduced-motion: reduce) {
  #ss-ar-play.is-loading::after {
    animation: ss-ar-pulse 1s ease-in-out infinite;
  }

  .calm-task,
  #chat-main .calm-source-listen,
  #chat-main .calm-body-listen,
  #chat-main .calm-revise,
  #chat-main .calm-task-send {
    transition: none;
    animation: none;
  }

  /* #4406: no depleting-ring animation under reduced motion — the Fortryd stays available
     for the full window; the ring simply rests full. */
  .calm-undo-row.is-counting .calm-undo-ring__fill {
    animation: none;
  }

  /* #3065/#3137: the dock disables its slide-in, the mic pulse, and the field flash;
     text/state feedback (transcript, proposal, Rettet/Beholdt) is unaffected. The mic
     pulse now rides the shared ss-mic--listening state (was a local listening class). */
  .cvm-dock,
  .cvm-mic.ss-mic--listening,
  .calm-letter--flash {
    animation: none;
  }
  .cvm-listen.loading::after {
    animation: none;
  }
  .cvm-new-toggle-chevron {
    transition: none;
  }
  .cvm-listen,
  .cvm-yes,
  .cvm-no,
  .cvm-new-toggle {
    transition: none;
  }

  /* #3067: the Brief draft skeleton rests flat — no shimmer sweep. */
  .calm-letter--loading .calm-skel-line {
    animation: none;
    background-image: none;
  }

  /* #3125: this direct-mic spinner rule below uses !important, so the shared
     stt-tts-ui.css reduced-motion block cannot override it from the earlier
     stylesheet. Keep the direct reference calm at rest without introducing a
     later reduced-motion block; calm-brief tests intentionally anchor on this
     final block via lastIndexOf. */
  html body:has(#chat-app) #chat-direct-mic-btn.ss-mic--connecting::after {
    animation: none !important;
    border-color: rgba(74, 122, 104, 0.30) !important;
  }

  /* `html ` prefix raises specificity to (1,1,1) so this beats the later
     unconditional recording/processing rules (1,1,0) — otherwise equal
     specificity + both !important lets the later animated rule win and
     reduced-motion never actually silences the breathe. */
  html #chat-direct-mic-btn.ss-mic--recording,
  html #chat-mic-btn.ss-mic--recording,
  html #chat-direct-mic-btn.ss-mic--processing,
  html #chat-mic-btn.ss-mic--processing {
    animation: none !important;
  }

  /* chip-v2: welcome-chippens PRM-værn bor nu i chat-input.css-basen
     (overriden er pensioneret) — ingen #chat-direct-file-preview-entries her */
  .ss-sentence,
  #ss-adv-opt,
  .ar-btn {
    transition: none;
  }

  #ss-voice-popover .ssg-chip,
  #ss-adv-section .ss-adv-card,
  #ss-adv-section .ss-adv-toggle,
  #ss-adv-section .ss-adv-toggle::after {
    transition-duration: 0s !important;
  }

  .chat-input-box .chat-stt-interim--visible .w {
    animation: none !important;
    filter: blur(2.75px);
  }
  .chat-input-box .chat-stt-interim--visible .w.newest {
    animation: none !important;
  }

  /* Dictation caret mark rests steady instead of blinking. */
  .chat-input-box .chat-stt-interim--visible::after {
    animation: none !important;
    opacity: 1;
  }
}

/* The active dictation signal is ONE thing: a solid sage circle whose fill
   breathes very gently in opacity. No expanding bubble-ring, no box-shadow glow
   pulse, no icon scale — Morten 2026-07-07 rejected that 4-animation stack as
   "not Apple's simplicity". */
@keyframes calm-mic-live {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}

@keyframes calm-mic-spin {
  to { transform: rotate(360deg); }
}

/* Direct welcome mic only: calm sage STT motion without touching other .ss-mic buttons. */
#chat-direct-mic-btn.ss-mic.ss-mic--connecting {
  pointer-events: none !important;
}

#chat-direct-mic-btn.ss-mic--connecting::after {
  border-top-color: #4A7A68 !important;
  border-inline-end-color: rgba(74, 122, 104, .16) !important;
  border-bottom-color: rgba(74, 122, 104, .16) !important;
  border-inline-start-color: rgba(74, 122, 104, .16) !important;
  animation: calm-mic-spin .85s cubic-bezier(.4, 0, .2, 1) infinite !important;
}

#chat-direct-mic-btn.ss-mic--listening svg {
  color: #4A7A68 !important;
  stroke: #4A7A68 !important;
}

/* Recording — welcome mic: solid sage circle, white glyph, one gentle breathe. */
#chat-direct-mic-btn.ss-mic--recording {
  animation: calm-mic-live 2.4s ease-in-out infinite !important;
  /* Theme-STABLE sage literal: the --sage-dark token flips to #7CB8A4 in dark,
     dropping the white glyph to ~2.2:1. #4A7A68 keeps white readable (~4.7:1). */
  background: #4A7A68 !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.16) !important;
  position: relative !important;
}

#chat-direct-mic-btn.ss-mic--recording svg {
  color: #FFFEFB !important;
  stroke: #FFFEFB !important;
  transform-origin: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Recording — conversation mic: same calm canon. */
#chat-mic-btn.ss-mic--recording {
  animation: calm-mic-live 2.4s ease-in-out infinite !important;
  /* Theme-STABLE sage literal — see #chat-direct-mic-btn.ss-mic--recording. */
  background: #4A7A68 !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.16) !important;
  position: relative !important;
}

#chat-mic-btn.ss-mic--recording svg {
  color: #FFFEFB !important;
  stroke: #FFFEFB !important;
  transform-origin: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Processing — a quiet static sage tint, no motion of its own. */
#chat-direct-mic-btn.ss-mic--processing {
  background: rgba(74, 122, 104, 0.10) !important;
}

#chat-direct-mic-btn.ss-mic--processing svg {
  color: #4A7A68 !important;
  stroke: #4A7A68 !important;
  transform-origin: center !important;
}

#chat-mic-btn.ss-mic--processing {
  background: rgba(74, 122, 104, 0.10) !important;
}

#chat-mic-btn.ss-mic--processing svg {
  color: #4A7A68 !important;
  stroke: #4A7A68 !important;
  transform-origin: center !important;
}

#chat-direct-mic-btn:not(.ss-mic--recording):not(.ss-mic--processing),
#chat-mic-btn:not(.ss-mic--recording):not(.ss-mic--processing) {
  background: transparent !important;
  animation: none !important;
  box-shadow: none !important;
}

/* 2026-07-07 bugfix — "mic glyph is gray when active". The composer's own
   `.input-card ... .ss-mic svg *` ink rules (light #6B5B4E, dark
   var(--color-text-secondary)) carry !important and higher specificity than the
   active-state glyph rules above, which target `svg` (not `svg *`). So the paths
   stayed gray: recording rendered a sage circle with a GRAY mic, and
   listening/processing lost their sage tint too. These state-qualified rules
   mirror the ink rules' selector depth and add the state class, so they win on
   `svg` AND `svg *`. Recording = crisp white glyph on the sage circle;
   listening/processing = legible sage (a lighter sage in dark for contrast on the
   transparent / tinted circle). Values match the pinned canon above.

   2026-07-07 follow-up — the STT flow applies BOTH `ss-mic--listening` AND
   `ss-mic--recording` at once during capture (chat-stt.js). The recording (white)
   and listening (sage) rules below have EQUAL specificity, so source order made
   listening win — the glyph took the sage `#4A7A68`, which in light mode is the
   exact color of the recording circle => an INVISIBLE glyph (dark mode: low
   contrast). Fix: the listening/processing rules are scoped `:not(.ss-mic--recording)`
   so recording always wins while the mic is actually recording. Keep that guard. */
html body .input-card #chat-direct-mic-btn.ss-mic--recording svg,
html body .input-card #chat-direct-mic-btn.ss-mic--recording svg *,
html body .input-card #chat-mic-btn.ss-mic--recording svg,
html body .input-card #chat-mic-btn.ss-mic--recording svg * {
  color: #FFFEFB !important;
  stroke: #FFFEFB !important;
  fill: none !important;
}

html body .input-card #chat-direct-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg,
html body .input-card #chat-direct-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg *,
html body .input-card #chat-direct-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg,
html body .input-card #chat-direct-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg *,
html body .input-card #chat-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg,
html body .input-card #chat-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg *,
html body .input-card #chat-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg,
html body .input-card #chat-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg * {
  color: #4A7A68 !important;
  stroke: #4A7A68 !important;
  fill: none !important;
}

html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn.ss-mic--recording svg,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn.ss-mic--recording svg *,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-mic-btn.ss-mic--recording svg,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-mic-btn.ss-mic--recording svg * {
  color: #FFFEFB !important;
  stroke: #FFFEFB !important;
  fill: none !important;
}

html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg *,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-direct-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg *,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-mic-btn.ss-mic--listening:not(.ss-mic--recording) svg *,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg,
html[data-theme="dark"] body:not(.chat-ny-in-conversation):not(#_calm) .input-card #chat-mic-btn.ss-mic--processing:not(.ss-mic--recording) svg * {
  color: #7CB8A4 !important;
  stroke: #7CB8A4 !important;
  fill: none !important;
}

/* chip-v2 (19/7): welcome-chippens skin-override er PENSIONERET — chippen har
   nu ét fælles token-drevet sprog m. dark-tvillinger i chat-input.css (bug 1:
   denne override var hardcodet lys m. !important og vandt over alt i dark).
   Kun welcome-preview-ALIGNMENTEN bor stadig her (rytmen mod input-kortet). */
#chat-direct-file-preview.chat-file-preview {
  gap: 8px !important;
  padding: 0 0 10px 0 !important;
}

/* ============================================================================
   #3101 — "+ Ny" saved-prompt add chip: a transparent sage "ghost" create
   affordance, visually distinct from the filled category chips. The resting and
   hover colours live in the welcome cascade above (next to the !important fill
   rules they have to defeat); these are the remaining states — keyboard focus,
   press and dark mode. (The reduced-motion rule is kept earlier in the file so it
   is not the last reduced-motion block — see the note there.) All use the compound
   `.chat-prompt-chip.chat-prompt-add` selector + !important to win over the
   `#chat-main button` reset and the active welcome / dark `.chat-prompt-chip`
   !important rules.
   ============================================================================ */

/* Keyboard focus ring (WCAG 2.4.7) — the same warm ring used elsewhere here. */
.chat-prompt-chip.chat-prompt-add:focus-visible {
  outline: 2px solid #5C4D43 !important;
  outline-offset: 2px !important;
}

/* Press feedback (matches the other chips' :active). */
.chat-prompt-chip.chat-prompt-add:active {
  transform: scale(0.97);
}

/* High-specificity guard: the global chat typography reset uses
   `body:has(#chat-app) .chat-prompt-chip` with !important, so keep the "+ Ny"
   chip semibold in the actual runtime cascade. */
#chat-main .chat-prompt-chip.chat-prompt-add,
body:has(#chat-app) .chat-prompt-chip.chat-prompt-add {
  font-weight: var(--font-weight-semibold) !important;
}

/* Dark mode: keep the transparent dashed-sage ghost, lightened for contrast on
   the dark warm background (the dark `.chat-prompt-chip` rule otherwise fills it
   with a solid slab via !important). */
[data-theme="dark"] .chat-prompt-chip.chat-prompt-add,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip.chat-prompt-add {
  background: transparent !important;
  border: 1.5px dashed rgba(138, 170, 156, 0.5) !important;
  color: #8FB3A4 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .chat-prompt-chip.chat-prompt-add svg {
  color: currentColor !important;
  opacity: 0.9;
}

[data-theme="dark"] .chat-prompt-chip.chat-prompt-add:hover,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-chip.chat-prompt-add:hover {
  background: rgba(138, 170, 156, 0.14) !important;
  border-color: rgba(138, 170, 156, 0.8) !important;
  color: #AED0C1 !important;
}

/* The light-mode #5C4D43 focus ring would fail contrast on the dark background,
   so use the app's brighter dark focus-ring colour (matches the chat focus-ring
   contract). */
[data-theme="dark"] .chat-prompt-chip.chat-prompt-add:focus-visible {
  outline-color: #7CB8A4 !important;
}

/* Read-aloud voice chooser (#chat-oplaeser-voice-chooser).
   A quiet chevron after each assistant .ss-play opens one body-portaled
   Mads/Sofie popover that mirrors the Skrivebord overflow voice toggle. */
.ss-voice-name {
  align-self: center;
  margin-block: 0; margin-inline: -2px 2px;
  font-size: var(--font-size-xs);
  line-height: 1;
  color: var(--warm-text, #5c4d43);
  white-space: nowrap;
  cursor: pointer;
}

/* Oversaet — translate action + its subordinate result (#chat-oversaet). A faint warm wash +
   a quiet whisper-label set the translation apart from its Danish reply (no inset bar, per canon).
   16px = the action-row glyph scale (copy/play run 16 in the same 28px boxes; the 17px outlier
   rendered translate visibly heavier than its siblings — form-lens 12/7). */
.ss-translate svg {
  width: 16px;
  height: 16px;
}
.ss-translate.busy {
  opacity: 0.5;
  pointer-events: none;
}
/* While a reply is translating, dim copy + read-aloud so they can't act on the Danish
   original — the English isn't ready yet (#chat-uxpolish). Translate button + voice caret
   stay active. */
.ss-translating .chat-msg-action-btn:not(.ss-translate) {
  opacity: 0.45;
  pointer-events: none;
}
/* The conversation-mode "action buttons always visible" rule forces opacity:1 !important
   (specificity 0,4,1); this (0,5,1, via .chat-msg-actions) wins so the VISIBLE fade actually
   shows while translating, then restores. (#chat-dimfade) */
body.chat-ny-in-conversation .chat-msg-actions.ss-translating .chat-msg-action-btn:not(.ss-translate) {
  opacity: 0.45 !important;
}
.ss-translation {
  margin-top: 10px;
  padding: 10px 14px 12px;
  background: #f6f1e8;
  border-radius: 12px;
}
.ss-tr-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--warm-text, #5c4d43);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.ss-tr-note {
  font-size: var(--font-size-xs);
  color: var(--warm-text, #5c4d43);
  margin: 0 0 6px;
}
.ss-tr-body {
  color: var(--warm-text, #5c4d43);
  /* Same block rhythm as the reply itself: the received bubble lays out its blocks with
     grid gap 12px (chat-messages.css). Without this, translated paragraphs/lists butt
     together. The content typography (lists, headings, code, tables) reaches in via the
     :is(.chat-bubble, .ss-tr-body) scope extensions there. (#chat-oversaet-typography) */
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
/* Dark mode: the panel background (#f6f1e8) is a hardcoded light cream, but in dark theme
   --warm-text flips to a light beige (#e8ddd4) — so the label + translated body rendered
   near-invisible light-on-light (Morten screenshot 2026-07-08). Give the inset a warm
   raised dark surface (above the #171512 page) so the English reads with the same contrast
   as the Danish original. The hairline uses an inset shadow, not a border, so padding/box
   size stay identical to light mode (no layout shift). (#chat-oversaet-dark) */
[data-theme="dark"] .ss-translation {
  background: #221d19;
  box-shadow: inset 0 0 0 1px rgba(232, 221, 212, 0.10);
}

.ss-voice-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 28px;
  margin-inline-start: -3px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #646e78);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  /* #3815: every .chat-msg-action-btn carries an absolutely positioned ::before hit
     target (inset:-8px, chat-messages.css), and positioned boxes hit-test above static
     content — so .ss-play's invisible right extension swallowed this caret's left ~7px.
     Stack the caret above that extension so it owns its whole visible box. */
  position: relative;
  z-index: 1;
}

/* #3815: the caret's own forgiveness zone. Top/right/bottom match the 8px action-button
   reach; left stays at the border box so the play button's visible box is never claimed.
   No min-width here — a left-anchored min-width would overflow back over .ss-play the
   same way the play ::before does. */
.ss-voice-caret::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  inset-inline-end: -8px;
  inset-inline-start: 0;
}

.ss-voice-caret svg {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

body.chat-ny-in-conversation .chat-message.received .ss-voice-caret,
body.chat-ny-in-conversation .chat-message.assistant .ss-voice-caret,
body.chat-ny-in-conversation .chat-message--assistant .ss-voice-caret {
  color: var(--warm-text, #5C4D43);
}

.ss-voice-caret:hover {
  background: rgba(110, 138, 126, 0.14);
  color: rgb(74, 97, 87);
}

#chat-main .ss-voice-caret:hover {
  background: rgba(110, 138, 126, 0.14);
  color: rgb(74, 97, 87);
}

.ss-voice-caret:active {
  background: rgba(110, 138, 126, 0.22);
}

#chat-main .ss-voice-caret:active {
  background: rgba(110, 138, 126, 0.22);
}

.ss-voice-caret:focus-visible {
  outline: none;
  background: rgba(110, 138, 126, 0.14);
  color: rgb(74, 97, 87);
  box-shadow: 0 0 0 2px rgba(110, 138, 126, 0.45);
}

#chat-main .ss-voice-caret:focus-visible {
  outline: none;
  background: rgba(110, 138, 126, 0.14);
  color: rgb(74, 97, 87);
  box-shadow: 0 0 0 2px rgba(110, 138, 126, 0.45);
}

.ss-voice-caret[aria-expanded="true"] {
  background: rgba(110, 138, 126, 0.18);
  color: rgb(74, 97, 87);
}

#chat-main .ss-voice-caret[aria-expanded="true"] {
  background: rgba(110, 138, 126, 0.18);
  color: rgb(74, 97, 87);
}

.ss-voice-caret[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#chat-main .ss-voice-caret[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

[data-theme="dark"] .ss-voice-caret:hover,
[data-theme="dark"] .ss-voice-caret[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: #E8DDD4;
}

[data-theme="dark"] #chat-main .ss-voice-caret:hover,
[data-theme="dark"] #chat-main .ss-voice-caret[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: #E8DDD4;
}

[data-theme="dark"] .ss-voice-caret:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  color: #E8DDD4;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] #chat-main .ss-voice-caret:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  color: #E8DDD4;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

#ss-voice-popover {
  --ss-voice-label-fs: 11px;
  --ss-voice-chip-fs: 13px;
  --ss-voice-adv-title-fs: 13px;
  --ss-voice-fw-medium: 500;
  --ss-voice-fw-semibold: 600;
  display: none;
  position: fixed;
  z-index: 60;
  width: 288px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 0;
  padding: 10px;
  overflow: visible;
  background: #FFFEFB;
  border: 1px solid #E9DED4;
  border-radius: 12px;
  box-shadow:
    0 10px 28px rgba(58, 47, 38, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.70);
}

#ss-voice-popover:not([hidden]) {
  display: flex;
}

#ss-voice-popover .vp-label {
  color: #8A7E72;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0 2px;
}

#ss-voice-popover .ss-voice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
}

#ss-voice-popover .ssg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#ss-voice-popover .ssg-label {
  font-size: var(--ss-voice-label-fs);
  font-weight: var(--ss-voice-fw-semibold);
  color: rgb(169, 158, 145);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline-start: 1px;
}

#ss-voice-popover .ssg-label svg {
  opacity: .65;
}

#ss-voice-popover .ssg-track {
  display: flex;
  gap: 0;
  padding: 3px;
  background: #F1ECE4;
  border-radius: 10px;
}

#ss-voice-popover .ssg-chip {
  position: relative;
  flex: 1;
  border: 0;
  background: transparent;
  color: #8A7E72;
  font-size: var(--ss-voice-chip-fs);
  font-weight: var(--ss-voice-fw-medium);
  border-radius: 7px;
  padding: 7px 4px;
  cursor: pointer;
  transition: color .14s ease;
}

#ss-voice-popover .ssg-chip:not(:first-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 13px;
  width: 1px;
  background: rgba(138, 126, 114, .20);
}

#ss-voice-popover .ssg-chip[aria-checked="true"]::before,
#ss-voice-popover .ssg-chip[aria-checked="true"] + .ssg-chip::before {
  display: none;
}

#ss-voice-popover .ssg-chip:hover {
  color: #5B5046;
}

#ss-voice-popover .ssg-chip[aria-checked="true"] {
  background: #FFFEFB;
  color: #4A7A68;
  font-weight: var(--ss-voice-fw-semibold);
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.10);
}

#ss-voice-popover .ssg-chip:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 2px;
}

[data-theme="dark"] #ss-voice-popover {
  background: rgba(42, 38, 34, 1);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] #ss-voice-popover .vp-label {
  color: rgba(232, 221, 212, 0.55);
}

[data-theme="dark"] #ss-voice-popover .ssg-label {
  color: rgba(232, 221, 212, 0.48);
}

[data-theme="dark"] #ss-voice-popover .ssg-track {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] #ss-voice-popover .ssg-chip {
  color: rgba(232, 221, 212, 0.55);
}

[data-theme="dark"] #ss-voice-popover .ssg-chip:not(:first-child)::before {
  background: rgba(232, 221, 212, 0.16);
}

[data-theme="dark"] #ss-voice-popover .ssg-chip:hover {
  color: rgba(232, 221, 212, 0.82);
}

[data-theme="dark"] #ss-voice-popover .ssg-chip[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: #7FBAA8;
  box-shadow: 0 0 0 1px rgba(110, 138, 126, 0.30);
}

/* ── Advanced reader toggle (#3503) ── */

#ss-adv-section {
  display: flex;
  border-top: none;
  margin-top: 14px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

#ss-adv-section .ss-adv-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  transition: color .15s ease;
}

#ss-adv-section .ss-adv-card:hover {
  background: transparent;
  box-shadow: none;
}

#ss-adv-section .ss-adv-card[disabled],
#ss-adv-section .ss-adv-card[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

#ss-adv-section .ss-adv-card:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 2px;
}

#ss-adv-section .ss-adv-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A7A68;
  color: #fff;
}

#ss-adv-section .ss-adv-txt {
  flex: 1;
  min-width: 0;
  text-align: start;
}

#ss-adv-section .ss-adv-title {
  font-size: var(--ss-voice-adv-title-fs);
  font-weight: var(--ss-voice-fw-semibold);
  color: #3C5C4F;
  line-height: 1.2;
}

#ss-adv-section .ss-adv-toggle {
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #CBBFB2;
  position: relative;
  transition: background .15s ease;
}

#ss-adv-section .ss-adv-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform .15s ease;
}

#ss-adv-section .ss-adv-card[aria-checked="true"] .ss-adv-toggle {
  background: #4A7A68;
}

#ss-adv-section .ss-adv-card[aria-checked="true"] .ss-adv-toggle::after {
  transform: translateX(14px);
}
/* RTL: knappen glider mod inline-end = venstre - transform har ingen logisk form. */
[dir="rtl"] #ss-adv-section .ss-adv-card[aria-checked="true"] .ss-adv-toggle::after { transform: translateX(-14px); }

[data-theme="dark"] #ss-adv-section .ss-adv-card {
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] #ss-adv-section .ss-adv-card:hover {
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] #ss-adv-section .ss-adv-title {
  color: #A9D0C1;
}

[data-theme="dark"] #ss-adv-section .ss-adv-toggle {
  background: rgba(232, 221, 212, 0.28);
}

[data-theme="dark"] #ss-adv-section .ss-adv-card[aria-checked="true"] .ss-adv-toggle {
  background: #4A7A68;
}

/* ── Sticky reader bar (#3503) ── */

#ss-adv-reader {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  height: 64px;
  max-width: calc(100vw - 28px);
  box-sizing: border-box;
  gap: 10px;
  padding: 8px 14px;
  background: #FFFEFB;
  border: none;
  border-radius: 16px;
  box-shadow: rgba(58, 47, 38, 0.18) 0px 8px 28px 0px;
  font-family: var(--font-family);
  color: #3A2F26;
  user-select: none;
  overflow: visible;
  /* Media transport order and glyphs are physical controls, not document navigation. */
  direction: ltr;
}

#ss-adv-reader.hidden {
  display: none;
}

.ar-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 38px;
  cursor: grab;
  color: #6f6457;
  touch-action: none;
  flex-shrink: 0;
}

.ar-grip:active {
  cursor: grabbing;
}

.ar-btn {
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: #F4F0EB;
  color: #3A2F26;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  flex-shrink: 0;
}

.ar-btn:hover {
  background: #EFE8E1;
}

.ar-btn:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 2px;
}

.ar-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.ar-icon-grip {
  width: 16px;
  height: 22px;
}

#ss-ar-play.ar-play {
  width: 46px;
  height: 46px;
  background: #4A7A68;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--font-size-base);
}

#ss-ar-play.ar-play .ar-icon {
  width: 24px;
  height: 24px;
}

#ss-ar-play.ar-play:hover {
  background: #3f6b5b;
  border-color: #3f6b5b;
}

.ar-sep {
  width: 1px;
  height: 28px;
  background: rgba(228, 220, 212, 0.7);
  flex-shrink: 0;
}

.ar-settings {
  display: flex;
  align-items: center;
  height: 42px;
  min-width: 166px;
  gap: 12px;
  background: #F8F4EF;
  border: 1px solid #E3D8CE;
  border-radius: 9px;
  padding: 0 12px;
  box-sizing: border-box;
}

.ar-settings > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  gap: 2px;
}

.ar-cap {
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8A7E72;
  line-height: 1;
}

#ss-adv-reader select {
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #3A2F26;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  padding: 0 2px;
  cursor: pointer;
}

.ar-settings select {
  border-style: none !important;
  background: transparent !important;
  text-align: center;
}

.ar-settings select:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 1px;
}

.ar-settings-div {
  width: 1px;
  height: 28px;
  background: rgba(228, 220, 212, 0.5);
  flex-shrink: 0;
}

/* ── Custom dropdowns (#3523) ── */

.ss-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ss-dd {
  position: relative;
}

.ss-dd-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: #3A2F26;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

.ss-dd-btn:hover {
  background: rgba(58, 47, 38, 0.06);
}

.ss-dd-btn:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 1px;
}

.ss-dd-caret {
  width: 0;
  height: 0;
  border-inline-start: 3.5px solid transparent;
  border-inline-end: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

.ss-dd-list {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  min-width: 72px;
  padding: 4px 0;
  background: #FFFEFB;
  border: 1px solid #E3D8CE;
  border-radius: 8px;
  box-shadow: rgba(58, 47, 38, 0.14) 0px 6px 20px 0px;
  list-style: none;
  z-index: 100001;
}

.ss-dd-list[data-open] {
  display: block;
}

.ss-dd-opt {
  display: block;
  padding: 6px 14px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: #3A2F26;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
}

.ss-dd-opt:hover {
  background: rgba(58, 47, 38, 0.06);
}

.ss-dd-opt:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: -2px;
}

.ss-dd-opt[aria-selected="true"] {
  color: #4A7A68;
  background: rgba(74, 122, 104, 0.16);
}

/* ── Play button loading spinner (#3523) ── */

#ss-ar-play.is-loading {
  position: relative;
  pointer-events: none;
}

#ss-ar-play.is-loading .ar-icon {
  opacity: 0;
}

#ss-ar-play.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  translate: -50% -50%; /* retningsneutral centrering; komponerer med rotate-animationen (transform roeres ikke) */
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
  animation: ss-ar-spin 0.6s linear infinite;
}

@keyframes ss-ar-spin {
  to { transform: rotate(360deg); }
}

@keyframes ss-ar-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

/* ── Sentence highlighting (#3503, clone fix #3523) ── */

.ss-sentence {
  border-radius: 5px;
  scroll-margin-top: 140px;
  transition: background .15s ease;
}

body.ss-ar-active .ss-sentence {
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 1px 3px;
  margin: 0 -1px;
  border-radius: 5px;
  box-shadow: none;
}

body.ss-ar-active .ss-sentence:focus-visible {
  outline: 2px solid #4A7A68;
  outline-offset: 2px;
}

body.ss-ar-active .ss-sentence:hover {
  background: rgba(74, 122, 104, 0.09);
}

.ss-sentence.ss-ar-now,
.ss-sentence.ss-ar-highlight {
  background: rgba(74, 122, 104, 0.18);
}

/* ── Dark mode reader (#3503) ── */

[data-theme="dark"] #ss-adv-reader {
  background: rgba(42, 38, 34, 1);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: rgba(0, 0, 0, 0.40) 0px 8px 28px 0px;
  color: #E8DDD4;
}

[data-theme="dark"] .ar-btn {
  background: rgba(42, 38, 34, 1);
  color: #E8DDD4;
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .ar-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] #ss-ar-play.ar-play {
  background: #4A7A68;
  color: #fff;
  border-color: #4A7A68;
}

[data-theme="dark"] .ar-sep,
[data-theme="dark"] .ar-settings-div {
  background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .ar-settings {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .ar-cap {
  color: rgba(232, 221, 212, 0.45);
}

[data-theme="dark"] #ss-adv-reader select {
  background: transparent;
  color: #E8DDD4;
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .ss-dd-btn {
  color: #E8DDD4;
}

[data-theme="dark"] .ss-dd-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ss-dd-list {
  background: rgba(42, 38, 34, 1);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: rgba(0, 0, 0, 0.40) 0px 6px 20px 0px;
}

[data-theme="dark"] .ss-dd-opt {
  color: #E8DDD4;
}

[data-theme="dark"] .ss-dd-opt:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ss-dd-opt[aria-selected="true"] {
  color: #7FBAA8;
  background: rgba(127, 186, 168, 0.16);
}

[data-theme="dark"] .ss-sentence.ss-ar-now,
[data-theme="dark"] .ss-sentence.ss-ar-highlight {
  background: rgba(74, 122, 104, 0.18);
  box-shadow: none;
}

[data-theme="dark"] body.ss-ar-active .ss-sentence:hover {
  background: rgba(74, 122, 104, 0.09);
  box-shadow: none;
}

@media (max-width: 600px) {
  #ss-adv-reader #ss-ar-settings,
  #ss-adv-reader .ar-sep {
    display: none !important;
  }
}

/* == Sofia email embed modal: room for the real bb-compose ==
   The [EMBED:email] iframe now hosts the full /email/ compose (bb-compose-main +
   bb-compose-sofia). The Sofia panel gates on a 1200px iframe viewport (same
   matchMedia as /email/), so the email modal must outgrow the 640px default.
   Base modal styles live in /embeds/embed.css (shared surface) — this app-owned
   override sizes the email pillar only. */
.ss-embed-modal.ss-embed-modal-email {
  width: min(1240px, calc(100vw - 32px));
  height: min(860px, calc(100vh - 48px));
}

.ss-embed-modal-email-open.ss-embed-modal-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(92, 77, 67, 0.24);
}

.ss-embed-modal-email-open .ss-embed-modal.ss-embed-modal-email {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: auto !important;
}

.ss-embed-modal-email-open .ss-embed-modal-email .ss-embed-modal-header {
  display: none !important;
}

.ss-embed-modal-email-open .ss-embed-modal-email .ss-embed-modal-body {
  background: transparent !important;
}

/* == Email embed skeleton: composer silhouette ==
   With the modal chrome transparent, the generic skeleton bars float on the
   blurred chat. The email variant paints the bb-compose silhouette instead:
   a centered warm card (980px, like .with-sofia) split into the main pane and
   the 320px Sofia rail, with calm placeholder bars. Atom classes (-field,
   -label, -value, -line, -btn) and the opacity pulse come from /embeds/embed.css;
   this block re-skins them warm and adds the two-pane shell. */
.ss-embed-modal-email .ss-embed-skeleton {
  padding: 0;
  background: transparent;
}

.ss-embed-skeleton-compose {
  box-sizing: border-box;
  width: min(980px, 100%);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: rgb(255, 253, 249);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(31, 31, 30, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ss-embed-skeleton-pane-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 20px;
}

.ss-embed-modal-email .ss-embed-skeleton-field {
  border-bottom: 1px solid rgba(92, 77, 67, 0.08);
}

.ss-embed-modal-email .ss-embed-skeleton-footer {
  border-top: 1px solid rgba(92, 77, 67, 0.08);
}

.ss-embed-modal-email .ss-embed-skeleton-label,
.ss-embed-modal-email .ss-embed-skeleton-value,
.ss-embed-modal-email .ss-embed-skeleton-line,
.ss-embed-modal-email .ss-embed-skeleton-btn,
.ss-embed-skeleton-chip,
.ss-embed-skeleton-ask {
  background: rgba(92, 77, 67, 0.1);
}

.ss-embed-modal-email .ss-embed-skeleton-btn {
  width: 96px;
  height: 36px;
  border-radius: 999px;
}

.ss-embed-skeleton-pane-sofia {
  box-sizing: border-box;
  flex: 0 0 320px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 56px 20px 20px;
  background: linear-gradient(180deg, rgba(250, 247, 243, 0.95) 0%, rgba(255, 253, 251, 0.9) 100%);
  border-inline-start: 1px solid rgba(228, 220, 212, 0.4);
}

.ss-embed-skeleton-chip {
  height: 44px;
  border-radius: 12px;
  animation: ss-skeleton-pulse 1.2s ease-in-out infinite;
}

.ss-embed-skeleton-chip:nth-child(2) { animation-delay: .15s; }
.ss-embed-skeleton-chip:nth-child(3) { animation-delay: .3s; }

.ss-embed-skeleton-ask {
  height: 44px;
  border-radius: 999px;
  margin-top: auto;
  animation: ss-skeleton-pulse 1.2s ease-in-out infinite;
  animation-delay: .45s;
}

/* Below the Sofia gate (1200px iframe viewport ≈ 1232px browser) the real
   composer drops the Sofia rail and fills the iframe — mirror that. */
@media (max-width: 1231px) {
  .ss-embed-skeleton-compose {
    width: 100%;
    border-radius: 0;
  }

  .ss-embed-skeleton-pane-sofia {
    display: none;
  }
}

[data-theme="dark"] .ss-embed-skeleton-compose {
  background: rgb(42, 38, 34);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ss-embed-modal-email .ss-embed-skeleton-field {
  border-bottom-color: rgba(232, 221, 212, 0.1);
}

[data-theme="dark"] .ss-embed-modal-email .ss-embed-skeleton-footer {
  border-top-color: rgba(232, 221, 212, 0.1);
}

[data-theme="dark"] .ss-embed-modal-email .ss-embed-skeleton-label,
[data-theme="dark"] .ss-embed-modal-email .ss-embed-skeleton-value,
[data-theme="dark"] .ss-embed-modal-email .ss-embed-skeleton-line,
[data-theme="dark"] .ss-embed-modal-email .ss-embed-skeleton-btn,
[data-theme="dark"] .ss-embed-skeleton-chip,
[data-theme="dark"] .ss-embed-skeleton-ask {
  background: rgba(232, 221, 212, 0.1);
}

[data-theme="dark"] .ss-embed-skeleton-pane-sofia {
  background: linear-gradient(180deg, rgba(48, 43, 38, 0.95) 0%, rgba(42, 38, 34, 0.9) 100%);
  border-inline-start-color: rgba(232, 221, 212, 0.12);
}

@media (max-width: 768px) {
  .ss-embed-modal-email-open.ss-embed-modal-open {
    align-items: center !important;
    justify-content: center !important;
  }

  .ss-embed-modal.ss-embed-modal-email {
    width: 100vw;
    height: calc(100vh - 16px);
  }
}

/* Live dictation preview (inline interim ghost): the skin lives in
   /assets/css/stt-ghost.css (one source of truth for every robot mic).
   Chat-local crutches below: ID-specificity growth rule + (further down in
   the canonical reduced-motion block) the !important stills. */
.chat-input-box--welcome[data-mobile-native-composer="1"] .chat-stt-interim {
  display: none !important;
}

/* ============================================================
   PUBLIC-FORK APPENDIX (magnet parity 2026-07-06)
   Rules only used by the public marketing chat (/chatgpt-dansk/):
   .ss-public-chat scope + legacy demo surfaces (sofia-demo.js,
   superapp-flow.js, index.html demo markup, public-chat-gate.js).
   Everything above this line stays byte-identical to the app's
   chat/css/chat-ny-blod-bolge.css - add fork edits BELOW only.
   ============================================================ */

  .ss-scroll-fab:focus-visible {
    outline: none;
    outline-offset: 2px;
  }

  .card--todo {
    background: linear-gradient(135deg, #FDF7F3 0%, #F4E8E2 100%);
    border-color: rgba(244, 232, 226, 0.8);
  }

  .card--email {
    background: linear-gradient(135deg, #F5FAF7 0%, #E0EDE6 100%);
    border-color: rgba(224, 237, 230, 0.8);
  }

  .card--email .card-items {
    gap: 16px;
  }

  .card--email .card-item {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(168, 197, 184, 0.24);
    border-radius: 14px;
    background: rgba(255, 254, 251, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  .card--email .card-item--ai {
    background: linear-gradient(135deg, rgba(255, 254, 251, 0.78), rgba(224, 237, 230, 0.52));
    border-color: rgba(168, 197, 184, 0.34);
  }

  .card--email .card-item--unread {
    background: rgba(255, 254, 251, 0.82);
    border-color: rgba(168, 197, 184, 0.48);
  }

  .card--email .card-item--quiet {
    opacity: 0.86;
  }

  .card--email .card-item-dot--pulse {
    box-shadow: 0 0 0 4px rgba(168, 197, 184, 0.18);
  }

  .card--calendar {
    background: linear-gradient(135deg, #F5F7FC 0%, #E0E4EE 100%);
    border-color: rgba(224, 228, 238, 0.8);
  }

  .card--todo .card-count::after {
    background: var(--rose);
    box-shadow: 0 0 6px rgba(212, 168, 154, 0.5);
  }

  .card--email .card-count::after {
    background: var(--sage);
    box-shadow: 0 0 6px rgba(168, 197, 184, 0.5);
  }

  .card--calendar .card-count::after {
    background: var(--slate);
    box-shadow: 0 0 6px rgba(168, 176, 196, 0.5);
  }

  .card--todo .card-divider {
    background: linear-gradient(90deg, rgba(212, 168, 154, 0.18) 0%, rgba(212, 168, 154, 0.58) 14%, rgba(212, 168, 154, 0.58) 86%, rgba(212, 168, 154, 0.18) 100%);
  }

  .card--email .card-divider {
    background: linear-gradient(90deg, rgba(168, 197, 184, 0.18) 0%, rgba(168, 197, 184, 0.58) 14%, rgba(168, 197, 184, 0.58) 86%, rgba(168, 197, 184, 0.18) 100%);
  }

  .card--calendar .card-divider {
    background: linear-gradient(90deg, rgba(168, 176, 196, 0.18) 0%, rgba(168, 176, 196, 0.58) 14%, rgba(168, 176, 196, 0.58) 86%, rgba(168, 176, 196, 0.18) 100%);
  }

  .card--todo .card-items::after {
    content: '';
    display: none;
    height: 4px;
    margin-top: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--rose-light) 0%, var(--rose) 50%, var(--rose-light) 100%);
    background-size: 200% 100%;
    animation: shimmer-bar 2s ease-in-out infinite;
  }

  .card--todo.is-loading .card-items::after {
    display: block;
  }

  .card--todo .card-body {
    background: rgba(155, 96, 80, 0.06);
    padding: 16px 20px;
  }

  .card--calendar .card-body {
    background: rgba(78, 83, 112, 0.06);
    padding: 16px 20px;
  }

  .card--email .card-body {
    padding: 16px 20px;
  }

  .card--calendar .card-body-meta {
    color: var(--slate-dark, #4E5370);
  }

  .card--email .card-body-meta {
    color: var(--warm-text-light, #8A7E72);
    font-weight: var(--font-weight-medium);
  }

  .card--calendar .card-body[data-urgency="soon"] .card-body-meta {
    color: var(--rose-dark, #9B6050);
    font-weight: var(--font-weight-semibold);
  }

  .card--calendar .card-body[data-urgency="now"] .card-body-meta {
    color: var(--rose-dark, #9B6050);
    font-weight: var(--font-weight-semibold);
  }

  .card--email .card-body[data-signal="ok"],
  .card--email .card-body[data-signal="clear"] {
    background: rgba(74, 122, 104, 0.06);
  }

  .card--email .card-body[data-signal="attention"] {
    background: rgba(155, 96, 80, 0.06);
  }

  .card--email .card-body[data-signal="demo"][data-i18n-aria="a11y.emailDemo"] {
    background-color: rgba(168, 197, 184, 0.18);
    border-radius: 18px;
    padding: 16px 20px;
  }

  .card--email .card-body[data-signal="loading"] {
    background: transparent;
  }

  .card-later {
    margin-top: 12px;
  }

  .card-later-label {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--warm-text-light, #8A7E72);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .card-later-item {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--warm-text-light, #8A7E72);
    line-height: 1.6;
  }

  [data-theme="dark"] .card--todo .card-body {
    background: rgba(212, 168, 154, 0.06);
  }

  [data-theme="dark"] .card--calendar .card-body {
    background: rgba(168, 176, 196, 0.06);
  }

  [data-theme="dark"] .card--calendar .card-body-meta {
    color: var(--slate, #A8B0C4);
  }

  [data-theme="dark"] .card--email .card-body-meta {
    color: #C8BEB2;
  }

  [data-theme="dark"] .card--email .card-body[data-signal="ok"],
  [data-theme="dark"] .card--email .card-body[data-signal="clear"] {
    background: rgba(168, 197, 184, 0.06);
  }

  [data-theme="dark"] .card--email .card-body[data-signal="attention"] {
    background: rgba(212, 168, 154, 0.06);
  }

  [data-theme="dark"] .card-later-label,
  [data-theme="dark"] .card-later-item {
    color: #C8BEB2;
  }

  [data-theme="dark"] .card--todo .card-count::after {
    background: rgba(212, 168, 154, 0.58) !important;
  }

  [data-theme="dark"] .card--email .card-count::after {
    background: rgba(168, 197, 184, 0.54) !important;
  }

  [data-theme="dark"] .card--calendar .card-count::after {
    background: rgba(168, 176, 196, 0.54) !important;
  }

  [data-theme="dark"] .card--email .card-item,
  [data-theme="dark"] .card--email .card-item--ai,
  [data-theme="dark"] .card--email .card-item--unread {
    background: rgba(42, 38, 34, 0.72) !important;
    border-color: rgba(232, 224, 216, 0.10) !important;
    color: #E8DDD4 !important;
    box-shadow: inset 0 1px 0 rgba(232, 224, 216, 0.04) !important;
  }

  [data-theme="dark"] .card--email .card-item--quiet {
    opacity: 1;
  }

.content[data-calm-view="brief"] .cards {
  display: none;
}

.content[data-calm-view="cards"] .sofia-signal-panel {
  display: none;
}

.content[data-calm-view="none"] .sofia-signal-panel {
  display: none;
}

.content[data-calm-view="none"] .cards {
  display: none;
}

#chat-main .calm-brief2 .sofia-signal-summary,
#chat-main .calm-brief2 .calm-reassure {
  margin: 0 0 18px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
}

@media (max-width: 400px) {

}

@media (prefers-reduced-motion: reduce) {

}

@media (min-width: 768px) {

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card {
    position: relative;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #FFFEFB !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #E6E1D8 !important;
    box-shadow: 0 1px 2px rgba(58, 47, 38, 0.04), 0 4px 16px rgba(58, 47, 38, 0.04) !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card::before {
    content: none !important;
    display: none !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-empty-input-area {
    padding: 0 !important;
    margin: 0 !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card textarea.chat-input-field {
    min-height: 26px !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 1.5 !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-box--welcome {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "files"
      "editor"
      "footer";
    align-items: stretch !important;
    gap: 0 !important;
    position: relative;
    z-index: 1;
    padding: 0 !important;
    overflow: visible !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-file-preview {
    grid-area: files;
    padding: 0 0 8px 0 !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card #chat-direct-input.ql-container {
    grid-area: editor;
    min-height: 26px !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor {
    min-height: 26px !important;
    height: auto !important;
    max-height: 180px !important;
    padding: 0 11px !important;
    line-height: 1.5 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: manipulation;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor:not(.ql-blank) {
    overflow-y: auto !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor > p {
    min-height: 26px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor.ql-blank::before,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card #chat-direct-input .ql-editor.ql-blank > p::before {
    left: 11px !important;
    right: 11px !important;
    top: 0 !important;
    color: #9A8E82 !important;
    line-height: 1.5 !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar {
    grid-area: footer;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    z-index: 1;
    min-height: 52px !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    cursor: default !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar-left,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar-right {
    align-items: center !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar-right {
    gap: 4px !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.2,.8,.2,1) !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger[hidden],
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger[style*="display: none"] {
    display: none !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-send-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-wrap {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn svg,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic svg,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-send-btn svg {
    display: block !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn svg *,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic svg * {
    stroke-width: 2px !important;
    vector-effect: non-scaling-stroke;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn svg,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn svg *,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic svg,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic svg * {
    color: #6B5B4E !important;
    stroke: #6B5B4E !important;
    fill: none !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger svg,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger svg * {
    color: #6B5B4E !important;
    fill: #6B5B4E !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:hover,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action.ss-mic:hover,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger:hover {
    background-color: rgba(92, 77, 67, .08) !important;
    box-shadow: none !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:active,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-action:active,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger:active {
    transform: scale(.92) !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar button:focus-visible,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-plus-btn:focus-visible,
  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .ss-voice-trigger:focus-visible {
    outline: 2px solid #5C4D43 !important;
    outline-offset: 2px !important;
  }

  .ss-public-chat:not(.chat-ny-in-conversation) .input-card .chat-input-toolbar button:focus:not(:focus-visible) {
    outline: none !important;
  }

}

html[data-theme="dark"] .ss-public-chat:not(.chat-ny-in-conversation) .input-card {
  background: rgba(42, 38, 34, 0.85) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(232, 224, 216, 0.10) !important;
  box-shadow:
    0 14px 40px rgba(20, 18, 15, 0.34),
    0 2px 8px rgba(20, 18, 15, 0.22),
    inset 0 1px 0 rgba(232, 224, 216, 0.06) !important;
}

html[data-theme="dark"] .ss-public-chat:not(.chat-ny-in-conversation) .input-card::before {
  content: none !important;
  display: none !important;
}

/* ── Appendix-supplement (parity A linse/CI-runde): 5 fork-regler graftet fra
   fork-originalens blob (selektor-set-diff). Chooser/--done-familierne portes
   BEVIDST IKKE — deres mekanisme døde med bundlen (app #5150), B-batchen
   genbygger demo-fladen. ───────────────────────────────────────────────── */

/* Chat-sidens shell-typografi på delte includes (mobilnav-badge + sidebar-tooltip) */
body:has(#chat-app) #bb-mobile-nav .mn-badge {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0 !important;
}
body:has(#chat-app) #bb-sidebar .bb-sidebar-tooltip-target::after {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0 !important;
}

/* Dark: TTS-oplæsnings-highlight (tts-highlight.css er lys-only) */
[data-theme="dark"] body.chat-ny-in-conversation .chat-message.ss-reading-active {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Demo-kortenes basis (dormant cards-view = B-batchens rail; markup består i index) */
.card-body {
  padding: 16px 20px;
  margin: 0 -4px;
  border-radius: var(--radius-card, 18px);
}
.card-body-meta {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--rose-dark, #9B6050);
  line-height: 1.4;
}

/* ── Live dictation preview (inline interim ghost) ────────────────────────────
   Display-only overlay positioned by chat-stt.js so the muted-italic spoken
   words continue the committed sentence INLINE (text-indent = measured end of
   text), never as a separate line below. While it is visible the composer
   placeholder is suppressed (.chat-stt-ghosting on the box). The overlay and
   its measuring mirror are absolute — they never participate in the composer
   grid/flex flow. */
.chat-input-box.chat-stt-ghosting {
  position: relative;
}

.chat-input-box .chat-stt-interim {
  display: none;
}

.chat-input-box .chat-stt-interim--visible {
  display: block;
  position: absolute;
  font-style: italic;
  color: var(--warm-text-light, #8A7E72);
  pointer-events: none;
  user-select: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  z-index: 1;
}

.chat-input-box .chat-stt-interim-mirror {
  position: absolute;
  visibility: hidden;
  inset-inline-start: -9999px;
  top: 0;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
}

[data-theme="dark"] .chat-input-box .chat-stt-interim--visible {
  color: #E8DDD4;
  opacity: 0.62;
}

/* While dictating, the ghost IS the composer text — the placeholder under it
   read as double text (Morten's staging verdict 15/7). */
.chat-input-box.chat-stt-ghosting .chat-input-field::placeholder {
  color: transparent !important;
}
.chat-input-box.chat-stt-ghosting #chat-direct-input .ql-editor.ql-blank::before {
  content: none !important;
}

/* While dictating, the caret rides AHEAD at the end of the spoken words —
   a blinking mark on the ghost's tail; the real caret is
   parked (transparent) so two cursors never show and the text never appears
   to land "behind" the caret. */
.chat-input-box.chat-stt-ghosting .chat-input-field,
.chat-input-box.chat-stt-ghosting #chat-direct-input .ql-editor {
  caret-color: transparent;
}

.chat-input-box .chat-stt-interim--visible::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-inline-start: 1px;
  vertical-align: -0.15em;
  background: var(--warm-text-light, #8A7E72);
  animation: chat-stt-caret-blink 1.06s steps(2, start) infinite;
}

[data-theme="dark"] .chat-input-box .chat-stt-interim--visible::after {
  background: #E8DDD4;
}

@keyframes chat-stt-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Ghost overhang growth: the composer css pins editor min-heights with
   !important, so the ghost's growth wins the same cascade via a scoped class
   + variable. Applies only while chat-stt.js marks the editor. */
.chat-input-box.chat-stt-ghosting #chat-direct-input .ql-editor.chat-stt-grown,
.chat-input-box.chat-stt-ghosting textarea.chat-stt-grown {
  min-height: var(--stt-ghost-minh, 24px) !important;
}

/* Variant B+shimmer (Morten 15/7, for ordblinde brugere): de u-faerdige ord er
   en bloed graa form med et levende lys-sweep - man ser AT der arbejdes, ikke
   hvilke ord. Gradient-clip + blur ligger SAMLET paa ORD-spans: et span med
   filter forlader foraelderens background-clip (ordene blev usynlige da
   clippet laa paa elementet - fanget af screenshot-proben), og elementet
   holdes rent saa caret-maerket (::after, egen baggrund) forbliver skarpt. */
.chat-input-box .chat-stt-interim--visible .w {
  color: transparent;
  background-image: linear-gradient(100deg,
    var(--warm-text-light, #8A7E72) 0%,
    var(--warm-text-light, #8A7E72) 38%,
    #D6CCC0 50%,
    var(--warm-text-light, #8A7E72) 62%,
    var(--warm-text-light, #8A7E72) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(2.75px);
  opacity: 0.8;
  animation: chat-stt-shimmer 2s linear infinite;
}

[data-theme="dark"] .chat-input-box .chat-stt-interim--visible .w {
  background-image: linear-gradient(100deg,
    #9F9184 0%, #9F9184 38%, #F2EAE1 50%, #9F9184 62%, #9F9184 100%);
}

@keyframes chat-stt-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -20% 0; }
}

.chat-input-box .chat-stt-interim--visible .w.newest {
  animation: chat-stt-word-settle 420ms ease-out,
    chat-stt-shimmer 2s linear infinite;
}

@keyframes chat-stt-word-settle {
  from { filter: blur(5px); opacity: 0.3; }
  to { filter: blur(2.75px); opacity: 0.8; }
}

.chat-input-box--welcome[data-mobile-native-composer="1"] .chat-stt-interim {
  display: none !important;
}

/* Reduced motion: dictation ghost stills — blur stays, every animation dies
   (!important so these win over the variant rules above at equal specificity). */
@media (prefers-reduced-motion: reduce) {
  .chat-input-box .chat-stt-interim--visible .w {
    animation: none !important;
    filter: blur(2.75px);
  }
  .chat-input-box .chat-stt-interim--visible .w.newest {
    animation: none !important;
  }
  /* Dictation caret mark rests steady instead of blinking. */
  .chat-input-box .chat-stt-interim--visible::after {
    animation: none !important;
    opacity: 1;
  }
}