/* AI Mode styles, part 5 of 6 (loaded in order). */
/* Selected: DLS button gradient (matches NEW CHAT). The icon tile follows the DLS
   dark-surface pattern (/network orchestration tabs + glass tiles): a brighter glass
   tile with a Citron line icon — Citron as accent only, never a background. */
#page-experience .sc-card.active .persona-icon-wrap,
#page-experience .persona-card.active .persona-icon-wrap {
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--tl-citron, #ECE81A);
}
#page-experience .persona-icon-wrap i { font-size: 18px; line-height: 1; }
#page-experience .sc-card.active .persona-name,
#page-experience .persona-card.active .persona-name { color: var(--tl-white, #FFF); font-weight: 600; }
#page-experience .sc-card.active [class*="close"],
#page-experience .persona-card.active [class*="close"],
#page-experience .sc-card.active .sc-deselect,
#page-experience .persona-card.active .sc-deselect { color: rgba(255,255,255,.85); }
#page-experience .sc-card.active,
#page-experience .persona-card.active {
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  border-color: transparent; box-shadow: 0 10px 24px rgba(0,20,26,.32), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Sidebar actions: DLS buttons */
#page-experience .btn-new-chat,
#page-experience .btn-new-chat-guest,
#page-experience .btn-save-chats {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; padding: 0 24px; border-radius: var(--tl-radius-full, 360px);
  font-family: var(--tl-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity 150ms var(--mz-ease), background 150ms var(--mz-ease), border-color 150ms var(--mz-ease);
}
#page-experience .btn-new-chat,
#page-experience .btn-new-chat-guest {
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  color: var(--tl-white, #FFF); border: 0; box-shadow: 0 6px 16px rgba(0,20,26,.25);
}
#page-experience .btn-new-chat:hover,
#page-experience .btn-new-chat-guest:hover { opacity: .85; }
#page-experience .btn-save-chats {
  background: transparent; color: var(--tl-white, #FFF);
  border: 1.5px solid rgba(255,255,255,.55);
}
#page-experience .btn-save-chats:hover { background: rgba(255,255,255,.1); border-color: var(--tl-white, #FFF); }
#page-experience .sidebar-auth { padding: 12px 0 18px; }

/* ---------- Chat surface ---------- */
#page-experience .chat-area {
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(0,167,181,.10), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(0,135,85,.07), transparent 60%),
    var(--tl-white, #FFF);
}

/* Welcome: DLS hero composition */
#page-experience .welcome-sparkle { opacity: 1; margin-bottom: 22px; }
#page-experience .welcome-sparkle > div {
  width: 64px !important; height: 64px !important; border-radius: 16px !important;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,126,158,.28);
}
#page-experience .welcome-sparkle img { display: none !important; }
#page-experience .welcome-sparkle > div::before {
  content: ""; width: 30px; height: 30px; background: var(--tl-white, #FFF);
  -webkit-mask: var(--mz-sparks) center / contain no-repeat; mask: var(--mz-sparks) center / contain no-repeat;
}
#page-experience {
  --mz-sparks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M8 15c4.875 0 7-2.051 7-7 0 4.949 2.11 7 7 7-4.89 0-7 2.11-7 7 0-4.89-2.125-7-7-7ZM2 6.5c3.134 0 4.5-1.318 4.5-4.5 0 3.182 1.357 4.5 4.5 4.5-3.143 0-4.5 1.357-4.5 4.5 0-3.143-1.366-4.5-4.5-4.5Z'/></svg>");
}
#page-experience .welcome-eyebrow {
  margin: 0 0 14px; font-size: 14px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#page-experience .welcome-state h2 {
  font-size: clamp(30px, 3.2vw, 44px) !important; font-weight: 600; line-height: 1.12;
  letter-spacing: -.015em; text-transform: none; color: var(--tl-deep-ocean, #003D4C);
  max-width: 18ch; margin: 0 0 30px; text-wrap: balance;
}
#page-experience .welcome-state > p:not(.welcome-eyebrow) { display: none; }

/* Prompt: DLS hero AI input (.tl-hero__ai) — in welcome and docked */
#page-experience .input-bar {
  background: transparent; border-top: 0; padding: 14px 40px 8px;
}
#page-experience .input-inner {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 8px 8px 22px;
  background: var(--tl-white, #FFF); border: 1px solid transparent;
  border-radius: 32px; box-shadow: var(--mz-rest-shadow);
  transition: box-shadow 150ms var(--mz-ease);
}
#page-experience .input-inner:hover { box-shadow: 0 2px 4px rgba(91,103,112,.16), 0 6px 18px rgba(91,103,112,.20); }
#page-experience .input-inner:focus-within { box-shadow: var(--mz-focus-glow); border-color: transparent; }
#page-experience .input-inner::before {
  content: ""; flex: 0 0 22px; width: 22px; height: 22px; background: var(--tl-emerald, #008755);
  -webkit-mask: var(--mz-sparks) center / contain no-repeat; mask: var(--mz-sparks) center / contain no-repeat;
}
#page-experience .input-textarea {
  font-family: var(--tl-font-sans); font-size: 17px; line-height: 1.45; color: var(--tl-deep-ocean, #003D4C);
  padding: 10px 0;
}
#page-experience .input-textarea::placeholder { color: var(--tl-text-secondary, #5B6770); }
#page-experience .attach-btn {
  order: 3; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: transparent; color: var(--tl-gray-60, #7C7C7C);
  transition: background 150ms var(--mz-ease), color 150ms var(--mz-ease);
}
#page-experience .attach-btn:hover { background: var(--tl-slate-10, #F0F1F1); color: var(--tl-deep-ocean, #003D4C); }
#page-experience .input-textarea { order: 2; }
#page-experience .send-btn {
  order: 4; flex: 0 0 auto; width: auto; height: 48px; padding: 0 24px; gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--tl-radius-full, 360px);
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  color: var(--tl-white, #FFF); font-family: var(--tl-font-sans);
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: none; transition: opacity 150ms var(--mz-ease), transform 50ms var(--mz-ease);
}
#page-experience .send-btn::after { content: "Ask Mozart"; }
#page-experience .send-btn svg { display: none; }
#page-experience .send-btn:hover { opacity: .8; }
#page-experience .send-btn:active { opacity: .7; transform: translateY(.5px); }
/* Welcome prompt is the hero-size version */
#page-experience .welcome-state .input-bar { width: 100%; max-width: 840px; padding: 0; }
#page-experience .welcome-state .input-inner { min-height: 72px; border-radius: 36px; padding: 8px 8px 8px 26px; }
#page-experience .welcome-state .send-btn { height: 56px; padding: 0 32px; font-size: 14px; }
/* Docked composer: compact round gradient send button (DLS FAB) */
#page-experience .chat-area:not(.welcome-mode) .send-btn { width: 48px; padding: 0; }
#page-experience .chat-area:not(.welcome-mode) .send-btn::after {
  content: ""; width: 22px; height: 22px; background: var(--tl-white, #FFF);
  -webkit-mask: var(--mz-arrow) center / contain no-repeat; mask: var(--mz-arrow) center / contain no-repeat;
}
#page-experience {
  --mz-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20V4M5 11l7-7 7 7'/></svg>");
}

/* ---------- Messages ---------- */
#page-experience .chat-messages { gap: 28px; }
#page-experience .ai-avatar {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  color: var(--tl-white, #FFF); display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,126,158,.25);
}
#page-experience .ai-avatar svg, #page-experience .ai-avatar img { width: 18px; height: 18px; color: var(--tl-white, #FFF); filter: brightness(0) invert(1); }
#page-experience .ai-bubble {
  background: var(--tl-white, #FFF); border: 1px solid var(--tl-border-subtle, #E7E9E9);
  border-radius: 4px 16px 16px 16px; box-shadow: var(--tl-card-shadow-soft, 0 1px 4px 0 rgba(37,37,37,.06));
  padding: 24px 28px; font-size: 16px; line-height: 1.7; color: var(--tl-text-primary, #323F4B);
}
#page-experience .ai-bubble strong { color: var(--tl-deep-ocean, #003D4C); font-weight: 600; }
#page-experience .ai-bubble a { color: var(--tl-tidal, #007E9E); font-weight: 600; text-decoration: none; }
#page-experience .ai-bubble a:hover { color: var(--tl-deep-ocean, #003D4C); text-decoration: underline; }
#page-experience .user-bubble {
  background: var(--tl-deep-ocean, #003D4C); color: var(--tl-white, #FFF);
  border-radius: 16px 16px 4px 16px; padding: 14px 20px; font-size: 16px; line-height: 1.55;
  box-shadow: 0 6px 16px rgba(0,61,76,.18);
}
#page-experience .resp-section {
  font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content;
}

/* Suggestion + follow-up chips: DLS secondary pill buttons (gradient border) */
#page-experience .chat-chip,
#page-experience .followup-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px;
  border: 1.5px solid transparent; border-radius: var(--tl-radius-full, 360px);
  background: linear-gradient(var(--tl-white,#FFF), var(--tl-white,#FFF)) padding-box, var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) border-box;
  color: var(--tl-deep-ocean, #003D4C); font-family: var(--tl-font-sans); font-size: 14px; font-weight: 500; line-height: 1.35;
  text-align: left; box-shadow: none; cursor: pointer;
  transition: background 150ms var(--mz-ease), transform 150ms var(--mz-ease);
}
#page-experience .chat-chip:hover,
#page-experience .followup-chip:hover {
  background: linear-gradient(120deg, rgba(0,126,158,.10), rgba(0,135,85,.10)) padding-box, linear-gradient(var(--tl-white,#FFF), var(--tl-white,#FFF)) padding-box, var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) border-box;
  color: var(--tl-deep-ocean, #003D4C); transform: translateY(-1px);
}

/* Typing indicator */
/* The dots bubble takes the avatar's height at every breakpoint (row stretches to it). */
#page-experience .typing-row { align-items: stretch; }
#page-experience .typing-row .ai-avatar { margin-top: 0; }
#page-experience .typing-bubble { background: var(--tl-white,#FFF); border: 1px solid var(--tl-border-subtle,#E7E9E9); border-radius: 4px 16px 16px 16px;
  box-sizing: border-box; height: auto; min-height: 0; padding: 0 18px !important; display: flex; align-items: center; }
#page-experience .typing-dots span { background: var(--tl-tidal, #007E9E); }

/* Side-panel reopen buttons: DLS ghost FAB */
#page-experience .sidebar-reopen,
#page-experience .right-panel-reopen {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--tl-white, #FFF); color: var(--tl-deep-ocean, #003D4C);
  box-shadow: var(--tl-elevation-02, 0 4px 8px rgba(37,37,37,.2));
}
#page-experience .sidebar-reopen:hover,
#page-experience .right-panel-reopen:hover { box-shadow: var(--tl-elevation-03, 0 8px 16px rgba(37,37,37,.2)); transform: translateY(-2px); }

/* Right panel: same dark DLS surface as the sidebar (mirrored glow) */
#page-experience .right-panel {
  position: relative; isolation: isolate; border-left: 0;
  background:
    radial-gradient(420px 320px at 88% -4%, rgba(0,167,181,.30), transparent 70%),
    radial-gradient(360px 300px at 0% 62%, rgba(0,135,85,.26), transparent 70%),
    linear-gradient(188deg, var(--tl-evergreen, #006341) 0%, #00544F 30%, var(--tl-deep-ocean, #003D4C) 64%, #003E5E 88%, var(--tl-cobalt, #005587) 118%);
}
#page-experience .right-panel-header { border-bottom: 1px solid rgba(255,255,255,.10); }
#page-experience .right-panel-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88); }   /* superseded below: mirrors the left panel */
/* Both panel toggles: round icon buttons, like the site header's, with one hover tint. */
#page-experience .right-panel-toggle,
#page-experience .sidebar-toggle { color: var(--tl-white, #FFF); border-radius: 50%; }
#page-experience .right-panel-toggle:hover,
#page-experience .sidebar-toggle:hover { background: rgba(255,255,255,.15); }
#page-experience .rp-section { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
#page-experience .right-panel-empty p { color: rgba(255,255,255,.78); font-size: 13px; }
/* Cards on the dark surface: DLS white cards */
#page-experience .rp-link-card,
#page-experience .rp-video-card,
#page-experience .rp-image-card {
  background: var(--tl-white, #FFF); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,20,26,.20);
  transition: transform 200ms var(--mz-ease), box-shadow 200ms var(--mz-ease);
}
#page-experience .rp-link-card:hover,
#page-experience .rp-video-card:hover,
#page-experience .rp-image-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,20,26,.30); border-color: rgba(255,255,255,.4); }
#page-experience .rp-link-card { padding: 11px 12px; gap: 10px; margin-bottom: 8px; }
#page-experience .rp-link-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--tl-tidal-pastel, #E5EFF3); color: var(--tl-tidal, #007E9E); }
#page-experience .rp-link-icon i { font-size: 16px; line-height: 1; }
#page-experience .rp-link-title, #page-experience .rp-video-title { font-size: 12.5px; font-weight: 600; color: var(--tl-deep-ocean, #003D4C); line-height: 1.35; }
#page-experience .rp-link-desc, #page-experience .rp-video-meta { font-size: 11.5px; color: var(--tl-text-secondary, #5B6770); line-height: 1.4; }
#page-experience .rp-video-info { padding: 9px 12px 10px; }
#page-experience .rp-link-tag {
  font-size: 10px; font-weight: 650; letter-spacing: .14em; width: fit-content; margin-top: 4px;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#page-experience .rp-image-caption { font-size: 11.5px; color: var(--tl-text-secondary, #5B6770); }

/* Disclaimer */
#page-experience .input-disclaimer, #page-experience .chat-disclaimer { color: var(--tl-text-muted, #7C7C7C); font-size: 12px; }

/* ---------- Dialogs: DLS .tl-dialog ---------- */
.modal-overlay {
  background: rgba(0,48,61,.62) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal-box {
  border-radius: 16px !important; box-shadow: var(--tl-elevation-04, 0 24px 32px rgba(37,37,37,.3)) !important;
  padding: 32px !important; font-family: var(--tl-font-sans);
}
.modal-title {
  font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.014em !important;
  text-transform: none !important; color: var(--tl-deep-ocean, #003D4C) !important;
}
.form-row label { font-size: 14px; font-weight: 600; color: var(--tl-text-primary, #323F4B); letter-spacing: 0; text-transform: none; }
.form-row input, .form-row select {
  height: 48px; padding: 0 20px; border: 1px solid transparent !important; border-radius: var(--tl-radius-full, 360px) !important;
  background: var(--tl-white, #FFF); box-shadow: 0 1px 2px rgba(91,103,112,.12), 0 4px 12px rgba(91,103,112,.16);
  font-family: var(--tl-font-sans); font-size: 16px; color: var(--tl-text-primary, #323F4B);
  transition: box-shadow 150ms var(--tl-ease-emphasized, ease);
}
.form-row input:focus, .form-row select:focus {
  outline: none; box-shadow: -6px 2px 14px rgba(0,126,158,.45), 6px 2px 14px rgba(0,135,85,.45), 0 2px 6px rgba(91,103,112,.10);
}
.btn-modal-submit {
  height: 52px; border: 0 !important; border-radius: var(--tl-radius-full, 360px) !important;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) !important; color: var(--tl-white, #FFF) !important;
  font-family: var(--tl-font-sans); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity 150ms var(--tl-ease-emphasized, ease);
}
.btn-modal-submit:hover { opacity: .8; }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  #page-experience .input-bar { padding: 10px 16px 14px !important; } /* = .chat-messages side padding */
  #page-experience .input-inner { min-height: 56px; border-radius: 28px !important; padding: 6px 6px 6px 16px !important; }
  #page-experience .welcome-state .input-inner { min-height: 60px; }
  #page-experience .welcome-state .send-btn,
  #page-experience .send-btn { width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important; }
  #page-experience .send-btn::after {
    content: "" !important; width: 20px; height: 20px; background: var(--tl-white, #FFF);
    -webkit-mask: var(--mz-arrow) center / contain no-repeat; mask: var(--mz-arrow) center / contain no-repeat;
  }
  #page-experience .welcome-state h2 { font-size: 28px !important; }
  #page-experience .ai-bubble { padding: 16px 18px !important; font-size: 15px !important; }
}

/* ---------- Fit fixes (verified by measurement) ---------- */
#page-experience .chat-area.welcome-mode .welcome-state { width: 100%; max-width: 880px; }
#page-experience .welcome-state h2 { max-width: 22ch; }
/* Section headings at their approved size (9.5px / 1.8px tracking, 11px on wide
   screens): the 12px DLS eyebrow crowded "My Company's Business Segment" into the
   menu toggle. The row's own spacer keeps the distance; the toggle never shrinks. */
#page-experience .sidebar-section-label { font-size: 9.5px; letter-spacing: 1.2px; font-weight: 700; }
@media (min-width: 1800px) { #page-experience .sidebar-section-label { font-size: 11px; } }
#page-experience .sidebar-header .sidebar-section-hd { min-width: 0; flex: 0 1 auto; padding: 7px 0; }
#page-experience .sidebar-header .sidebar-section-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#page-experience .sidebar-header .sidebar-section-chevron { flex: 0 0 auto; }
#page-experience .sidebar-header .sidebar-toggle { flex: 0 0 auto; }
#page-experience .btn-save-chats { font-size: 12px; letter-spacing: .06em; white-space: nowrap; padding: 0 16px; }
/* Avatar: gradient disc with the sparkle glyph (legacy PNG logo hidden) */
#page-experience .ai-avatar img { display: none !important; }
#page-experience .ai-avatar::before {
  content: ""; width: 18px; height: 18px; background: var(--tl-white, #FFF);
  -webkit-mask: var(--mz-sparks) center / contain no-repeat; mask: var(--mz-sparks) center / contain no-repeat;
}
@media (max-width: 768px) {
  #page-experience .ai-avatar { width: 30px !important; height: 30px !important; min-width: 30px; border-radius: 50% !important; }
}

/* Placeholder stays on one line (it wrapped under the pill's clip) */
#page-experience .input-textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Collapsed sidebar must be fully hidden: the new padding only applies when it's shown */
#page-experience .sidebar.collapsed { padding: 0; box-shadow: none; }
@media (max-width: 1200px) {
  #page-experience .sidebar:not(.mobile-open) { padding: 0; box-shadow: none; }
}
/* Selected cards carry a × close control: keep long labels clear of it */
#page-experience .sc-card.active, #page-experience .persona-card.active { padding-right: 34px; }
@media (max-width: 1200px) {
  #page-experience .sidebar:not(.mobile-open)::before { display: none; }
}

/* ---------- Composer sits exactly on the message column ----------
   Same width as .msg-row at each breakpoint and the same side padding as
   .chat-messages, so the box's left edge meets the avatar and its right edge
   meets the bubble (as in the pre-DLS layout). */
#page-experience { --mz-col: 820px; }
#page-experience .chat-area:not(.welcome-mode) .input-inner {
  width: 100%; max-width: var(--mz-col); margin: 0 auto; box-sizing: border-box;
}
@media (min-width: 1800px) {
  #page-experience { --mz-col: 1000px; }
  #page-experience .input-bar { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 2400px) {
  #page-experience { --mz-col: 1200px; }
  #page-experience .input-bar { padding-left: 56px; padding-right: 56px; }
}
@media (max-width: 480px) {
  #page-experience .input-bar { padding: 8px 12px 12px !important; }
}
/* Placeholder: same lighter grey as the site's AI prompt (weight/size already match) */
#page-experience .input-textarea::placeholder { color: var(--tl-gray-60, #7C7C7C); font-weight: 400; }

/* Secondary dialog action: DLS secondary pill (gradient border, gradient text) */
.btn-modal-secondary {
  height: 52px; padding: 0 28px; border: 1.5px solid transparent; border-radius: var(--tl-radius-full, 360px);
  background: linear-gradient(var(--tl-white,#FFF), var(--tl-white,#FFF)) padding-box, var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) border-box;
  color: var(--tl-tidal, #007E9E); font-family: var(--tl-font-sans); font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background 150ms var(--tl-ease-emphasized, ease);
}
.btn-modal-secondary:hover {
  background: linear-gradient(120deg, rgba(0,126,158,.10), rgba(0,135,85,.10)) padding-box, linear-gradient(var(--tl-white,#FFF), var(--tl-white,#FFF)) padding-box, var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) border-box;
}
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.modal-actions .btn-modal-submit { width: auto; height: 48px; padding: 0 24px; margin: 0; }   /* = DLS .tl-btn */
.modal-actions .btn-modal-secondary { height: 48px; padding: 0 24px; }
.modal-body { font-family: var(--tl-font-sans); font-size: 15px; line-height: 1.7; color: var(--tl-text-secondary, #5B6770); margin: 12px 0 0; }

/* "Start a new chat?" / "Don't lose this conversation" — DLS dialog */
.save-prompt-box {
  width: min(460px, 92vw); padding: 32px !important; border-radius: 16px !important; text-align: left !important;
  background: var(--tl-white, #FFF); box-shadow: var(--tl-elevation-04, 0 24px 32px rgba(37,37,37,.3)) !important;
  font-family: var(--tl-font-sans);
}
.save-prompt-icon {
  width: 48px !important; height: 48px !important; border-radius: 12px !important; margin: 0 0 18px !important;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) !important; color: var(--tl-white, #FFF) !important;
  display: grid; place-items: center;
}
.save-prompt-title { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.014em; color: var(--tl-deep-ocean, #003D4C) !important; margin: 0 0 8px !important; }
.save-prompt-sub { font-size: 15px !important; line-height: 1.7 !important; color: var(--tl-text-secondary, #5B6770) !important; margin: 0 0 24px !important; }
.save-prompt-btns { display: flex !important; flex-direction: column; gap: 12px; }
.btn-save-login, .btn-continue-nosave {
  width: 100%; height: 52px; border-radius: var(--tl-radius-full, 360px) !important; font-family: var(--tl-font-sans) !important;
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-save-login {
  border: 0 !important; color: var(--tl-white, #FFF) !important;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) !important;
}
.btn-save-login:hover { opacity: .85; }
.btn-continue-nosave {
  border: 1.5px solid transparent !important; color: var(--tl-tidal, #007E9E) !important;
  background: linear-gradient(var(--tl-white,#FFF), var(--tl-white,#FFF)) padding-box, var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) border-box !important;
}
.btn-continue-nosave:hover {
  background: linear-gradient(120deg, rgba(0,126,158,.10), rgba(0,135,85,.10)) padding-box, linear-gradient(var(--tl-white,#FFF), var(--tl-white,#FFF)) padding-box, var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)) border-box !important;
}

/* Composer text grows with the message; no scrollbar until it reaches max height.
   border-box so the JS auto-grow (height = scrollHeight, which includes padding) fits. */
#page-experience .input-textarea { box-sizing: border-box; overflow-y: hidden; max-height: 180px; }

/* Composer stands out on the white chat surface */
#page-experience .input-inner {
  box-shadow: 0 0 0 1px rgba(0,61,76,.08), 0 2px 6px rgba(0,61,76,.10), 0 14px 36px rgba(0,61,76,.18);
}
#page-experience .input-inner:hover {
  box-shadow: 0 0 0 1px rgba(0,61,76,.12), 0 3px 8px rgba(0,61,76,.12), 0 18px 44px rgba(0,61,76,.22);
}
#page-experience .input-inner:focus-within { box-shadow: var(--mz-focus-glow), 0 14px 36px rgba(0,61,76,.16); }

/* Visitor messages: DLS button gradient (was solid Deep Ocean) */
#page-experience .user-bubble {
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%));
  color: var(--tl-white, #FFF); box-shadow: 0 8px 20px rgba(0,126,158,.22);
}

/* Citation hover preview (source-preview-float): DLS card */
.source-preview-float { border-radius: 12px; max-width: 280px; font-family: var(--tl-font-sans);
  box-shadow: 0 0 0 1px rgba(0,61,76,.08), 0 14px 32px rgba(0,61,76,.22); }
.source-preview-float .sp-thumb { height: auto; aspect-ratio: 16 / 9; }
.source-preview-float .sp-play svg { display: none; }
.source-preview-float .sp-play::after {
  content: ""; width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;
  background: rgba(0,61,76,.55) no-repeat 56% 50% / 18px 18px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M6 4L14 9L6 14V4Z' fill='%23FFFFFF'/></svg>");
  border: 1.5px solid rgba(255,255,255,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(0,20,26,.28);
}
.source-preview-float .sp-info { padding: 10px 12px 12px; }
.source-preview-float .sp-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.source-preview-float .sp-type {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px;
  font-size: 10px; font-weight: 650; letter-spacing: .14em; color: var(--tl-tidal, #007E9E);
}
.source-preview-float .sp-type i { display: inline-block; width: 12px; height: 12px; font-size: 12px; }
.source-preview-float .sp-type i::before { width: 12px; height: 12px; }
.source-preview-float .sp-url { font-size: 11px; color: var(--tl-gray-60, #7C7C7C); }

/* Mobile bottom sheet on the dark surface: white close (×) and drag handle */
#page-experience .right-panel.mobile-open .right-panel-toggle {
  background: rgba(255,255,255,.16) !important; color: var(--tl-white, #FFF) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
#page-experience .right-panel.mobile-open .right-panel-toggle:hover,
#page-experience .right-panel.mobile-open .right-panel-toggle:focus-visible {
  background: rgba(255,255,255,.26) !important; color: var(--tl-white, #FFF) !important;
}
#page-experience .right-panel .rp-drag-handle::after { background: rgba(255,255,255,.45) !important; }
#page-experience .right-panel .rp-drag-handle:active::after { background: rgba(255,255,255,.7) !important; }

/* Video cards: DLS /network "tl-video" card (white 16px card, WATCH NOW eyebrow,
   Deep Ocean title, translucent glass play disc; no Citron play button) */
#page-experience .rp-video-card { border-radius: 16px; border: 1px solid var(--tl-border-subtle, #E7E9E9); }
#page-experience .rp-video-thumb { height: auto; aspect-ratio: 16 / 9; background: var(--tl-deep-ocean, #003D4C); }
#page-experience .rp-video-play {
  width: 48px; height: 48px; box-sizing: border-box; border-radius: 50%; box-shadow: none;
  background: rgba(0,61,76,.55); border: 1.5px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--tl-white, #FFF);
  box-shadow: 0 4px 14px rgba(0,20,26,.28);
  transition: background 200ms var(--mz-ease), transform 200ms var(--mz-ease);
}
#page-experience .rp-video-play svg { width: 20px; height: 20px; margin-left: 2px; }
#page-experience .rp-video-card:hover .rp-video-play { background: rgba(0,61,76,.72); transform: scale(1.04); }
#page-experience .rp-video-info { padding: 12px 14px 14px; }
#page-experience .rp-video-eyebrow {
  margin: 0 0 6px; width: fit-content; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  background: var(--tl-gradient-button, linear-gradient(90deg,#007E9E 0%,#008755 100%)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--tl-emerald, #008755);
}
#page-experience .rp-video-title { font-size: 13.5px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--tl-deep-ocean, #003D4C); margin-bottom: 4px; }
#page-experience .rp-video-duration { background: none; padding: 0; font-weight: 500; color: var(--tl-text-secondary, #5B6770); }

/* Supporting content: the visual's source page */
#page-experience .rp-image-source {
  display: flex; align-items: center; gap: 6px; margin: 8px 2px 0;
  font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.82); text-decoration: none;
}
#page-experience .rp-image-source:hover,
#page-experience .rp-image-source:focus-visible { color: var(--tl-white, #FFF); text-decoration: underline; }
#page-experience .rp-image-source i { flex: 0 0 auto; font-size: 13px; }