/* Zimla AI-chatten på datorn i mobilens form (ägaren 2026-10-14: "de tydliga bubblorna, färgerna, bakgrunden, composern
   från mobilvy"): salviagrön bakgrund, egna meddelanden som gröna bubblor, Zimlas svar som vita kort med "Zimla AI" och
   orben överst, skrivraden som en vit ruta med orben till vänster och grön skicka-knapp. Mobilens regler:
   zimla-offertlage-mobile.css (:is(html.olm-on, html.zgc-on) .zimla-ai-panel-shell). Datorns egna delar står kvar:
   bilagor (+), förslagen ovanför skrivraden och kopiera under svaren. Studios startsida (html.zimla-ai-start utan
   -working) ligger i samma panel och lämnas orörd. */
/* Toningen överst i tråden växer in när man rullar (0 → 32 px över de första 48 px), så att det översta meddelandet
   inte klipps hårt mot huvudet. Utan scrolldriven animation: en fast toning. */
@property --zcd-fade { syntax: '<length>'; inherits: false; initial-value: 32px; }
@keyframes zcd-fade { from { --zcd-fade: 0px; } to { --zcd-fade: 32px; } }
@media (min-width: 1024px) {
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell { --zcd-sage: #e4ede6; --zcd-deep: #12382b; --zcd-green: #1f6b4f; --zcd-ink: #1d2420; --zcd-mut: #5d6b61; --zcd-soft: #6b746d; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-panel { background: var(--zcd-sage) !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-panel__body.zimla-ai-chat { background: transparent !important; }  /* vit yta med ton → salviagrönt */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-panel__header { background: transparent !important; border-bottom: 1px solid rgba(18, 56, 43, .08) !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-chat__messages { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-chat__messages { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--zcd-fade)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--zcd-fade)); }
  @supports (animation-timeline: scroll()) {
    html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-chat__messages { animation: zcd-fade linear both; animation-timeline: scroll(self); animation-range: 0 48px; }
  }

  /* Egna meddelanden: gröna bubblor till höger, utan "Du" och tid */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user { display: flex !important; justify-content: flex-end; margin: 0 !important; padding: 0 !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-message__stack { max-width: 84%; margin-left: 0 !important; align-items: flex-end; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user :is(.zimla-ai-message__meta, .zimla-ai-message__avatar) { display: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-message__bubble { margin: 0; padding: 10px 13px !important; border: 0 !important; border-radius: 18px 18px 4px 18px !important; background: var(--zcd-green) !important; color: #fff !important; box-shadow: none !important; font: 400 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-message__bubble :is(p, a, span):not(.material-symbols-outlined) { margin: 0; color: #fff !important; font: inherit; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-attachment-receipt { margin: 8px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .25) !important; color: #e3f2e9 !important; list-style: none; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-attachment-receipt li { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: #e3f2e9 !important; font-size: 13px; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-ai-attachment-receipt .material-symbols-outlined { font-size: 16px; color: #a8dcbf !important; }

  /* Zimlas svar: vitt kort, "Zimla AI" med den lilla orben, ingen tid, ingen logga till vänster, inget streck */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) { display: block !important; margin: 0 !important; padding: 0 !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__avatar,
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__meta time,
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message__time { display: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) > .zimla-ai-message__stack { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: none !important; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -20px rgba(18, 56, 43, .5); }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__meta { display: flex; align-items: center; gap: 8px; margin: 0 !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__name { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--zcd-deep); }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__name::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(#fff, #fff) 7.5px 9px / 4px 8px no-repeat, linear-gradient(#fff, #fff) 14.5px 9px / 4px 8px no-repeat, var(--zcd-green); }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__bubble { margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 0 !important; background: none !important; box-shadow: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-chat-run, .zimla-ai-message--assistant) .zimla-ai-message__bubble::before { display: none; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__answer :is(p, li) { margin: 0 0 6px; font: 400 14px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--zcd-ink); }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__answer > :last-child { margin-bottom: 0; }
  /* Offertlägets streck till vänster om svaret (zimla-offertlage.css) – kortet räcker. Svarskortets notis (.zcc) orörd. */
  html.zimla-offertlage:root .zimla-ai-panel-shell .zimla-ai-message__bubble:not(:has(> .zcc)) > .zimla-chat-run__answer { border-left: 0 !important; padding: 0 !important; font-size: 14px; }
  /* Kopiera/redigera: kvar på datorn, men syns först när pekaren är över meddelandet */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-message-actions { opacity: 0; transition: opacity .15s; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell :is(.zimla-ai-message, .zimla-chat-run):is(:hover, :focus-within) .zimla-chat-message-actions { opacity: 1; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-message--user .zimla-chat-message-actions { order: -1; align-self: center; }  /* bubblan ut till kanten */

  /* Medan Zimla arbetar: bara statusraden med en liten snurra; klar = "Arbetade 8 s" och historiken borta (som telefonen) */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run .zimla-chat-run__activity { display: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run:is([data-chat-state="queued"], [data-chat-state="blocked"], [data-chat-state="running"], [data-chat-state="cancel_requested"]) .zimla-chat-run__activity { display: block !important; margin: 0; padding: 0; border: 0; background: none; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity > :not(.zimla-chat-run__activity-history),
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-history > :not(summary),
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity .zimla-chat-run__worked { display: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-history > summary { display: block !important; padding: 0 !important; list-style: none; pointer-events: none; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-history > summary::-webkit-details-marker { display: none; }
  /* Loggens pil (zimla-ai-panel.css) blev ett lodrätt streck efter statusen här – raden öppnar inget, så ingen pil. */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-history > summary::after { display: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-current { display: inline-flex !important; align-items: center; gap: 10px; min-height: 24px; font: 400 13.5px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--zcd-mut); }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-mark { flex: none; display: inline-block !important; width: 16px !important; height: 16px !important; min-width: 16px; margin: 0 !important; padding: 0 !important; border: 2px solid #d5e2d9 !important; border-top-color: var(--zcd-green) !important; border-radius: 50% !important; background: none !important; animation: zcd-spin .8s linear infinite !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-mark > span { display: none !important; }
  @keyframes zcd-spin { to { transform: rotate(360deg); } }
  /* Klar (ägaren 2026-10-28: "oklart när Zimla AI jobbat klart"): raden står kvar med bock och "Klart" (eller "Väntar på
     dig") tills nästa svar börjar, och orben vid namnet slår en ring en gång (zimla-ai-panel.css, .is-done-pulse från JS). */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run[data-chat-state="completed"]:is(.is-just-done, .is-waiting) .zimla-chat-run__activity { display: block !important; margin: 0; padding: 0; border: 0; background: none; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run.is-just-done .zimla-chat-run__activity-current { color: var(--zcd-deep); }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run.is-done-pulse .zimla-ai-message__name::before { animation: zcd-done-ring .7s cubic-bezier(.22, 1, .36, 1); }
  @keyframes zcd-done-ring { from { box-shadow: 0 0 0 0 rgb(10 138 98 / 55%); } to { box-shadow: 0 0 0 12px rgb(10 138 98 / 0%); } }

  /* Förslagen ovanför skrivraden: vita piller på salviagrönt */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__quick button { border: 0 !important; background: #fff !important; color: var(--zcd-deep) !important; box-shadow: 0 6px 16px -14px rgba(18, 56, 43, .5); }

  /* Skrivraden: vit ruta, orben (håll in och prata) till vänster, bilagor (+), fältet, grön skicka-knapp */
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer { padding: 8px 14px 14px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__box { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 6px 6px 6px 8px !important; border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 10px 24px -18px rgba(18, 56, 43, .45) !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__box textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; padding: 10px 2px !important; border: 0 !important; background: transparent !important; font: 400 15px/20px Inter, ui-sans-serif, system-ui, sans-serif !important; color: var(--zcd-ink); box-shadow: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__voice { order: -2; flex: none; width: 40px !important; height: 40px !important; min-width: 0; min-height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--zcd-green) !important; color: transparent !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 3px; box-shadow: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__voice .material-symbols-outlined { display: none !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__voice::before, html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__voice::after { content: ""; width: 5px; height: 11px; border-radius: 3px; background: #fff; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__box > .zimla-ai-attachments { order: -1; flex: none; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__box > button[type="submit"] { flex: none; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 12px !important; background: var(--zcd-green) !important; color: #fff !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__box > button[type="submit"]:disabled { background: #b9cfc1 !important; }
  html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-ai-composer__box > button[type="submit"] .material-symbols-outlined { font-size: 18px; }
  @media (prefers-reduced-motion: reduce) { html:is(:not(.zimla-ai-start), .zimla-ai-start-working) .zimla-ai-panel-shell .zimla-chat-run__activity-mark { animation-duration: 2.4s !important; } }
}