/* Startsidan i vila: rummet som bakgrund, hälsning + Idag-lapp, composern i
   flödet, fyra vägar in och tavlan över jobben. Lastas efter
   dashboard-empty.css och skriver över dess centrerade layout med samma
   selektor­styrka (html.zimla-ai-start:not(.zimla-ai-start-working) …).
   Arbetsläget (efter submit) rörs inte. */

/* Entrén vid full laddning av Studio i vila (dator och mobil). Klassen sätts i head före första paint (base.html),
   noderna bär data-studio-enter="desk|mob". Ren CSS: entrén startar när skalet visas och är klar även om JS dröjer;
   zimla-ai-start.js släpper klassen när den spelat klart eller vid första tryck/tangent (då landar allt direkt).
   Bara transform/opacity, inget blir oklickbart. Meny, översta raden, docken, hjälphörnet och fotot står still.
   Sidbyten inifrån appen till / får inte entrén (där gäller sidbytets 200 ms-landning). */
@keyframes zs-enter {
  from { opacity: var(--enter-from, 0); transform: translate3d(0, var(--enter-y, 8px), 0); }
}
@media (prefers-reduced-motion: no-preference) {
  html.zimla-studio-load-motion:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) [data-studio-enter] {
    will-change: transform, opacity;
  }
  /* Står i startläget tills sidan målats (zimla-ai-start.js sätter -go två bildrutor efter Alpine): annars hinner
     klockan gå medan huvudtråden är upptagen och första bilden visar entrén nästan klar. Skalet kräver Alpine ändå. */
  html.zimla-studio-load-motion:not(.zimla-studio-enter-go) [data-studio-enter] { animation-play-state: paused !important; }
  /* Rubriken, väljaren, sedan ritbordskortet som ett objekt (fältet, verktygsraden och På bordet tillsammans). */
  @media (min-width: 1024px) {
    html.zimla-studio-load-motion:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) [data-studio-enter~="desk"] {
      animation: zs-enter var(--enter-dur, 380ms) cubic-bezier(0.22, 1, 0.36, 1) var(--enter-at, 0ms) both;
    }
    .zb-mode[data-studio-enter] { --enter-at: 50ms; }
    .zb-card[data-studio-enter] { --enter-at: 110ms; --enter-y: 14px; --enter-dur: 500ms; }
    .zp-chips[data-studio-enter] { --enter-at: 170ms; --enter-y: 6px; } /* Prata: exemplen efter kortet */
    /* Sparat läge (Prata) sätts efter första paint: tummen ska inte glida dit under entrén. */
    html.zimla-studio-load-motion .zb-mode::before { transition: none; }
  }
  /* Mobil: hälsningen, röstkortet (bara 6 px – knappen ska inte glida under tummen), raderna, projekten sist.
     Raderna och projekten har doft (rum, belopp): de börjar på 72 % i stället för osynliga. */
  @media (max-width: 1023px) {
    html.zimla-studio-load-motion:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) [data-studio-enter~="mob"] {
      animation: zs-enter var(--enter-dur, 360ms) cubic-bezier(0.22, 1, 0.36, 1) var(--enter-at, 0ms) both;
    }
    .zs-mobile-voice[data-studio-enter] { --enter-at: 60ms; --enter-y: 6px; --enter-dur: 380ms; }
    .zs-mobile-manual-form[data-studio-enter] { --enter-at: 120ms; --enter-from: .72; }
    .zs-mobile-resume[data-studio-enter] { --enter-at: 150ms; --enter-from: .72; }
    .zs-mobile-projects[data-studio-enter] { --enter-at: 190ms; --enter-from: .72; }
  }
}

/* ── Aktiv desktopchatt: Studio möbleras om runt samtalet ────────────────
   Samma noder används före och efter Enter. Den aktiva högerstacken behåller
   Kalender, Senaste samtal, Appar och Dina jobb utan kopior eller ändrade
   länkar; Flip i zimla-ai-start.js visar själva flytten. */
@media (min-width: 1024px) {
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: start;
    justify-content: stretch;
    column-gap: 16px;
    row-gap: 12px;
    width: min(86rem, calc(100% - clamp(3rem, 7vw, 7rem)));
    height: calc(100dvh - 2.95rem);
    min-height: 0;
    margin-inline: auto;
    padding: clamp(1.5rem, 3.5vh, 2.75rem) 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(
    .zimla-ai-panel__body,
    .zs-stage,
    .zs-stage__side
  ) {
    display: contents !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__intro,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chips {
    display: none !important;
  }

  /* Högerkolumnen har en egen naturlig rytm. Då kan kalendern ligga kvar
     utan att dess höjd flyttar composern eller blåser upp chattens gridrader. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-below {
    display: grid !important;
    grid-column: 2;
    grid-row: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal {
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 28px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    border: 1px solid color-mix(in oklab, var(--zs-accent) 10%, var(--zs-line));
    border-radius: var(--zs-radius-card);
    background: color-mix(in oklab, var(--zs-surface-raised) 94%, transparent);
    box-shadow: var(--zs-shadow-2);
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
    justify-content: safe flex-end;
    gap: 1.15rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages > * {
    max-width: 46rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) [data-chat-runtime-root] .zimla-ai-composer {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    margin: 0 !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer__box {
    width: 100%;
    max-width: none;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding-inline: 4px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip button {
    padding: 6px 10px;
    border: 1px solid color-mix(in oklab, var(--zs-accent) 12%, var(--zs-line));
    border-radius: 999px;
    background: color-mix(in oklab, var(--zs-surface-raised) 84%, transparent);
    color: var(--zs-muted);
    font-size: .72rem;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip button:hover {
    border-color: color-mix(in oklab, var(--zs-accent) 30%, var(--zs-line));
    background: var(--zs-surface-raised);
    color: var(--zs-ink);
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip__dot {
    display: none;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages > * {
    width: min(100%, 46rem);
    margin-inline: auto;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(
    .zimla-ai-message,
    .zimla-chat-run
  ):has(> .zimla-ai-message__avatar) {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: .65rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--user {
    justify-items: end;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--user:has(> .zimla-ai-message__avatar) {
    grid-template-columns: minmax(0, 1fr) 1.75rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message__avatar {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 14px -9px rgba(16, 40, 29, .55), inset 0 0 0 1px rgba(23, 33, 26, .06);
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message__avatar--user {
    background: #edf7f1;
    color: var(--zs-accent);
    font-size: .64rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message__avatar--ai {
    background: rgba(255, 255, 255, .94);
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--user .zimla-ai-message__stack {
    width: fit-content;
    max-width: min(76%, 36rem);
    align-items: flex-end;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--user .zimla-ai-message__bubble {
    width: auto;
    padding: 10px 14px;
    border: 1px solid rgba(23, 33, 26, .07);
    border-radius: 16px 16px 5px 16px;
    background: #fff;
    box-shadow: 0 10px 24px -20px rgba(16, 40, 29, .45);
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--assistant .zimla-ai-message__stack,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-chat-run .zimla-ai-message__stack {
    max-width: 42rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--assistant .zimla-ai-message__bubble,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-chat-run .zimla-ai-message__bubble {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: .9rem;
    line-height: 1.55;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-recent {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-apps {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-apps__head {
    align-items: center;
    margin-bottom: 7px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-apps__head small,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-apps__edit {
    display: none;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-apps__grid {
    grid-template-columns: 1fr !important;
    gap: 7px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-app {
    min-height: 62px;
    padding: 10px 11px;
    border-radius: 12px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-app__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-app__glyph {
    width: 19px;
    height: 19px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-stage__main {
    position: static;
    grid-column: 1;
    grid-row: 4;
    align-self: auto;
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board.is-open {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    cursor: default;
    animation: none;
    transform: none;
    box-shadow: var(--zs-shadow-1);
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__head {
    min-height: 46px;
    padding: 8px 10px 4px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__icon {
    width: 28px;
    height: 28px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__kicker > span,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__toggle,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lanes,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-dots {
    display: none !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__sum {
    display: flex;
    align-items: center;
    gap: 5px 9px;
    width: 100%;
    min-height: 42px;
    padding: 3px 10px 9px;
    overflow: hidden;
    color: var(--zs-muted);
    font-size: .62rem;
    cursor: default;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__sum span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__sum span b {
    margin-right: 3px;
    color: var(--zs-ink);
    font-weight: 500;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__sum-arrow {
    display: none;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-stage__side {
    transform: none !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip.zimla-studio-reflowing:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    opacity: 0 !important;
  }
}

/* ── Rummet ─────────────────────────────────────────────────────────── */
.zimla-scene {
  background-color: #c9d7cc;
  background-image: none;
}

.zimla-scene__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0;
  will-change: transform, opacity;
  filter: contrast(1.06) saturate(1.02);
}

.zimla-scene__frame:first-child { opacity: 1; filter: contrast(1.06) saturate(1.02) blur(0.6px); } /* samma som zimla-scene.js: inget byte när skriptet laddar */
/* Övriga sidor står vid skrivbordet (sista bilden, suddig) redan innan skriptet målat. */
.zimla-scene__frame:last-child { filter: contrast(1.04) saturate(0.94) brightness(0.97) blur(10px); }
html:not(.zimla-ai-start) .zimla-scene__frame:first-child { opacity: 0; }
html:not(.zimla-ai-start) .zimla-scene__frame:last-child { opacity: 1; }

/* Pyttelite korn i CSS-pixlar (samma på Retina) så bilderna inte ser utsmetade ut. */
.zimla-scene__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='table' tableValues='0 .15 .85 1'/><feFuncG type='table' tableValues='0 .15 .85 1'/><feFuncB type='table' tableValues='0 .15 .85 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  transition: opacity 900ms ease;
}

html.zimla-scene-at-desk .zimla-scene__grain { opacity: 0.4; }

html.zimla-ai-start,
html.zimla-ai-start:not(.zimla-ai-start-working),
html.zimla-ai-start.zimla-ai-start-workplace {
  background: #c9d7cc;
}

/* ── Layout i vila ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel-shell {
    overflow-y: auto;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel {
    align-items: center;
    justify-content: flex-start;
    padding: 1.15rem 0 2.5rem;
    min-height: 100%;
    height: auto;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel__body,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer,
  html.zimla-ai-start:not(.zimla-ai-start-working) [data-chat-runtime-root] .zimla-ai-composer,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below {
    width: min(1400px, calc(100% - 3.5rem));
    align-items: stretch;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter) .zimla-ai-chat__intro {
    text-align: left;
    margin: 0 0 0.9rem;
  }

  /* Lappen hänger på väggen bredvid texten och composern, utanför flödet, så
     composern följer direkt på texten oavsett hur många rader lappen har. */
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel__body { position: relative; overflow: visible; }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box {
    width: min(46rem, 100%);
    margin: 0;
  }
}

/* Panelskalet släpper igenom klick i vila (bara composern tar dem); allt på
   startsidan är klickbart, så korten, tavlan och lappen tar sina egna. */
html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-chat__intro { pointer-events: auto; }

/* Gamla startens rader som inte har ett jobb längre. */
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-start-intents,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-start-folds,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__quick,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-start-manual {
  display: none !important;
}

/* ── Hälsning + Idag-lapp ─────────────────────────────────────────────── */
.zs-top {
  position: relative;
  display: block;
  color: #17211a;
  min-height: 148px;
}

.zs-hero {
  position: absolute;
  z-index: 0;
  top: -56px;
  right: -36px;
  width: min(78%, 980px);
  height: 520px;
  object-fit: cover;
  object-position: 78% 42%;
  pointer-events: none;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.35) 22%, #000 48%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.35) 22%, #000 48%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-composite: intersect;
}

.zs-intro { position: relative; z-index: 1; max-width: 40rem; }

.zs-intro { grid-column: 1; }

.zs-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7a70;
}

.zs-title {
  margin: 6px 0 0;
  font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 2.75rem;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: #17211a;
}

.zs-sub {
  margin: 6px 0 0;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  color: #17211a;
}

.zs-note {
  position: relative;
  width: min(100%, 46rem);
  margin-top: 14px;
  padding: 10px 12px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #2b3a31;
  text-align: left;
  border: 1px solid rgba(23, 33, 26, 0.08);
  box-shadow: 0 8px 18px -14px rgba(23, 33, 26, 0.35);
}

.zs-note__tape {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 92px;
  height: 22px;
  transform: translateX(-50%) rotate(1.5deg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.zs-note__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(43, 58, 49, 0.14);
}

.zs-note__head b {
  font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.zs-note__head span,
.zs-note__empty { font-size: 0.78rem; color: #6b7a70; }
.zs-note__empty { margin: 8px 0 4px; font-size: 0.85rem; }

.zs-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zs-facts li + li { border-top: 1px solid rgba(43, 58, 49, 0.09); }

/* Hela raden är länken – tumme i bilen, inte en pil att jaga. */
.zs-facts a {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 44px;
  padding: 9px 2px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #2b3a31;
  text-decoration: none;
  border-radius: 6px;
}

.zs-facts a:hover { background: rgba(255, 255, 255, 0.45); }
.zs-facts a:focus-visible { outline: 2px solid #2f6f5c; outline-offset: 2px; }

.zs-facts i {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #9fb3a6;
}

.zs-facts .is-warn i { background: #b7791f; }
.zs-facts .is-calc i { background: #4c6f5c; }
.zs-facts .is-sent i { background: #3b6fb0; }
.zs-facts .is-ok i { background: #3a8874; }
.zs-facts b { font-weight: 500; color: #17211a; }

.zs-facts em {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 1px;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  color: #2f6f5c;
  white-space: nowrap;
}

.zs-facts em .material-symbols-outlined { font-size: 15px; }

/* ── Under composern ─────────────────────────────────────────────────── */
.zs-below {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.zs-intents {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.zs-intent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #17211a;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 24px -20px rgba(40, 50, 30, 0.5);
}

.zs-intent:hover { background: #fff; }
.zs-intent:focus-visible { outline: 2px solid #2f6f5c; outline-offset: 2px; }
.zs-intent:disabled { opacity: 0.55; }

.zs-intent__glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(58, 136, 116, 0.12);
  color: #2f6f5c;
}

.zs-intent__glyph .material-symbols-outlined { font-size: 19px; }
.zs-intent strong { display: block; font-size: 0.84rem; font-weight: 500; }
.zs-intent small { display: block; margin-top: 2px; font-size: 0.74rem; line-height: 1.35; color: #5b6a60; }
.zs-intent__go { font-size: 18px; color: #9fb3a6; }

/* ── Tavlan ─────────────────────────────────────────────────────────── */
.zs-board {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5);
  color: #17211a;
  cursor: pointer;
}

.zs-board.is-open { cursor: default; }

.zs-board__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 8px 14px;
}

.zs-board__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(58, 136, 116, 0.12);
  color: #2f6f5c;
}

.zs-board__icon .material-symbols-outlined { font-size: 17px; }
.zs-board__kicker b { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.zs-board__kicker > span { display: block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7a70; }
.zs-board.is-open .zs-board__hint { display: none; }
.zs-board__all { font-size: 0.8rem; font-weight: 500; color: #2f6f5c; text-decoration: none; }
.zs-board__all:hover { color: #17211a; }

.zs-board__toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #6b7a70;
}

.zs-board__toggle:hover { background: rgba(23, 33, 26, 0.06); color: #17211a; }
.zs-board__toggle .material-symbols-outlined { font-size: 18px; }

.zs-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 10px;
}

.zs-lane {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(247, 245, 239, 0.9);
}

.zs-lane__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: baseline;
  padding-bottom: 5px;
  margin-bottom: 4px;
  border-bottom: 1.5px solid rgba(23, 33, 26, 0.14);
}

.zs-lane__head b { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #3f4b44; }
.zs-lane__head span { font-size: 0.66rem; color: #6b7a70; font-variant-numeric: tabular-nums; }
.zs-lane-underlag .zs-lane__head span { color: #b7791f; }
.zs-lane__head small { display: none; grid-column: 1 / -1; font-size: 0.7rem; color: #6b7a70; }

.zs-lane__body { display: grid; gap: 6px; }

.zs-card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(23, 33, 26, 0.08);
  font-size: 0.78rem;
}

.zs-card:hover { border-color: rgba(58, 136, 116, 0.45); box-shadow: 0 8px 20px -14px rgba(20, 40, 30, 0.4); }
.zs-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zs-card__name { font-weight: 500; color: #17211a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-card__name::after { content: ''; position: absolute; inset: 0; }
.zs-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #b7791f; flex: none; }
.zs-card__meta { display: none; color: #6b7a70; font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.74rem; }
.zs-card__foot b { display: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.zs-card__next { position: relative; z-index: 1; color: #2f6f5c; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-card__next:hover { color: #17211a; }
.zs-lane__none { padding: 14px 6px; text-align: center; color: #9fb3a6; font-size: 0.74rem; }
.zs-lane__more { padding: 2px 4px; font-size: 0.7rem; color: #6b7a70; }

/* Stängd: två kort per kolumn, bara namn och nästa steg. */
.zs-board:not(.is-open) .zs-card.is-extra { display: none; }

/* Öppen: alla kort, kund·rum och belopp, och först nu färg per kolumn. */
.zs-board.is-open .zs-lane__more { display: none; }
.zs-board.is-open .zs-lane { min-height: 220px; padding: 0 0 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); }
.zs-board.is-open .zs-lane__head { padding: 12px 12px 8px; margin: 0 0 8px; border-bottom: 1px solid rgba(23, 33, 26, 0.08); }
.zs-board.is-open .zs-lane__head small { display: block; }
.zs-board.is-open .zs-lane__body { padding: 0 10px; gap: 8px; }
.zs-board.is-open .zs-card { padding: 11px 12px; border-radius: 12px; font-size: 0.84rem; }
.zs-board.is-open .zs-card__meta { display: block; }
.zs-board.is-open .zs-card__foot { padding-top: 6px; border-top: 1px solid rgba(23, 33, 26, 0.08); }
.zs-board.is-open .zs-card__foot b { display: block; }
.zs-board.is-open .zs-lane-underlag { background: linear-gradient(180deg, rgba(251, 243, 227, 0.85), rgba(251, 243, 227, 0.55)); }
.zs-board.is-open .zs-lane-kalkyl { background: linear-gradient(180deg, rgba(238, 242, 239, 0.9), rgba(238, 242, 239, 0.55)); }
.zs-board.is-open .zs-lane-offert { background: linear-gradient(180deg, rgba(232, 240, 250, 0.9), rgba(232, 240, 250, 0.55)); }
.zs-board.is-open .zs-lane-godkand { background: linear-gradient(180deg, rgba(229, 243, 234, 0.9), rgba(229, 243, 234, 0.55)); }
.zs-board.is-open .zs-lane-pagaende { background: linear-gradient(180deg, rgba(214, 235, 224, 0.92), rgba(214, 235, 224, 0.6)); }
.zs-board.is-open .zs-lane-underlag .zs-lane__head b { color: #b7791f; }
.zs-board.is-open .zs-lane-offert .zs-lane__head b { color: #3b6fb0; }
.zs-board.is-open .zs-lane-godkand .zs-lane__head b,
.zs-board.is-open .zs-lane-pagaende .zs-lane__head b { color: #2f6f5c; }

@media (prefers-reduced-motion: no-preference) {
  .zs-lane, .zs-card { transition: padding 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 260ms ease; }
}

/* ── Smal skärm: allt i ett scrollflöde, tavlan som lista ─────────────── */
@media (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel-shell,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel-shell.is-ready {
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel.is-mobile-sheet,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel-shell.is-ready .zimla-ai-panel {
    justify-content: flex-start;
    min-height: 100%;
    padding-bottom: 1rem;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer {
    position: static;
    z-index: 1;
    padding-block: 0.35rem;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter) .zimla-ai-chat__intro {
    text-align: left;
    margin: 0 0 0.75rem;
  }

  /* Mobilen: mindre av allt. Hälsningen en rad, Idag-lappen tät, genvägarna som chips i en rad, tavlan som slides. */
  .zs-top { min-height: 0; }
  .zs-hero { position: relative; top: 0; right: 0; width: 100%; height: 96px; margin: 0 0 8px; -webkit-mask-image: none; mask-image: none; }
  .zs-eyebrow { display: none !important; }
  .zs-title { font-size: 1.75rem; }
  .zs-sub { display: block !important; font-size: 0.9rem; margin-top: 2px; }
  .zs-note { display: none !important; }
  .zs-note__tape { display: none; }
  .zs-note__head { padding-bottom: 4px; } .zs-note__head b { font-size: 0.85rem; } .zs-note__head span { font-size: 0.7rem; }
  .zs-facts a { padding: 6px 4px; gap: 8px; font-size: 0.78rem; }
  .zs-facts a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .zs-facts em { font-size: 0; gap: 0; } .zs-facts em .material-symbols-outlined { font-size: 16px; }
  .zs-facts li:nth-child(n+4) { display: none; }
  .zs-below { margin-top: 12px; width: 100%; min-width: 0; align-self: stretch; grid-template-columns: minmax(0, 1fr); } /* flex-barn i kolumn och spalt med min 0: annars breddas allt av genvägsraden */
  .zs-below > * { min-width: 0; max-width: 100%; }
  .zs-intents { display: none !important; } /* genvägarna: fältet säger redan vad man kan skriva */
  .zs-intents::-webkit-scrollbar { display: none; }
  .zs-intent { flex: none; width: auto; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; }
  .zs-intent small, .zs-intent__go { display: none; }
  .zs-intent strong { font-size: 0.8rem; white-space: nowrap; }
  .zs-intent__glyph { width: 28px; height: 28px; } .zs-intent__glyph .material-symbols-outlined { font-size: 16px; }
  .zs-chats { margin-top: 8px; font-size: 0.78rem; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-chat-bubble { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel { display: flex; flex-direction: column; min-height: 100%; }
  .zs-chips { width: 100%; margin-top: 8px; }
  .zs-chip { min-height: 44px; max-width: 100%; }
  .zs-chats { display: none !important; }
  .zs-board { margin-top: 0; cursor: pointer; }
  .zs-board__head { cursor: pointer; }
  .zs-board__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 14px 12px; font-size: 0.78rem; color: #35493d; }
  .zs-board__sum span b { font-weight: 600; margin-right: 4px; color: #17211a; }
  .zs-board__sum span.is-zero { color: #9fb3a6; } .zs-board__sum span.is-zero b { color: #9fb3a6; }
  .zs-board__sum-arrow { margin-left: auto; color: #9fb3a6; font-size: 20px; transition: transform 200ms ease; }
  .zs-board.is-mob-open .zs-board__sum-arrow { transform: rotate(180deg); }
  .zs-board:not(.is-mob-open) .zs-dots, .zs-board:not(.is-mob-open) .zs-lanes { display: none; }
  .zs-board.is-mob-open .zs-board__sum span { display: none; }
  .zs-lanes { align-items: flex-start; }
  .zs-board__head { padding: 10px 12px 6px; }
  .zs-board__kicker > span { display: none; }
  .zs-board__toggle { display: none; }
  .zs-dots { display: flex; justify-content: center; gap: 5px; padding: 2px 0 6px; }
  .zs-dots i { width: 6px; height: 6px; border-radius: 999px; background: #d3dbd3; transition: background 160ms ease, transform 160ms ease; }
  .zs-dots i.on { background: #17211a; transform: scale(1.25); }
  .zs-lanes { display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 12px 12px; -webkit-overflow-scrolling: touch; }
  .zs-lanes::-webkit-scrollbar { display: none; }
  .zs-lane { flex: 0 0 100%; scroll-snap-align: start; min-height: 0; }
  .zs-lane.is-empty { display: block; }
  .zs-lane__head { padding: 8px 10px 6px; } .zs-lane__head b { font-size: 0.8rem; }
  .zs-board:not(.is-open) .zs-card.is-extra { display: grid; }
  .zs-board .zs-lane__body .zs-card:nth-child(n+5) { display: none !important; }
  .zs-lane__more { display: block; padding: 8px 4px 2px; font-size: 0.8rem; color: #2f6f5c; text-decoration: none; }
  .zs-lane__more-desk { display: none; }
  .zs-card { min-height: 40px; padding: 8px 10px; }
  .zs-card__name { font-size: 0.85rem; } .zs-card__meta { font-size: 0.72rem; }
  .zs-board.is-open .zs-lane { min-height: 0; }
}
@media (min-width: 1024px) { .zs-dots, .zs-lane__more-mob, .zs-board__sum, .zs-mob, .zs-date, .zs-day { display: none; } .zs-lane__more { text-decoration: none; color: inherit; } }
@media (max-width: 1023px) {
  /* Mobilens två kort under tavlan: schema och det som väntar. */
  .zs-mob { display: grid; gap: 10px; }
  .zs-mob__card { padding: 10px 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 18px 40px -30px rgba(60, 40, 10, 0.4); }
  .zs-mob__card h3 { margin: 0 0 4px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7a70; font-weight: 500; display: flex; justify-content: space-between; }
  .zs-mob__card h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.72rem; }
  .zs-mob__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(43, 58, 49, 0.09); text-decoration: none; color: #17211a; font-size: 0.82rem; }
  .zs-mob__row:first-of-type { border-top: 0; }
  .zs-mob__when { display: grid; min-width: 44px; line-height: 1.15; } .zs-mob__when b { font-weight: 500; font-variant-numeric: tabular-nums; } .zs-mob__when small { font-size: 0.68rem; color: #6b7a70; }
  .zs-mob__text { display: grid; min-width: 0; line-height: 1.25; } .zs-mob__text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zs-mob__text small { font-size: 0.74rem; color: #6b7a70; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zs-mob__row > .material-symbols-outlined { font-size: 18px; color: #9fb3a6; }
  .zs-mob__row > i { width: 8px; height: 8px; border-radius: 999px; background: #4c6f5c; } .zs-mob__row.is-warn > i { background: #b7791f; } .zs-mob__row.is-sent > i { background: #3b6fb0; } .zs-mob__row.is-ok > i { background: #3a8874; }
  .zs-mob__row > em { font-style: normal; font-size: 0.74rem; font-weight: 500; color: #2f6f5c; white-space: nowrap; }
  .zs-mob__empty { margin: 2px 0 6px; font-size: 0.8rem; color: #6b7a70; }
  .zs-mob__go { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; text-decoration: none; color: #17211a; background: linear-gradient(180deg, #fbf6f2, #f7f0ea); }
  .zs-mob__go > .material-symbols-outlined:first-child { font-size: 22px; color: #2f6f5c; } .zs-mob__go > .material-symbols-outlined:last-child { font-size: 18px; color: #9fb3a6; }
  /* Ordningen: dagens kort överst, tavlan och korten under, fältet längst ner. Hälsningen är
     dagens korts huvud – centrerad, datumet under, schemat som rader; den rör sig inte själv. */
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel__body { order: -1; flex: 0 0 auto; display: grid; place-items: stretch; padding-block: 4px 0; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter) .zimla-ai-chat__intro { text-align: center; margin: 0; padding-bottom: 10px; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below { order: 0; margin-top: 0; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer { order: 0; margin-top: 0 !important; }
  .zs-top { row-gap: 0; padding: 14px 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 18px 40px -30px rgba(60, 40, 10, 0.4); }
  .zs-title { margin: 0; font-size: 1.75rem; line-height: 1.1; text-wrap: balance; }
  .zs-date { display: block; margin-top: 4px; font-size: 0.78rem; color: #6b7a70; text-decoration: none; }
  .zs-day { margin-top: 10px; border-top: 1px solid rgba(43, 58, 49, 0.09); text-align: left; }
  .zs-day .zs-mob__empty { margin: 8px 0 6px; text-align: center; }
}

/* ── Kontomenyn i rälsen ─────────────────────────────────────────────── */
.zimla-sidebar-me { position: relative; }
.zimla-sidebar-me__menu { display: none; position: absolute; left: calc(100% + 10px); bottom: 0; z-index: 60; width: 260px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #e3e8e2; box-shadow: 0 30px 60px -30px rgba(20, 40, 30, 0.55); color: #17211a; }
.zimla-sidebar-me__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid #eef1ec; margin-bottom: 4px; }
.zimla-sidebar-me__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: #2f6f5c; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; flex: none; }
.zimla-sidebar-me__head b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.zimla-sidebar-me__head small { display: block; font-size: 11.5px; color: #6b7a70; }
.zimla-sidebar-me__menu a, .zimla-sidebar-me__menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 13px; color: #17211a; text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer; }
.zimla-sidebar-me__menu a:hover, .zimla-sidebar-me__menu button:hover { background: #eef1ec; }
.zimla-desktop-sidebar .relative.mt-auto .zimla-sidebar-me__menu :is(a, button) { color: #17211a !important; }
.zimla-desktop-sidebar .relative.mt-auto .zimla-sidebar-me__menu :is(a, button):is(:hover, :focus-visible) { background: #eef1ec !important; color: #17211a !important; }
.zimla-sidebar-me__menu .material-symbols-outlined { font-size: 18px; color: #6b7a70; }
.zimla-sidebar-me__menu hr { margin: 4px 0; border: 0; border-top: 1px solid #eef1ec; }

/* Rälsen gömmer allt utom avataren när den är ihopfälld; menyn är undantaget. */
.zimla-desktop-sidebar .relative.mt-auto .zimla-sidebar-me__menu.is-open { display: block !important; }

/* ── Supporttext under composern ───────────────────────────────────────── */

/* Startens delar hör bara hemma på startsidan i vila; panelen som samtal på
   andra sidor visar sin vanliga hälsning och inga kort. */
html.zimla-ai-start .zimla-ai-chat__welcome { display: none !important; }
html:not(.zimla-ai-start) .zs-top,
html:not(.zimla-ai-start) .zs-below,
html.zimla-ai-start-workplace .zs-top,
html.zimla-ai-start-workplace .zs-below { display: none !important; }
/* Desktop-samtalet i kolumn (utan remsa) och chattkortet visar inte startens delar. */
@media (min-width: 1024px) {
  html.zimla-ai-start-working .zs-top, html.zimla-ai-start-working .zs-below { display: none !important; }
}

/* ── Tavlan öppen: samma Studio-yta möbleras om ───────────────── */
.zs-board.is-open { display: flex; flex-direction: column; overflow: hidden; will-change: height; }
.zs-board.is-open .zs-lanes { flex: 1; min-height: 0; }
.zs-board.is-open .zs-lane { height: 100%; }
.zs-board.is-open .zs-lane__body { overflow: auto; }

/* Topraden som mockupen: inga sökfält, bara runda knappar över scenen. ⌘K öppnar sök. */
@media (min-width: 1024px) {
  .zimla-app-topbar { background: transparent; border-bottom: 0; grid-template-columns: minmax(0, 1fr) auto; padding-right: 1.25rem; margin-bottom: 0; }
}

/* ── Rummet: sidorna ligger direkt på scenen, som mockupens .canvas ──
   Ingen pappersbehållare runt sidan; fönstret skrollar, komponenterna är
   korten. Admincenter och täckta ytor (kalkyl, bibliotek …) berörs inte. */
@media (min-width: 1024px) {
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:not([data-route-css="admin-center"]) {
    margin: 0 auto; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    max-height: none; overflow: visible; max-width: 1236px; width: 100%;
    padding: 6px 28px 130px;
  }
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content[data-route-css="calculation"] { max-width: none; }
  /* Ingen bredd-tween i admin: rum och papper växlar mellan sidorna, och en max-width-övergång radbryter texten. */
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content[data-route-css="admin-center"] { transition: none; }
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has([data-settings-shell]) { max-width: 1560px; }
  /* Projektlistan växer med skärmen: fler kort i bredd på stora skärmar. */
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(.pl-page) { max-width: 1936px; }
  /* Offert-steget med en offert tar hela ytan; övergången bor i zimla-project.css (.qfull). */
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content { transition: max-width 560ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(.qfull), html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(#project-offer-list), html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(.kwide) { max-width: 1956px; }
  /* Kalendern tar också mer plats: en vecka med sju spalter och en sidopanel behöver bredden. */
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(#calendar-shell) { max-width: 1656px; }
}
/* Ytans etikett och brödsmulor – samma på alla sidor (mockupens canvas-label + crumbs) */
.adv-label { display: flex; align-items: center; gap: 7px; color: #35493d; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.adv-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #35493d; }
.pcrumbs, .calculation-breadcrumbs.pcrumbs { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 12.5px; color: #17211a; flex-wrap: wrap; }
.pcrumbs a { color: #24352b; opacity: 0.85; text-decoration: none; }
.pcrumbs a:hover { opacity: 1; text-decoration: underline; }
.pcrumbs .sep, .calculation-breadcrumbs .sep, .quote-review-crumbs .sep { color: #2a4a3b; opacity: 0.5; }
.pcrumbs [aria-current] { font-weight: 500; font-size: 13px; }
.adv-back { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); margin-right: 2px; }
.adv-back .material-symbols-outlined { font-size: 18px; opacity: 1 !important; color: #17211a; }
@media (max-width: 1023px) { .adv-label { display: none; } }

/* Topradens Zimla-knapp som mockupens chattknapp: grå rund, 36px, orben liten inuti. */
@media (min-width: 1024px) {
  html.zimla-room .dashboard-topbar-ai { width: 36px; height: 36px; }
  html.zimla-room .dashboard-topbar-ai .zimla-ai-fab { width: 36px; height: 36px; min-height: 0; border-radius: 999px; background: rgba(23, 33, 26, 0.14) !important; box-shadow: none !important; }
  html.zimla-room .dashboard-topbar-ai .zimla-ai-fab:hover { background: rgba(23, 33, 26, 0.24) !important; }
  html.zimla-room .dashboard-topbar-ai .zimla-ai-fab.is-active { background: #17211a !important; }
  html.zimla-room .dashboard-topbar-ai .zimla-dock-orb { transform: scale(0.62); }
  html.zimla-room .dashboard-topbar-actions { gap: 10px; }
}

/* Intentkorten som mockupens lappar: fyra toner, klisterremsa upptill, vikt hörn. */
.zs-intent { position: relative; overflow: hidden; align-items: start; padding: 18px 14px 14px; border-radius: 6px 6px 10px 6px; border: 1px solid rgba(255, 255, 255, 0.9); background: linear-gradient(180deg, #fffdf9, #fbf9f4); box-shadow: 0 1px 0 #fff inset, 0 18px 34px -24px rgba(60, 40, 10, 0.55), 0 2px 4px -2px rgba(60, 40, 10, 0.18); }
.zs-intents .zs-intent:nth-child(1) { background: linear-gradient(180deg, #fdfaf0, #faf6ea); }
.zs-intents .zs-intent:nth-child(2) { background: linear-gradient(180deg, #f6f9f4, #f0f5ee); }
.zs-intents .zs-intent:nth-child(3) { background: linear-gradient(180deg, #f5f8fa, #eef3f6); }
.zs-intents .zs-intent:nth-child(4) { background: linear-gradient(180deg, #fbf6f2, #f7f0ea); }
.zs-intent::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(180deg, rgba(60, 40, 10, 0.05), rgba(60, 40, 10, 0.015)); }
.zs-intent:hover { background: #fff; }

/* Ljuslagret (zimla-fx.js): screen-blandat över rummet, under allt innehåll. */
.zimla-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0.55; transition: opacity 900ms ease; }
html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-workplace) .zimla-fx { opacity: 1; }
html.zimla-room-covered .zimla-fx { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .zimla-fx { transition: none; } }

/* Avatarmenyn i den hopfällda rälsen: rälsens scrollyta (overflow hidden) klipper allt
   till 4,6 rem, så menyn läggs fixed bredvid rälsen i stället för inuti den. */
@media (min-width: 1024px) {
  html.zimla-sidebar-collapsed .zimla-desktop-sidebar .zimla-sidebar-me__menu { position: fixed; left: 5.3rem; right: auto; top: auto; bottom: 1.1rem; width: 17rem; max-width: calc(100vw - 6rem); z-index: 60; transform: none; }
}

/* ── Chattar: raden under förslagen, och chattvyn (lista + tråd i ett kort) ── */
.zs-chats { display: none; align-items: center; gap: 8px; margin: -4px 0 0; justify-self: start; padding: 8px 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.45); font: inherit; font-size: 12.5px; color: #3a5a4b; cursor: pointer; text-align: left; }
.zs-chats:hover { background: rgba(255, 255, 255, 0.7); }
.zs-chats .material-symbols-outlined { font-size: 17px; color: #3a6e5c; }
.zs-chats em { font-style: normal; color: #6f8577; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-chats__arrow { margin-left: auto; }
html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chats:not([hidden]) { display: inline-flex; }

.zs-rail { display: none; flex-direction: column; gap: 14px; min-width: 0; padding: 4px; color: #17211a; overflow: auto; }
html:not(.zimla-ai-start) .zs-rail { display: none !important; }
.zs-rail__new { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid rgba(23, 33, 26, 0.12); border-radius: 12px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: inherit; }
.zs-rail__new .material-symbols-outlined { font-size: 18px; }
.zs-rail__section-title { margin: 10px 0 4px 6px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f8577; font-weight: 500; }
[data-chat-history-list] .zs-rail__row + .zs-rail__section-title { margin-top: 14px; }
.zs-rail__section h3 { margin: 0 0 4px 6px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f8577; font-weight: 500; }
.zs-rail__fold summary { list-style: none; display: flex; align-items: center; cursor: pointer; } .zs-rail__fold summary::-webkit-details-marker { display: none; }
.zs-rail__fold summary .material-symbols-outlined { margin-left: auto; font-size: 18px; color: #6f8577; }
.zs-rail__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; width: 100%; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.zs-rail__item { position: relative; } .zs-rail__item:hover { background: rgba(23, 33, 26, 0.05); } .zs-rail__item.is-current { background: rgba(23, 33, 26, 0.07); }
/* Rad = knapp + prickar; prickarna syns vid hover/fokus och när menyn är öppen. */
.zs-rail__row { position: relative; }
.zs-rail__row .zs-rail__item { padding-right: 30px; }
.zs-rail__menu { position: absolute; top: 6px; right: 4px; }
.zs-rail__menu > summary { list-style: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; cursor: pointer; color: #6f8577; opacity: 0; transition: opacity 120ms ease, background 120ms ease; }
.zs-rail__menu > summary::-webkit-details-marker { display: none; }
.zs-rail__menu > summary .material-symbols-outlined { font-size: 18px; }
.zs-rail__row:hover .zs-rail__menu > summary, .zs-rail__menu > summary:focus-visible, .zs-rail__menu[open] > summary { opacity: 1; }
.zs-rail__menu > summary:hover, .zs-rail__menu[open] > summary { background: rgba(23, 33, 26, 0.08); color: #17211a; }
.zs-rail__menu-list { position: absolute; top: 28px; right: 0; z-index: 5; min-width: 150px; padding: 6px; border: 1px solid rgba(23, 33, 26, 0.1); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(23, 33, 26, 0.14); }
.zs-rail__menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: inherit; cursor: pointer; text-align: left; }
.zs-rail__menu-list button:hover { background: rgba(23, 33, 26, 0.05); }
.zs-rail__menu-list button .material-symbols-outlined { font-size: 17px; color: #6f8577; }
.zs-rail__menu-list button.is-danger { color: #b42318; } .zs-rail__menu-list button.is-danger .material-symbols-outlined { color: #b42318; }
.zs-rail__item .material-symbols-outlined { font-size: 18px; color: #3a6e5c; margin-top: 1px; }
.zs-rail__item strong { display: block; font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-rail__item.is-current strong { font-weight: 500; }
.zs-rail__live { position: absolute; left: 14px; top: 12px; width: 7px; height: 7px; border-radius: 999px; background: #0a8a62; box-shadow: 0 0 0 2px #fff; animation: zs-live 1.4s ease-in-out infinite; }
@keyframes zs-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .zs-rail__live { animation: none; } }
.zs-rail__row.is-leaving { opacity: 0; transform: translateX(-6px); transition: opacity 160ms ease, transform 160ms ease; }
.zs-empty { display: none; }
.zs-rail__item small { display: block; font-size: 11.5px; color: #6f8577; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-rail__empty { margin: 4px 6px; font-size: 12px; color: #6f8577; }

/* Chattvyn: panelen blir ett kort med listan till vänster och tråden med
   composern till höger; tavlan ligger kvar under. Bara sidladdning ger heron. */
@media (min-width: 1024px) {
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel {
    display: grid;
    grid-template-columns: clamp(180px, 17vw, 236px) minmax(0, 1fr) clamp(248px, 22vw, 320px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: stretch;
    justify-content: stretch;
    width: calc(100% - 1.5rem);
    max-width: none;
    margin: 0 auto;
    padding: 8px 12px 12px;
    border-radius: 16px;
    /* En platt yta, inte ett kort i rummet: lätt glas, hårlinje, ingen svävande skugga. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
    overflow: hidden;
    /* Kortet fyller höjden ner till underkanten: tråden och tavlan delar på
       utrymmet, composern står alltid i bild utan att man scrollar. */
    height: calc(100dvh - var(--zs-card-top, 60px) - 16px);
    max-height: calc(100dvh - var(--zs-card-top, 60px) - 16px);
    min-height: 0 !important;
    align-self: start;
    margin-top: 12px;
  }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-rail { min-height: 0; overflow: auto; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-rail { display: flex; grid-column: 1; grid-row: 1 / span 3; border-right: 1px solid rgba(23, 33, 26, 0.08); padding-right: 12px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__header { display: flex !important; grid-column: 2; grid-row: 1; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__body { grid-column: 2; grid-row: 2; width: 100%; min-height: 0; max-height: none; overflow: auto; padding: 0 8px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__header { padding: 4px 8px 8px; border: 0; background: transparent; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__messages { display: block !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__intro { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-composer { grid-column: 2; grid-row: 3; width: 100%; position: static; padding: 6px 0 0; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-composer__box { width: 100%; }
  /* Same home cards, now a contextual right rail; no duplicate chat surface. */
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-below {
    display: block !important;
    grid-column: 3;
    grid-row: 2 / span 2;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding: 0 2px 0 8px;
    overflow: auto;
    opacity: 1 !important;
    transform: none !important;
    border-left: 1px solid rgba(23, 33, 26, .08);
  }
  html.zimla-ai-start.zimla-ai-start-chats .zs-below > :not(.zs-desk),
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__suggest,
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__quote,
  html.zimla-ai-start.zimla-ai-start-chats .zs-strip { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-below .zs-desk { display: block; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-below .zs-desk__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  html.zimla-ai-start.zimla-ai-start-chats .zs-below .zs-desk__card {
    padding: 14px;
    border-radius: 14px;
    box-shadow: none;
    backdrop-filter: none;
  }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__card > header { margin-bottom: 10px; gap: 6px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__card h2 { font-size: 14px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__card header a { font-size: 12px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__card :is(b, time),
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__todo span { font-size: 13px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__card small { font-size: 11.5px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__projects li > a {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 44px;
    padding: 5px 0;
  }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__thumb { width: 32px; height: 32px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__lane { padding: 3px 6px; font-size: 10.5px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__projects li > a > .material-symbols-outlined { display: none; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-desk__todo li > a { gap: 7px; min-height: 44px; padding: 6px 0; }
  /* Tråden och fältet i en kolumn på ~48 rem, som de stora chattvyerna. */
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__messages > * { max-width: 48rem; margin-left: auto; margin-right: auto; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__messages { padding: 6px 12px 12px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-composer__box { width: min(48rem, 100%); margin: 0 auto; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-composer { padding: 8px 0 4px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-composer__quick { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 8px; width: min(48rem, 100%); margin: 0 auto 8px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-chat-run .zimla-ai-message__bubble { background: transparent; border: 0; box-shadow: none; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user .zimla-ai-message__bubble { background: rgba(23, 33, 26, 0.06); border: 0; box-shadow: none; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user { grid-template-columns: minmax(0, 1fr); justify-items: end; max-width: 48rem; }
  /* Bredden sätts på stacken (mot raden), inte på bubblan (mot stacken) – annars krymper bubblan mot sig själv till en smal spalt. */
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user .zimla-ai-message__stack { width: fit-content; max-width: 70%; justify-self: end; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user .zimla-ai-message__bubble { width: auto; max-width: none; }
  /* Avatarer som i arbetsläget: Zimlas logga till vänster, användarens initialer till höger. */
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) :is(.zimla-ai-message:not(.zimla-ai-message--user), .zimla-chat-run):has(> .zimla-ai-message__avatar) { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) :is(.zimla-ai-message, .zimla-chat-run) > .zimla-ai-message__avatar { grid-column: 1; grid-row: 1; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) :is(.zimla-ai-message:not(.zimla-ai-message--user), .zimla-chat-run) > :is(.zimla-ai-message__stack, .zimla-ai-message__bubble) { grid-column: 2; grid-row: 1; min-width: 0; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user:has(> .zimla-ai-message__avatar) { display: grid; grid-template-columns: minmax(0, 1fr) 1.85rem; column-gap: 0.75rem; align-items: start; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user > .zimla-ai-message__avatar { grid-column: 2; grid-row: 1; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-message--user > :is(.zimla-ai-message__stack, .zimla-ai-message__bubble) { grid-column: 1; grid-row: 1; }
  /* Huvudet bär samtalet: titel + projekt · tid. Railen är historiken – inga dubbla knappar. */
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__header { min-height: 44px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel-wordmark, html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__context-inline, html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-start-back,
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__header-actions > [data-chat-new], html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__header-actions > [data-chat-history-toggle],
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) [data-chat-width], html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-chat-history { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-start-thread { display: inline-flex !important; flex-direction: column; gap: 1px; min-width: 0; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-start-thread strong { font-size: 0.95rem; font-weight: 500; color: #17211a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-start-thread span { font-size: 0.72rem; color: #6b776f; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-empty { display: block; margin: auto; max-width: 48rem; padding: 2rem 12px; text-align: center; font: 500 15px/1.4 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; color: #35493d; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel__body { display: flex; flex-direction: column; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__messages { flex: 0 1 auto; }
  /* Tavlan i fokus: kortet står kvar, tråden krymper till sina sista rader och tonas lite. */
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel.zs-board-focus .zimla-ai-panel__body { min-height: 0 !important; height: auto; overflow: hidden; opacity: 0.72; transition: opacity 200ms ease; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel.zs-board-focus .zimla-ai-chat__messages { max-height: 100%; overflow: auto; }
  html.zimla-ai-start.zimla-ai-start-chats .zimla-ai-panel.zs-board-focus .zs-rail { opacity: 0.72; transition: opacity 200ms ease; }
  html.zimla-ai-start.zimla-ai-start-chats .zimla-ai-panel.zs-board-focus .zs-board { overflow: auto; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-intents, html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-chats { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel-shell,
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel { pointer-events: auto !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel { z-index: 3; }
}
@media (max-width: 1023px) {
  /* Chattläget på mobil: chattarna som en svepbar rad med chips överst, tråden fyller, fältet längst ner. Tavlan göms. */
  html.zimla-ai-start.zimla-ai-start-chats .zimla-global-topbar,
  html.zimla-ai-start.zimla-ai-start-chats [data-zimla-mobile-dock] { visibility: hidden; pointer-events: none; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working) .zimla-ai-panel-shell {
    inset: 0;
    z-index: 2147483000;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: var(--zs-canvas, #f3f6f2);
  }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working) .zimla-ai-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-rail { display: flex; width: 100%; max-width: 100%; flex-direction: row; align-items: center; gap: 6px; order: -2; padding: 2px 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-rail::-webkit-scrollbar { display: none; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__section, html.zimla-ai-start.zimla-ai-start-chats [data-zs-rail-open] { display: contents; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__section h3, html.zimla-ai-start.zimla-ai-start-chats .zs-rail__section-title, html.zimla-ai-start.zimla-ai-start-chats .zs-rail__fold, html.zimla-ai-start.zimla-ai-start-chats .zs-rail__menu, html.zimla-ai-start.zimla-ai-start-chats .zs-rail__empty { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__new { flex: none; height: 32px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__row { flex: none; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__item { width: auto; grid-template-columns: auto; padding: 0 12px; height: 32px; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(23, 33, 26, 0.08); }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__item.is-current { background: #17211a; color: #fff; border-color: #17211a; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__item .material-symbols-outlined, html.zimla-ai-start.zimla-ai-start-chats .zs-rail__item small { display: none; }
  html.zimla-ai-start.zimla-ai-start-chats .zs-rail__item strong { max-width: 150px; font-size: 12.5px; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working) .zimla-ai-panel__body { display: block; flex: 1 1 auto; min-height: 0; overflow: auto; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working) .zs-below { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__intro, html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zs-intents { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-chat__messages { display: block !important; }
}

/* ── Composern i vila, som i mockupen: låg pill, plus/mic som tysta ikoner, svart skicka-knapp ── */
html.zimla-ai-start:not(.zimla-ai-start-working) [data-chat-runtime-root] .zimla-ai-composer__box,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px 40px;
  grid-template-areas: "attach field mic send";
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  min-height: 58px;
  height: auto;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 10px 28px -18px rgba(16, 24, 20, 0.28), 0 0 0 1px rgba(23, 33, 26, 0.05);
}
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__plus { display: block; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments { grid-area: attach; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__voice { grid-area: mic; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > button[type="submit"],
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > .zimla-ai-composer__stop { grid-area: send; }
.zimla-ai-composer__hint { display: none; }
html.zimla-ai-start:not(.zimla-ai-start-working),
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-scene { background: #f4f6f3; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-scene__frame { opacity: 0 !important; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-scene__frame:first-child { opacity: 1 !important; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zs-intents { display: none; }
.zs-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: start;
  gap: 8px;
  width: min(46rem, 100%);
  margin: 10px 0 0;
}
.zs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(23, 33, 26, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: #29332d;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(23, 33, 26, 0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.zs-chip__icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 999px; background: rgba(23, 33, 26, 0.05); color: #556159; font-size: 15px; }
.zs-chip__arrow { color: #879189; font-size: 15px; }
.zs-chip:hover { border-color: rgba(47, 111, 92, 0.22); background: #fff; box-shadow: 0 5px 14px -8px rgba(23, 33, 26, 0.42); }
.zs-chip:focus-visible { outline: 2px solid rgba(47, 111, 92, 0.42); outline-offset: 2px; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box:focus-within {
  box-shadow: 0 0 0 1px rgba(47, 111, 92, 0.45), 0 8px 18px -14px rgba(23, 33, 26, 0.45);
}
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer textarea {
  grid-area: field;
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1.35;
  box-shadow: none;
}
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer textarea::placeholder { color: #8b938e; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments > summary,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__voice {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: #6b7280;
}
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments > summary {
  margin: 0;
}
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments > summary:hover,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__voice:hover { color: #17211a; background: rgba(23, 33, 26, 0.05); }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments > summary .material-symbols-outlined,
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__voice .material-symbols-outlined { font-size: 18px; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > button[type="submit"],
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > .zimla-ai-composer__stop {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: #1c1c1c; color: #fff; box-shadow: none;
}
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > button[type="submit"]:disabled { background: #17211a; color: #fff; opacity: 0.35; }
html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > button[type="submit"] .material-symbols-outlined { font-size: 20px; }

/* ── Hems genvägar (mobil): flödena som öppnas som en app – en ruta per genväg ── */
@media (max-width: 1023px) {
  .zs-apps { padding: 0 2px; }
  .zs-apps h3 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 4px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #3f5347; font-weight: 500; }
  .zs-apps__edit { min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 0.8rem; font-weight: 500; color: #2f6f5c; text-transform: none; letter-spacing: 0; cursor: pointer; }
  .zs-apps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
  .zs-app { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 96px; padding: 4px 2px 0; border-radius: 14px; text-decoration: none; color: #17211a; text-align: center; -webkit-tap-highlight-color: transparent; }
  /* Rutan är ikonen: vit platta som korten, fylld glyf i genvägens egen ton (registret). Namnet står på scenen under. */
  .zs-app__icon { --tone: #2f6f5c; position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(23, 33, 26, 0.07); box-shadow: none; color: var(--tone); }
  .zs-app__glyph { width: 27px; height: 27px; }
  .zs-app b { font-size: 11.5px; font-weight: 500; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zs-app small { display: block; min-height: 12px; font-size: 10.5px; line-height: 1.15; color: #3f5347; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Redigera: en bock i hörnet – på eller av. Dolda appar står dimmade tills man trycker Klar. */
  .zs-app__mark { display: none; position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 999px; background: var(--tone); color: #fff; place-items: center; box-shadow: 0 0 0 2px #fff; }
  .zs-app__mark .material-symbols-outlined { font-size: 13px; }
  .zs-apps__grid.is-edit .zs-app__mark { display: grid; }
  .zs-apps__grid.is-edit .zs-app.is-hidden { opacity: 0.45; }
  .zs-apps__grid.is-edit .zs-app.is-hidden .zs-app__mark { background: #fff; color: var(--tone); box-shadow: 0 0 0 1.5px var(--tone); }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below { padding-bottom: 12px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .zs-app { transition: transform 120ms ease; }
  .zs-app:active { transform: scale(0.96); }
}
@media (min-width: 1024px) { .zs-apps { display: none; } }

/* ── Rummet på mobil: samma bakgrund som på desktop, på alla sidor ──────────
   Skalet är genomskinligt och scenen ligger fast bakom sidytan; topbar och dock
   behåller sina egna ytor. Kalkyl/bibliotek täcker rummet som på desktop. */
@media (max-width: 1023px) {
  html.zimla-room .zimla-ai-start-waves { position: fixed; inset: 0; left: 0 !important; z-index: 0; opacity: 1; visibility: visible; background-color: #E8EDD4; background-image: none; transition: opacity 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  html.zimla-room.zimla-room-covered .zimla-ai-start-waves { opacity: 0; }
  html.zimla-room .zimla-app-shell, html.zimla-room .zimla-app-main { background: transparent; }
  html.zimla-room #zimla-page-content { position: relative; z-index: 1; }
}

/* ── Hem + samtal (desktop): tråden är en remsa ovanför composern ─────────
   En hälsning eller fråga byter inte sida: hälsningen, Idag-lappen och tavlan står
   kvar, intent-lapparna viker undan och Zimlas svar (och stegen medan det arbetar)
   växer fram i composerns kolumn med ett tak. html.zimla-ai-start-strip sätts av
   zimla-ai-start.js; arbetsytan (workplace) och chattkortet (chats) är egna lägen. */
.zs-strip { display: none; }
@media (min-width: 1024px) {
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel__body { display: contents; }
  /* Intron blir lappens fäste när body är display: contents – annars hamnar Idag-lappen över composern. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__intro { order: 0; width: min(1400px, calc(100% - 3.5rem)); position: relative; overflow: visible; }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer { order: 3; margin-top: 10px !important; }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    display: flex !important; flex: 0 0 auto; flex-direction: column; gap: 0.9rem; order: 1; min-height: 0; height: auto;
    width: min(1400px, calc(100% - 3.5rem)); max-height: min(44vh, 34rem); overflow: auto; overscroll-behavior: contain;
    margin: 12px 0 0; padding: 0.35rem 0.25rem 0.25rem 0; pointer-events: auto; scrollbar-width: none;
  }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages > * { max-width: 46rem; }
  /* Lappen glider ner bredvid remsan när samtalet är uppe (100 % = introts höjd, sedan composern + luft). */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-top .zs-note { top: calc(100% + 5.6rem); }
  /* Remsans yta: ett lätt glas i composerns bredd, så texten inte ligger direkt på rummet. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    box-sizing: border-box; width: min(46rem, calc(100% - 3.5rem)); margin: 12px auto 0 calc((100% - min(1400px, 100% - 3.5rem)) / 2); padding: 14px 16px 12px;
    border-radius: 16px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -30px rgba(60, 40, 10, 0.4);
  }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-chat-run .zimla-ai-message__bubble { background: transparent; border: 0; box-shadow: none; }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    display: flex; align-items: center; gap: 8px; order: 2; width: min(46rem, calc(100% - 3.5rem)); margin: 4px auto 0 calc((100% - min(1400px, 100% - 3.5rem)) / 2);
    font-size: 12.5px; color: #35493d; pointer-events: auto;
  }
  .zs-strip button { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12.5px; color: #24352b; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(36, 53, 43, 0.35); text-underline-offset: 3px; }
  .zs-strip button:hover { text-decoration-color: currentColor; }
  .zs-strip__dot { opacity: 0.5; }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-below { order: 4; }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-stage__side {
    transform: translateY(calc(-1 * var(--zimla-studio-strip-offset, 0px)));
  }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-intents { display: none !important; }
  /* Svaren i remsan: samma lugna form som i samtalet, ingen dubbel ram. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working) .zimla-chat-run .zimla-ai-message__bubble,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working) .zimla-ai-message--assistant:not(.zimla-chat-run) .zimla-ai-message__bubble { padding: 0; }
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working) .zimla-chat-run__answer .zimla-ai-message__bubble { padding: 0; border: 0; background: transparent; box-shadow: none; }

  /* Samtal som öppnas från "Senaste i chatten" stannar på Studio. Tråden och
     dess lilla samtalslista delar en rad; kalendern och tavlan ligger kvar. */
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(13.5rem, 15rem) minmax(19rem, 1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: 12px;
    align-items: start;
    justify-content: stretch;
    width: min(1400px, calc(100% - 3.5rem));
    margin-inline: auto;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__intro {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 12px 0 0;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-rail {
    display: flex;
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: start;
    max-height: min(44vh, 34rem);
    margin-top: 12px;
    padding: 10px;
    gap: 8px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    color: #17211a;
    box-shadow: 0 18px 40px -30px rgba(60, 40, 10, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-rail__new,
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-rail__home {
    height: 32px;
    padding-inline: 9px;
    border-radius: 10px;
    font-size: 12px;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-rail__section-title {
    margin: 8px 0 3px 5px;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-rail__item {
    padding: 7px 28px 7px 5px;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin: 4px 0 0;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    margin: 10px 0 0 !important;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer__box {
    width: 100%;
    max-width: none;
  }
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-below {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
  }
}

/* Chattkortet: en väg tillbaka till Hem bredvid Ny chatt. */
.zs-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zs-rail__home { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; color: #35493d; cursor: pointer; }
.zs-rail__home:hover { background: #f2f5ef; color: #17211a; }
.zs-rail__home .material-symbols-outlined { font-size: 18px; }

/* ── Hem: appar, idag, jobb, kalender, chatt ─────────────────────────── */
.zs-home { display: grid; gap: 16px; margin-top: 16px; width: min(1400px, 100%); }
.zs-stage__main > .zs-board { grid-column: 1 / -1; width: 100%; }
.zs-panel { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(23, 33, 26, 0.08); border-radius: 16px; padding: 12px 14px; }
.zs-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.zs-panel__head b { font-size: 0.95rem; font-weight: 500; }
.zs-panel__head small, .zs-panel__head span, .zs-panel__head a { font-size: 0.75rem; color: #6b7a70; text-decoration: none; font-weight: 500; }
.zs-panel__head a:hover { color: #17211a; }
.zs-panel__empty { margin: 4px 0 8px; font-size: 0.82rem; color: #6b7a70; }
.zs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(220px, 280px); gap: 14px; align-items: start; }
.zs-today { grid-column: 1; }
.zs-jobs { grid-column: 2; grid-row: 1 / span 2; }
.zs-cal { grid-column: 3; }
.zs-recent { grid-column: 3; }
.zs-today ul, .zs-cal__list { list-style: none; margin: 0; padding: 0; }
.zs-today li a, .zs-recent__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(23, 33, 26, 0.06); color: inherit; text-decoration: none; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.zs-today li:first-child a { border-top: 0; }
.zs-today b, .zs-recent__row b, .zs-job b { font-weight: 500; }
.zs-today small, .zs-recent__row small, .zs-job small { display: block; color: #6b7a70; font-size: 0.75rem; }
.zs-today em, .zs-recent__row em { font-style: normal; font-size: 0.75rem; color: #2f6f5c; }
.zs-today__when { min-width: 44px; font-variant-numeric: tabular-nums; }
.zs-today i { width: 8px; height: 8px; border-radius: 999px; background: #b7791f; }
.zs-jobs__title { display: grid; }
.zs-jobs__title small { display: block; }
.zs-job { padding: 8px 0; border-top: 1px solid rgba(23, 33, 26, 0.06); }
.zs-job:first-of-type { border-top: 0; }
.zs-job__next { display: inline-block; margin: 2px 0 0 62px; font-size: 0.75rem; color: #2f6f5c; text-decoration: none; }
.zs-job__main { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.zs-job__main img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; background: #e7eee8; }
.zs-job__main em { font-style: normal; font-size: 0.72rem; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: #e7f3ec; color: #2f6f5c; }
.zs-job__main em.is-underlag { background: #fbf3e3; color: #8a5a10; }
.zs-job__main em.is-offert { background: #e8f0fa; color: #3b6fb0; }
.zs-job__meter { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: #e6ece7; overflow: hidden; }
.zs-job__meter i { display: block; height: 100%; background: #3a8874; }
.zs-app__mark { display: none; }
.zs-apps__grid.is-edit .zs-app__mark { display: grid; }
.zs-app__footer { display: none; }
.zs-cal { padding: 14px 14px 8px; }
.zs-cal .zs-panel__head a { color: #1f8a4c; }
.zs-cal__month { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 8px; }
.zs-cal__month b { font-size: 0.95rem; font-weight: 500; }
.zs-cal__month span { display: flex; gap: 2px; }
.zs-cal__month a { width: 22px; height: 22px; display: grid; place-items: center; color: #6b7280; text-decoration: none; font-size: 1.05rem; line-height: 1; }
.zs-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.zs-cal__days span { font-size: 0.72rem; color: #9aa39c; height: auto; padding: 2px 0 6px; }
.zs-cal__week span { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; height: 32px; font-size: 0.82rem; color: #1c1c1c; }
.zs-cal__week .is-out { color: #c5cac6; }
.zs-cal__week .is-today { width: 26px; height: 26px; margin: 0 auto; border-radius: 999px; background: #1a1a1a; color: #fff; justify-content: center; }
.zs-cal__week i, .zs-cal__list i { width: 5px; height: 5px; border-radius: 999px; display: block; }
.zs-cal__list { list-style: none; margin: 8px 0 0; padding: 4px 0 0; border-top: 1px solid rgba(23, 33, 26, 0.06); }
.zs-cal__list a { display: grid; grid-template-columns: 46px 8px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; color: inherit; text-decoration: none; font-size: 0.82rem; }
.zs-cal__list b { font-weight: 500; color: #6b7280; font-variant-numeric: tabular-nums; }
.zs-cal i.is-meet { background: #8b5cf6; }
.zs-cal i.is-place { background: #3b82f6; }
.zs-cal i.is-follow { background: #22c55e; }
.zs-recent { padding: 14px; }
.zs-recent__head { align-items: flex-start; margin-bottom: 2px; }
.zs-recent__head > span { display: grid; gap: 2px; min-width: 0; }
.zs-recent__head > span > small { color: #7a877e; font-size: 0.72rem; font-weight: 400; }
.zs-recent .zs-panel__head button { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 0.75rem; font-weight: 500; color: #2f765f; cursor: pointer; white-space: nowrap; }
.zs-recent__list { list-style: none; margin: 0; padding: 0; }
.zs-recent__list li + li { border-top: 1px solid rgba(23, 33, 26, 0.07); }
.zs-recent__row { min-height: 52px; border: 0; border-radius: 10px; align-items: center; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 9px 4px; transition: background-color 140ms ease; }
.zs-recent__row:hover { background: #f5f7f4; }
.zs-recent__row:focus-visible { outline: 2px solid rgba(47, 118, 95, 0.45); outline-offset: 2px; }
.zs-recent__row time { align-self: start; margin-top: 2px; color: #8a958e; font-size: 0.69rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zs-recent__avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #dce5de; border-radius: 999px; background: #edf4ef; color: #2f6f5c; }
.zs-recent__avatar .material-symbols-outlined { font-size: 15px; font-variation-settings: "FILL" 0, "wght" 430, "GRAD" 0, "opsz" 20; }
.zs-recent__text { min-width: 0; }
.zs-recent__title { display: block; overflow: hidden; color: #17211a; font-size: 0.79rem; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.zs-recent__event { display: -webkit-box; overflow: hidden; color: #69766d; font-size: 0.78rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.zs-recent__event b, .zs-recent__event strong { color: #17211a; font-weight: 500; }
.zs-recent__text small { margin-top: 2px; overflow: hidden; color: #7a877e; font-size: 0.71rem; text-overflow: ellipsis; white-space: nowrap; }
.zs-foot { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.zs-foot__card { border-radius: 16px; overflow: hidden; min-height: 140px; }
.zs-foot__card--photo { position: relative; display: block; color: #fff; text-decoration: none; }
.zs-foot__card--photo img { width: 100%; height: 160px; object-fit: cover; display: block; }
.zs-foot__card--photo span { position: absolute; left: 14px; bottom: 12px; display: grid; }
.zs-foot__card--photo b { font-size: 1.25rem; font-weight: 500; }
.zs-foot__card--photo small { font-size: 0.8rem; }
.zs-foot__card--note { background: #fff; border: 1px solid rgba(23, 33, 26, 0.08); padding: 16px 18px; }
.zs-foot__card--note b { display: block; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.zs-foot__card--note ul { margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: #35493d; }
.zs-foot__card--note li { padding: 2px 0; }
@media (min-width: 1024px) {
  .zs-home .zs-apps { display: block; }
  .zs-hero { height: 300px; width: min(52%, 680px); }
}
.zs-home .zs-apps__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 8px; }
.zs-home .zs-apps__head b { display: block; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #17211a; }
.zs-home .zs-apps__head small { display: block; font-size: 0.75rem; color: #6b7a70; font-weight: 400; letter-spacing: 0; text-transform: none; }
.zs-home .zs-apps__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zs-home .zs-app { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 112px; padding: 12px 8px 10px; background: #fff; border: 1px solid rgba(23, 33, 26, 0.06); border-radius: 14px; }
.zs-home .zs-app small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 100%; }
.zs-home .zs-app__icon { width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--tone) 14%, #fff); box-shadow: none; border: 0; }
.zs-app__glyph { width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zs-app__glyph-fill { fill: currentColor; stroke: none; opacity: 0.18; }
.zs-home .zs-app small:empty { display: none; }
@media (max-width: 1023px) {
  .zs-chips, .zs-cal, .zs-foot, .zs-day { display: none !important; }
  .zs-grid { display: flex; flex-direction: column; }
  .zs-home .zs-apps__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .zs-home .zs-app { padding: 4px 0; background: transparent; border: 0; }
  .zs-home .zs-app b { white-space: normal; font-size: 10px; line-height: 1.15; }
  .zs-home .zs-app small { display: none; }
  .zs-home .zs-apps__head small { display: none; }
  .zs-top { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 132px; padding-top: 12px !important; }
  .zs-hero { position: absolute !important; height: 150px !important; width: calc(100% + 8px) !important; top: -8px; left: -4px; margin: 0 !important; -webkit-mask-image: linear-gradient(#000 45%, transparent) !important; mask-image: linear-gradient(#000 45%, transparent) !important; border-radius: 0 !important; }
  .zs-intro { position: relative; z-index: 1; padding: 36px 4px 4px; background: linear-gradient(180deg, rgba(244, 246, 243, 0.2), rgba(244, 246, 243, 0.94) 72%); border-radius: 12px; }
  .zs-hero { object-position: 18% center !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-home { padding-bottom: 72px; }
  .zs-today li:nth-child(n+5) { display: none; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__hint { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel__body { order: 0; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below { order: 1; padding-bottom: 8px; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer { order: 2; position: sticky; bottom: 0; margin-top: 0 !important; background: #f4f6f3; z-index: 3; }
  .zs-stage { display: flex; flex-direction: column; }
  .zs-foot__card { display: none; }
}

@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box { width: calc(100% - 332px); max-width: none; }
  .zs-hero { width: min(50%, 720px); height: 220px; top: -28px; right: -8px; border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
  .zs-home { display: grid; grid-template-columns: minmax(0, 1fr) 304px; column-gap: 16px; row-gap: 14px; width: min(1400px, 100%); margin-top: 8px; }
  .zs-chips, .zs-home .zs-apps, .zs-stage__main { grid-column: 1; width: 100%; }
  .zs-stage { display: contents; }
  .zs-stage__main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
  .zs-grid { display: contents; }
  .zs-today { grid-column: 1; }
  .zs-jobs { grid-column: 2; grid-row: 1 / span 2; }
  .zs-foot__card--photo { grid-column: 1; align-self: start; }
  .zs-stage__side { grid-column: 2; grid-row: 1 / span 3; margin-top: -124px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
  .zs-home .zs-apps__grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px; }
  .zs-home .zs-app { min-height: 148px; padding: 22px 10px 16px; border: 0; box-shadow: none; }
  .zs-home .zs-app b { font-size: 0.92rem; font-weight: 500; color: #1c1c1c; }
  .zs-home .zs-app small { margin-top: 2px; font-size: 0.75rem; color: #8b938e; -webkit-line-clamp: 2; }
  .zs-home .zs-app__icon { width: auto; height: auto; margin-bottom: 10px; background: transparent; border: 0; box-shadow: none; border-radius: 0; color: inherit; }
  .zs-home .zs-app__glyph { width: 28px; height: 28px; }
  .zs-home .zs-app--pa-plats { background: #eaf2ed; color: #527665; }
  .zs-home .zs-app--kundmote { background: #f0edf3; color: #71657b; }
  .zs-home .zs-app--nytt-projekt { background: #edf1f4; color: #607584; }
  .zs-home .zs-app--ata { background: #f4f0e8; color: #806f56; }
  .zs-home .zs-app--kalender { background: #f3ecee; color: #80686f; }
  .zs-home .zs-app--kunder { background: #edf2f2; color: #60777a; }
  .zs-home .zs-apps__edit { display: inline-flex; align-items: center; gap: 4px; color: #6b7280; }
  .zs-home .zs-apps__edit .material-symbols-outlined { font-size: 16px; }
  .zs-job__main { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .zs-job__main img { width: 72px; height: 54px; border-radius: 10px; }
  .zs-job__line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .zs-job__line small { margin: 0; font-variant-numeric: tabular-nums; }
  .zs-job__meter { flex: 1; margin: 0; }
  .zs-job__next { margin-left: 82px; }
  .zs-today li a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .zs-today__when { min-width: 52px; }
  .zs-today i { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #c9d4cc; background: #fff; }
  .zs-foot__card--photo { min-height: 168px; position: relative; display: block; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; }
  .zs-foot__card--photo img { width: 100%; height: 180px; object-fit: cover; object-position: center; }
  .zs-foot__card--photo span { position: absolute; left: 16px; bottom: 14px; display: grid; gap: 2px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
  .zs-foot__card--photo small { font-size: 0.78rem; }
  .zs-foot__card--photo b { font-size: 1.55rem; font-weight: 500; line-height: 1.05; }
  .zs-foot__card--note { background: #f7f4ef; border: 0; border-radius: 18px; padding: 18px 16px 8px; position: relative; }
  .zs-foot__card--note > b { font-size: 2rem; letter-spacing: -0.03em; margin-bottom: 12px; }
  .zs-foot__card--note li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
  .zs-foot__card--note li b { display: block; font-size: 0.84rem; font-weight: 500; }
  .zs-foot__card--note li small { display: block; color: #6b7a70; font-size: 0.75rem; }
  .zs-foot__card--note .material-symbols-outlined { font-size: 18px; color: #3a8874; }
}

/* Studio landing system — one calm hierarchy for desktop, tablet and phone. */
:root {
  --zs-canvas: oklch(96% 0.012 145);
  --zs-surface: oklch(98.5% 0.008 145);
  --zs-surface-raised: oklch(99.2% 0.006 145);
  --zs-ink: oklch(24% 0.025 145);
  --zs-muted: oklch(49% 0.022 145);
  --zs-line: color-mix(in oklab, var(--zs-ink) 9%, transparent);
  --zs-accent: oklch(48% 0.095 160);
  --zs-radius-control: 8px;
  --zs-radius-card: 16px;
  --zs-radius-pill: 999px;
  --zs-shadow-1: 0 1px 2px rgb(20 35 27 / 5%);
  --zs-shadow-2: 0 1px 2px rgb(20 35 27 / 6%), 0 14px 32px -26px rgb(20 35 27 / 34%);
  --zs-ease-out: cubic-bezier(.22, 1, .36, 1);
}

html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel {
  color: var(--zs-ink);
}

.zs-title,
.zs-panel__head b,
.zs-board__kicker b,
.zs-app > b,
.zs-card__name {
  color: var(--zs-ink);
}

.zs-sub,
.zs-date,
.zs-panel__head small,
.zs-app > small,
.zs-card__meta {
  color: var(--zs-muted);
}

.zs-chip,
.zs-app,
.zs-board,
.zs-panel,
.zs-day {
  border: 1px solid var(--zs-line);
  box-shadow: var(--zs-shadow-1);
}

.zs-chip:focus-visible,
.zs-app:focus-visible,
.zs-card:focus-visible,
.zs-board__sum:focus-visible,
.zs-board__toggle:focus-visible,
.zs-board__back:focus-visible,
.zs-recent__row:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--zs-accent) 58%, transparent);
  outline-offset: 3px;
}

.zs-apps__grid:not(.is-edit) .zs-app.is-hidden { display: none; }
.zs-app__glyph { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.zs-app__glyph-fill { fill: currentColor; stroke: none; opacity: .16; }
.zs-app__footer,
.zs-foot__card--note { display: none !important; }

.zs-app__arrow {
  color: color-mix(in oklab, var(--zs-ink) 52%, transparent);
  font-size: 18px;
  transition: transform 160ms var(--zs-ease-out), color 160ms ease;
}

.zs-app__status {
  color: var(--zs-accent);
  font-size: .68rem;
  line-height: 1;
}

.zs-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--zs-line);
}

.zs-day__head > span {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zs-day__head a {
  color: var(--zs-accent);
  font-size: .75rem;
  font-weight: 500;
  text-decoration: none;
}

.zs-board__back { display: none; }
.zs-board__sum {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.zs-card { color: inherit; text-decoration: none; }
.zs-card__name::after { display: none; }
.zs-card__next { position: static; }

.zs-recent__head button {
  min-height: 36px;
  padding: 0 2px 0 10px;
  border: 0;
  background: transparent;
  color: var(--zs-accent);
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}

.zs-recent__avatar {
  border-color: var(--zs-line);
  background: color-mix(in oklab, var(--zs-accent) 8%, var(--zs-surface));
  color: var(--zs-accent);
}

@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working),
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-scene {
    background-color: var(--zs-canvas);
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel {
    align-items: center;
    padding: clamp(1.25rem, 2.6vh, 2.2rem) 0 2.5rem;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-strip):not(.zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) {
    padding-top: clamp(5rem, 12dvh, 9rem);
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel__body,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer,
  html.zimla-ai-start:not(.zimla-ai-start-working) [data-chat-runtime-root] .zimla-ai-composer,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below {
    width: min(86rem, calc(100% - clamp(3rem, 7vw, 7rem)));
  }

  .zs-top {
    min-height: 104px;
    padding: 10px 19rem 0 0;
  }

  .zs-intro { max-width: 42rem; }
  .zs-eyebrow { font-size: .64rem; letter-spacing: .14em; }
  .zs-title {
    margin-top: 7px;
    font-size: clamp(2.5rem, 3vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -.035em;
  }
  .zs-intro .zs-sub { margin-top: 7px; font-size: 1.25rem; line-height: 1.4; }
  .zs-date { display: none; }
  .zs-day { display: none; }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer {
    margin-top: .6rem;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box {
    width: calc(100% - 19rem);
    min-height: 76px;
    padding: 12px 13px;
    border: 1px solid color-mix(in oklab, var(--zs-accent) 20%, var(--zs-line));
    border-radius: 20px;
    background: color-mix(in oklab, var(--zs-surface-raised) 94%, transparent);
    box-shadow: var(--zs-shadow-2);
    backdrop-filter: blur(14px) saturate(1.05);
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box textarea {
    min-height: 27px;
    max-height: 7.5rem;
    padding-top: 1px;
    color: var(--zs-ink);
    font-size: .95rem;
    line-height: 1.55;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__hint {
    margin-top: 2px;
    color: var(--zs-muted);
    font-size: .72rem;
  }

  .zs-below {
    gap: 14px;
    margin-top: 14px;
  }

  .zs-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: 16px;
    row-gap: 14px;
    width: min(86rem, calc(100% - clamp(3rem, 7vw, 7rem)));
    margin-top: 12px;
    padding-bottom: 32px;
  }

  .zs-chips {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }

  .zs-chip {
    min-height: 38px;
    padding: 0 13px 0 10px;
    border-radius: var(--zs-radius-pill);
    background: color-mix(in oklab, var(--zs-surface) 92%, transparent);
    color: var(--zs-ink);
    font-size: .75rem;
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  .zs-chip:hover {
    border-color: color-mix(in oklab, var(--zs-accent) 24%, var(--zs-line));
    background: var(--zs-surface-raised);
  }

  .zs-chip__icon { font-size: 16px; color: var(--zs-muted); }
  .zs-chip__arrow { font-size: 14px; color: var(--zs-muted); }

  .zs-home .zs-apps {
    grid-column: 1;
    width: min(100%, 47rem);
    padding: 2px 0 0;
  }

  .zs-home .zs-apps__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .zs-home .zs-apps__head b { display: block; font-size: .84rem; font-weight: 500; }
  .zs-home .zs-apps__head small { display: block; margin-top: 2px; color: var(--zs-muted); font-size: .71rem; }
  .zs-home .zs-apps__edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 4px 0 10px;
    color: var(--zs-muted);
    font-size: .75rem;
  }
  .zs-home .zs-apps__edit .material-symbols-outlined { font-size: 16px; }

  .zs-home .zs-apps__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .zs-home .zs-app {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    min-height: 78px;
    padding: 13px 14px;
    overflow: hidden;
    border-radius: var(--zs-radius-card);
    background: var(--zs-surface);
    color: var(--zs-ink);
    text-align: left;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 180ms ease;
  }

  .zs-home .zs-app:hover {
    border-color: color-mix(in oklab, var(--zs-accent) 22%, var(--zs-line));
    background: var(--zs-surface-raised);
    box-shadow: var(--zs-shadow-2);
  }
  .zs-home .zs-app:hover .zs-app__arrow { color: var(--zs-accent); transform: translateX(2px); }
  .zs-home .zs-app__icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border: 1px solid color-mix(in oklab, var(--tone) 16%, var(--zs-line));
    border-radius: 11px;
    background: color-mix(in oklab, var(--tone) 8%, var(--zs-surface));
    color: var(--tone);
    box-shadow: none;
  }
  .zs-home .zs-app__glyph { width: 21px; height: 21px; }
  .zs-home .zs-app > b {
    grid-column: 2;
    align-self: end;
    overflow: hidden;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zs-home .zs-app > small {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    overflow: hidden;
    font-size: .71rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zs-home .zs-app__arrow { grid-column: 3; grid-row: 1 / 3; }
  .zs-home .zs-app__status {
    position: absolute;
    right: 14px;
    bottom: 8px;
  }
  .zs-home .zs-app--nytt-projekt,
  .zs-home .zs-app--ata,
  .zs-home .zs-app--kalender,
  .zs-home .zs-app--kunder { display: none !important; }

  .zs-stage { display: contents; }
  .zs-stage__main {
    position: relative;
    grid-column: 1;
    align-self: end;
    min-width: 0;
  }
  .zs-stage__side {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
  }

  .zs-panel,
  .zs-board {
    border-radius: var(--zs-radius-card);
    background: var(--zs-surface);
    box-shadow: var(--zs-shadow-1);
  }

  .zs-board {
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .zs-board__head { min-height: 52px; padding: 10px 12px 7px; }
  .zs-board__icon { width: 30px; height: 30px; border-radius: 9px; }
  .zs-board__kicker b { font-size: .72rem; letter-spacing: .075em; }
  .zs-board__kicker > span { margin-top: 1px; font-size: .63rem; letter-spacing: .055em; }
  .zs-board__all { font-size: .74rem; }
  .zs-board__toggle { width: 36px; height: 36px; border: 0; background: transparent; }

  .zs-lanes { gap: 7px; padding: 0 10px 10px; }
  .zs-lane { gap: 4px; padding: 7px; border-radius: 10px; background: color-mix(in oklab, var(--zs-canvas) 70%, var(--zs-surface)); }
  .zs-lane__head { margin-bottom: 3px; padding-bottom: 5px; }
  .zs-card {
    gap: 3px;
    padding: 8px 9px;
    border-color: var(--zs-line);
    border-radius: var(--zs-radius-control);
    background: var(--zs-surface-raised);
    box-shadow: none;
    font-size: .76rem;
    transition: border-color 150ms ease, background-color 150ms ease;
  }
  .zs-card:hover { border-color: color-mix(in oklab, var(--zs-accent) 26%, var(--zs-line)); background: var(--zs-surface); box-shadow: none; }
  .zs-card__foot { font-size: .69rem; }
  .zs-card__next { color: var(--zs-accent); }

  .zs-stage__main:has(.zs-board.is-open) { min-height: 222px; }
  .zs-board.is-open {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    height: min(25rem, calc(100dvh - 7rem)) !important;
    overflow: hidden;
    cursor: default;
    box-shadow: var(--zs-shadow-2);
    transform-origin: 50% 100%;
    animation: zs-board-open 260ms var(--zs-ease-out) both;
  }
  .zs-board.is-open .zs-lanes { height: calc(100% - 54px); }
  .zs-board.is-open .zs-lane { min-height: 0; height: 100%; background: color-mix(in oklab, var(--zs-canvas) 72%, var(--zs-surface)); }
  .zs-board.is-open .zs-lane__body { max-height: calc(100% - 48px); overflow: auto; scrollbar-width: thin; }

  @keyframes zs-board-open {
    from { opacity: .7; clip-path: inset(72% 0 0 0 round var(--zs-radius-card)); transform: translateY(8px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round var(--zs-radius-card)); transform: translateY(0); }
  }

  .zs-panel { padding: 13px 14px; }
  .zs-panel__head { margin-bottom: 7px; }
  .zs-panel__head b { font-size: .84rem; font-weight: 500; }
  .zs-panel__head small { margin-top: 2px; font-size: .69rem; }

  .zs-cal__month { margin-bottom: 5px; }
  .zs-cal__week span { height: 26px; font-size: .7rem; }
  .zs-cal__list { margin-top: 6px; padding-top: 6px; }

  .zs-recent__list li:nth-child(n + 4) { display: none; }
  .zs-recent__row {
    min-height: 49px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 7px 2px;
    border-radius: var(--zs-radius-control);
  }
  .zs-recent__row:hover { background: color-mix(in oklab, var(--zs-accent) 5%, var(--zs-surface)); }
  .zs-recent__avatar { width: 30px; height: 30px; }
  .zs-recent__title { font-size: .77rem; }
  .zs-recent__text small { display: block; font-size: .68rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .zs-top { padding: 18px 0 2px; }
  .zs-title { font-size: 2rem; }
  .zs-day { display: none !important; }
  .zs-home .zs-apps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .zs-home .zs-app--nytt-projekt,
  .zs-home .zs-app--ata { display: none !important; }
  .zs-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr);
    gap: 12px;
  }
  .zs-stage__main { grid-column: 1; min-width: 0; }
  .zs-stage__side { display: grid; grid-column: 2; gap: 12px; min-width: 0; }
  .zs-cal { display: block !important; }
  .zs-recent__list li:nth-child(n + 4) { display: none; }
}

@media (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-panel {
    min-height: 100%;
    padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-chat__intro,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer {
    width: min(100%, 44rem);
    margin-inline: auto;
  }

  .zs-top {
    min-height: 0;
    padding: 20px 14px 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .zs-intro { padding: 0 !important; background: transparent !important; }
  .zs-eyebrow { display: none; }
  .zs-title {
    margin: 0;
    font-size: clamp(1.65rem, 7vw, 1.95rem);
    font-weight: 400;
    letter-spacing: -.035em;
  }
  .zs-date {
    display: inline-block;
    margin-top: 3px;
    color: var(--zs-muted);
    font-size: .72rem;
    text-decoration: none;
  }
  .zs-sub { margin-top: 5px; font-size: .84rem; line-height: 1.35; }

  .zs-day {
    display: block;
    margin-top: 14px;
    padding: 11px 12px 8px;
    border-radius: var(--zs-radius-card);
    background: color-mix(in oklab, var(--zs-surface) 94%, transparent);
  }
  .zs-day .zs-mob__row { min-height: 48px; padding: 8px 0 2px; }
  .zs-day .zs-mob__when { min-width: 48px; }
  .zs-day .zs-mob__text b { font-size: .79rem; }
  .zs-day .zs-mob__text small { font-size: .68rem; }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer {
    order: 3;
    position: sticky;
    z-index: 50;
    bottom: calc(4.65rem + env(safe-area-inset-bottom, 0px) + var(--zimla-keyboard-inset, 0px));
    padding: 8px 12px;
    background: transparent;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box {
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    column-gap: 3px;
    min-height: 68px;
    padding: 8px;
    border: 1px solid color-mix(in oklab, var(--zs-accent) 18%, var(--zs-line));
    border-radius: 18px;
    background: color-mix(in oklab, var(--zs-surface-raised) 94%, transparent);
    box-shadow: var(--zs-shadow-2);
    backdrop-filter: blur(14px) saturate(1.04);
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box textarea {
    max-height: 6rem;
    color: var(--zs-ink);
    font-size: .9rem;
    line-height: 1.45;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__hint { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments > summary,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__voice,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > button[type="submit"],
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > .zimla-ai-composer__stop {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .zs-home {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 0 12px calc(10rem + env(safe-area-inset-bottom));
  }
  .zs-chips { display: none !important; }

  .zs-home .zs-apps { padding: 12px 0 18px; }
  .zs-home .zs-apps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
  }
  .zs-home .zs-apps__head b { display: block; font-size: .85rem; font-weight: 500; }
  .zs-home .zs-apps__head small { display: block; margin-top: 2px; color: var(--zs-muted); font-size: .68rem; }
  .zs-home .zs-apps__edit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 44px;
    padding: 0 2px 0 10px;
    color: var(--zs-muted);
    font-size: .75rem;
  }
  .zs-home .zs-apps__edit .material-symbols-outlined { font-size: 16px; }

  .zs-home .zs-apps__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .zs-home .zs-app {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 1px 9px;
    align-items: center;
    min-height: 72px;
    padding: 11px;
    border-radius: 14px;
    background: color-mix(in oklab, var(--zs-surface) 94%, transparent);
    color: var(--zs-ink);
    text-align: left;
    text-decoration: none;
  }
  .zs-home .zs-app:active { opacity: .82; }
  .zs-home .zs-app__icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border: 1px solid var(--zs-line);
    border-radius: 10px;
    background: var(--zs-surface-raised);
    color: var(--tone);
  }
  .zs-home .zs-app__glyph { width: 20px; height: 20px; }
  .zs-home .zs-app > b {
    align-self: end;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zs-home .zs-app > small {
    align-self: start;
    overflow: hidden;
    color: var(--zs-muted);
    font-size: .65rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zs-home .zs-app__arrow { grid-column: 3; grid-row: 1 / 3; }
  .zs-home .zs-app__status { display: none; }
  .zs-home .zs-app--nytt-projekt,
  .zs-home .zs-app--ata { display: none !important; }

  .zs-stage { display: flex; flex-direction: column; gap: 10px; }
  .zs-stage__main,
  .zs-stage__side { min-width: 0; }
  .zs-stage__side { display: block; }
  .zs-cal { display: none !important; }

  .zs-board,
  .zs-panel {
    border-radius: var(--zs-radius-card);
    background: color-mix(in oklab, var(--zs-surface) 96%, transparent);
  }
  .zs-board { overflow: hidden; }
  .zs-board__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 52px;
    gap: 9px;
    padding: 10px 12px 5px;
  }
  .zs-board__icon { width: 30px; height: 30px; border-radius: 9px; }
  .zs-board__kicker b { font-size: .75rem; }
  .zs-board__kicker > span { font-size: .63rem; }
  .zs-board__all { font-size: .72rem; }
  .zs-board__toggle { display: none; }
  .zs-board__sum {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
    min-height: 44px;
    padding: 3px 12px 10px;
    color: var(--zs-muted);
    font-size: .68rem;
    cursor: pointer;
  }
  .zs-board__sum span { white-space: nowrap; }
  .zs-board__sum span b { margin-right: 3px; color: var(--zs-ink); font-weight: 500; }
  .zs-board__sum .is-zero,
  .zs-board__sum .is-zero b { color: color-mix(in oklab, var(--zs-muted) 52%, transparent); }
  .zs-board__sum-arrow { margin-left: auto; font-size: 18px; }
  .zs-board:not(.is-mob-open) .zs-lanes,
  .zs-board:not(.is-mob-open) .zs-dots { display: none; }

  html.zimla-studio-board-open .zs-top {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  html.zimla-ai-start.zimla-studio-board-open:not(.zimla-ai-start-working) .zs-below.zs-home {
    position: fixed;
    z-index: 2147482999;
    top: calc(4.75rem + env(safe-area-inset-top));
    right: 12px;
    bottom: calc(10.15rem + env(safe-area-inset-bottom) + var(--zimla-keyboard-inset, 0px));
    left: 12px;
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  html.zimla-studio-board-open .zs-home .zs-apps,
  html.zimla-studio-board-open .zs-stage__side { display: none !important; }
  html.zimla-studio-board-open .zimla-global-topbar,
  html.zimla-studio-board-open .zimla-global-topbar__mobile-row {
    background: transparent !important;
    box-shadow: none !important;
  }
  html.zimla-studio-board-open .zs-stage,
  html.zimla-studio-board-open .zs-stage__main { width: 100%; height: 100%; }

  .zs-board.is-mob-open {
    position: relative;
    z-index: 1;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0;
    border: 1px solid color-mix(in oklab, var(--zs-accent) 12%, var(--zs-line));
    border-radius: 20px;
    background: color-mix(in oklab, var(--zs-surface-raised) 96%, transparent);
    box-shadow: var(--zs-shadow-2);
    animation: none;
  }
  .zs-board.is-mob-open .zs-board__head {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 7px 10px 6px;
    border-bottom: 1px solid var(--zs-line);
    background: transparent;
  }
  .zs-board.is-mob-open .zs-board__back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--zs-radius-pill);
    background: transparent;
    color: var(--zs-ink);
  }
  .zs-board.is-mob-open .zs-board__icon { display: none; }
  .zs-board.is-mob-open .zs-board__kicker { min-width: 0; }
  .zs-board.is-mob-open .zs-board__kicker > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zs-board.is-mob-open .zs-board__kicker > span { display: block; }
  .zs-board.is-mob-open .zs-board__all { min-height: 44px; display: inline-flex; align-items: center; }
  .zs-board.is-mob-open .zs-board__sum { display: none; }
  .zs-board.is-mob-open .zs-dots { display: flex; padding: 10px 12px 0; }
  .zs-board.is-mob-open .zs-lanes {
    display: flex;
    flex: 1;
    gap: 10px;
    padding: 10px 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .zs-board.is-mob-open .zs-lane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 0 0 calc(100% - 2px);
    height: 100%;
    min-height: 0;
    padding: 10px;
    border-radius: var(--zs-radius-card);
    background: var(--zs-surface);
    scroll-snap-align: start;
  }
  .zs-board.is-mob-open .zs-lane__head small { display: block; }
  .zs-board.is-mob-open .zs-lane__body {
    max-height: none;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
  }
  .zs-board.is-mob-open .zs-card.is-extra { display: grid; }
  .zs-board.is-mob-open .zs-card {
    min-height: 76px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--zs-surface-raised);
  }
  .zs-board.is-mob-open .zs-card__meta,
  .zs-board.is-mob-open .zs-card__foot b { display: block; }

  .zs-recent {
    margin-top: 10px;
    padding: 12px;
  }
  .zs-panel__head { margin-bottom: 5px; }
  .zs-panel__head b { font-size: .84rem; font-weight: 500; }
  .zs-panel__head small { display: block; margin-top: 2px; font-size: .68rem; }
  .zs-recent__list li:nth-child(n + 3) { display: none; }
  .zs-recent__row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 50px;
    gap: 9px;
    padding: 7px 2px;
  }
  .zs-recent__avatar { width: 30px; height: 30px; }
  .zs-recent__title { font-size: .76rem; font-weight: 500; }
  .zs-recent__text small { display: block; font-size: .67rem; }
  .zs-recent__row time { font-size: .65rem; }

}

@media (max-width: 767px) {
  /* Ett öppet samtal är mobilens fokuserade arbetsläge, precis som den
     expanderade tavlan. Appens globala topbar lämnar då hela höjden åt
     tråden; dockan ligger kvar som vägen hem. */
  html.zimla-ai-start.zimla-ai-start-working .zimla-global-topbar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.zimla-ai-start .zimla-ai-panel.is-docking {
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-chat__intro { order: 0; }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zs-below { order: 1; }
  html.zimla-ai-start .zimla-ai-composer {
    order: 2;
    position: fixed !important;
    right: 12px;
    bottom: calc(6rem + env(safe-area-inset-bottom) + var(--zimla-keyboard-inset, 0px)) !important;
    left: 12px;
    z-index: 2147483001;
    width: auto !important;
    margin: 0 auto !important;
    padding: 6px 12px;
    transform: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) [data-chat-runtime-root] .zimla-ai-composer__box,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box {
    min-height: 60px !important;
    padding: 6px !important;
    border-radius: 17px;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box textarea {
    font-size: .86rem;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-attachments > summary,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__voice,
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > button[type="submit"],
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-ai-composer__box > .zimla-ai-composer__stop {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working) .zimla-chat-voice-feedback:not(:has(> :not([hidden]))) {
    display: none !important;
  }
  /* Arbetsläget ligger i ett dockat panelskal vars nederkant redan är
     reserverad ovanför docken. Samma visuella ankare blir därför 0.7rem
     mot panelskalet, inte dockens fulla höjd en gång till. */
  html.zimla-ai-start.zimla-ai-start-working .zimla-ai-composer {
    bottom: calc(.7rem + var(--zimla-keyboard-inset, 0px)) !important;
  }
  .zs-home .zs-apps { padding: 8px 0 12px; }
  .zs-home .zs-apps__head { margin-bottom: 6px; }
  .zs-home .zs-apps__grid { gap: 6px; }
  .zs-home .zs-app {
    min-height: 56px;
    padding: 7px 9px;
  }
  .zs-home .zs-app__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .zs-home .zs-app__glyph { width: 18px; height: 18px; }
  .zs-home .zs-apps__head small { max-width: 13rem; }
}


@media (prefers-reduced-motion: reduce) {
  html.zimla-studio-load-motion .zs-intro,
  html.zimla-studio-load-motion .zs-day,
  html.zimla-studio-load-motion .zs-apps,
  html.zimla-studio-load-motion .zs-board,
  html.zimla-studio-load-motion .zs-recent,
  .zs-board.is-open,
  .zs-board.is-mob-open {
    animation: none !important;
    transition-duration: .01ms !important;
    transform: none !important;
  }
}

/* Source-order lock: legacy stripreglerna ovanför får inte återställa den
   aktiva desktopchattens huvudkolumn efter att Studio möblerats om. */
@media (min-width: 1024px) {
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 28px 30px;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer,
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) [data-chat-runtime-root] .zimla-ai-composer {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    margin: 0 !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-stage__side {
    transform: none !important;
  }

  /* Den explicita lilla samtalslistan har ett eget kompakt läge. */
  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    height: clamp(23rem, 52dvh, 32rem);
    margin: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-rail {
    grid-column: 2;
    grid-row: 1 / span 5;
    width: 100%;
    max-height: clamp(23rem, 60dvh, 38rem);
    margin: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    margin: -4px 0 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer {
    grid-column: 1;
    grid-row: 5;
    width: 100%;
    margin: 0 !important;
  }

  html.zimla-ai-start.zimla-ai-start-strip.zimla-ai-start-chat-menu:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(
    .zs-recent,
    .zs-apps,
    .zs-stage__main,
    .zs-cal
  ) {
    display: none !important;
  }
}

/* ── Studio hem på desktop: en enda grid ─────────────────────────────
   Hälsning, composer, chips, appar och tavlan i vänsterspalten; kalender
   och samtal i högerspalten från samma topplinje. Ersätter den gamla
   lösningen (smal composer + högerkolumn med -124px marginal). */
@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-content: center;
    align-items: start;
    column-gap: 20px;
    row-gap: 14px;
    width: min(86rem, calc(100% - clamp(3rem, 7vw, 7rem)));
    height: calc(100dvh - 2.95rem) !important;
    min-height: 0 !important;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vh, 5rem) 0;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) :is(
    .zimla-ai-panel__body,
    .zimla-ai-chat__intro,
    .zs-stage
  ) { display: contents !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-below { display: contents; }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) :is(
    .zs-top,
    .zimla-ai-composer,
    .zs-chips,
    .zs-home .zs-apps,
    .zs-stage__main
  ) { grid-column: 1; width: 100%; max-width: none; margin: 0; }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-stage__side {
    grid-column: 2;
    grid-row: 1 / span 5;
    display: grid;
    align-content: start;
    gap: 14px;
    margin: 0;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-top { min-height: 0; padding: 2px 0 0; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-composer__box { width: 100%; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-chips { margin-top: -4px; }

  /* Hälsning + tydlig stödtext. */
  .zs-eyebrow { display: none !important; }
  .zs-top .zs-intro .zs-sub {
    display: block !important;
    visibility: visible;
    opacity: 1;
    margin-top: 7px;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .zs-title { margin-top: 0; }
  .zs-date { display: none !important; }

  /* Appar: chips är handlingar, appar är lägen. Döljs helt när inga appar
     visas (och man inte redigerar) i stället för en rubrik utan innehåll. */
  .zs-home .zs-apps:not(:has(.is-edit)):not(:has(.zs-app--pa-plats:not(.is-hidden), .zs-app--kundmote:not(.is-hidden))) { display: none; }

  /* Desktopfokus: tavlan ligger kvar i Studio och tar den mittersta raden.
     Composern är samma formulärnod, men hamnar efter tavlan vid nederkanten. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus {
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    row-gap: 18px;
    padding-block: clamp(3.25rem, 7vh, 5.5rem) clamp(1.25rem, 2.5vh, 2rem);
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zimla-ai-panel__body {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zs-top {
    display: none !important;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus :is(.zs-title, .zs-date, .zs-eyebrow),
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus :is(.zs-chips, .zs-home .zs-apps) {
    display: none !important;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zs-stage__main {
    grid-row: 1;
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zs-board.is-open {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: 100% !important;
    animation: none;
    transform-origin: center;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zimla-ai-composer {
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: min(42rem, 72%) !important;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zimla-ai-composer__box {
    grid-template-areas: "attach field mic send";
    grid-template-rows: 40px;
    min-height: 72px;
    row-gap: 0;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zimla-ai-composer__hint {
    display: none !important;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focus .zs-stage__side {
    grid-row: 1 / span 2;
    align-self: center;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel.zs-focusing :is(.zs-chips, .zs-home .zs-apps) {
    pointer-events: none;
  }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-stage__main:has(.zs-board.is-open) { min-height: 0; }

  /* Kortens rad i öppen tavla: procent-max-height räknades mot gridcellen
     (91px) och klippte korten. Låt raden fylla kolumnen och scrolla i stället. */
  .zs-board.is-open .zs-lane { grid-template-rows: auto minmax(0, 1fr); }
  .zs-board.is-open .zs-lane__body {
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
  }

  /* Tavlan: tomma steg blir smala kolumner i stället för tre "Inget här". */
  .zs-board:not(.is-open) .zs-lanes { display: flex; align-items: stretch; }
  .zs-board:not(.is-open) .zs-lane { flex: 1 1 0; min-width: 0; }
  .zs-board:not(.is-open) .zs-lane.is-empty { flex: 0 0 auto; width: 6.75rem; }
  .zs-board:not(.is-open) .zs-lane.is-empty .zs-lane__none { padding: 6px 0 0; text-align: left; font-size: .68rem; }
  .zs-board:not(.is-open) .zs-lane.is-empty .zs-lane__head span::before { content: "0"; }
}

/* ── Aktiv chatt på desktop: tråden är en yta, inte ett glasfönster ───
   Remsan (huvud), meddelandena och composern ligger i samma kolumn och delar
   en yta – som en riktig chattklient. Tidigare svävade meddelandena i ett
   glaskort med innehållet klistrat i nederkanten, med ett tomrum ovanför. */
@media (min-width: 1024px) {
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel {
    row-gap: 0;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(.zs-strip, .zimla-ai-chat__messages, .zimla-ai-composer) {
    background: color-mix(in oklab, var(--zs-surface-raised) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.03);
    -webkit-backdrop-filter: blur(18px) saturate(1.03);
  }

  /* Huvudet: trådens kontroller, inte lösa piller ovanför kortet. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip {
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--zs-line);
    border-bottom: 0;
    border-radius: var(--zs-radius-card) var(--zs-radius-card) 0 0;
    box-shadow: 0 -1px 0 0 rgb(255 255 255 / 40%) inset;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip button {
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--zs-muted);
    font-size: .74rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-strip button:hover {
    background: color-mix(in oklab, var(--zs-accent) 8%, transparent);
    color: var(--zs-ink);
  }

  /* Tråden börjar överst och växer nedåt; scrollen håller sig vid botten. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages {
    justify-content: flex-start;
    gap: 1.4rem;
    padding: 20px 18px;
    border-inline: 1px solid var(--zs-line);
    border-radius: 0;
    box-shadow: none;
    scroll-padding-block-end: 1rem;
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__messages > * {
    width: min(100%, 44rem);
  }

  /* Composern är ytans fot: samma yta, pillen sitter i den. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer {
    padding: 4px 18px 14px !important;
    border: 1px solid var(--zs-line);
    border-top: 0;
    border-radius: 0 0 var(--zs-radius-card) var(--zs-radius-card);
    box-shadow: 0 24px 60px -44px rgb(20 35 27 / 45%);
  }

  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-composer__box {
    width: min(100%, 44rem);
    margin-inline: auto;
    box-shadow: 0 0 0 1px var(--zs-line);
  }

  /* Egna meddelanden syns: en tonad bubbla i stället för vitt på vitt. */
  html.zimla-ai-start.zimla-ai-start-strip:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-message--user .zimla-ai-message__bubble {
    border-color: transparent;
    border-radius: 14px 14px 4px 14px;
    background: color-mix(in oklab, var(--zs-accent) 10%, var(--zs-surface));
    box-shadow: none;
  }
}

/* ── En chatt på telefon ─────────────────────────────────────────────────
   Studio hade två egna chattytor (ett kort som lyfte ur "Senaste samtal" och
   en bubbla över ett fryst Hem). Kortet flyttade panelens huvud, tråd och
   composer in i listraden – därav den saknade composern och den trasiga
   bakgrunden. Nu är chatten samma ark som på alla andra sidor, oavsett om man
   trycker på ett samtal, på orben eller skickar från Hem. */
@media (max-width: 1023px) {
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell,
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell.is-ready {
    /* Arket står mellan topbaren och docken: då kan inget inuti hamna bakom
       docken, oavsett hur högt composern eller förslagsraden blir. */
    position: fixed !important;
    top: calc(4.5rem + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    z-index: 2147483000;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 1.25rem !important;
    background: transparent !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 24px 48px -28px rgb(20 35 27 / 45%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--zs-line);
    border-radius: 1.25rem;
    background: var(--zs-surface-raised) !important;
    box-shadow: 0 -22px 54px -30px rgb(20 40 30 / 45%) !important;
    animation: none !important;
  }

  /* Hem ligger kvar i panelen som markup men är inte chatten. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel :is(.zs-top, .zs-below, .zs-rail, .zs-strip) {
    display: none !important;
  }
  /* Hem bakom arket: i sidans vanliga flöde, samma design som när den står i panelen. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zs-park {
    display: block !important;
    position: relative;
    z-index: 0;
    padding: 0 0 12rem !important;
    pointer-events: none;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zs-park :is(.zs-top, .zs-below) {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) :is(.zimla-ai-panel__header, .zimla-ai-panel__drag-handle) {
    display: flex !important;
    flex: 0 0 auto;
    opacity: 1 !important;
    pointer-events: auto;
  }

  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    opacity: 1 !important;
    pointer-events: auto;
  }

  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-chat__messages {
    display: flex !important;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 0;
    max-height: none;
    padding: 12px 14px 4px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* Composern sitter i arket, inte fastklistrad i skärmens nederkant. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-composer {
    position: static !important;
    flex: 0 0 auto;
    order: 9;
    right: auto;
    bottom: auto !important;
    left: auto;
    width: 100% !important;
    margin: 0 !important;
    /* 11px + arkets 1px-kant = samma 12px som Hem-composern: pillen står still. */
    padding: 6px 11px 10px !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* Topbaren stannar; docken är vägen hem och ligger över arkets fot. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-global-topbar {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 1023px) {
  /* Docken är vägen hem ur chatten – arket reserverar plats åt den. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) [data-zimla-mobile-dock] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147483002;
  }
}

/* ── Studio på telefon: en arbetsdag, inte en landningssida ──────────────
   Ordningen är det man behöver först ute på jobbet: vem man är och vilken dag
   det är, vad som står näst i kalendern, apparna som en rad ikoner (som på en
   telefon), jobben som en liten pipeline och samtalen. Alla kort delar en yta;
   composern ligger kvar vid tummen ovanför docken. */
@media (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel {
    padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Panelens kropp är 384px (max-w-md) för chatten; på Hem ska den följa korten. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-panel__body,
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zimla-ai-chat__intro {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* Hälsningen: vänsterställd, liten, med datumet som enda rad under. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top {
    display: grid !important;
    gap: 12px;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px 0 !important;
    text-align: left;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-intro {
    width: 100%;
    max-width: none !important;
    padding: 0 2px !important;
    background: transparent !important;
    text-align: left;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-title {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-align: left;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-date {
    display: block !important;
    margin-top: 4px;
    color: var(--zs-muted);
    font-size: .82rem;
    text-decoration: none;
    text-align: left;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-intro .zs-sub,
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-eyebrow {
    display: none !important;
  }

  /* Gemensam kortyta för Nästa, jobben och samtalen. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) :is(.zs-day, .zs-board, .zs-recent) {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid color-mix(in oklab, var(--zs-ink) 7%, transparent) !important;
    border-radius: 16px !important;
    background: color-mix(in oklab, var(--zs-surface-raised) 90%, transparent) !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 4%) !important;
    backdrop-filter: blur(14px) saturate(1.03);
    -webkit-backdrop-filter: blur(14px) saturate(1.03);
  }

  /* Nästa i kalendern – det man faktiskt tittar efter på morgonen. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day {
    display: block !important;
    text-align: left;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: .74rem;
    color: var(--zs-muted);
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day__head a {
    color: var(--zs-accent);
    text-decoration: none;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day .zs-mob__row { min-height: 44px; padding: 6px 0 0; border: 0; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day .zs-mob__empty { margin: 6px 0 2px; color: var(--zs-muted); font-size: .84rem; text-align: left; }

  /* Under hälsningen: en luftig men tät kolumn. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-below {
    display: grid !important;
    gap: 12px !important;
    margin: 12px 0 0 !important;
    padding: 0 16px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-stage,
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-stage__side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    margin: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) :is(.zs-stage__main, .zs-stage__side, .zs-recent) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  /* Appar: en rad ikoner med namnet under, som på telefonens hemskärm. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps { padding: 2px 0 0 !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 8px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps__head b { font-size: .84rem; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps__head small { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps__edit { min-height: 36px; font-size: .74rem; color: var(--zs-muted); }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 6px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 14px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zs-ink);
    text-align: center;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app__icon {
    display: grid;
    place-items: center;
    width: 56px !important;
    height: 56px !important;
    border: 1px solid color-mix(in oklab, var(--zs-ink) 6%, transparent) !important;
    border-radius: 17px !important;
    background: color-mix(in oklab, var(--zs-surface-raised) 92%, transparent) !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 5%);
    color: color-mix(in srgb, var(--tone) 78%, #17211a);
  }
  /* Dolda appar (Anpassa) och de som bor i Studios chips (Nytt projekt, ÄTA) syns inte här. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-apps__grid:not(.is-edit) .zs-app.is-hidden,
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home :is(.zs-app--nytt-projekt, .zs-app--ata) {
    display: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app__icon { margin: 0 !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app__glyph { width: 24px; height: 24px; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app > b {
    display: block;
    width: 100%;
    margin: 0 !important;
    text-align: center !important;
    max-width: 100%;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app > small,
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app__arrow { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app__status {
    position: absolute;
    top: -4px;
    right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--zs-accent);
    color: #fff;
    font-size: .6rem;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app:active .zs-app__icon { transform: scale(.96); }

  /* Dina jobb: stegen som en liten pipeline – antal överst, steget under. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__head {
    min-height: 0 !important;
    margin: 0 0 8px;
    padding: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__icon { width: 28px !important; height: 28px !important; border-radius: 9px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__kicker b { font-size: .84rem !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__kicker > span { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    text-align: center;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum > span:not(.zs-board__sum-arrow) {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 8px 2px 7px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--zs-accent) 7%, var(--zs-surface));
    overflow: hidden;
    color: var(--zs-muted);
    font-size: .64rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum > span b {
    color: var(--zs-ink);
    font-size: 1.05rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum > span.is-zero {
    background: color-mix(in oklab, var(--zs-ink) 3%, transparent);
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum > span.is-zero b { color: var(--zs-muted); }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum-arrow { display: none !important; }

  /* Senaste samtal: samma huvud som de andra korten. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent .zs-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent .zs-panel__head b { font-size: .84rem; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent .zs-panel__head small { display: none; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent__row { min-height: 50px; }

  /* Chatten öppnas ur composern: arket växer upp från pillen, som ligger kvar
     på samma plats. Ingen hopp-effekt, ingen bubbla. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel {
    animation: zs-mobile-sheet-grow 340ms cubic-bezier(.22, 1, .36, 1) both !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) :is(.zimla-ai-panel__header, .zimla-ai-panel__body) {
    animation: zs-mobile-sheet-content 260ms 90ms cubic-bezier(.22, 1, .36, 1) both;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-composer__box {
    min-height: 60px !important;
    padding: 6px !important;
    border-radius: 17px !important;
  }
  @keyframes zs-mobile-sheet-grow {
    from { clip-path: inset(calc(100% - 5.5rem) 0 0 0 round 1.25rem); }
    to { clip-path: inset(0 0 0 0 round 1.25rem); }
  }
  @keyframes zs-mobile-sheet-content {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel,
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) :is(.zimla-ai-panel__header, .zimla-ai-panel__body) {
    animation: none !important;
  }
}

/* ── Chatten på telefon: ett och samma utseende ──────────────────────────
   Samtal ur listan (chats) och samtal från Hem/orben (working) ritade huvud
   och svar olika – kort med ram mot grön linje, "Zimla AI" mot trådens namn.
   Nu: trådens namn i huvudet, samma fyra åtgärder, egna meddelanden som en
   tonad bubbla till höger och Zimlas svar som ren text. */
@media (max-width: 1023px) {
  /* dashboard-empty.css ger arbetslägets bubbla 94 % vitt med en tyngre väljare – arket ska vara ogenomskinligt. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) [data-zimla-ai-panel-shell].zimla-ai-panel-shell .zimla-ai-panel[data-zimla-ai-panel] {
    padding: 0 !important;
    background: var(--zs-surface-raised) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Huvudet: trådens namn + tid, åtgärderna till höger. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__header {
    align-items: center;
    gap: 8px;
    min-height: 52px !important;
    /* Handtaget ligger absolut överst – huvudet börjar under det. */
    padding: 22px 10px 8px 18px !important;
    border-bottom: 1px solid var(--zs-line) !important;
    background: transparent !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) :is(.zimla-ai-panel__mascot, .zimla-ai-start-back, .zimla-ai-panel-wordmark, .zimla-ai-panel__context-inline, .zimla-studio-mobile-switch, .zimla-ai-panel__close) {
    display: none !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__brand {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__brand-copy { display: block !important; min-width: 0; }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-start-thread {
    display: grid !important;
    gap: 1px;
    min-width: 0;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-start-thread strong {
    overflow: hidden;
    color: var(--zs-ink);
    font-size: .95rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-start-thread span {
    color: var(--zs-muted);
    font-size: .72rem;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__header-actions {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__header-actions > :is(.zimla-ai-panel__support-btn, [data-chat-history-toggle], .zimla-chat-menu, .zimla-ai-minimize) {
    display: grid !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__header-actions :is(.zimla-ai-panel__support-btn, .zimla-chat-menu > summary) {
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zs-muted) !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__header-actions :is(.zimla-ai-panel__support-btn, .zimla-chat-menu > summary):active {
    background: color-mix(in oklab, var(--zs-accent) 9%, transparent) !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__header-actions .material-symbols-outlined { font-size: 21px; }

  /* Tråden. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-chat__messages {
    gap: 1.25rem !important;
    padding: 16px 16px 8px !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-message--user {
    justify-items: end;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-message--user .zimla-ai-message__stack {
    width: fit-content !important;
    max-width: 82% !important;
    margin-left: auto;
    align-items: flex-end;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-message--user .zimla-ai-message__bubble {
    width: auto !important;
    padding: 9px 13px !important;
    border: 0 !important;
    border-radius: 18px 18px 5px 18px !important;
    background: color-mix(in oklab, var(--zs-accent) 11%, var(--zs-surface)) !important;
    box-shadow: none !important;
    color: var(--zs-ink);
    font-size: .95rem;
    line-height: 1.45;
  }
  /* Egna meddelanden behöver inte namn och avatar – bubblan till höger räcker. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-message--user :is(.zimla-ai-message__avatar, .zimla-ai-message__meta) {
    display: none !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-message--user:has(> .zimla-ai-message__avatar) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Zimlas svar: ren text, ingen ram och ingen linje. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) :is(.zimla-ai-message--assistant, .zimla-chat-run) .zimla-ai-message__bubble {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zs-ink);
    font-size: .95rem;
    line-height: 1.6;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) :is(.zimla-ai-message--assistant, .zimla-chat-run) .zimla-ai-message__stack {
    max-width: 100% !important;
  }

  /* Composerns fot: samma pill och samma plats i båda lägena. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell .zimla-ai-composer {
    padding: 8px 11px 10px !important;
    border-top: 1px solid var(--zs-line);
    background: var(--zs-surface-raised);
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell .zimla-ai-composer__voice {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell .zimla-ai-composer__box {
    border: 1px solid color-mix(in oklab, var(--zs-ink) 9%, transparent) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 4%) !important;
  }
}

/* ── Dina jobb på telefon: en tavla som glider upp ───────────────────────
   Som en Jira-tavla: stegen är flikar överst, kolumnerna sveps i sidled med
   nästa kolumn skymtande, korten är vita på grå kolumn. Tavlan står mellan
   topbaren och composern – composern ligger fri under och går att använda.
   Senaste samtal, appar och Nästa göms medan tavlan är uppe. */
@media (max-width: 1023px) {
  html.zimla-ai-start.zimla-studio-board-open:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-below.zs-home {
    position: fixed !important;
    z-index: 2147482999;
    top: calc(4.4rem + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    bottom: calc(10.75rem + env(safe-area-inset-bottom, 0px) + var(--zimla-keyboard-inset, 0px)) !important;
    left: 10px !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.zimla-ai-start.zimla-studio-board-open:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(.zs-top, .zs-chips, .zs-home .zs-apps, .zs-stage__side, .zs-recent, .zs-day) {
    display: none !important;
  }
  html.zimla-ai-start.zimla-studio-board-open:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(.zs-stage, .zs-stage__main) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--zs-ink) 8%, transparent) !important;
    border-radius: 18px !important;
    background: var(--zs-surface-raised) !important;
    box-shadow: 0 24px 60px -34px rgb(20 35 27 / 45%) !important;
    animation: zs-board-slide-up 320ms cubic-bezier(.22, 1, .36, 1) both !important;
  }

  /* Huvudet: tillbaka, namnet, Alla projekt. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__head {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 6px 12px 4px 6px !important;
    border: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open :is(.zs-board__icon, .zs-board__toggle, .zs-board__kicker > span) { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__back { display: grid !important; width: 40px; height: 40px; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__kicker b { font-size: .95rem !important; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__all { font-size: .78rem; }

  /* Stegen som flikar – aktiv flik följer kolumnen man svept till. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__sum {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 2px 10px 10px !important;
    border-bottom: 1px solid var(--zs-line) !important;
    cursor: default;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__sum > span:not(.zs-board__sum-arrow) {
    display: grid !important;
    min-height: 44px;
    align-content: center;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__sum > span.is-current {
    background: var(--zs-accent) !important;
    color: #fff !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__sum > span.is-current b { color: #fff !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-dots { display: none !important; }

  /* Kolumnerna: grå botten, nästa kolumn skymtar i kanten. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lanes {
    display: flex !important;
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
    padding: 10px 10px 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lanes::-webkit-scrollbar { display: none; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 0 0 calc(100% - 30px) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: color-mix(in oklab, var(--zs-ink) 5%, var(--zs-surface)) !important;
    scroll-snap-align: start;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__head {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 8px;
    margin: 0 !important;
    padding: 12px 12px 8px !important;
    border: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__head b {
    color: var(--zs-ink) !important;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__head > span {
    justify-self: start;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--zs-ink) 9%, transparent);
    color: var(--zs-ink) !important;
    font-size: .7rem;
    text-align: center;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__head > span:empty { display: none; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__head small {
    display: block !important;
    grid-column: 1 / -1;
    color: var(--zs-muted);
    font-size: .72rem;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__body {
    display: grid !important;
    align-content: start;
    gap: 8px;
    min-height: 0;
    max-height: none !important;
    padding: 0 8px 10px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Korten: vita, tunn skugga, titel – kund – belopp och nästa steg. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card {
    display: grid !important;
    gap: 4px;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 1px 1px rgb(20 35 27 / 16%), 0 0 1px rgb(20 35 27 / 22%) !important;
    color: var(--zs-ink);
    text-decoration: none;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card:active { background: color-mix(in oklab, var(--zs-accent) 5%, #fff) !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__name { font-size: .9rem; font-weight: 500; line-height: 1.3; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__meta {
    display: -webkit-box !important;
    overflow: hidden;
    color: var(--zs-muted);
    font-size: .74rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: .76rem;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__foot b { display: block !important; font-weight: 500; font-variant-numeric: tabular-nums; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__next { color: var(--zs-accent); white-space: nowrap; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__none {
    padding: 18px 8px;
    border: 1px dashed color-mix(in oklab, var(--zs-ink) 14%, transparent);
    border-radius: 8px;
    color: var(--zs-muted);
    font-size: .78rem;
    text-align: center;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__more { justify-self: start; padding: 6px 4px; color: var(--zs-accent); font-size: .78rem; text-decoration: none; }

  /* Tavlan har fast höjd: bara kolumnerna får krympa, och korten tar sin egen höjd. */
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open > :not(.zs-lanes) { flex: 0 0 auto; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-board__head { min-height: 52px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-lane__body { grid-auto-rows: max-content; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card { flex-shrink: 0; height: auto !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open .zs-card__meta { height: auto !important; min-height: 1.35em; }

  @keyframes zs-board-slide-up {
    from { transform: translateY(48px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board.is-mob-open { animation: none !important; }
}

/* ── Studio, ren design ──────────────────────────────────────────────────
   Glas på fototapet, spärrade versaler, pilar efter varje länk och en ikon i
   varje rad fick Studio att se genererad ut. Här: solida papperskort med
   hårlinjer (rummet syns runt dem, inte igenom), rubriker i vanlig skrift,
   länkar utan pilar, ikoner bara där de betyder något. Samma språk på
   desktop och telefon. */
:root {
  --zs-paper: oklch(99.4% .004 145);
  --zs-paper-line: color-mix(in oklab, var(--zs-ink) 8%, transparent);
  --zs-paper-shadow: 0 1px 2px rgb(20 35 27 / 5%), 0 8px 24px -20px rgb(20 35 27 / 30%);
  --zs-paper-radius: 14px;
}

@media (min-width: 1024px) {
  /* Innehållet börjar överst – ingen centrerad hjälte. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) {
    align-content: start !important;
    padding-top: clamp(1.75rem, 6vh, 4rem) !important;
    row-gap: 16px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-title {
    font-size: clamp(1.75rem, 2.2vw, 2.15rem) !important;
    letter-spacing: -.03em;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-top .zs-intro .zs-date {
    display: block !important;
    margin-top: 4px;
    color: var(--zs-muted);
    font-size: .9rem;
    text-decoration: none;
  }

  /* Papper, inte glas. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(.zs-board, .zs-panel, .zs-home .zs-app) {
    border: 1px solid var(--zs-paper-line) !important;
    border-radius: var(--zs-paper-radius) !important;
    background: var(--zs-paper) !important;
    box-shadow: var(--zs-paper-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-composer__box {
    border: 1px solid var(--zs-paper-line) !important;
    border-radius: 16px !important;
    background: var(--zs-paper) !important;
    box-shadow: var(--zs-paper-shadow) !important;
    backdrop-filter: none !important;
  }

  /* Genvägar: bara ordet, tysta knappar. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chip {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid var(--zs-paper-line) !important;
    border-radius: 999px !important;
    background: var(--zs-paper) !important;
    box-shadow: none !important;
    color: var(--zs-ink) !important;
    font-size: .8rem !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chip:hover { border-color: color-mix(in oklab, var(--zs-accent) 35%, var(--zs-paper-line)) !important; }

  /* Rubriker: vanlig skrift, antal i grått, länken utan pil. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(.zs-panel__head b, .zs-board__kicker b, .zs-home .zs-apps__head b) {
    color: var(--zs-ink) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) :is(.zs-panel__head a, .zs-panel__head button, .zs-board__all) {
    color: var(--zs-accent) !important;
    font-size: .8rem !important;
    font-weight: 400;
  }

  /* Appar: ikon + namn på en rad, ingen beskrivning, ingen pil. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home .zs-apps__grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home .zs-app {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 8px 16px 8px 8px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home .zs-app__icon {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 9px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home .zs-app__glyph { width: 18px !important; height: 18px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home .zs-app > b { font-size: .84rem !important; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home :is(.zs-app > small, .zs-app__arrow) { display: none !important; }
  /* Nytt projekt och ÄTA finns som genvägar, Kalender och Kunder i menyn – här bara lägena. Dolda (Anpassa) förblir dolda. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home :is(.zs-app--nytt-projekt, .zs-app--ata, .zs-app--kalender, .zs-app--kunder),
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-home .zs-apps__grid:not(.is-edit) .zs-app.is-hidden {
    display: none !important;
  }

  /* Dina jobb: en yta, kolumner delade av hårlinjer, kort som tunna rutor. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__icon { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__head { display: flex !important; align-items: center; gap: 10px; padding: 12px 10px 8px 16px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__all { margin-left: auto; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__kicker { display: flex !important; align-items: baseline; gap: 8px; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board__kicker > span {
    margin: 0 !important;
    color: var(--zs-muted) !important;
    font-size: .8rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lanes { gap: 0 !important; padding: 0 6px 10px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lane {
    padding: 4px 10px 6px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-left: 1px solid var(--zs-paper-line) !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lane:first-child { border-left: 0 !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lane__head {
    margin: 0 0 6px !important;
    padding: 0 0 4px !important;
    border: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lane__head b {
    color: var(--zs-ink-2, var(--zs-ink)) !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lane__head span { color: var(--zs-muted) !important; font-size: .76rem !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-card {
    padding: 8px 10px !important;
    border: 1px solid var(--zs-paper-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-card:hover { border-color: color-mix(in oklab, var(--zs-accent) 35%, var(--zs-paper-line)) !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-card__name { font-size: .84rem; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-card__dot { width: 6px !important; height: 6px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-lane__none { font-size: 0 !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-lane__none::before { content: "–"; color: var(--zs-muted); font-size: .8rem; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-lane__more { color: var(--zs-muted) !important; font-size: .76rem !important; }

  /* Högerspalten fyller sin kolumn. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) :is(.zs-stage__side, .zs-cal, .zs-recent) {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Kalendern: veckan, inte månaden – och dagens händelser under. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal .zs-cal__month span { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal .zs-cal__month b { color: var(--zs-muted); font-size: .8rem; font-weight: 400; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal .zs-cal__week:not(.zs-cal__days):not(:has(.is-today)) { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal .zs-cal__week span { height: 30px !important; font-size: .78rem !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal .zs-cal__list { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--zs-paper-line) !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-cal .zs-cal__list:empty::before { content: "Inget bokat idag."; color: var(--zs-muted); font-size: .8rem; }

  /* Senaste samtal: rader, inte ikonrutor. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-recent__avatar { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-recent__row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 44px !important;
    padding: 7px 4px !important;
    border-top: 1px solid var(--zs-paper-line);
    border-radius: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-recent__list li:first-child .zs-recent__row { border-top: 0; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-recent__title { font-size: .84rem !important; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-recent__row time { color: var(--zs-muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
}

/* Telefon: samma papper och samma rubriker. */
@media (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-workplace) :is(.zs-day, .zs-board:not(.is-mob-open), .zs-recent) {
    border: 1px solid var(--zs-paper-line) !important;
    border-radius: var(--zs-paper-radius) !important;
    background: var(--zs-paper) !important;
    box-shadow: var(--zs-paper-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-home .zs-app__icon {
    background: var(--zs-paper) !important;
    border-color: var(--zs-paper-line) !important;
    box-shadow: var(--zs-paper-shadow) !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day__head {
    align-items: center !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day__head > span {
    color: var(--zs-ink);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-day__head a { font-size: .8rem; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__kicker > span { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board:not(.is-mob-open) .zs-board__icon { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent__avatar { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent__row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 46px !important;
    padding: 8px 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent__title { font-size: .86rem !important; font-weight: 500; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent__row time { color: var(--zs-muted); font-size: .74rem; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board__sum > span:not(.zs-board__sum-arrow):not(.is-current) {
    background: color-mix(in oklab, var(--zs-ink) 4%, var(--zs-paper)) !important;
  }
}

@media (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board:not(.is-mob-open) .zs-board__head { display: flex !important; align-items: center; gap: 8px; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-board:not(.is-mob-open) .zs-board__all { margin-left: auto; }
}
html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-recent__row { align-items: center !important; }

/* ── Studio desktop: tätare, tydligare, mer att göra ────────────────────
   Större välkomst med dagen i en rad (möten, det som väntar, offerter ute),
   genvägar med egna ikoner, "Väntar på dig" överst i högerspalten, fyra kort
   per kolumn på tavlan och djupare skuggor så korten lyfter från rummet.
   Appar göms på desktop – Kundmöte finns bland genvägarna. */
.zs-daystat { display: none; }
@media (min-width: 1024px) {
  :root { --zs-paper-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 18px 42px -24px rgb(20 35 27 / 34%); }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) {
    /* Raderna följer innehållet – en äldre regel gav hälsningens rad 2 px
       och lät composern lägga sig över dagsraden på smalare skärmar. */
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    padding-top: clamp(1.5rem, 5vh, 3.25rem) !important;
    row-gap: 18px !important;
  }

  /* Välkomsten. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-title {
    font-size: clamp(2.5rem, 3.4vw, 3.25rem) !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-top .zs-intro .zs-date.zs-date { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-daystat {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 10px 0 0;
    color: var(--zs-muted);
    font-size: 1rem;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-daystat span + span::before {
    content: "·";
    margin: 0 10px;
    color: color-mix(in oklab, var(--zs-muted) 55%, transparent);
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-daystat span:first-child { color: var(--zs-ink); }

  /* Composern lyfter mest – den är sidans huvudsak. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-composer__box {
    min-height: 64px !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 22px 48px -26px rgb(20 35 27 / 42%) !important;
  }

  /* Genvägarna: ikon i en tonad cirkel + ordet. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chips { gap: 10px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 0 16px 0 6px !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 10px 22px -16px rgb(20 35 27 / 34%) !important;
    font-size: .84rem !important;
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 14px 26px -16px rgb(20 35 27 / 40%) !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-chip__icon {
    display: grid !important;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--zs-accent) 11%, var(--zs-paper));
    color: var(--zs-accent) !important;
    font-size: 17px !important;
  }

  /* Appar göms – Kundmöte finns bland genvägarna. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-home .zs-apps { display: none !important; }

  /* Högerspalten är en kolumn: Väntar på dig, Kalender, Senaste samtal. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-stage__side {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-stage__side > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Väntar på dig. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zs-todo { display: block; }
  html.zimla-ai-start.zimla-ai-start-strip .zs-todo { display: none !important; }
  .zs-todo .zs-panel__head { display: flex; align-items: center; justify-content: space-between; }
  .zs-todo__count {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in oklab, #b7791f 14%, var(--zs-paper));
    color: #8a5a12;
    font-size: .74rem;
    text-align: center;
  }
  .zs-todo__list { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
  .zs-todo__list li + li { border-top: 1px solid var(--zs-paper-line); }
  .zs-todo__list a {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 2px;
    color: var(--zs-ink);
    text-decoration: none;
  }
  .zs-todo__list a:hover .zs-todo__action { text-decoration: underline; }
  .zs-todo__list i { width: 7px; height: 7px; border-radius: 50%; background: #c58a2b; }
  .zs-todo__list li.is-calc i { background: var(--zs-accent); }
  .zs-todo__list li.is-sent i { background: #3b6fb0; }
  .zs-todo__text { min-width: 0; color: var(--zs-muted); font-size: .8rem; line-height: 1.35; }
  .zs-todo__text b { color: var(--zs-ink); font-weight: 500; }
  .zs-todo__action { color: var(--zs-accent); font-size: .78rem; white-space: nowrap; }

  /* Tavlan: fyra kort per kolumn, beloppet med när det finns. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-lane { min-height: 17rem; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-card { gap: 3px !important; padding: 10px 12px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-card__meta {
    display: block !important;
    overflow: hidden;
    color: var(--zs-muted);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-card__foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    font-size: .76rem;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-card__foot b { display: block !important; flex: 0 0 auto; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-card__next { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-card__foot b:empty { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-card:hover { box-shadow: 0 10px 22px -16px rgb(20 35 27 / 38%) !important; }
}
@media (max-width: 1023px) {
  .zs-todo, .zs-chip--meeting { display: none !important; }
}
@media (min-width: 1024px) {
  /* Kort med lång text utan radbrytning får inte trycka ut kolumnen. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-lane__body { grid-template-columns: minmax(0, 1fr) !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-board:not(.is-open) .zs-card { min-width: 0 !important; overflow: hidden; }
}

/* ── Studio desktop: Dina jobb fyller höjden ────────────────────────────
   Tavlan slutade långt ovanför skärmens underkant medan högerspalten
   fortsatte. Nu är tavlan sidans sista rad och fyller ned till samma
   underkant; alla jobb visas och varje kolumn scrollar inuti, som en riktig
   kanban. På korta skärmar har tavlan en minsta höjd och sidan scrollar. */
@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) {
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    /* Panelen fyller skalet; bottenmarginalen låter tavlan sluta en bit
       ovanför skärmens underkant så rummet syns under. */
    min-height: calc(100dvh - var(--zimla-app-topbar-block, 2.95rem)) !important;
    padding-bottom: clamp(3rem, 12vh, 9rem) !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-stage__side {
    grid-row: 1 / -1 !important;
    align-self: start;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-stage__main {
    grid-row: 4 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column;
    min-height: 22rem !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-lanes {
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-lane {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-lane__body {
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  /* Alla jobb syns – "+N till" behövs inte när kolumnen scrollar. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-card.is-extra { display: grid !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-lane__more { display: none !important; }
}
@media (min-width: 1024px) {
  /* Korten tar sin egen höjd; kolumnen scrollar i stället för att klämma dem. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-lane__body { grid-auto-rows: max-content !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:not(.is-open) .zs-card { height: auto !important; }

  /* Högerspalten slutar i samma underkant som tavlan; samtalen fyller ut. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-stage__side {
    display: flex !important;
    flex-direction: column;
    align-self: stretch !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-stage__side > * { flex: 0 0 auto; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-recent { flex: 1 1 auto !important; min-height: 0; overflow: hidden; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-recent__list li { display: list-item !important; list-style: none; }
}

/* ── Ett samtal är igång ───────────────────────────────────────────────
   Hem ser inte orört ut när man kommer tillbaka mitt i ett samtal: en rad
   med samtalets titel och när det senast hände, "Zimla arbetar" med puls
   medan en körning pågår. Klicket öppnar den stora chattrutan. */
.zs-intro .zs-resume.zimla-ai-start-recent {
  /* Startsidans knappregler (flex-direction: column, centrerad) gäller inte här. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  max-width: 100%;
  min-height: 40px;
  margin-top: 14px;
  padding: 0 12px 0 14px;
  border: 1px solid color-mix(in oklab, var(--zs-accent) 22%, var(--zs-paper-line, rgb(0 0 0 / 8%)));
  border-radius: 999px;
  background: var(--zs-paper, #fff);
  box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 10px 22px -16px rgb(20 35 27 / 34%);
  color: var(--zs-ink);
  font: inherit;
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.zs-resume:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 14px 26px -16px rgb(20 35 27 / 40%); }
.zs-resume__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--zs-accent); }
.zs-resume.is-running .zs-resume__dot { animation: zs-resume-pulse 1.4s ease-in-out infinite; }
.zs-resume__label { flex: 0 0 auto; color: var(--zs-accent); font-weight: 500; }
.zs-resume__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-resume__when { flex: 0 0 auto; color: var(--zs-muted); font-size: .76rem; }
.zs-resume__go { flex: 0 0 auto; color: var(--zs-muted); font-size: 18px; }
@keyframes zs-resume-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--zs-accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--zs-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .zs-resume.is-running .zs-resume__dot { animation: none; } }
@media (max-width: 1023px) {
  .zs-intro .zs-resume.zimla-ai-start-recent { display: flex; width: 100%; margin-top: 12px; }
}

/* ── Ny användare: tre vägar in ───────────────────────────────────────── */
.zs-board:has(.zs-start) :is(.zs-lanes, .zs-board__sum, .zs-dots, .zs-board__toggle) { display: none !important; }
.zs-start { padding: 6px 16px 18px; }
.zs-start__lead { margin: 0 0 14px; color: var(--zs-muted); font-size: .9rem; line-height: 1.5; }
.zs-start__lead b { color: var(--zs-ink); font-weight: 500; }
.zs-start__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zs-start__way {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 14px;
  border: 1px solid var(--zs-paper-line, rgb(0 0 0 / 8%));
  border-radius: 12px;
  background: #fff;
  color: var(--zs-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.zs-start__way:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--zs-accent) 35%, transparent); box-shadow: 0 12px 24px -18px rgb(20 35 27 / 40%); }
.zs-start__way .material-symbols-outlined {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--zs-accent) 11%, #fff);
  color: var(--zs-accent);
  font-size: 20px;
}
.zs-start__way b { font-size: .88rem; font-weight: 500; }
.zs-start__way small { color: var(--zs-muted); font-size: .76rem; }
@media (max-width: 1023px) {
  .zs-start { padding: 2px 0 0; }
  .zs-start__ways { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .zs-start__way { padding: 12px; }
}
@media (min-width: 1024px) {
  /* Tomt konto: startytan och det tomma samtalskortet följer sitt innehåll –
     ingen stor vit yta som bara sträcks ut. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-stage__main:has(.zs-start) {
    align-self: start !important;
    min-height: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-board:has(.zs-start) { flex: 0 0 auto !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) .zimla-ai-panel:not(.zs-focus) .zs-recent:has(.zs-panel__empty) { flex: 0 0 auto !important; }
}

/* ── Chattrutan på desktop: full storlek med luft runt om ─────────────────
   Rutan är arbetsytan när den väl är öppen: den fyller innehållsytan med
   16 px luft, listan får en fast spalt och tråden/composern behåller sin
   läsbara bredd (48rem) centrerad i resten. */
@media (min-width: 1024px) {
  html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-panel {
    grid-template-columns: 17.5rem minmax(0, 1fr) !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 16px 16px 0 !important;
    padding: 10px 16px 14px 12px !important;
    height: calc(100dvh - var(--zs-card-top, 60px) - 16px) !important;
    max-height: none !important;
  }
}

/* ── Studio på telefon: tre kort i en karusell ──────────────────────────
   Hem är hälsningen, en coverflow med Kalender · Snabbval · Dina jobb
   (startar på Snabbval i mitten) och ett kort längst ned: Zimlas pratbubbla
   när ett samtal pågår, annars ett tips. Composern, tavlan, apparna och
   samtalslistan bor inte här på telefon – orben öppnar chatten. */
@media (min-width: 1024px) {
  .zs-flow, .zs-flow-sub, .zs-flow-count, .zs-flow-note { display: none !important; }
}
@media (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) :is(.zimla-ai-composer, .zs-below, .zs-day, .zs-daystat, .zs-intro .zs-resume, .zs-top .zs-intro .zs-date) {
    display: none !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top { gap: 10px !important; overflow: visible !important; }
  /* Chatten öppen: karusellen och bubblan syns inte i springan ovanför docken. */
  html.zimla-ai-start:is(.zimla-ai-start-working, .zimla-ai-start-chats) :is(.zs-flow, .zs-flow-note) { visibility: hidden; }

  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-title { grid-column: 1; }
  .zs-top .zs-flow-sub { display: block; grid-column: 1; margin: 4px 0 0; color: var(--zs-muted); font-size: .86rem; }
  .zs-top .zs-flow-count {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-items: end;
    margin: 0;
    color: var(--zs-ink);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.35;
  }
  .zs-flow-count b { font-weight: 600; }
  .zs-flow-count small { color: var(--zs-muted); font-size: .62rem; }

  .zs-flow { position: relative; display: grid; gap: 4px; margin: 2px calc(50% - 50vw) 0 !important; }

  .zs-flow__track {
    --card: min(72vw, 300px);
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 14px calc(50% - var(--card) / 2) 22px;
  }
  .zs-flow__track::-webkit-scrollbar { display: none; }
  .zs-flow__card {
    --d: 0;
    --ad: 0;
    flex: 0 0 var(--card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 23.5rem;
    padding: 16px;
    scroll-snap-align: center;
    border: 1px solid color-mix(in oklab, var(--zs-ink) 6%, transparent);
    border-radius: 22px;
    background: var(--zs-surface-raised);
    box-shadow: 0 1px 2px rgb(20 35 27 / 6%), 0 22px 40px -26px rgb(20 35 27 / 45%);
    /* Sidokorten vänder innerkanten mot en och står en bit bakom. */
    transform: perspective(1100px) rotateY(calc(var(--d) * 18deg)) scale(calc(1 - var(--ad) * .08));
    opacity: calc(1 - var(--ad) * .2);
    will-change: transform;
  }
  .zs-flow__head { display: grid; gap: 1px; }
  .zs-flow .zs-flow__name { display: block !important; margin: 0; color: var(--zs-ink); font-size: 1.08rem; font-weight: 500; }
  .zs-flow__head span { color: var(--zs-muted); font-size: .78rem; }
  .zs-flow__empty { margin: 4px 0 0; color: var(--zs-muted); font-size: .84rem; line-height: 1.45; }

  .zs-flow__actions { display: flex; gap: 8px; margin-top: auto; }
  .zs-flow__open {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    background: oklch(33% .06 160);
    color: #fff;
    font-size: .84rem;
    text-decoration: none;
  }
  .zs-flow__ghost {
    display: grid;
    place-items: center;
    width: 42px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--zs-accent) 10%, transparent);
    color: var(--zs-accent);
  }

  /* Kalenderns rader. */
  .zs-flow__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .zs-flow__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 7px 10px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--zs-accent) 5%, var(--zs-surface-raised));
    color: var(--zs-ink);
    text-decoration: none;
  }
  .zs-flow__list small { overflow: hidden; color: var(--zs-muted); font-size: .7rem; white-space: nowrap; text-overflow: ellipsis; }
  .zs-flow__when { display: grid; flex: none; width: 3.1rem; }
  .zs-flow__when b { font-size: .84rem; font-weight: 500; }
  .zs-flow__when small { color: var(--zs-muted); font-size: .66rem; }
  .zs-flow__what { display: grid; flex: 1; min-width: 0; }
  .zs-flow__what b { overflow: hidden; font-size: .82rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }

  /* Rubrik med ikonbricka (Genvägar, Dina jobb). */
  .zs-flow__card { height: 26rem; min-height: 0; }
  .zs-flow__head--icon { display: flex; align-items: center; gap: 12px; }
  .zs-flow__head--icon > span:last-child { display: grid; gap: 1px; min-width: 0; }
  .zs-flow__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--zs-accent) 14%, transparent);
    color: var(--zs-accent);
    font-size: 22px;
  }

  /* Genvägar: tre stora rader; i redigeringsläget alla appar att välja bland. */
  .zs-flow__shortcuts { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .zs-flow__shortcuts a {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: color-mix(in oklab, var(--tone) 6%, var(--zs-surface-raised));
    color: var(--zs-ink);
    text-decoration: none;
  }
  .zs-flow__shortcut-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--tone) 15%, transparent);
    color: var(--tone);
    font-size: 21px;
  }
  .zs-flow__shortcut-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
  .zs-flow__shortcut-text b { font-size: .9rem; font-weight: 500; }
  .zs-flow__shortcut-text small { overflow: hidden; color: var(--zs-muted); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
  .zs-flow__shortcut-go { flex: none; color: var(--zs-muted); font-size: 20px; }
  .zs-flow__card--apps.is-edit .zs-flow__shortcuts a { min-height: 52px; padding-block: 6px; }
  .zs-flow__card--apps.is-edit .zs-flow__shortcut-icon { width: 34px; height: 34px; font-size: 18px; }
  .zs-flow__card--apps.is-edit .zs-flow__shortcuts a.is-picked { border-color: color-mix(in oklab, var(--zs-accent) 40%, transparent); }
  .zs-flow__card--apps.is-edit .zs-flow__shortcuts a.is-picked .zs-flow__shortcut-go { color: var(--zs-accent); }
  .zs-flow__card--apps .zs-flow__open { gap: 6px; border: 0; font: inherit; font-size: .84rem; }
  .zs-flow__card--apps .zs-flow__open .material-symbols-outlined { font-size: 18px; }

  /* Dina jobb: kanban – ett tonat block per läge med de första jobben. */
  .zs-flow__kanban { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(#000 88%, transparent); }
  .zs-flow__lane { --lane: var(--zs-accent); flex: none; padding: 8px 10px; border-radius: 14px; background: color-mix(in oklab, var(--lane) 8%, var(--zs-surface-raised)); }
  .zs-flow__lane--underlag { --lane: oklch(70% .13 75); }
  .zs-flow__lane--offert { --lane: oklch(60% .12 250); }
  .zs-flow__lane--godkand { --lane: oklch(58% .12 150); }
  .zs-flow__lane--pagaende { --lane: oklch(55% .1 200); }
  .zs-flow__lane > header { display: flex; align-items: center; gap: 8px; }
  .zs-flow__lane > header .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lane);
    color: #fff;
    font-size: 14px;
  }
  .zs-flow__lane > header b { font-size: .82rem; font-weight: 500; }
  .zs-flow__lane-count { color: var(--zs-muted); font-size: .78rem; }
  .zs-flow__lane.is-empty { padding-block: 6px; background: transparent; border: 1px dashed color-mix(in oklab, var(--zs-ink) 10%, transparent); }
  .zs-flow__lane.is-empty > header .material-symbols-outlined { background: color-mix(in oklab, var(--lane) 35%, transparent); }
  .zs-flow__lane ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
  .zs-flow__lane li a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 8px;
    border-radius: 10px;
    background: var(--zs-surface-raised);
    color: var(--zs-ink);
    font-size: .78rem;
    text-decoration: none;
  }
  .zs-flow__lane li i { flex: none; width: 12px; height: 12px; border: 1.5px solid color-mix(in oklab, var(--lane) 70%, transparent); border-radius: 50%; }
  .zs-flow__lane li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .zs-flow__lane li small { flex: none; max-width: 42%; overflow: hidden; color: var(--zs-muted); font-size: .66rem; white-space: nowrap; text-overflow: ellipsis; }
  .zs-flow__lane-more { display: inline-block; margin: 5px 0 0 4px; color: color-mix(in oklab, var(--lane) 80%, var(--zs-ink)); font-size: .72rem; text-decoration: none; }
  .zs-flow__card--jobs .zs-flow__open { gap: 6px; }
  .zs-flow__card--jobs .zs-flow__open .material-symbols-outlined { font-size: 18px; }

  .zs-flow__dots { display: flex; justify-content: center; gap: 6px; }
  .zs-flow__dots i { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--zs-ink) 18%, transparent); transition: width 160ms ease, background 160ms ease; }
  .zs-flow__dots i.is-current { width: 18px; background: var(--zs-accent); }

  /* Kortet längst ned: tipset, eller Zimlas pratbubbla som pekar på orben. */
  .zs-top .zs-flow-note.zs-flow-note {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 0 !important;
    margin: 6px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in oklab, var(--zs-ink) 7%, transparent);
    border-radius: 16px !important;
    background: var(--zs-surface-raised) !important;
    box-shadow: 0 1px 2px rgb(20 35 27 / 5%), 0 14px 30px -22px rgb(20 35 27 / 40%) !important;
    color: var(--zs-ink);
    font: inherit;
    text-align: left;
  }
  .zs-top .zs-flow-note[hidden] { display: none !important; }
  .zs-flow-note__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--zs-accent) 12%, transparent);
    color: var(--zs-accent);
    font-size: 19px;
  }
  .zs-flow-note__text { display: grid; flex: 1; min-width: 0; gap: 1px; }
  .zs-flow-note__text b { font-size: .84rem; font-weight: 500; }
  .zs-flow-note__text small { overflow: hidden; color: var(--zs-muted); font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
  .zs-flow-note__go { color: var(--zs-accent); font-size: 20px; }
  .zs-flow-note__close { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--zs-muted); }
  .zs-flow-note__close .material-symbols-outlined { font-size: 18px; }
  .zs-top .zs-flow-note.zs-flow-note--resume {
    justify-self: center;
    width: auto;
    max-width: min(84vw, 330px);
    margin-top: 10px;
    padding: 10px 14px 10px 16px;
    border-radius: 18px !important;
  }
  .zs-flow-note--resume::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border-right: 1px solid color-mix(in oklab, var(--zs-ink) 7%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--zs-ink) 7%, transparent);
    border-bottom-right-radius: 3px;
    background: var(--zs-surface-raised);
    transform: translateX(-50%) rotate(45deg);
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .zs-flow__card { transform: scale(calc(1 - var(--ad) * .06)); }
}
@media (max-width: 1023px) {
  .zs-flow__month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 2px;
    color: var(--zs-ink);
    font-size: .74rem;
    text-align: center;
    text-decoration: none;
  }
  .zs-flow__month b { padding-bottom: 2px; color: var(--zs-muted); font-size: .62rem; font-weight: 500; }
  .zs-flow__month span { position: relative; display: grid; place-items: center; justify-self: center; width: 26px; height: 26px; border-radius: 50%; }
  .zs-flow__month .is-off { color: color-mix(in oklab, var(--zs-muted) 55%, transparent); }
  .zs-flow__month .is-today { background: oklch(33% .06 160); color: #fff; }
  .zs-flow__month .has-dot::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--zs-accent); }
  .zs-flow__month .is-today.has-dot::after { background: #fff; }
}

/* ── Karusellen: finish ─────────────────────────────────────────────────
   Vita kort som lyfter från rummet (tydlig skugga, hårlinje), en solid
   ikonbricka, genvägarna fyller kortet i stället för att lämna ett hål, och
   sidokorten står djupare – mindre, dovare – så mittkortet är huvudsaken. */
@media (max-width: 1023px) {
  /* Scrollraden klipper det som sticker ut: ge skuggan plats och ta tillbaka höjden. */
  .zs-flow__track { --card: min(66vw, 290px); gap: 0; padding-block: 16px 56px; margin-bottom: -30px; }
  .zs-flow__dots { position: relative; z-index: 1; }
  .zs-flow__card {
    gap: 12px;
    padding: 18px;
    border: 1px solid rgb(20 35 27 / 6%);
    border-radius: 26px;
    background: #fff;
    box-shadow:
      0 1px 1px rgb(20 35 27 / 4%),
      0 10px 22px -12px rgb(20 35 27 / 18%),
      0 34px 60px -30px rgb(20 35 27 / 38%);
    /* Sidokorten står bakom mittkortet, vinklade med innerkanten mot en (som före tre-korts-bytet). */
    transform: perspective(1100px) translateX(calc(var(--d) * -16%)) rotateY(calc(var(--d) * 24deg)) scale(calc(1 - var(--ad) * .2));
    opacity: calc(1 - var(--ad) * .12);
    filter: saturate(calc(1 - var(--ad) * .2));
    z-index: calc(10 - var(--ad) * 9);
    transition: box-shadow 200ms ease;
  }

  .zs-flow .zs-flow__name { font-size: 1.14rem; letter-spacing: -.015em; }
  .zs-flow__head span:not(.material-symbols-outlined) { font-size: .76rem; }
  .zs-flow__head .zs-flow__badge {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(160deg, oklch(52% .1 160), oklch(38% .07 162));
    box-shadow: 0 6px 14px -8px oklch(38% .07 162 / 70%), inset 0 1px 0 rgb(255 255 255 / 18%);
    color: #fff;
    font-size: 21px;
  }

  /* Genvägarna delar på höjden – inget tomrum ovanför knappen. */
  .zs-flow__card--apps:not(.is-edit) .zs-flow__shortcuts a { flex: 1 1 0; max-height: 92px; }
  .zs-flow__shortcuts a {
    border: 1px solid color-mix(in oklab, var(--tone) 10%, transparent);
    background: linear-gradient(135deg, color-mix(in oklab, var(--tone) 7%, #fff), #fff 80%);
  }
  .zs-flow__shortcut-icon {
    border-radius: 13px;
    background: color-mix(in oklab, var(--tone) 14%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 12%, transparent);
  }
  .zs-flow__shortcut-go {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(20 35 27 / 4%);
    font-size: 18px;
  }

  /* Knapparna: samma mörkgröna, lite mjukare och med ljus kant överst. */
  .zs-flow__open {
    min-height: 46px;
    border-radius: 14px;
    background: linear-gradient(180deg, oklch(37% .065 160), oklch(31% .055 162));
    box-shadow: 0 8px 18px -12px oklch(30% .06 162 / 80%), inset 0 1px 0 rgb(255 255 255 / 12%);
  }
  .zs-flow__ghost { width: 46px; border-radius: 14px; }

  /* Kalendern och jobben: vita rader på tonad yta. */
  .zs-flow__list a { border: 1px solid rgb(20 35 27 / 5%); background: color-mix(in oklab, var(--zs-accent) 4%, #fff); }
  .zs-flow__lane { border: 1px solid color-mix(in oklab, var(--lane) 14%, transparent); }
  .zs-flow__lane li a { border: 1px solid rgb(20 35 27 / 5%); background: #fff; }
  .zs-flow__month .is-today { background: linear-gradient(180deg, oklch(40% .07 160), oklch(31% .055 162)); }

  .zs-flow__dots i { height: 5px; }
  .zs-flow__dots i.is-current { width: 20px; }
}

/* ── Studio på desktop: lätt, med lite val ───────────────────────────────
   Dagen och hälsningen, en bred composer med fyra förslag under, och tre
   kort: Min dag, Senaste projekt, Att göra. Allt annat från Hem (tavlan,
   apparna, samtalen) bor på sina egna sidor. Telefonen berörs inte. */
.zs-desk, .zs-desk-date, .zs-desk-sub { display: none; }
@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) {
    --zs-desk-w: min(860px, calc(100% - 64px));
    --zs-desk-wide: min(1160px, calc(100% - 64px));
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding-top: clamp(2.5rem, 9vh, 6.5rem) !important;
    padding-bottom: 3rem !important;
    height: auto !important;
    min-height: 100% !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) > * { flex-shrink: 0 !important; width: var(--zs-desk-w) !important; max-width: none !important; margin-inline: 0 !important; }
  /* Hälsningen ligger i panelens kropp (display: contents) – den får composerns bredd. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) .zs-top { flex-shrink: 0 !important; width: var(--zs-desk-w) !important; height: auto !important; min-height: 0 !important; }

  /* Hälsningen. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) :is(.zs-daystat, .zs-day, .zs-top .zs-intro .zs-date.zs-date) { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zs-top { padding: 0 22px !important; text-align: left !important; }
  html.zimla-ai-start .zs-desk-date { display: block; margin: 0 0 12px; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--zs-ink) 62%, transparent); }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-top .zs-title { margin: 0 !important; font-size: clamp(3.2rem, 4.6vw, 4.25rem) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -0.04em !important; }
  html.zimla-ai-start .zs-desk-sub { display: block; margin: 14px 0 0; font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.3; color: color-mix(in oklab, var(--zs-ink) 55%, transparent); }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats) .zs-intro .zs-resume.zimla-ai-start-recent { margin-top: 18px; }

  /* Composern. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-composer { margin-top: 30px !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-composer__box {
    min-height: 76px !important;
    padding: 0 14px 0 16px !important;
    border: 1px solid rgb(255 255 255 / 90%) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0px 4px 2px rgb(20 35 27 / 8%), 0 8px 18px -10px rgb(20 35 27 / 18%), 0 30px 60px -28px rgb(20 35 27 / 45%) !important;
  }
  /* Fokus i Hems composer: raden ovan vinner med !important, så ringen måste också ha det. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-composer__box:focus-within {
    border-color: var(--zs-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--zs-accent) 22%, transparent), 0 8px 18px -10px rgb(20 35 27 / 18%), 0 30px 60px -28px rgb(20 35 27 / 45%) !important;
  }

  /* Under composern: förslagen och korten. */
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) > .zs-below { display: block !important; width: var(--zs-desk-wide) !important; margin: 0 !important; padding: 0 !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zs-below > :not(.zs-desk) { display: none !important; }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zs-desk { display: grid; gap: 0; }
  .zs-desk__suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 900px; }
  .zs-desk__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px 0 16px;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 999px;
    background: rgb(255 255 255 / 72%);
    box-shadow: 0 1px 2px rgb(20 35 27 / 5%), 0 10px 22px -18px rgb(20 35 27 / 40%);
    color: var(--zs-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  .zs-desk__chip:hover { background: #fff; transform: translateY(-1px); }
  .zs-desk__chip .material-symbols-outlined { font-size: 18px; color: var(--zs-ink); }

  .zs-desk__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(2rem, 6vh, 3.25rem); }
  .zs-desk__card {
    min-width: 0;
    padding: 22px 24px 20px;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 20px;
    background: rgb(255 255 255 / 80%);
    box-shadow: 0 1px 2px rgb(20 35 27 / 5%), 0 22px 48px -32px rgb(20 35 27 / 45%);
    backdrop-filter: blur(16px) saturate(1.05);
  }
  .zs-desk__card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .zs-desk__card h2 { margin: 0; font-size: 17px; font-weight: 500; color: var(--zs-ink); }
  .zs-desk__card header a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--zs-accent); text-decoration: none; }
  .zs-desk__card header a .material-symbols-outlined { font-size: 17px; }
  .zs-desk__card ol, .zs-desk__card ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .zs-desk__card li > a { display: grid; align-items: center; min-width: 0; border-radius: 12px; color: var(--zs-ink); text-decoration: none; transition: background 140ms ease; }
  .zs-desk__card li > a:hover { background: rgb(20 35 27 / 4%); }
  .zs-desk__card small { display: block; overflow: hidden; margin-top: 2px; font-size: 12.5px; color: var(--zs-muted); white-space: nowrap; text-overflow: ellipsis; }
  .zs-desk__card b { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .zs-desk__empty { padding: 6px 0; font-size: 13.5px; color: var(--zs-muted); }
  .zs-desk__card .zs-desk__empty > a { display: inline; padding: 0; color: var(--zs-accent); }

  .zs-desk__day li > a { grid-template-columns: 3.4rem 14px minmax(0, 1fr); gap: 10px; padding: 8px 6px; }
  .zs-desk__day time { font-size: 14px; color: var(--zs-muted); font-variant-numeric: tabular-nums; }
  .zs-desk__day i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklab, var(--zs-ink) 35%, transparent); }
  .zs-desk__day .is-next i { background: var(--zs-accent); }
  .zs-desk__day span { display: grid; min-width: 0; }

  .zs-desk__projects li > a { grid-template-columns: 48px minmax(0, 1fr) auto 18px; gap: 12px; padding: 6px; }
  .zs-desk__thumb { width: 48px; height: 48px; border-radius: 10px; background: #e8efe9 center / cover no-repeat; }
  .zs-desk__pname { display: grid; min-width: 0; }
  .zs-desk__lane { padding: 4px 12px; border-radius: 999px; background: #e6f2ea; color: #2f6f5c; font-size: 12.5px; font-style: normal; font-weight: 500; white-space: nowrap; }
  .zs-desk__lane--underlag { background: #fbf1e0; color: #8a5d0f; }
  .zs-desk__lane--kalkyl { background: #e8eefb; color: #2f4f9a; }
  .zs-desk__lane--offert { background: #f6efe3; color: #7a5a16; }
  .zs-desk__lane--godkand, .zs-desk__lane--pagaende { background: #e6f2ea; color: #2f6f5c; }
  .zs-desk__projects .material-symbols-outlined { font-size: 18px; color: var(--zs-muted); }

  .zs-desk__todo li > a { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 8px 6px; }
  .zs-desk__todo i { width: 20px; height: 20px; border: 1.5px solid color-mix(in oklab, var(--zs-ink) 30%, transparent); border-radius: 50%; }
  .zs-desk__todo li > a:hover i { border-color: var(--zs-accent); }
  .zs-desk__todo span { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
  .zs-desk__todo span b { font-weight: 500; }

  .zs-desk__quote { margin: clamp(2.5rem, 7vh, 4rem) 0 0; }
  .zs-desk__quote blockquote { margin: 0; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 22px; font-style: italic; line-height: 1.3; color: var(--zs-ink); }
  .zs-desk__quote figcaption { display: inline-block; margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in oklab, var(--zs-ink) 25%, transparent); font-size: 14px; color: var(--zs-ink); }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .zs-desk__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs-desk__cards > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-composer [data-chat-send],
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-composer button[type="submit"] {
    width: 48px !important;
    height: 48px !important;
    background: #0f4a37 !important;
    color: #fff !important;
  }
}
@media (max-width: 1023px) {
  .zs-top :is(.zs-desk-date, .zs-desk-sub) { display: none !important; }
}

@media (min-width: 1024px) {
  /* Min vecka: veckans dagar, idag markerad, prick där något är bokat; händelserna under. */
  .zs-desk__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; margin: -2px 0 12px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in oklab, var(--zs-ink) 8%, transparent); text-align: center; }
  .zs-desk__week b { font-size: 11.5px; font-weight: 500; color: var(--zs-muted); }
  .zs-desk__week a { position: relative; display: grid; place-items: center; justify-self: center; width: 32px; height: 32px; border-radius: 50%; color: var(--zs-ink); font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none; }
  .zs-desk__week a:hover { background: rgb(20 35 27 / 5%); }
  .zs-desk__week a.is-off { color: var(--zs-muted); }
  .zs-desk__week a.is-today { background: #17211a; color: #fff; font-weight: 500; }
  .zs-desk__week a.has-dot::after { content: ""; position: absolute; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--zs-accent); }
  .zs-desk__week a.is-today.has-dot::after { background: #6ee7b7; }

  /* Min vecka: mjuk vit yta, nedsänkt veckoremsa och upphöjda arbetsrader.
     Bara startkortet — chattens kompakta sidopanel behåller sin skala. */
  html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip) :is(.zs-desk__card--week, .zs-desk__card--projects, .zs-desk__card--todo) {
    border-color: rgb(255 255 255 / 94%);
    border-radius: 24px;
    background: #fdfefd;
    box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgb(20 35 27 / 3%), 0 16px 36px -24px rgb(20 35 27 / 28%);
    backdrop-filter: none;
  }
  :is(.zs-desk__card--week, .zs-desk__card--projects, .zs-desk__card--todo) > header { align-items: center; flex-wrap: wrap; row-gap: 4px; }
  :is(.zs-desk__card--week, .zs-desk__card--projects, .zs-desk__card--todo) h2 { font-weight: 400; letter-spacing: -0.025em; }
  :is(.zs-desk__card--week, .zs-desk__card--projects, .zs-desk__card--todo) header a { min-height: 32px; border-radius: 8px; }
  .zs-desk__card--week .zs-desk__week {
    margin: 0 0 14px;
    padding: 9px 5px 7px;
    row-gap: 3px;
    border: 1px solid #e5e9e5;
    border-radius: 18px;
    background: #f5f7f5;
    box-shadow: inset 0 1px 3px rgb(20 35 27 / 4%), 0 1px 0 #fff;
  }
  .zs-desk__card--week .zs-desk__week b { font-weight: 400; font-size: 11px; }
  .zs-desk__card--week .zs-desk__week a { width: min(36px, 100%); height: 36px; border-radius: 12px; }
  .zs-desk__card--week .zs-desk__week a.is-today {
    background: #fdfefd;
    color: var(--zs-accent);
    box-shadow: inset 0 0 0 1px #dce8e0, 0 2px 5px rgb(20 35 27 / 9%);
  }
  .zs-desk__card--week .zs-desk__week a.has-dot::after { bottom: 3px; width: 4px; height: 4px; }
  .zs-desk__card--week .zs-desk__week a.is-today.has-dot::after { background: var(--zs-accent); }
  .zs-desk__card--week .zs-desk__day { gap: 0; }
  .zs-desk__card--week .zs-desk__day li:not(.zs-desk__empty) > a {
    min-height: 52px;
    padding: 8px 10px;
    grid-template-columns: 3rem 6px minmax(0, 1fr);
    gap: 8px;
    border-radius: 12px;
  }
  .zs-desk__card--week .zs-desk__day li > a:hover { background: #f1f5f1; }
  .zs-desk__card--week .zs-desk__day i { width: 5px; height: 5px; }
  .zs-desk__card--week .zs-desk__day b { font-weight: 400; }
  .zs-desk__card--week .zs-desk__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 7px 0 0; line-height: 1.5; }
  .zs-desk__card--week .zs-desk__empty > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #e5e9e5;
    border-radius: 999px;
    background: #fdfefd;
    box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgb(20 35 27 / 5%);
  }
  .zs-desk__card--week .zs-desk__empty .material-symbols-outlined { font-size: 17px; }
  :is(.zs-desk__card--week, .zs-desk__card--projects, .zs-desk__card--todo) a:focus-visible { outline: 2px solid var(--zs-accent); outline-offset: 3px; }

  /* Listorna ligger direkt i kortet: raderna skiljs med hårlinjer, hovring är en mjuk platta (inte kort i kort). */
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) :is(.zs-desk__card--projects .zs-desk__projects, .zs-desk__card--todo .zs-desk__todo) {
    gap: 0;
    padding: 0;
  }
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) :is(.zs-desk__card--projects .zs-desk__projects, .zs-desk__card--todo .zs-desk__todo, .zs-desk__card--week .zs-desk__day) > li + li {
    border-top: 1px solid #edf0ec;
  }
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--projects .zs-desk__projects li:not(.zs-desk__empty) > a {
    grid-template-columns: 38px minmax(0, 1fr) auto 14px;
    gap: 8px;
    min-height: 58px;
    padding: 7px;
    border-radius: 12px;
  }
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--projects .zs-desk__projects li > a:hover { background: #f1f5f1; }
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--projects .zs-desk__thumb { width: 38px; height: 38px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(20 35 27 / 5%); }
  .zs-desk__card--projects .zs-desk__pname b { font-weight: 400; }
  .zs-desk__card--projects .zs-desk__pname small { font-size: 12px; }
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--projects .zs-desk__lane {
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 400;
    background: color-mix(in srgb, currentColor 6%, #fdfefd);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
  }
  .zs-desk__card--projects .zs-desk__projects > .zs-desk__empty { padding: 10px; line-height: 1.5; }

  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--todo .zs-desk__todo li > a {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 12px;
  }
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--todo .zs-desk__todo li > a:hover { background: #f1f5f1; }
  /* Liten listpunkt, inte en checkbox eller en extra knapp. */
  :where(html.zimla-ai-start:not(.zimla-ai-start-chats):not(.zimla-ai-start-strip)) .zs-desk__card--todo .zs-desk__todo i {
    display: block;
    justify-self: center;
    width: 5px;
    height: 5px;
    border: 0;
    border-radius: 50%;
    background: var(--zs-accent);
    opacity: 0.65;
  }
  .zs-desk__card--todo .zs-desk__todo span b { font-weight: 400; }
  .zs-desk__card--todo .zs-desk__todo > .zs-desk__empty { padding: 10px; line-height: 1.5; }

}

/* ── Karusellens kort i projektkortens formspråk ─────────────────────────
   Överst en tonad yta (som projektbilden) med en vit etikett och en stor,
   blek ikon; under den rubrik och en dämpad rad, jämna ljusgröna rutor och
   en mörkgrön knapp med pil. Samma känsla i alla tre korten. */
@media (max-width: 1023px) {
  .zs-flow .zs-flow__card { gap: 0; padding: 0; overflow: hidden; border-radius: 22px; background: #fff; }
  .zs-flow__band {
    position: relative;
    flex: none;
    height: 76px;
    overflow: hidden;
    background:
      radial-gradient(circle at 85% 120%, oklch(84% .06 155 / 70%), transparent 55%),
      linear-gradient(135deg, oklch(96% .018 150), oklch(90% .04 155));
  }
  .zs-flow__band-icon {
    position: absolute;
    right: 12px;
    bottom: -14px;
    color: oklch(48% .07 160 / 22%);
    font-size: 88px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
  }
  .zs-flow__chip {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 1px 2px rgb(20 35 27 / 8%);
    color: var(--zs-ink);
    font-size: 12px;
  }
  .zs-flow__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f6f5c; }
  .zs-flow__body { display: flex; flex: 1; flex-direction: column; gap: 9px; min-height: 0; padding: 12px 14px 14px; }
  .zs-flow .zs-flow__name { font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; }
  .zs-flow__head span:not(.material-symbols-outlined) { font-size: .78rem; color: var(--zs-muted); }

  /* Jämna ljusgröna rutor (som projektkortets Kalkyl/Offert/Nästa/Rum). */
  .zs-flow__card { --zs-tile: color-mix(in oklab, #2f6f5c 7%, #fff); }
  .zs-flow__shortcuts { gap: 7px; }
  .zs-flow__shortcuts a { min-height: 54px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--zs-tile); }
  .zs-flow__card--apps:not(.is-edit) .zs-flow__shortcuts a { max-height: 72px; }
  .zs-flow__shortcut-icon { width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: none; color: #2f6f5c; font-size: 19px; }
  .zs-flow__shortcut-text b { font-size: .84rem; }
  .zs-flow__shortcut-text small { font-size: .7rem; }
  .zs-flow__shortcut-go { width: auto; height: auto; background: transparent; color: var(--zs-muted); font-size: 20px; }
  .zs-flow__card--apps.is-edit .zs-flow__shortcuts a.is-picked { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, #2f6f5c 45%, transparent); }

  .zs-flow__list a { min-height: 42px; border: 0; border-radius: 12px; background: var(--zs-tile); }
  .zs-flow__month { row-gap: 0; }
  .zs-flow__month span { width: 24px; height: 24px; font-size: .7rem; }

  .zs-flow__lane { padding: 8px 9px; border: 0; border-radius: 12px; background: var(--zs-tile); }
  .zs-flow__lane.is-empty { padding-block: 7px; border: 0; background: color-mix(in oklab, #2f6f5c 4%, #fff); }
  .zs-flow__lane > header .material-symbols-outlined { width: 20px; height: 20px; font-size: 13px; }
  .zs-flow__lane li a { border: 0; border-radius: 9px; background: #fff; }

  /* Knappen: projektkortets mörkgröna "Öppna projekt →". */
  .zs-flow .zs-flow__open { gap: 6px; min-height: 44px; border-radius: 12px; background: oklch(33% .06 160); box-shadow: none; font-size: .84rem; }
  .zs-flow .zs-flow__open .material-symbols-outlined { font-size: 18px; }
  .zs-flow .zs-flow__ghost { width: 44px; border-radius: 12px; background: var(--zs-tile); }
}

/* ── Karusellen följer skärmhöjden ──────────────────────────────────────
   Hälsningen, prickarna, tipset och docken har fast höjd; kortet får resten,
   så tipset alltid ligger kvar ovanför docken och sidan aldrig scrollar.
   Låga kort (liten telefon) blir kompakta i stället för att klippas. */
@media (max-width: 1023px) {
  /* ponytail: 404px = allt utom kortet, uppmätt på 375 px bredd (utan svepraden, 2026-09-27); mät om om hälsningen/tipset/docken ändrar höjd */
  .zs-flow__card { height: clamp(16.5rem, calc(100svh - 404px), 26rem); container-type: size; }
}
@media (max-width: 1023px) and (max-height: 720px) {
  .zs-flow__card { height: clamp(16rem, calc(100svh - 404px), 26rem); }
}
@container (max-height: 330px) {
  .zs-flow__band { height: 46px; }
  .zs-flow__band-icon { bottom: -10px; font-size: 60px; }
  .zs-flow__chip { top: 9px; }
  .zs-flow__body { gap: 7px; padding: 10px 12px 12px; }
  .zs-flow__head:not(.zs-flow__head--icon) > span:not(.material-symbols-outlined),
  .zs-flow__head--icon > span > span,
  .zs-flow__shortcut-text small,
  .zs-flow__card--cal .zs-flow__list { display: none; }
  .zs-flow__shortcuts { gap: 6px; }
  .zs-flow__shortcuts a { min-height: 0; padding-block: 4px; }
  .zs-flow__shortcut-icon { width: 28px; height: 28px; font-size: 17px; }
  .zs-flow__month span { width: 21px; height: 21px; }
  .zs-flow .zs-flow__open, .zs-flow .zs-flow__ghost { min-height: 38px; }
}

/* Samtalets projekt i huvudets metarad: länken tillbaka till projektet (grön, mappikon, ›). Långa namn kortas,
   tiden syns alltid; träffytan växer till 44 px utan att raden blir högre. */
[data-zimla-ai-thread-meta] { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; white-space: nowrap; }
.zimla-ai-thread-project { position: relative; display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: #1f6b52; text-decoration: none; }
.zimla-ai-thread-project::after { content: ""; position: absolute; inset: -14px -6px; }
.zimla-ai-thread-project .material-symbols-outlined { font-size: 14px; }
.zimla-ai-thread-project__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zimla-ai-thread-project:hover .zimla-ai-thread-project__name, .zimla-ai-thread-project:focus-visible .zimla-ai-thread-project__name { text-decoration: underline; text-underline-offset: .2em; }
.zimla-ai-thread-project:focus-visible { outline: 2px solid #087c60; outline-offset: 2px; border-radius: 4px; }
/* Studios metarad färgar alla span grått; projektlänken behåller sin gröna ton. */
html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-start-thread .zimla-ai-thread-project,
html.zimla-ai-start.zimla-ai-start-chats:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) .zimla-ai-start-thread .zimla-ai-thread-project span,
html .zimla-ai-start-thread .zimla-ai-thread-project span { color: #1f6b52; }

/* Railen glider inte längre ut vid hover (prototyp 8bay): etiketterna står alltid under ikonerna – zimla-areas.css. */

/* Menyn och notiserna står alltid överst: Studios chattyta, panelen och korten ligger på
   z-index kring 2147483000. Menyn får ett lager över dem; topbaren (där notisrutan bor och
   som annars klipper den under sig) lyfts bara medan notisrutan är öppen, så den aldrig
   täcker chattytans överkant. Dialoger (showModal) ligger i toppskiktet och påverkas inte. */
:root { --zimla-z-top: 2147483200; }
@media (min-width: 1024px) {
  .zimla-desktop-sidebar { z-index: var(--zimla-z-top) !important; }
}
:is(.zimla-global-topbar, .zimla-app-topbar, header):has(.zimla-topbar-icon--notify.is-open) { z-index: var(--zimla-z-top) !important; }
.zimla-notification-popover { z-index: var(--zimla-z-top) !important; }

/* Tangentbordsfokus på Hem: samma ring som korten (.zs-desk__card a) på allt som bara hade hovring. */
:is(.zs-desk__chip, .zs-resume, .zs-start__way, .zs-chats, .zs-rail__item, .zs-rail__new, .zs-rail__menu-list button, .zs-strip button,
  .zimla-sidebar-me__menu :is(a, button), .zimla-ai-start-intent, .zimla-ai-start-recent, .zimla-ai-thread-intent, .zimla-ai-workspace-ref,
  .zimla-ai-workplace__value, .zimla-ai-workplace__entity, .zimla-studio-next):focus-visible {
  outline: 2px solid var(--zs-accent) !important;
  outline-offset: 2px;
}
/* "⋯" i chattlistan syns även på pekskärmar (iPad) och när raden har fokus – inte bara vid hovring. */
@media (hover: none) { .zs-rail__menu > summary { opacity: 1; } }
.zs-rail__row:focus-within .zs-rail__menu > summary { opacity: 1; }

/* Reducerad rörelse, en gång för hela appen: rörelser blir omedelbara. 1 ms (inte 0) så att
   transitionend/animationend fortfarande kommer – app-shell-navigation.js och mobilkalkylen väntar på dem. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
.zs-save-error { margin: 6px 0 0; color: #b42318; font-size: 12.5px; }
/* Karusellens prickar är knappar (alternativ till svepet): samma prickar, större träffyta. */
.zs-flow__dots { gap: 0 !important; }
.zs-flow__dots button { display: grid; place-items: center; min-width: 44px; height: 44px; margin-block: -14px; padding: 0 4px; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.zs-flow__dots button:focus-visible { outline: 2px solid var(--zs-accent); outline-offset: -4px; border-radius: 999px; }

/* Granskning (Web Interface Guidelines): siffror som står stilla, scroll som stannar i sin yta,
   rubriker utan ensamma ord och långa namn som bryts i stället för att flöda över. */
.zs-cal__week span, .zs-flow__month, .zs-board__sum span b { font-variant-numeric: tabular-nums; }
.zs-rail, .zs-board.is-open .zs-lane__body { overscroll-behavior: contain; }
.zs-title { text-wrap: balance; }
.zs-desk-sub { text-wrap: pretty; }
.zs-today b, .zs-recent__row b, .zs-job b { overflow-wrap: anywhere; }
/* Förslagschippen på smal desktop (1024–1279 px): tätare så att alla fyra ryms på en rad, aldrig 3 + 1.
   Räcker det ändå inte scrollar raden i sidled (reserv) – padding-block så att skugga och hover-lyft inte klipps. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .zs-desk__suggest { flex-wrap: nowrap; justify-content: safe center; gap: 6px; margin: 12px auto -6px; padding-block: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .zs-desk__suggest::-webkit-scrollbar { display: none; }
  .zs-desk__chip { flex: none; gap: 6px; padding: 0 8px 0 13px; font-size: 13px; scroll-snap-align: start; }
}
@media (pointer: coarse) { .zs-desk__chip { min-height: 44px; } }

/* Mobilstart: röst, manuell rumsskapning och senaste riktiga projekt. */
.zs-mobile-home, .zs-mobile-account, .zs-title__mobile { display: none; }
@media (max-width: 1023px) {
  html.zimla-ai-start { background: #f2f5ef; }
  html.zimla-ai-start .zimla-scene { background: #f2f5ef !important; }
  html.zimla-ai-start .zimla-scene > * { display: none !important; }
  html.zimla-ai-start .zimla-global-topbar { background: #f2f5ef !important; }
  html.zimla-ai-start .zimla-global-topbar__mobile-row { height: 52px; padding-inline: 16px; }
  html.zimla-ai-start .zimla-global-topbar__mobile-row > .absolute {
    left: 16px; transform: translateY(-50%) scale(.58); transform-origin: left center;
  }
  html.zimla-ai-start .zimla-global-topbar__menu-button,
  html.zimla-ai-start .zimla-global-topbar__mobile-actions > :not(.zs-mobile-account) { display: none; }
  html.zimla-ai-start .zs-mobile-account {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 7px;
    border: 7px solid #f2f5ef; border-radius: 50%; background: #24684e;
    color: #fff; font-size: .65rem; font-weight: 500; cursor: pointer;
  }
  html.zimla-ai-start .zs-mobile-account:focus-visible { outline: 2px solid #087858; outline-offset: 1px; }

  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell {
    top: 52px !important; bottom: 0 !important; overscroll-behavior-y: contain;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel-shell .zimla-ai-panel {
    justify-content: flex-start !important; padding: 0 0 calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__body {
    width: 100% !important; max-width: 30rem !important; padding: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-chat__intro {
    margin: 0 !important; padding: 0 !important; text-align: left !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top {
    display: block !important; width: 100%; min-height: 0 !important;
    margin: 0; padding: 12px 16px 0 !important; text-align: left;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-intro {
    display: block !important; margin: 0 0 18px; padding: 0 !important;
  }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-title {
    margin: 0; font-size: 1.8rem !important; font-weight: 500 !important;
    line-height: 1.15; letter-spacing: -.035em; text-align: left; overflow-wrap: anywhere;
  }
  .zs-title__desktop { display: none; }
  .zs-title__mobile { display: inline; }
  .zs-top .zs-flow-sub { margin-top: 5px; color: #69776e; font-size: .88rem; }
  html.zimla-ai-start .zs-top :is(.zs-flow, .zs-flow-note, .zs-flow-count, .zs-day, .zs-daystat, .zs-date) { display: none !important; }
  .zs-mobile-home { display: grid; gap: 14px; min-width: 0; }
  .zs-mobile-voice {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 16px 18px; border-radius: 22px; background: #205b45;
    box-shadow: 0 12px 26px -18px rgb(21 61 43 / 55%); color: #f8fcf8; text-align: center;
  }
  .zs-mobile-voice h2 { margin: 0; color: inherit; font-size: 1.12rem; font-weight: 500; letter-spacing: -.015em; }
  .zs-mobile-voice > p { max-width: 30ch; margin: 0; color: #dcece1; font-size: .83rem; line-height: 1.5; text-wrap: pretty; }
  .zs-mobile-voice__button {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    width: 100%; min-height: 168px; padding: 20px 0 0; border: 0; border-radius: 16px;
    background: transparent; color: inherit; font: inherit; cursor: pointer;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .zs-mobile-voice__button:focus-visible { outline: 2px solid #e8f7ed; outline-offset: 4px; }
  .zs-mobile-voice__face { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; }
  .zs-mobile-voice__face .zimla-dock-orb {
    width: 96px; height: 96px; outline: 2px solid #bbd9c8;
    background: #087858; box-shadow: 0 0 0 7px rgb(229 247 236 / 7%), 0 8px 18px rgb(7 45 30 / 18%);
  }
  .zs-mobile-voice__face .zimla-dock-orb__gaze { width: auto; height: auto; }
  .zs-mobile-voice__face .zimla-dock-orb__eyes { gap: .65rem; }
  .zs-mobile-voice__face .zimla-dock-orb__eye { width: .84rem; height: 1.6rem; }
  .zs-mobile-voice__label { font-size: .88rem; font-weight: 500; line-height: 1.35; }
  .zs-mobile-voice__status { max-width: 29ch; margin-top: -12px; color: #dfefe5; font-size: .75rem; line-height: 1.4; }
  .zs-mobile-voice__status:empty { display: none; }
  .zs-mobile-voice__button:is(.is-voice-pressing, .is-voice-active) .zimla-dock-orb {
    background: #07956b; outline-color: #ecfff3; transform: scale(.96);
  }
  .zs-mobile-voice__button.is-voice-failed .zs-mobile-voice__status { color: #ffe0c9; }
  .zs-mobile-voice__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
  .zs-mobile-voice__steps li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: rgb(232 250 239 / 12%); font-size: .65rem; line-height: 1.25; }
  .zs-mobile-voice__steps li > span { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #eef9f1; color: #205b45; font-size: .58rem; }
  .zs-mobile-manual, .zs-mobile-resume.zimla-ai-start-recent {
    display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%;
    min-height: 64px; margin: 0; padding: 10px 12px; border: 1px solid rgb(36 75 49 / 5%);
    border-radius: 16px; background: #fff; box-shadow: none; color: #243c2e; font: inherit; text-align: left; text-decoration: none;
  }
  .zs-mobile-manual > span:nth-child(2), .zs-mobile-resume > span:nth-child(2) { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .zs-mobile-manual strong, .zs-mobile-resume > span:nth-child(2) { font-size: .85rem; font-weight: 500; }
  .zs-mobile-manual small, .zs-mobile-resume small { color: #718076; font-size: .7rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
  .zs-mobile-manual .zs-mobile-manual__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #edf5ef; color: #397b5e; font-size: 21px; }
  .zs-mobile-manual > .material-symbols-outlined:last-child, .zs-mobile-resume > .material-symbols-outlined { color: #8d9c90; font-size: 18px; }
  .zs-mobile-resume.zimla-ai-start-recent { min-height: 48px; background: transparent; }
  .zs-mobile-manual:focus-visible, .zs-mobile-project:focus-visible, .zs-mobile-resume:focus-visible { outline: 2px solid #087858; outline-offset: 3px; }
  .zs-mobile-projects { min-width: 0; }
  .zs-mobile-projects > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
  .zs-mobile-projects h2 { margin: 0; color: #728274; font-size: .63rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .zs-mobile-projects > header > a { display: inline-flex; align-items: center; min-height: 44px; color: #476957; font-size: .7rem; text-decoration: none; }
  .zs-mobile-projects ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .zs-mobile-project {
    display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 10px;
    border-radius: 14px; background: #fff; color: #273d2e; text-decoration: none;
  }
  .zs-mobile-project__image { display: grid; flex: none; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: #eff4ed; color: #73907b; }
  .zs-mobile-project__image img { width: 100%; height: 100%; object-fit: cover; }
  .zs-mobile-project__image .material-symbols-outlined { font-size: 20px; }
  .zs-mobile-project__name { display: grid; flex: 1; gap: 3px; min-width: 0; }
  .zs-mobile-project__name strong { overflow: hidden; font-size: .82rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .zs-mobile-project__name small { overflow: hidden; color: #778578; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .zs-mobile-project__meta { display: grid; flex: none; gap: 3px; max-width: 42%; font-size: .74rem; text-align: right; overflow-wrap: anywhere; }
  .zs-mobile-project__meta small { color: #778578; font-size: .63rem; }
  .zs-mobile-projects__empty { margin: 0; padding: 12px 0; color: #69776e; font-size: .82rem; line-height: 1.5; }
  html.zimla-ai-start [data-zimla-mobile-dock] { padding: 12px 0 env(safe-area-inset-bottom, 0px); background: #fdfefc; }
  html.zimla-ai-start [data-zimla-mobile-dock] > .pointer-events-auto { max-width: 30rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  @media (prefers-reduced-motion: reduce) {
    .zs-mobile-voice__face .zimla-dock-orb { transition: none; }
  }
}

/* Röststyrt projektarbete på telefon. Projektets riktiga vy förblir HTMX-målet. */
.zs-session, .zs-session[hidden] { display: none; }
@media (max-width: 1023px) {
  html.zs-voice-session { overflow: hidden; --zs-session-header: calc(52px + env(safe-area-inset-top, 0px)); }
  html.zs-voice-session body { overflow: hidden; }
  html.zs-voice-session .zs-session:not([hidden]) { display: contents; color: #243c2e; }
  .zs-session__backdrop { position: fixed; inset: 0; z-index: 60; background: #f2f5ef; }
  .zs-session__head {
    position: fixed; inset: 0 0 auto; z-index: 64; display: flex; align-items: center; gap: 8px;
    min-height: var(--zs-session-header); padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 4px;
    border-bottom: 1px solid #e1e8de; background: #f2f5ef;
  }
  .zs-session__head > span { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .zs-session__head strong { overflow: hidden; font-size: .88rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .zs-session__head small { overflow: hidden; color: #6c7c70; font-size: .67rem; white-space: nowrap; text-overflow: ellipsis; }
  .zs-session__head button { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
  .zs-session__head button .material-symbols-outlined { font-size: 20px; }
  html.zs-voice-session :is([data-zimla-global-topbar], [data-zimla-mobile-dock], [data-zimla-ai-floating-widget], [data-zimla-dock-composer], .zimla-ai-thread-pill) { display: none !important; }
  html.zs-voice-session [data-zimla-ai-panel-shell],
  html.zs-voice-session [data-zimla-ai-peek] { opacity: 0 !important; pointer-events: none !important; z-index: 0 !important; }
  html.zs-voice-session #zimla-page-content { visibility: hidden; }
  html.zs-voice-session.zs-session-project #zimla-page-content {
    position: fixed !important; z-index: 62; inset: var(--zs-session-header) 0 calc(var(--zs-session-footer, 180px) + var(--zs-session-keyboard, 0px)) !important;
    display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; margin: 0 !important; padding: 0 !important;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; visibility: visible;
    background: #f2f5ef; scroll-padding-block: 12px;
  }
  html.zs-session-project :is(.project-shell, .project-frame) { min-height: 0 !important; padding-bottom: 16px !important; }
  html.zs-session-project .phead { top: 0; margin-top: 0; }
  html.zs-session-project .phead-back { display: none; }
  html.zs-voice-session:has([data-zs-session][data-voice-state="connecting"]) #zimla-page-content,
  html.zs-voice-session:has([data-zs-session][data-voice-state="listening"]) #zimla-page-content { pointer-events: none; }
  /* Innan projektet finns ser sessionen ut som ett tomt projekt: eget mobilhuvud (sessionens huvud göms), bara dockan
     i foten tills man pratar eller skickar något (då syns texten och läget igen). */
  .zs-session__empty {
    position: fixed; z-index: 62; inset: 0 0 calc(var(--zs-session-footer, 180px) + var(--zs-session-keyboard, 0px));
    display: block; padding: 0 0 16px; overflow-y: auto; overscroll-behavior: contain; background: #f4f5f1;
  }
  .zs-session__empty[hidden] { display: none; }
  .zs-session:has(> .zs-session__empty:not([hidden])) .zs-session__head { display: none; }
  .zs-session__empty .mhead { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .zs-session__empty .mseg button:disabled { opacity: 1; }
  .zs-session__start { margin: 0; }
  .zs-session__add { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 32px); min-height: 48px; margin: 12px 16px 0; border: 1.2px dashed #b9c9bf; border-radius: 18px; background: transparent; font: inherit; font-size: 15.5px; font-weight: 600; color: #047857; }
  .zs-session:has(> .zs-session__empty:not([hidden])):not([data-sending]):is(:not([data-voice-state]), [data-voice-state="idle"], [data-voice-state="error"]):not(:has(:is([data-zs-session-transcript], [data-zs-session-reply]):not([hidden]))) .zs-session__feedback { display: none; }
  /* "Prata med Zimla" när rösten inte fungerar: projektets blad (msheet/mtalk i zimla-project.css) över sessionen. */
  .zs-talk__warn { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fcf1e1; color: #8a5a12; font-size: 13.5px; line-height: 1.45; }
  html.zs-session-project .zs-talk__start, html:not(.zs-session-project) .zs-talk__project { display: none; }
  .zs-session[data-sending] .zs-talk :is(.mtalk-ex button, .mtalk-write) { opacity: .55; pointer-events: none; }
  .zs-session .zs-talk .mtalk-write { margin: 0; align-items: stretch; }
  .zs-session .zs-talk .mtalk-write button { width: auto; height: auto; padding: 0 18px; border-radius: 14px; }
  .zs-session__foot { display: flex; flex-direction: column; max-height: calc(var(--zs-session-visible-height, 100dvh) - var(--zs-session-header) - 48px); position: fixed; inset: auto 0 var(--zs-session-keyboard, 0px); z-index: 64; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fdfefc; border-top: 1px solid #e1e8de; }
  .zs-session__feedback { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 4px; }
  .zs-session__feedback > p { max-height: 100px; margin: 0 0 8px; overflow-y: auto; overscroll-behavior: contain; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .zs-session__feedback > p[hidden], .zs-session [data-zs-session-form][hidden], .zs-session button[hidden] { display: none; }
  .zs-session__feedback [data-zs-session-reply] { max-height: 72px; color: #44644e; }
  .zs-session__transcript { color: #233c2e; }
  .zs-session__transcript [data-zs-session-provisional] { color: #77877b; }
  .zs-session__status { display: flex; align-items: center; gap: 8px; min-height: 22px; color: #617868; font-size: .71rem; line-height: 1.4; }
  .zs-session__status > span:first-child { flex: 1; }
  .zs-session__status > span:nth-child(2) { font-variant-numeric: tabular-nums; }
  .zs-session__status button { min-height: 44px; padding: 4px 8px; border: 0; background: transparent; color: #8a4837; font: inherit; }
  .zs-session[data-voice-state="error"] .zs-session__status { color: #934b31; }
  .zs-session__write { display: block; min-height: 44px; margin: 0 auto; padding: 4px 12px; border: 0; background: transparent; color: #326c51; font-size: .73rem; }
  .zs-session [data-zs-session-form] { display: flex; gap: 8px; align-items: end; margin-top: 10px; }
  .zs-session textarea { flex: 1; min-width: 0; max-height: 112px; padding: 10px 12px; border: 1px solid #dce5d9; border-radius: 14px; background: #f4f7f1; color: #233c2e; font: inherit; font-size: 16px; resize: none; }
  .zs-session [data-zs-session-form] button { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #087858; color: #fff; }
  .zs-session [data-zs-session-form] button:disabled { opacity: .45; }
  .zs-session__nav { flex: none; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; max-width: 30rem; margin: 0 auto; padding: 4px 10px 6px; }
  .zs-session__nav > a, .zs-session__orb { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; color: #728173; font: inherit; font-size: .64rem; text-decoration: none; cursor: pointer; }
  .zs-session__nav > a[aria-current="page"] { color: #087858; }
  .zs-session__nav > a[aria-disabled="true"] { opacity: .4; cursor: default; }
  .zs-session__nav > a[aria-disabled="true"][aria-current="page"] { opacity: 1; }
  .zs-session__nav > a .material-symbols-outlined { font-size: 21px; }
  .zs-session__nav .zs-session__orb { gap: 7px; padding-top: 0; color: #087858; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  .zs-session__orb-wave { position: relative; display: grid; place-items: center; width: 58px; height: 58px; }
  .zs-session__orb .zimla-dock-orb { z-index: 1; width: 52px; height: 52px; outline: 0; box-shadow: 0 4px 14px rgb(8 120 88 / 18%); transform: scale(calc(1 + var(--zs-voice-level, 0) * .09)); }
  .zs-session__orb-wave > .zimla-voice-wave { position: absolute; inset: -18px; width: auto; height: auto; pointer-events: none; }
  .zs-session__orb-wave .zimla-voice-wave canvas { width: 100%; height: 100%; }
  .zs-session :is(button, a, textarea):focus-visible { outline: 2px solid #087858; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .zs-session__orb .zimla-dock-orb { transform: none; transition: none; }
  }
}
/* M1 Start som prototypen (mått avlästa ur referens/Zimla Mobil.dc.html): Inter, 20 px sidmarginal, 22 px mellan sektionerna. */
.zs-mobile-brand { display: none; }
@media (max-width: 1023px) {
  /* Mobilens formspråk: Hem är facit för alla inloggade mobilsidor (docs/mobil-loop.md, "Mobilens formspråk"). Filen laddas
     på alla sidor – andra ytor läser variablerna i stället för egna värden. */
  :root {
    --zm-bg: #f4f5f1;
    --zm-gutter: 20px;
    --zm-gap: 22px;
    --zm-list-gap: 10px;
    --zm-ink: #1d2420;
    --zm-ink-2: #4e5751;
    --zm-muted: #6b736e;
    --zm-faint: #9aa29d;
    --zm-green: #1f6b4f;
    --zm-green-soft: #e9f2ec;
    --zm-hero: #1f5c45;
    --zm-hero-shadow: 0 16px 36px rgba(31, 92, 69, 0.3);
    --zm-hero-radius: 28px;
    --zm-title-font: 400 30px/1.1 Outfit, Inter, ui-sans-serif, system-ui, sans-serif;  /* som startsidans rubrik */
    --zm-title-tracking: -0.025em;
    --zm-sub-size: 16.5px;
    --zm-label-size: 11.5px;
    --zm-label-tracking: 0.08em;
    --zm-card: #fff;
    --zm-card-radius: 18px;
    --zm-card-shadow: 0 1px 2px rgba(20, 30, 25, 0.05);
    --zm-row-min: 65px;
    --zm-icon: 37px;
    --zm-icon-radius: 14px;
    --zm-thumb: 45px;
    --zm-thumb-radius: 12px;
    --zm-thumb-bg: #e6ebe5;
    --zm-line: #e3e6e1;
    --zm-primary-h: 44px;
    --zm-primary-radius: 12px;
  }
  html.zimla-ai-start, html.zimla-ai-start .zimla-scene, html.zimla-ai-start .zimla-global-topbar { background: var(--zm-bg) !important; }
  /* D2: samma släta bakgrund på alla inloggade mobilsidor – inget rumsfoto (ägaren 2026-10-10). Felsidorna behåller
     rummet. content: none (inte opacity) så att väggbilden inte hämtas. */
  html.zimla-room:not(:has(.err-page)), html.zimla-room:not(:has(.err-page)) body,
  html.zimla-room:not(:has(.err-page)) .zimla-scene, html.zimla-room:not(:has(.err-page)) .zimla-global-topbar { background: var(--zm-bg) !important; transition: none; }
  html.zimla-room:not(:has(.err-page)) .zimla-scene > * { display: none !important; }
  html.zimla-room:not(:has(.err-page)) .zimla-scene::after { content: none; }
  html.zimla-ai-start .zimla-global-topbar__mobile-row > .absolute { display: none; }
  html.zimla-ai-start .zs-mobile-brand { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--zm-ink); text-decoration: none; }
  .zs-mobile-brand__dots { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px; }
  .zs-mobile-brand__dots i { width: 9px; height: 9px; border-radius: 999px; background: #1d2420; }
  .zs-mobile-brand__dots i:nth-child(2), .zs-mobile-brand__dots i:nth-child(4) { background: #22c55e; }
  html.zimla-ai-start .zimla-global-topbar__mobile-row { height: 56px; padding-inline: var(--zm-gutter); }
  html.zimla-ai-start .zs-mobile-account { width: 32px; height: 32px; padding: 0; border: 0; background: var(--zm-green); font-size: 13px; font-weight: 600; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top { padding: 12px var(--zm-gutter) 0 !important; }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-intro { margin-bottom: var(--zm-gap); }
  html.zimla-ai-start:not(.zimla-ai-start-workplace) .zs-top .zs-title { font-size: 31px !important; font-weight: 700 !important; letter-spacing: var(--zm-title-tracking); line-height: 1.1; color: var(--zm-ink); }
  html.zimla-ai-start .zs-top .zs-flow-sub { margin-top: 6px; font-size: var(--zm-sub-size); color: var(--zm-ink-2); }
  html.zimla-ai-start .zs-mobile-home { gap: var(--zm-gap); }
  html.zimla-ai-start .zs-mobile-voice { gap: 12px; padding: 22px 20px 20px; border-radius: var(--zm-hero-radius); background: var(--zm-hero); box-shadow: var(--zm-hero-shadow); color: #fff; }
  html.zimla-ai-start .zs-mobile-voice h2 { display: block !important; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #fff; }
  html.zimla-ai-start .zs-mobile-voice > p { max-width: 32ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
  html.zimla-ai-start .zs-mobile-voice__button { gap: 16px; min-height: 0; padding: 6px 0 0; }
  html.zimla-ai-start .zs-mobile-voice__face { width: 130px; height: 130px; border-radius: 999px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 60%, transparent 61%); }
  html.zimla-ai-start .zs-mobile-voice__face .zimla-dock-orb { width: 98px; height: 98px; outline: 0; background: #067a58; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.9); }
  html.zimla-ai-start .zs-mobile-voice__face .zimla-dock-orb__eyes { gap: .75rem; }
  html.zimla-ai-start .zs-mobile-voice__face .zimla-dock-orb__eye { width: 1rem; height: 2rem; }
  html.zimla-ai-start .zs-mobile-voice__label { font-size: 17px; font-weight: 700; color: #fff; }
  html.zimla-ai-start .zs-mobile-voice__steps { gap: 6px; }
  html.zimla-ai-start .zs-mobile-voice__steps li { gap: 6px; padding: 6px 11px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 13px; font-weight: 600; color: #fff; }
  html.zimla-ai-start .zs-mobile-voice__steps li > span { width: 17px; height: 17px; background: #fff; color: var(--zm-hero); font-size: 11px; font-weight: 600; }
  html.zimla-ai-start .zs-mobile-manual-form { margin: 0; }
  html.zimla-ai-start .zs-mobile-manual { gap: 14px; min-height: 60px; padding: 14px 14px 14px 16px; border: 0; border-radius: var(--zm-card-radius); background: var(--zm-card); box-shadow: var(--zm-card-shadow); cursor: pointer; }
  html.zimla-ai-start .zs-mobile-manual .zs-mobile-manual__icon { width: var(--zm-icon); height: var(--zm-icon); border-radius: var(--zm-icon-radius); background: var(--zm-green-soft); color: var(--zm-green); font-size: 20px; }
  html.zimla-ai-start .zs-mobile-manual strong { font-size: 16px; font-weight: 600; color: var(--zm-ink); }
  html.zimla-ai-start .zs-mobile-manual small { font-size: 13px; color: var(--zm-muted); }
  html.zimla-ai-start .zs-mobile-resume.zimla-ai-start-recent { min-height: 52px; border: 0; border-radius: var(--zm-card-radius); background: rgba(255, 255, 255, 0.6); }
  html.zimla-ai-start .zs-mobile-projects > header { min-height: 0; margin-bottom: 10px; }
  html.zimla-ai-start .zs-mobile-projects h2 { display: block !important; font-size: var(--zm-label-size); font-weight: 600; letter-spacing: var(--zm-label-tracking); color: var(--zm-muted); }
  html.zimla-ai-start .zs-mobile-projects > header > a { display: none; }
  html.zimla-ai-start .zs-mobile-projects ul { gap: var(--zm-list-gap); }
  html.zimla-ai-start .zs-mobile-project { gap: 12px; min-height: var(--zm-row-min); padding: 12px; border-radius: var(--zm-card-radius); background: var(--zm-card); box-shadow: var(--zm-card-shadow); color: var(--zm-ink); }
  html.zimla-ai-start .zs-mobile-project::after { content: "chevron_right"; font-family: "Material Symbols Outlined"; font-size: 18px; color: var(--zm-faint); }
  html.zimla-ai-start .zs-mobile-project__image { width: var(--zm-thumb); height: var(--zm-thumb); border-radius: var(--zm-thumb-radius); background: var(--zm-thumb-bg); }
  html.zimla-ai-start .zs-mobile-project__name strong { font-size: 16px; font-weight: 600; }
  html.zimla-ai-start .zs-mobile-project__name small { font-size: 13px; color: var(--zm-muted); }
  html.zimla-ai-start .zs-mobile-project__meta span { font-size: 15px; font-weight: 600; color: var(--zm-ink); }
}
/* Platta (768–1023 px): starten tar bredden som övriga sidor – rösten till vänster, rum/samtal/projekt till höger. */
@media (min-width: 768px) and (max-width: 1023px) {
  html.zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-workplace) .zimla-ai-panel__body { max-width: none !important; }
  html.zimla-ai-start .zs-mobile-home { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 20px; }
  html.zimla-ai-start .zs-mobile-home > .zs-mobile-voice { grid-column: 1; grid-row: 1 / span 3; }
  html.zimla-ai-start .zs-mobile-home > :not(.zs-mobile-voice) { grid-column: 2; }
  /* Dockan och röstsessionens knappar samlade mitt i listen (annars 200 px isär); det man läser/skriver i en spalt. */
  html [data-zimla-mobile-dock] .grid, .zs-session__nav { max-width: 36rem; margin-inline: auto; }
  .zs-session__feedback { width: 100%; max-width: 40rem; margin-inline: auto; }
  html.zimla-ai-start.zimla-ai-start-working .zimla-ai-chat__messages > * { max-width: 40rem; margin-inline: auto; }
  html.zimla-ai-start.zimla-ai-start-working :is(.zimla-ai-composer__box, .zimla-ai-composer__quick) { width: min(40rem, 100%); margin-inline: auto; }
}
/* Startens mascot andas (prototypen): två ringar pulserar mjukt bakom; stilla vid "minska rörelse". */
@media (max-width: 1023px) {
  html.zimla-ai-start .zs-mobile-voice__face { position: relative; background: none; }
  html.zimla-ai-start .zs-mobile-voice__face::before, html.zimla-ai-start .zs-mobile-voice__face::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
  html.zimla-ai-start .zs-mobile-voice__face::after { inset: 10px; background: rgba(255, 255, 255, 0.1); }
  html.zimla-ai-start .zs-mobile-voice__face .zimla-dock-orb { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: no-preference) {
    html.zimla-ai-start .zs-mobile-voice__face::before { animation: zs-breathe 2.4s ease-in-out infinite; }
    html.zimla-ai-start .zs-mobile-voice__face::after { animation: zs-breathe 2.4s ease-in-out 0.3s infinite; }
  }
  @keyframes zs-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.6; } 50% { transform: scale(1.08); opacity: 1; } }
  html.zimla-ai-start .zs-mobile-voice__button:is(.is-voice-pressing, .is-voice-active) .zs-mobile-voice__face::before { animation-duration: 1.2s; }
  html.zimla-ai-start .zs-mobile-projects > header > a { display: inline-flex !important; min-height: 44px; font-size: 14px; font-weight: 600; color: #1f6b4f; text-decoration: none; }
}