/* ==========================================================
   Webhook/API chat — pdc-chat-ui.css  v.1.5.21
   ========================================================== */

/* ----------------------------------------------------------
   CSS custom properties & base shell (traditional default)
   ---------------------------------------------------------- */
.pdc-chat-shell {
  /* Brand — Business Randers defaults (overridden by JS at runtime) */
  --pdc-primary:        #427175;
  --pdc-on-primary:     #ffffff; /* text/icon colour ON the primary colour */
  --pdc-secondary:      #EABA57; /* gold accent — hover, highlights */

  /* Surfaces — driven by themeBg / themeBgAlt */
  --pdc-surface:        #F5F7FA;
  --pdc-surface-soft:   #EAF0F5;

  /* Text — driven by themeText */
  --pdc-text:           #1E252F;
  --pdc-text-soft:      #606A7C;
  --pdc-text-muted:     #8A94A2;

  /* Border / shadow */
  --pdc-border:         #dbe3ee;
  --pdc-shadow:         0 20px 45px rgba(15, 23, 42, 0.14);

  /* Shape */
  --pdc-radius-panel:   22px;
  --pdc-radius-bubble:  16px;
  --pdc-radius-input:   999px; /* pill input */

  /* Spacing */
  --pdc-density-gap:    14px;

  /* Typography */
  --pdc-font-family:    Inter, system-ui, sans-serif;

  font-family:   var(--pdc-font-family);
  color:         var(--pdc-text);
  background:    var(--pdc-surface);
  border:        1px solid var(--pdc-border);
  border-radius: var(--pdc-radius-panel);
  box-shadow:    var(--pdc-shadow);
  width:         min(100%, 420px);
  min-height:    560px;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  position:      relative;
}

/* Dark mode */
.pdc-chat-shell[data-theme-mode="dark"] {
  --pdc-surface:      #0f172a;
  --pdc-surface-soft: #111c32;
  --pdc-text:         #e2e8f0;
  --pdc-text-soft:    #94a3b8;
  --pdc-text-muted:   #64748b;
  --pdc-border:       #23304a;
  --pdc-shadow:       0 24px 48px rgba(2, 6, 23, 0.42);
}

/* When themeBg/themeBgAlt/themeText are set via JS, they override
   the shell's own surface/text variables through data attributes.
   The JS sets CSS variables directly on the shell element, so
   these fallback values are only used when JS has not run. */

/* Density */
.pdc-chat-shell[data-theme-density="compact"] {
  --pdc-density-gap: 10px;
}

/* Radius variants */
.pdc-chat-shell[data-theme-radius="default"] {
  --pdc-radius-panel:  16px;
  --pdc-radius-bubble: 14px;
  --pdc-radius-input:  14px;
}
.pdc-chat-shell[data-theme-radius="square"] {
  --pdc-radius-panel:  6px;
  --pdc-radius-bubble: 8px;
  --pdc-radius-input:  8px;
}

/* ----------------------------------------------------------
   Header (traditional default)
   ---------------------------------------------------------- */
.pdc-chat-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         18px 18px 14px;
  border-bottom:   1px solid var(--pdc-border);
  background:      linear-gradient(180deg,
                     color-mix(in srgb, var(--pdc-primary) 10%, var(--pdc-surface)),
                     var(--pdc-surface));
  flex-shrink: 0;
}

.pdc-chat-header-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.pdc-chat-title {
  font-size:   1rem;
  font-weight: 700;
}

/* ----------------------------------------------------------
   Button resets
   ---------------------------------------------------------- */
.pdc-chat-reset,
.pdc-chat-close,
.pdc-chat-send,
.pdc-chat-starter,
.pdc-chat-launcher {
  appearance: none;
  border:     0;
  cursor:     pointer;
}

.pdc-chat-reset {
  background:    transparent;
  color:         var(--pdc-secondary);
  border:        1px solid var(--pdc-secondary);
  font-size:     0.875rem;
  padding:       4px 8px;
  border-radius: 8px;
}
.pdc-chat-reset:hover {
  background: color-mix(in srgb, var(--pdc-secondary) 15%, var(--pdc-surface));
}

.pdc-chat-close {
  background:    transparent;
  color:         var(--pdc-text-soft);
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         32px;
  height:        32px;
  border-radius: 8px;
  padding:       0;
}
.pdc-chat-close:hover {
  background: color-mix(in srgb, var(--pdc-primary) 8%, var(--pdc-surface));
  color:      var(--pdc-text);
}

/* ----------------------------------------------------------
   Chat log
   ---------------------------------------------------------- */
.pdc-chat-log {
  flex:       1 1 auto;
  overflow-y: auto;
  padding:    18px;
  background: var(--pdc-surface-soft);
}

.pdc-chat-message {
  display:       flex;
  margin-bottom: var(--pdc-density-gap);
}
.pdc-chat-message--user {
  justify-content: flex-end;
}
.pdc-chat-message__bubble {
  max-width:    84%;
  border-radius: var(--pdc-radius-bubble);
  padding:      12px 14px;
  line-height:  1.5;
  white-space:  normal;
  word-break:   break-word;
  border:       1px solid transparent;
}
.pdc-chat-message--bot .pdc-chat-message__bubble {
  background:   var(--pdc-surface-soft);
  border-color: var(--pdc-border);
  color:        var(--pdc-text);
}
.pdc-chat-message--user .pdc-chat-message__bubble {
  background: var(--pdc-primary);
  color:      var(--pdc-on-primary);
}

/* ----------------------------------------------------------
   Conversation starters (traditional / conversation state)
   ---------------------------------------------------------- */
.pdc-chat-starters {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  padding:    0 18px 14px;
  background: var(--pdc-surface-soft);
}

.pdc-chat-starter {
  background:    color-mix(in srgb, var(--pdc-primary) 10%, var(--pdc-surface));
  color:         var(--pdc-text);
  border:        1px solid color-mix(in srgb, var(--pdc-primary) 25%, var(--pdc-border));
  border-radius: 999px;
  padding:       9px 14px;
  font-size:     0.875rem;
  transition:    background 0.15s, border-color 0.15s;
}
.pdc-chat-starter:hover {
  background:   color-mix(in srgb, var(--pdc-primary) 18%, var(--pdc-surface));
  border-color: color-mix(in srgb, var(--pdc-primary) 40%, var(--pdc-border));
}

/* ----------------------------------------------------------
   Typing indicator — three animated dots (ChatGPT style)
   ---------------------------------------------------------- */
.pdc-chat-typing {
  padding:     0 18px 14px;
  background:  var(--pdc-surface-soft);
  flex-shrink: 0;
}

/* Hide the raw text content; show dots instead */
.pdc-chat-typing-dots {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  height:      20px;
}

.pdc-chat-typing-dots span {
  display:       block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--pdc-text-muted);
  animation:     pdc-typing-bounce 1.2s ease-in-out infinite;
}
.pdc-chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.pdc-chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pdc-typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

/* ----------------------------------------------------------
   Chat form / input — TRADITIONAL default
   ---------------------------------------------------------- */
.pdc-chat-form {
  display:     flex;
  flex-direction: column;
  gap:         0;
  padding:     16px 18px 18px;
  border-top:  1px solid var(--pdc-border);
  background:  var(--pdc-surface);
  flex-shrink: 0;
}

/* -------------------------------------------------------
   INPUT ROW — traditional layout
   Three-column grid: attach | textarea | send
   ------------------------------------------------------- */
.pdc-chat-input-row {
  display:               grid;
  grid-template-columns: auto 1fr auto;
  gap:                   10px;
  align-items:           end;
}

.pdc-chat-input {
  min-height:    48px;
  max-height:    160px;
  resize:        none;
  overflow-y:    auto;
  padding:       12px 14px;
  border:        1px solid var(--pdc-border);
  border-radius: 14px;
  font:          inherit;
  color:         var(--pdc-text);
  caret-color:   var(--pdc-text);
  background:    var(--pdc-surface-soft);
}
.pdc-chat-input::placeholder {
  color:   var(--pdc-text-muted);
  opacity: 1;
}
.pdc-chat-input:focus {
  outline:      none;
  border-color: color-mix(in srgb, var(--pdc-primary) 50%, var(--pdc-border));
}

/* Traditional send button: text label */
.pdc-chat-send {
  align-self:    end;
  background:    var(--pdc-primary);
  color:         var(--pdc-on-primary);
  border-radius: 14px;
  min-width:     92px;
  padding:       0 18px;
  min-height:    48px;
  font-weight:   600;
}
.pdc-chat-send:hover {
  background: var(--pdc-secondary);
  color:      var(--pdc-text);
  opacity:    1;
}

/* ----------------------------------------------------------
   File attachment: attach button, preview chip
   ---------------------------------------------------------- */
.pdc-chat-attach {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  min-width:       40px;
  border-radius:   50%;
  cursor:          pointer;
  color:           var(--pdc-text-muted);
  background:      transparent;
  transition:      background 0.15s, color 0.15s;
  flex-shrink:     0;
}
.pdc-chat-attach:hover {
  background: color-mix(in srgb, var(--pdc-primary) 10%, var(--pdc-surface));
  color:      var(--pdc-primary);
}
.pdc-chat-attach input[type="file"] {
  position:       absolute;
  width:          1px;
  height:         1px;
  opacity:        0;
  pointer-events: none;
}

/* File preview area */
.pdc-chat-file-preview {
  padding:   0 0 8px 0;
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.pdc-chat-file-preview[hidden] { display: none; }

/* Individual file chip (non-image) */
.pdc-file-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--pdc-surface-soft);
  border:        1px solid var(--pdc-border);
  border-radius: 20px;
  padding:       5px 10px 5px 8px;
  font-size:     0.85rem;
  color:         var(--pdc-text);
  max-width:     260px;
  overflow:      hidden;
  text-decoration: none;
}
.pdc-file-chip:hover {
  border-color: var(--pdc-primary);
  color:        var(--pdc-primary);
}

/* Image chip: thumbnail + name + remove */
.pdc-file-chip--image {
  padding:       4px 8px 4px 4px;
  border-radius: 12px;
  align-items:   center;
  gap:           8px;
  flex-direction: row;
}

/* Thumbnail link wrapper inside the chip */
.pdc-file-chip--image .pdc-thumb-link {
  display:     block;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 8px;
  overflow:    hidden;
  cursor:      zoom-in;
}
.pdc-file-chip__thumb {
  width:         64px;
  height:        64px;
  object-fit:    cover;
  border-radius: 8px;
  flex-shrink:   0;
  display:       block;
  transition:    opacity 0.15s;
}
.pdc-file-chip--image .pdc-thumb-link:hover .pdc-file-chip__thumb {
  opacity: 0.85;
}

.pdc-file-chip__icon {
  flex-shrink: 0;
  color:       var(--pdc-text-soft);
}
.pdc-file-chip__name {
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     180px;
  font-size:     0.82rem;
}
.pdc-file-chip__size {
  color:       var(--pdc-text-muted);
  font-size:   0.78rem;
  flex-shrink: 0;
}
.pdc-file-chip__remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      transparent;
  color:           var(--pdc-text-muted);
  font-size:       1.1rem;
  line-height:     1;
  padding:         0;
  flex-shrink:     0;
  cursor:          pointer;
  transition:      background 0.12s, color 0.12s;
}
.pdc-file-chip__remove:hover {
  background: color-mix(in srgb, var(--pdc-primary) 12%, var(--pdc-surface));
  color:      var(--pdc-primary);
}

/* ----------------------------------------------------------
   Attachment thumbnails & file chips inside chat messages
   ---------------------------------------------------------- */
.pdc-msg-attachments {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-bottom: 6px;
}

/* Image thumbnail in a sent message */
.pdc-msg-attachments .pdc-thumb-link {
  display:     block;
  line-height: 0;
  border-radius: 10px;
  overflow:    hidden;
  cursor:      zoom-in;
  flex-shrink: 0;
}
.pdc-msg-thumb {
  width:         120px;
  height:        90px;
  object-fit:    cover;
  border-radius: 10px;
  display:       block;
  transition:    opacity 0.15s;
}
.pdc-msg-attachments .pdc-thumb-link:hover .pdc-msg-thumb {
  opacity: 0.85;
}

/* File chip in a sent message */
.pdc-msg-file-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    color-mix(in srgb, var(--pdc-on-primary) 15%, transparent);
  border:        1px solid color-mix(in srgb, var(--pdc-on-primary) 30%, transparent);
  border-radius: 20px;
  padding:       4px 10px 4px 8px;
  font-size:     0.82rem;
  color:         var(--pdc-on-primary);
  text-decoration: none;
  max-width:     220px;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}
.pdc-msg-file-chip:hover {
  background: color-mix(in srgb, var(--pdc-on-primary) 25%, transparent);
}

/* ----------------------------------------------------------
   Lightbox / image modal
   ---------------------------------------------------------- */
.pdc-lightbox {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.pdc-lightbox[hidden] { display: none; }

.pdc-lightbox__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.82);
  cursor:     pointer;
}

.pdc-lightbox__dialog {
  position:       relative;
  z-index:        1;
  max-width:      min(90vw, 1100px);
  max-height:     90vh;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.pdc-lightbox__img {
  max-width:    100%;
  max-height:   calc(90vh - 48px);
  object-fit:   contain;
  border-radius: 8px;
  display:      block;
  box-shadow:   0 8px 40px rgba(0, 0, 0, 0.5);
}

.pdc-lightbox__close {
  position:        absolute;
  top:             -40px;
  right:           0;
  background:      rgba(255, 255, 255, 0.15);
  color:           #ffffff;
  border:          1px solid rgba(255, 255, 255, 0.3);
  border-radius:   50%;
  width:           36px;
  height:          36px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       1.3rem;
  line-height:     1;
  transition:      background 0.15s;
}
.pdc-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Drag-over highlight */
.pdc-chat-shell.pdc-drag-over {
  outline:        2px dashed var(--pdc-primary);
  outline-offset: -3px;
  background:     color-mix(in srgb, var(--pdc-primary) 5%, var(--pdc-surface));
}
.pdc-chat-shell.pdc-drag-over::after {
  content:         'Slip filen her';
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  font-weight:     600;
  color:           var(--pdc-primary);
  background:      color-mix(in srgb, var(--pdc-primary) 8%, var(--pdc-surface));
  border-radius:   inherit;
  pointer-events:  none;
  z-index:         10;
}

/* ----------------------------------------------------------
   Empty state container (hidden by default)
   ---------------------------------------------------------- */
.pdc-chat-empty-state {
  display: none;
}

.pdc-chat-empty-state__welcome {
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--pdc-text);
  line-height: 1.45;
}

.pdc-chat-empty-state__starters {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

/* ==========================================================
   INLINE HEIGHT FIX
   When the shell is embedded inline on a page (not floating),
   --pdc-inline-height is set by JS to fill from the shell's
   top edge to the bottom of the viewport, accounting for
   any headers/menus above the chat widget.
   ========================================================== */

/* ==========================================================
   CENTERED LAYOUT  (.pdc-layout-centered)
   Also applies to legacy .pdc-layout-centered-start.
   ChatGPT-style: no card feel, wide, centered hero on start.
   ========================================================== */

/* ---- INTRO STATE ---- */
.pdc-chat-shell.pdc-layout-centered.is-intro-state,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state {
  width:           100vw;
  max-width:       none;
  min-height:      var(--pdc-inline-height, 100dvh);
  height:          var(--pdc-inline-height, 100dvh);
  margin-left:     calc(50% - 50vw);
  margin-right:    calc(50% - 50vw);
  border-radius:   0;
  border-color:    transparent;
  box-shadow:      none;
  background:      var(--pdc-surface);
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
}

/* Hide header in intro */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-header,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-header {
  display: none;
}

/* Hide chat log in intro */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-log,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-log {
  display: none;
}

/* Hide traditional starters in intro */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-starters,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-starters {
  display: none;
}

/* Hide typing in intro */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-typing,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-typing {
  display: none;
}

/* Empty state: large centered hero */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-empty-state,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  gap:             24px;
  padding:         0 32px 16px;
  background:      transparent;
  text-align:      center;
  width:           100%;
}

/* Welcome headline */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-empty-state__welcome,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-empty-state__welcome {
  font-size:   clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  max-width:   860px;
  text-align:  center;
  color:       var(--pdc-text);
}

/* Starters below headline */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-empty-state__starters,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-empty-state__starters {
  max-width:       860px;
  justify-content: center;
  gap:             12px;
  margin-bottom:   32px;
}

/* Form: centered pill, no border, wide */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-form,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-form {
  width:      100%;
  max-width:  860px;
  box-sizing: border-box;
  margin:     0 auto 48px;
  padding:    0 24px;
  border-top: none;
  background: transparent;
}

/* Input row: flex pill */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-input-row,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-input-row {
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    var(--pdc-surface);
  border:        1px solid var(--pdc-border);
  border-radius: var(--pdc-radius-input);
  box-shadow:    0 8px 24px rgba(15, 23, 42, 0.08);
  padding:       8px 8px 8px 12px;
  box-sizing:    border-box;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-input-row:focus-within,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-input-row:focus-within {
  border-color: color-mix(in srgb, var(--pdc-primary) 50%, var(--pdc-border));
  box-shadow:   0 8px 28px rgba(15, 23, 42, 0.12);
}

/* Textarea: no own border, fills flex space */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-input,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-input {
  flex:          1 1 auto;
  min-height:    40px;
  max-height:    180px;
  resize:        none;
  overflow-y:    auto;
  border:        none;
  border-radius: 0;
  background:    transparent;
  padding:       8px 10px;
  font:          inherit;
  font-size:     1rem;
  color:         var(--pdc-text);
  caret-color:   var(--pdc-text);
  box-shadow:    none;
  outline:       none;
}
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-input::placeholder,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-input::placeholder {
  color: var(--pdc-text-muted);
}

/* Attach button: inside pill, left side */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-attach,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-attach {
  flex-shrink:   0;
  width:         40px;
  height:        40px;
  min-width:     40px;
  border-radius: 50%;
  align-self:    center;
}

/* Send button: round icon, inside pill, right side — NO absolute positioning */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-send,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-send {
  position:        static;
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  min-width:       40px;
  min-height:      40px;
  border-radius:   50%;
  padding:         0;
  font-size:       0;
  color:           transparent;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--pdc-primary);
  align-self:      center;
}
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-send::after,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-send::after {
  content:          '';
  display:          block;
  width:            17px;
  height:           17px;
  background-color: var(--pdc-on-primary);
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- CONVERSATION STATE ---- */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state {
  width:         100vw;
  max-width:     none;
  min-height:    var(--pdc-inline-height, 100dvh);
  height:        var(--pdc-inline-height, 100dvh);
  margin-left:   calc(50% - 50vw);
  margin-right:  calc(50% - 50vw);
  border-radius: 0;
  border-color:  transparent;
  box-shadow:    none;
  background:    var(--pdc-surface);
  align-items:   stretch;
  box-sizing:    border-box;
}

/* Header: minimal, title hidden — only "Ny samtale" action visible */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-header,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-header {
  background:          transparent;
  border-bottom-color: transparent;
  padding:             10px 24px 8px;
}

/* Hide the chat title in centered conversation state */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-title,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-title {
  display: none;
}

/* Make reset/close buttons subtle */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-reset,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-reset,
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-close,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-close {
  opacity: 0.55;
}
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-reset:hover,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-reset:hover,
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-close:hover,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-close:hover {
  opacity: 1;
}

/* Log: centered, readable max-width, scrolls internally */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-log,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-log {
  flex:          1 1 auto;
  min-height:    0;
  overflow-y:    auto;
  max-width:     860px;
  width:         100%;
  margin-inline: auto;
  background:    transparent;
  padding:       24px 32px;
  box-sizing:    border-box;
}

/* Bot messages in centered layout: calm text, no card border */
.pdc-chat-shell.pdc-layout-centered .pdc-chat-message--bot .pdc-chat-message__bubble,
.pdc-chat-shell.pdc-layout-centered-start .pdc-chat-message--bot .pdc-chat-message__bubble {
  background:    transparent;
  border-color:  transparent;
  padding-left:  0;
  padding-right: 0;
  max-width:     100%;
}

/* User messages in centered layout: neutral grey bubble (ChatGPT style) */
.pdc-chat-shell.pdc-layout-centered .pdc-chat-message--user .pdc-chat-message__bubble,
.pdc-chat-shell.pdc-layout-centered-start .pdc-chat-message--user .pdc-chat-message__bubble {
  background: var(--pdc-surface-soft);
  color:      var(--pdc-text);
  border:     1px solid var(--pdc-border);
}

/* Typing indicator centered */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-typing,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-typing {
  flex-shrink:   0;
  max-width:     860px;
  width:         100%;
  margin-inline: auto;
  background:    transparent;
  padding:       0 32px 10px;
  box-sizing:    border-box;
}

/* Form: centered pill, sticky at bottom */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-form,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-form {
  flex-shrink: 0;
  width:       100%;
  max-width:   860px;
  box-sizing:  border-box;
  margin:      0 auto 32px;
  padding:     0 24px;
  border-top:  none;
  background:  transparent;
}

/* Input row: flex pill — same as intro */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-input-row,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-input-row {
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    var(--pdc-surface);
  border:        1px solid var(--pdc-border);
  border-radius: var(--pdc-radius-input);
  box-shadow:    0 8px 24px rgba(15, 23, 42, 0.08);
  padding:       8px 8px 8px 12px;
  box-sizing:    border-box;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-input-row:focus-within,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-input-row:focus-within {
  border-color: color-mix(in srgb, var(--pdc-primary) 50%, var(--pdc-border));
  box-shadow:   0 8px 28px rgba(15, 23, 42, 0.12);
}

.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-input,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-input {
  flex:          1 1 auto;
  min-height:    40px;
  max-height:    180px;
  resize:        none;
  overflow-y:    auto;
  border:        none;
  border-radius: 0;
  background:    transparent;
  padding:       8px 10px;
  font:          inherit;
  font-size:     1rem;
  color:         var(--pdc-text);
  caret-color:   var(--pdc-text);
  box-shadow:    none;
  outline:       none;
}
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-input::placeholder,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-input::placeholder {
  color: var(--pdc-text-muted);
}

.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-attach,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-attach {
  flex-shrink:   0;
  width:         40px;
  height:        40px;
  min-width:     40px;
  border-radius: 50%;
  align-self:    center;
}

.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-send,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-send {
  position:        static;
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  min-width:       40px;
  min-height:      40px;
  border-radius:   50%;
  padding:         0;
  font-size:       0;
  color:           transparent;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--pdc-primary);
  align-self:      center;
}
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-send::after,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-send::after {
  content:          '';
  display:          block;
  width:            17px;
  height:           17px;
  background-color: var(--pdc-on-primary);
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Starters hidden during conversation in centered mode */
.pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-starters,
.pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-starters {
  display: none;
}

/* ==========================================================
   FULLSCREEN LAYOUT
   Fills the entire browser viewport.
   ========================================================== */
.pdc-chat-shell.pdc-layout-fullscreen {
  position:      fixed;
  inset:         0;
  width:         100vw;
  height:        var(--pdc-inline-height, 100vh);
  max-width:     none;
  min-height:    unset;
  border-radius: 0;
  border:        none;
  box-shadow:    none;
  z-index:       9000;
  align-items:   center;
}

/* Header: full width */
.pdc-chat-shell.pdc-layout-fullscreen .pdc-chat-header {
  width:         100%;
  background:    var(--pdc-surface);
  border-bottom: 1px solid var(--pdc-border);
}

/* Intro state: centered hero */
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-header    { display: none; }
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-log       { display: none; }
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-starters  { display: none; }
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-typing    { display: none; }

.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  flex:            0 0 auto;
  gap:             24px;
  padding:         80px 32px 16px;
  background:      transparent;
  text-align:      center;
  width:           100%;
}

.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-empty-state__welcome {
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  max-width:   860px;
  text-align:  center;
  color:       var(--pdc-text);
}

.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-empty-state__starters {
  max-width:       860px;
  justify-content: center;
  gap:             12px;
  margin-bottom:   32px;
}

/* Form: centered pill */
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-form {
  width:      100%;
  max-width:  860px;
  box-sizing: border-box;
  margin:     0 auto 48px;
  padding:    0 24px;
  border-top: none;
  background: transparent;
}

/* Input row: flex pill */
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-input-row {
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    var(--pdc-surface);
  border:        1px solid var(--pdc-border);
  border-radius: var(--pdc-radius-input);
  box-shadow:    0 10px 32px rgba(15, 23, 42, 0.10);
  padding:       10px 10px 10px 14px;
  box-sizing:    border-box;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-input-row:focus-within {
  border-color: color-mix(in srgb, var(--pdc-primary) 50%, var(--pdc-border));
  box-shadow:   0 10px 36px rgba(15, 23, 42, 0.14);
}

.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-input {
  flex:          1 1 auto;
  min-height:    44px;
  max-height:    180px;
  resize:        none;
  overflow-y:    auto;
  border:        none;
  border-radius: 0;
  background:    transparent;
  padding:       8px 12px;
  font:          inherit;
  font-size:     1.05rem;
  color:         var(--pdc-text);
  caret-color:   var(--pdc-text);
  box-shadow:    none;
  outline:       none;
}
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-input::placeholder {
  color: var(--pdc-text-muted);
}

.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-attach {
  flex-shrink:   0;
  width:         44px;
  height:        44px;
  min-width:     44px;
  border-radius: 50%;
  align-self:    center;
}

.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-send {
  position:        static;
  flex-shrink:     0;
  width:           44px;
  height:          44px;
  min-width:       44px;
  min-height:      44px;
  border-radius:   50%;
  padding:         0;
  font-size:       0;
  color:           transparent;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--pdc-primary);
  align-self:      center;
}
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-send::after {
  content:          '';
  display:          block;
  width:            19px;
  height:           19px;
  background-color: var(--pdc-on-primary);
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Conversation state: full viewport chat */
.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-log {
  flex:          1 1 auto;
  min-height:    0;
  overflow-y:    auto;
  max-width:     860px;
  width:         100%;
  margin-inline: auto;
  background:    transparent;
  padding:       28px 40px;
  box-sizing:    border-box;
}

/* Bot messages in fullscreen: calm text, no card border */
.pdc-chat-shell.pdc-layout-fullscreen .pdc-chat-message--bot .pdc-chat-message__bubble {
  background:    transparent;
  border-color:  transparent;
  padding-left:  0;
  padding-right: 0;
  max-width:     100%;
}

.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-typing {
  flex-shrink:   0;
  max-width:     860px;
  width:         100%;
  margin-inline: auto;
  background:    transparent;
  padding:       0 40px 10px;
  box-sizing:    border-box;
}

.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-form {
  flex-shrink: 0;
  width:       100%;
  max-width:   860px;
  box-sizing:  border-box;
  margin:      0 auto 40px;
  padding:     0 24px;
  border-top:  none;
  background:  transparent;
}

/* Input row: flex pill */
.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-input-row {
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    var(--pdc-surface);
  border:        1px solid var(--pdc-border);
  border-radius: var(--pdc-radius-input);
  box-shadow:    0 8px 24px rgba(15, 23, 42, 0.08);
  padding:       8px 8px 8px 12px;
  box-sizing:    border-box;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-input-row:focus-within {
  border-color: color-mix(in srgb, var(--pdc-primary) 50%, var(--pdc-border));
  box-shadow:   0 8px 28px rgba(15, 23, 42, 0.12);
}

.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-input {
  flex:          1 1 auto;
  min-height:    40px;
  max-height:    180px;
  resize:        none;
  overflow-y:    auto;
  border:        none;
  border-radius: 0;
  background:    transparent;
  padding:       8px 10px;
  font:          inherit;
  font-size:     1rem;
  color:         var(--pdc-text);
  caret-color:   var(--pdc-text);
  box-shadow:    none;
  outline:       none;
}
.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-input::placeholder {
  color: var(--pdc-text-muted);
}

.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-attach {
  flex-shrink:   0;
  width:         40px;
  height:        40px;
  min-width:     40px;
  border-radius: 50%;
  align-self:    center;
}

.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-send {
  position:        static;
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  min-width:       40px;
  min-height:      40px;
  border-radius:   50%;
  padding:         0;
  font-size:       0;
  color:           transparent;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--pdc-primary);
  align-self:      center;
}
.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-send::after {
  content:          '';
  display:          block;
  width:            17px;
  height:           17px;
  background-color: var(--pdc-on-primary);
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-starters {
  display: none;
}

/* ==========================================================
   FLOATING WIDGET
   ========================================================== */
.pdc-floating-wrap {
  position:        fixed;
  right:           20px;
  bottom:          20px;
  z-index:         99999;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             12px;
}

/* Backdrop */
.pdc-chat-backdrop {
  position:                fixed;
  inset:                   0;
  background:              rgba(15, 23, 42, 0.45);
  z-index:                 99998;
  backdrop-filter:         blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pdc-chat-backdrop[hidden] { display: none; }

/* Launcher button */
.pdc-chat-launcher {
  width:           var(--pdc-launcher-size, 56px);
  height:          var(--pdc-launcher-size, 56px);
  border-radius:   50%;
  background:      var(--pdc-primary, #2563eb);
  color:           var(--pdc-on-primary, #ffffff);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 18px 40px rgba(37, 99, 235, 0.34);
  position:        relative;
  z-index:         99999;
  transition:      transform 0.15s, box-shadow 0.15s;
}
.pdc-chat-launcher:hover {
  transform:  scale(1.06);
  box-shadow: 0 22px 48px rgba(37, 99, 235, 0.42);
}
.pdc-chat-launcher img {
  max-width:  56%;
  max-height: 56%;
  object-fit: contain;
}

/* Floating panel */
.pdc-chat-panel {
  width:    min(420px, calc(100vw - 24px));
  position: relative;
  z-index:  99999;
}
.pdc-chat-panel[hidden] { display: none; }

/* Teaser bubble */
.pdc-chat-teaser {
  max-width:   min(320px, calc(100vw - 100px));
  background:  var(--pdc-surface, #ffffff);
  color:       var(--pdc-text, #0f172a);
  border:      1px solid var(--pdc-border, #dbe3ee);
  border-radius: 16px;
  padding:     12px 14px;
  box-shadow:  0 16px 35px rgba(15, 23, 42, 0.15);
  font-size:   0.92rem;
  line-height: 1.45;
}

/* Body scroll lock */
.pdc-body-chat-open {
  overflow: hidden;
  position: fixed;
  width:    100%;
}

/* ----------------------------------------------------------
   Mobile — robust overlay behaviour
   ---------------------------------------------------------- */
@media (max-width: 640px) {
  .pdc-floating-wrap {
    right:       0;
    bottom:      0;
    left:        0;
    align-items: stretch;
    padding:     0;
    gap:         0;
  }

  .pdc-chat-launcher {
    position: fixed;
    right:    16px;
    bottom:   calc(16px + env(safe-area-inset-bottom, 0px));
    z-index:  100000;
  }

  .pdc-chat-panel {
    position:   fixed;
    left:       12px;
    right:      12px;
    top:        calc(12px + env(safe-area-inset-top, 0px));
    bottom:     calc(12px + env(safe-area-inset-bottom, 0px));
    width:      auto;
    z-index:    99999;
    max-height: calc(var(--pdc-vv-height, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow:   hidden;
  }

  .pdc-chat-shell {
    width:      100%;
    height:     100%;
    min-height: unset;
    border-radius: 18px;
  }

  .pdc-chat-log {
    flex:       1 1 auto;
    min-height: 0;
  }

  /* Traditional layout: stack vertically */
  .pdc-chat-form {
    grid-template-columns: 1fr;
  }

  /* Traditional send button: full width */
  .pdc-chat-shell:not(.pdc-layout-centered):not(.pdc-layout-centered-start):not(.pdc-layout-fullscreen) .pdc-chat-send {
    width: 100%;
  }

  .pdc-chat-teaser { display: none; }

  /* Centered intro on mobile: already 100vw, ensure no side margins */
  .pdc-chat-shell.pdc-layout-centered.is-intro-state,
  .pdc-chat-shell.pdc-layout-centered-start.is-intro-state {
    width:         100vw;
    min-height:    var(--pdc-inline-height, 100dvh);
    height:        var(--pdc-inline-height, 100dvh);
    margin-left:   calc(50% - 50vw);
    margin-right:  calc(50% - 50vw);
    border-radius: 0;
  }

  .pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-form,
  .pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-form {
    padding:       0 12px;
    margin-bottom: 24px;
  }

  /* Centered conversation on mobile: full viewport */
  .pdc-chat-shell.pdc-layout-centered.is-conversation-state,
  .pdc-chat-shell.pdc-layout-centered-start.is-conversation-state {
    width:         100vw;
    height:        var(--pdc-inline-height, 100dvh);
    min-height:    var(--pdc-inline-height, 100dvh);
    margin-left:   calc(50% - 50vw);
    margin-right:  calc(50% - 50vw);
    border-radius: 0;
  }

  .pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-log,
  .pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-log {
    padding: 16px;
  }

  .pdc-chat-shell.pdc-layout-centered.is-conversation-state .pdc-chat-form,
  .pdc-chat-shell.pdc-layout-centered-start.is-conversation-state .pdc-chat-form {
    padding:       0 12px;
    margin-bottom: 16px;
  }

  /* Fullscreen on mobile */
  .pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-form {
    padding:       0 12px;
    margin-bottom: 24px;
  }

  .pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-empty-state {
    padding-top: 48px;
  }

  .pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-log {
    padding: 16px;
  }

  .pdc-chat-shell.pdc-layout-fullscreen.is-conversation-state .pdc-chat-form {
    padding:       0 12px;
    margin-bottom: 16px;
  }
}

@media (max-width: 380px) {
  .pdc-chat-panel {
    left:  6px;
    right: 6px;
  }
}

/* ----------------------------------------------------------
   Markdown rendering inside bot bubbles (.pdc-md)
   ---------------------------------------------------------- */
.pdc-chat-message__bubble.pdc-md {
  line-height: 1.6;
}

/* Headings */
.pdc-chat-message__bubble.pdc-md .pdc-md-h {
  margin:      0.6em 0 0.3em;
  font-weight: 700;
  line-height: 1.3;
}
.pdc-chat-message__bubble.pdc-md h1.pdc-md-h { font-size: 1.15em; }
.pdc-chat-message__bubble.pdc-md h2.pdc-md-h { font-size: 1.08em; }
.pdc-chat-message__bubble.pdc-md h3.pdc-md-h,
.pdc-chat-message__bubble.pdc-md h4.pdc-md-h,
.pdc-chat-message__bubble.pdc-md h5.pdc-md-h,
.pdc-chat-message__bubble.pdc-md h6.pdc-md-h { font-size: 1em; }

/* Lists */
.pdc-chat-message__bubble.pdc-md .pdc-md-ul,
.pdc-chat-message__bubble.pdc-md .pdc-md-ol {
  margin:  0.4em 0 0.4em 1.2em;
  padding: 0;
}
.pdc-chat-message__bubble.pdc-md .pdc-md-ul { list-style-type: disc; }
.pdc-chat-message__bubble.pdc-md .pdc-md-ol { list-style-type: decimal; }
.pdc-chat-message__bubble.pdc-md li {
  margin:  0.15em 0;
  display: list-item;
}

/* Inline code */
.pdc-chat-message__bubble.pdc-md code {
  font-family:   'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size:     0.88em;
  background:    rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  padding:       0.1em 0.35em;
}
.pdc-chat-shell[data-theme-mode="dark"] .pdc-chat-message__bubble.pdc-md code {
  background: rgba(255, 255, 255, 0.1);
}

/* Fenced code blocks */
.pdc-chat-message__bubble.pdc-md pre {
  background:    rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding:       10px 12px;
  overflow-x:    auto;
  margin:        0.5em 0;
  font-size:     0.85em;
  line-height:   1.5;
}
.pdc-chat-shell[data-theme-mode="dark"] .pdc-chat-message__bubble.pdc-md pre {
  background: rgba(255, 255, 255, 0.07);
}
.pdc-chat-message__bubble.pdc-md pre code {
  background:    none;
  padding:       0;
  border-radius: 0;
  font-size:     1em;
}

/* Links */
.pdc-chat-message__bubble.pdc-md a {
  color:           var(--pdc-primary);
  text-decoration: underline;
  word-break:      break-all;
}

/* Horizontal rule */
.pdc-chat-message__bubble.pdc-md .pdc-md-hr {
  border:     none;
  border-top: 1px solid var(--pdc-border);
  margin:     0.6em 0;
}

/* Bold / italic / strikethrough */
.pdc-chat-message__bubble.pdc-md strong { font-weight: 700; }
.pdc-chat-message__bubble.pdc-md em     { font-style: italic; }
.pdc-chat-message__bubble.pdc-md del    { text-decoration: line-through; opacity: 0.7; }

/* ----------------------------------------------------------
   Markdown tables
   ---------------------------------------------------------- */

/* Scroll wrapper: allows horizontal scroll on narrow screens */
.pdc-chat-message__bubble.pdc-md .pdc-md-table-wrap {
  overflow-x:    auto;
  -webkit-overflow-scrolling: touch;
  margin:        0.6em 0;
  border-radius: 8px;
  border:        1px solid var(--pdc-border);
}

/* Table base */
.pdc-chat-message__bubble.pdc-md .pdc-md-table {
  width:           100%;
  min-width:       320px;
  border-collapse: collapse;
  font-size:       0.9em;
  line-height:     1.5;
  background:      var(--pdc-surface);
}

/* Header row */
.pdc-chat-message__bubble.pdc-md .pdc-md-table thead tr {
  background:    color-mix(in srgb, var(--pdc-primary) 10%, var(--pdc-surface));
  border-bottom: 2px solid var(--pdc-border);
}

.pdc-chat-message__bubble.pdc-md .pdc-md-table th {
  padding:     9px 14px;
  font-weight: 600;
  font-size:   0.88em;
  text-align:  left;
  color:       var(--pdc-text);
  white-space: nowrap;
}

/* Data cells */
.pdc-chat-message__bubble.pdc-md .pdc-md-table td {
  padding:     8px 14px;
  color:       var(--pdc-text);
  border-top:  1px solid var(--pdc-border);
  vertical-align: top;
}

/* Zebra striping on body rows */
.pdc-chat-message__bubble.pdc-md .pdc-md-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--pdc-surface-soft) 60%, var(--pdc-surface));
}

/* Hover highlight */
.pdc-chat-message__bubble.pdc-md .pdc-md-table tbody tr:hover td {
  background: color-mix(in srgb, var(--pdc-primary) 6%, var(--pdc-surface));
}

/* First and last column border-radius on wrapper */
.pdc-chat-message__bubble.pdc-md .pdc-md-table thead tr th:first-child { border-radius: 7px 0 0 0; }
.pdc-chat-message__bubble.pdc-md .pdc-md-table thead tr th:last-child  { border-radius: 0 7px 0 0; }

/* Mobile: allow cells to wrap */
@media (max-width: 480px) {
  .pdc-chat-message__bubble.pdc-md .pdc-md-table th,
  .pdc-chat-message__bubble.pdc-md .pdc-md-table td {
    padding:    6px 10px;
    white-space: normal;
  }
}

/* ----------------------------------------------------------
   Download file cards in bot replies
   .pdc-download-card: rendered by renderMarkdown step 0 for
   openai-file:// and sandbox: links.
   .pdc-download-card--pending: unresolvable link (greyed out).
   ---------------------------------------------------------- */

.pdc-download-card {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 14px 8px 10px;
  margin:          4px 0;
  background:      var(--pdc-surface);
  border:          1px solid var(--pdc-border);
  border-radius:   8px;
  color:           var(--pdc-text);
  font-size:       0.88em;
  font-weight:     500;
  text-decoration: none;
  line-height:     1.3;
  max-width:       100%;
  word-break:      break-word;
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow:      0 1px 3px rgba(0,0,0,0.06);
}
.pdc-download-card:hover {
  background:      color-mix(in srgb, var(--pdc-primary) 8%, var(--pdc-surface));
  border-color:    color-mix(in srgb, var(--pdc-primary) 40%, var(--pdc-border));
  box-shadow:      0 2px 6px rgba(0,0,0,0.10);
  color:           var(--pdc-text);
  text-decoration: none;
}
.pdc-download-card svg {
  flex-shrink:  0;
  color:        var(--pdc-primary);
}
.pdc-download-card--pending {
  opacity:    0.55;
  cursor:     default;
  background: var(--pdc-surface-soft);
  border-style: dashed;
}
.pdc-download-card--pending:hover {
  background:   var(--pdc-surface-soft);
  border-color: var(--pdc-border);
  box-shadow:   none;
}

/* ----------------------------------------------------------
   Download file cards in bot replies
   Links to .xlsx, .pdf, .docx etc. are styled as download chips.
   ---------------------------------------------------------- */

/* Any https link inside a bot bubble that ends with a known file extension */
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".xlsx"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".xls"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".csv"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".docx"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".doc"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".pdf"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".txt"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".zip"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".png"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".jpg"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".jpeg"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".webp"],
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".gif"] {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 14px 8px 10px;
  margin:          4px 0;
  background:      var(--pdc-surface);
  border:          1px solid var(--pdc-border);
  border-radius:   8px;
  color:           var(--pdc-text);
  font-size:       0.88em;
  font-weight:     500;
  text-decoration: none;
  line-height:     1.3;
  max-width:       100%;
  word-break:      break-word;
  transition:      background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow:      0 1px 3px rgba(0,0,0,0.06);
}
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".xlsx"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".xls"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".csv"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".docx"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".doc"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".pdf"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".txt"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".zip"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".png"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".jpg"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".jpeg"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".webp"]:hover,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".gif"]:hover {
  background:    color-mix(in srgb, var(--pdc-primary) 8%, var(--pdc-surface));
  border-color:  color-mix(in srgb, var(--pdc-primary) 40%, var(--pdc-border));
  box-shadow:    0 2px 6px rgba(0,0,0,0.10);
  color:         var(--pdc-text);
  text-decoration: none;
}

/* Download arrow icon before the link text */
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".xlsx"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".xls"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".csv"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".docx"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".doc"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".pdf"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".txt"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".zip"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".png"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".jpg"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".jpeg"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".webp"]::before,
.pdc-chat-message--bot .pdc-chat-message__bubble a[href$=".gif"]::before {
  content:          '';
  display:          inline-block;
  flex-shrink:      0;
  width:            18px;
  height:           18px;
  background-color: var(--pdc-primary);
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='12' x2='12' y2='18'/%3E%3Cpolyline points='9 15 12 18 15 15'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='12' x2='12' y2='18'/%3E%3Cpolyline points='9 15 12 18 15 15'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ----------------------------------------------------------
   Label over chatten (.pdc-chat-above-label)
   Vises direkte over chat-shell'en som en overskrift.
   Skriftstørrelse styres via --pdc-label-font-size (sat af JS
   fra admin-indstillingen pdc_label_font_size).
   ---------------------------------------------------------- */
.pdc-chat-above-label {
  font-size:   var(--pdc-label-font-size, 16px);
  font-weight: 700;
  color:       var(--pdc-text, #1E252F);
  font-family: var(--pdc-font-family, Inter, system-ui, sans-serif);
  margin-bottom: 8px;
  line-height: 1.3;
  padding:     0 2px;
}

/* I centered og fullscreen layouts er shell'en 100vw bred og
   sidder i sidens flow — label vises stadig over den. */
.pdc-chat-shell.pdc-layout-centered  .pdc-chat-above-label,
.pdc-chat-shell.pdc-layout-fullscreen .pdc-chat-above-label {
  /* Centrér label i brede layouts */
  text-align: center;
}

/* Skjul label inde i floating panel (label giver ikke mening der) */
.pdc-chat-panel .pdc-chat-above-label {
  display: none;
}

/* ----------------------------------------------------------
   Velkomsttekst-skriftstørrelse (--pdc-welcome-font-size)
   Tilsidesætter de layout-specifikke clamp()-værdier når sat.
   ---------------------------------------------------------- */

/* Traditional layout: welcome vises som bot-besked-boble */
.pdc-chat-shell .pdc-chat-message--bot .pdc-chat-message__bubble {
  font-size: inherit;
}

/* Centered intro: tilsidesæt clamp() med admin-indstillingen */
.pdc-chat-shell.pdc-layout-centered.is-intro-state .pdc-chat-empty-state__welcome,
.pdc-chat-shell.pdc-layout-centered-start.is-intro-state .pdc-chat-empty-state__welcome {
  font-size: var(--pdc-welcome-font-size, clamp(1.75rem, 3vw, 2.5rem));
}

/* Fullscreen intro: tilsidesæt clamp() med admin-indstillingen */
.pdc-chat-shell.pdc-layout-fullscreen.is-intro-state .pdc-chat-empty-state__welcome {
  font-size: var(--pdc-welcome-font-size, clamp(2rem, 4vw, 3rem));
}

/* Traditional layout: welcome vises som bot-besked — brug custom property */
.pdc-chat-shell.pdc-layout-traditional .pdc-chat-message--bot:first-child .pdc-chat-message__bubble,
.pdc-chat-shell:not(.pdc-layout-centered):not(.pdc-layout-centered-start):not(.pdc-layout-fullscreen) .pdc-chat-message--bot:first-child .pdc-chat-message__bubble {
  font-size: var(--pdc-welcome-font-size, 1rem);
}