/* CallCore "Comms Timeline" hero mock — a faithful, self-playing preview of the Salesforce
   managed-package timeline. Everything is scoped under #cc-timeline so it can't collide with the
   site's Tailwind/Flowbite styles. Hardcoded sample data for now (Squidex-wire later). */

#cc-timeline{
  --bg:#f8f7f3; --ink:#18222c; --ink-60:#5a6672; --blue:#2660e0;
  --sf-page:#f3f2f2; --sf-card:#ffffff; --sf-border:#e5e5e5; --sf-hair:#ececec;
  --sf-ink:#181818; --sf-weak:#5c5c5c; --sf-label:#706e6b; --sf-link:#0176d3; --navy:#14315b;
  --in-bg:#dcefe2; --in-fg:#267a44; --out-bg:#e3eaf5; --out-fg:#1b3a6b;
  --miss-bg:#fadfdc; --miss-fg:#b50713; --un-bg:#ededed; --un-fg:#8c8c8c;
  --email-bg:#e7eaee; --email-fg:#5a6270; --amber:#c16905; --rec:#6a4fb8; --acct:#0b7ea3;
  --sans:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;
  max-width:600px;
}
#cc-timeline *{box-sizing:border-box}

/* Base widget is neutral (flat, in-flow) — usable on any page. The hero flourishes
   (Y-tilt, base fade, hover reveal, absolute overhang) are scoped under .cc-hero-grid. */
@property --cc-fade{syntax:"<length-percentage>";inherits:false;initial-value:64%}
#cc-timeline{position:relative;z-index:10}
#cc-timeline .cc-stage{perspective:1700px}
#cc-timeline .cc-tilt{position:relative;transform:none;transform-origin:center;will-change:transform}
/* hero only: tilt back on Y; the card's base fades to transparent (revealing the section it overhangs)
   via a mask; on hover it eases flat and the fade recedes (mask stop pushed past 100%). */
.cc-hero-grid #cc-timeline .cc-tilt{--cc-fade:64%;-webkit-mask-image:linear-gradient(to bottom,#000 var(--cc-fade),transparent);mask-image:linear-gradient(to bottom,#000 var(--cc-fade),transparent);transition:transform .55s cubic-bezier(.2,.7,.2,1),--cc-fade .55s ease}
.cc-hero-grid #cc-timeline .cc-stage:hover .cc-tilt,.cc-hero-grid #cc-timeline .cc-stage:focus-within .cc-tilt{transform:none;--cc-fade:135%}
#cc-timeline .cc-fade{display:none}
#cc-timeline .cc-hint{margin:12px 4px 2px;font-size:.72rem;color:#8c8c8c;text-align:center}

#cc-timeline .cc-frame{background:var(--sf-page);border-radius:14px;padding:clamp(12px,2.5vw,22px);box-shadow:0 1px 2px rgba(16,22,26,.12),0 24px 60px -30px rgba(16,22,26,.5);border:1px solid rgba(0,0,0,.06)}
#cc-timeline .sf-tab{display:flex;align-items:center;gap:8px;padding:2px 4px 12px;color:#3e3e3c}
#cc-timeline .sf-tab .dots{display:flex;gap:5px}
#cc-timeline .sf-tab .dots i{width:9px;height:9px;border-radius:50%;background:#c9c7c5;display:block}
#cc-timeline .sf-tab .crumb{font-size:.72rem;color:#706e6b;font-weight:600}
#cc-timeline .sf-tab .crumb b{color:#3e3e3c}

#cc-timeline .rec{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--sf-border);border-radius:8px;padding:12px 16px;margin-bottom:14px}
#cc-timeline .rec .av{width:42px;height:42px;border-radius:9px;background:var(--acct);color:#fff;display:grid;place-items:center;flex:none}
#cc-timeline .rec .av svg{width:22px;height:22px}
#cc-timeline .rec .rname{font-size:1.05rem;font-weight:700;color:var(--sf-ink);line-height:1.2}
#cc-timeline .rec .rsub{font-size:.78rem;color:var(--sf-label)}
#cc-timeline .rec .rfields{margin-left:auto;display:flex;gap:22px;text-align:right}
#cc-timeline .rec .rfields div{display:flex;flex-direction:column}
#cc-timeline .rec .rfields .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:#a0998f;font-weight:700}
#cc-timeline .rec .rfields .v{font-size:.82rem;color:var(--sf-ink);font-variant-numeric:tabular-nums}

#cc-timeline .card{background:var(--sf-card);border:1px solid var(--sf-border);border-radius:8px;box-shadow:0 2px 2px rgba(0,0,0,.05)}
#cc-timeline .cardHeader{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--sf-hair);position:relative}
#cc-timeline .cardIcon{width:26px;height:26px;border-radius:6px;background:#eaf1fc;color:var(--sf-link);display:grid;place-items:center;flex:none}
#cc-timeline .cardIcon svg{width:16px;height:16px}
#cc-timeline .cardTitleText{font-size:.95rem;font-weight:700;color:var(--sf-ink)}

#cc-timeline .scope{margin-left:auto;position:relative}
#cc-timeline .scopeChip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e1e0dd;border-radius:999px;padding:3px 10px;cursor:pointer;font-family:inherit;box-shadow:0 1px 1px rgba(0,0,0,.04)}
#cc-timeline .scopeChip .ccg{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;color:var(--sf-ink)}
#cc-timeline .cc{background:#eceef1;color:#5a6270;font-size:.6rem;font-weight:800;letter-spacing:.03em;border-radius:3px;padding:1px 4px}
#cc-timeline .scopeChip .ct{font-weight:700;font-variant-numeric:tabular-nums}
#cc-timeline .scopeChip .bang{width:16px;height:16px;border-radius:50%;background:#fbeccf;color:#b7791f;font-weight:800;font-size:.72rem;display:grid;place-items:center}

#cc-timeline .pop{position:absolute;right:0;top:36px;width:290px;max-width:82vw;background:#fff;border-radius:10px;box-shadow:0 10px 34px rgba(19,23,38,.2),0 0 0 1px rgba(19,23,38,.06);z-index:30;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease}
#cc-timeline .pop.show,#cc-timeline .scope:hover .pop,#cc-timeline .scope:focus-within .pop{opacity:1;pointer-events:auto;transform:translateY(0)}
/* invisible hover bridge between the chip and its popover — a slow diagonal to the popover
   no longer drops :hover in the gap (only exists while already hovering, so it never blocks clicks) */
#cc-timeline .scope:hover::after,#cc-timeline .scope:focus-within::after{content:"";position:absolute;top:100%;right:0;width:290px;max-width:82vw;height:14px}
#cc-timeline .popHead{padding:11px 14px;background:#f5f4f7;border-bottom:1px solid #e6e5ea}
#cc-timeline .popTitle{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:#1a1f2e}
#cc-timeline .popTitle svg{width:14px;height:14px;color:#706e6b}
#cc-timeline .popSub{font-size:.72rem;color:#8a8f9c;margin-top:2px}
#cc-timeline .popList{list-style:none;margin:0;padding:4px 0;max-height:280px;overflow-y:auto}
#cc-timeline .popRow{display:flex;flex-direction:column;gap:2px;padding:8px 14px}
#cc-timeline .popRow.warn{background:#fdf6e9}
#cc-timeline .popRow .nm{font-size:.82rem;color:var(--sf-link);font-weight:600}
#cc-timeline .popRow.warn .nm{color:#8a6d1f}
#cc-timeline .popRow .ln{display:flex;align-items:center;gap:7px;font-size:.8rem;color:#3e3e3c;font-variant-numeric:tabular-nums}
#cc-timeline .popRow .bad{color:#b7791f;font-style:italic;font-size:.76rem}
#cc-timeline .popRow .none{color:#a0998f;font-style:italic;font-size:.78rem}

#cc-timeline .newWrap{padding:10px 16px 0;text-align:center;overflow:hidden;max-height:0;opacity:0;transition:max-height .28s ease,opacity .28s ease}
#cc-timeline .newWrap.show{max-height:60px;opacity:1}
#cc-timeline .newBtn{display:inline-flex;align-items:center;gap:9px;background:#eaf1fc;color:var(--sf-link);border:1px solid #cfe0f8;border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
#cc-timeline .newBtn:hover{background:#e0ebfb}
#cc-timeline .pdot{position:relative;width:8px;height:8px;flex:none}
#cc-timeline .pdot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sf-link)}
#cc-timeline .pdot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sf-link);opacity:.5;animation:cctlring 1.5s ease-out infinite}

#cc-timeline .list{list-style:none;margin:0;padding:6px 16px 4px}
#cc-timeline .row{display:grid;grid-template-columns:30px 1fr;column-gap:14px}
#cc-timeline .gutter{display:flex;flex-direction:column;align-items:center}
#cc-timeline .badge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
#cc-timeline .badge svg{width:16px;height:16px}
#cc-timeline .b-in{background:var(--in-bg);color:var(--in-fg)}
#cc-timeline .b-out{background:var(--out-bg);color:var(--out-fg)}
#cc-timeline .b-miss{background:var(--miss-bg);color:var(--miss-fg)}
#cc-timeline .b-un{background:var(--un-bg);color:var(--un-fg)}
#cc-timeline .b-email-in{background:var(--in-bg);color:var(--in-fg)}
#cc-timeline .b-email-out{background:var(--email-bg);color:var(--email-fg)}
#cc-timeline .rail{width:2px;flex:1;background:var(--sf-hair);margin-top:6px;min-height:8px}
#cc-timeline .row:last-child .rail{display:none}

#cc-timeline .body{min-width:0;padding-bottom:18px;border-radius:8px;transition:background .8s ease}
#cc-timeline .row.flash .body{background:#fff7e6}
#cc-timeline .topline{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#cc-timeline .who{display:flex;align-items:center;gap:6px;min-width:0}
#cc-timeline .recIcon{width:17px;height:17px;border-radius:4px;color:#fff;display:grid;place-items:center;flex:none}
#cc-timeline .recIcon.contact{background:var(--rec)}
#cc-timeline .recIcon.account{background:var(--acct)}
#cc-timeline .recIcon svg{width:11px;height:11px}
#cc-timeline .recName{font-size:.84rem;font-weight:600;color:var(--sf-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;cursor:pointer}
#cc-timeline .recName:hover{text-decoration:underline}

#cc-timeline .plusWrap{position:relative;display:inline-flex;flex:none}
#cc-timeline .plus{font-size:.66rem;font-weight:700;color:#706e6b;background:#f0eff4;border-radius:999px;padding:1px 7px;cursor:default}
#cc-timeline .matchPop{position:absolute;left:0;top:1.5rem;z-index:80;width:240px;background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(19,23,38,.18),0 0 0 1px rgba(19,23,38,.06);overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease}
#cc-timeline .plusWrap:hover .matchPop,#cc-timeline .plusWrap:focus-within .matchPop,#cc-timeline .plusWrap.show .matchPop{opacity:1;pointer-events:auto;transform:translateY(0)}
#cc-timeline .plusWrap::after{content:"";position:absolute;left:0;top:1rem;width:4rem;height:.7rem}
#cc-timeline .matchHead{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#e4e4ec;border-bottom:1px solid #d2d2da;font-size:.8rem;font-weight:700;color:#1a1f2e}
#cc-timeline .matchHead svg{width:13px;height:13px;color:#2a4d80}
#cc-timeline .matchList{list-style:none;margin:0;padding:4px 0}
#cc-timeline .matchList li{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:.8rem;color:var(--sf-link);cursor:pointer}
#cc-timeline .matchList li:hover{background:#f6f6f9;text-decoration:underline}
#cc-timeline .mi{width:16px;height:16px;border-radius:4px;color:#fff;display:grid;place-items:center;flex:none}
#cc-timeline .mi.contact{background:var(--rec)}
#cc-timeline .mi.account{background:var(--acct)}
#cc-timeline .mi svg{width:10px;height:10px}

#cc-timeline .when{flex:none;font-size:.75rem;color:#8c8c8c;white-space:nowrap}
#cc-timeline .subline{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:.78rem;color:var(--sf-label);min-width:0}
#cc-timeline .num{color:#3e3e3c;font-variant-numeric:tabular-nums;white-space:nowrap}
#cc-timeline .sep{flex:none;width:16px;display:flex;align-items:center;justify-content:center}
#cc-timeline .arrowSep{color:#c9c9c9}
#cc-timeline .tBtn{position:relative;width:16px;height:16px;border:0;background:none;color:var(--sf-link);cursor:pointer;padding:0;display:grid;place-items:center}
#cc-timeline .tBtn svg{width:15px;height:15px}
#cc-timeline .issueDot{position:absolute;bottom:-1px;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 1.5px #fff}
#cc-timeline .rdot{width:6px;height:6px;border-radius:50%;background:#ba0517}
#cc-timeline .handler{color:#3e3e3c;white-space:nowrap}
#cc-timeline .right{margin-left:auto;display:flex;align-items:center;flex:none}
#cc-timeline .duration{font-weight:600;color:#3e3e3c;font-variant-numeric:tabular-nums;white-space:nowrap}
#cc-timeline .state{font-weight:600;white-space:nowrap}
#cc-timeline .s-miss{color:#ba0517}
#cc-timeline .s-un{color:#8c8c8c}

#cc-timeline .who .fromName{font-size:.84rem;font-weight:700;color:var(--sf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cc-timeline .who .toLabel{font-size:.78rem;color:#a0998f}
#cc-timeline .who .toAddr{font-size:.8rem;color:#3e3e3c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#cc-timeline .emailSub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px}
#cc-timeline .emailSub .subj{font-size:.82rem;font-weight:600;color:var(--sf-link);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cc-timeline .emailSub .subj:hover{text-decoration:underline}

#cc-timeline .sumWrap{margin-top:9px}
#cc-timeline .summary{font-size:.875rem;line-height:1.5;color:#3e3e3c;position:relative}
#cc-timeline .chev{width:20px;height:20px;border:0;background:none;color:var(--sf-link);cursor:pointer;padding:0;display:grid;place-items:center;flex:none}
#cc-timeline .chev svg{width:16px;height:16px;transition:transform .2s ease}
#cc-timeline .row.open .chev svg{transform:rotate(180deg)}
#cc-timeline .summary .chev{float:right;margin:2px 0 0 8px}
#cc-timeline .summary .txt{overflow:hidden;max-height:3em;transition:max-height .24s ease}
#cc-timeline .row.open .summary .txt{max-height:22em}
#cc-timeline .statusNotice{margin-top:9px;font-size:.8rem;font-style:italic;color:var(--sf-label);display:flex;align-items:center;gap:8px}
#cc-timeline .statusNotice .chev{margin-left:auto}
#cc-timeline .liveDot{width:7px;height:7px;border-radius:50%;background:#2e844a;flex:none;position:relative}
#cc-timeline .liveDot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2e844a;opacity:.5;animation:cctlring 1.6s ease-out infinite}
#cc-timeline .missedNote{margin-top:9px;font-size:.84rem;line-height:1.5;color:#a0998f;font-style:italic}

#cc-timeline .expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
#cc-timeline .row.open .expand{grid-template-rows:1fr;margin-top:11px}
#cc-timeline .expand > .inner{overflow:hidden;min-height:0}
#cc-timeline .emailBody{font-size:.86rem;line-height:1.5;color:#3e3e3c;padding-bottom:4px}
#cc-timeline .viewT{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--sf-link);font-size:.78rem;font-weight:600;cursor:pointer;padding:0 0 10px;font-family:inherit}
#cc-timeline .viewT svg{width:14px;height:14px}

#cc-timeline .player{display:flex;align-items:center;gap:12px;background:#f7f8fa;border:1px solid #eceef2;border-radius:10px;padding:11px 13px}
#cc-timeline .play{width:34px;height:34px;border-radius:50%;background:var(--sf-link);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;flex:none}
#cc-timeline .play svg{width:15px;height:15px}
#cc-timeline .track{flex:1;height:7px;border-radius:4px;background:#dbe0e8;position:relative;cursor:pointer;min-width:0}
#cc-timeline .fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:4px;background:var(--sf-link)}
#cc-timeline .thumb{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--sf-link);transform:translate(-50%,-50%);box-shadow:0 1px 2px rgba(0,0,0,.2)}
#cc-timeline .ptime{font-size:.72rem;color:var(--sf-label);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
#cc-timeline .mplayer{margin-left:auto;flex:1 1 auto;min-width:0;max-width:300px;padding:5px 12px 5px 5px;background:#eef0f3;border-color:#e3e5ea}
#cc-timeline .mplayer .play{width:30px;height:30px;background:var(--navy)}
#cc-timeline .mplayer .play svg{width:13px;height:13px}

#cc-timeline .modalWrap{position:fixed;inset:0;background:rgba(16,22,26,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
#cc-timeline .modalWrap.show{display:flex}
#cc-timeline .modal{background:#fff;color:var(--sf-ink);border-radius:12px;max-width:560px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
#cc-timeline .modalHead{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--sf-hair)}
#cc-timeline .mIcon{width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
#cc-timeline .mIcon svg{width:16px;height:16px}
#cc-timeline .modalHead .mt{font-weight:700;font-size:1rem}
#cc-timeline .modalHead .x{margin-left:auto;border:0;background:none;font-size:1.4rem;line-height:1;color:#706e6b;cursor:pointer;padding:2px 6px}
#cc-timeline .modalBody{padding:14px 20px 18px;overflow-y:auto}
#cc-timeline .mMeta{font-size:.82rem;color:#3e3e3c;font-variant-numeric:tabular-nums}
#cc-timeline .mMeta b{color:var(--sf-ink)}
#cc-timeline .mMeta .mh{color:var(--sf-link)}
#cc-timeline .mMeta .arw{color:#b0b0ad;margin:0 2px}
#cc-timeline .mSummary{font-size:.9rem;color:var(--sf-ink);margin:9px 0 4px;padding-bottom:12px;border-bottom:1px solid #f0efec}
#cc-timeline .mWarn{display:flex;gap:8px;align-items:flex-start;margin:12px 0;font-style:italic;color:#8a6d1f;font-size:.84rem;line-height:1.45}
#cc-timeline .mWarn svg{width:16px;height:16px;color:var(--amber);flex:none;margin-top:1px}
#cc-timeline .mTranscript{font-family:var(--mono);font-size:.82rem;line-height:1.75;color:#3e3e3c;margin-top:6px}
#cc-timeline .tline{margin:0}
#cc-timeline .mDisc{margin-top:16px;font-size:.75rem;color:#a0998f;font-style:italic;border-top:1px solid #f0efec;padding-top:11px}
#cc-timeline .modalFoot{padding:13px 18px;border-top:1px solid var(--sf-hair);display:flex;justify-content:flex-end}
#cc-timeline .mClose{background:var(--navy);color:#fff;border:0;border-radius:6px;padding:8px 20px;font-weight:600;cursor:pointer;font-family:inherit}
#cc-timeline ::selection{background:rgba(38,96,224,.18)}
#cc-timeline :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

@keyframes cctlring{0%{transform:scale(.7);opacity:.6}100%{transform:scale(2.4);opacity:0}}
@media(max-width:560px){
  #cc-timeline{max-width:none}
  #cc-timeline .rec .rfields{display:none}
  #cc-timeline .mplayer{display:none}
}
/* initial-load: Salesforce-style spinner, then rows fade in (staggered via inline animation-delay) */
/* min-height ≈ the collapsed row list, so the tilted card's silhouette doesn't snap when the rows land */
#cc-timeline .ccload{display:flex;align-items:center;justify-content:center;min-height:470px}
#cc-timeline .ccspin{width:32px;height:32px;border-radius:50%;border:3px solid rgba(1,118,211,.15);border-top-color:var(--sf-link);animation:cctlspin .7s linear infinite}
@keyframes cctlspin{to{transform:rotate(360deg)}}
#cc-timeline .row.cc-in{animation:cctlfadein .55s ease both}
@keyframes cctlfadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #cc-timeline .cc-tilt{transform:none}
  #cc-timeline .cc-fade{display:none}
  #cc-timeline *{transition:none !important;animation:none !important}
}

/* Hero two-column layout (this sheet only loads on the homepage, where the timeline renders). */
/* Below desktop the timeline is in normal flow; clip horizontal overflow so the always-laid-out
   (opacity:0) +1 popovers can't spill past the viewport and create a horizontal-scroll gap.
   overflow-x:clip leaves vertical alone, so the desktop overhang (visible at lg) is unaffected. */
.cc-hero-grid{display:grid;gap:3rem;align-items:start;overflow-x:clip}
/* Desktop: the copy takes the left; the timeline is taken OUT OF FLOW (absolute) so its height —
   which grows as rows expand — never pushes the next section down. It floats top-right and simply
   overhangs into the following section's empty space, painted above it (z-index). */
@media(min-width:1024px){
  .cc-hero-grid{position:relative;display:block;overflow:visible}
  .cc-hero-copy{max-width:42%}
  .cc-hero-grid #cc-timeline{position:absolute;top:0;right:0;width:57%;max-width:none;margin:0;z-index:10}
  .cc-hero-grid #cc-timeline .cc-tilt{transform:rotateY(-13deg)}
}