/* Call Connect: slöjan och laddkortet vid kundbyte (src/v2/app/CcTelefon.jsx CcSloja, Alex 2026-10-18).
   En fil för både appen och index.html: cc-sloja.js ritar samma slöja, kort och ram innan appen är inläst, så
   omladdningen aldrig står utan kort (smakkollen runda 2, fynd 1). Därför egna reservvärden (--cc-*) för tiden
   innan appens tokens finns; när tokens.css är inläst vinner den (var(--mb-..., reserv)).
   Husets bakgrund (--mb-bg-2), kortet upphöjt (--mb-bg-elevated, fynd 8). Kundens färg bara i loggan och bilden. */
.mb-cc-sloja, #mb-cc-statisk {
  --cc-bg2: #F2F2F7; --cc-kort: #FFFFFF; --cc-fyll: rgba(120, 120, 128, 0.12); --cc-fyll2: rgba(120, 120, 128, 0.16);
  --cc-text: #000000; --cc-text2: #3F3F44; --cc-text3: #6C6C70; --cc-glas: rgba(246, 246, 248, 0.88);
  --cc-skugga: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --cc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --cc-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --cc-fjader: cubic-bezier(0.32, 0.72, 0, 1);
}
:root[data-theme="dark"] :is(.mb-cc-sloja, #mb-cc-statisk) {
  --cc-bg2: #1C1C1E; --cc-kort: #2C2C2E; --cc-fyll: rgba(120, 120, 128, 0.24); --cc-fyll2: rgba(120, 120, 128, 0.32);
  --cc-text: #FFFFFF; --cc-text2: #D1D1D6; --cc-text3: #AEAEB2; --cc-glas: rgba(30, 30, 32, 0.84);
  --cc-skugga: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.mb-cc-sloja, #mb-cc-statisk) {
    --cc-bg2: #1C1C1E; --cc-kort: #2C2C2E; --cc-fyll: rgba(120, 120, 128, 0.24); --cc-fyll2: rgba(120, 120, 128, 0.32);
    --cc-text: #FFFFFF; --cc-text2: #D1D1D6; --cc-text3: #AEAEB2; --cc-glas: rgba(30, 30, 32, 0.84);
    --cc-skugga: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  }
}

.mb-cc-sloja {
  position: fixed; inset: 0; z-index: calc(var(--mb-z-toast, 100) + 4); display: grid; place-items: center;
  background: var(--mb-bg-2, var(--cc-bg2)); color: var(--mb-label, var(--cc-text)); font-family: var(--mb-font, var(--cc-font));
}
.mb-cc-sloja .mb-cc-laddkort {
  display: grid; justify-items: center; gap: 6px; width: 248px; box-sizing: border-box; padding: 20px 20px 22px;
  border-radius: 22px; background: var(--mb-bg-elevated, var(--cc-kort)); box-shadow: var(--mb-shadow-2, var(--cc-skugga)); text-align: center;
}
/* före omladdningen: kortet sätter sig när bakgrunden har tonat upp en bit. Efter: det står redan där */
.mb-cc-sloja .mb-cc-laddkort.is-ny { animation: mb-cc-kort-in 420ms var(--mb-ease-spring, var(--cc-fjader)) 180ms backwards; }
@keyframes mb-cc-kort-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.mb-cc-sloja .mb-cc-laddkort__vem { display: flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 4px; }
.mb-cc-sloja .mb-cc-laddkort__vem b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--mb-t-headline, 600 15px/20px var(--cc-font)); letter-spacing: var(--mb-t-headline-track, -0.2px); }
.mb-cc-sloja .mb-cc-laddkort .mb-cc__logo {
  position: relative; display: block; flex: none; box-sizing: border-box; width: 28px; height: 28px; margin: 0; padding: 3px; border-radius: 8px;
  background: #fff; object-fit: contain; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 3px 10px rgba(0, 0, 0, 0.1);
}
.mb-cc-sloja .mb-cc-laddkort .mb-cc__logo.is-bokstav {
  display: grid; place-items: center; padding: 0; font: 700 13px/18px var(--mb-font, var(--cc-font));
  color: color-mix(in srgb, var(--mb-cc-farg) 55%, #000);
}
.mb-cc-sloja .mb-cc-laddkort__rad { font: var(--mb-t-footnote, 400 12px/16px var(--cc-font)); color: var(--mb-label-2, var(--cc-text2)); }

/* den rörliga bilden: 208 x 104 px. Fördröjningen står i varje animation: --fas (samma för alla, CcTelefon.jsx laddFas) plus delens --d */
.mb-cc-sloja .mb-cc-bild { position: relative; display: block; width: 208px; height: 104px; color: var(--mb-cc-farg); }

/* a, samtal in: luren i mitten, leads glider in från höger och går upp i den, ringar går ut */
.mb-cc-sloja .mb-cc-a__lur {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mb-cc-farg); color: var(--mb-cc-text);
}
.mb-cc-sloja .mb-cc-a__lur svg { width: 20px; height: 20px; }
.mb-cc-sloja .mb-cc-a__ring {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--mb-cc-farg); opacity: 0; animation: mb-cc-a-ring 2400ms var(--mb-ease, var(--cc-ease)) calc(var(--fas, 0ms) + var(--d, 0ms)) infinite;
}
@keyframes mb-cc-a-ring { 0% { opacity: 0.55; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.1); } }
/* brickorna i --mb-fill-2: syns mot kortet i både ljust och mörkt (fynd 8) */
.mb-cc-sloja .mb-cc-a__lead {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 4px; height: 18px; margin: -9px 0 0 0; padding: 0 6px 0 3px;
  border-radius: 9px; background: var(--mb-fill-2, var(--cc-fyll2)); opacity: 0; animation: mb-cc-a-lead 2400ms var(--mb-ease-spring, var(--cc-fjader)) calc(var(--fas, 0ms) + var(--d, 0ms)) infinite;
}
.mb-cc-sloja .mb-cc-a__lead i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--mb-cc-farg) 45%, var(--mb-bg-elevated, var(--cc-kort))); }
.mb-cc-sloja .mb-cc-a__lead b { width: 22px; height: 4px; border-radius: 2px; background: var(--mb-fill-2, var(--cc-fyll2)); }
@keyframes mb-cc-a-lead {
  0% { opacity: 0; transform: translate(70px, var(--y)) scale(1); }
  12% { opacity: 1; }
  48% { opacity: 1; transform: translate(26px, calc(var(--y) * 0.4)) scale(1); }
  62%, 100% { opacity: 0; transform: translate(-6px, 0) scale(0.4); }
}

/* b, bokningar: veckans tider (5 dagar, 3 tider) fylls en i taget och töms i samma ordning */
.mb-cc-sloja .mb-cc-b__vecka { position: absolute; inset: 4px 12px; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; gap: 6px; }
.mb-cc-sloja .mb-cc-b__vecka small { font: var(--mb-t-caption, 500 11px/14px var(--cc-font)); font-weight: 600; color: var(--mb-label-3, var(--cc-text3)); text-align: center; }
.mb-cc-sloja .mb-cc-b__vecka i { position: relative; height: 18px; border-radius: 5px; background: var(--mb-fill-2, var(--cc-fyll2)); }
.mb-cc-sloja .mb-cc-b__vecka i b { position: absolute; inset: 0; border-radius: inherit; background: var(--mb-cc-farg); opacity: 0; animation: mb-cc-b-tid 3000ms var(--mb-ease-spring, var(--cc-fjader)) calc(var(--fas, 0ms) + var(--d, 0ms)) infinite; }
@keyframes mb-cc-b-tid {
  0% { opacity: 0; transform: scale(0.5); }
  6% { opacity: 1; transform: scale(1.08); }
  10%, 58% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1); }
}

/* c, linjen: en röst på linjen. Staplarna rör sig lugnt, olika fas */
.mb-cc-sloja .mb-cc-bild.is-c { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mb-cc-sloja .mb-cc-c__stapel { width: 6px; height: 64px; border-radius: 3px; background: var(--mb-cc-farg); transform: scaleY(calc(var(--h) * 0.5)); animation: mb-cc-c-rost 600ms cubic-bezier(0.42, 0, 0.58, 1) calc(var(--fas, 0ms) + var(--d, 0ms)) infinite alternate; }
@keyframes mb-cc-c-rost { from { transform: scaleY(calc(var(--h) * 0.25)); } to { transform: scaleY(var(--h)); } }

/* efter omladdningen: slöjan tonar ut när den vanliga telefonen har tagit över */
.mb-cc-sloja.is-ut { pointer-events: none; animation: mb-cc-sloja-ut 360ms var(--mb-ease, var(--cc-ease)) forwards; }
.mb-cc-sloja.is-ut .mb-cc-laddkort { animation: mb-cc-kort-ut 360ms var(--mb-ease, var(--cc-ease)) forwards; }
@keyframes mb-cc-sloja-ut { to { opacity: 0; } }
@keyframes mb-cc-kort-ut { to { transform: scale(0.97); } }

/* ramen innan appen är inläst (cc-sloja.js): den landade Call Connect-telefonens ram med toppen, på pixeln där
   CcRam ritar den (samma mått som Ficka.css :is(.mb-ficka, .mb-cc) och CcTelefon.css .mb-cc.is-ram) */
#mb-cc-statisk .mb-cc {
  position: fixed; right: 72px; bottom: -40px; z-index: calc(var(--mb-z-toast, 100) + 5); box-sizing: border-box; width: 360px; height: 480px; padding: 0; overflow: hidden;
  border-radius: 40px 40px 0 0; background: var(--mb-glass-bg-strong, var(--cc-glas)); font-family: var(--cc-font); color: var(--mb-label, var(--cc-text));
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 7px #1C1C1E, 0 0 0 8px #3A3A3C, 0 0 0 9px rgba(255, 255, 255, 0.26), 0 -6px 30px rgba(0, 0, 0, 0.2);
}
#mb-cc-statisk .mb-cc::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 2px #2A2A2E; }
#mb-cc-statisk .mb-cc__topp { position: absolute; top: 14px; left: 0; right: 0; display: flex; align-items: center; box-sizing: border-box; height: 60px; padding: 0 12px 4px 16px; }
#mb-cc-statisk .mb-ficka__vem { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 4px 6px; margin: 0 0 0 -6px; }
#mb-cc-statisk .mb-ficka__vem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/20px var(--cc-font); letter-spacing: -0.2px; }
#mb-cc-statisk .mb-ficka__status { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--cc-font); color: var(--cc-text2); }
#mb-cc-statisk .mb-ficka__prick { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #34C759; }

@media (prefers-reduced-motion: reduce) {
  .mb-cc-sloja.is-ut { animation-duration: 150ms; }
  /* bara toning: kortet tonar in, bilden står still i ett läge som ändå säger vad den betyder */
  .mb-cc-sloja .mb-cc-laddkort.is-ny { animation: mb-cc-tona-in 150ms var(--mb-ease, var(--cc-ease)) backwards; }
  .mb-cc-sloja.is-ut .mb-cc-laddkort { animation: none; }
  .mb-cc-sloja .mb-cc-bild * { animation: none !important; }
  .mb-cc-sloja .mb-cc-a__lead:nth-of-type(3) { opacity: 1; transform: translate(34px, 0); }
  .mb-cc-sloja .mb-cc-b__vecka i:nth-of-type(-n + 7) b { opacity: 1; }
}
@keyframes mb-cc-tona-in { from { opacity: 0; } }