/* ============================================================================
   SARA — REALISTIC DEVICE + MULTI-CHANNEL CHAT UI  (v2 — faithful iOS WhatsApp)
   ----------------------------------------------------------------------------
   Rebuilt against a real iOS WhatsApp screenshot:
   · wallpaper doodles edge-to-edge (status bar + header float on it)
   · floating white pills: back-chip "‹ 2" and call-actions chip
   · big bubbles, bottom tails, time + blue checks INSIDE the bubble
   · iOS input row: +  [ field 🙂 ]  📷  🎙   (no send button when idle)
   · slim iPhone frame with Dynamic Island
   Threads are filled by chat-demo.js via [data-chat-scenario].
   ========================================================================== */

/* ===========================================================================
   iPHONE — slim, modern, Dynamic Island
   ======================================================================== */
.device {
  --bezel: 7px;
  width: min(295px, 100%);
  aspect-ratio: 393 / 830;
  margin-inline: auto;
  position: relative;
  border-radius: 3.1rem;
  padding: var(--bezel);
  background: linear-gradient(145deg, #4c4e52 0%, #1f2023 25%, #2b2c2f 50%, #18191c 76%, #404247 100%);
  box-shadow:
    0 0 0 1.5px #0a0b0d,
    0 1px 0 1px rgba(255,255,255,.09) inset,
    0 30px 60px -26px rgba(22,18,32,.55),
    0 12px 26px -18px rgba(22,18,32,.45);
}
.device::after {                  /* side buttons */
  content:""; position:absolute; right:-1.5px; top:25%; width:2.5px; height:64px;
  border-radius:3px; background:linear-gradient(#37383b,#202124);
  box-shadow: 0 84px 0 #28292c, 0 -106px 0 -26px #28292c;
}
.device .scr {
  position: relative; width: 100%; height: 100%;
  border-radius: 2.65rem; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.device .island {
  position: absolute; top: calc(var(--bezel) + 0.55rem); left: 50%;
  transform: translateX(-50%);
  width: 28%; height: 1.45rem; background: #000; border-radius: 1rem; z-index: 8;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.35);
}

/* ===========================================================================
   WHATSAPP THEME (.ch-wa) — wallpaper everywhere, floating chrome
   ======================================================================== */
.ch-wa {
  display: flex; flex-direction: column; height: 100%;
  background-color: #EBE2D6;
  /* the classic doodle wallpaper, hand-drawn as a repeating SVG tile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23D8C9B6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='22' r='4'/%3E%3Cpath d='M22 12v5M22 27v5M12 22h5M27 22h5M15 15l3.5 3.5M29 29l-3.5-3.5M29 15l-3.5 3.5M15 29l3.5-3.5'/%3E%3Cpath d='M64 18l1.8 3.8 4.2.6-3 3 .7 4.2-3.7-2-3.7 2 .7-4.2-3-3 4.2-.6z'/%3E%3Cpath d='M105 30c3-6 11-6 11 0 0 4-5.5 6-5.5 9 0 0-5.5-5-5.5-9z'/%3E%3Cpath d='M30 67c0-5 7-5 7 0s-7 5-7 10'/%3E%3Ccircle cx='33.5' cy='81' r='.8' fill='%23D8C9B6'/%3E%3Cpath d='M75 62v14a4 3.4 0 1 1-2-3'/%3E%3Cpath d='M75 62l8-2.4v12'/%3E%3Ccircle cx='81' cy='74.8' r='3'/%3E%3Cpath d='M118 70c-5 0-8 3.5-8 8s3 8 8 8M118 70c5 0 8 3.5 8 8'/%3E%3Cpath d='M16 112c4-7 12-7 16 0M20 109l-1.6-3M28 109l1.6-3'/%3E%3Cpath d='M64 104c0 6 4 10 10 10M64 104c0-4 3-7 7-7 3 0 5 2 5 4 0 4-5 4-5 8'/%3E%3Cpath d='M104 112l5 5 9-10'/%3E%3Ccircle cx='110' cy='113' r='9.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* --- iOS status bar (floats on the wallpaper) ------------------------------ */
.ch-wa .statusbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 2.5rem; padding: 0.55rem 1.35rem 0; flex: none;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.82rem;
  color: #0b141a; letter-spacing: 0.01em;
}
.ch-wa .statusbar .t { display: inline-flex; align-items: center; gap: 3px; padding-left: 0.45rem; }
.ch-wa .statusbar .si { display: inline-flex; align-items: center; gap: 4.5px; padding-right: 0.1rem; }
.ch-wa .statusbar svg { display: block; }

/* --- Floating chat header: back chip · avatar+name · call-actions chip ----- */
.ch-wa .wa-head {
  display: flex; align-items: center; gap: 0.5rem; flex: none;
  padding: 0.45rem 0.65rem 0.5rem;
}
.ch-wa .wa-head .chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(11,20,26,.08);
  color: #0b141a;
}
.ch-wa .wa-head .chip.back {
  gap: 2px; min-width: 2.9rem; height: 2.35rem; padding: 0 0.6rem;
  font-weight: 600; font-size: 0.95rem;
}
.ch-wa .wa-head .chip.back .arr { font-size: 1.5rem; line-height: 1; font-weight: 400; margin-top: -3px; }
.ch-wa .wa-head .av { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; box-shadow: 0 1px 2px rgba(11,20,26,.12); }
.ch-wa .wa-head .meta { line-height: 1.12; min-width: 0; }
.ch-wa .wa-head .meta strong {
  display: block; font-size: 1.02rem; color: #0b141a; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-wa .wa-head .meta .on { font-size: 0.7rem; color: #5b6770; }
.ch-wa .wa-head .chip.act {
  margin-left: auto; gap: 1.1rem; height: 2.35rem; padding: 0 0.95rem;
}
.ch-wa .wa-head .chip.act svg { color: #0b141a; }

/* --- Thread ----------------------------------------------------------------- */
.ch-wa .thread {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0.32rem;
  padding: 0.5rem 0.7rem 0.65rem; scrollbar-width: none;
  position: relative;
}
.ch-wa .thread::-webkit-scrollbar { display: none; }

/* date pill, e.g. "oggi" */
.ch-wa .datechip {
  align-self: center; flex: none;
  background: #FFFFFF; color: #3b4a54;
  font-size: 0.66rem; font-weight: 700;
  padding: 0.28rem 0.65rem; border-radius: 0.55rem;
  box-shadow: 0 1px 1px rgba(11,20,26,.08);
  margin-block: 0.25rem 0.45rem;
}

/* bubbles — big, soft-cornered, tail at the BOTTOM like iOS */
.ch-wa .bubble {
  position: relative; max-width: 80%;
  padding: 0.42rem 0.6rem 0.4rem;
  border-radius: 1.05rem;
  font-size: 0.92rem; line-height: 1.34;
  color: #0b141a;
  box-shadow: 0 1px 1px rgba(11,20,26,.10);
  animation: pop var(--dur-base) var(--ease-spring) both;
}
.ch-wa .bubble .from { display: none; }
.ch-wa .bubble .time {
  display: inline-block; float: right;
  margin: 0.55rem 0 0 0.5rem;
  font-size: 0.64rem; color: #6c7a83; line-height: 1;
}
.ch-wa .bubble strong { font-weight: 700; }
.ch-wa .bubble a { color: #027eb5; font-weight: 600; }

.ch-wa .bubble-sara  { align-self: flex-start; background: #FFFFFF; border-bottom-left-radius: 0.3rem; }
.ch-wa .bubble-guest { align-self: flex-end;   background: #D9FDD3; border-bottom-right-radius: 0.3rem; }
.ch-wa .bubble-guest .time::after {
  content: "✓✓"; color: #53BDEB; letter-spacing: -2.5px; margin-left: 3px; font-size: 0.7rem;
}

/* the little iOS tail, drawn by chat-demo.js as <svg class="tail"> */
.ch-wa .bubble .tail {
  display: block; position: absolute; bottom: 0; width: 11px; height: 12px;
}
.ch-wa .bubble-sara .tail  { left: -6.5px;  color: #FFFFFF; }
.ch-wa .bubble-guest .tail { right: -6.5px; color: #D9FDD3; transform: scaleX(-1); }

/* typing dots */
.ch-wa .typing {
  align-self: flex-start; display: inline-flex; gap: 4px;
  background: #FFFFFF; border-radius: 1.05rem; border-bottom-left-radius: 0.3rem;
  padding: 0.55rem 0.75rem; box-shadow: 0 1px 1px rgba(11,20,26,.10);
}
.ch-wa .typing i { width: 6px; height: 6px; border-radius: 50%; background: #93a5ad; opacity: .6; animation: ty 1.2s infinite; }
.ch-wa .typing i:nth-child(2){animation-delay:.15s} .ch-wa .typing i:nth-child(3){animation-delay:.3s}

/* floating scroll-to-bottom button (decor) */
.ch-wa .scrolldown {
  position: absolute; right: 0.7rem; bottom: 3.6rem; z-index: 4;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #FFFFFF; color: #54656f;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(11,20,26,.18);
  pointer-events: none;
}

/* --- iOS input row: +  [field 🙂]  camera  mic ------------------------------ */
.ch-wa .wa-input {
  display: flex; align-items: center; gap: 0.65rem; flex: none;
  padding: 0.4rem 0.8rem calc(0.55rem + 6px);
  margin: 0;
}
.ch-wa .wa-input .ico { color: #0b141a; flex: none; display: grid; place-items: center; background: none; border: 0; }
.ch-wa .wa-input .fieldwrap {
  flex: 1; min-width: 0; position: relative; display: flex; align-items: center;
  background: #FFFFFF; border-radius: 1.2rem;
  box-shadow: 0 1px 1px rgba(11,20,26,.08);
}
.ch-wa .wa-input .field {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  padding: 0.52rem 2.1rem 0.52rem 0.85rem;
  font-family: var(--font-sans); font-size: 0.9rem; color: #0b141a;
}
.ch-wa .wa-input .field::placeholder { color: #8696a0; }
.ch-wa .wa-input .sticker { position: absolute; right: 0.6rem; color: #54656f; pointer-events: none; }
/* iOS home indicator */
.ch-wa .wa-input::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 5px; width: 34%; height: 4px; border-radius: 4px; background: #0b141a; opacity: .85;
}
.ch-wa { position: relative; }

/* interactive send (only in the Ask-Sara widget): green circle, iOS-style */
.ch-wa .wa-input .send {
  width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%;
  background: #1DAA61; color: #fff; display: grid; place-items: center; border: 0;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.ch-wa .wa-input .send:hover { background: #169a55; }
.ch-wa .wa-input .send:active { transform: scale(0.92); }

/* quick-reply chips (interactive widget only) */
.ch-wa .hints {
  display: flex; gap: 6px; flex: none; padding: 0.45rem 0.8rem 0.1rem;
  overflow-x: auto; scrollbar-width: none;
}
.ch-wa .hints::-webkit-scrollbar { display: none; }
.ch-wa .hints button {
  flex: none; white-space: nowrap; cursor: pointer;
  border: 0; background: #FFFFFF; color: #0b7a60;
  border-radius: 1rem; padding: 0.38rem 0.7rem;
  font: 600 0.74rem var(--font-sans);
  box-shadow: 0 1px 1px rgba(11,20,26,.08);
  transition: background var(--dur-fast) var(--ease-out);
}
.ch-wa .hints button:hover { background: #e7f8f1; }

/* ===========================================================================
   FRAMELESS PANELS — Airbnb / Booking flanks
   ======================================================================== */
.panel {
  border-radius: 1.5rem; overflow: hidden; background: #fff;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; height: 100%;
}
.panel .thread {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.75rem 0.7rem; scrollbar-width: none;
}
.panel .thread::-webkit-scrollbar { display: none; }
.panel .bubble {
  max-width: 84%; position: relative;
  padding: 0.42rem 0.6rem; box-shadow: none;
  font-size: 0.82rem; line-height: 1.35; animation: pop var(--dur-base) var(--ease-spring) both;
}
.panel .bubble .from { display: none; }
.panel .bubble .tail { display: none; }
.panel .bubble .time { display: block; text-align: right; font-size: 0.6rem; margin-top: 2px; }
.panel .datechip {
  align-self: center; flex: none;
  font-size: 0.64rem; font-weight: 700; color: #8a8a8a;
  padding: 0.2rem 0.6rem; margin-block: 0.1rem 0.3rem;
}
.panel .typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.5rem 0.7rem; border-radius: 0.9rem; }
.panel .typing i { width: 6px; height: 6px; border-radius: 50%; opacity: .5; animation: ty 1.2s infinite; }
.panel .typing i:nth-child(2){animation-delay:.15s} .panel .typing i:nth-child(3){animation-delay:.3s}

.panel .ph {
  display: flex; align-items: center; gap: 0.5rem; flex: none; flex-wrap: nowrap;
  padding: 0.7rem 0.85rem; border-bottom: 1px solid #ededed;
}
.panel .ph .av { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none; }
.panel .ph .meta { min-width: 0; line-height: 1.15; }
.panel .ph .meta strong { display: block; font-size: 0.84rem; font-weight: 700; color: #222; }
.panel .ph .meta small { font-size: 0.68rem; color: #4a9c6d; font-weight: 600; }
.panel .ph .brand { margin-left: auto; flex: none; font-weight: 800; font-size: 0.8rem; letter-spacing: -0.01em; white-space: nowrap; }

/* Airbnb */
.ch-air .ph { background: #fff; }
.ch-air .ph .brand { color: #ff385c; }
.ch-air .thread { background: #fff; }
.ch-air .bubble { border-radius: 1.1rem; }
.ch-air .bubble-sara { align-self: flex-start; background: #f7f7f7; color: #222; border-bottom-left-radius: 0.3rem; }
.ch-air .bubble-guest { align-self: flex-end; background: #222222; color: #fff; border-bottom-right-radius: 0.3rem; }
.ch-air .bubble .time { color: #b0b0b0; }
.ch-air .bubble-guest .time { color: rgba(255,255,255,.6); }
.ch-air .bubble a { color: #ff385c; font-weight: 700; }
.ch-air .typing { background: #f7f7f7; }
.ch-air .typing i { background: #c2c2c2; }

/* Booking */
.ch-book .ph { background: #003b95; }
.ch-book .ph .meta strong { color: #fff; }
.ch-book .ph .meta small { color: #cdd9ef; }
.ch-book .ph .brand { color: #fff; }
.ch-book .ph .av { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.ch-book .thread { background: #f2f4f8; }
.ch-book .bubble { border-radius: 0.9rem; box-shadow: 0 1px 1px rgba(0,30,80,.06); }
.ch-book .bubble-sara { align-self: flex-start; background: #fff; color: #1a1a1a; border-bottom-left-radius: 0.25rem; }
.ch-book .bubble-guest { align-self: flex-end; background: #0071c2; color: #fff; border-bottom-right-radius: 0.25rem; }
.ch-book .bubble .time { color: #9aa7bd; }
.ch-book .bubble-guest .time { color: rgba(255,255,255,.7); }
.ch-book .bubble a { color: #0071c2; font-weight: 700; }
.ch-book .typing { background: #fff; box-shadow: 0 1px 1px rgba(0,30,80,.06); }
.ch-book .typing i { background: #9aa7bd; }

/* caption under the flank panels */
.panel-cap {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 0.85rem; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.02em; color: var(--color-text-muted);
}

/* V4 — language-demo panels (same Sara, other languages) */
.ch-lang .ph { background: #f7f6f4; }
.ch-lang .ph .brand { color: #1DAA61; font-size: 1rem; }
.ch-lang .thread { background: #EBE2D6; }
.ch-lang .bubble { border-radius: 0.8rem; box-shadow: 0 1px 1px rgba(11,20,26,.10); }
.ch-lang .bubble-sara { align-self: flex-start; background: #fff; color: #0b141a; border-bottom-left-radius: 0.25rem; }
.ch-lang .bubble-guest { align-self: flex-end; background: #D9FDD3; color: #0b141a; border-bottom-right-radius: 0.25rem; }
.ch-lang .bubble .time { color: #6c7a83; }
.ch-lang .typing { background: #fff; }
.ch-lang .typing i { background: #93a5ad; }
.ch-lang .datechip { background:#fff; color:#3b4a54; border-radius:.5rem; padding:.22rem .55rem; box-shadow:0 1px 1px rgba(11,20,26,.08); font-size:.62rem; font-weight:700; }