/* =============================================================================
   MOBILSTIL ("mjuka öar") — Ärendevyer: ram och huvud i öppnat ärende, ärendekort, flikar, vyhuvud, textstorlek/bläddring, Hem, global sök, info-/guidemodaler, notispanelen.
   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-tema.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): en gemensam "varmvit" yta för alla prov. Ljust tema = varmvitt; mörka teman = en något ljusare
   nyans av temats egen bakgrund (annars blev öarna ljusa fläckar med ljus text). Alla prov använder var(--ledare-varm). */
:root body { --ledare-varm: #fffaf2; }
:root body:not(.atlas-light-theme) { --ledare-varm: color-mix(in srgb, var(--bg-dark-primary, #1b1f24) 86%, #ffffff); }

/* ---- ur test-ram.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan v2 (Patrik 10-09): rama in hela öppnade ärendet, tydligare kant,
   "popup"-känsla: djupare skugga + tonad bakgrund bakom läsfönstret. */
:root body .detail-container {
  margin: 10px !important;
  border: 1.5px solid color-mix(in srgb, var(--detail-accent, 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 12px 32px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  height: calc(100% - 20px) !important;
  box-sizing: border-box !important;
}
:root body .detail-container > .detail-header-top {
  border-radius: 0 !important;
}
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) {
  background: rgba(0, 0, 0, 0.28) !important;
}
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box {
  margin: 10px !important;
  width: calc(100vw - 20px) !important;
  min-width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  height: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
  border: 1.5px solid color-mix(in srgb, var(--detail-accent, var(--accent-primary)) 75%, transparent) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box !important;
}
/* Mobilrundan v3 (Patrik 10-09): ärendehuvudet får en svag ton av agentfärgen ovanpå
   temats gröna. Inset-skugga målas ovanpå bakgrunden men under innehållet. */
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:has(> [data-reader-drag-handle]),
:root body .detail-container > .detail-header-top {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--detail-accent, var(--accent-primary)) 12%, transparent) !important;
}
/* Garaget: #archive-detail är ett YTTRE omslag med samma klass (.detail-container) runt den riktiga rutan ⇒ den
   generella ramregeln (max-width 100%-20px, ram, skugga) träffade omslaget ⇒ rutan smal och dubbelram. Omslaget osynligt
   i full bredd; den inre rutan får ram/skugga/10 px luft som i övriga vyer. */
:root body #view-archive #archive-detail.detail-container.detail-container {
  margin: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important;
}
:root body #view-archive#view-archive #archive-detail#archive-detail > .detail-container.detail-container.detail-container { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.12) !important; }

/* ---- ur test-admin.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Admin → Personal, ärendekorten.
   Rad 1: ikon · namn · tid. Rad 2: ämne (hela bredden). Rad 3: mjuka pills · ring längst ut till höger. */
:root body #view-admin .admin-ticket-preview.admin-ticket-preview {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "atp-icon atp-sender atp-date"
    "atp-icon atp-subj   atp-subj"
    "atp-icon atp-tags   atp-prio" !important;
  row-gap: 6px !important;
}
:root body #view-admin .admin-ticket-preview .atp-pills.atp-pills {
  justify-self: start !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  gap: 6px !important;
}
:root body #view-admin .admin-ticket-preview .atp-pill.atp-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--dynamic-pill-color, var(--accent-primary)) 30%, transparent) !important;
  background: color-mix(in srgb, var(--dynamic-pill-color, var(--accent-primary)) 14%, transparent) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.2px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Ringen: egen tryckyta längst ut till höger, skild från ärendet. */
:root body #view-admin .admin-ticket-preview .atp-actions.atp-actions {
  justify-self: end !important;
}
:root body #view-admin .admin-ticket-preview .atp-actions > .card-prio-btn.card-prio-btn {
  margin: -8px -8px -8px 0 !important;
}
/* "Ön" (öppnad agent/ärende-panel) tonar ner bakgrunden runt sig, som läsfönstret. */
:root body .detail-container.detail-container {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.10) !important;
}
/* Panelerna bakom ett öppnat ärende ska inte synas som en egen ram med runda hörn
   (Patrik 10-09: "kanten … cirkel-luft-rum i hörnet nedanför headern"). */
:root body :is(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers, #view-templates) .template-editor-container.template-editor-container:has(.detail-container) {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Detaljkortet får aldrig gå utanför skärmen (vissa vyer sätter width:100% + min marginal 10px). */
:root body .detail-container.detail-container { width: auto !important; max-width: calc(100% - 20px) !important; box-sizing: border-box !important; }
/* v2 (Patrik 10-09: "datumen på undre raden … ringen uppe till höger" — samma som ärendekorten i Inkorg/Mina/Garaget,
   v2 hade bara slagit igenom på .team-ticket-card). Admins ärendekort (.admin-ticket-preview): ring uppe till höger,
   datum nere till höger. */
:root body #view-admin .admin-ticket-preview.admin-ticket-preview.admin-ticket-preview {
  grid-template-areas: "atp-icon atp-sender atp-prio" "atp-icon atp-subj atp-subj" "atp-icon atp-tags atp-date" !important;
}
:root body #view-admin .admin-ticket-preview .atp-date.atp-date { grid-area: atp-date !important; align-self: center !important; justify-self: end !important; }
:root body #view-admin .admin-ticket-preview .atp-actions.atp-actions.atp-actions { grid-area: atp-prio !important; align-self: center !important; justify-self: end !important; }

/* ---- ur test-cards.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): alla ärendekort som Admin-korten.
   Rad 1: typikon + namn ........ tid  [⋯]
   Rad 2: förhandstext (hela bredden)
   Rad 3: mjuka runda etiketter ........ ring (längst ut till höger, egen tryckyta) */
:root body .team-ticket-card.team-ticket-card,
:root body .team-ticket-card.team-ticket-card.archive-card {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "mtc-head mtc-time mtc-menu"
    "mtc-prev mtc-prev mtc-prev"
    "mtc-tag  mtc-tag  mtc-prio" !important;
  row-gap: 6px !important;
}
:root body .team-ticket-card.team-ticket-card .ticket-top-right {
  justify-self: end !important;
  align-self: center !important;
}
:root body .team-ticket-card.team-ticket-card .card-prio-btn {
  margin: -8px -8px -8px 0 !important;
}
:root body .team-ticket-card.team-ticket-card .ticket-footer-bar > :not(.ticket-time):not(.ticket-footer-left) {
  justify-self: start !important;
  max-width: none !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
:root body #customer-ticket-list-body .team-ticket-card.team-ticket-card .ticket-footer-bar > :not(.ticket-time):not(.ticket-footer-left) {
  max-width: none !important;
}
/* Mjuka runda etiketter i etikettens egen färg. */
:root body .team-ticket-card.team-ticket-card .ticket-tag,
:root body .team-ticket-card.team-ticket-card .ticket-footer-bar > .ticket-tag,
:root body .team-ticket-card.team-ticket-card .ticket-footer-bar > :not(.ticket-time):not(.ticket-footer-left) > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--dynamic-pill-color, currentColor) 30%, transparent) !important;
  background: color-mix(in srgb, var(--dynamic-pill-color, currentColor) 14%, transparent) !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}
:root body .team-ticket-card.team-ticket-card .ticket-footer-bar > .ticket-tag {
  grid-area: mtc-tag;
  justify-self: start !important;
}
/* ⋯ / plocka / papperskorg: bara rad 1. */
:root body .team-ticket-card.team-ticket-card > .card-menu-btn,
:root body .team-ticket-card.team-ticket-card > .claim-mini-btn,
:root body .team-ticket-card.team-ticket-card > button:not(.card-prio-btn) {
  align-self: center !important;
}
/* Fordons-/kategoriikonen i etiketten (prov-JS lägger den där). */
:root body .team-ticket-card .ticket-tag .ledare-vicon {
  display: inline-flex !important;
  align-items: center;
  margin-right: 2px;
}
:root body .team-ticket-card .ticket-tag .ledare-vicon svg {
  width: 13px !important;
  height: 13px !important;
}
/* Mobilrundan (Patrik 10-09): "saknar kontor" är inte rött längre — rött = ta bort.
   Ärenden utan kontor får temats accent (i produktion: färgen för kontorslöst ärende). */
:root body :is(.team-ticket-card, .admin-ticket-preview)[style*="#ff4444"] { --agent-color: var(--accent-primary) !important; --atp-color: var(--accent-primary) !important; }
:root body :is(.team-ticket-card, .admin-ticket-preview) [style*="#ff4444"] {
  color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary)) !important;
  --dynamic-pill-color: var(--accent-primary) !important;
}
/* Mobilrundan v2 (Patrik 10-09): ring + ⋯ tillsammans högst upp till höger; datumet ner i underkant till höger.
   Rad 1: typikon + namn ........ ring [⋯]
   Rad 2: förhandstext
   Rad 3: etiketter ........ datum */
:root body .team-ticket-card.team-ticket-card.team-ticket-card,
:root body .team-ticket-card.team-ticket-card.team-ticket-card.archive-card {
  grid-template-areas:
    "mtc-head mtc-prio mtc-menu"
    "mtc-prev mtc-prev mtc-prev"
    "mtc-tag  mtc-time mtc-time" !important;
}
:root body .team-ticket-card.team-ticket-card.team-ticket-card .ticket-time { grid-area: mtc-time !important; grid-column: 2 / -1 !important; justify-self: end !important; margin-right: 6px !important; align-self: center !important; }
:root body .team-ticket-card.team-ticket-card.team-ticket-card .ticket-top-right { grid-area: mtc-prio !important; justify-self: end !important; margin-right: -8px !important; }
:root body .team-ticket-card.team-ticket-card.team-ticket-card .card-prio-btn { margin: -8px 0 !important; }

/* ---- ur test-tabs.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): centrera flikarna i toppen i Inkorgen och Mina ärenden.
   "safe center" = centrerat när flikarna får plats, vänsterställt när de inte gör det. */
:root body :is(#view-inbox, #view-my-tickets) > .chat-header > :is(.header-tabs, #template-tabs).header-tabs {
  justify-content: safe center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* Mobilrundan (Patrik 10-09): ingen ruta runt vy-ikonen i rubriken (alla vyer). */
:root body .chat-header h2 svg.header-title-icon.header-title-icon {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
}
/* Mobilrundan (Patrik 10-09): svag skugga under vy-ikonen. */
:root body .chat-header h2 svg.header-title-icon.header-title-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) !important;
}
/* Mobilrundan (Patrik 10-09): bläddringspilen i listans nederkant utan ring, tydligare pil. */
:root body .scroll-hint-btn.scroll-hint-btn {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  width: 44px !important;
  color: var(--accent-primary) !important;
  opacity: 1 !important;
}
:root body .scroll-hint-btn.scroll-hint-btn svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
/* Mobilrundan v2 (Patrik 10-09): vy-ikonen i en subtil rund ton, som infomodalens ikon. */
:root body :is(#view-chat, #view-inbox, #view-my-tickets, #view-archive, #view-customers, #view-templates, #view-about, #view-admin, #view-onboarding) > .chat-header h2 svg.header-title-icon.header-title-icon.header-title-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Flikraden i Admin/Mailmallar har pilar på mobil ⇒ ingen extra uttoning (pilarnas egna kanter tonar). */
:root body :is(#view-admin, #view-templates) > .chat-header > :is(#admin-tabs, #template-tabs).header-tabs,
:root body :is(#view-admin, #view-templates) > .chat-header > :is(#admin-tabs, #template-tabs) { -webkit-mask-image: none !important; mask-image: none !important; }
:root body :is(#admin-tabs, #template-tabs) .ledare-flikpil .template-tabs-scroll-btn {
  width: 32px !important; height: 32px !important; min-height: 32px !important; border-radius: 50% !important; border: none !important; pointer-events: auto !important;
  background: color-mix(in srgb, var(--ledare-varm) 85%, transparent) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; color: var(--accent-primary) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body :is(#admin-tabs, #template-tabs) .ledare-flikpil .template-tabs-scroll-btn svg { width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.6 !important; }
:root body :is(#admin-tabs, #template-tabs) .ledare-flikpil.template-tabs-scroll-edge:not(.hidden) { display: flex !important; } :root body :is(#admin-tabs, #template-tabs) .ledare-flikpil.template-tabs-scroll-edge.hidden { display: none !important; }
:root body #view-admin #admin-tabs .ledare-flikpil.template-tabs-scroll-edge:not(.hidden), :root body #view-templates #template-tabs .ledare-flikpil.template-tabs-scroll-edge:not(.hidden) { display: flex !important; }
/* Flikraderna: webbläsaren sköter lodrätt, vår dragning sköter vågrätt (test-flikdrag.js). */
:root body .chat-header > :is(.header-tabs, #template-tabs), :root body .chat-header > :is(.header-tabs, #template-tabs) .header-tab { touch-action: pan-y !important; }
/* Mobilrundan (Patrik 10-09): flikräknarna som liten upphöjd bricka uppe till höger om ordet — mindre mellanrum mellan flikarna.
   Gäller alla flikrader med .tab-badge (Mailmallar, Inkorg, Mina ärenden …). */
:root body .chat-header .header-tab.header-tab:has(> .tab-badge) { position: relative !important; padding-right: 16px !important; }
:root body .chat-header .header-tab > .tab-badge.tab-badge {
  position: absolute !important; top: 1px !important; right: 0 !important; margin: 0 !important;
  min-width: 17px !important; height: 17px !important; padding: 0 5px !important; box-sizing: border-box !important;
  font-size: 10px !important; line-height: 17px !important; font-weight: 750 !important; border-radius: 999px !important;
  justify-content: center !important; align-items: center !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 20%, transparent) !important; color: var(--accent-primary) !important;
}

/* ---- ur test-head.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): ärendehuvudet — ikonerna upp på namnraden (höger),
   pills får hela andra raden. */
:root body .detail-header-top.detail-header-top > div:has(> .detail-header-actions) {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "detail-title detail-actions"
    "detail-pills detail-pills" !important;
}
:root body .detail-header-top.detail-header-top .detail-subject {
  min-width: 0 !important;
}
:root body .detail-header-top.detail-header-top .detail-subject > span:not(.detail-type-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root body .detail-header-top.detail-header-top .detail-header-actions {
  align-self: center !important;
  margin-right: -6px !important;
}
:root body .detail-header-top.detail-header-top .detail-header-actions {
  gap: 0 !important;
}
:root body .detail-header-top.detail-header-top .detail-header-actions :is(button, .action-icon-btn) {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}
:root body .detail-header-top.detail-header-top .detail-header-actions > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Mobilrundan (Patrik 10-09): meddelandena tonar ut precis ovanför svarsfoten och foten
   får en mjuk övre kant, så det inte blir kant i kant. */
:root body .detail-container .detail-body.scroll-list,
:root body #atlas-reader-modal #reader-chat-scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent) !important;
  padding-bottom: 24px !important;
}
:root body .detail-container .atlas-mobile-reply-footer.atlas-mobile-reply-footer,
:root body #atlas-reader-modal .atlas-mobile-reply-footer.atlas-mobile-reply-footer {
  border-top: 1px solid color-mix(in srgb, var(--detail-accent, var(--accent-primary)) 35%, transparent) !important;
  box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, 0.22) !important;
  position: relative;
  z-index: 2;
}
/* Samma huvud i läsfönstret (Admin/Kunder): ikonerna upp på namnraden, pills på hela rad 2. */
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > div:has(> [data-reader-drag-handle]) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "rd-av rd-name rd-act"
    "rd-pills rd-pills rd-pills" !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
  align-items: center !important;
}
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > div:has(> [data-reader-drag-handle]) > [data-reader-drag-handle] > div:nth-child(1) { grid-area: rd-av !important; }
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > div:has(> [data-reader-drag-handle]) > [data-reader-drag-handle] > div:nth-child(2) {
  grid-area: rd-name !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > div:has(> [data-reader-drag-handle]) > [data-reader-drag-handle] > div:nth-child(3) {
  grid-area: rd-act !important;
  margin: 0 -6px 0 0 !important;
  gap: 0 !important;
}
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > div:has(> [data-reader-drag-handle]) > [data-reader-drag-handle] > div:nth-child(3) > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > div:has(> [data-reader-drag-handle]) > div:not([data-reader-drag-handle]) {
  grid-area: rd-pills !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* ---- ur test-nedre.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): bläddring (‹ 3/4 ›) och textstorlek nere vid tummen,
   precis ovanför svarsraden, i stället för överst. */
:root body .bfs-anchor.bfs-anchor {
  order: 99 !important;
  position: sticky !important;
  top: auto !important;
  bottom: 0 !important;
  margin: auto 0 0 0 !important;
  z-index: 6 !important;
}
/* Bläddringen: nav-raden flyttas till precis före foten, knapparna ritas uppåt
   över textstorleksremsan (vänstra delen). */
:root body .detail-container > .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav,
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > .atlas-ticket-detail-side-nav { order: 3 !important; }
:root body .detail-container > .atlas-mobile-reply-footer,
:root body .detail-container > .detail-footer-area,
:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box.glass-modal-box.glass-modal-box > .atlas-mobile-reply-footer { order: 4 !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.atlas-ticket-detail-nav-btn {
  top: -38px !important;
}
/* Uttoningen ovanför foten ska inte äta remsan: tona i stället ovanför remsan. */
:root body .detail-container .detail-body.scroll-list,
:root body #atlas-reader-modal #reader-chat-scroll {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding-bottom: 0 !important;
}
/* Mobilrundan v2 (Patrik 10-09): textstorleken lodrätt på högra sidan, största A överst;
   bläddringen centrerad längst ner. */
:root body .bfs-anchor.bfs-anchor {
  align-self: flex-end !important;
  width: auto !important;
  height: auto !important;
  margin: auto 6px 6px auto !important;
  background: transparent !important;
  pointer-events: none;
}
:root body .bfs-anchor.bfs-anchor .bfs-pill {
  flex-direction: column-reverse !important;
  height: auto !important;
  width: 40px !important;
  padding: 4px 0 !important;
  gap: 2px !important;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
:root body .bfs-anchor.bfs-anchor .bfs-btn {
  width: 40px !important;
  height: 34px !important;
}
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-prev { left: calc(50% - 64px) !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-next { left: calc(50% + 16px) !important; }
/* Bläddringsknapparna flyter över texten ⇒ ogenomskinliga med mjuk skugga. */
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.atlas-ticket-detail-nav-btn {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-dark-primary)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
/* Mobilrundan v3: textstorleken lodrätt mitt på högra kanten (höjdled). Sticky överst i
   scrollytan med top = halva höjden; negativ marginal så den inte tar plats i flödet. */
:root body .bfs-anchor.bfs-anchor {
  order: -1 !important;
  top: calc(50% - 76px) !important;
  bottom: auto !important;
  margin: 0 6px -152px auto !important;
}
/* Mobilrundan v4: båda knapparna visar sitt mål ("‹ 1/4", "3/4 ›"), centrerade. */
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-next .atlas-ticket-detail-nav-counter { display: inline !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-next { flex-direction: row-reverse !important; width: 76px !important; left: calc(50% + 2px) !important; }
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-prev { left: calc(50% - 78px) !important; }
/* Mobilrundan v5: textstorleken på vänster kant (mitt i höjdled). */
:root body .bfs-anchor.bfs-anchor {
  align-self: flex-start !important;
  margin: 0 auto -152px 4px !important;
}
/* Mobilrundan v6: centrerad i luften mellan rutans kant och ärendebubblan. */
:root body .bfs-anchor.bfs-anchor { margin-left: -4px !important; }
/* Textstorleksremsan får en egen fri kolumn till vänster i alla ärenden,
   oavsett om bubblan har avatar eller inte (vidarebefordrade/egna mail gick under den). */
:root body .detail-container .detail-body.scroll-list.scroll-list,
:root body #atlas-reader-modal #reader-chat-scroll#reader-chat-scroll,
:root body #customer-reader-modal [id*="chat-scroll"] {
  padding-left: 60px !important;
}

:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll).detail-body,
:root body :is(#reader-chat-scroll, #cust-reader-chat-scroll)#reader-chat-scroll { padding-left: 60px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) { padding-left: 60px !important; }
:root body .bfs-anchor.bfs-anchor.bfs-anchor { margin-left: -50px !important; }
/* Avstängd bläddringsknapp: ogenomskinlig botten, bara innehållet tonas (texten syntes igenom). */
:root body .atlas-ticket-detail-side-nav.atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.is-disabled.is-disabled {
  opacity: 1 !important;
  color: color-mix(in srgb, var(--text-secondary) 40%, transparent) !important;
}
/* Kundbubblor: avataren dubblerar luften när ärendet nu har en egen vänsterkolumn
   (namnet och initialerna står redan i huvudet) ⇒ dölj den, bubblan börjar i samma linje. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) .msg-row > .msg-avatar {
  display: none !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) .msg-row > div:not(.msg-avatar) {
  max-width: 100% !important;
  flex: 1 1 auto !important;
}
/* Bubblan fyller raden även när innehållet är kort (annars högerställd och smalare). */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) .msg-row > div:not(.msg-avatar) { align-items: stretch !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) .msg-row .bubble { width: 100% !important; box-sizing: border-box !important; }
/* Garaget (arkiverat ärende): scrollytan saknar id ⇒ samma vänsterkolumn och flexflöde här. */
:root body #archive-detail .detail-container > .detail-body.detail-body {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 60px !important;
}
/* Garaget: foten efter bläddringen (pilarna låg i foten) och i två rader:
   rad 1 = ärendets pills (svepbara) · rad 2 = "Arkiverat · skrivskyddat"-pill ... återställ · radera. */
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) {
  order: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas: "pills pills pills" "ro restore del" !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
  padding: 10px 12px !important;
  height: auto !important;
  min-height: 0 !important;
}
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > .mobile-detail-footer-pills { grid-area: pills; min-width: 0 !important; }
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > .desktop-footer-close-pill { display: none !important; }
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > #archive-readonly-label {
  grid-area: ro;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > #archive-readonly-label::before {
  content: "Arkiverat · skrivskyddat";
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
}
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > #archive-restore-btn { grid-area: restore; }
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > #archive-delete-btn { grid-area: del; }
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > :is(#archive-restore-btn, #archive-delete-btn) {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important;
}
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > #archive-delete-btn { background: color-mix(in srgb, #e5484d 14%, transparent) !important; color: #c62a2f !important; }
:root body #archive-detail .detail-container > div:has(> #archive-readonly-label) > #archive-restore-btn { background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; }

/* ---- ur test-hem.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): HEM i samma språk som ärendekorten.
   Ordning: hälsning+klocka → Mina ärenden → Kom igång → Att göra → Kontor. */
:root body #view-chat #home-widgets-area .hw-bottom-row { display: contents !important; }
:root body #view-chat #home-widgets-area .hw-welcome-card.hw-card { order: 1 !important; }
:root body #view-chat #home-widgets-area .hw-stats-card.hw-card { order: 2 !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-card.hw-card { order: 3 !important; }
:root body #view-chat #home-widgets-area .hw-todo-card.hw-card { order: 4 !important; }
:root body #view-chat #home-widgets-area .hw-offices-card.hw-card { order: 5 !important; }
:root body #view-chat #home-widgets-area .hw-private-card.hw-card { order: 6 !important; }
:root body #view-chat #home-widgets-area {
  row-gap: 12px !important;
  gap: 12px !important;
}

/* Alla kort: mjuka, utan ram, egen ljus ton. */
:root body #view-chat #home-widgets-area .hw-card.hw-card {
  border: none !important;
  border-radius: 18px !important;
  background: var(--mtc-card-bg) !important;
  box-shadow: var(--mtc-card-shadow) !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Hälsning + klocka på en rad. */
:root body #view-chat #home-widgets-area .hw-welcome-card.hw-card {
  padding: 14px 16px !important;
}
:root body #view-chat #home-widgets-area .hw-welcome-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "greet time" "date time" !important;
  align-items: center !important;
  text-align: left !important;
  row-gap: 2px !important;
  width: 100% !important;
}
:root body #view-chat #home-widgets-area .hw-welcome-greeting { grid-area: greet; font-size: 15px !important; margin: 0 !important; text-align: left !important; }
:root body #view-chat #home-widgets-area .hw-welcome-date { grid-area: date; font-size: 13px !important; margin: 0 !important; text-align: left !important; }
:root body #view-chat #home-widgets-area .hw-welcome-time {
  grid-area: time;
  font-size: 30px !important;
  line-height: 1 !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* Mina ärenden: tre siffror i en rad. */
:root body #view-chat #home-widgets-area .hw-stats-card.hw-card { padding: 14px 16px !important; }
:root body #view-chat #home-widgets-area .hw-stats-card > h3 { margin: 0 0 10px 0 !important; }
:root body #view-chat #home-widgets-area .hw-stats-card > div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
:root body #view-chat #home-widgets-area .hw-stat-item.hw-stat-item {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 10px 12px !important;
  min-height: 64px !important;
  border: none !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) !important;
  box-shadow: none !important;
  margin: 0 !important;
}
:root body #view-chat #home-widgets-area .hw-stat-item.hw-stat-internal {
  background: color-mix(in srgb, #d4a017 10%, var(--bg-dark-primary)) !important;
}

/* Kom igång: luftigare men kompakt. */
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-card.hw-card { padding: 14px 16px !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-actions :is(button) {
  min-height: 44px !important;
  border-radius: 14px !important;
}

/* Att göra: rader utan ramar och vänsterkant, lugna knappar. */
:root body #view-chat #home-widgets-area .hw-todo-card.hw-card { padding: 14px 12px !important; }
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item {
  border: none !important;
  border-image: linear-gradient(transparent, transparent) 1 !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
  box-shadow: none !important;
}
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item :is(.hw-todo-bell, .hw-todo-del) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root body #view-chat #home-widgets-area .hw-todo-input.hw-todo-input {
  border-radius: 22px !important;
  height: 44px !important;
}

/* Kontor: samma lugna ton på alla, två per rad, inga färgade ramar. */
:root body #view-chat #home-widgets-area .hw-offices-card.hw-card { padding: 14px 12px !important; }
:root body #view-chat #home-widgets-area .hw-offices-list.hw-offices-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
:root body #view-chat #home-widgets-area .hw-office-chip.hw-office-chip {
  border: none !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) !important;
  box-shadow: none !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 12px !important;
}
/* Bocken: tydlig rund ruta att trycka i. */
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item .hw-todo-check {
  width: 30px !important;
  height: 30px !important;
  border: 2px solid color-mix(in srgb, var(--accent-primary) 55%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, transparent) !important;
}
/* Lite tydligare ton på rader och kontorschips mot kortet. */
:root body #view-chat #home-widgets-area .hw-office-chip.hw-office-chip,
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item {
  background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-dark-primary)) !important;
}
/* Kom igång: kugghjulet i kortets övre högra hörn; "3 av 3" flyttar ner dit hjulet satt. */
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-card.hw-card { position: relative !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-progress .atlas-onboarding-icon-button {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-progress {
  justify-content: flex-end !important;
  align-self: end !important;
  padding-top: 36px !important;
}
/* Kom igång v2 (Patrik 10-09): en kolumn i stället för två skeva.
   KOM IGÅNG ............ ⚙
   Få Atlas redo för vardagen
   Grundfunktionerna har sitt underlag på plats.
   [✓ 3 av 3 grundfunktioner klara]
   [ Testa mig ]  [ Slutför › ]                                          */
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-card.hw-card.hw-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 16px !important;
}
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-copy { padding-right: 44px !important; margin: 0 !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-copy h3 { margin: 6px 0 4px !important; font-size: 18px !important; line-height: 1.25 !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-copy p { margin: 0 !important; font-size: 13.5px !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-progress.atlas-onboarding-summary-progress {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  align-self: flex-start !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
  text-align: left !important;
}
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-progress strong { font-size: 14px !important; line-height: 1.3 !important; margin: 0 !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-progress span { font-size: 13px !important; margin: 0 !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-progress .atlas-onboarding-icon-button { top: 10px !important; right: 10px !important; }
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 4px 0 0 !important;
}
/* Testa mig = sekundär (ljus), Slutför = primär. */
:root body #view-chat #home-widgets-area .atlas-onboarding-summary-actions .atlas-widget-preview-button {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
  color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary)) !important;
  border: none !important;
  box-shadow: none !important;
}
/* Påminnelseklockan i Att göra: större och tydligare. */
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item .hw-todo-bell {
  width: 36px !important;
  height: 36px !important;
  opacity: 1 !important;
  color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary)) !important;
}
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item .hw-todo-bell svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2 !important;
  opacity: 1 !important;
}
/* Att göra: huvudets knappar i samma kolumner som radernas.
   Rad: klocka · papperskorg · bock  ⇒  Huvud: utför valda · radera valda · välj alla. */
:root body #view-chat #home-widgets-area .hw-todo-section-actions { gap: 6px !important; }
:root body #view-chat #home-widgets-area .hw-todo-section-actions > .hw-todo-head-action-btn { order: 1 !important; }
:root body #view-chat #home-widgets-area .hw-todo-section-actions > .hw-todo-head-icon-btn.danger { order: 2 !important; }
:root body #view-chat #home-widgets-area .hw-todo-section-actions > .hw-todo-head-icon-btn:not(.danger) { order: 3 !important; }
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item :is(.hw-todo-bell, .hw-todo-del, .hw-todo-check) {
  width: 36px !important;
  min-width: 36px !important;
  margin: 0 !important;
}
:root body #view-chat #home-widgets-area .hw-todo-item.hw-todo-item { column-gap: 6px !important; gap: 6px !important; padding-right: 0 !important; }
:root body #view-chat #home-widgets-area .hw-todo-item .hw-todo-text { min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* ---- ur test-gsok.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): global sök — rundad, lyft ruta i stället för platt. */
:root body #atlas-global-search-overlay #atlas-global-search-modal {
  border-radius: 24px !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
  padding: 10px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
}
/* Sökraden: eget rundat fält med mjuk skugga, ikonen i accentfärg. */
:root body #atlas-global-search-overlay #atlas-global-search-modal > div:first-child {
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 45%, transparent) !important;
  border-radius: 999px !important;
  background: var(--bg-dark-primary) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.10) !important;
  padding: 0 16px !important;
  min-height: 52px !important;
  margin: 0 0 8px 0 !important;
  align-items: center !important;
  gap: 10px !important;
}
:root body #atlas-global-search-overlay #atlas-global-search-modal > div:first-child > svg {
  color: var(--accent-primary) !important;
  stroke: var(--accent-primary) !important;
  width: 20px !important;
  height: 20px !important;
}
:root body #atlas-global-search-overlay #atlas-global-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
}
:root body #atlas-global-search-overlay #atlas-global-search-modal kbd { display: none !important; }
:root body #atlas-global-search-overlay #atlas-global-search-results {
  border: none !important;
  padding: 2px !important;
}
/* Ringen (prioritetsmarkering, ::before) längst ut till höger även i sökträffarna. */
:root body .gs-ticket-card.team-ticket-card .ticket-footer-right {
  justify-self: stretch !important;
  width: 100% !important;
  display: flex !important;
}
:root body .gs-ticket-card.team-ticket-card .ticket-footer-right::before {
  order: 99 !important;
  margin-left: auto !important;
  margin-right: 4px !important;
  flex: 0 0 auto !important;
}
/* Rutan når längre ner. */
:root body #atlas-global-search-overlay #atlas-global-search-results {
  max-height: calc(100dvh - 240px) !important;
}
:root body .gs-ticket-card.team-ticket-card .ticket-footer-right { justify-content: flex-start !important; }
/* Sökträffarnas historik-/anteckningsknappar: rad 1, efter tiden — inte i ringens cell. */
:root body .gs-ticket-card.team-ticket-card .ticket-top-right {
  grid-area: mtc-menu !important;
  grid-row: 1 !important;
}
:root body .gs-ticket-card.team-ticket-card .ticket-top-right .notes-trigger-btn.has-notes-active {
  margin: -8px -6px -8px 0 !important;
}
/* Ringen i samma kolumn som anteckningsikonen, längst ut. */
:root body .gs-ticket-card.team-ticket-card .ticket-footer-bar > .ticket-footer-right {
  grid-column: 1 / -1 !important;
}
:root body .gs-ticket-card.team-ticket-card .ticket-footer-right::before { margin-right: 3px !important; }

/* ---- ur test-modal.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): infomodaler som ett flytande, rundat kort (samma språk som
   ärendet): luft runt, radie, djup skugga, nedtonad bakgrund; lugnare innehåll. */
:root body .atlas-help-overlay.atlas-mobile-anchored-modal {
  background: rgba(0, 0, 0, 0.28) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
:root body .atlas-help-overlay .help-modal-box.help-modal-box {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  background: var(--bg-dark-primary) !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Huvud: kompakt, svag accentton, ingen hård kant. */
:root body .atlas-help-overlay .help-view-header {
  padding: 14px 56px 14px 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-primary)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  min-height: 0 !important;
}
:root body .atlas-help-overlay .help-view-icon-circle {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
}
/* Stäng: rund, ingen ruta, inne i kortets hörn. */
:root body .atlas-help-overlay .atlas-mobile-modal-close.atlas-mobile-modal-close {
  top: 22px !important;
  right: 20px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}
/* Innehåll: punkterna som mjuka block i stället för en lång textvägg. */
:root body .atlas-help-overlay .help-content {
  flex: 1 1 auto !important;
  padding: 12px 12px 8px !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
:root body .atlas-help-overlay .help-content ul {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
:root body .atlas-help-overlay .help-content li {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
/* Fot: knapparna som mjuka chips i två kolumner. */
:root body .atlas-help-overlay .help-footer {
  padding: 10px 12px 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
}
:root body .atlas-help-overlay .help-footer > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
:root body .atlas-help-overlay .help-footer :is(a, button) {
  border: none !important;
  border-radius: 999px !important;
  min-height: 40px !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-primary)) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: auto !important;
}
/* Fotens sista span (Windows-klient + Google Play) packas upp i samma rutnät. */
:root body .atlas-help-overlay .help-footer > div > span { display: contents !important; }
:root body .atlas-help-overlay .help-footer :is(a, button) { width: 100% !important; box-sizing: border-box !important; }
:root body .atlas-help-overlay .help-content li { padding: 9px 12px !important; font-size: 13.5px !important; }
:root body .atlas-help-overlay .help-footer > div { width: 100% !important; max-width: none !important; }
:root body .atlas-help-overlay .help-footer > div > span > :last-child { grid-column: 1 / -1 !important; }
/* Stäng: bara ett tydligt kryss, ingen ring/platta. */
:root body :is(.atlas-help-overlay, body) .atlas-mobile-modal-close.atlas-mobile-modal-close.atlas-mobile-modal-close {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 44px !important;
  top: 18px !important;
  right: 14px !important;
  color: var(--text-primary) !important;
}
:root body :is(.atlas-help-overlay, body) .atlas-mobile-modal-close.atlas-mobile-modal-close.atlas-mobile-modal-close svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.6 !important;
  stroke: currentColor !important;
}
/* Guidemodalerna (vy-guiderna, .atlas-info-modal) i samma flytande kortspråk. */
:root body .custom-modal-overlay.atlas-mobile-anchored-modal:has(.atlas-info-modal-box) {
  background: rgba(0, 0, 0, 0.28) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
:root body .custom-modal-overlay .glass-modal-box.atlas-info-modal-box.atlas-info-modal-box {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  height: 100% !important; max-height: 100% !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  background: var(--bg-dark-primary) !important;
  display: flex !important; flex-direction: column !important;
}
:root body .atlas-info-modal-box .help-view-header {
  padding: 14px 56px 14px 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-primary)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
}
:root body .atlas-info-modal-box .help-view-icon-circle {
  width: 36px !important; height: 36px !important; border: none !important; box-shadow: none !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
  color: var(--accent-primary) !important;
}
:root body .atlas-info-modal-box .help-view-icon-circle svg { stroke: var(--accent-primary) !important; color: var(--accent-primary) !important; }
:root body .atlas-info-modal-box .atlas-info-scroll {
  flex: 1 1 auto !important;
  padding: 12px 14px 8px !important;
  margin: 0 !important;
  width: auto !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
:root body .atlas-info-modal-box .atlas-info-scroll > div { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
/* Inledningsrutan: mjukt block utan ram. */
:root body .atlas-info-modal-box .atlas-info-scroll > div:first-child {
  border: none !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) !important;
  padding: 12px 14px !important;
}
/* Avsnittsrubrikerna i accentfärg (inte rödbrun), linjen under borttagen. */
:root body .atlas-info-modal-box .atlas-info-scroll [style*="text-transform: uppercase"],
:root body .atlas-info-modal-box .atlas-info-scroll [style*="text-transform:uppercase"] {
  color: var(--accent-primary) !important;
  border-bottom: none !important;
}
/* Fot: samma rundade chips två i bredd som infomodalen. */
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) {
  padding: 10px 12px 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
}
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) > div {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important;
}
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) > div:has(> :only-child) > :only-child { grid-column: 1 / -1; }
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) :is(a, button) {
  border: none !important; border-radius: 999px !important; min-height: 40px !important;
  justify-content: center !important; width: 100% !important; box-sizing: border-box !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-primary)) !important;
  color: var(--text-primary) !important; box-shadow: none !important; margin: 0 !important;
}
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
}
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) > div { display: contents !important; }
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header) > div:last-child > :last-child:nth-child(odd) { grid-column: auto; }
:root body .atlas-info-modal-box > div:last-of-type:not(.atlas-info-scroll):not(.help-view-header):has(> div:first-child > :nth-child(3):last-child):has(> div:last-child > :nth-child(2):last-child) > div:last-child > :last-child { grid-column: 1 / -1 !important; }
/* Stäng-krysset i guidemodalerna: samma rena kryss inne i kortets hörn. */
:root body .custom-modal-overlay.atlas-mobile-anchored-modal > .atlas-mobile-modal-close.atlas-mobile-modal-close.atlas-mobile-modal-close {
  background: none !important; border: none !important; box-shadow: none !important;
  width: 44px !important; height: 44px !important; top: 22px !important; right: 16px !important;
  color: var(--text-primary) !important; backdrop-filter: none !important;
}
:root body .custom-modal-overlay.atlas-mobile-anchored-modal > .atlas-mobile-modal-close.atlas-mobile-modal-close.atlas-mobile-modal-close svg {
  width: 24px !important; height: 24px !important; stroke-width: 2.6 !important; stroke: currentColor !important;
}

/* === Samma guide-/infostil för ALLA .glass-modal-box med .help-view-header (kunder-info m.fl.) === */
/* (generisk) (vy-guiderna, .atlas-info-modal) i samma flytande kortspråk. */
:root body .custom-modal-overlay.atlas-mobile-anchored-modal:has(.glass-modal-box:has(> .help-view-header)) {
  background: rgba(0, 0, 0, 0.28) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
:root body .custom-modal-overlay .glass-modal-box.glass-modal-box:has(> .help-view-header) {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  height: 100% !important; max-height: 100% !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  background: var(--bg-dark-primary) !important;
  display: flex !important; flex-direction: column !important;
}
:root body .glass-modal-box:has(> .help-view-header) .help-view-header {
  padding: 14px 56px 14px 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-primary)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
}
:root body .glass-modal-box:has(> .help-view-header) .help-view-icon-circle {
  width: 36px !important; height: 36px !important; border: none !important; box-shadow: none !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
  color: var(--accent-primary) !important;
}
:root body .glass-modal-box:has(> .help-view-header) .help-view-icon-circle svg { stroke: var(--accent-primary) !important; color: var(--accent-primary) !important; }
:root body .glass-modal-box:has(> .help-view-header) > div:nth-child(2):not(.help-view-header) {
  flex: 1 1 auto !important;
  padding: 12px 14px 8px !important;
  margin: 0 !important;
  width: auto !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
:root body .glass-modal-box:has(> .help-view-header) > div:nth-child(2):not(.help-view-header) > div { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
/* Inledningsrutan: mjukt block utan ram. */
:root body .glass-modal-box:has(> .help-view-header) > div:nth-child(2):not(.help-view-header) > div:first-child {
  border: none !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) !important;
  padding: 12px 14px !important;
}
/* Avsnittsrubrikerna i accentfärg (inte rödbrun), linjen under borttagen. */
:root body .glass-modal-box:has(> .help-view-header) > div:nth-child(2):not(.help-view-header) [style*="text-transform: uppercase"],
:root body .glass-modal-box:has(> .help-view-header) > div:nth-child(2):not(.help-view-header) [style*="text-transform:uppercase"] {
  color: var(--accent-primary) !important;
  border-bottom: none !important;
}
/* Fot: samma rundade chips två i bredd som infomodalen. */
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) {
  padding: 10px 12px 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
}
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) > div {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important;
}
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) > div:has(> :only-child) > :only-child { grid-column: 1 / -1; }
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) :is(a, button) {
  border: none !important; border-radius: 999px !important; min-height: 40px !important;
  justify-content: center !important; width: 100% !important; box-sizing: border-box !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-primary)) !important;
  color: var(--text-primary) !important; box-shadow: none !important; margin: 0 !important;
}
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
}
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) > div { display: contents !important; }
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header) > div:last-child > :last-child:nth-child(odd) { grid-column: auto; }
:root body .glass-modal-box:has(> .help-view-header) > div:last-of-type:not(:nth-child(2)):not(.help-view-header):has(> div:first-child > :nth-child(3):last-child):has(> div:last-child > :nth-child(2):last-child) > div:last-child > :last-child { grid-column: 1 / -1 !important; }
/* Stäng-krysset i guidemodalerna: samma rena kryss inne i kortets hörn. */
:root body .custom-modal-overlay.atlas-mobile-anchored-modal > .atlas-mobile-modal-close.atlas-mobile-modal-close.atlas-mobile-modal-close {
  background: none !important; border: none !important; box-shadow: none !important;
  width: 44px !important; height: 44px !important; top: 22px !important; right: 16px !important;
  color: var(--text-primary) !important; backdrop-filter: none !important;
}
:root body .custom-modal-overlay.atlas-mobile-anchored-modal > .atlas-mobile-modal-close.atlas-mobile-modal-close.atlas-mobile-modal-close svg {
  width: 24px !important; height: 24px !important; stroke-width: 2.6 !important; stroke: currentColor !important;
}
:root body .custom-modal-overlay.atlas-mobile-anchored-modal:has(> .glass-modal-box > .help-view-header) {
  background: rgba(0, 0, 0, 0.28) !important; padding: 10px !important; box-sizing: border-box !important;
}
/* Punkterna som mjuka block (samma som Hem-infon). */
:root body .glass-modal-box > .help-view-header ~ div:nth-child(2) :is(li, ul > div, .help-item) {
  margin: 0 0 8px 0 !important; padding: 9px 12px !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
  font-size: 13.5px !important; line-height: 1.45 !important; list-style: none !important;
}
:root body .glass-modal-box > .help-view-header ~ div:nth-child(2) ul { padding: 0 !important; margin: 0 !important; }
/* Info-tooltipen (#atlas-sh-tooltip, admin-core.js:297) — ljus i ljusa teman i stället för svart. */
:root body.atlas-light-theme #atlas-sh-tooltip#atlas-sh-tooltip {
  background: color-mix(in srgb, var(--ledare-varm) 88%, var(--bg-dark-primary)) !important;
  color: var(--text-primary) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08) !important;
  font-size: 13.5px !important; line-height: 1.45 !important; padding: 12px 14px !important;
}
:root body #atlas-sh-tooltip#atlas-sh-tooltip { border-radius: 16px !important; }
/* Övriga mörka rutor i ljusa teman (svep 10-09: CSS + JS-inlinestil, mörk bakgrund utan ljus-override):
   - #atlas-mail-tooltip (detail-ui.js:1005), - #atlas-bulk-progress (bulk-ops.js:36),
   - .bulk-action-toolbar (admin-gaps-bulk-reader.css:185), - broadcast-rutan (admin-broadcast.js:71, inline #111115),
   - #cust-mail-template-select option (style-tickets.css:457). */
:root body.atlas-light-theme :is(#atlas-mail-tooltip, #atlas-bulk-progress, .bulk-action-toolbar)[style],
:root body.atlas-light-theme :is(#atlas-mail-tooltip, #atlas-bulk-progress, .bulk-action-toolbar) {
  background: color-mix(in srgb, var(--ledare-varm) 88%, var(--bg-dark-primary)) !important;
  color: var(--text-primary) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important; border-radius: 16px !important;
}
:root body.atlas-light-theme :is(#atlas-mail-tooltip, #atlas-bulk-progress, .bulk-action-toolbar) * { color: inherit; }
:root body.atlas-light-theme .custom-modal-overlay > .glass-modal-box[style*="#111115"] {
  background: var(--bg-dark-primary) !important; color: var(--text-primary) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important; border-radius: 22px !important;
}
:root body.atlas-light-theme #cust-mail-template-select option { background-color: var(--bg-dark-primary) !important; color: var(--text-primary) !important; }

/* ---- ur test-notis.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): notispanelen som flytande rundat kort med mjuka rader. */
:root body #notif-panel#notif-panel {
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  background: var(--bg-dark-primary) !important;
  max-height: calc(100dvh - 140px) !important;
  flex-direction: column !important;
}
:root body #notif-panel .notif-panel-header {
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-primary)) !important;
  padding: 8px 12px !important;
  align-items: center !important;
}
:root body #notif-panel .notif-tab.notif-tab {
  border-radius: 999px !important;
  border: none !important;
  min-height: 36px !important;
  padding: 0 14px !important;
}
:root body #notif-panel .notif-tab.notif-tab.active {
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
:root body #notif-panel .notif-clear-btn.notif-clear-btn {
  border: none !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  width: auto !important;
}
:root body #notif-panel .notif-tab-content {
  padding: 4px 10px 10px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}
:root body #notif-panel .notif-item.notif-item {
  border: none !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
  margin: 0 0 8px 0 !important;
  padding: 10px 8px 10px 12px !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
:root body #notif-panel .notif-icon-block.notif-icon-block {
  border: none !important;
  border-radius: 50% !important;
}
:root body #notif-panel .notif-date-sep { padding: 10px 6px 6px !important; border: none !important; }
:root body #notif-panel [class*="badge"], :root body #notif-panel .notif-item-body span[style*="border"] {
  border-radius: 999px !important;
}
:root body #notif-panel .notif-item.notif-item { align-items: center !important; padding: 8px 6px 8px 10px !important; gap: 10px !important; }
:root body #notif-panel .notif-item-dismiss.notif-item-dismiss { height: 32px !important; min-height: 32px !important; align-self: center !important; }
:root body #notif-panel .notif-clear-btn.notif-clear-btn { align-self: center !important; margin: 0 !important; }
:root body #notif-panel .notif-panel-header { min-height: 0 !important; }
/* Rensa = röd ton (tar bort). Flikarna centrerade, Rensa till höger utanför flödet. */
:root body #notif-panel .notif-clear-btn.notif-clear-btn {
  background: color-mix(in srgb, #e5484d 14%, transparent) !important;
  color: #c62a2f !important;
  font-weight: 600 !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
:root body #notif-panel .notif-panel-header { position: relative !important; justify-content: center !important; padding-right: 84px !important; padding-left: 84px !important; }
:root body #notif-panel .notif-tabs { justify-content: center !important; margin: 0 auto !important; }
:root body #notif-panel .notif-clear-btn.notif-clear-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
/* Klickbara notiser (öppnar ett ärende) = kort med ton, skugga och pil ›.
   Upplysningar utan mål (t.ex. "13 nya påminnelser") = platta, streckad kant, tonad text. */
:root body #notif-panel .notif-item.notif-item.notif-history-clickable {
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 10px -6px rgba(0,0,0,0.25) !important;
  position: relative !important;
  padding-right: 30px !important;
}
:root body #notif-panel .notif-item.notif-item.notif-history-clickable::after {
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid var(--accent-primary) !important;
  border-top: 2px solid var(--accent-primary) !important;
  transform: translateY(-50%) rotate(45deg) !important;
  opacity: 0.8;
}
:root body #notif-panel .notif-item.notif-item:not(.notif-history-clickable) {
  background: transparent !important;
  border: 1.5px dashed color-mix(in srgb, var(--text-secondary) 35%, transparent) !important;
  box-shadow: none !important;
}
:root body #notif-panel .notif-item.notif-item:not(.notif-history-clickable) .notif-item-body {
  opacity: 0.75;
}
/* Rader med pilen: dölj den lilla grå pilen som redan fanns i tidraden. */
:root body #notif-panel .notif-history-clickable .notif-item-body [class*="chevron"],
:root body #notif-panel .notif-history-clickable .notif-item-body svg:last-child:not(:first-child) { display: none !important; }
/* En färg per notis = ärendets färg (prov-JS sätter --notif-c). */
:root body #notif-panel .notif-item .notif-icon-block.notif-icon-block {
  background: color-mix(in srgb, var(--notif-c, var(--accent-primary)) 16%, transparent) !important;
  color: var(--notif-c, var(--accent-primary)) !important;
}
:root body #notif-panel .notif-item .notif-type-pill.notif-type-pill {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--notif-c, var(--accent-primary)) 30%, transparent) !important;
  background: color-mix(in srgb, var(--notif-c, var(--accent-primary)) 12%, transparent) !important;
  color: color-mix(in srgb, var(--notif-c, var(--accent-primary)) 70%, var(--text-primary)) !important;
}
:root body #notif-panel .notif-item.notif-item.notif-history-clickable::after {
  border-color: var(--notif-c, var(--accent-primary)) !important;
}
/* Senaste-fliken: samma klickbara kort som Notiser (ton, skugga, runda ikoner, tydlig pil). */
:root body #notif-panel .notif-ticket-history-row.notif-ticket-history-row {
  width: 100% !important;
  border: none !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 10px -6px rgba(0,0,0,0.25) !important;
  margin: 0 0 8px 0 !important;
  padding: 10px 10px 10px 12px !important;
  min-height: 56px !important;
  align-items: center !important;
  gap: 10px !important;
}
:root body #notif-panel .notif-ticket-history-icon.notif-ticket-history-icon {
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
}
:root body #notif-panel .notif-ticket-history-label { font-size: 14px !important; }
:root body #notif-panel .notif-ticket-history-meta { font-size: 12.5px !important; margin-top: 2px !important; }
:root body #notif-panel .notif-ticket-history-row > svg:last-child {
  width: 16px !important;
  height: 16px !important;
  color: var(--accent-primary) !important;
  stroke: var(--accent-primary) !important;
  stroke-width: 2.5 !important;
  opacity: 0.9 !important;
}
:root body #notif-panel #notif-tab-senaste { padding-top: 10px !important; }
/* Förklaringskort överst i varje flik (mjukt, tonat, samma språk som panelen). */
:root body #notif-panel .notif-tab-intro {
  flex-shrink: 0;
  margin: 10px 10px 2px;
  padding: 10px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  color: color-mix(in srgb, var(--text-primary) 75%, transparent);
  font-size: 12.5px;
  line-height: 1.45;
}
:root body #notif-panel .notif-tab-intro:empty { display: none; }
/* Senaste: tiden i högra hörnet (övre raden), pilen under. */
:root body #notif-panel .notif-ticket-history-row.notif-ticket-history-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  grid-template-areas: "ic body time" "ic body pil" !important;
  row-gap: 2px !important;
}
:root body #notif-panel .notif-ticket-history-icon { grid-area: ic; }
:root body #notif-panel .notif-ticket-history-body { grid-area: body; min-width: 0; }
:root body #notif-panel .ledare-hist-time {
  grid-area: time;
  align-self: start;
  justify-self: end;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
:root body #notif-panel .notif-ticket-history-row > svg:last-child { grid-area: pil; justify-self: end; align-self: end; }
/* När ett ärende öppnas ur notispanelen: göm panelen bakom läsfönstret så dess
   runda kant inte sticker upp ovanför ärendets huvud. Panelen finns kvar (stängs inte). */
:root body:has(:is(#atlas-reader-modal, #customer-reader-modal)[style*="display: flex"]:not([data-reader-state="floating"]):not([data-reader-state="minimized"])) #notif-panel {
  visibility: hidden !important;
}