/* ── SS Embed: Action Cards (in chat bubbles) ──────────── */

.ss-embed-card {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--surface-color, #fff);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  text-align: start;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary, #1e293b);
}
.ss-embed-card:hover {
  border-color: var(--text-primary, #1e293b);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.ss-embed-card:active {
  transform: translateY(0);
}

.ss-embed-card-text {
  flex: 1;
  min-width: 0;
}
.ss-embed-card-title {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.ss-embed-card-sub {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #6B675E);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-embed-card-arrow {
  flex-shrink: 0;
  color: var(--text-secondary, #94a3b8);
  transition: transform .15s;
}
.ss-embed-card:hover .ss-embed-card-arrow {
  transform: translateX(3px);
  color: var(--text-primary, #1e293b);
}


/* ── SS Embed: Modal Overlay ───────────────────────────── */

.ss-embed-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ss-embed-modal-overlay.ss-embed-modal-open {
  opacity: 1;
  pointer-events: auto;
}

.ss-embed-modal {
  width: min(640px, calc(100vw - 32px));
  height: min(700px, calc(100vh - 64px));
  background: var(--surface-color, #fff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(.95) translateY(10px);
  transition: transform .2s ease;
}
.ss-embed-modal-open .ss-embed-modal {
  transform: scale(1) translateY(0);
}

.ss-embed-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}

.ss-embed-modal-title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #1e293b);
}

.ss-embed-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary, #6B675E);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.ss-embed-modal-close:hover {
  background: rgba(0,0,0,.06);
  color: var(--text-primary, #1e293b);
}

.ss-embed-modal-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.ss-embed-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.ss-embed-modal-iframe.is-loading {
  opacity: 0;
  position: absolute;
}

/* ── Skeleton loading (shown while iframe loads) ──────── */

.ss-embed-skeleton {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 0;
  height: 100%;
}
.ss-embed-skeleton.is-hidden { display: none; }

.ss-embed-skeleton-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.ss-embed-skeleton-label {
  width: 32px;
  height: 14px;
  border-radius: 4px;
  background: var(--border-color, #e2e8f0);
  flex-shrink: 0;
}
.ss-embed-skeleton-value {
  height: 14px;
  border-radius: 4px;
  background: var(--border-color, #e2e8f0);
  animation: ss-skeleton-pulse 1.2s ease-in-out infinite;
}
.ss-embed-skeleton-field:nth-child(1) .ss-embed-skeleton-value { width: 55%; }
.ss-embed-skeleton-field:nth-child(2) .ss-embed-skeleton-value { width: 70%; }
.ss-embed-skeleton-field:nth-child(3) .ss-embed-skeleton-value { width: 35%; }

.ss-embed-skeleton-body {
  flex: 1;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-embed-skeleton-line {
  height: 13px;
  border-radius: 4px;
  background: var(--border-color, #e2e8f0);
  animation: ss-skeleton-pulse 1.2s ease-in-out infinite;
}
.ss-embed-skeleton-line:nth-child(1) { width: 90%; animation-delay: .1s; }
.ss-embed-skeleton-line:nth-child(2) { width: 75%; animation-delay: .2s; }
.ss-embed-skeleton-line:nth-child(3) { width: 60%; animation-delay: .3s; }
.ss-embed-skeleton-line:nth-child(4) { width: 40%; animation-delay: .4s; }

.ss-embed-skeleton-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ss-embed-skeleton-btn {
  width: 80px;
  height: 32px;
  border-radius: 6px;
  background: var(--border-color, #e2e8f0);
  animation: ss-skeleton-pulse 1.2s ease-in-out infinite;
  animation-delay: .5s;
}

@keyframes ss-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

[data-theme="dark"] .ss-embed-skeleton-field { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ss-embed-skeleton-label { background: rgba(255,255,255,.1); }
[data-theme="dark"] .ss-embed-skeleton-value,
[data-theme="dark"] .ss-embed-skeleton-line,
[data-theme="dark"] .ss-embed-skeleton-btn { background: rgba(255,255,255,.08); }
[data-theme="dark"] .ss-embed-skeleton-footer { border-color: rgba(255,255,255,.08); }


/* ── Card icon (pillar icon left of text) ──────────────── */

.ss-embed-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--text-secondary, #6B675E);
}
.ss-embed-card-calendar .ss-embed-card-icon { background: rgba(110, 138, 126, .12); color: #6E8A7E; }
.ss-embed-card-document .ss-embed-card-icon { background: rgba(110, 138, 126, .12); color: #6E8A7E; }
.ss-embed-card-task .ss-embed-card-icon { background: rgba(110, 138, 126, .12); color: #6E8A7E; }
[data-theme="dark"] .ss-embed-card-calendar .ss-embed-card-icon { background: rgba(110, 138, 126, .2); color: #8aa99b; }
[data-theme="dark"] .ss-embed-card-document .ss-embed-card-icon { background: rgba(110, 138, 126, .2); color: #8aa99b; }
[data-theme="dark"] .ss-embed-card-task .ss-embed-card-icon { background: rgba(110, 138, 126, .2); color: #8aa99b; }

/* ── Loading state (calendar inline actions) ──────────── */

.ss-embed-card-loading {
  pointer-events: none;
  opacity: .7;
}

.ss-embed-card-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,0,0,.1);
  border-top-color: var(--text-primary, #1e293b);
  border-radius: 50%;
  animation: ss-embed-spin .6s linear infinite;
  flex-shrink: 0;
}
[data-theme="dark"] .ss-embed-card-spinner {
  border-color: rgba(255,255,255,.15);
  border-top-color: var(--color-text-primary, #e8e6e1);
}
@keyframes ss-embed-spin {
  to { transform: rotate(360deg); }
}

/* ── Done state (sent / created / deleted) ───────────── */

.ss-embed-card-done,
.ss-embed-card-sent {
  border-color: var(--good, #4A7A68);
  background: rgba(47, 122, 77, .06);
  cursor: default;
  pointer-events: none;
}
/* The done-tier's Vis deep-link must stay CLICKABLE — the card-level
   pointer-events:none killed it (Morten live-find 3/7; the #4995 scan-card
   lesson repeated on the model card's §13 done-tier). */
.ss-embed-card-done .ss-embed-card-vis {
  pointer-events: auto;
  cursor: pointer;
}
.ss-embed-card-done:hover,
.ss-embed-card-sent:hover {
  transform: none;
  box-shadow: none;
}

.ss-embed-card-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(47, 122, 77, .12);
  color: var(--good, #4A7A68);
  flex-shrink: 0;
}

.ss-embed-card-sent .ss-embed-card-title,
.ss-embed-card-done .ss-embed-card-title {
  color: var(--good, #4A7A68);
}

/* ── Modal success screen ─────────────────────────────── */

.ss-embed-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  animation: ss-embed-pop .3s ease;
}

.ss-embed-success-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--good, #4A7A68);
}

@keyframes ss-embed-pop {
  0% { transform: scale(.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


/* ── Dark mode ─────────────────────────────────────────── */

[data-theme="dark"] .ss-embed-card {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--color-text-primary, #e8e6e1);
}
[data-theme="dark"] .ss-embed-card:hover {
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .ss-embed-card-sub { color: var(--color-text-secondary, #A79F92); }

[data-theme="dark"] .ss-embed-card-sent,
[data-theme="dark"] .ss-embed-card-done {
  border-color: rgba(95, 169, 125, .45);
  background: rgba(95, 169, 125, .08);
}
[data-theme="dark"] .ss-embed-card-check { background: rgba(95, 169, 125, .15); color: var(--good, #5FA97D); }
[data-theme="dark"] .ss-embed-success-text { color: var(--good, #5FA97D); }
[data-theme="dark"] .ss-embed-card-sent .ss-embed-card-title,
[data-theme="dark"] .ss-embed-card-done .ss-embed-card-title { color: var(--good, #5FA97D); }

[data-theme="dark"] .ss-embed-modal-overlay {
  background: rgba(0, 0, 0, .6);
}
[data-theme="dark"] .ss-embed-modal {
  background: var(--color-card, #2b2a27);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="dark"] .ss-embed-modal-header {
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .ss-embed-modal-title { color: var(--color-text-primary, #e8e6e1); }
[data-theme="dark"] .ss-embed-modal-close { color: var(--color-text-secondary, #A79F92); }
[data-theme="dark"] .ss-embed-modal-close:hover {
  background: rgba(255,255,255,.08);
  color: var(--color-text-primary, #e8e6e1);
}


/* ── Mobile: modal goes near-fullscreen ────────────────── */

@media (max-width: 768px) {
  .ss-embed-modal {
    width: 100vw;
    height: calc(100vh - 16px);
    max-height: 100vh;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }
  .ss-embed-modal-overlay {
    align-items: flex-end;
  }
}


/* ── Email action card refinement (#3823) ──────────────────
   Approved warm card target. Every rule below is scoped to the
   email variant so other pillar cards keep the generic look.
   Geometry applies in ALL states so the card cannot layout-shift
   when it turns loading/done; surface and text colors carry
   :not() guards so the green completed state keeps winning. */

.ss-embed-card.ss-embed-card-email {
  width: 100%;
  max-width: 420px;
  min-height: 64px; /* icon tile 38 + padding 24 + border 2: keeps done/loading swaps from shifting height */
  padding: 12px 14px;
  gap: 14px;
  border-radius: 14px;
}

.ss-embed-card.ss-embed-card-email .ss-embed-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ss-embed-card.ss-embed-card-email .ss-embed-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-embed-card.ss-embed-card-email .ss-embed-card-icon {
  background: rgba(110, 138, 126, .12);
  color: #6E8A7E;
}

.ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) {
  background: rgb(255, 254, 251);
  border: 1px solid rgba(92, 77, 67, 0.12);
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.05), 0 4px 14px rgba(92, 77, 67, 0.06);
  color: rgb(74, 64, 55);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover {
  background: rgb(255, 254, 251);
  border-color: rgba(110, 138, 126, 0.35);
  box-shadow: 0 2px 4px rgba(92, 77, 67, 0.07), 0 8px 22px rgba(92, 77, 67, 0.1);
  transform: translateY(-1px);
}

.ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.05), 0 4px 14px rgba(92, 77, 67, 0.06);
}

.ss-embed-card.ss-embed-card-email:focus-visible {
  outline: 3px solid rgba(110, 138, 126, 0.45);
  outline-offset: 2px;
}

.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-title {
  color: rgb(74, 64, 55);
}

.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-sub {
  color: rgba(92, 77, 67, 0.62);
}

.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-arrow {
  color: rgba(92, 77, 67, 0.4);
  transition: transform .18s ease, color .18s ease;
}

.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover .ss-embed-card-arrow {
  transform: translateX(2px);
  color: rgba(110, 138, 126, 0.8);
}

/* Dark mode keeps the dark surface (no off-white glow) with blue
   accents; same :not() guards so dark done/sent stay green. */

[data-theme="dark"] .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: var(--color-text-primary, #e8e6e1);
}

[data-theme="dark"] .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(139, 180, 224, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ss-embed-card.ss-embed-card-email .ss-embed-card-icon {
  background: rgba(110, 138, 126, .2);
  color: #8aa99b;
}

[data-theme="dark"] .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-title {
  color: var(--color-text-primary, #e8e6e1);
}

[data-theme="dark"] .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-sub {
  color: var(--color-text-secondary, #A79F92);
}

[data-theme="dark"] .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-arrow {
  color: rgba(232, 230, 225, 0.45);
}

[data-theme="dark"] .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover .ss-embed-card-arrow {
  color: #8aa99b;
}

[data-theme="dark"] .ss-embed-card.ss-embed-card-email:focus-visible {
  outline-color: rgba(139, 180, 224, 0.6);
}

/* Reduced motion: no transitions or transform movement on the
   email card or its arrow. Selectors repeat the :not() guards so
   they match or beat the idle/hover rule specificity above (a
   media query adds none of its own). */

@media (prefers-reduced-motion: reduce) {
  .ss-embed-card.ss-embed-card-email,
  .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent),
  .ss-embed-card.ss-embed-card-email .ss-embed-card-arrow,
  .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) .ss-embed-card-arrow {
    transition: none;
  }
  .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover,
  .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):active {
    transform: none;
  }
  .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover .ss-embed-card-arrow {
    transform: none;
  }
}

/* ── #3856: email card fill inside the real chat container ─────
   chat-ny-blod-bolge.css ships ID-scoped `#chat-main button` resets, so
   class-only card rules sit one specificity tier below the container.
   This ID-scoped rule (1,4,0) pins the approved off-white fill on the
   DEFAULT email card inside #chat-main at plain specificity (no
   importance flags). The two dark rules below restore the dark
   idle/hover surfaces that the (1,4,0) light rule would otherwise beat
   ((0,5,0)/(0,6,0)); done/sent keep winning via the same :not() guards. */

#chat-main .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) {
  background-color: rgb(255, 254, 251);
}

[data-theme="dark"] #chat-main .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent) {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] #chat-main .ss-embed-card.ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ── #3973: e-mail-scan suggestion card (accept / decline) ─────────────
   A scan suggestion carries two choices, so the card is a <div> with an
   icon + text + an actions row instead of a single-action <button>. Calm
   warm canvas + sage action accent (canon: sage = action). The card div is
   not reset by `#chat-main button:where(:not(.ss-embed-card))`, but the two
   inner <button>s ARE, so their fills are pinned with `#chat-main` scope
   (1,2,0) to beat that reset (1,0,1). */

.ss-embed-card.ss-embed-card-calendar_scan {
  flex-wrap: wrap;
  row-gap: 4px;            /* the 12px flex gap is column spacing; wrapped actions sit tighter (Mortens eye 3/7) */
  cursor: default;
  background: rgb(255, 254, 251);
  border: 1px solid rgba(92, 77, 67, 0.12);
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.05), 0 4px 14px rgba(92, 77, 67, 0.06);
  color: rgb(74, 64, 55);
}
.ss-embed-card.ss-embed-card-calendar_scan:hover {
  transform: none;
  border-color: rgba(92, 77, 67, 0.12);
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.05), 0 4px 14px rgba(92, 77, 67, 0.06);
}
.ss-embed-card-calendar_scan .ss-embed-card-icon {
  background: rgba(110, 138, 126, 0.12);
  color: #6E8A7E;
}
.ss-embed-card-calendar_scan .ss-embed-card-title { color: rgb(74, 64, 55); }
.ss-embed-card-calendar_scan .ss-embed-card-sub { color: rgba(92, 77, 67, 0.62); }

.ss-embed-card-calendar_scan .ss-embed-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto; /* one line (Mortens mockup-godkendelse 12/7): clock + button sit at the
                              row end next to the title. The old flex-basis:100% button row stacked
                              the card into two lines; that stack survives only in the mobile blocks. */
}
.ss-embed-card-calendar_scan .ss-embed-card-accept,
.ss-embed-card-calendar_scan .ss-embed-card-dismiss {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* #chat-main scope so the warm/sage button fills survive the
   `#chat-main button` border/background reset. */
#chat-main .ss-embed-card-calendar_scan .ss-embed-card-accept {
  background: #6E8A7E;
  color: #fff;
  border: 1px solid #6E8A7E;   /* full shorthand beats the `#chat-main button` border:none reset */
}
#chat-main .ss-embed-card-calendar_scan .ss-embed-card-accept:hover {
  background: #5f7a6f;
  border-color: #5f7a6f;
}
#chat-main .ss-embed-card-calendar_scan .ss-embed-card-dismiss {
  background: transparent;
  color: rgba(92, 77, 67, 0.75);
  border: 1px solid rgba(92, 77, 67, 0.22);
}
#chat-main .ss-embed-card-calendar_scan .ss-embed-card-dismiss:hover {
  background: rgba(92, 77, 67, 0.06);
  color: rgb(74, 64, 55);
}
.ss-embed-card-calendar_scan .ss-embed-card-accept:focus-visible,
.ss-embed-card-calendar_scan .ss-embed-card-dismiss:focus-visible {
  outline: 3px solid rgba(110, 138, 126, 0.45);
  outline-offset: 2px;
}

/* Resolved states: accepted keeps the green "done" look; dismissed reads as a
   calm, neutral close (not an error, not a success). */
.ss-embed-card-calendar_scan.ss-embed-card-dismissed {
  border-color: rgba(92, 77, 67, 0.18);
  background: rgba(92, 77, 67, 0.05);
}
.ss-embed-card-calendar_scan.ss-embed-card-dismissed .ss-embed-card-title { color: rgba(92, 77, 67, 0.72); }
.ss-embed-card-calendar_scan.ss-embed-card-dismissed .ss-embed-card-check {
  background: rgba(92, 77, 67, 0.1);
  color: rgba(92, 77, 67, 0.7);
}

/* Dark mode: warm dark surface, lighter sage; accept uses dark text on sage
   for an AA pairing (same move as the kalender scan CTA). */
[data-theme="dark"] .ss-embed-card.ss-embed-card-calendar_scan {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: var(--color-text-primary, #e8e6e1);
}
[data-theme="dark"] .ss-embed-card-calendar_scan .ss-embed-card-icon {
  background: rgba(110, 138, 126, 0.2);
  color: #8aa99b;
}
[data-theme="dark"] .ss-embed-card-calendar_scan .ss-embed-card-title { color: var(--color-text-primary, #e8e6e1); }
[data-theme="dark"] .ss-embed-card-calendar_scan .ss-embed-card-sub { color: var(--color-text-secondary, #A79F92); }
[data-theme="dark"] #chat-main .ss-embed-card-calendar_scan .ss-embed-card-accept {
  background: #6E8A7E;
  color: #18241e;
  border: 1px solid #6E8A7E;
}
[data-theme="dark"] #chat-main .ss-embed-card-calendar_scan .ss-embed-card-accept:hover {
  background: #7d9a8d;
  border-color: #7d9a8d;
}
[data-theme="dark"] #chat-main .ss-embed-card-calendar_scan .ss-embed-card-dismiss {
  color: rgba(232, 230, 225, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] #chat-main .ss-embed-card-calendar_scan .ss-embed-card-dismiss:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8e6e1;
}
[data-theme="dark"] .ss-embed-card-calendar_scan.ss-embed-card-dismissed {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .ss-embed-card-calendar_scan.ss-embed-card-dismissed .ss-embed-card-title { color: rgba(232, 230, 225, 0.6); }

/* Mobile: full-width 44px touch targets, no text indent. 767 = the canon
   mobile cut (nav-snit 767/768): 768px tablets keep the one-line row. */
@media (max-width: 767px) {
  .ss-embed-card-calendar_scan .ss-embed-card-actions {
    flex-basis: 100%;      /* mobile keeps the stacked full-width 44px touch row */
    margin-inline-start: 0;
    margin-top: 2px;
  }
  .ss-embed-card-calendar_scan .ss-embed-card-accept,
  .ss-embed-card-calendar_scan .ss-embed-card-dismiss {
    flex: 1;
    min-height: 44px;
  }
}

/* Reduced motion: no button colour/transform transitions. */
@media (prefers-reduced-motion: reduce) {
  .ss-embed-card-calendar_scan .ss-embed-card-accept,
  .ss-embed-card-calendar_scan .ss-embed-card-dismiss {
    transition: none;
  }
}

/* ── §13 model-embed retrofit (BYG C PR-2): calendar:create / email / task cards
      wear the calendar_scan family skin — 36px sage icon field + title + an
      EXPLICIT button row (the whole-card <button> + arrow affordance is retired).
      Values mirror the .ss-embed-card-calendar_scan reference 1:1. ─────────── */

.ss-embed-card.ss-embed-card-modelact {
  flex-wrap: wrap;
  row-gap: 4px;            /* mirror the scan card: tighter wrapped-actions spacing (Mortens eye 3/7) */
  column-gap: 12px;        /* scan-reference gap (the #3823 email legacy gap is 14px — keep icon/text spacing in family parity) */
  cursor: default;
  background: rgb(255, 254, 251);
  border: 1px solid rgba(92, 77, 67, 0.12);
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.05), 0 4px 14px rgba(92, 77, 67, 0.06);
  color: rgb(74, 64, 55);
}
.ss-embed-card.ss-embed-card-modelact:hover {
  transform: none;
  border-color: rgba(92, 77, 67, 0.12);
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.05), 0 4px 14px rgba(92, 77, 67, 0.06);
}

/* Line-one geometry: the legacy #3823 email refinement sets the text span to
   flex-basis auto. In this wrap layout a long nowrap title then measures at
   full content width, wraps under the icon and pushes the button row to a
   third line — a 3-row stack (Morten live-find 3/7). Basis 0% pins icon+title
   to line one exactly like the scan reference. */
.ss-embed-card.ss-embed-card-modelact .ss-embed-card-text {
  flex: 1 1 0%;
}

.ss-embed-card-modelact .ss-embed-card-title { color: rgb(74, 64, 55); }
.ss-embed-card-modelact .ss-embed-card-sub { color: rgba(92, 77, 67, 0.62); }

.ss-embed-card-modelact .ss-embed-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto; /* one line (Mortens mockup-godkendelse 12/7): clock + button sit at the
                              row end next to the title. The old flex-basis:100% button row stacked
                              the card into two lines; that stack survives only in the mobile blocks. */
}
.ss-embed-card-modelact .ss-embed-card-accept {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* #chat-main scope so the sage fill survives the `#chat-main button` reset. */
#chat-main .ss-embed-card-modelact .ss-embed-card-accept {
  background: #6E8A7E;
  color: #fff;
  border: 1px solid #6E8A7E;
}
#chat-main .ss-embed-card-modelact .ss-embed-card-accept:hover {
  background: #5f7a6f;
  border-color: #5f7a6f;
}
.ss-embed-card-modelact .ss-embed-card-accept:focus-visible {
  outline: 3px solid rgba(110, 138, 126, 0.45);
  outline-offset: 2px;
}

/* §13 done-tier Vis-link (shared receipt family) */
.ss-embed-card-vis {
  font-size: 13px;
  font-weight: 600;
  color: #6E8A7E;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 6px 2px;
}

[data-theme="dark"] .ss-embed-card.ss-embed-card-modelact {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .ss-embed-card-modelact .ss-embed-card-title { color: var(--color-text-primary, #e8e6e1); }
[data-theme="dark"] .ss-embed-card-modelact .ss-embed-card-sub { color: var(--color-text-secondary, #A79F92); }
[data-theme="dark"] #chat-main .ss-embed-card-modelact .ss-embed-card-accept {
  background: #6E8A7E;
  color: #18241e;
  border: 1px solid #6E8A7E;
}
[data-theme="dark"] #chat-main .ss-embed-card-modelact .ss-embed-card-accept:hover {
  background: #7d9a8d;
  border-color: #7d9a8d;
}
[data-theme="dark"] .ss-embed-card-vis { color: #8aa99b; }

@media (max-width: 480px) {
  .ss-embed-card-modelact .ss-embed-card-actions {
    flex-basis: 100%;      /* mobile keeps the stacked full-width touch row */
    margin-inline-start: 0;
    margin-top: 2px;
  }
  .ss-embed-card-modelact .ss-embed-card-accept {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-embed-card-modelact .ss-embed-card-accept {
    transition: none;
  }
}

/* These retired whole-card arrows are directional affordances, not product
   artwork. Mirror only that explicit arrow and move it toward inline-end on
   hover; card geometry itself follows the stable page shell. */
html[dir="rtl"] .ss-embed-card-arrow {
  transform: scaleX(-1);
}
html[dir="rtl"] .ss-embed-card:hover .ss-embed-card-arrow {
  transform: translateX(-3px) scaleX(-1);
}
html[dir="rtl"] .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover .ss-embed-card-arrow {
  transform: translateX(-2px) scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  html[dir="rtl"] .ss-embed-card:hover .ss-embed-card-arrow,
  html[dir="rtl"] .ss-embed-card-email:not(.ss-embed-card-done):not(.ss-embed-card-sent):hover .ss-embed-card-arrow {
    transform: scaleX(-1);
  }
}