/* =============================================================================
   MOBILSTIL ("mjuka öar") — Toppraden och stängkryss, sidomenyn, bulkläget, Kom igång, Mailmallar, Quill-verktygsraderna, läsarhuvudet, pratbubblor, bläddringspilar, Om, profilrutan.
   Mobilrundan 2026-10-09/10 (AT-74, KAN-421), godkänd live på Patriks telefon 10-10 00:58.
   Laddas med media="screen and (max-width: 768px)" direkt efter mobile-ticket-cards.css och
   FÖRE quill.snow.css och temafilen — samma kaskadplats som provets injicerade <style>
   (tools/phone.mjs:22-23). Därför bär reglerna :root body-prefix och !important: temana och
   inline-stilar sätter samma egenskaper med !important. Ingen "DELAD UR"-markör: filen är
   ingen del av CSS-2-gruppen. Desktop laddar inte filen.
   Ordningen mellan och inom filerna = provets injektionsordning (tools/inject_all.sh rad 3);
   ändra inte ordningen utan ny mätning.
   ============================================================================= */

/* ---- ur test-toppbar.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): toppraden — hamburgaren står ALLTID kvar (byts inte mot bakåtpil). Tillbaka = aktiv flik
   eller Androids bakåtknapp. Rubriken lugnare: 18/750, mörkgrön ton, ingen textglöd. Brödsmulan borttagen. */
:root body.mobile-detail-active #mobile-hamburger { display: flex !important; }
:root body.mobile-detail-active #mobile-back-btn { display: none !important; }
:root body .chat-header > h2.ledare-rubrik { text-shadow: none !important; }
:root body .chat-header > h2.ledare-rubrik > .ledare-rubrik-titel {
  font-size: 18px !important; font-weight: 750 !important; letter-spacing: -0.3px !important; line-height: 1.15 !important;
  color: color-mix(in srgb, var(--accent-primary) 62%, var(--text-primary)) !important; text-shadow: none !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
/* Läsarens stängkryss: rund, neutral (rött = radera), lite luft från ikonerna före. */
:root body button.atlas-mobile-close-btn.atlas-mobile-close-btn {
  width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin-left: 6px !important;
  border-radius: 50% !important; border: none !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; color: var(--text-primary) !important; box-shadow: none !important;
}
/* Sökrutornas tömkryss: rund mjuk knapp inne i fältets högerkant. */
:root body button.ledare-sokkryss.ledare-sokkryss {
  position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important;
  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: none !important; border-radius: 50% !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--text-primary) 9%, transparent) !important; color: var(--text-primary) !important;
}
:root body button.ledare-sokkryss[hidden] { display: none !important; }
:root body input.filter-input[data-ledare-sokkryss] { padding-right: 46px !important; }
/* Tipsraden "Ny här? Visa hjälpguide": mjuk grön ö överst i listan, guide-länk + stängkryss. */
:root body .ledare-tipsrad {
  display: flex !important; align-items: center !important; gap: 6px !important; margin: 4px 12px 8px !important; padding: 4px 4px 4px 12px !important;
  border-radius: 999px !important; background: color-mix(in srgb, var(--accent-primary) 11%, transparent) !important;
}
:root body .ledare-tipsrad button { border: none !important; background: none !important; box-shadow: none !important; min-height: 0 !important; color: var(--accent-primary) !important; cursor: pointer !important; }
:root body .ledare-tipsrad .ledare-tips-guide { flex: 1 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 0 !important; font: inherit !important; font-size: 13px !important; text-align: left !important; }
:root body .ledare-tipsrad .ledare-tips-guide span { color: var(--text-primary) !important; }
:root body .ledare-tipsrad .ledare-tips-guide b { color: var(--accent-primary) !important; font-weight: 700 !important; }
:root body .ledare-tipsrad .ledare-tips-stang { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--text-secondary) !important; }
/* Knappen "Öppna hela guiden för …" överst i snabbguiden: grön pill i full bredd. */
:root body .ledare-guidelank.ledare-guidelank {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important;
  margin: 0 0 14px !important; padding: 11px 16px !important; border: none !important; border-radius: 999px !important; cursor: pointer !important;
  background: color-mix(in srgb, var(--accent-primary) 13%, transparent) !important; color: var(--accent-primary) !important;
  font: inherit !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; min-height: 0 !important;
}

/* ---- ur test-sidomeny.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): sidomenyn i samma mjuka språk — aktiv rad som rundad pill utan hård vänsterkant,
   luftigare rader, lägre logotypyta, mjuk avdelare i stället för hård linje. */
:root body nav.sidebar .sidebar-header.sidebar-header {
  padding: 40px 20px 0 !important; min-height: 0 !important; height: auto !important;
  border-bottom: none !important; background: none !important;
}
/* (avdelarlinjen borttagen — loggan centreras i sin yta, Patrik 10-09) */
:root body nav.sidebar .sidebar-menu.sidebar-menu { padding: 8px 12px !important; margin-top: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
:root body nav.sidebar .sidebar-menu .menu-item.menu-item {
  border: none !important; border-left: none !important; border-radius: 14px !important; padding: 11px 14px !important; margin: 0 !important;
  background: none !important; box-shadow: none !important;
}
:root body nav.sidebar .sidebar-menu .menu-item.menu-item.active {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
}
:root body nav.sidebar .sidebar-menu .menu-item.active .menu-text { font-weight: 700 !important; color: color-mix(in srgb, var(--accent-primary) 62%, var(--text-primary)) !important; }
:root body nav.sidebar .sidebar-menu .menu-item.active .menu-icon { color: var(--accent-primary) !important; stroke: var(--accent-primary) !important; }
:root body nav.sidebar .sidebar-menu .menu-item.active::before, :root body nav.sidebar .sidebar-menu .menu-item.active::after { display: none !important; }
:root body nav.sidebar .sidebar-footer.sidebar-footer { border-top: none !important; }
/* Ljus logga på ljust tema (mätt i test-logoljus.js): inverteras till mörk — ingen bakgrund (Patrik 10-09). */
:root body.atlas-light-theme nav.sidebar .sidebar-header.ledare-ljus-logo img.tenant-logo { filter: invert(1) !important; }

/* ---- ur test-bulk.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): bulkläget — tydligt val, mjukt verktygsfält. */
:root body .team-ticket-card { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
/* Tryckkänsla medan man håller in. */
:root body .team-ticket-card.ledare-lp-trycker { transform: scale(0.975) !important; transition: transform 0.45s ease !important; }
/* Valbart kort: typikonen byts mot en tom ring; valt = fylld grön ring med bock. */
:root body .bulk-mode-active .team-ticket-card .ticket-title > span:first-child:not(:only-child) {
  width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 50% !important;
  border: 2px solid color-mix(in srgb, var(--accent-primary) 45%, transparent) !important; box-sizing: border-box !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--ledare-varm) !important;
}
:root body .bulk-mode-active .team-ticket-card .ticket-title > span:first-child:not(:only-child) > * { display: none !important; }
:root body .bulk-mode-active .team-ticket-card.bulk-selected .ticket-title > span:first-child:not(:only-child) {
  border-color: var(--accent-primary) !important;
  background: var(--accent-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat !important;
}
:root body .team-ticket-card.team-ticket-card.bulk-selected {
  border: none !important; outline: 2px solid var(--accent-primary) !important; outline-offset: -2px !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-dark-primary)) !important; box-shadow: 0 4px 14px -6px rgba(0,0,0,0.2) !important;
}
/* Verktygsfältet: varmvit ö, antal som grön pill, runda knappar; radera röd, avbryt neutral. */
:root body #bulk-action-toolbar.bulk-action-toolbar {
  border: none !important; border-radius: 999px !important; padding: 8px 10px 8px 8px !important; gap: 4px !important;
  background: color-mix(in srgb, var(--ledare-varm) 92%, var(--accent-primary)) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.10) !important;
  left: 12px !important; right: 12px !important; transform: none !important; width: auto !important; justify-content: space-between !important;
}
:root body #bulk-action-toolbar .bulk-toolbar-sep { display: none !important; }
:root body #bulk-action-toolbar .bulk-count-label {
  padding: 8px 14px !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 13.5px !important; white-space: nowrap !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #bulk-action-toolbar .bulk-icon-btn.bulk-icon-btn {
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important; border: none !important;
  /* P4: bulk-ops.js styr synligheten med inline-display; låt den vinna. */
  display: inline-flex; align-items: center !important; justify-content: center !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary)) !important;
}
:root body #bulk-action-toolbar .bulk-icon-btn.bulk-btn-cancel { background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important; color: var(--text-primary) !important; }
:root body #bulk-action-toolbar .bulk-icon-btn.bulk-btn-delete { background: color-mix(in srgb, #e5484d 13%, transparent) !important; color: #c62a2f !important; }
:root body #bulk-action-toolbar .bulk-icon-btn svg { width: 19px !important; height: 19px !important; stroke-width: 2.1 !important; }
:root body #bulk-action-toolbar .bulk-icon-btn:disabled, :root body #bulk-action-toolbar .bulk-icon-btn[disabled] { opacity: 0.35 !important; }

/* ---- ur test-komigang.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Kom igång (#view-onboarding) i samma mjuka språk — öar utan hårda kanter, klarade rader
   som mjuka gröna kort med rund bock, varmvita fält, runda knappar. */
:root body #view-onboarding > .chat-header .atlas-system-status-kicker { font-size: 10.5px !important; letter-spacing: 1.4px !important; opacity: 0.85 !important; }
:root body #view-onboarding .atlas-secondary-button.atlas-secondary-button { border: none !important; border-radius: 999px !important; padding: 8px 16px !important; background: color-mix(in srgb, var(--accent-primary) 13%, transparent) !important; color: var(--accent-primary) !important; font-weight: 700 !important; }
:root body #view-onboarding .atlas-guide-section.atlas-guide-section {
  border: none !important; border-radius: 22px !important; padding: 16px 14px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important; box-shadow: 0 4px 16px -8px rgba(0,0,0,0.18) !important;
}
:root body #view-onboarding .atlas-requirement-list { gap: 8px !important; }
:root body #view-onboarding .atlas-requirement-row.atlas-requirement-row {
  box-shadow: none !important; border: none !important; border-radius: 16px !important; padding: 12px 12px 12px 10px !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
}
:root body #view-onboarding .atlas-requirement-mark { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--accent-primary) !important; color: #fff !important; }
:root body #view-onboarding .atlas-requirement-mark svg { width: 14px !important; height: 14px !important; stroke: #fff !important; stroke-width: 3 !important; }
:root body #view-onboarding .atlas-requirement-row input, :root body #view-onboarding .atlas-company-field input {
  background: var(--ledare-varm) !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important; border-radius: 12px !important; box-shadow: none !important;
}
:root body #view-onboarding .atlas-requirement-next.atlas-requirement-next, :root body #view-onboarding .atlas-requirement-goto.atlas-requirement-goto {
  width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 50% !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-onboarding .atlas-guide-capability.atlas-guide-capability {
  border: none !important; border-radius: 18px !important; background: var(--ledare-varm) !important; box-shadow: 0 2px 10px -5px rgba(0,0,0,0.16) !important; padding: 14px !important;
}
:root body #view-onboarding .atlas-guide-capability-status { border: none !important; padding: 4px 12px !important; font-weight: 700 !important; }
:root body #view-onboarding .atlas-guide-capability-actions .footer-icon-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; color: var(--accent-primary) !important; }
:root body #view-onboarding .atlas-guide-note-row { border-radius: 14px !important; border: none !important; }
:root body #view-onboarding .atlas-system-status-feedback { border: none !important; border-radius: 14px !important; }
:root body #view-onboarding .atlas-primary-button.atlas-primary-button { border: none !important; border-radius: 999px !important; padding: 12px 22px !important; }
:root body #view-onboarding .atlas-guide-settings-button { border-radius: 50% !important; width: 40px !important; height: 40px !important; background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; color: var(--accent-primary) !important; }
/* Huvudet var 53 px högt med två textrader ⇒ överrubriken klistrad mot överkanten. Samma höjd/stil som övriga vyer. */
:root body #view-onboarding > .chat-header.chat-header { min-height: 64px !important; height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; align-items: center !important; }
:root body #view-onboarding > .chat-header h2, :root body #view-onboarding > .chat-header [class*="title"] { font-size: 18px !important; font-weight: 750 !important; letter-spacing: -0.3px !important; text-shadow: none !important; color: color-mix(in srgb, var(--accent-primary) 62%, var(--text-primary)) !important; margin: 2px 0 0 !important; }
/* Patrik 10-09: textdelen i funktionskorten (rubrik + beskrivning + status) som en synlig ruta i agentens färgton
   i stället för vitt — kravraderna under står kvar som gröna kort. */
:root body #view-onboarding .atlas-guide-capability .atlas-guide-capability-heading.atlas-guide-capability-heading {
  margin: -6px -6px 12px !important; padding: 14px 14px 12px !important; border-radius: 16px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 20%, var(--ledare-varm)), color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 9%, var(--ledare-varm))) !important;
}
:root body #view-onboarding .atlas-guide-capability-heading :is(h3, h4, strong, .atlas-guide-capability-title) { color: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 55%, var(--text-primary)) !important; }
:root body #view-onboarding .atlas-guide-capability-heading .atlas-guide-capability-description { color: color-mix(in srgb, var(--text-primary) 82%, transparent) !important; }
:root body #view-onboarding .atlas-guide-capability-heading .footer-icon-btn { background: var(--ledare-varm) !important; }
/* Patrik 10-09: kugghjul/strömbrytare i agentrutan smälter in — samma agentton som rutan, ingen vit ring. */
:root body #view-onboarding .atlas-guide-capability-heading .footer-icon-btn.footer-icon-btn,
:root body #view-onboarding .atlas-guide-capability-heading .atlas-guide-settings-button.atlas-guide-settings-button {
  background: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 18%, transparent) !important;
  color: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 70%, var(--text-primary)) !important;
  border: none !important; box-shadow: none !important;
}
:root body #view-onboarding .atlas-guide-capability-heading :is(.footer-icon-btn, .atlas-guide-settings-button) svg { stroke: currentColor !important; }
/* "Testa mig" vänster, pilen ut mot kortets högerkant. */
:root body #view-onboarding .atlas-guide-note-actions.atlas-guide-note-actions { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; }
/* Patrik 10-09 v2: inga runda plattor bakom ikonerna i Kom igång — bara ikonen (kugghjul, strömbrytare, pilar). */
:root body #view-onboarding :is(.atlas-guide-capability-heading .footer-icon-btn, .atlas-guide-capability-heading .atlas-guide-settings-button, .atlas-guide-settings-button, .atlas-requirement-goto, .atlas-requirement-next).atlas-x,
:root body #view-onboarding .atlas-guide-capability-heading .footer-icon-btn.footer-icon-btn.footer-icon-btn,
:root body #view-onboarding .atlas-guide-settings-button.atlas-guide-settings-button.atlas-guide-settings-button,
:root body #view-onboarding .atlas-requirement-goto.atlas-requirement-goto.atlas-requirement-goto,
:root body #view-onboarding .atlas-requirement-next.atlas-requirement-next.atlas-requirement-next {
  background: none !important; box-shadow: none !important; border: none !important;
}
:root body #view-onboarding .atlas-requirement-goto svg, :root body #view-onboarding .atlas-requirement-next svg { width: 20px !important; height: 20px !important; stroke-width: 2.6 !important; }
/* Testa mig-rutan som de andra raderna: text till vänster, pilen vertikalt centrerad i högerkanten,
   "Testa mig" som liten tonad pill under texten. */
:root body #view-onboarding .atlas-guide-note-row.atlas-guide-note-row { position: relative !important; padding: 14px 56px 14px 16px !important; border-radius: 16px !important; background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; }
:root body #view-onboarding .atlas-guide-note-actions.atlas-guide-note-actions { display: block !important; width: auto !important; margin-top: 10px !important; }
:root body #view-onboarding .atlas-guide-note-actions .atlas-requirement-goto { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
:root body #view-onboarding .atlas-widget-preview-button.atlas-widget-preview-button {
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; color: var(--accent-primary) !important;
  box-shadow: none !important; padding: 7px 16px !important; min-height: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; border: none !important;
}
:root body #view-onboarding .atlas-widget-preview-button svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; }
/* Kravraderna bär också sina pilar i .atlas-guide-note-actions ⇒ samma ankare: raden relativ, pilen centrerad till höger. */
:root body #view-onboarding .atlas-requirement-row.atlas-requirement-row { position: relative !important; padding-right: 56px !important; }
:root body #view-onboarding .atlas-requirement-row .atlas-guide-note-actions.atlas-guide-note-actions { margin: 0 !important; }
/* Patrik 10-09: ikonerna i agentrutan en nivå upp — centrerade mot rubrikraden, uppe i hörnet. */
:root body #view-onboarding .atlas-guide-capability-heading .atlas-guide-capability-actions { margin-top: -12px !important; margin-right: -6px !important; gap: 2px !important; align-self: flex-start !important; }
:root body #view-onboarding .atlas-guide-capability-heading .atlas-guide-capability-actions .footer-icon-btn.footer-icon-btn.footer-icon-btn { width: 38px !important; height: 38px !important; min-height: 38px !important; }
/* Patrik 10-09: Slutför större och centrerad längst ner. */
:root body #view-onboarding .atlas-guide-footer.atlas-guide-footer { justify-content: center !important; padding: 18px 16px 28px !important; }
:root body #view-onboarding .atlas-guide-complete-button.atlas-guide-complete-button {
  min-width: 220px !important; min-height: 54px !important; padding: 0 30px !important; gap: 10px !important; justify-content: center !important;
  font-size: 17px !important; font-weight: 750 !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent-primary) 70%, transparent) !important;
}
:root body #view-onboarding .atlas-guide-complete-button svg { width: 20px !important; height: 20px !important; }
:root body #view-onboarding .atlas-onboarding-scroll.atlas-onboarding-scroll { padding-bottom: 28px !important; }
/* Patrik 10-09: undertexten "Ta det i ordning …" doldes på mobil (onboarding-status.css:341 display:none) — visa den
   som på datorn, liten och dämpad under rubriken. Till Hem står kvar uppe till höger. */
:root body #view-onboarding .atlas-onboarding-header.atlas-onboarding-header p { display: block !important; margin: 4px 0 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--text-secondary) !important; max-width: none !important; }
:root body #view-onboarding .atlas-onboarding-header.atlas-onboarding-header { align-items: flex-start !important; padding-bottom: 12px !important; }
:root body #view-onboarding .atlas-onboarding-header .atlas-secondary-button { margin-top: 6px !important; flex-shrink: 0 !important; }
/* Till Hem tillbaka uppe till höger (den bröts ner under texten) — liten pill i hörnet, texten får full bredd under. */
:root body #view-onboarding .atlas-onboarding-header.atlas-onboarding-header { position: relative !important; }
:root body #view-onboarding .atlas-onboarding-header .atlas-secondary-button.atlas-secondary-button { position: absolute !important; top: 10px !important; right: 12px !important; margin: 0 !important; padding: 6px 14px !important; min-height: 0 !important; font-size: 13px !important; }

/* ---- ur test-mallar.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Mailmallar — listhuvudet som kompakt ö (stora lås-vattenstämpeln bort), "ny mall" som rund grön
   knapp; mallkorten som ärendekorten (rundade, utan hård ram/vänsterkant); papperskorgen synlig på mobil (var opacity 0
   = bara hover) i röd ton. */
:root body #view-templates .template-list-container > .list-panel-header.list-panel-header {
  min-height: 0 !important; height: auto !important; padding: 8px 8px 8px 18px !important; margin: 10px 0 4px !important;
  border: none !important; border-radius: 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; box-shadow: none !important;
}
:root body #view-templates .template-list-container > .list-panel-header::after, :root body #view-templates .template-list-container > .list-panel-header::before { display: none !important; }
:root body #view-templates .list-panel-header h3 { margin: 0 !important; padding: 0 !important; border: none !important; font-size: 13px !important; letter-spacing: 0.6px !important; color: var(--accent-primary) !important; }
:root body #view-templates .list-panel-header h3::after { display: none !important; }
:root body #view-templates #new-template-btn.ledare-x, :root body #view-templates .list-panel-header #new-template-btn {
  width: 42px !important; height: 42px !important; min-height: 42px !important; border-radius: 50% !important; border: none !important; padding: 0 !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent-primary) 70%, transparent) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important;
}
:root body #view-templates .list-panel-header #new-template-btn svg { stroke: #fff !important; width: 19px !important; height: 19px !important; }
:root body #view-templates #template-list .template-item.template-item {
  border: none !important; border-image: linear-gradient(transparent, transparent) 1 !important; border-radius: 16px !important; margin: 0 0 10px !important; width: auto !important; box-sizing: border-box !important; padding: 12px 8px 12px 16px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important; box-shadow: 0 2px 10px -5px rgba(0,0,0,0.16) !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
:root body #view-templates #template-list .template-item.active, :root body #view-templates #template-list .template-item.selected {
  outline: 2px solid var(--accent-primary) !important; outline-offset: -2px !important;
}
:root body #view-templates #template-list .template-item-content { flex: 1 !important; min-width: 0 !important; }
:root body #view-templates #template-list .template-title { font-size: 14.5px !important; font-weight: 650 !important; color: color-mix(in srgb, var(--accent-primary) 55%, var(--text-primary)) !important; }
:root body #view-templates #template-list .template-preview { font-size: 12.5px !important; color: var(--text-secondary) !important; }
:root body #view-templates #template-list .template-card-delete-btn.template-card-delete-btn {
  opacity: 1 !important; position: static !important; transform: none !important; flex: 0 0 36px !important; width: 36px !important; height: 36px !important; min-height: 36px !important;
  border-radius: 50% !important; border: none !important; background: none !important; color: #c62a2f !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-templates #template-list .template-card-delete-btn svg { width: 18px !important; height: 18px !important; }
/* Mallredigeraren: plats för krysset uppe till höger; listhuvudet döljs medan en mall är öppen. */
:root body #view-templates #template-header-row.detail-header-top { position: relative !important; padding-right: 52px !important; }
:root body #view-templates .atlas-mobile-close-btn.atlas-mobile-close-btn {
  position: absolute !important; top: 10px !important; right: 8px !important; width: 38px !important; height: 38px !important; min-height: 38px !important;
  border: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--text-primary) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-templates .atlas-mobile-close-btn[hidden] { display: none !important; }
:root body #view-templates.mobile-detail-open .template-list-container > .list-panel-header { display: none !important; }
/* Patrik 10-09: mallredigeraren med samma "popup"-känsla som ärendeläsaren (test-ram.css): ram i accentfärg, rundad,
   djup skugga, lätt tonad yta bakom; huvudet (titel/grupp) får samma svaga ton som läsarens huvud. */
:root body #view-templates.mobile-detail-open { background: color-mix(in srgb, #000 8%, var(--bg-dark-primary)) !important; }
:root body #view-templates.mobile-detail-open .template-editor-container.template-editor-container {
  margin: 10px !important; height: calc(100% - 20px) !important; box-sizing: border-box !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 75%, transparent) !important; border-radius: 18px !important; overflow: hidden !important;
  background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-dark-primary)) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}
:root body #view-templates.mobile-detail-open #template-header-row { border-radius: 0 !important; margin: 0 !important; box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; }
:root body #view-templates.mobile-detail-open .template-editor-container.template-editor-container { width: auto !important; max-width: calc(100% - 20px) !important; }
:root body #view-templates.mobile-detail-open #template-editor-form { padding: 0 !important; }
:root body #view-templates.mobile-detail-open #template-editor-form > * { border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Skuggan v2 (Patrik: "lite off"): ingen grå ton på vyn bakom (gav ett grått band upptill), mjukare och jämnare skugga runt om. */
:root body #view-templates.mobile-detail-open { background: var(--bg-dark-primary) !important; }
:root body #view-templates.mobile-detail-open .template-editor-container.template-editor-container {
  box-shadow: 0 6px 22px -4px color-mix(in srgb, var(--accent-primary) 35%, rgba(0,0,0,0.25)), 0 1px 4px rgba(0,0,0,0.08) !important;
}
/* Patrik 10-09: spara/radera i mallredigeraren — var små (16 px) och raderas röd halvgenomskinlig. Runda 42 px:
   spara = fylld grön med vit ikon, radera = mjukt röd med tydlig röd ikon (rött = radera). Lägre sidfot. */
:root body #view-templates.mobile-detail-open .detail-footer-toolbar { min-height: 0 !important; height: auto !important; padding: 10px 14px !important; gap: 10px !important; justify-content: flex-end !important; align-items: center !important; }
:root body #view-templates #save-template-btn.ledare-x, :root body #view-templates .detail-footer-toolbar #save-template-btn,
:root body #view-templates .detail-footer-toolbar #delete-template-btn {
  width: 42px !important; height: 42px !important; min-height: 42px !important; min-width: 42px !important; border-radius: 50% !important; border: none !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-templates .detail-footer-toolbar #save-template-btn { background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent-primary) 70%, transparent) !important; }
:root body #view-templates .detail-footer-toolbar #delete-template-btn { background: color-mix(in srgb, #e5484d 13%, transparent) !important; color: #c62a2f !important; box-shadow: none !important; }
:root body #view-templates .detail-footer-toolbar :is(#save-template-btn, #delete-template-btn) svg { width: 19px !important; height: 19px !important; stroke-width: 2.2 !important; }
:root body #view-templates .detail-footer-toolbar #save-template-btn svg { stroke: #fff !important; }
/* Patrik 10-09: papperskorgen i redigeraren ritades helfylld (global fill på knapp-svg) — det är en linjeikon med
   streck i: fill none, röd linje. */
:root body #view-templates .detail-footer-toolbar #delete-template-btn svg, :root body #view-templates .detail-footer-toolbar #delete-template-btn svg * { fill: none !important; stroke: currentColor !important; }
/* Patrik 10-09: titel- och gruppfältet olika höga (38 mot 44) — samma höjd, rundning och varmvita fält. */
:root body #view-templates #template-header-row input#template-title-input.filter-input,
:root body #view-templates #template-header-row #template-group-wrapper .atlas-filter-dd.atlas-filter-dd {
  height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; border-radius: 12px !important;
  background: var(--ledare-varm) !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important; font-size: 14.5px !important;
}
:root body #view-templates #template-header-row input#template-title-input.filter-input { padding: 0 12px !important; }
/* Krysset en nivå upp (i höjd med TITEL/GRUPP), och mindre tom luft under fälten. */
:root body #view-templates .atlas-mobile-close-btn.atlas-mobile-close-btn { top: 2px !important; }
:root body #view-templates #template-header-row.detail-header-top { padding-bottom: 12px !important; }
:root body #view-templates #template-header-row.detail-header-top { align-items: start !important; min-height: 0 !important; height: auto !important; } :root body #view-templates #template-header-row > div { height: auto !important; min-height: 0 !important; }
/* Titelfältet bar margin-bottom 24 px (global .filter-input) ⇒ tom luft under fälten; etiketterna lika luft. */
:root body #view-templates #template-header-row input#template-title-input.filter-input { margin: 0 !important; }
:root body #view-templates #template-header-row label { margin: 0 0 4px 2px !important; }
/* Patrik 10-09: radera till vänster, spara till höger — inte bredvid varandra. */
:root body #view-templates.mobile-detail-open .detail-footer-toolbar { justify-content: space-between !important; }
:root body #view-templates .detail-footer-toolbar #delete-template-btn { order: -1 !important; }
/* Patrik 10-09: sidfoten (verktygsrad + spara/radera) mjukare — inga hårda linjer; verktygsraden som en rundad ö
   som svävar över texten, sidfoten i samma ton som rutan utan överkant. */
:root body #view-templates.mobile-detail-open .ql-toolbar.ql-snow {
  border: none !important; margin: 6px 10px 0 !important; padding: 4px 8px !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--ledare-varm)) !important; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.18) !important;
}
:root body #view-templates.mobile-detail-open .ql-toolbar .ql-picker-label, :root body #view-templates.mobile-detail-open .ql-toolbar button { border-radius: 8px !important; }
:root body #view-templates.mobile-detail-open .ql-toolbar :is(.ql-picker, .ql-color-picker, .ql-align) .ql-picker-label { border: none !important; }
:root body #view-templates.mobile-detail-open .detail-footer-toolbar.detail-footer-toolbar { border: none !important; background: transparent !important; padding: 8px 12px 10px !important; }
:root body #view-templates.mobile-detail-open .ql-container.ql-snow { border: none !important; }
/* Patrik 10-09: verktygsraden ska fylla hela bredden — grupperna fördelas jämnt över raden (ingen tom högerdel),
   radbryts snyggt på smal skärm. */
:root body #view-templates.mobile-detail-open .ql-toolbar.ql-snow {
  display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important;
  margin: 6px 8px 0 !important; padding: 4px 10px !important; row-gap: 2px !important;
}
:root body #view-templates.mobile-detail-open .ql-toolbar .ql-formats { margin: 0 !important; display: inline-flex !important; align-items: center !important; }
:root body #view-templates.mobile-detail-open .ql-toolbar button { width: 32px !important; height: 32px !important; padding: 5px !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats.ql-formats.ql-formats { display: contents !important; }
/* Lika avstånd: alla knappar/väljare som lika breda celler (mitt-till-mitt-avståndet blir konstant). */
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar.ql-snow.ql-snow { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats > select { display: none !important; }
/* quill.snow.css ger .ql-formats::after (clearfix) — med display:contents blev den ett osynligt flex-element mellan
   varje grupp ⇒ dubbla luckor där. Bort. Knapparna högre (Patrik: "kan göras högre"). */
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats::after, :root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats::before { display: none !important; content: none !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar.ql-snow.ql-snow { padding: 6px 12px !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats > button { height: 38px !important; width: 28px !important; padding: 4px !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats > .ql-picker { height: 38px !important; display: inline-flex !important; align-items: center !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats > button svg,
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats > .ql-picker .ql-picker-label svg { width: 20px !important; height: 20px !important; }
:root body #view-templates#view-templates.mobile-detail-open .ql-toolbar .ql-formats > button { width: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
:root body #view-templates #template-header-row.detail-header-top:has(#template-group-wrapper[style*="display: none"]) { grid-template-columns: minmax(0,1fr) !important; }
/* Patrik 10-09: mallredigerarens huvud (TITEL/GRUPP) ska synas mer — egen tonad yta med mjuk nederkant, i alla teman. */
:root body #view-templates.mobile-detail-open #template-header-row.detail-header-top {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--ledare-varm)) !important; box-shadow: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important; padding-top: 14px !important;
}

/* ---- ur test-quill.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan v2 (Patrik 10-09: "kontrollera alla andra quillfält"; v1 med 38 px knappar/20 px ikoner förstörde svarsfälten
   — ikonerna blev prickar). v2 rör INTE storlekar: bara jämna avstånd mellan alla 11 kontroller i de övriga 7
   redigerarna (gruppernas egna marginaler + quill.snow:s osynliga ::after-element gav ojämna luckor).
   Mallredigeraren har egna regler i test-mallar.css. */
:root :is(body, #q#q) :not(#view-templates) .ql-toolbar.ql-snow.ql-snow { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; }
:root :is(body, #q#q) :not(#view-templates) .ql-toolbar.ql-snow .ql-formats.ql-formats { display: contents !important; }
:root :is(body, #q#q) :not(#view-templates) .ql-toolbar.ql-snow .ql-formats::after { display: none !important; content: none !important; }
:root :is(body, #q#q) :not(#view-templates) .ql-toolbar.ql-snow .ql-formats > select { display: none !important; }
:root :is(body, #q#q) :not(#view-templates) .ql-toolbar.ql-snow .ql-formats > :is(button, .ql-picker) { margin: 0 !important; }
/* Patrik 10-09: svarsfältet bredare, skicka-pilen mindre. Raden runt fältet hade 12 px egen sidluft ovanpå formulärets
   16 px ⇒ 4 px; gap 8 ⇒ 6; skicka-knappen 40 ⇒ 34 px (ikon 16). Gäller alla svarsrutor med .reply-quill-wrap. */
:root :is(body, #q#q) div:has(> div > .reply-quill-wrap) { padding-left: 2px !important; padding-right: 2px !important; }
:root :is(body, #q#q) div:has(> .reply-quill-wrap) { gap: 6px !important; }
:root :is(body, #q#q) div:has(> .reply-quill-wrap) > .reply-quill-wrap { flex: 1 1 auto !important; min-width: 0 !important; }
:root :is(body, #q#q) #btn-reply-action.btn-glass-icon, :root :is(body, #q#q) div:has(> .reply-quill-wrap) > button.btn-glass-icon {
  width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; flex: 0 0 34px !important; padding: 0 !important;
}
:root :is(body, #q#q) div:has(> .reply-quill-wrap) > button.btn-glass-icon svg { width: 16px !important; height: 16px !important; }
/* Skicka nere i knappraden: rund grön 40 px, lite luft från AI-knapparna. */
:root :is(body, #q#q) button.btn-glass-icon.ledare-skicka-nere { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex: 0 0 40px !important; margin-left: 6px !important; }
:root :is(body, #q#q) button.btn-glass-icon.ledare-skicka-nere svg { width: 18px !important; height: 18px !important; }
/* v4: knappraden under svarsrutan — mallväljaren kortare och ljus, bifoga/AI-knapparna direkt efter den,
   skicka (rund grön) ensam längst till höger. */
:root :is(body, #q#q) .ledare-svarsknapprad.ledare-svarsknapprad { justify-content: flex-start !important; gap: 4px !important; }
:root :is(body, #q#q) .ledare-svarsknapprad > div:last-child { flex: 1 1 auto !important; gap: 2px !important; }
:root :is(body, #q#q) .ledare-svarsknapprad .atlas-tmpl-trigger.atlas-tmpl-trigger {
  width: 38px !important; min-width: 38px !important; max-width: 38px !important; flex: 0 0 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; gap: 0 !important; justify-content: center !important;
  border: none !important; border-radius: 999px !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--ledare-varm)) !important; color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary)) !important; font-size: 13.5px !important;
}
/* Mallväljaren = bara ikonen (datorrundan 10-15, Patrik: samma mailmallsikon som på datorn); titeln bär texten. */
:root :is(body, #q#q) .ledare-svarsknapprad .atlas-tmpl-trigger span,
:root :is(body, #q#q) .ledare-svarsknapprad .atlas-tmpl-trigger .atlas-tmpl-chevron { display: none !important; }
:root :is(body, #q#q) .ledare-svarsknapprad .atlas-tmpl-trigger > svg:first-child { width: 18px !important; height: 18px !important; }
:root :is(body, #q#q) button.btn-glass-icon.ledare-skicka-nere {
  margin-left: auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex: 0 0 40px !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important; background: var(--accent-primary) !important; color: #fff !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root :is(body, #q#q) button.btn-glass-icon.ledare-skicka-nere svg { width: 18px !important; height: 18px !important; fill: none !important; }
:root :is(body, #q#q) button.btn-glass-icon.ledare-skicka-nere svg * { stroke: #fff !important; }

/* ---- ur test-lasarhuvud.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09, Ledarens förslag 2–4) — ärendeläsaren på mobil.
   2) Namnet kapades med 7 px ⇒ huvudets ikonknappar 34 → 30 px breda (ikonerna oförändrade).
   3) Textstorleksväljaren hopfälld till "Aa" (test-bfsfall.js).
   4) Kontaktraden (datum/mail/telefon) tonar ut i högerkanten så man ser att den går att dra.
   1) Svarsrutan växer redan 44 → 180 px med texten (mätt); när man skriver får den minst 72 px. */
:root body :is(#view-my-tickets, #view-inbox, #view-archive, #view-customers) .detail-header-top button:is(.notes-trigger-btn, .action-icon-btn, .btn-glass-icon) {
  width: 30px !important; min-width: 30px !important; padding: 0 !important;
}
:root body .reply-quill-wrap:focus-within .ql-editor { min-height: 72px !important; }
/* 4) Uttoningen fanns redan (24 px) men syntes knappt ⇒ 56 px. */
:root body .detail-header-top .detail-pills-container.detail-pills-container {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent) !important; mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent) !important;
}
/* 3 v2: textstorleken i knappraden (Aa före skicka) ⇒ den flytande väljaren och vänsterkolumnen (60 px) bort, bubblorna breddas. */
:root body .bfs-anchor.bfs-anchor.bfs-anchor.bfs-anchor { display: none !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll)#my-chat-scroll-area,
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll):is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) { padding-left: 12px !important; }
:root body #archive-detail .detail-container > .detail-body.detail-body.detail-body { padding-left: 12px !important; }
:root body .ledare-svarsknapprad button.ledare-bfs-aa, :root body button.ledare-bfs-aa {
  margin-left: auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex: 0 0 40px !important;
  border: none !important; border-radius: 50% !important; padding: 0 !important; font: inherit !important; font-size: 14px !important; font-weight: 750 !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--ledare-varm)) !important; color: var(--accent-primary) !important;
}
:root :is(body, #q#q) button.ledare-bfs-aa + button.btn-glass-icon.ledare-skicka-nere { margin-left: 6px !important; } /* Aa intill skicka (Patrik 10-15) — skicka-regeln ovan har :is(#q#q) och vann annars med margin-left:auto */
#ledare-bfs-pop { position: fixed; z-index: 100000; display: flex; gap: 4px; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--ledare-varm) 90%, var(--accent-primary)); box-shadow: 0 10px 26px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.10); }
#ledare-bfs-pop .ledare-bfs-val { width: 40px; height: 40px; border: none; border-radius: 50%; background: none; color: var(--text-primary); font-family: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
#ledare-bfs-pop .ledare-bfs-val.ledare-bfs-val { background: none !important; border: none !important; box-shadow: none !important; min-height: 0 !important; }
#ledare-bfs-pop .ledare-bfs-val.ledare-bfs-val.vald { background: var(--accent-primary) !important; color: #fff !important; }
/* Källetiketten ("• Katalog", "• Kunskap") skrevs två gånger per Atlas-meddelande — i metaraden OCH efter bubblan
   (tickets-view.js:974, strider mot kommentaren #154 på :832-834). Dubbletten efter bubblan döljs. I produktion: ta
   bort det andra ${answerSourceMeta} på rad 974. */

/* ---- ur test-bubblor.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): pratbubblor i alla ärendevyer. Mätt: kundbubblan hade hård grå kant (1 px #758f82) på ljus
   botten, Atlas/agent tonad kant; båda i full bredd så man inte såg vem som sa vad.
   Nu: kunden till vänster, Atlas/agent till höger (samma sida som koden redan anger — justify-content start/end),
   88 % bredd, ingen kant, mjuk skugga, och en liten svans mot avsändarens sida. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row > div:not(.msg-avatar) {
  max-width: 88% !important; flex: 0 1 auto !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble.bubble {
  position: relative !important; border: none !important; overflow: visible !important;
  box-shadow: 0 2px 10px -5px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.05) !important;
}
/* Kund: varmvit bubbla, svans nere till vänster. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble {
  background: color-mix(in srgb, var(--ledare-varm) 88%, var(--accent-primary)) !important; border-radius: 18px 18px 18px 4px !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble::after {
  content: "" !important; position: absolute !important; left: -6px !important; bottom: 0 !important; width: 12px !important; height: 12px !important;
  background: inherit !important; clip-path: polygon(100% 0, 100% 100%, 0 100%) !important; border-radius: 0 0 0 3px !important;
}
/* Atlas/agent: tonad i ärendets färg, ogenomskinlig så svansen syns, svans nere till höger. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble {
  background: color-mix(in srgb, var(--detail-accent, var(--accent-primary)) 14%, var(--ledare-varm)) !important; border-radius: 18px 18px 4px 18px !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble::after {
  content: "" !important; position: absolute !important; right: -6px !important; bottom: 0 !important; width: 12px !important; height: 12px !important;
  background: inherit !important; clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
/* Bubblornas färg/kant ligger inline med !important men via variabler (alla 8 varianter i källan) ⇒ sätt variablerna
   på .msg-row (närmast bubblan): ingen synlig kant, kund varmvit, Atlas/agent tonad i ärendets färg. */
:root body .msg-row.msg-row {
  --bubble-neutral-border: transparent !important; --detail-bubble-border: transparent !important;
  --bubble-neutral-bg: color-mix(in srgb, var(--ledare-varm) 88%, var(--accent-primary)) !important;
  --detail-bubble-bg: color-mix(in srgb, var(--detail-accent, var(--accent-primary)) 14%, var(--ledare-varm)) !important;
}
/* Svansen tydligare: 16 px, böjd (rundad yttre kant) i stället för rak triangel. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble::after {
  left: -9px !important; width: 18px !important; height: 16px !important; clip-path: none !important;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 16px, #000 16.5px) !important; mask: radial-gradient(circle at 0 0, transparent 16px, #000 16.5px) !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble::after {
  right: -9px !important; width: 18px !important; height: 16px !important; clip-path: none !important;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 16px, #000 16.5px) !important; mask: radial-gradient(circle at 100% 0, transparent 16px, #000 16.5px) !important;
}
/* Patrik 10-09: mer luft mellan ärendehuvudet och första avsändarraden. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll):is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) { padding-top: 16px !important; }
/* v2 (Patrik: "ser ingen svans … namn + datum längst till vänster resp. höger … svansen åt det hållet").
   Svansen v1 (rundad mask) hamnade nästan helt innanför bubblan ⇒ osynlig. Nu en tydlig triangel som sticker ut
   10 px nere i hörnet på avsändarens sida; bubblans hörn där är rakt så svansen sitter ihop med den. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble { border-bottom-left-radius: 0 !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble { border-bottom-right-radius: 0 !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble::after {
  -webkit-mask: none !important; mask: none !important; left: -10px !important; bottom: 0 !important; width: 12px !important; height: 14px !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important; border-radius: 0 !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble::after {
  -webkit-mask: none !important; mask: none !important; right: -10px !important; bottom: 0 !important; width: 12px !important; height: 14px !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important; border-radius: 0 !important;
}
/* Bubblorna 10 px in från avsändarens kant så svansen får plats; namn + datum ända ute vid samma kant. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:not(.msg-avatar) { margin-left: 10px !important; align-items: flex-start !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:not(.msg-avatar) { margin-right: 10px !important; align-items: flex-end !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:not(.msg-avatar) > div:first-child:not(.bubble) { text-align: right !important; align-self: flex-end !important; padding-right: 2px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:not(.msg-avatar) > div:first-child:not(.bubble) { text-align: left !important; align-self: flex-start !important; padding-left: 2px !important; }
/* Patrik 10-09: korta svar ("tack") ska inte täcka hela raden — bubblan så bred som texten, max 88 %. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble.bubble.bubble { width: auto !important; max-width: 100% !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row > div:not(.msg-avatar).msg-x,
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:not(.msg-avatar) { align-items: flex-start !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:not(.msg-avatar) { align-items: flex-end !important; }
/* Långa meddelanden max 88 % även i Garaget (en äldre regel gav kolumnen 100 %). */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row.msg-row > div:not(.msg-avatar):not(.bubble) { max-width: 88% !important; flex: 0 1 auto !important; }

/* ---- ur test-navkant.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): bläddringen (föregående/nästa ärende) som små runda pilar mitt på rutans vänster- och högerkant,
   i stället för två pills längst ner över texten. Halvgenomskinliga så texten bakom anas; målnumret (4/7, 6/7) som
   liten bricka under pilen. Bara när ett ärende är öppet (mobil). */
:root body .detail-container .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.atlas-ticket-detail-nav-btn,
:root body :is(#atlas-reader-modal, #customer-reader-modal) .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.atlas-ticket-detail-nav-btn {
  position: fixed !important; top: calc(50vh - 22px) !important; bottom: auto !important; z-index: 40 !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important; flex-direction: column !important; gap: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--ledare-varm) 72%, transparent) !important; color: var(--accent-primary) !important;
  box-shadow: 0 3px 12px -3px rgba(0,0,0,0.28) !important; -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important;
}
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-prev.atlas-ticket-detail-nav-prev { left: 4px !important; right: auto !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-next.atlas-ticket-detail-nav-next { right: 4px !important; left: auto !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn svg { width: 20px !important; height: 20px !important; stroke-width: 2.6 !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn .atlas-ticket-detail-nav-counter.atlas-ticket-detail-nav-counter {
  display: inline !important; position: absolute !important; top: 42px !important; left: 50% !important; transform: translateX(-50%) !important;
  font-size: 10px !important; font-weight: 750 !important; padding: 1px 6px !important; border-radius: 999px !important; white-space: nowrap !important;
  background: color-mix(in srgb, var(--ledare-varm) 80%, transparent) !important; color: var(--accent-primary) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.is-disabled.is-disabled { display: none !important; }
/* v2 (Patrik: "räknarna ligger lite konstigt under pilarna"): numret inne i knappen under pilen ⇒ en lodrät pill 40×58. */
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.atlas-ticket-detail-nav-btn.atlas-ticket-detail-nav-btn {
  height: 58px !important; min-height: 58px !important; border-radius: 999px !important; top: calc(50vh - 29px) !important; gap: 1px !important; flex-direction: column !important;
}
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn .atlas-ticket-detail-nav-counter.atlas-ticket-detail-nav-counter.atlas-ticket-detail-nav-counter {
  position: static !important; transform: none !important; background: none !important; box-shadow: none !important; padding: 0 !important;
  font-size: 10.5px !important; line-height: 1 !important; order: 2 !important;
}
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn svg { order: 1 !important; width: 18px !important; height: 18px !important; }

/* ---- ur test-om.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Om Atlas i samma mjuka språk. Sektionerna = varmvita öar utan kant; tipsraderna utan grön
   vänsterkant; statistiken som 2-kolumners rutnät av rundade plattor (stor siffra överst, etikett under, ikon i hörnet). */
:root body #view-about .about-cell.about-cell {
  border: none !important; border-radius: 22px !important; padding: 16px 14px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important; box-shadow: 0 4px 16px -8px rgba(0,0,0,0.18) !important;
}
:root body #view-about .guide-step.guide-step {
  border: none !important; border-radius: 16px !important; background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; box-shadow: none !important;
}
:root body #view-about .about-stats-grid.about-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
:root body #view-about .about-stat-card.about-stat-card {
  position: relative !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px !important;
  min-height: 74px !important; padding: 12px 14px !important; border: none !important; border-radius: 16px !important;
  background: var(--ledare-varm) !important; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.16) !important;
}
:root body #view-about .about-stat-card > strong { font-size: 24px !important; min-width: 0 !important; text-align: left !important; line-height: 1.05 !important; order: 1 !important; }
:root body #view-about .about-stat-card > span:not(:first-child) { font-size: 12.5px !important; opacity: 0.85 !important; order: 2 !important; }
:root body #view-about .about-stat-card > span:first-child { position: absolute !important; top: 12px !important; right: 12px !important; opacity: 0.6 !important; }
:root body #view-about .about-stat-card > svg:last-child { display: none !important; }
:root body #view-about .about-stat-card[class*="prio"], :root body #view-about .about-stat-card.about-stat-card:not([class="about-stat-card"]) { background: color-mix(in srgb, #e8a13a 14%, var(--ledare-varm)) !important; }
/* Underrubrikerna (Mina ärenden / Totalt system) ligger i samma rutnät ⇒ hela bredden. Kanterna kom från en starkare regel. */
:root body #view-about .about-stats-grid.about-stats-grid > :not(.about-stat-card) { grid-column: 1 / -1 !important; margin: 8px 2px 0 !important; }
:root body #view-about#view-about .about-stats-grid .about-stat-card.about-stat-card.about-stat-card { border: none !important; outline: none !important; }
/* Utseende & System: väljarna som varmvita rundade fält, testa-ljud som rund grön knapp, versionsnumren i vanlig font. */
:root body #view-about .setting-item .atlas-filter-dd.atlas-filter-dd {
  border: none !important; border-radius: 14px !important; min-height: 46px !important; background: var(--ledare-varm) !important; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.16) !important;
}
:root body #view-about .setting-item button[title="Testa valt ljud"] {
  width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 50% !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-about .info-item > :last-child { font-family: inherit !important; letter-spacing: 0 !important; font-weight: 650 !important; }
:root body #view-about .info-item { border-bottom-color: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; }
/* Patrik 10-09 ("gör öppna ärenden istället stor"): FÖRSTA plattan i varje grupp över hela bredden
   (Öppna chattar resp. Öppna totalt) ⇒ resten bildar par och Medelprio + Högprio hamnar bredvid varandra. */
:root body #view-about .about-stats-grid > :not(.about-stat-card) + .about-stat-card { grid-column: 1 / -1 !important; }
/* Prio-plattornas ton i ALLA teman: högprio röd, medelprio gul (förut slog en gemensam gul regel ut röd i mörkt). */
:root body #view-about .about-stats-grid .about-stat-card.about-stat-card.about-stat-card--high { background: color-mix(in srgb, #e5484d 16%, var(--ledare-varm)) !important; }
:root body #view-about .about-stats-grid .about-stat-card.about-stat-card.about-stat-card--medium { background: color-mix(in srgb, #e8a13a 16%, var(--ledare-varm)) !important; }

/* ---- ur test-profil.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): profilmodalen på mobil. Mätt: rutan gick utanför skärmen (y −14 till 841 i en 827 hög vy) så
   huvudet kapades; hårda ramar på fält och ikonrutor; färgen som linje + fyrkant; logga ut i en ram. */
:root body #atlas-profile-modal #profile-modal-box.glass-modal-box.glass-modal-box {
  margin: 10px !important; width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important;
  max-height: calc(100% - 20px) !important; height: auto !important; border: none !important; border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.30), 0 3px 8px rgba(0,0,0,0.15) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
:root body #atlas-profile-modal .glass-modal-body { overflow-y: auto !important; flex: 1 1 auto !important; min-height: 0 !important; }
/* Huvudet: mindre avatar, namnet bredvid. */
:root body #atlas-profile-modal #profile-modal-header { min-height: 0 !important; padding: 14px 16px !important; flex-shrink: 0 !important; }
:root body #atlas-profile-modal #profile-preview-avatar { width: 56px !important; height: 56px !important; min-width: 56px !important; }
:root body #atlas-profile-modal #profile-preview-avatar svg { width: 30px !important; height: 30px !important; }
/* Fälten: varmvita, rundade, utan hård ram. */
:root body #atlas-profile-modal :is(#pref-display-name, #pref-status-text, #pref-email, #old-pass, #new-pass, #confirm-pass) {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; border-radius: 14px !important; background: var(--ledare-varm) !important; min-height: 46px !important; box-shadow: none !important;
}
/* Färgen: linjen bort, rund prick (paletten öppnas vid tryck). */
:root body #atlas-profile-modal #pref-color-line { display: none !important; }
:root body #atlas-profile-modal input#pref-color { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 3px solid var(--ledare-varm) !important; padding: 0 !important; overflow: hidden !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent) !important; }
:root body #atlas-profile-modal input#pref-color::-webkit-color-swatch-wrapper { padding: 0 !important; }
:root body #atlas-profile-modal input#pref-color::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }
/* Ikonväljaren: runda knappar utan ram, vald = fylld i profilfärgen. */
:root body #atlas-profile-modal .avatar-picker-grid { gap: 8px !important; }
:root body #atlas-profile-modal .avatar-option.avatar-option {
  border: none !important; border-radius: 50% !important; aspect-ratio: 1 !important; height: auto !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important; box-shadow: none !important;
}
:root body #atlas-profile-modal .avatar-option.avatar-option:is(.selected, .active, [aria-pressed="true"]) {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, var(--ledare-varm)) !important; box-shadow: 0 0 0 2px var(--agent-color, var(--accent-primary)) !important;
}
/* Foten: logga ut = mjuk röd rund, spara = grön rund. */
:root body #atlas-profile-modal .glass-modal-footer { border-top: none !important; padding: 10px 16px 14px !important; flex-shrink: 0 !important; }
:root body #atlas-profile-modal #prof-logout-btn, :root body #atlas-profile-modal #prof-save-btn {
  width: 46px !important; height: 46px !important; min-height: 46px !important; border: none !important; border-radius: 50% !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #atlas-profile-modal #prof-logout-btn { background: color-mix(in srgb, #e5484d 13%, transparent) !important; color: #c62a2f !important; }
:root body #atlas-profile-modal #prof-save-btn { background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent-primary) 70%, transparent) !important; }
:root body #atlas-profile-modal #prof-save-btn svg { stroke: #fff !important; }
:root body #atlas-profile-modal #profile-modal-header { position: relative !important; padding-right: 52px !important; }
:root body #atlas-profile-modal #prof-close-btn { position: absolute !important; top: 12px !important; right: 10px !important; width: 38px !important; height: 38px !important; min-height: 38px !important;
  border: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--text-primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
:root body #atlas-profile-modal .avatar-option.avatar-option.selected { background: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 22%, var(--ledare-varm)) !important; box-shadow: 0 0 0 2px var(--min-agentfarg, var(--accent-primary)) !important; }

/* ---- Ärendebubblorna, ring + svans (Patrik + ledartråd 25, 2026-10-14, godkänt på telefon; prov: C:/AtlasWork/datorrunda-20261014/LOGG.md) ---- */
/* v4 (Patrik 09:2x): samma ring + svans i ALLA ärendevyer på mobilen (Inkorg, Mina ärenden, Garaget, Admin-/Kund-läsaren). */
/* Prov v3 10-14 (ledartråd 25). Läsarna i Admin (#reader-chat-scroll) och Kunder (#cust-reader-chat-scroll).
   v2 såg dåligt ut: pilen över texten, Atlas-bubblan ut till kanten, ringen i egen kolumn.
   v3: ringen liten (22 px) på namnraden (tar ingen bredd), svansen uppe pekar mot den,
   lika luft båda sidor (40 px) så bläddringspilarna (4–44 px från kanten) aldrig täcker text. */
:root body #atlas-reader-modal #reader-chat-scroll#reader-chat-scroll#reader-chat-scroll,
:root body #customer-reader-modal #cust-reader-chat-scroll#cust-reader-chat-scroll#cust-reader-chat-scroll {
  padding-left: 50px !important; padding-right: 50px !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row.msg-row { position: relative !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row.msg-row > div:not(:has(.bubble)) {
  display: flex !important; position: absolute !important; top: 0 !important;
  width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; flex: none !important;
  margin: 0 !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; line-height: 1 !important; z-index: 1 !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:not(:has(.bubble)) { left: 0 !important; right: auto !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:not(:has(.bubble)) { right: 0 !important; left: auto !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:not(:has(.bubble)) svg { width: 13px !important; height: 13px !important; }
/* Kolumnen: full bredd minus svansens plats; namnraden flyttas in förbi ringen. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row.msg-row > div:has(.bubble) { max-width: calc(100% - 10px) !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:has(.bubble) > div:first-child:not(.bubble) { padding-left: 18px !important; margin-bottom: 6px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:has(.bubble) > div:first-child:not(.bubble) { padding-right: 18px !important; margin-bottom: 6px !important; }
:root body :is(#atlas-reader-modal, #customer-reader-modal) .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Svansen uppe, mot ringen/namnet, i alla ärendevyer. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble { border-bottom-left-radius: 18px !important; border-top-left-radius: 0 !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble { border-bottom-right-radius: 18px !important; border-top-right-radius: 0 !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble::after {
  top: 0 !important; bottom: auto !important; clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble::after {
  top: 0 !important; bottom: auto !important; clip-path: polygon(0 0, 100% 0, 0 100%) !important;
}
/* v3c (Patrik 09:2x): ringen på samma höjd som namnet och fri från bubblans överkant ⇒ namnraden lika hög som ringen
   (22 px, texten centrerad mot ringen) + 6 px luft till bubblan. Ringen kan inte lyftas ovanför raden (content-visibility klipper). */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row > div:has(.bubble) > div:first-child:not(.bubble) {
  min-height: 22px !important; line-height: 22px !important; margin-bottom: 6px !important;
}
/* v4b: mejl med tabeller svämmade ut ur bubblan på mobil (mätt: tabell 469 px i 349 px bubbla). Datorns
   `.bubble:has(table) { overflow-x: auto }` (style-tickets.css) slås ut av svansens `overflow: visible` (mobile-soft-shell-reader.css).
   Lås tabellerna till bubblans bredd i stället (bilderna har redan max-width:100 %). */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble table {
  table-layout: fixed !important; width: 100% !important; max-width: 100% !important;
}
/* KAN-423: bildceller behöver auto-layout för att bilden ska stanna bredvid texten. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble table:has(img) {
  table-layout: auto !important;
}
/* Bild efter bild är ett galleri, inte textcellen som behöver ett textminimum. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble table tr > :is(th, td):has(img) + :is(th, td):has(img) {
  min-width: 0 !important;
}

/* v4c: samma luft (50 px) på båda sidor i alla ärendevyer ⇒ bläddringspilarna (15–55 / 392–432 px) ligger aldrig över en bubbla.
   "Aa" ligger sedan telefonrundan 10-14 i svarsfoten, så den gamla 60 px-kolumnen behövs inte. */
:root body #my-chat-scroll-area#my-chat-scroll-area#my-chat-scroll-area#my-chat-scroll-area,
:root body #inbox-detail-body#inbox-detail-body#inbox-detail-body#inbox-detail-body,
:root body #archive-detail-body#archive-detail-body#archive-detail-body#archive-detail-body,
:root body #reader-chat-scroll#reader-chat-scroll#reader-chat-scroll#reader-chat-scroll,
:root body #cust-reader-chat-scroll#cust-reader-chat-scroll#cust-reader-chat-scroll#cust-reader-chat-scroll,
:root body #archive-detail#archive-detail#archive-detail .detail-body.detail-body {
  padding-left: 50px !important; padding-right: 50px !important;
}
/* v4d: namnraden lika i alla vyer (läsarna hade 11 px fet vit, övriga 10 px grå med fett namn). */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row > div:has(.bubble) > div:first-child:not(.bubble) {
  font-size: 11px !important; font-weight: 600 !important; color: var(--text-secondary) !important; opacity: 1 !important;
}
/* Om-vyn (datorrundan 10-14): på mobil ligger Medelprio + Högprio sist som ett par. Ordningen löses här med order,
   inte i about-view.js — mallens ordning styr datorns kolumner (grid-auto-flow: column, 7 rader per kolumn). */
:root body #view-about .about-stats-grid > .about-stat-card--medium, :root body #view-about .about-stats-grid > .about-stat-card--high { order: 1 !important; }