/* Blixtflow – inkorgens sida. Bygger på ai.css (hjälten som följer med, stegen, fakta, kalkylator,
   tabell); här finns inkorgsfönstret med sina skärmar, meddelandena som flyger in och kanalnavet.
   Fönstret ritas i 540 × 440 px och skalas ner på smala skärmar. */

/* ---------- Fönstret ---------- */
.ibx-wrap { --s0: .62; --ds: .06; justify-self: start; left: 50%; translate: -50% 0; } /* centrerad även när fönstret är bredare än kolumnen */
@media (min-width: 420px) { .ibx-wrap { --s0: .7; } }
@media (min-width: 640px) { .ibx-wrap { --s0: 1; --ds: .1; } }
@media (min-width: 1024px) { .ibx-wrap { --s0: 1.02; --ds: .12; } }
.ibx-win {
  position: relative; z-index: 2; width: 540px; height: 440px; overflow: hidden; border-radius: 22px; color: var(--ink); background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 70px 110px -50px rgba(0, 0, 0, .95), 0 40px 120px -40px rgba(155, 93, 229, .75);
}
.ibx-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: #FBF8FE; border-bottom: 1px solid var(--line-2); }
.ibx-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #E3D7F0; }
.ibx-bar > i:nth-child(1) { background: #F28B82; }
.ibx-bar > i:nth-child(2) { background: #F6C35A; }
.ibx-bar > i:nth-child(3) { background: #7BD389; }
.ibx-bar b { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; padding-right: 50px; font-size: .78rem; font-weight: 650; color: var(--muted); }
.ibx-bar img { width: 16px; height: 16px; }
.ibx-main { display: grid; grid-template-columns: 56px 1fr; height: 400px; }
.ibx-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; background: var(--natt); }
.ibx-rail img { width: 28px; height: 28px; margin-bottom: 8px; }
.ibx-rail i { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: rgba(255, 255, 255, .55); }
.ibx-rail i.is-on { color: var(--natt); background: var(--gnista); }
.ibx-rail .ic { width: 19px; height: 19px; }
.ibx-rail b { position: absolute; right: -5px; top: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-size: .6rem; font-weight: 800; color: #fff; background: #D6363F; box-shadow: 0 0 0 2px var(--natt); }
.ibx-stage { position: relative; overflow: hidden; }
.ibx-scr { inset: 0; padding: 16px; align-items: stretch; text-align: left; gap: 10px; color: var(--ink); }

/* Gemensamt i skärmarna */
.ibx-h { display: flex; align-items: center; justify-content: space-between; }
.ibx-h b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.ibx-new { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: var(--natt); }
.ibx-new i { width: 7px; height: 7px; border-radius: 50%; background: var(--gnista); }
.motion .ibx-new i { animation: rec 1.6s ease-in-out infinite; }
.ibx-rows { display: grid; gap: 6px; }
.ibx-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ibx-row.is-sel { background: var(--soft); box-shadow: inset 3px 0 0 var(--primar), inset 0 0 0 1px rgba(155, 93, 229, .3); }
.ibx-row small { margin-left: auto; font-size: .66rem; font-weight: 650; color: var(--primar-ink); }
.ibx-row__t { display: grid; flex: 1; min-width: 0; }
.ibx-row__t b { font-size: .84rem; line-height: 1.3; }
.ibx-row__t span { overflow: hidden; font-size: .76rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.ibx-av { position: relative; display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: .72rem; font-weight: 800; color: #fff; background: var(--c, var(--primar-ink)); }
.ibx-av i { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: var(--primar-ink); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(44, 14, 61, .2); }
.ibx-av i .ic { width: 11px; height: 11px; stroke-width: 2.2; }
.ibx-av--sm { width: 28px; height: 28px; border-radius: 50%; font-size: .62rem; }
.ibx-chan { flex: none; padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-style: normal; font-weight: 650; color: var(--primar-ink); background: var(--soft); }
.ibx-chip { flex: none; padding: 3px 9px; border-radius: 8px; font-size: .68rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.ibx-chip--id { color: #fff; background: var(--natt); }
.ibx-chip--who { color: var(--natt); background: var(--gnista); }

/* h: nya meddelanden glider in hela tiden */
.motion [data-step="h"] .ibx-rows--loop .ibx-row { animation: ibx-in 6s var(--ease-out) infinite backwards; animation-delay: calc(var(--i) * .45s); }

/* 0: vyerna */
.ibx-views { display: flex; flex-wrap: wrap; gap: 6px; }
.ibx-views span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .72rem; font-weight: 650; color: var(--ink-2); background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); }
.ibx-views b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: .62rem; color: #fff; background: var(--primar-ink); }
.ibx-views .is-on { color: #fff; background: var(--natt); box-shadow: none; }
.ibx-views .is-on b { color: var(--natt); background: var(--gnista); }
[data-step="0"] .ibx-scr--0 .ibx-row { animation: ibx-fly-in .7s var(--spring) backwards; animation-delay: calc(.15s + var(--i) * .09s); }

/* 1: tilldela */
.ibx-rows--short { gap: 6px; }
.ibx-menu { position: absolute; right: 18px; top: 74px; display: grid; gap: 4px; width: 230px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(44, 14, 61, .55); }
.ibx-menu > p { padding: 2px 6px 6px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ibx-person { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 7px 8px; border-radius: 11px; }
.ibx-person .ibx-av { grid-row: 1 / 3; }
.ibx-person b { font-size: .8rem; }
.ibx-person small { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--muted); }
.ibx-person.is-pick { background: var(--soft); box-shadow: inset 0 0 0 1.5px rgba(155, 93, 229, .45); }
.ibx-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.ibx-dot--2 { background: #F59E0B; }
.ibx-dot--3 { background: #9CA3AF; }
[data-step="1"] .ibx-menu { animation: ibx-pop .55s .15s var(--spring) backwards; }
[data-step="1"] .ibx-scr--1 .ibx-chip--who { animation: ibx-pop .5s 1.2s var(--spring) backwards; }
.ibx-cursor { position: absolute; right: 120px; top: 150px; width: 22px; height: 22px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L10 19z' fill='%23fff' stroke='%232C0E3D' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.motion [data-step="1"] .ibx-cursor { animation: ibx-cursor 1.4s .3s var(--ease-out) both; }

/* 2–4: konversationen */
.ibx-convhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.ibx-convhead b { margin-right: 2px; font-size: .95rem; }
.ibx-msg { max-width: 92%; padding: 11px 13px; border-radius: 16px 16px 16px 5px; font-size: .84rem; line-height: 1.45; background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line-2); }
.ibx-msg--sm { font-size: .76rem; opacity: .85; }
.ibx-msg--out { align-self: flex-end; border-radius: 16px 16px 5px 16px; color: #fff; background: var(--primar-ink); box-shadow: none; font-size: .78rem; }
.ibx-note { position: relative; padding: 11px 13px 30px; border-radius: 14px; font-size: .84rem; line-height: 1.45; background: #FBFDE3; box-shadow: inset 3px 0 0 #D2DC62; }
.ibx-note small { display: block; margin-bottom: 2px; font-size: .68rem; font-weight: 700; color: var(--muted); }
.ibx-note__hid { position: absolute; left: 13px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 650; color: var(--muted); }
.ibx-note__hid .ic { width: 12px; height: 12px; }
[data-step="2"] .ibx-note { animation: ibx-pop .6s .35s var(--spring) backwards; }
[data-step="2"] .ibx-msg { animation: ibx-fly-in .6s .1s var(--ease-out) backwards; }
.ibx-compose { margin-top: auto; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--primar), 0 16px 40px -20px rgba(126, 69, 201, .6); }
.ibx-compose__ai { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .7rem; font-weight: 800; color: var(--primar-ink); }
.ibx-compose__ai .ic { width: 14px; height: 14px; }
.ibx-compose__text { min-height: 3.2em; font-size: .84rem; line-height: 1.45; }
.ibx-compose__text span { background: linear-gradient(90deg, rgba(155, 93, 229, .14), rgba(155, 93, 229, .14)) no-repeat 0 0 / var(--hl, 0%) 100%; }
.motion [data-step="3"] .ibx-compose__text span { animation: ibx-type 2.4s .4s steps(60) both; }
.ibx-compose__foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.ibx-compose__foot i { padding: 3px 8px; border-radius: 7px; font-size: .66rem; font-style: normal; font-weight: 650; color: var(--primar-ink); background: var(--soft); }
.ibx-compose__foot b { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 13px; border-radius: 10px; font-size: .76rem; color: #fff; background: var(--primar-ink); }
.ibx-compose__foot .ic { width: 14px; height: 14px; }
[data-step="3"] .ibx-compose { animation: ibx-fly-in .7s .1s var(--spring) backwards; }
@property --n { syntax: "<integer>"; inherits: false; initial-value: 10; }
.ibx-undo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 11px 12px 13px; border-radius: 16px; font-size: .84rem; font-weight: 650; color: #fff; background: var(--natt); box-shadow: 0 20px 40px -20px rgba(44, 14, 61, .8); }
.ibx-undo__bolt { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.ibx-undo .bolt { width: 11px; }
.ibx-count { display: inline-block; min-width: 1.2em; color: var(--gnista); text-align: center; font-variant-numeric: tabular-nums; }
.motion [data-step="4"] .ibx-count { font-size: 0; counter-reset: n var(--n); animation: ibx-count 10s .6s linear both; }
.motion [data-step="4"] .ibx-count::after { content: counter(n); font-size: .84rem; }
.ibx-undo__btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 12px; border-radius: 10px; font-size: .78rem; background: rgba(255, 255, 255, .14); }
.ibx-undo__btn .ic { width: 14px; height: 14px; }
.ibx-undo__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--gnista); transform-origin: left; }
.motion [data-step="4"] .ibx-undo__bar { animation: fm-shrink 10s .6s linear both; }
[data-step="4"] .ibx-undo { animation: ibx-pop .6s .2s var(--spring) backwards; }

/* 5: ärendenummer och autosvar */
.ibx-mail { padding: 16px; border-radius: 18px; background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); }
.ibx-mail__label { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primar-ink); }
.ibx-mail__label .ic { width: 14px; height: 14px; }
.ibx-mail__subj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: .95rem; font-weight: 800; }
.ibx-mail__text { font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
[data-step="5"] .ibx-mail { animation: ibx-drop .8s .1s var(--spring) backwards; }
[data-step="5"] .ibx-mail .ibx-chip--id { animation: ibx-pulse 1.8s 1s ease-in-out 2; }
.ibx-thread { display: grid; gap: 6px; }
.ibx-thread li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; font-size: .78rem; box-shadow: inset 0 0 0 1px var(--line-2); }
.ibx-thread span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--primar-ink); background: var(--soft); }
.ibx-thread .ic { width: 13px; height: 13px; }
[data-step="5"] .ibx-thread li { animation: ibx-fly-in .6s var(--ease-out) backwards; }
[data-step="5"] .ibx-thread li:nth-child(1) { animation-delay: .7s; }
[data-step="5"] .ibx-thread li:nth-child(2) { animation-delay: 1.1s; }

/* 6: vyer och snooze */
.ibx-viewlist { display: grid; gap: 4px; }
.ibx-viewlist li { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-radius: 11px; font-size: .8rem; font-weight: 650; }
.ibx-viewlist span { display: inline-flex; align-items: center; gap: 9px; }
.ibx-viewlist .ic { width: 16px; height: 16px; color: var(--primar-ink); }
.ibx-viewlist b { font-size: .72rem; color: var(--muted); }
.ibx-viewlist .is-on { color: #fff; background: var(--natt); }
.ibx-viewlist .is-on .ic { color: var(--gnista); }
.ibx-viewlist .is-on b { color: var(--gnista); }
.ibx-row--star { margin-top: 4px; }
.ibx-star { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #B7791F; background: #FEF3C7; font-style: normal; }
.ibx-star .ic { width: 15px; height: 15px; fill: currentColor; }
[data-step="6"] .ibx-star { animation: ibx-pop .5s .4s var(--spring) backwards; }
.ibx-snooze { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 4px; width: 210px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(44, 14, 61, .55); }
.ibx-snooze p { display: flex; align-items: center; gap: 6px; padding: 2px 6px 6px; font-size: .7rem; font-weight: 800; color: var(--primar-ink); }
.ibx-snooze .ic { width: 14px; height: 14px; }
.ibx-snooze span { padding: 7px 9px; border-radius: 9px; font-size: .78rem; font-weight: 650; }
.ibx-snooze .is-pick { background: var(--soft); box-shadow: inset 0 0 0 1.5px rgba(155, 93, 229, .45); }
[data-step="6"] .ibx-snooze { animation: ibx-pop .55s .8s var(--spring) backwards; }

/* Meddelandena som flyger in mot fönstret i hjälten */
.ibx-flying { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ibx-fly {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border-radius: 16px; font-size: .82rem; font-weight: 650; white-space: nowrap;
  color: var(--ink); background: #fff; box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .7);
}
.ibx-fly span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--primar-ink); }
.ibx-fly .ic { width: 15px; height: 15px; }
.ibx-fly b { font-size: .68rem; font-weight: 800; color: var(--primar-ink); }
.ibx-fly--1 { left: -22%; top: 6%; }
.ibx-fly--2 { right: -18%; top: 16%; }
.ibx-fly--3 { left: -26%; top: 40%; }
.ibx-fly--4 { right: -22%; top: 50%; }
.ibx-fly--5 { left: -18%; top: 74%; }
.ibx-fly--6 { right: -14%; top: 84%; }
.ibx-fly:nth-child(2n) span { color: var(--natt); background: var(--gnista); }
.motion .ibx-fly { animation: ibx-flyto 6s var(--ease-out) infinite backwards; }
.ibx-fly--1 { --dx: 140px; --dy: 60px; animation-delay: 0s !important; }
.ibx-fly--2 { --dx: -140px; --dy: 50px; animation-delay: 1s !important; }
.ibx-fly--3 { --dx: 150px; --dy: 0px; animation-delay: 2s !important; }
.ibx-fly--4 { --dx: -150px; --dy: 0px; animation-delay: 3s !important; }
.ibx-fly--5 { --dx: 140px; --dy: -50px; animation-delay: 4s !important; }
.ibx-fly--6 { --dx: -140px; --dy: -60px; animation-delay: 5s !important; }
.air-top.is-story .ibx-flying { opacity: 0; transition: opacity .6s; }
.ibx-bx { left: auto; right: -24%; bottom: -8%; width: 130px; }
@media (max-width: 639px) { .ibx-fly { font-size: 1rem; } .ibx-bx { right: -4%; bottom: -30%; width: 150px; } }
@media (min-width: 1024px) {
  .ibx-bx { right: -12%; bottom: -24%; width: 140px; }
  .ibx-fly--1, .ibx-fly--3, .ibx-fly--5 { left: -6%; }
  .ibx-fly--2, .ibx-fly--4, .ibx-fly--6 { right: -8%; }
}

/* ---------- Kanalnavet ---------- */
.ibx-ch { overflow: clip; background: radial-gradient(70% 60% at 50% 30%, #3e1659, var(--natt) 70%); }
.ibx-hubwrap { display: grid; gap: 40px; align-items: center; }
.ibx-hub { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.ibx-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ibx-hub__lines path { fill: none; stroke: rgba(200, 168, 242, .35); stroke-width: .35; stroke-dasharray: 1.4 1.4; vector-effect: non-scaling-stroke; }
.motion .ibx-hub__lines path { animation: dash 1.4s linear infinite; }
.ibx-hub__lines path { stroke-width: 1.5; }
.ibx-hub__dot { fill: var(--gnista); filter: drop-shadow(0 0 2px rgba(242, 250, 163, .9)); }
@media (prefers-reduced-motion: reduce) { .ibx-hub__dot { display: none; } }
.ibx-hub__core {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; gap: 4px; width: 34%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: #fff; box-shadow: 0 0 0 10px rgba(242, 250, 163, .1), 0 0 0 22px rgba(155, 93, 229, .12), 0 30px 80px -20px rgba(242, 250, 163, .5);
}
.ibx-hub__core img { width: 42%; height: auto; }
.ibx-hub__core b { margin-top: -10px; font-size: .9rem; font-weight: 800; color: var(--natt); }
.motion .ibx-hub__core { animation: hub-pulse 3s ease-in-out infinite; }
.ibx-hub__node {
  position: absolute; display: grid; justify-items: center; gap: 4px; translate: -50% -50%;
  color: var(--natt);
}
.ibx-hub__node .ic { box-sizing: content-box; width: 24px; height: 24px; padding: 14px; border-radius: 18px; background: var(--gnista); box-shadow: 0 16px 34px -14px rgba(242, 250, 163, .6); }
.ibx-hub__node:nth-child(2n + 1) .ic { color: #fff; background: var(--primar-ink); box-shadow: 0 16px 34px -14px rgba(126, 69, 201, .8); }
.ibx-hub__node small { font-size: .78rem; font-weight: 700; color: #fff; }
.reveal-on .ibx-hub .ibx-hub__node { opacity: 0; scale: .4; }
.reveal-on .ibx-hub.is-in .ibx-hub__node { opacity: 1; scale: 1; transition: opacity .5s, scale .7s var(--spring); transition-delay: calc(.2s + var(--i) * 90ms); }
.motion .ibx-hub.is-in .ibx-hub__node .ic { animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.ibx-chlist { display: grid; gap: 10px; }
.ibx-chlist li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.ibx-chlist__ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--gnista); background: rgba(242, 250, 163, .1); }
.ibx-chlist__ic .ic { width: 20px; height: 20px; }
.ibx-chlist__t { display: grid; gap: 2px; }
.ibx-chlist__t b { font-size: 1rem; font-weight: 700; color: #fff; }
.ibx-chlist__t span { font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--on-dark-muted); }
@media (min-width: 640px) { .ibx-chlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .ibx-hubwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .ibx-chlist { grid-template-columns: 1fr; }
}

/* ---------- Kalkylatorn: ringen med timmar ---------- */
.ibx-calc__out { align-content: center; justify-items: center; text-align: center; }
.ibx-ring { position: relative; width: 220px; aspect-ratio: 1; }
.ibx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ibx-ring circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; }
.ibx-ring .ibx-ring__fill { stroke: var(--gnista); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); transition: stroke-dashoffset .8s var(--ease-out); filter: drop-shadow(0 0 8px rgba(242, 250, 163, .5)); }
.ibx-ring p { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.ibx-ring b { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--gnista); font-variant-numeric: tabular-nums; }
.ibx-ring span { max-width: 130px; font-size: .8rem; line-height: 1.35; color: var(--ton); }
.ibx-calc .air-save__big { width: 100%; text-align: left; }
.ibx-calc .air-save__big small { font-size: .85rem; font-weight: 400; color: var(--ton); }

@keyframes ibx-in { 0% { opacity: 0; transform: translateX(-30px) scale(.96); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ibx-fly-in { from { opacity: 0; transform: translateX(-24px); } }
@keyframes ibx-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes ibx-drop { from { opacity: 0; transform: translateY(-40px) scale(.94); } }
@keyframes ibx-pulse { 50% { box-shadow: 0 0 0 6px rgba(155, 93, 229, .3); } }
@keyframes ibx-type { from { --hl: 0%; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ibx-count { from { --n: 10; } to { --n: 0; } }
@keyframes ibx-cursor { 0% { opacity: 0; transform: translate(80px, 70px); } 30% { opacity: 1; } 75% { opacity: 1; transform: none; } 85% { transform: scale(.8); } 100% { opacity: 0; transform: none; } }
@keyframes ibx-flyto { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 10%, 45% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); } }

/* Skärmen som hör till steget syns (samma övergång som telefonens skärmar i ai.css). */
[data-step="h"] .ibx-scr--h, [data-step="0"] .ibx-scr--0, [data-step="1"] .ibx-scr--1, [data-step="2"] .ibx-scr--2,
[data-step="3"] .ibx-scr--3, [data-step="4"] .ibx-scr--4, [data-step="5"] .ibx-scr--5, [data-step="6"] .ibx-scr--6 {
  opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .12s, transform .8s var(--ease-out) .12s, visibility 0s;
}