/* Mobilens gröna = landningssidans skog (ägaren 2026-10-30): #174c39 med korn och en ljus mintglöd, som heron och korten
   på den utloggade startsidan. Laddas sist så att den gäller över varje sidas egen mobilfil. Två färger:
   --zm-forest (heltäckande ytor, text och kanter) och --zm-forest-fill (fyllda knappar, valda flikar, egna bubblor).
   Zimla-gubben i bottenmenyn och den abstrakta orben i startsidans sökfält har egna färger och rörs inte. */
@media (max-width: 1023px) {
  html:root {
    --zm-forest: #174c39;
    --zm-forest-fill: 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>") 0 0 / 240px 240px,
      radial-gradient(ellipse 90% 80% at 85% 0%, rgb(139 231 181 / 20%), transparent 60%), #174c39;
    --zm-green: #174c39; --zm-hero: #174c39;
  }
  /* Varje mobilytas egna gröna tokens pekar på skogen. */
  html body .zmh { --zmh-deep: #174c39; --zmh-green: #174c39; }
  html body :is(.zmk) { --zmk-deep: #174c39; --zmk-green: #174c39; }
  html body :is(.zmc) { --zmc-deep: #174c39; --zmc-green: #174c39; }
  html body :is(.zma, .zma-sheet) { --zma-deep: #174c39; --zma-green: #174c39; }
  html body :is(.olm, .olm-sheet) { --olm-deep: #174c39; --olm-green: #174c39; }
  html:is(.olm-on, .zgc-on) body .zimla-ai-panel-shell { --olmc-deep: #174c39; --olmc-green: #174c39; }
  html body:has(.pdock) { --m-primary: #174c39; --m-dark: #174c39; }

  /* Fyllda ytor: skogen med korn. */
  html body .zimla-global-topbar .zs-mobile-account,
  html body .zmh-filters button[aria-pressed="true"],
  html body .zmh-compose .zmh-send:not(:disabled),
  html body .zmk-chips button[aria-pressed="true"],
  html body .kl:has(> .zmc) .zmc-tabs button[aria-selected="true"],
  html body .zmic__row .is-primary,
  html body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a[aria-current="page"]::before,
  html:is(.olm-on, .zgc-on):root body .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-message__bubble,
  html.zgc-on:root body .zimla-ai-panel-shell .zimla-ai-composer__box > button[type="submit"]:not(:disabled),
  html.zgc-on:root body .zimla-ai-panel-shell .zimla-ai-composer__box .zimla-ai-composer__voice:not(.is-held) {
    background: var(--zm-forest-fill) !important; border-color: var(--zm-forest) !important;
  }
  html.zgc-on:root body .zimla-ai-panel-shell .zimla-ai-composer__box:is([data-voice-active="1"], :has(.zimla-ai-composer__voice.is-held)) .zimla-ai-composer__voice { background: var(--zm-forest-fill) !important; color: #fff !important; }
  /* Lyssnar-lagret (base.html .zlisten) i samma skog. */
  html body .zlisten { background: var(--zm-forest-fill) !important; }
  html body .zlisten .zlisten-face i { background: var(--zm-forest) !important; }
  /* Loggans prickar som landningssidans logga: skog och dess ljusa grön. */
  html body .zimla-global-topbar .zs-mobile-brand__dots i { background: var(--zm-forest); }
  html body .zimla-global-topbar .zs-mobile-brand__dots i:nth-child(2n) { background: #2fb47a; }
  /* Märket större och tydligare (ägaren 2026-10-30: "större bollar räcker"): 12 px bollar i stället för 9. */
  html body .zimla-global-topbar .zs-mobile-brand__dots { grid-template-columns: repeat(2, 12px); gap: 4px; }
  html body .zimla-global-topbar .zs-mobile-brand__dots i { width: 12px; height: 12px; }
  /* Chattens lilla orb vid namnet och i huvudet: skog. */
  html.zgc-on body .zgc-orb { background-color: var(--zm-forest); }
}
@media (max-width: 1023px) {
  /* Klockan i översta raden syns på alla sidor (startsidans och listornas regler döljer annars allt utom avataren). */
  html body .zimla-global-topbar .zimla-global-topbar__mobile-actions > .zs-mobile-bell { display: grid !important; }
  html body .zimla-global-topbar .zimla-global-topbar__mobile-actions { gap: 8px; }
}

/* ── Notiserna (ägaren 2026-10-30: "den gröna korniga bakgrunden i olika nyanser"): arket i djup skog med korn, listan
   en nyans ljusare, varje notis en rad på den, ikonen i en mint bricka. Bara när arket visar notiserna. ── */
@media (max-width: 1023px) {
  /* Glas som startsidans sökfält (ägaren 2026-10-30, i stället för skogen): ljus kant och överkant, suddar sidan bakom.
     Tätare vitt än fältet – arket ligger över en hel sida text, och den måste inte gå att läsa igenom. */
  html body .zimla-ai-peek.is-inbox {
    border: 1px solid rgb(255 255 255 / 90%) !important; color: #1d2420;
    background: linear-gradient(180deg, rgb(255 255 255 / 80%), rgb(255 255 255 / 64%)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 -10px 40px -18px rgb(15 58 44 / 45%) !important;
  }
  html body .zimla-ai-peek.is-inbox .zimla-ai-peek__drag-handle span { background: rgb(18 56 43 / 22%) !important; }
  html body .zimla-ai-peek.is-inbox .zimla-ai-support__intro strong, html body .zimla-ai-peek.is-inbox .zimla-ai-peek__support-intro strong { color: #12382b; font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 400; }
  html body .zimla-ai-peek.is-inbox .zimla-ai-peek__support-intro { border-color: var(--zm-hair) !important; }
  html body .zimla-ai-peek.is-inbox .zimla-ai-peek__support-intro small { color: #5d6b61; }
  html body .zimla-ai-peek.is-inbox .zimla-ai-support__back { border: 1px solid var(--zm-glass-line); background: var(--zm-glass-bg); box-shadow: var(--zm-glass-shadow); color: #12382b; }
  /* Listan inuti: vanlig vit (ägaren 2026-10-30) – mörk text, skog för ikonerna och det olästa. */
  html body .zimla-ai-peek.is-inbox .zimla-help-sheet__inbox-panel { border: 0; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 25, .06); }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__header { border-color: #eef0ec; background: transparent; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* arket har redan rubriken */
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__header { justify-content: space-between; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__count { color: #174c39; font-weight: 600; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__read { color: #5d6b61; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__group-label { color: #5d6b61; background: transparent; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item { border-color: #eef0ec; background: transparent; color: #1d2420; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item:active { background: rgb(23 76 57 / 5%); }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item.is-unread::before { background: #174c39; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item__title { color: #1d2420; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item__text, html body .zimla-ai-peek.is-inbox .zimla-notification-item__time { color: #6b746d; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item__icon { border: 0; background: var(--zm-forest-fill) !important; color: #fff !important; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-item--amber .zimla-notification-item__icon { background: #fbefd6 !important; color: #8a5a00 !important; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__empty { color: #5d6b61; }
  html body .zimla-ai-peek.is-inbox .zimla-notification-inbox__loading i { background: #ecebe4; }
}
/* Ikonerna (includes/notification_icon.html) i sin bricka, överallt. */
.zimla-notification-item__icon svg { width: 18px; height: 18px; }

/* ── Offertläget och chatten i samma formspråk som startsidan (ägaren 2026-10-30) ─────────────────────────────────
   Kräm med korn i stället för mint, glas på tillbaka-knappen och Chatt | Offert, och skrivraden som startsidans sökfält:
   ett glaspiller med "Håll & prata" i skog till höger. Medan man håller in blir knappen mint, säger "Släpp för att skicka"
   och pulserar; med text i raden blir rösten en liten rund knapp bredvid Skicka. */
@media (max-width: 1023px) {
  html body .olm:not(.zmh-morph), html body .olm.zmh-morph { background: var(--zm-paper-grain) 0 0 / 720px 180px repeat fixed, #f6f5ef; background-blend-mode: multiply, normal; }
  html.olm-on, html.olm-on body { background: #f6f5ef !important; }
  html body .olm .olm-back { border: 1px solid rgb(255 255 255 / 90%); background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 40%)); color: #174c39;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgba(20, 30, 25, .05), 0 8px 18px -12px rgba(18, 56, 43, .4); }
  html body .olm .olm-title b { font: 600 16px/1.25 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; }
  html body .olm .olm-seg { border: 1px solid rgb(255 255 255 / 80%); border-radius: 14px; background: rgb(23 76 57 / 6%); }
  html body .olm .olm-ind { border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 25, .08), 0 6px 14px -10px rgba(18, 56, 43, .35); }
  html body .olm .olm-seg button[aria-selected="true"] { color: #174c39; }
  html body .olm .olm-pane-offer { background: transparent; }

  /* Skrivraden */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box {
    min-height: 60px; gap: 6px; padding: 6px 6px 6px 18px !important; border: 1px solid rgb(255 255 255 / 90%) !important; border-radius: 30px !important;
    background: linear-gradient(180deg, rgb(255 255 255 / 80%), rgb(255 255 255 / 58%)) !important; -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, .45) !important;
  }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box textarea { font-size: 16px; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box textarea::placeholder { color: #8a918c; }
  /* Håll & prata: ett tydligt piller i skog (tom rad). */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box .zimla-ai-composer__voice {
    height: 48px !important; min-height: 48px !important; max-height: 48px; gap: 7px; padding: 0 18px 0 14px !important; border: 0 !important; border-radius: 999px !important;
    background: var(--zm-forest-fill) !important; color: #fff !important; font: 600 14.5px/1 Inter, ui-sans-serif, system-ui, sans-serif !important; opacity: 1;
    box-shadow: 0 8px 18px -10px rgb(15 58 44 / 65%) !important; -webkit-touch-callout: none; user-select: none; touch-action: manipulation;
    transition: transform 160ms ease-out, background-color 160ms ease, box-shadow 200ms ease;
  }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box .zimla-ai-composer__voice .material-symbols-outlined { font-size: 20px !important; color: inherit; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box .zimla-ai-composer__voice:active { transform: scale(.96); }
  /* Gemet (ägaren 2026-10-30: "går inte att lägga till bilaga"): som startsidans sökfält, till höger om texten före rösten.
     Öppnar samma bilagemeny som på datorn (Bifoga filer, Välj från projekt) ovanför skrivraden. Borta medan man pratar. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box { position: relative; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box > .zimla-ai-attachments { order: 1; flex: none; position: static; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box > :is(.zimla-ai-composer__voice, [data-chat-voice-toggle]) { order: 2; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box > button[type="submit"] { order: 3; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-attachments > summary {
    display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 2px; border: 0; border-radius: 50%;
    background: transparent; color: #5d6b61; list-style: none; cursor: pointer; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-attachments > summary::-webkit-details-marker { display: none; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-attachments > summary .zimla-ai-composer__plus { display: none; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-attachments > summary::before {
    content: "attach_file"; font: normal 22px/1 "Material Symbols Outlined"; font-feature-settings: "liga"; transform: rotate(45deg); }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-attachments[open] > summary { background: rgb(23 76 57 / 8%); color: #174c39; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-attachments__body { left: 0; right: 0; border-color: rgb(255 255 255 / 90%); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 30, 25, .05), 0 16px 34px -18px rgba(18, 56, 43, .45); }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:is(.is-voice-wave, [data-voice-active="1"]) > .zimla-ai-attachments { display: none; }
  /* Med text: rösten en liten rund knapp, Skicka i skog. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:has(textarea:not(:placeholder-shown)) .zimla-ai-composer__voice {
    width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; justify-content: center;
    border: 1px solid rgb(23 76 57 / 14%) !important; background: rgb(255 255 255 / 70%) !important; color: #174c39 !important; box-shadow: none !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box > button[type="submit"] {
    width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; background: var(--zm-forest-fill) !important; color: #fff !important; }
  /* Medan man håller in: skog, "Släpp för att skicka" och en lugn puls runt knappen. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:is([data-voice-active="1"], :has(.zimla-ai-composer__voice.is-held)) .zimla-ai-composer__voice {
    width: auto !important; height: 48px !important; padding: 0 18px 0 14px !important; border: 0 !important; background: var(--zm-forest-fill) !important; color: #fff !important; transform: scale(1.03);
    animation: zm-voice-pulse 1.4s ease-out infinite; }
  @keyframes zm-voice-pulse { 0% { box-shadow: 0 0 0 0 rgb(139 231 181 / 55%); } 100% { box-shadow: 0 0 0 14px rgb(139 231 181 / 0%); } }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:is([data-voice-active="1"], :has(.zimla-ai-composer__voice.is-held)) {
    border-color: rgb(139 231 181 / 70%) !important; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box .zimla-ai-composer__voice { animation: none !important; transition: none; }
}
@media (max-width: 1023px) {
  /* Chattens yta i offertläget ligger ovanpå offertläget: genomskinlig, så krämen och kornet syns igenom (inte mint). */
  html.olm-on:root body aside.zimla-ai-panel, html.olm-on:root body .zimla-ai-panel-shell { background: transparent !important; }
}

/* ── Zimlas svar i chatten (ägaren 2026-10-30: "du ser säkert alla fel"; UX-packen) ─────────────────────────────
   Ett vanligt svar är text utan kort – en liten namnrad (orb + Zimla AI) och svaret i samma storlek som ens egen bubbla;
   svar med resultat (rum, belopp) ligger i glaskortet. "Klart" bara när Zimla faktiskt gjort något. Tråden börjar
   nertill, nära skrivraden. Chatt | Offert: glas med den valda fliken i skog. */
@media (max-width: 1023px) {
  html.olm-on:root body .zimla-ai-chat-bubble { display: none !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) > .zimla-ai-message__stack {
    gap: 6px; padding: 2px 4px; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant):has(.zcc, .zimla-chat-result) > .zimla-ai-message__stack {
    gap: 10px; padding: 14px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 44%)) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgba(20, 30, 25, .05), 0 12px 26px -20px rgba(18, 56, 43, .35) !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__name {
    gap: 7px; font: 500 12.5px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: #5d6b61; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__name::before {
    width: 20px; height: 20px; background: linear-gradient(#fff, #fff) 5.6px 6.5px / 3px 7px no-repeat, linear-gradient(#fff, #fff) 11.4px 6.5px / 3px 7px no-repeat, #174c39; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-chat-run__answer :is(p, li) { font-size: 15px; line-height: 1.5; color: #1d2420; }
  /* "Klart" bara efter ett svar som ändrat något (rum, belopp) – ett textsvar är sitt eget besked. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-chat-run[data-chat-state="completed"]:not(:has(.zcc, .zimla-chat-result)) .zimla-chat-run__activity { display: none !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-chat-run__activity-current { font-size: 12.5px; color: #6b746d; }
  /* Tråden nertill: ett kort samtal ligger vid skrivraden, inte högst upp med tomrum under. Listan är själv det som
     skrollar (chatten följer senaste meddelandet där): den får aldrig växa förbi sin ruta (ägaren 2026-10-30: gick inte
     att skrolla); utfyllnaden överst (::before) blir 0 när tråden är längre än rutan. */
  html.olm-on:root body .zimla-ai-panel-shell .zimla-ai-chat__messages { flex: 1 1 0; min-height: 0; overflow-y: auto; }
  html.olm-on:root body .zimla-ai-panel-shell .zimla-ai-chat__messages::before { content: ""; flex: 1 0 0; }
  /* Chatt | Offert */
  html body .olm .olm-seg { border: 1px solid rgb(255 255 255 / 90%); border-radius: 999px; padding: 4px;
    background: linear-gradient(180deg, rgb(255 255 255 / 66%), rgb(255 255 255 / 40%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgba(20, 30, 25, .05); }
  html body .olm .olm-seg button { min-height: 40px; font-weight: 500; color: #5d6b61; transition: color 220ms ease; }
  html body .olm .olm-seg button[aria-selected="true"] { color: #fff; }
  html body .olm .olm-ind { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--zm-forest-fill); box-shadow: 0 6px 14px -8px rgb(15 58 44 / 60%); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
  html body .olm .olm-title b { font-size: 17px; font-weight: 500; }
}

/* ── Röstläget i skrivraden (ägaren 2026-10-30: "när man håller in Håll & prata animeras den in till en border runt
   composern, med vågmönster som rör sig") ─────────────────────────────────────────────────────────────────────────
   Knappen krymper till en rund mint mikrofon och glider ut till en ram runt hela raden: ett band i mint och skog som
   strömmar runt (conic-gradient som vrids), och ett mjukt sken utanför. Inuti: en röd prick, tiden och "Släpp för att
   skicka". Innan mikrofonen lyssnar står "Ansluter…" i den gröna knappen. Ett fel blir en kort rad ovanför raden. */
@property --zm-ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (max-width: 1023px) {
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave {
    border-color: transparent !important; animation: zm-ring-glow 2.4s ease-in-out infinite;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 0 0 4px rgb(139 231 181 / 16%), 0 12px 30px -14px rgb(47 191 113 / 55%) !important; }
  @keyframes zm-ring-glow { 50% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 0 0 7px rgb(139 231 181 / 10%), 0 14px 34px -12px rgb(47 191 113 / 70%); } }
  /* Ramen: ett vridande band, synligt bara i kanten (mask), som glider ut från knappen till höger och runt. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave::after {
    content: ""; position: absolute; inset: 0; z-index: 3; padding: 2.5px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--zm-ring), #8be7b5, #2fbf71 14%, #174c39 26%, #d9f7e6 40%, #8be7b5 52%, #1f6b4f 66%, #b8f0cf 80%, #2fbf71 90%, #8be7b5);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: zm-ring-in 420ms cubic-bezier(.22, 1, .36, 1) both, zm-ring-spin 2.6s linear infinite; }
  @keyframes zm-ring-in { from { opacity: 0; clip-path: inset(0 0 0 72% round 30px); } to { opacity: 1; clip-path: inset(0 round 30px); } }
  @keyframes zm-ring-spin { to { --zm-ring: 360deg; } }
  /* Vågen i mitten behövs inte – ramen är vågen. Kvar: pricken, tiden och vad man gör. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave > .zimla-voice-wave { display: none !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-voice-wave__time {
    position: absolute; left: 18px !important; right: auto !important; top: 50%; transform: translateY(-50%); z-index: 2; visibility: visible !important;
    display: inline-flex; align-items: center; gap: 8px; color: #1d2420; font: 600 14px/1 Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-voice-wave__time::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e5483b; animation: zm-rec-dot 1.1s ease-in-out infinite; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-voice-wave__time::after {
    content: "Släpp för att skicka"; color: #5d6b61; font-weight: 500; }
  @keyframes zm-rec-dot { 50% { opacity: .35; } }
  /* Knappen krymper till en rund mikrofon i skog (texten står nu i raden). */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-ai-composer__voice {
    width: 48px !important; min-width: 48px !important; padding: 0 !important; justify-content: center; gap: 0; border-radius: 50% !important;
    background: var(--zm-forest-fill) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgb(15 58 44 / 65%) !important;
    animation: zm-mic-in 320ms cubic-bezier(.22, 1, .36, 1) both !important; transform: none; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-ai-composer__voice::after { content: none !important; }
  @keyframes zm-mic-in { from { transform: scale(.7); } }
  /* Hållen men ännu inte lyssnande: "Ansluter…", lugnt. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:not(.is-voice-wave):not([data-voice-active="1"]):has(.zimla-ai-composer__voice.is-held) .zimla-ai-composer__voice {
    background: var(--zm-forest-fill) !important; color: rgb(255 255 255 / 80%) !important; transform: scale(.98); animation: none !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:not(.is-voice-wave):not([data-voice-active="1"]):has(.zimla-ai-composer__voice.is-held) .zimla-ai-composer__voice::after { content: "Ansluter…" !important; }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box:not(.is-voice-wave):has(.zimla-ai-composer__voice.is-held) { border-color: rgb(255 255 255 / 90%) !important; }
  /* Fel och besked: en kort rad ovanför skrivraden. */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-chat-voice-feedback { left: 16px; right: 16px; bottom: calc(100% - 2px); }
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-chat-voice-status:not([hidden]) {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 999px;
    background: rgb(255 255 255 / 82%); box-shadow: 0 6px 16px -10px rgba(18, 56, 43, .35); color: #8a2f22; font: 500 12.5px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave,
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave::after,
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-voice-wave__time::before,
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell .zimla-ai-composer__box.is-voice-wave .zimla-ai-composer__voice { animation: none !important; }
}
@media (max-width: 1023px) {
  /* Zimlas svar i en glasbubbla (ägaren 2026-10-30: "zimla ai ska ha en bakgrund") – samma glas som skrivraden, spetsen
     uppe till vänster mot ens egen mörka bubbla till höger; namnraden inuti. Svar med resultat har sitt glaskort (ovan). */
  :is(html.olm-on, html.zgc-on):root:root:root:root .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant):not(:has(.zcc, .zimla-chat-result)) > .zimla-ai-message__stack {
    width: fit-content; max-width: 88%; gap: 6px; padding: 11px 14px 12px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 6px 18px 18px 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 52%)) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgba(20, 30, 25, .05), 0 10px 24px -18px rgba(18, 56, 43, .35) !important; }
}

/* Norrskenet (ägaren 2026-10-30: "jätte diskret zimla grön som kanske rör på sig lite", ett lager på den korniga
   bakgrunden). Fast bakom innehållet, direkt efter scenen (base.html): två stora suddiga fläckar i skog och mint som glider
   en runda på 70–90 s. Bara transform rör sig – inget ritas om. Stilla vid minskad rörelse, borta när scenen är täckt. */
.zm-aurora { display: none; }
@media (max-width: 1023px) {
  html.zimla-room .zm-aurora { position: fixed; inset: 0; z-index: 0; display: block; overflow: hidden; pointer-events: none; transition: opacity 320ms ease; }
  html.zimla-room.zimla-room-covered .zm-aurora { opacity: 0; }
  .zm-aurora::before, .zm-aurora::after { content: ""; position: absolute; width: 130vmax; height: 130vmax; border-radius: 50%; will-change: transform; }
  .zm-aurora::before { left: -55vmax; top: -60vmax; background: radial-gradient(closest-side, rgb(23 76 57 / 9%), rgb(23 76 57 / 4%) 45%, transparent);
    animation: zm-aurora-a 70s ease-in-out infinite alternate; }
  .zm-aurora::after { right: -60vmax; top: -30vmax; background: radial-gradient(closest-side, rgb(139 231 181 / 18%), rgb(139 231 181 / 6%) 50%, transparent);
    animation: zm-aurora-b 90s ease-in-out infinite alternate; }
  @keyframes zm-aurora-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18vw, 10vh, 0) scale(1.12); } 100% { transform: translate3d(6vw, 26vh, 0) scale(.95); } }
  @keyframes zm-aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-22vw, 18vh, 0) scale(.9); } 100% { transform: translate3d(-8vw, 40vh, 0) scale(1.1); } }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .zm-aurora::before, .zm-aurora::after { animation: none; } }
@media print { .zm-aurora { display: none !important; } }

/* ── Kunder, kundsidan, Planering och Team i startsidans formspråk (ägaren 2026-10-30: "behöver fixas till"; UX-packen) ──
   En yta: kornig kräm med norrsken bakom, appens topprad med klockan på alla flikar, glas på allt som ligger på
   bakgrunden. En typografi: Outfit 400 i rubriker, Inter 600 15 px i namn, etiketter 11,5 px versaler. Ett val: filter,
   segment och dagens dag är glas med det valda i skog; steget är en etikett med prick i stegets färg; "+" är en skogscirkel. */
@media (max-width: 1023px) {
  :root { --zm-glass-bg: linear-gradient(180deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 34%)); --zm-glass-line: rgb(255 255 255 / 90%);
    --zm-glass-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgba(20, 30, 25, .05), 0 12px 26px -20px rgba(18, 56, 43, .35);
    --zm-hair: rgb(18 56 43 / 7%); --zm-label: 500 11.5px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; }
  /* Toppraden: genomskinlig (ägaren 2026-10-30: "bättre när det var transparent"); en yta bakom först när sidan har
     skrollats och innehåll glider under den (zimla-mobile-kit.js sätter html.zm-scrolled). */
  html.zimla-room:not(:has(.err-page)):root .zimla-global-topbar { background: transparent !important; transition: background-color 180ms ease; }
  html.zimla-room.zm-scrolled:not(:has(.err-page)):root .zimla-global-topbar { background: rgb(246 245 239 / 88%) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

  /* Glasytorna */
  html body :is(.zmk-card, .zmk-kpi:not(.is-hero), .zmk-panel, .zmk-search, .zmc-card, .zmc-pickbtn, .zmc-steps, .zmc-tcard, .zmc-go,
    .plm2-card, .plm2-evc, .plm2-atts, .plm2-todo, .plm2-chip:not(.is-today)),
  html body .ku-page .ku-search, html body .tm-t, html body .kl:has(> .zmc) #kl-dialog {
    border: 1px solid var(--zm-glass-line) !important; background: var(--zm-glass-bg) !important; box-shadow: var(--zm-glass-shadow) !important; }
  html body :is(.zmk-search, .ku-page .ku-search):focus-within { border-color: rgb(23 76 57 / 35%) !important; }
  html body :is(.zmk-row, .zmc-trow) { border-top-color: var(--zm-hair); }
  html body .zmk-row:active { background: rgb(255 255 255 / 55%); }

  /* Kundsidans kort under huvudet (Offerter, ÄTA, Arbetsplats och ROT …) i samma glas */
  html body .kl:has(> .zmc) :is(.kl-card:not(.kl-sec .kl-card):not(#kl-offert), #kl-offert .kl-vr) {
    border: 1px solid var(--zm-glass-line) !important; background: var(--zm-glass-bg) !important; box-shadow: var(--zm-glass-shadow) !important; }
  html body .kl:has(> .zmc) .kl-btn:not(.p) { border-color: var(--zm-glass-line); background: rgb(255 255 255 / 62%); box-shadow: 0 1px 2px rgba(20, 30, 25, .04); }
  html body .kl:has(> .zmc) .kl-ch h3:not(#kl-offert h3) { font: 400 20px/1.2 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.015em; color: #1d2420; }
  /* Rubrikerna */
  html body :is(.zmk-head, .plm2-head) { padding-top: 6px; }
  html body .zmc-head { padding-top: 4px; }
  html body :is(.zmk-head h1, .plm2-head h1) { font: 400 30px/1.1 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; color: #1d2420; }
  html body :is(.zmk-head p, .plm2-head p) { margin-top: 3px; font-size: 12.5px; color: #5d6b61; }
  html body .plm2-day h2 { font: 400 19px/1.2 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; color: #1d2420; }
  html body .zmc-wt b { font: 400 22px/1.15 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.015em; color: #1d2420; }
  html body :is(.zmk-rt b, .zmc-pt b) { font: 600 15px/1.25 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; color: #1d2420; }
  html body .zmk-kpi b { font: 400 22px/1.15 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.015em; }
  html body .kl:has(> .zmc) #kl-offert :is(.kl-vn, .kl-vsum) { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 600; }
  /* Etiketterna över grupperna står på bakgrunden */
  html body :is(.zmk-k, .plm2-k, .zmc-k span) { font: var(--zm-label); letter-spacing: .09em; text-transform: uppercase; color: #6b746d; }
  html body .tm-t tr.tm-grp td { height: 36px; background: transparent !important; font: var(--zm-label); letter-spacing: .09em; color: #6b746d; }

  /* "+" och tillbaka */
  html body :is(.zmk-new, .zmc-new, .plm2-new), html body .ku-page .ku-new { width: 44px; height: 44px; padding: 0; border-radius: 50% !important;
    background: var(--zm-forest-fill) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgb(15 58 44 / 65%) !important; }
  html body .zmc-back { border: 1px solid var(--zm-glass-line); background: var(--zm-glass-bg); box-shadow: var(--zm-glass-shadow); }
  /* Team utan rubrik (ägaren 2026-10-30): sökfältet och + på samma rad. Rubriken och raden med antal finns kvar för
     skärmläsare; antalen står redan i chipsen. */
  html body .tm-page .ku-head { flex-wrap: nowrap; }
  html body .tm-page .ku-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html body .tm-page .ku-search { order: 1; flex: 1 1 auto; width: auto; min-width: 0; }
  html body .tm-page .ku-new { order: 2; flex: none; width: 48px; height: 48px; }

  /* Segmenten (Kunder | Översikt, Tidslinje | Dag för dag) som Chatt | Offert */
  /* Kunder och Planering: ingen synlig rubrik – pillret står överst med "+" längst till höger (Kunders huvud bara när man markerar). */
  html body .zmk:not(.is-selecting) .zmk-head { display: none; }
  html body :is(.zmk-tabs, .plm2-segbar) { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
  html body :is(.zmk-tabs__seg, .plm2-segbar .plm2-seg) { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html body :is(.zmk-tabs, .plm2-segbar) :is(.zmk-new, .plm2-new) { flex: none; width: 38px; height: 38px; margin-right: 1px; background: rgb(23 76 57 / 10%) !important; color: #174c39 !important; box-shadow: none !important; }
  html body :is(.zmk-tabs, .plm2-segbar) :is(.zmk-new, .plm2-new) .material-symbols-outlined { font-size: 22px; }
  html body :is(.zmk-tabs, .plm2-segbar) { padding: 4px; border: 1px solid var(--zm-glass-line); border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / 66%), rgb(255 255 255 / 40%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgba(20, 30, 25, .05); }
  html body :is(.zmk-tabs, .plm2-seg) button { height: 38px; border-radius: 999px; font-weight: 500; color: #5d6b61; }
  html body :is(.zmk-tabs, .plm2-seg) button[aria-selected="true"] { background: var(--zm-forest-fill); color: #fff; font-weight: 500; box-shadow: 0 6px 14px -8px rgb(15 58 44 / 60%); }

  /* Filterpillren som startsidans */
  html body .zmk-chips button, html body .tm-tools .tm-seg button, html body .kl:has(> .zmc) .zmc-tabs button {
    height: 36px; padding: 0 12px; border: 1px solid var(--zm-glass-line); 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); }
  html body :is(.zmk-chips button[aria-pressed="true"], .tm-tools .tm-seg button[aria-checked="true"]),
  html body .kl:has(> .zmc) .zmc-tabs button[aria-selected="true"] { border-color: var(--zm-forest); background: var(--zm-forest-fill); color: #fff; }
  html body .tm-tools .tm-seg button span { opacity: .6; color: inherit; }

  /* Steget: en etikett med prick i stegets färg (kunder.STAGE_INK), som startsidans kort */
  html body .zmk-pill { gap: 5px; height: 20px; padding: 0 8px 0 7px; background: color-mix(in srgb, var(--tone, #1f6b4f) 12%, transparent); color: var(--tone, #1f6b4f);
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  html body .zmk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  html body .zmk-rs b { font-size: 13px; }
  html body .zmc-pill { background: rgb(23 76 57 / 10%); color: #174c39; }

  /* Avatarerna i skog (ägaren i Team också); underentreprenören behåller sin vita ring */
  html body .tm-av.is-owner, html body .tm-av:not(.is-ue):not(.is-off) { background: var(--zm-forest-fill); }
  html body .zmc-ic { background: rgb(23 76 57 / 7%); }

  /* Kunder: översiktens nyckeltal och staplar i Zimlas färger */
  html body .zmk-kpi.is-hero { border: 0; background: var(--zm-forest-fill); }
  html body .zmk :is(.zmk-segs, .zmk-legend) .is-done { background: #174c39; }
  html body .zmk :is(.zmk-segs, .zmk-legend) .is-order { background: #2fa36a; }
  html body .zmk :is(.zmk-segs, .zmk-legend) .is-sent { background: #3b6ea8; }

  /* Planering: dagens dag i skog, att planera i glas (bara flaggan gul), knapparna rundade */
  html body .plm2-chip.is-today { border-color: var(--zm-forest); background: var(--zm-forest-fill); }
  html body .plm2-put { min-height: 40px; border-radius: 999px; background: var(--zm-forest-fill); font-weight: 500; }
  html body .plm2-weeks span.is-now { padding: 1px 4px; font-size: 10.5px; background: var(--zm-forest); }
  html body .plm2-evi { background: rgb(255 255 255 / 80%); }
  /* Tidslinjen grupperad (Pågår, Planerat, Offert ute, Klart) och kompakt: namnet och kunden en rad var, aldrig radbrytning. */
  html body .plm2-tlg { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; width: 100%; min-height: 40px; margin-top: 2px; padding: 8px 0 2px;
    border: 0; background: none; color: #6b746d; font: var(--zm-label); letter-spacing: .09em; text-transform: uppercase; text-align: left; }
  html body .plm2-tlg small { padding: 1px 7px; border-radius: 999px; background: rgb(23 76 57 / 8%); color: #174c39; font-size: 11px; letter-spacing: 0; }
  html body .plm2-tlg .material-symbols-outlined { margin-left: auto; font-size: 20px; transition: transform 200ms ease; }
  html body .plm2-tlg[aria-expanded="false"] .material-symbols-outlined { transform: rotate(-90deg); }
  html body .plm2-tlr { padding: 6px 0 5px; }
  html body .plm2-tlr .plm2-tlt { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 1px; }
  html body .plm2-tlr .plm2-tlt :is(b, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .plm2-tlr .plm2-tlt b { font-size: 14px; }
  html body .plm2-tlr .plm2-track, html body .plm2-tlr .plm2-bar { height: 8px; }
  html body .plm2-tlr .plm2-track { margin-top: 5px; }
  html body .plm2-tlmore { display: block; width: 100%; min-height: 40px; padding: 4px 0; border: 0; background: none; color: #174c39; font: 500 13px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-align: left; }
  /* I dag som ett streck i varje rads spår, inte en linje genom namnen och grupprubrikerna (veckan är märkt ovanför). */
  html body .plm2-rows .plm2-now { display: none; }
  html body .plm2-tlr .plm2-track::after { content: ""; position: absolute; z-index: 1; top: -4px; bottom: -4px; left: var(--now); width: 2px; margin-left: -1px; border-radius: 1px; background: #2fbf71; }

  /* Team: listan i glas, raden med läget till höger och nästa uppdrag under namnet */
  html body .tm-t { border-radius: 18px; overflow: hidden; }
  html body .tm-t tr.tm-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--zm-hair); }
  html body .tm-t tr.tm-row td { border: 0; background: transparent !important; }
  html body .tm-t tr.tm-row td:first-child { flex: 1; min-width: 0; }
  html body .tm-t tr.tm-row td:nth-child(3) { display: flex !important; flex: none; align-items: center; height: auto; padding: 0 14px 0 0; }
  html body .tm-t tr.tm-row td:nth-child(3) .tm-chip-sub { display: none; }
  html body .tm-t tr.tm-row td:nth-child(3):has(.tm-live.is-free) { display: none !important; }  /* ledig: inget att säga, bara ett streck */
  html body .tm-t .ku-who:has(.tm-wnext) > small:not(.tm-wnext) { display: none; }
  html body .tm-t .tm-wnext { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #174c39; font-weight: 500; }
  html body .tm-t details > summary, html body .tm-t .tm-inact { min-height: 44px; }
}