/* =========================================================
   EXPDEV · Extras
   1. Concierge (scripted AI-assistant demo)   .xc-*
   2. Section rail navigator                   .xr-*
   3. Spotlight polish: gold hairline + grain
   Self-contained: uses only the design tokens from styles.css.
   Logical properties throughout so RTL works.
   ========================================================= */

.xc-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------
   1. Concierge
   --------------------------------------------------------- */
.xc-launch {
  position: fixed; z-index: 800;
  inset-block-end: 24px; inset-inline-start: 24px;
  height: 52px; min-width: 52px;
  display: inline-flex; align-items: center; gap: 10px;
  padding-block: 0; padding-inline: 11px 20px;
  border-radius: 999px; border: 1px solid transparent;
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(135deg, var(--gold-light), var(--accent) 45%, var(--line-strong) 100%) border-box;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1;
  box-shadow: 0 16px 36px -16px var(--glow), 0 10px 30px -18px rgba(0, 0, 0, .55);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.xc-launch:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -16px var(--glow), 0 10px 30px -18px rgba(0, 0, 0, .55); }
.xc-launch__icon {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--gold-light), var(--accent));
  color: var(--accent-ink);
}
.xc-launch__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease), opacity .3s; }
.xc-launch__icon .xc-ico-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
.xc-launch[aria-expanded="true"] .xc-ico-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.xc-launch[aria-expanded="true"] .xc-ico-close { opacity: 1; transform: none; }
.xc-launch__ping {
  position: absolute; inset-block-start: -1px; inset-inline-end: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
.xc-launch__ping::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid var(--accent); animation: xcPing 2.4s var(--ease) infinite;
}
.xc-launch[aria-expanded="true"] .xc-launch__ping { display: none; }
@keyframes xcPing { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

/* panel */
.xc-panel {
  position: fixed; z-index: 850;
  inset-block-end: 88px; inset-inline-start: 24px;
  width: min(392px, calc(100vw - 48px));
  height: min(600px, calc(100dvh - 88px - var(--header-h, 76px) - 20px));
  min-height: 320px;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow), 0 30px 70px -40px var(--glow);
  color: var(--text);
  overflow: hidden;
  transform-origin: 0% 100%;
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.97);
  transition: opacity .35s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
[dir="rtl"] .xc-panel { transform-origin: 100% 100%; }
.xc-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.xc-panel::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 24px; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--accent), var(--gold-light), var(--accent), transparent);
  opacity: .9; pointer-events: none;
}

.xc-head {
  display: flex; align-items: center; gap: 12px;
  padding-block: 14px; padding-inline: 18px 12px;
  border-block-end: 1px solid var(--line);
}
.xc-avatar {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--gold-light), var(--accent) 60%, var(--gold-deep));
  color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.xc-avatar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xc-head__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.xc-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: .01em; }
.xc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.xc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.xc-close {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent; transition: border-color .3s, color .3s, background-color .3s;
}
.xc-close:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface); }
.xc-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.xc-note {
  margin: 0; padding: 8px 18px; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  background: var(--surface); border-block-end: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.xc-note svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

.xc-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.xc-log::-webkit-scrollbar { width: 6px; }
.xc-log::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }

.xc-msg {
  max-width: 88%; padding: 11px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere;
  animation: xcIn .45s var(--ease) both;
}
.xc-msg__text { white-space: pre-line; }
.xc-msg--bot {
  align-self: flex-start; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-end-start-radius: 5px;
}
.xc-msg--user {
  align-self: flex-end; color: var(--accent-ink);
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 80%, var(--gold-light)));
  border-end-end-radius: 5px;
}
.xc-msg.is-streaming .xc-msg__text::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px;
  vertical-align: -0.15em; background: var(--accent); animation: xcCaret .8s steps(1) infinite;
}
@keyframes xcCaret { 50% { opacity: 0; } }
@keyframes xcIn { from { opacity: 0; transform: translateY(8px); } }

.xc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; animation: xcIn .45s var(--ease) both; }
.xc-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent); background: transparent;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.2;
  transition: background-color .3s, border-color .3s, color .3s;
}
.xc-act:hover { background: var(--accent-soft); border-color: var(--accent); }
.xc-act svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .xc-act .xc-flip { transform: scaleX(-1); }

.xc-typing {
  align-self: flex-start; display: inline-flex; gap: 5px; align-items: center;
  padding: 14px 16px; border-radius: 16px; border-end-start-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
  animation: xcIn .35s var(--ease) both;
}
.xc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .35; animation: xcDot 1.2s var(--ease-io) infinite; }
.xc-typing span:nth-child(2) { animation-delay: .15s; }
.xc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes xcDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }

/* quick replies */
.xc-chips-wrap { position: relative; border-block-start: 1px solid var(--line); }
.xc-chips {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 10px 16px 4px; scroll-padding-inline: 16px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.xc-chips::-webkit-scrollbar { display: none; }
.xc-chip {
  flex: none; padding: 7px 12px; border-radius: 999px; min-height: 34px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13px; line-height: 1.2; color: var(--text-2); white-space: nowrap;
  transition: border-color .3s, color .3s, background-color .3s;
}
.xc-chip:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.xc-chip:focus-visible { outline-offset: -2px; }

.xc-form { display: flex; gap: 8px; align-items: center; padding: 8px 14px 14px; }
.xc-input {
  flex: 1; min-width: 0; height: 46px; padding-inline: 16px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 16px; /* 16px stops iOS zoom */
  transition: border-color .3s, box-shadow .3s;
}
.xc-input::placeholder { color: var(--muted); opacity: 1; }
.xc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.xc-input:focus-visible { outline: none; } /* accent border + 4px ring above is the focus indicator */
.xc-send {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 24px -12px var(--glow);
  transition: transform .3s var(--ease), opacity .3s;
}
.xc-send:hover { transform: translateY(-2px); }
.xc-send:disabled { opacity: .45; transform: none; cursor: default; }
.xc-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .xc-send svg { transform: scaleX(-1); }

/* small screens */
@media (max-width: 600px) {
  .xc-launch { padding: 0; width: 52px; justify-content: center; }
  .xc-launch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .xc-launch__icon { width: 34px; height: 34px; }
  .xc-launch__ping { inset-block-start: 7px; inset-inline-end: 7px; }
  .xc-panel {
    inset-inline: 12px; width: auto;
    inset-block-end: 86px;
    height: min(560px, calc(100dvh - 86px - var(--header-h, 64px) - 12px));
    min-height: 280px;
  }
  .xc-msg { font-size: 14px; max-width: 92%; }
}

/* ---------------------------------------------------------
   2. Section rail (desktop only)
   --------------------------------------------------------- */
.xr-rail { display: none; }
@media (min-width: 1100px) {
  .xr-rail {
    display: block; position: fixed; z-index: 780;
    inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  }
}
.xr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; position: relative; }
.xr-list::before {
  content: ""; position: absolute; inset-block: 13px; inset-inline-end: 13px; width: 1px;
  background: linear-gradient(transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
  pointer-events: none;
}
.xr-link {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  width: 28px; height: 26px; border-radius: 8px;
}
.xr-dot {
  position: relative; width: 7px; height: 7px; margin-inline-end: 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 38%, transparent); border: 1px solid transparent;
  transition: height .45s var(--ease), background-color .3s, border-color .3s, box-shadow .45s var(--ease);
}
.xr-link:hover .xr-dot { border-color: var(--accent); }
.xr-link.is-active .xr-dot {
  height: 18px; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--glow);
}
.xr-label {
  position: absolute; inset-inline-end: 34px; top: 50%;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.3; color: var(--text);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(6px, -50%); pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
[dir="rtl"] .xr-label { transform: translate(-6px, -50%); }
.xr-link:hover .xr-label, .xr-link:focus-visible .xr-label { opacity: 1; transform: translate(0, -50%); }
.xr-link.is-active .xr-label { color: var(--accent); }
.xr-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* ---------------------------------------------------------
   3. Spotlight polish
   --------------------------------------------------------- */
/* Gold hairline that traces the top edge (incl. the corner curves) on hover.
   A thin ring is cut out with a mask; only its top band is drawn, and a
   horizontal gradient fades it out towards the corners. */
.value, .office { position: relative; }
.it-card::after, .value::after, .office::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset-block-start: -1px; inset-inline: -1px; height: 40px;
  border-start-start-radius: inherit; border-start-end-radius: inherit;
  padding: 1px 1px 0;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--gold-light) 40%, var(--accent) 60%, var(--gold-light) 80%, transparent 100%);
  background-size: 200% 100%;
  /* (fade) ∩ (border-box − content-box): a 1px ring whose lower part fades out,
     so no anti-aliasing seam shows where the band ends. */
  -webkit-mask: linear-gradient(#000 35%, transparent 85%), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor;
  mask: linear-gradient(#000 35%, transparent 85%) intersect, linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path .9s var(--ease), opacity .35s var(--ease);
}
/* .it-card clips overflow at its padding box, so draw just inside the border */
.it-card::after { inset-block-start: 0; inset-inline: 0; }
[dir="rtl"] :is(.it-card, .value, .office)::after { clip-path: inset(0 0 0 100%); }
:is(.it-card, .value, .office):is(:hover, :focus-within)::after {
  clip-path: inset(0 0 0 0); opacity: 1;
  animation: xsShimmer 3.2s linear .9s infinite;
}
@keyframes xsShimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }
[dir="rtl"] :is(.it-card, .value, .office):is(:hover, :focus-within)::after { animation-direction: reverse; }

/* Film grain: static SVG noise, very low opacity, never intercepts input. */
:root { --xs-grain: .055; }
:root[data-theme="light"] { --xs-grain: .04; }
html::after {
  content: ""; position: fixed; inset: 0; z-index: 998; pointer-events: none;
  opacity: var(--xs-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------------------------------------------------------
   Reduced motion & print
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xc-launch__ping::after, .xc-typing span, .xc-msg.is-streaming .xc-msg__text::after { animation: none !important; }
  .xc-msg, .xc-acts, .xc-typing { animation: none !important; }
  .xc-panel { transform: none; transition: opacity .01ms, visibility 0s; }
  .xc-launch:hover, .xc-send:hover { transform: none; }
  :is(.it-card, .value, .office)::after { transition: none; }
  :is(.it-card, .value, .office):is(:hover, :focus-within)::after { animation: none !important; }
  .xr-dot, .xr-label { transition: none; }
}
@media print {
  .xc-launch, .xc-panel, .xr-rail { display: none !important; }
  html::after { display: none; }
}

/* comfortable tap targets for the chatbot chips */
.xc-chip { min-height: 40px; }