/* =============================================================================
 * Chainlit Base — UI overlay ("quiet luxury" minimal design system)
 *
 * Loaded in classic mode via `custom_css` and imported by public/copilot.css
 * for the copilot widget. Colours come from the Chainlit theme variables
 * (public/theme.json, rendered from THEME_* env vars) so both light and dark
 * modes and every personality's primary colour are honoured automatically.
 *
 * Dark mode selectors: `.dark` (classic, on <html>) and `#cl-shadow-root.dark`
 * (copilot shadow root).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Tokens
 * -------------------------------------------------------------------------- */

:root,
#cl-shadow-root {
  /* Secondary inks stay >= 4.5:1 (WCAG AA) on the background and muted surfaces. */
  --ui-ink-soft: hsl(var(--foreground) / 0.72);
  --ui-ink-faint: hsl(var(--foreground) / 0.62);
  --ui-hairline: hsl(var(--foreground) / 0.08);
  --ui-hairline-strong: hsl(var(--foreground) / 0.14);
  --ui-surface-1: hsl(var(--foreground) / 0.035);
  --ui-surface-2: hsl(var(--foreground) / 0.06);
  --ui-shadow-color: 24 10% 10%;
  --ui-shadow-soft:
    0 1px 2px hsl(var(--ui-shadow-color) / 0.04),
    0 8px 24px -12px hsl(var(--ui-shadow-color) / 0.12);
  --ui-shadow-float:
    0 1px 2px hsl(var(--ui-shadow-color) / 0.05),
    0 12px 40px -16px hsl(var(--ui-shadow-color) / 0.22);
  --ui-shadow-panel:
    0 0 0 1px hsl(var(--foreground) / 0.06),
    0 24px 80px -24px hsl(var(--ui-shadow-color) / 0.35);
  --ui-radius-lg: 1.25rem;
  --ui-radius-xl: 1.5rem;
  --ui-step-fg: hsl(var(--foreground) / 0.62);
  --ui-step-fg-hover: hsl(var(--foreground) / 0.82);
  --ui-step-body-max: 7.5rem;
  /* Reading template: body text size, rhythm and measure of the answers. */
  --ui-text-size: 16px;
  --ui-text-leading: 1.6;
  --ui-measure: 68ch;
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
}

.dark,
#cl-shadow-root.dark {
  --ui-hairline: hsl(0 0% 100% / 0.08);
  --ui-hairline-strong: hsl(0 0% 100% / 0.14);
  --ui-surface-1: hsl(0 0% 100% / 0.04);
  --ui-surface-2: hsl(0 0% 100% / 0.07);
  --ui-shadow-color: 0 0% 0%;
  --ui-shadow-soft:
    0 1px 2px hsl(0 0% 0% / 0.3),
    0 8px 24px -12px hsl(0 0% 0% / 0.5);
  --ui-shadow-float:
    0 1px 2px hsl(0 0% 0% / 0.35),
    0 12px 40px -16px hsl(0 0% 0% / 0.6);
  --ui-shadow-panel:
    0 0 0 1px hsl(0 0% 100% / 0.08),
    0 24px 80px -24px hsl(0 0% 0% / 0.75);
  --ui-step-fg: hsl(var(--foreground) / 0.62);
  --ui-step-fg-hover: hsl(var(--foreground) / 0.85);
}

/* -----------------------------------------------------------------------------
 * 2. Typography
 * -------------------------------------------------------------------------- */

body,
#cl-shadow-root {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  font-feature-settings: "ss01", "cv05";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.message-content {
  font-size: var(--ui-text-size);
  line-height: var(--ui-text-leading);
}

/* Comfortable line length when the conversation is wide (tables may use the full width). */
.message-content :is(p, ul, ol, blockquote, h1, h2, h3, h4) {
  max-width: var(--ui-measure);
}

.message-content > *:first-child { margin-top: 0; }
.message-content > *:last-child { margin-bottom: 0; }

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* Answers mostly use h3 for their sections: it shares h2's size to stay visible. */
.message-content h1 { font-size: 1.25em; margin: 1.1em 0 0.4em; }
.message-content :is(h2, h3) { font-size: 1.1em; margin: 1em 0 0.35em; }
.message-content h4 { font-size: 1em; margin: 0.8em 0 0.3em; }

.message-content p { margin: 0.45em 0; }

.message-content strong { font-weight: 600; }

.message-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-decoration-color: hsl(var(--primary) / 0.35);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--ui-ease);
}

.message-content a:hover { text-decoration-color: hsl(var(--primary)); }

.message-content ul,
.message-content ol { padding-left: 1.4em; margin: 0.35em 0; }

.message-content li { margin: 0.65em 0; }

.message-content li > p { margin: 0.1em 0; }

.message-content li::marker { color: var(--ui-ink-faint); }

.message-content blockquote {
  border-left: 2px solid hsl(var(--primary) / 0.5);
  padding-left: 1em;
  color: var(--ui-ink-soft);
  margin: 0.5em 0;
}

.message-content hr {
  border: 0;
  border-top: 1px solid var(--ui-hairline);
  margin: 1em 0;
}

.message-content pre { margin: 0.6em 0; }

.message-content code:not(pre code) {
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 0.375rem;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-hairline);
}

.message-content pre {
  border-radius: 0.875rem;
  border: 1px solid var(--ui-hairline);
  box-shadow: var(--ui-shadow-soft);
}

.message-content div:has(> div > table) {
  margin: 0.6em 0;
  border: 1px solid var(--ui-hairline-strong);
  border-radius: 0.75rem;
  box-shadow: none;
  background: transparent;
}

.message-content table {
  font-size: 1em;
  line-height: 1.5;
  border-collapse: collapse;
}

.message-content th {
  height: auto;
  font-weight: 600;
  color: var(--ui-ink-soft);
  background: var(--ui-surface-1);
  white-space: nowrap;
  vertical-align: bottom;
}

.message-content th,
.message-content td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--ui-hairline);
  text-align: left;
}

.message-content tr:last-child td { border-bottom: 0; }

/* -----------------------------------------------------------------------------
 * 3. Chrome: header, sidebar, scrollbars
 * -------------------------------------------------------------------------- */

#header {
  border-bottom: 0;
  background: hsl(var(--background) / 0.8);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

#header .text-muted-foreground { color: var(--ui-ink-soft); }

[data-sidebar="sidebar"] {
  border-right: 1px solid var(--ui-hairline);
}

[data-sidebar="menu-button"] {
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 450;
  transition: background-color 0.2s var(--ui-ease), color 0.2s var(--ui-ease);
}

[data-sidebar="group-label"] {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-ink-faint);
  font-weight: 600;
}

/* Scrollbars: thin, shown only while the pointer is over the scrolling area. */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover { scrollbar-color: var(--ui-hairline-strong) transparent; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-button { display: none; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*:hover::-webkit-scrollbar-thumb { background-color: var(--ui-hairline-strong); }

/* "Scroll to the latest message" button: translucent, so the content stays readable. */
.absolute.bottom-4 > button.rounded-full:has(svg.lucide-arrow-down) {
  background: hsl(var(--background) / 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ui-hairline-strong);
  color: var(--ui-ink-soft);
  box-shadow: var(--ui-shadow-soft);
}

.absolute.bottom-4 > button.rounded-full:has(svg.lucide-arrow-down):hover {
  color: hsl(var(--foreground));
}

/* Home link in the header (icon rendered via mask so it follows currentColor). */
a:has(img[alt="Aller sur le site web"]) { position: relative; }

a:has(img[alt="Aller sur le site web"])::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

img[alt="Aller sur le site web"] { display: none !important; }

/* -----------------------------------------------------------------------------
 * 4. Welcome screen & starters
 * -------------------------------------------------------------------------- */

.welcome-screen { gap: 1.75rem; }

.welcome-screen .text-3xl,
.welcome-screen h1,
.welcome-screen h2 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

#starters button {
  border-radius: 999px;
  border: 1px solid var(--ui-hairline);
  background: transparent;
  color: var(--ui-ink-soft);
  font-weight: 450;
  box-shadow: none;
  transition:
    border-color 0.2s var(--ui-ease),
    background-color 0.2s var(--ui-ease),
    color 0.2s var(--ui-ease),
    transform 0.2s var(--ui-ease);
}

#starters button:hover {
  border-color: var(--ui-hairline-strong);
  background: var(--ui-surface-1);
  color: hsl(var(--foreground));
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
 * 5. Messages
 * -------------------------------------------------------------------------- */

.step { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

.ai-message .flex-col.items-start { gap: 0.375rem; }

/* No assistant avatar: free text versus the user's bubble already tells who speaks. */
.ai-message { gap: 0; }

.ai-message > span:first-child { display: none; }

/* User message: soft, right-aligned bubble, no avatar. */
.step[data-step-type="user_message"] .bg-accent {
  background: var(--ui-surface-2) !important;
  border-radius: var(--ui-radius-lg) !important;
  border-bottom-right-radius: 0.5rem !important;
  padding: 0.55rem 1rem !important;
  box-shadow: 0 0 0 1px var(--ui-hairline) inset;
}

.step[data-step-type="user_message"] .message-content {
  font-size: var(--ui-text-size);
  line-height: 1.5;
}

.step[data-step-type="user_message"] .message-content p { margin: 0; }

.step[data-step-type="user_message"] .edit-message,
.step[data-step-type="user_message"] .favorite-message {
  color: var(--ui-ink-faint);
}

/* Assistant action row (copy / feedback) — quiet until hovered. */
.step[data-step-type="assistant_message"] button.text-muted-foreground {
  color: var(--ui-ink-faint);
}

/* -----------------------------------------------------------------------------
 * 6. Steps (reasoning / tool calls) — light grey, compact, bounded while live
 * -------------------------------------------------------------------------- */

.step[data-step-type]:not([data-step-type$="_message"]) {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}

.step[data-step-type]:not([data-step-type$="_message"]) > div > div {
  padding-bottom: 0 !important;
}

/* Header line: "Using <name>" / "Used <name>" (with or without accordion). */
.step[data-step-type]:not([data-step-type$="_message"]) button[id^="step-"],
.step[data-step-type]:not([data-step-type$="_message"]) p[id^="step-"] {
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--ui-step-fg) !important;
  min-height: 1.5rem;
  padding: 0.125rem 0 !important;
  transition: color 0.2s var(--ui-ease);
}

.step[data-step-type]:not([data-step-type$="_message"]) button[id^="step-"]:hover {
  color: var(--ui-step-fg-hover) !important;
}

.step[data-step-type]:not([data-step-type$="_message"]) button[id^="step-"] > svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.55;
  transition: transform 0.25s var(--ui-ease), opacity 0.2s var(--ui-ease);
}

.step[data-step-type]:not([data-step-type$="_message"]) button[id^="step-"]:hover > svg {
  opacity: 0.9;
}

/* Status marker before the label. The backend drives the states (progress events:
   step_name while running, close + end_name when done, error): this only shows them. */
.step[data-step-type]:not([data-step-type$="_message"]) :is(button, p)[id^="step-"]::before {
  content: "";
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  -webkit-mask: var(--ui-step-marker) center / contain no-repeat;
  mask: var(--ui-step-marker) center / contain no-repeat;
  --ui-step-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Running: a softly pulsing dot. */
.step[data-step-type]:not([data-step-type$="_message"]) :is(button, p)[id^="step-"]:is(.loading-shimmer, :has(.loading-shimmer))::before {
  --ui-step-marker: radial-gradient(circle, #000 0 32%, transparent 36%);
  animation: ui-step-running 1.4s var(--ui-ease) infinite;
}

/* Failed. */
.step[data-step-type]:not([data-step-type$="_message"]) :is(button, p)[id^="step-"]:is(.text-red-500, :has(.text-red-500))::before {
  color: hsl(var(--destructive));
  --ui-step-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

@keyframes ui-step-running {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Running state: Chainlit's shimmer, toned down to match the grey. */
.step[data-step-type]:not([data-step-type$="_message"]) .loading-shimmer {
  color: var(--ui-step-fg) !important;
  animation-duration: 2.6s;
}

.step[data-step-type]:not([data-step-type$="_message"]) .text-red-500 {
  color: hsl(var(--destructive)) !important;
}

/* Body: bounded scroll area, anchored to the latest line while streaming
   (column-reverse trick) with a soft fade on the top edge. */
.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary {
  display: flex;
  flex-direction: column-reverse;
  max-height: var(--ui-step-body-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0.25rem 0 0.375rem 0.375rem !important;
  padding: 1rem 0.75rem 0.125rem 0.875rem !important;
  border-left: 1px solid var(--ui-hairline-strong) !important;
  color: var(--ui-step-fg);
  font-size: 0.8125rem;
  line-height: 1.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
  scrollbar-width: none;
}

.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary::-webkit-scrollbar {
  display: none;
}

/* Restore the visual order of the (at most four) direct children under column-reverse. */
.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary > :nth-child(1) { order: 5; }
.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary > :nth-child(2) { order: 4; }
.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary > :nth-child(3) { order: 3; }
.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary > :nth-child(4) { order: 2; }
.step[data-step-type]:not([data-step-type$="_message"]) .border-l-2.border-primary > :nth-child(5) { order: 1; }

.step[data-step-type]:not([data-step-type$="_message"]) .message-content {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.step[data-step-type]:not([data-step-type$="_message"]) .message-content [role="article"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

.step[data-step-type]:not([data-step-type$="_message"]) .message-content p {
  margin: 0.2em 0;
}

.step[data-step-type]:not([data-step-type$="_message"]) .message-content pre,
.step[data-step-type]:not([data-step-type$="_message"]) .message-content code {
  font-size: 0.75rem;
}

.step[data-step-type]:not([data-step-type$="_message"]) .message-content strong {
  font-weight: 600;
  color: var(--ui-step-fg-hover);
}

/* Nested steps inside a step body stay flush and compact. */
.step[data-step-type]:not([data-step-type$="_message"]) .step {
  padding: 0 !important;
}

/* Legacy loading dots repositioned by custom.js inside step headers. */
.step-loading-dots-replaced {
  font-size: 0.75rem;
  color: var(--ui-step-fg);
}

/* -----------------------------------------------------------------------------
 * 7. Composer — floating pill
 * -------------------------------------------------------------------------- */

#message-composer {
  background: hsl(var(--card)) !important;
  border: 1px solid var(--ui-hairline);
  border-radius: var(--ui-radius-xl) !important;
  box-shadow: var(--ui-shadow-float);
  min-height: 0 !important;
  padding: 0.625rem 0.75rem 0.5rem 1.125rem !important;
  transition: border-color 0.2s var(--ui-ease), box-shadow 0.25s var(--ui-ease);
}

#message-composer:focus-within {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow:
    var(--ui-shadow-float),
    0 0 0 4px hsl(var(--primary) / 0.08);
}

#message-composer #chat-input,
#message-composer textarea {
  font-size: 0.9375rem;
  line-height: 1.55;
  padding-top: 0.25rem;
}

#message-composer #chat-input::placeholder,
#message-composer textarea::placeholder,
#message-composer [data-placeholder]::before {
  color: var(--ui-ink-faint);
  font-weight: 400;
}

#message-composer button:not(#chat-submit):not(#stop-button) {
  color: var(--ui-ink-faint);
  border-radius: 999px;
  transition: color 0.2s var(--ui-ease), background-color 0.2s var(--ui-ease);
}

#message-composer button:not(#chat-submit):not(#stop-button):hover {
  color: hsl(var(--foreground));
  background: var(--ui-surface-2) !important;
}

#chat-submit,
#stop-button {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 999px !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 6px 16px -6px hsl(var(--primary) / 0.55);
  transition:
    transform 0.2s var(--ui-ease),
    box-shadow 0.2s var(--ui-ease),
    opacity 0.2s var(--ui-ease);
}

#chat-submit:hover:not(:disabled),
#stop-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px hsl(var(--primary) / 0.65);
}

#chat-submit:disabled {
  background: var(--ui-surface-2) !important;
  color: var(--ui-ink-faint) !important;
  box-shadow: none;
  opacity: 1;
}

#chat-submit svg,
#stop-button svg { width: 1.125rem !important; height: 1.125rem !important; }

.watermark {
  color: var(--ui-ink-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
 * 8. Interactive elements: actions, buttons, alerts
 * -------------------------------------------------------------------------- */

.ai-message button[variant="outline"],
.ai-message .border.bg-background {
  border-color: var(--ui-hairline-strong);
  border-radius: 0.75rem;
}

/* Highlight LLM-recommended actions (hotels & activities). */
button:has(svg.lucide-sparkles) {
  border-color: hsl(var(--primary) / 0.55) !important;
  background-color: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--primary)) !important;
  box-shadow:
    0 0 0 1px hsl(var(--primary) / 0.35),
    0 6px 18px -8px hsl(var(--primary) / 0.45);
  animation: recommended-pulse 2.8s var(--ui-ease) infinite;
}

button:has(svg.lucide-sparkles) svg.lucide-sparkles { color: hsl(var(--primary)); }

@keyframes recommended-pulse {
  0%, 100% { box-shadow: 0 0 0 1px hsl(var(--primary) / 0.35), 0 6px 16px -8px hsl(var(--primary) / 0.35); }
  50%      { box-shadow: 0 0 0 1px hsl(var(--primary) / 0.6),  0 10px 24px -8px hsl(var(--primary) / 0.55); }
}

/* In any container that holds a recommended (sparkles) action, hide the
   feedback thumbs-up/down buttons (matched by their lucide icon classes). */
*:has(> button:has(svg.lucide-sparkles)) > button:has(svg.lucide-thumbs-up),
*:has(> button:has(svg.lucide-sparkles)) > button:has(svg.lucide-thumbs-down),
div:has(button:has(svg.lucide-sparkles)) button:has(svg.lucide-thumbs-up),
div:has(button:has(svg.lucide-sparkles)) button:has(svg.lucide-thumbs-down) {
  display: none !important;
}

/* Non-recommended siblings of a recommended action: visibly clickable, calm. */
*:has(> button:has(svg.lucide-sparkles)) > button:not(:has(svg.lucide-sparkles)):not(:has(svg.lucide-thumbs-up)):not(:has(svg.lucide-thumbs-down)) {
  background-color: hsl(var(--primary) / 0.05) !important;
  border-color: hsl(var(--primary) / 0.22) !important;
  color: hsl(var(--primary)) !important;
  transition: background-color 0.2s var(--ui-ease), border-color 0.2s var(--ui-ease);
}

*:has(> button:has(svg.lucide-sparkles)) > button:not(:has(svg.lucide-sparkles)):not(:has(svg.lucide-thumbs-up)):not(:has(svg.lucide-thumbs-down)):hover {
  background-color: hsl(var(--primary) / 0.12) !important;
  border-color: hsl(var(--primary) / 0.4) !important;
}

/* -----------------------------------------------------------------------------
 * 9. Custom widgets injected by custom.js
 * -------------------------------------------------------------------------- */

#custom-welcome {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 1.25rem auto;
  padding: 1rem 1.25rem;
  text-align: center;
  color: hsl(var(--foreground));
  animation: custom-welcome-fade-in 0.3s var(--ui-ease);
}

#custom-welcome h2 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem 0;
}

#custom-welcome p {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0.35rem 0;
  color: var(--ui-ink-soft);
}

#custom-welcome strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

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

#custom-environment-banner {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  text-align: center;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0.375rem;
  border-radius: 0.5rem;
}

#custom-link-preview-popup {
  position: fixed;
  z-index: 9999;
  display: none;
  width: max-content;
  max-width: 320px;
  min-width: 180px;
  padding: 0.75rem 0.875rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid var(--ui-hairline);
  border-radius: 0.875rem;
  box-shadow: var(--ui-shadow-float);
  animation: custom-popup-fade-in 0.15s var(--ui-ease);
  pointer-events: auto;
}

#custom-link-preview-popup::before,
#custom-link-preview-popup::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
}

#custom-link-preview-popup::before { top: -10px; }
#custom-link-preview-popup::after { bottom: -10px; }

.custom-link-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.custom-link-preview-favicon {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
}

.custom-link-preview-domain {
  font-size: 0.8125rem;
  color: var(--ui-ink-soft);
  text-align: center;
  word-break: break-all;
}

.custom-link-preview-link {
  font-size: 0.8125rem;
  color: hsl(var(--primary));
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
}

.custom-link-preview-link:hover { background: hsl(var(--primary) / 0.15); }

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

/* -----------------------------------------------------------------------------
 * 10. Motion preferences
 * -------------------------------------------------------------------------- */

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