/* =============================================================================
   sbc-crm-scenes.css

   What this file does:
   Lays out the AI CRM page's product scenes and draws the pieces they add to the shared scene kit:
   the contact record (identity, fields, channel chips), the activity timeline with its entries, the
   step scenes' mini record, the call and text panels on the stage, and the contact list (search,
   filters, rows, the duplicate notice). The pieces copy the real CRM in the owner's app
   (CRMRecordActivityPanel.js, CRMContactsPanel.js): timeline rows are an icon, a title, a time and a
   preview; the list searches and filters; duplicates merge.

   Context of where it's used in the repo:
   Linked from templates/ai-crm-LP.html after static/css/sbc-front-desk.css, whose tokens (--fd-*)
   and pieces (widget, bubbles, typing dots, call screen, captions, lane, chips, pill) these scenes
   reuse. Markup: templates/includes/crm_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/.

   What it calls:
   Nothing.

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

/* The evergreen stage with its faint dot grid, for the two stand-alone scenes */
.fd-scene--crm-hero .fd-fit,
.fd-scene--crm-list .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}

/* =============================================================================
   Shared pieces: avatar, fields, chips, timeline entries
   ============================================================================= */
.crm-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--fd-forest);color:var(--fd-ivory);font:600 11px/1 var(--sans)}
.crm-avatar.is-large{width:42px;height:42px;font-size:14px}

.crm-fields{margin:0;display:grid;gap:11px}
.crm-fields>div{display:grid;gap:3px;min-width:0}
.crm-fields dt{font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted)}
.crm-fields dd{margin:0;font:500 12px/1.35 var(--sans);color:var(--fd-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.crm-fields.is-compact{gap:6px}
.crm-fields.is-compact>div{display:flex;align-items:center;gap:10px}
.crm-fields.is-compact dt{min-width:44px}

.crm-chip-row{display:flex;flex-wrap:wrap;gap:5px}
.crm-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:999px;background:var(--fd-workflow);color:var(--fd-forest);font:600 10.5px/1.25 var(--sans);white-space:nowrap}
.crm-chip svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.crm-chip.is-tag{background:var(--fd-sand);color:var(--fd-soft)}

.crm-entry-list{list-style:none;margin:0;padding:0}
.crm-entry{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:11px;padding:10px 0;border-bottom:1px dashed var(--fd-line-strong)}
.crm-entry:last-child{border-bottom:0}
.crm-entry-icon{grid-row:span 2;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--fd-sand);color:var(--fd-forest)}
.crm-entry-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.crm-entry-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.crm-entry-top b{font:600 12.5px/1.3 var(--sans);color:var(--fd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crm-entry-top time{margin-left:auto;flex:none;font:500 10px/1.3 var(--mono,"JetBrains Mono",ui-monospace,monospace);color:var(--fd-muted);white-space:nowrap}
.crm-entry p{grid-column:2;margin:2px 0 0;font:400 11.5px/1.42 var(--sans);color:var(--fd-soft)}
.crm-entry.is-earlier{opacity:.5}

.crm-step-note{justify-self:start;display:inline-flex;white-space:nowrap;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)}
.crm-step-note svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* =============================================================================
   Hero: one contact record (620 x 600; phones 360 x 700)
   ============================================================================= */
.fd-scene--crm-hero{--fd-w:620;--fd-h:600}
.crm-record-cam{left:24px;top:60px;width:572px;height:462px}
.crm-record{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--fd-white);color:var(--fd-ink);border-radius:12px;box-shadow:var(--fd-shadow-device)}
.crm-record-bar{flex:none;display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--fd-line)}
.crm-record-bar svg{width:14px;height:14px;fill:none;stroke:var(--fd-forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crm-record-bar b{font:600 13px/1.2 var(--sans)}
.crm-record-bar span{margin-left:auto;font:500 11.5px/1.2 var(--sans);color:var(--fd-muted)}
.crm-record-body{flex:1;min-height:0;display:grid;grid-template-columns:212px minmax(0,1fr)}
.crm-record-side{display:grid;align-content:start;gap:16px;padding:18px 16px;background:var(--fd-screen);border-right:1px solid var(--fd-line)}
.crm-identity{display:flex;align-items:center;gap:11px;padding-bottom:15px;border-bottom:1px dashed var(--fd-line-strong)}
.crm-identity b{display:block;font:600 14.5px/1.25 var(--sans)}
.crm-identity div span{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:var(--fd-muted)}
.crm-record-main{display:flex;flex-direction:column;min-height:0;padding:14px 18px 0}
.crm-record-heading{flex:none;margin:0 0 2px;font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted)}
.crm-timeline{flex:1;min-height:0}
.crm-timeline .crm-entry-list{padding-bottom:6px}
.fd-scene--crm-hero .fd-pill-row{top:542px}

/* =============================================================================
   Step scenes (560 x 520; phones 360 x 540): the source on the left, the record on the right
   ============================================================================= */
.fd-scene--crm-step{--fd-w:560;--fd-h:520}
.crm-step-source-cam{left:28px;top:28px;width:272px;height:464px}
.crm-step-record-cam{left:318px;top:28px;width:214px;display:grid;gap:10px;align-content:start}
.crm-step-record-cam .fd-column-label{margin:0}

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

/* a call screen on the stage, without the phone around it */
.crm-call-panel{position:relative;width:100%;height:100%;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,var(--fd-call-1),var(--fd-call-2));box-shadow:var(--fd-shadow-device)}
.crm-call-panel .fd-call{inset:0;padding:30px 16px 22px}

/* a text thread on the stage, from the customer's side */
.crm-thread-panel{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--fd-screen);color:var(--fd-screen-ink);border-radius:18px;box-shadow:var(--fd-shadow-device)}
.crm-thread-panel .fd-thread-head{padding:13px 14px}
.crm-thread-panel .fd-thread-body{flex:1;min-height:0}

/* the workflow lane sits straight on the stage */
.crm-step-source-cam.crm-lane-cam{top:40px;height:auto}
.crm-lane-cam .fd-lane li{padding:8px 0}
.crm-lane-cam .fd-lane-sub.is-wait{max-width:150px}

/* the mini record */
.crm-mini{display:grid;gap:9px;padding:12px 14px 4px;background:var(--fd-white);color:var(--fd-ink);border-radius:12px;box-shadow:var(--fd-shadow-device)}
.crm-mini-head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px dashed var(--fd-line-strong)}
.crm-mini-head b{display:block;font:600 13px/1.25 var(--sans)}
.crm-mini-head div span{display:block;font-size:11px;color:var(--fd-muted);font-variant-numeric:tabular-nums}
.crm-mini .crm-entry-top{flex-direction:column;align-items:flex-start;gap:1px}
.crm-mini .crm-entry-top b{max-width:100%}
.crm-mini .crm-entry-top time{margin-left:0}
.crm-mini .crm-entry p{font-size:11px}
.crm-chip-row.is-mini{padding-bottom:2px}

/* =============================================================================
   Contact list (680 x 540; phones 360 x 640)
   ============================================================================= */
.fd-scene--crm-list{--fd-w:680;--fd-h:540}
.crm-list-cam{left:20px;top:56px;width:640px;height:464px}
.crm-list{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--fd-white);color:var(--fd-ink);border-radius:12px;box-shadow:var(--fd-shadow-device)}
.crm-list-head{flex:none;display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--fd-line)}
.crm-list-head b{font:600 14px/1.2 var(--sans)}
.crm-list-count{font:500 11.5px/1.2 var(--sans);color:var(--fd-muted);font-variant-numeric:tabular-nums}
.crm-list-action{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--fd-line-strong);border-radius:8px;font:500 11.5px/1.2 var(--sans);color:var(--fd-soft)}
.crm-list-count{margin-right:auto}
.crm-list-action svg,.crm-search svg,.crm-row-source svg,.crm-duplicate-icon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.crm-list-action svg{width:13px;height:13px}
.crm-list-tools{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--fd-line)}
.crm-search{flex:1;min-width:0;display:flex;align-items:center;gap:7px;min-height:32px;padding:0 10px;border:1px solid var(--fd-line-strong);border-radius:8px;font:400 12px/1.3 var(--sans);color:var(--fd-ink)}
.crm-search svg{width:14px;height:14px;flex:none;color:var(--fd-muted)}
.crm-search-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.crm-search-text .is-placeholder{color:var(--fd-muted)}
.crm-search .fd-caret{background:var(--fd-ink)}
.crm-filter-slot{justify-items:start}
.crm-filter{display:inline-flex;align-items:center;padding:6px 11px;border:1px solid var(--fd-line-strong);border-radius:999px;background:var(--fd-white);font:500 11.5px/1.2 var(--sans);color:var(--fd-soft);white-space:nowrap}
.crm-filter.is-on{background:var(--fd-forest);border-color:var(--fd-forest);color:var(--fd-ivory)}
.crm-list-columns,.crm-row{display:grid;grid-template-columns:132px 108px 84px 50px minmax(0,1fr) 92px;column-gap:10px;align-items:center;padding:0 16px}
.crm-list-columns{flex:none;padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--fd-line);font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted)}
.crm-list-slot{flex:1;min-height:0;align-content:start}
.crm-rows{list-style:none;margin:0;padding:0}
.crm-row{min-height:43px;border-bottom:1px dashed var(--fd-line-strong);font:400 12px/1.3 var(--sans);color:var(--fd-soft)}
.crm-row-name{font:600 12.5px/1.3 var(--sans);color:var(--fd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-row-phone{font-variant-numeric:tabular-nums;white-space:nowrap}
.crm-row-status{justify-self:start;padding:3px 9px;border-radius:999px;background:var(--fd-sand);font:600 10.5px/1.25 var(--sans);color:var(--fd-soft);white-space:nowrap}
.crm-row-status.is-booked{background:var(--fd-ok-soft);color:var(--fd-ok-ink)}
.crm-row-status.is-contacted{background:var(--fd-workflow);color:var(--fd-forest)}
.crm-row-source{display:grid;place-items:start;color:var(--fd-forest)}
.crm-row-source svg{width:15px;height:15px}
.crm-row-tags{display:flex;gap:4px;min-width:0;overflow:hidden}
.crm-row-time{font:500 10.5px/1.2 var(--mono,"JetBrains Mono",ui-monospace,monospace);color:var(--fd-muted);white-space:nowrap}
.crm-duplicate-cam{left:176px;top:446px;width:464px}
.crm-duplicate{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:11px;align-items:center;padding:11px 14px;background:var(--fd-white);color:var(--fd-ink);border:1px solid var(--fd-line);border-radius:10px;box-shadow:0 18px 36px -14px rgba(0,0,0,.55)}
.crm-duplicate-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--fd-sand);color:var(--fd-forest)}
.crm-duplicate-icon svg{width:15px;height:15px}
.crm-duplicate b{display:block;font:600 12.5px/1.25 var(--sans)}
.crm-duplicate div span{display:block;font-size:11.5px;line-height:1.35;color:var(--fd-muted)}
.crm-duplicate .fd-result{grid-row:auto;grid-column:3}
/* With reduced motion the list shows its finished frame: after the merge, without the duplicate */
html:not(.fd-motion) .fd-scene--crm-list:not(.is-live) .crm-rows.is-before-merge{visibility:hidden}

/* =============================================================================
   Phones
   ============================================================================= */
@media (max-width:640px){
  /* Hero: the record runs down the stage, under the play button's strip */
  .fd-scene--crm-hero{--fd-w:360;--fd-h:700}
  .crm-record-cam{left:12px;top:56px;width:336px;height:580px}
  .crm-record-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .crm-record-side{gap:10px;padding:12px 14px;border-right:0;border-bottom:1px solid var(--fd-line)}
  .crm-identity{padding-bottom:10px}
  .crm-avatar.is-large{width:36px;height:36px;font-size:12.5px}
  .crm-record-side .crm-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;gap:8px 12px}
  .crm-record-side .crm-fields>div:nth-child(2),.crm-record-side .crm-fields>div.is-chips{grid-column:1 / -1}
  .crm-record-main{padding:10px 14px 0}
  .crm-entry{padding:8px 0}
  .fd-scene--crm-hero .fd-pill-row{top:650px}

  /* Step scenes: the source on top, the record under it */
  /* each step's stage is as tall as its own story: the record under the source differs per step */
  .fd-scene--crm-step{--fd-w:360;--fd-h:540}
  .fd-scene--crm-step[data-fd-scene="crm-call-to-contact"]{--fd-h:470}
  .fd-scene--crm-step[data-fd-scene="crm-text-to-contact"]{--fd-h:500}
  .fd-scene--crm-step[data-fd-scene="crm-workflow-to-contact"]{--fd-h:580}
  .crm-step-source-cam{left:12px;top:12px;width:336px;height:258px}
  .crm-step-source-cam.crm-lane-cam{top:12px}
  .crm-lane-cam .fd-lane li{padding:5px 0}
  .crm-lane-cam .fd-lane-sub:not(.is-wait){display:none}
  .crm-lane-cam .fd-column-label{display:none}
  .crm-call-panel .fd-call{padding:16px 14px 14px;gap:8px}
  .crm-call-panel .fd-avatar-wrap{display:none}
  .crm-step-record-cam{left:12px;top:282px;width:336px;gap:8px}
  .crm-step-record-cam .fd-column-label{display:none}
  .crm-mini{gap:7px;padding:10px 12px 2px}
  .crm-mini-head{padding-bottom:8px}
  .crm-mini .crm-entry.is-earlier{display:none}
  .crm-mini .crm-entry{padding:7px 0}
  .crm-mini .crm-entry-top{flex-direction:row;align-items:baseline;gap:8px}
  .crm-mini .crm-entry-top time{margin-left:auto}
  .crm-mini .crm-entry:not(:last-child) p{display:none}

  /* Contact list: rows become two-line cards */
  .fd-scene--crm-list{--fd-w:360;--fd-h:640}
  .crm-list-cam{left:12px;top:56px;width:336px;height:572px}
  .crm-list-head{padding:12px 14px}
  .crm-list-action scene-line{display:none}
  .crm-list-tools{flex-wrap:wrap;padding:10px 14px}
  .crm-search{flex-basis:100%}
  .crm-list-columns{display:none}
  .crm-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name status" "phone tags";row-gap:4px;min-height:58px;padding:8px 14px}
  .crm-row-name{grid-area:name}
  .crm-row-status{grid-area:status;justify-self:end}
  .crm-row-phone{grid-area:phone}
  .crm-row-tags{grid-area:tags;justify-content:flex-end}
  .crm-row-source,.crm-row-time{display:none}
  .crm-duplicate-cam{left:20px;top:520px;width:320px}
  .crm-duplicate{grid-template-columns:30px minmax(0,1fr);row-gap:8px}
  .crm-duplicate .fd-result{grid-column:2;justify-self:start}
}