/* Product showcase: an animated phone running the trip.expert guest widget, with
   floating cards around it. Driven by showcase.js (GSAP).

   Everything is scoped under .showcase so the page's own classes never leak in.
   The rig is a fixed 860×900 drawing that showcase.js scales to fit the stage.

   Shared by trip.expert and the demo website (see showcase.js), so it reads no page
   tokens: its colours are its own. A page may set one variable on .showcase:
   --sc-font, the font of the floating cards (default: the widget font). */

.showcase {
  /* Inside the phone: the real widget's tokens (mirror chat_api/static/chat.css). */
  --w-accent: #FF5C35;
  --w-text: #2C2C2C;
  --w-muted: #8A8780;
  --w-border: #E0E0E0;
  --w-alt: #F5F5F5;
  --w-guest: #D3E3FD;
  --w-font: "DM Sans", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --w-font-display: "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Around the phone: the trip.expert palette (logo red, ink). */
  --sc-accent: #AB1F24;
  --sc-accent-tint: rgba(171, 31, 36, 0.1);
  --sc-ink: #1B1B20;
  --sc-ink-2: #55555F;
  --sc-ink-3: #8C8C96;
  --sc-line: #E6E6EA;
  --sc-ok: #3E7D5A;
  --sc-panel: #F4F4F6;
  --sc-radius: 28px;

  --bezel: #0A0A0B;
  --rim: #C8CBD0;
  --rim-edge: #8F949B;

  position: relative;
  /* Fits the whole phone on short screens: the viewport minus the sticky header
     (72px) and some air, between a readable minimum and the full-size drawing.
     showcase.js scales the rig to this height. On narrow screens the script sets
     the height itself. */
  height: clamp(540px, calc(100vh - 120px), 820px);
  height: clamp(540px, calc(100svh - 120px), 820px);
  border-radius: var(--sc-radius);
  background: var(--sc-panel);
  overflow: hidden;
  isolation: isolate;
}

/* The page's ring motif, centred behind the phone. */
.showcase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1400px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(171, 31, 36, 0.06) 34px 48px);
  -webkit-mask-image: radial-gradient(circle, transparent 14%, #000 16%, rgba(0, 0, 0, 0.6) 26%, transparent 40%);
          mask-image: radial-gradient(circle, transparent 14%, #000 16%, rgba(0, 0, 0, 0.6) 26%, transparent 40%);
  z-index: -1;
}

/* SVG icons ignore the hidden attribute without this. */
.showcase [hidden] { display: none !important; }

.showcase .rig {
  position: absolute;
  top: 0;
  left: 0;
  width: 860px;
  height: 900px;
  transform-origin: 0 0;
}
.showcase .rig.narrow { width: 520px; }
.showcase .tilt { position: absolute; inset: 0; }
.showcase .ground {
  position: absolute;
  left: 50%;
  top: 842px;
  width: 520px;
  height: 56px;
  margin-left: -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27, 27, 32, 0.24), transparent);
  filter: blur(6px);
}
.showcase .pause {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sc-line);
  background: rgba(255, 255, 255, 0.85);
  color: var(--sc-ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.showcase .pause:hover { color: var(--sc-ink); background: #FFFFFF; }

/* ── Phone ── */
.showcase .phone {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 399px;
  height: 836px;
  margin-left: -199.5px;
  border-radius: 62px;
  background: var(--bezel);
  padding: 12px;
  box-shadow:
    0 0 0 1px #3A3B3E,
    0 0 0 4px var(--rim),
    0 0 0 5px var(--rim-edge),
    0 50px 90px -30px rgba(27, 27, 32, 0.45),
    0 22px 36px -16px rgba(27, 27, 32, 0.22);
}
.showcase .phone::before,
.showcase .phone::after {
  content: "";
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rim-edge), var(--rim));
}
.showcase .phone::before { left: -8px; top: 196px; height: 60px; box-shadow: 0 76px 0 var(--rim); }
.showcase .phone::after { right: -8px; top: 236px; height: 96px; }
.showcase .screen {
  position: relative;
  width: 375px;
  height: 812px;
  border-radius: 50px;
  overflow: hidden;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  font-family: var(--w-font);
  color: var(--w-text);
  box-shadow: 0 0 0 1px #000;
}
.showcase .island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 122px;
  height: 35px;
  margin-left: -61px;
  border-radius: 20px;
  background: #000;
  z-index: 30;
}
.showcase .statusbar {
  position: absolute;
  inset: 0 0 auto;
  height: 54px;
  padding: 18px 30px 0 40px;
  display: flex;
  justify-content: space-between;
  font: 600 16px/1.2 -apple-system, "SF Pro Text", var(--w-font);
  color: #FFFFFF;
  z-index: 20;
}
.showcase .statusbar svg { display: block; }
.showcase .sb-icons { display: flex; gap: 6px; align-items: center; }

.showcase .w-top { position: relative; flex-shrink: 0; height: 300px; overflow: hidden; background: #FFFFFF; }
.showcase .w-photo { position: absolute; inset: 0; background: url("hotel.jpg") center 40% / cover no-repeat; }
.showcase .w-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, transparent 30%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}
.showcase .w-photo-text { position: absolute; left: 22px; bottom: 20px; color: #FFFFFF; z-index: 1; }
.showcase .w-photo-name { font: 700 26px/1.1 var(--w-font-display); }
.showcase .w-photo-loc { font-size: 14px; opacity: 0.88; margin-top: 4px; }
.showcase .w-compact {
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #F0EEEB;
  opacity: 0;
}
.showcase .w-avatar { width: 34px; height: 34px; border-radius: 50%; background: url("hotel.jpg") center / cover no-repeat; flex-shrink: 0; }
.showcase .w-compact-name { font-weight: 500; font-size: 15px; line-height: 1.2; }
.showcase .w-compact-loc { font-size: 12px; color: var(--w-muted); }

.showcase .w-msgs { position: relative; flex: 1; overflow: hidden; }
.showcase .w-track { padding: 22px 22px 18px; display: flex; flex-direction: column; }
.showcase .w-welcome { text-align: center; padding: 6px 4px 4px; overflow: hidden; }
.showcase .w-welcome h3 { font: 700 22px/1.2 var(--w-font-display); margin: 0 0 8px; color: var(--w-text); letter-spacing: 0; }
.showcase .w-welcome p { font-size: 15px; line-height: 1.55; }
.showcase .w-welcome small { display: block; margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--w-muted); }

.showcase .msg-user {
  align-self: flex-end;
  max-width: 82%;
  margin-top: 22px;
  padding: 10px 16px;
  background: var(--w-guest);
  border-radius: 18px 4px 18px 18px;
  font-size: 15px;
  line-height: 1.45;
  transform-origin: 100% 100%;
}
.showcase .msg-bot { align-self: flex-start; max-width: 94%; margin-top: 16px; font-size: 15px; line-height: 1.55; }
.showcase .msg-bot p { margin: 0; }
.showcase .msg-bot p + p { margin-top: 2px; }
.showcase .msg-bot b { font-weight: 700; }
.showcase .wd { display: inline-block; white-space: pre; }
.showcase .msg-tools { margin-top: 8px; color: var(--w-muted); opacity: 0; }
.showcase .w-typing { align-self: flex-start; margin-top: 18px; display: flex; gap: 5px; padding: 6px 0; }
.showcase .w-typing i { width: 7px; height: 7px; border-radius: 50%; background: #B9B5AE; display: block; }

/* Contact form card (mirrors .chat__contact-card) */
.showcase .w-contact {
  position: relative;
  margin-top: 18px;
  border: 1px solid var(--w-border);
  border-radius: 16px;
  padding: 46px 18px 16px;
  background: #FFFFFF;
  overflow: hidden;
  transform-origin: 50% 100%;
}
.showcase .w-contact-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 16px;
  background: #D4EDDA;
  color: #1E5631;
  font-size: 13px;
  font-weight: 500;
  border-bottom-right-radius: 16px;
}
.showcase .w-contact-x { position: absolute; top: 8px; right: 12px; color: var(--w-muted); font-size: 20px; line-height: 1; }
.showcase .w-field-c { margin-bottom: 12px; }
.showcase .w-label { display: block; font-size: 13px; color: var(--w-text); margin-bottom: 5px; }
.showcase .w-label i { color: #C0605A; font-style: normal; }
.showcase .w-input-c {
  position: relative;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--w-border);
  border-radius: 10px;
  background: var(--w-alt);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 0.2s;
}
.showcase .w-input-c.focus { border-color: #B9B5AE; background: #FFFFFF; }
.showcase .w-input-c.select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid var(--w-muted);
  border-bottom: 1.5px solid var(--w-muted);
  transform: rotate(45deg);
}
.showcase .w-input-c.area { min-height: 76px; }
.showcase .w-counter { text-align: right; font-size: 11px; color: var(--w-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.showcase .w-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.showcase .w-submit {
  position: relative;
  padding: 9px 22px;
  border-radius: 24px;
  background: var(--w-accent);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
}
.showcase .w-cancel { font-size: 14px; color: var(--w-muted); }
.showcase .w-privacy { margin-top: 12px; font-size: 11px; line-height: 1.45; color: var(--w-muted); }
.showcase .w-sent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  opacity: 0;
  font-weight: 500;
}
.showcase .w-sent-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #D4EDDA;
  color: #1E5631;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase .w-sent small { font-weight: 400; font-size: 13px; color: var(--w-muted); text-align: center; max-width: 24ch; }

/* Input bar */
.showcase .w-input { position: relative; flex-shrink: 0; padding: 8px 14px 30px; background: #FFFFFF; }
.showcase .w-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--w-border);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.showcase .w-plus,
.showcase .w-send {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.showcase .w-plus { border: 1px solid var(--w-border); color: var(--w-muted); }
.showcase .w-send { background: var(--w-accent); color: #FFFFFF; opacity: 0.35; }
.showcase .w-field { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; position: relative; height: 22px; }
.showcase .w-placeholder { color: var(--w-muted); position: absolute; inset: 0; }
.showcase .w-typed { position: absolute; inset: 0; }
.showcase .caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--w-accent);
  opacity: 0;
}
.showcase .ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--w-accent);
  opacity: 0;
  pointer-events: none;
}
.showcase .w-disclaimer { text-align: center; font-size: 11px; color: var(--w-muted); padding-top: 8px; }
.showcase .w-drawer {
  position: absolute;
  left: 14px;
  bottom: 92px;
  min-width: 210px;
  background: #FFFFFF;
  border: 1px solid var(--w-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  padding: 8px 0 10px;
  transform-origin: 0 100%;
  opacity: 0;
  z-index: 15;
}
.showcase .w-drawer-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 15px; }
.showcase .w-drawer-item .hl { position: absolute; inset: 0; background: var(--w-alt); opacity: 0; }
.showcase .w-drawer-item svg,
.showcase .w-drawer-item span { position: relative; }
.showcase .home-ind {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: #111111;
  z-index: 20;
}

/* ── Floating cards around the phone ── */
.showcase .card-pos { position: absolute; }
.showcase .card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  box-shadow: 0 28px 50px -22px rgba(27, 27, 32, 0.32), 0 4px 12px rgba(27, 27, 32, 0.06);
  padding: 16px 18px;
  color: var(--sc-ink);
  font-family: var(--sc-font, var(--w-font));
  opacity: 0;
}
.showcase .card-row { display: flex; align-items: center; gap: 12px; }
.showcase .card-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.showcase .ico-accent { background: var(--sc-accent-tint); color: var(--sc-accent); }
.showcase .ico-sky { background: var(--w-guest); color: #3A63B8; }
.showcase .card-k { font-size: 13px; color: var(--sc-ink-3); line-height: 1.2; }
.showcase .card-v { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-top: 2px; }

.showcase #c-online { left: 520px; top: 104px; }
.showcase #c-online .card { padding: 10px 16px 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.showcase .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-ok); box-shadow: 0 0 0 4px rgba(62, 125, 90, 0.18); }

.showcase #c-wifi { left: 0; top: 250px; width: 266px; }
.showcase .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(62, 125, 90, 0.13);
  color: var(--sc-ok);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
}
.showcase #c-speed { left: 596px; top: 420px; width: 250px; }
.showcase .speed-ring { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.showcase .speed-ring svg { display: block; transform: rotate(-90deg); }
.showcase .ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.showcase #c-checkin { left: 0; top: 560px; width: 272px; }
.showcase .tl { margin-top: 14px; }
.showcase .tl-bar { position: relative; height: 8px; border-radius: 4px; background: #EEF0F4; overflow: hidden; }
.showcase .tl-fill {
  position: absolute;
  inset: 0 0 0 50%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(171, 31, 36, 0.35), var(--sc-accent));
  transform-origin: 100% 50%;
  transform: scaleX(0);
}
.showcase .tl-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--sc-ink-3); font-variant-numeric: tabular-nums; }
.showcase #c-lang { left: 596px; top: 590px; width: 258px; }
.showcase .lang-v { font-size: 22px; font-weight: 700; margin-top: 2px; font-family: var(--w-font); }
.showcase .lang-v span { font-size: 14px; font-weight: 500; color: var(--sc-ink-3); margin-left: 6px; }
.showcase .gloss { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sc-line); font-size: 13px; line-height: 1.45; color: var(--sc-ink-2); opacity: 0; }
.showcase .gloss b { color: var(--sc-ink); }
.showcase #c-beach { left: 590px; top: 250px; width: 250px; }
.showcase #c-tg { left: 40px; top: 330px; width: 286px; }
.showcase .tg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.showcase .tg-logo { width: 34px; height: 34px; border-radius: 50%; background: #2AABEE; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.showcase .tg-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.showcase .tg-sub { font-size: 12px; color: var(--sc-ink-3); }
.showcase .tg-msg { background: #FFFFFF; border: 1px solid var(--sc-line); border-radius: 16px 16px 16px 6px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.showcase .tg-msg b { font-weight: 700; }
.showcase .tg-body { margin-top: 8px; }
.showcase .tg-link { margin-top: 8px; color: #2A7FD4; display: flex; align-items: center; gap: 6px; }
.showcase .tg-first { display: flex; align-items: center; gap: 6px; }
.showcase .tg-first .ti { color: var(--sc-accent); }
.showcase .ti { flex-shrink: 0; }
.showcase .tg-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px; border-radius: 12px; background: rgba(42, 171, 238, 0.12); color: #1F7FB8; font-size: 13px; font-weight: 500; }

.showcase .spark { position: absolute; width: 26px; height: 26px; opacity: 0; }
.showcase .spark svg { display: block; width: 100%; height: 100%; }

/* Narrow rig: cards cover the older messages at the top, never the newest one. */
.showcase .rig.narrow #c-online { display: none; }
.showcase .rig.narrow #c-wifi { left: 0; top: 190px; }
.showcase .rig.narrow #c-speed { left: 270px; top: 300px; }
.showcase .rig.narrow #c-checkin { left: 0; top: 330px; }
.showcase .rig.narrow #c-lang { left: 262px; top: 180px; }
.showcase .rig.narrow #c-beach { left: 270px; top: 320px; }
.showcase .rig.narrow #c-tg { left: 0; top: 140px; }