/* =============================================================================
   sbc-chat-widget-scenes.css

   What this file does:
   Lays out the website chat page's product scenes and draws the pieces they add to the shared scene
   kit: the open chat on its own (no browser around it), the owner's calendar (a day view and a
   two-day view), the list of website pages Sarah reads, the "From /faq" source tag, and the summary
   email's facts. The business in these scenes, Brightside Cleaning, wears its own teal, because the
   real widget always takes the business's colour.

   Context of where it's used in the repo:
   Linked from templates/ai-chatbot-for-website-LP.html after static/css/sbc-front-desk.css, whose
   tokens (--fd-*) and pieces (widget, bubbles, typing dots, chips, stub, pill, contact card, owner
   card) these scenes reuse. Markup: templates/includes/chat_widget_scene_macros.html. Player:
   static/js/sbc-front-desk-scenes.js (and static/js/sbc-scene-steps.js for the step scenes).
   Brand rules: SBC-all-services/brand/README.md and motion.md.

   What it calls:
   Nothing.

   What calls it:
   The <link rel="stylesheet"> in ai-chatbot-for-website-LP.html.
   ============================================================================= */

/* The sample business's own colours (the widget always wears the business's colour) */
.fd-scene--brightside{--fd-site-accent:#23707A;--fd-site-on-accent:#FFFFFF}

/* The open chat on its own, filling its camera */
.fd-widget.is-standalone{position:relative;right:auto;bottom:auto;width:100%;height:100%;box-shadow:var(--fd-shadow-device)}
.fd-widget.is-standalone .fd-widget-bubble{font-size:12.5px}

/* =============================================================================
   Hero: one whole conversation, with the owner's calendar beside it
   (620 x 600; phones 360 x 660, the calendar under the chat)
   ============================================================================= */
.fd-scene--chat-hero{--fd-w:620;--fd-h:600}
.fd-scene--chat-hero .fd-fit{background-color:var(--fd-forest);background-image:radial-gradient(var(--fd-stage-dot) 1px,transparent 1.5px);background-size:18px 18px;border-radius:16px}
.fd-chat-cam{left:24px;top:24px;width:340px;height:500px}
.fd-calendar-cam{left:386px;top:64px;width:210px}
.fd-chat-contact-cam{left:386px;top:368px;width:210px}
.fd-chat-contact-cam .fd-contact{width:100%}
.fd-chat-stub{position:absolute;left:150px;top:474px;z-index:20}
.fd-scene--chat-hero .fd-pill-row{top:546px}

/* The owner's calendar: a day view. Rows and events are placed from CSS variables on each element:
   --fd-calendar-row (hour label), --fd-calendar-start and --fd-calendar-length (events, in hours). */
.fd-calendar{background:var(--fd-white);color:var(--fd-ink);border-radius:12px;overflow:hidden;box-shadow:var(--fd-shadow-device)}
.fd-calendar-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 14px;border-bottom:1px solid var(--fd-line)}
.fd-calendar-head b{font:600 13px/1.2 var(--sans)}
.fd-calendar-head span{font:500 11.5px/1.2 var(--sans);color:var(--fd-muted)}
.fd-calendar-day{--fd-calendar-row-height:38px;position:relative;height:calc(var(--fd-calendar-hours) * var(--fd-calendar-row-height));margin:10px 10px 12px 0}
.fd-calendar-day::before{content:"";position:absolute;left:48px;right:0;top:0;bottom:0;background:repeating-linear-gradient(to bottom,var(--fd-line) 0 1px,transparent 1px var(--fd-calendar-row-height))}
.fd-calendar-hour{position:absolute;left:0;width:44px;top:calc(var(--fd-calendar-row) * var(--fd-calendar-row-height) - 5px);text-align:right;font:500 9.5px/1 var(--sans);color:var(--fd-muted);font-variant-numeric:tabular-nums}
.fd-calendar-event,.fd-calendar-open{position:absolute;left:52px;right:0;top:calc(var(--fd-calendar-start) * var(--fd-calendar-row-height) + 2px);height:calc(var(--fd-calendar-length) * var(--fd-calendar-row-height) - 4px);border-radius:6px;padding:5px 8px;overflow:hidden}
.fd-calendar-event{display:grid;align-content:start;gap:1px;background:var(--fd-sand);border-left:3px solid var(--fd-line-strong);font:400 10px/1.3 var(--sans);color:var(--fd-muted)}
.fd-calendar-event b{font:600 11px/1.25 var(--sans);color:var(--fd-ink)}
.fd-calendar-event.is-new{z-index:2;background:var(--fd-forest);border-left-color:var(--fd-sage);color:rgba(247,244,238,.78);box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.fd-calendar-event.is-new b{color:var(--fd-ivory)}
.fd-calendar-event em{margin-top:5px;font:600 9.5px/1.2 var(--sans);font-style:normal;color:var(--fd-sage)}
.fd-calendar-open{display:flex;align-items:center;border:1.5px dashed rgba(31,61,51,.5);background:rgba(31,61,51,.05);font:600 10.5px/1 var(--sans);color:var(--fd-forest)}

/* =============================================================================
   Step scenes (560 x 520; phones 360 x 540)
   ============================================================================= */
.fd-scene--chat-step{--fd-w:560;--fd-h:520}
.fd-step-chat-cam{left:270px;top:28px;width:262px;height:464px}
.fd-step-chat-cam.is-left{left:28px;width:290px}
.fd-step-side-cam{left:336px;top:40px;width:196px;display:grid;gap:12px;align-content:start}
.fd-step-side-cam .fd-column-label{margin:0}
.fd-step-side-cam .fd-contact{width:100%}
.fd-step-note{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--fd-ok-soft);color:var(--fd-ok-ink);font:500 11px/1.2 var(--sans)}
.fd-step-note svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Step 01: the website pages Sarah reads, and where an answer came from */
.fd-pages-cam{left:28px;top:28px;width:226px}
.fd-pages{background:var(--fd-white);color:var(--fd-ink);border-radius:12px;overflow:hidden;box-shadow:var(--fd-shadow-device)}
.fd-pages-head{display:grid;gap:2px;padding:12px 14px;border-bottom:1px solid var(--fd-line)}
.fd-pages-head b{font:600 13px/1.2 var(--sans)}
.fd-pages-head span{font:500 11px/1.2 var(--sans);color:var(--fd-muted)}
.fd-pages-list{list-style:none;margin:0;padding:2px 14px 6px}
.fd-pages-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--fd-line-strong);font:500 12px/1.2 var(--sans)}
.fd-pages-list li:last-child{border-bottom:0}
.fd-pages-list .fd-result{font-size:10.5px}
.fd-source-tag{position:absolute;left:28px;top:300px;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;border-radius:999px;background:var(--fd-ivory);color:var(--fd-forest);font:600 12px/1 var(--sans);box-shadow:0 12px 24px -12px rgba(0,0,0,.55)}
.fd-source-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Step 03: two days of the owner's calendar */
.fd-week{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;background:var(--fd-white);border-radius:12px;box-shadow:var(--fd-shadow-device);color:var(--fd-ink)}
.fd-week-column{display:grid;gap:6px;align-content:start;min-height:190px}
.fd-week-column>b{padding-bottom:7px;border-bottom:1px solid var(--fd-line);font:600 12px/1.2 var(--sans)}
.fd-week-event,.fd-week-open{display:grid;gap:2px;padding:7px 8px;border-radius:6px;font:500 11px/1.3 var(--sans)}
.fd-week-event{background:var(--fd-forest);color:var(--fd-ivory)}
.fd-week-event i{font:600 10px/1.2 var(--sans);font-style:normal;opacity:.72;font-variant-numeric:tabular-nums}
.fd-week-event em{font:600 9.5px/1.2 var(--sans);font-style:normal;color:var(--fd-sage)}
.fd-week-event.is-other{background:var(--fd-sand);color:var(--fd-ink)}
.fd-week-moved{align-content:center;padding:7px 8px;border-radius:6px;border:1.5px dashed var(--fd-line-strong);font:500 10.5px/1.3 var(--sans);color:var(--fd-muted)}
.fd-week-open{align-content:center;border:1.5px dashed rgba(31,61,51,.5);background:rgba(31,61,51,.05);color:var(--fd-forest);font-weight:600}

/* Step 04: the summary email, then the "chat ends" workflow's text */
.fd-handoff-mail-cam{left:28px;top:28px;width:310px}
.fd-handoff-text-cam{left:262px;top:300px;width:270px}
.fd-mail-facts{list-style:none;margin:10px 0 0;padding:9px 0 0;border-top:1px dashed var(--fd-line-strong);display:grid;gap:5px}
.fd-mail-facts li{display:flex;gap:8px;font-size:11.5px;color:var(--fd-soft)}
.fd-mail-facts em{font-style:normal;font-weight:600;color:var(--fd-ink);min-width:46px}
.fd-handoff-thread{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--fd-screen);border-radius:14px;box-shadow:var(--fd-shadow-device)}
.fd-handoff-thread .fd-note{align-self:flex-start}

@media (max-width:640px){
  .fd-scene--chat-hero{--fd-w:360;--fd-h:690}
  /* The chat starts below the play button's strip */
  .fd-chat-cam{left:12px;top:56px;width:336px;height:380px}
  .fd-calendar-cam{left:12px;top:448px;width:336px}
  .fd-calendar-day{--fd-calendar-row-height:22px;margin:8px 10px 10px 0}
  .fd-calendar-event span,.fd-calendar-event em{display:none}
  .fd-calendar-event.is-new span{display:block}
  .fd-calendar-event,.fd-calendar-open{padding:3px 8px}
  .fd-calendar-head{padding:9px 12px}
  .fd-chat-contact-cam,.fd-chat-stub{display:none}
  .fd-scene--chat-hero .fd-pill-row{top:644px}

  .fd-scene--chat-step{--fd-w:360;--fd-h:540}
  .fd-pages-cam{left:12px;top:12px;width:336px}
  .fd-pages-list li{padding:5px 0}
  .fd-step-chat-cam,.fd-step-chat-cam.is-left{left:12px;top:236px;width:336px;height:292px}
  .fd-step-chat-cam.is-left{top:12px;height:300px;width:336px}
  .fd-source-tag{left:auto;right:12px;top:218px}
  .fd-step-side-cam{left:12px;top:326px;width:336px;gap:10px}
  .fd-week-column{min-height:118px}
  .fd-handoff-mail-cam{left:12px;top:12px;width:336px}
  .fd-handoff-text-cam{left:12px;top:296px;width:336px}
}