/* Mobilens Studio (handover 6.1; ägaren 2026-10-30, efter referens). Bara under 1024 px – datorns Hem (zimla-start.css)
   rörs inte. Krämvit sida: hälsningen, ett sökfält med Zimla-orben (håll in och prata), filtren Behöver dig · Utkast ·
   Pågår och jobbens kort (kunder/_hem_jobb.html, hämtas efteråt). Sökfältet och filtren fastnar överst när man scrollar;
   korten står fyra per skärm och varje svep stannar vid nästa fyra. Klasserna och data-attributen bär håll-in
   (zimla-ai-mobile-gestures.js), byggvägen (zimla-home-mobile.js) och rundturen (accounts/tour.html). */
.zmh { display: none; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-latin.1fc237564e15.woff2") format("woff2"); }
@media (max-width: 1023px) {
  /* Den gamla mobila starten (hälsningskort, rösthjälte, Senaste projekt, siffrorna och "I fokus") visas inte. */
  html.zimla-ai-start .zs-top:has(> .zmh) > .zs-intro, html.zimla-ai-start .zs-top:has(> .zmh) ~ .zs-flow, html.zimla-ai-start .zs-top:has(> .zmh) > .zs-flow { display: none !important; }
  .zimla-ai-chat__intro:has(.zmh) :is(.zimla-ai-chat__stats, .zimla-ai-chat__signals) { display: none !important; }
  html.zimla-ai-start:has(.zmh), html.zimla-ai-start:has(.zmh) body, html.zimla-ai-start:has(.zmh) .zimla-scene { background: #f6f5ef !important; }
  html.zimla-ai-start:has(.zmh) .zimla-global-topbar, html.zimla-ai-start:has(.zmh) .zimla-ai-panel, html.zimla-ai-start:has(.zmh) .zimla-ai-panel__body {
    background: transparent !important; }  /* kornet ligger i scenen bakom (zimla-mobile-kit.css) */
  /* Startsidan ligger i Zimla AI-panelens rutnät: kolumnen får krympa till skärmen. */
  html.zimla-ai-start .zimla-ai-panel__body:has(.zmh) { grid-template-columns: minmax(0, 1fr) !important; }
  .zs-top:has(> .zmh), .zimla-ai-chat__intro:has(.zmh) { min-width: 0; max-width: 100%; }

  .zmh {
    --zmh-deep: #12382b; --zmh-green: #1f6b4f; --zmh-ink: #1d2420; --zmh-mut: #5d6b61; --zmh-soft: #6b746d;
    --zmh-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --zmh-lift: 0 1px 2px rgba(20, 30, 25, .05), 0 10px 28px -20px rgba(18, 56, 43, .35);
    /* Det som fastnar: skrivraden 8 px under menyn, filtren under den, korten under filtren; fyra kort per skärm. */
    --zmh-stick: 8px; --zmh-filters-top: calc(var(--zmh-stick) + 68px); --zmh-cards-top: calc(var(--zmh-filters-top) + 52px);
    --zmh-card-h: max(104px, calc((100svh - 52px - var(--zmh-cards-top) - 84px - 30px) / 4));
    display: flex !important; flex-direction: column; min-width: 0; margin: 0 -20px;
    /* Bottenmenyn ligger över sidans slut: det sista ska gå att skrolla fram ovanför den. */
    padding: 0 0 calc(112px + env(safe-area-inset-bottom)); color: var(--zmh-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  }
  /* Hälsningen som referensen: en liten rad och en rubrik på två rader i Outfit (fonts.css), tätt spärrad. */
  .zmh-hi { padding: 26px 22px 0; }
  .zmh-hi p { margin: 0; font-size: 14px; color: var(--zmh-mut); }
  /* Datumet en liten rad överst, hälsningen större i skog, rubriken störst (ägaren 2026-10-30: "dela upp hälsningen och datumet"). */
  .zmh-hi .zmh-hi__date { font-size: 11.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: #6b746d; }
  .zmh-hi .zmh-hi__greet { margin-top: 8px; font: 400 21px/1.2 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; color: #174c39; }
  /* "Vad ska vi räkna på i dag?" på en rad (ägaren 2026-10-30): storleken följer skärmen, 31 px som mest. En längre rubrik
     (kundens namn) får fortfarande bryta. */
  .zmh-hi h1 { margin: 4px 0 0; font: 400 min(31px, calc((100vw - 44px) / 11.2))/1.12 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.025em; color: var(--zmh-ink); text-wrap: balance; }
  .zmh-kund { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; margin-bottom: 10px; padding: 0 4px 0 12px; border-radius: 999px; background: #fff; color: var(--zmh-deep); font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.06); }
  .zmh-kund > :not(a, .material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zmh-kund > .material-symbols-outlined { font-size: 17px; color: var(--zmh-green); }
  .zmh-kund a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--zmh-mut); text-decoration: none; }
  .zmh-kund a .material-symbols-outlined { font-size: 17px; }

  /* Röstkortet – bara rundturens kopia av startsidan (accounts/tour.html) har det kvar. */
  .zmh-talk {
    position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center;
    margin: 20px 16px 0; padding: 16px 18px; min-height: 96px; overflow: hidden; border-radius: 24px; color: #fff;
    background: var(--zmh-grain), radial-gradient(ellipse 90% 80% at 85% 0%, rgb(139 231 181 / 20%), transparent 60%), #174c39; background-size: 240px 240px, auto, auto;
    box-shadow: 0 22px 44px -24px rgb(15 58 44 / 70%);
  }
  .zmh-mic { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 0; border-radius: 50%; background: #8be7b5;
    box-shadow: 0 0 0 6px rgb(139 231 181 / 14%), 0 0 24px rgb(139 231 181 / 35%); }
  .zmh-mic-bars { display: flex; gap: 8px; }
  .zmh-mic-bars i { width: 9px; height: 18px; border-radius: 5px; background: #0f3a2c; }
  .zmh .zmh-talk-t { grid-column: 2; align-self: end; margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
  .zmh .zmh-talk-s { grid-column: 2; align-self: start; margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .74); }

  /* ── Sökfältet: Zimla-orben (håll in och prata; ett tryck börjar ett nytt jobb), texten, gemet och Skicka (med text) ── */
  .zmh-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding: 0 16px; }
  /* "Håll in mig!" – en pil som ser ritad ut mot orben (ägaren 2026-10-30). Handstilen är Caveat (egen fil, 14 kB, bara
     latin + åäö): iPhones Bradley Hand saknade pricken i "mig". Hämtas först när lappen syns. Ritas fram en gång. */
  .zmh-bottom > .zmh-note { position: relative; height: 50px; margin: 0 0 -4px; color: #174c39; pointer-events: none; }
  .zmh-note svg { position: absolute; left: 14px; top: 0; width: 96px; height: 50px; }
  .zmh-note path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zmh-note-draw 620ms cubic-bezier(.4, 0, .2, 1) 450ms forwards; }
  .zmh-note path + path { animation-duration: 200ms; animation-delay: 1050ms; }
  .zmh-note span { position: absolute; left: 114px; top: 2px; font: 600 24px/1 Caveat, "Bradley Hand", cursive;
    letter-spacing: .01em; white-space: nowrap; transform: rotate(-4deg); transform-origin: 0 50%; opacity: 0; animation: zmh-note-in 360ms ease-out 250ms forwards; }
  @keyframes zmh-note-draw { to { stroke-dashoffset: 0; } }
  @keyframes zmh-note-in { from { opacity: 0; transform: rotate(-4deg) translateY(4px); } to { opacity: 1; transform: rotate(-4deg); } }
  /* Fastnar överst. Bakom pillret en rak krämyta i hela bredden (::before) som döljer korten som scrollar förbi – en
     rund ring läckte i hörnen (ägaren 2026-10-30); pillret självt ritas av ::after, så båda ligger under orben och texten. */
  .zmh-compose { position: sticky; top: var(--zmh-stick); z-index: 6; display: flex; align-items: center; gap: 4px; height: 64px; padding: 7px 7px 7px 8px; border-radius: 999px; }
  .zmh-compose::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
  /* Glas (ägaren 2026-10-30): genomskinligt så att kornet syns igenom, ljus kant och en ljusare överkant som i en glasskiva,
     suddar det som glider under när fältet fastnat. */
  .zmh-compose::after { inset: 0; border: 1px solid rgb(255 255 255 / 90%); border-radius: inherit;
    background: linear-gradient(180deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 34%));
    -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(18 56 43 / 6%), 0 1px 2px rgba(20, 30, 25, .05), 0 14px 32px -20px rgba(18, 56, 43, .4); }
  /* Orben: ett abstrakt, levande klot i Zimlas färger (mint, skog, krämljus) som långsamt virvlar – lugnt i vila, snabbare
     och större medan man håller in och pratar (is-voice-*, zimla-ai-mobile-gestures.js). */
  .zmh-orb { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-left: 2px; padding: 0; overflow: hidden;
    border: 0; border-radius: 50%; background: #174c39; box-shadow: 0 0 0 3px rgb(139 231 181 / 16%), 0 6px 18px -6px rgb(47 191 113 / 55%);
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform 160ms ease-out, box-shadow 200ms ease; }
  /* Fokus kommer tillbaka till orben när rösten stängs (zimla-ai-mobile-gestures.js) och Safari ritade då en blek ring
     utanför och bytte glöden mot appens knappskugga (ägaren 2026-10-30: "konstigt fokus"). Med tummen ingen ring – bara
     med tangentbord, tätt runt klotet. */
  .zmh-compose { -webkit-tap-highlight-color: transparent; }
  .zmh-compose .zmh-orb:is(:focus, :focus-visible) { outline: none; box-shadow: 0 0 0 3px rgb(139 231 181 / 16%), 0 6px 18px -6px rgb(47 191 113 / 55%); }
  @media (any-pointer: fine) { .zmh-compose .zmh-orb:focus-visible { outline: 2px solid #1f6b4f; outline-offset: 2px; } }
  .zmh-orb__swirl, .zmh-orb::before, .zmh-orb::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
  .zmh-orb__swirl { inset: -30%; background: conic-gradient(from 0deg, #8be7b5, #d9f7e6, #2fbf71, #1f6b4f, #b8f0cf, #4fd08c, #8be7b5); filter: blur(5px); animation: zmh-orb-spin 7s linear infinite; }
  .zmh-orb::before { z-index: 1; inset: 18% 24% 30% 14%; background: radial-gradient(circle, rgb(255 255 255 / 85%), rgb(255 255 255 / 0%) 70%); filter: blur(3px); animation: zmh-orb-drift 5s ease-in-out infinite alternate; }
  .zmh-orb::after { z-index: 2; inset: 0; background: radial-gradient(circle at 72% 82%, rgb(15 58 44 / 28%), transparent 55%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
  @keyframes zmh-orb-spin { to { transform: rotate(360deg); } }
  @keyframes zmh-orb-drift { from { transform: translate(-6%, 4%) scale(.9); } to { transform: translate(14%, -8%) scale(1.1); } }
  .zmh-orb:active { transform: scale(.94); }
  .zmh-orb:is(.is-voice-active, .is-voice-connecting) { transform: scale(1.08); box-shadow: 0 0 0 5px rgb(139 231 181 / 30%), 0 0 22px rgb(139 231 181 / 60%); }
  .zmh-orb:is(.is-voice-active, .is-voice-connecting) .zmh-orb__swirl { animation-duration: 1.6s; }
  .zmh-compose input { flex: 1; min-width: 0; height: 40px; padding-left: 8px; border: 0; outline: 0; background: transparent; color: var(--zmh-ink); font: 400 16px Inter, ui-sans-serif, system-ui, sans-serif; /* 16 px: iOS zoomar inte */ }
  .zmh-compose input::placeholder { color: #8a918c; }
  .zmh-attach, .zmh-send { flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; }
  .zmh-attach { width: 40px; height: 40px; background: none; color: var(--zmh-mut); }
  .zmh-send { width: 44px; height: 44px; background: var(--zmh-deep); color: #fff; }
  .zmh-send:disabled { display: none; }
  .zmh-send .material-symbols-outlined, .zmh-attach .material-symbols-outlined { font-size: 19px; }
  .zmh-compose.is-busy .zmh-send { background: #e6e3d9; color: #9aa09a; }
  .zmh-err { margin: -4px 4px 0; font-size: 13px; color: #b3261e; }

  /* ── Dina jobb: ett filter i taget och jobbens kort ── */
  /* Rubriken och sökfältet är ett block, listan står en bit ifrån (ägaren 2026-10-30: "composern är stora stjärnan"). */
  .zmh-jobs { display: flex; flex-direction: column; margin-top: 50px; }
  /* Filtren och Visa alla på en rad; raden fastnar under sökfältet (tätt mot dess krämring). */
  .zmh-jobs__bar { position: sticky; top: var(--zmh-filters-top); z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 -16px 12px; padding: 6px 16px 6px; }
  /* Ingen yta bakom sökfältet och filtren – en platt yta skar sig mot sidans korn och grönska (ägaren 2026-10-30). Korten tonar
     i stället bort när de glider in under filtren, så inget syns bakom dem eller sökfältet. Skrollen styr toningen där CSS
     kan (iOS 26, Chrome); annars sätter zimla-home-mobile.js samma opacitet. */
  @supports (animation-timeline: view()) {
    .zmh-cards > .zmh-card { animation: zmh-card-out linear both; animation-timeline: view(block var(--zmh-cards-top) 0px); animation-range: exit 0% exit 75%; }
    @keyframes zmh-card-out { to { opacity: 0; } }
  }
  .zmh-jobs__bar > :is(a, .tour-zmh-link) { flex: none; display: inline-flex; align-items: center; min-height: 38px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--zmh-soft); text-decoration: none; }
  .zmh-filters { flex: 1; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .zmh-jobs__bar { gap: 8px; }
  .zmh-filters::-webkit-scrollbar { display: none; }
  .zmh-filters button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 999px;
    background: rgb(255 255 255 / 62%); color: #14402f; font: 500 13.5px/1 Inter, ui-sans-serif, system-ui, sans-serif; box-shadow: 0 1px 2px rgba(20, 30, 25, .04); }
  .zmh-filters button span { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .6; }
  .zmh-filters button[aria-pressed="true"] { border-color: var(--zmh-deep); background: var(--zmh-deep); color: #fff; }
  .zmh-filters button[aria-pressed="true"] span { opacity: .75; }
  .zmh-jobs__none { margin: 2px 0 6px; font-size: 13.5px; color: var(--zmh-mut); }

  /* Korten: bara text (ägaren 2026-10-30) – jobbet och beloppet, steget som etikett före nästa steg, kunden och platsen,
     chipsen (tiden, bokningen, frågor, ÄTA). Beloppen är exkl. moms som allt hantverkaren ser. */
  .zmh-cards { display: flex; flex-direction: column; gap: 10px; }
  .zmh-cards[hidden] { display: none; }
  .zmh-card { display: flex; flex-direction: column; justify-content: center; height: var(--zmh-card-h); min-width: 0; padding: 12px 14px; overflow: hidden;
    border: 1px solid rgb(255 255 255 / 90%); border-radius: 20px; background: linear-gradient(135deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 58%)); color: var(--zmh-ink); text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 30, 25, .04), 0 12px 28px -22px rgba(18, 56, 43, .35); }
  .zmh-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .zmh-card__top, .zmh-card__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .zmh-card__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
  .zmh-card__kr { flex: none; font: 700 15.5px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .zmh-card__line { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .zmh-card__badge { flex: none; padding: 3px 7px; border-radius: 6px; background: #e3f4ea; color: var(--zmh-deep); font-size: 11px; font-weight: 600; line-height: 1.2; }
  .zmh-card__badge.is-warn { background: #fbefd6; color: #6b4600; }
  .zmh-card__next { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zmh-green); font: 400 15px/1.3 Newsreader, Georgia, serif; }
  .zmh-card__sub > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--zmh-soft); }
  .zmh-card__sub .material-symbols-outlined { flex: none; font-size: 15px; color: #8a918c; }
  .zmh-card__sub small { display: none; }  /* "exkl. moms" står i Kunder; raden behövs till kunden */
  .zmh-card__chips { display: flex; gap: 6px; margin-top: 5px; overflow: hidden; }
  .zmh-card__chips > span { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid rgb(18 60 46 / 8%); border-radius: 10px;
    background: rgb(255 255 255 / 55%); color: #2f4237; font-size: 11.5px; white-space: nowrap; }
  .zmh-card__chips .material-symbols-outlined { flex: none; font-size: 14px; color: var(--zmh-mut); }

  /* Korten som sökfältets glas och kompakta (ägaren 2026-10-30): tre rader – jobbet och beloppet, steget och nästa steg,
     kunden med platsen och tiden till höger. Sex per skärm. */
  .zmh-card { padding: 10px 14px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 34%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(18 56 43 / 6%), 0 1px 2px rgba(20, 30, 25, .05), 0 12px 26px -20px rgba(18, 56, 43, .35); }
  .zmh-card__body { gap: 2px; }
  .zmh-card__title, .zmh-card__kr { font-size: 15px; }
  .zmh-card__kr { font-weight: 600; }
  /* Steget i jobbets egen färg (ägaren 2026-10-30: "sin egen stil så att status sticker ut") – samma färger som Kunders
     tavla (kunder.STAGES): etiketten med en prick, tonad i samma färg. Ingen rand i kanten (ägaren). */
  .zmh-card__badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--tone, #1f6b4f) 12%, transparent); color: var(--tone, #1f6b4f); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
  .zmh-card__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .zmh-card__badge.is-warn { background: #fbefd6; color: #8a5a00; }
  /* Nästa steg i vanlig sans, inte grön serif (ägaren 2026-10-30) – en lugn rad efter steget. */
  .zmh-card__next { color: #3f4b43; font: 500 13.5px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.005em; }
  .zmh-card__sub { align-items: center; }
  .zmh-card__chips { flex: none; gap: 10px; margin: 0; }
  .zmh-card__chips > span { height: auto; padding: 0; border: 0; background: none; color: var(--zmh-soft); font-size: 12px; gap: 3px; }
  .zmh-card__chips .material-symbols-outlined { font-size: 13px; }
  /* Varje rad sin roll (ägaren 2026-10-30: nästa steg "inte fint ut alls" – en andra rubrik tätt intill etiketten):
     jobbet och beloppet; nästa steg som en lugn beskrivning med steget till höger under beloppet; kunden och tiden. */
  .zmh-card__title { font-weight: 600; }
  .zmh-card__line { justify-content: space-between; gap: 12px; }
  /* Nästa steg är jobbets läge: Zimlas skog (ägaren 2026-10-30), lättare än rubriken. */
  .zmh-card__next { flex: 1; color: #174c39; font: 500 13px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
  .zmh-card__badge { flex: none; padding: 2px 8px 2px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  .zmh { --zmh-card-h: max(84px, calc((100svh - 52px - var(--zmh-cards-top) - 84px - 40px) / 6)); }
  .zmh-cards { gap: 8px; }
  .zmh-cards > .zmh-card:nth-child(4n + 1) { scroll-snap-align: none; }
  .zmh-cards > .zmh-card:nth-child(5n + 1) { scroll-snap-align: none; }
  .zmh-cards > .zmh-card:nth-child(6n + 1) { scroll-snap-align: start; scroll-margin-top: var(--zmh-cards-top); }

  /* I taget: scrollen (panelen) stannar vid toppen och vid nästa omgång kort (fem, nedan); luft efter de sista så att även de kan
     stanna överst. */
  html.zimla-ai-start .zimla-ai-panel-shell:has(.zmh) { scroll-snap-type: y proximity; }  /* stannar nära ett par, tvingar ingen tom luft efter listan */
  .zmh-hi { scroll-snap-align: start; }
  .zmh-cards > .zmh-card:nth-child(4n + 1) { scroll-snap-align: start; scroll-margin-top: var(--zmh-cards-top); }

  /* Skelettet tills korten kommer. */
  .zmh-skel.zmh-filters i { flex: none; width: 104px; height: 38px; border-radius: 999px; }
  .zmh-card--skel { flex: none; height: var(--zmh-card-h); border-color: transparent; box-shadow: none; }
  .zmh-skel.zmh-filters i, .zmh-card--skel { background: linear-gradient(90deg, #ecebe4 0%, #f7f6f1 50%, #ecebe4 100%); background-size: 200% 100%; animation: zmh-shim 1.1s linear infinite; }
  @keyframes zmh-shim { to { background-position: -200% 0; } }

  /* Övergången till offertläget (zimla-home-mobile.js openMorph): samma ark som offertläget (.olm), ovanpå allt, poppar
     upp ur skrivraden som chatten ur Zimla-gubben; tonar bort när offertläget står där, krymper tillbaka vid fel. */
  .olm.zmh-morph { z-index: 120; display: flex; pointer-events: none; }  /* över menyn – offertläget har ingen meny */
  .zmh-morph.is-popping { animation: zmh-morph-pop 520ms both; }
  .zmh-morph.is-leaving { opacity: 0; transition: opacity 200ms ease; }
  .zmh-morph.is-shrinking { animation: zmh-morph-shrink 240ms cubic-bezier(.4, 0, .9, .6) both; }
  @keyframes zmh-morph-pop {
    0% { opacity: 0; transform: scale(.2); border-radius: 48px; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
    18% { opacity: 1; }
    60% { transform: scale(1.025); border-radius: 0; animation-timing-function: ease-in-out; }
    80% { transform: scale(.995); animation-timing-function: ease-in-out; }
    100% { opacity: 1; transform: none; }
  }
  @keyframes zmh-morph-shrink { 25% { transform: scale(1.02); } to { opacity: 0; transform: scale(.2); border-radius: 48px; } }
  .zmh-morph__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 8px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }  /* nertill som offertlägets tråd */
  .zmh-morph__me { align-self: flex-end; max-width: 84%; margin: 0; padding: 10px 13px; border-radius: 18px 18px 6px 18px; background: var(--zm-forest-fill, #174c39); color: #fff; font: 400 15px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
  .zmh-morph__wait { display: flex; align-items: center; gap: 9px; margin: 0; color: #5d6a62; font: 400 14px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
  .zmh-morph__wait i { width: 16px; height: 16px; border: 2px solid rgb(23 76 57 / 20%); border-top-color: #174c39; border-radius: 50%; animation: zmh-spin .8s linear infinite; }
  @keyframes zmh-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .zmh-orb { transition: none; }
    .zmh-orb:active, .zmh-orb:is(.is-voice-active, .is-voice-connecting) { transform: none; }
    .zmh-orb__swirl, .zmh-orb::before { animation: none; }
    .zmh-skel.zmh-filters i, .zmh-card--skel { animation: none; }
    .zmh-morph.is-popping, .zmh-morph.is-shrinking { animation: none; }
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .zmh-note path, .zmh-note span { animation: none; stroke-dashoffset: 0; opacity: 1; }
}