/* =============================================================================
   MOBIL ÄRENDEYTOR — mjuka kort och kompakt öppnat ärende (≤768px)
   Patrik 2026-10-09 (BESLUT.md i C:\AtlasWork\mobil-design-20261009): mobilen ska
   inte vara desktopens smala mittkolumn förstorad. Gäller ALLA ytor där ärenden
   listas och öppnas: Inkorgen, Mina ärenden, Garaget, Kunder (kundlista +
   kundkortets ärendehistorik), Admin (Personal/Enheter → pågående ärenden) och
   global sök. Laddas med media="screen and (max-width: 768px)" EFTER
   mobile-reply-editor-misc.css och FÖRE temafilen; därför bär reglerna
   :root body-prefix och !important (temana sätter kortregler med !important).
   Färger kommer bara från temats variabler. Desktop laddar inte filen.
   ============================================================================= */

:root body {
  --mtc-card-bg: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-dark-primary));
  --mtc-card-bg-active: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-dark-primary));
  --mtc-card-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 16px -8px rgb(0 0 0 / 0.22);
  --mtc-radius: 16px;
  --mtc-muted: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   1. ÄRENDEKORT I LISTOR (.team-ticket-card)
   Rad 1: typikon + namn (all bredd som blir över) ........ tid  [⋯]
   Rad 2: förhandstext (en rad) .............. prio-ring etikett  [⋯]
   Prio-ringen står alltid på samma plats (vänster om etiketten) i stället för
   att sväva efter namnet; etiketten kapas till tidens bredd så namnet får plats.
   Ingen ram, ingen inramad sidfot, inga kort-i-kort.
   ----------------------------------------------------------------------------- */
:root body .team-ticket-card,
:root body .team-ticket-card.archive-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "mtc-head mtc-head mtc-time mtc-menu"
    "mtc-prev mtc-prio mtc-tag  mtc-menu";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 12px 12px 14px !important;
  min-height: 0 !important;
  margin: 0 0 8px 0 !important;
  border: none !important;
  /* Vissa kort (Garaget, kundlistan) sätter border-left inline MED !important,
     vilket ingen regel kan slå. En genomskinlig border-image gör den kanten
     osynlig utan att klippa bort skuggan. */
  border-image: linear-gradient(transparent, transparent) 1 !important;
  border-radius: var(--mtc-radius) !important;
  background: var(--mtc-card-bg) !important;
  background-clip: border-box !important;
  box-shadow: var(--mtc-card-shadow) !important;
  overflow: hidden !important;
}

:root body .team-ticket-card:hover,
:root body .team-ticket-card.active-ticket,
:root body .team-ticket-card.archive-card:hover {
  background: var(--mtc-card-bg-active) !important;
  box-shadow: var(--mtc-card-shadow) !important;
}

:root body .team-ticket-card .ticket-header-row {
  display: contents !important;
}

:root body .team-ticket-card .ticket-title {
  grid-area: mtc-head;
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  align-items: center;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

/* Typikonen bär kontors-/agentfärgen som tidigare låg i vänsterkanten. */
:root body .team-ticket-card .ticket-title > span:first-child:not(:only-child) {
  color: var(--agent-color, var(--accent-primary)) !important;
  opacity: 1 !important;
}

:root body .team-ticket-card .ticket-top-right {
  grid-area: mtc-prio;
  justify-self: end;
  position: static !important;
  height: auto !important;
  right: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

/* Prioritet står kvar som liten prick; träffytan 44 px behålls men äter inte radhöjd. */
:root body .team-ticket-card .card-prio-btn {
  margin: -16px -12px !important;
}

/* Historik och anteckningar finns i det öppnade ärendets huvud (renderDetailHeader
   och readerns huvud). Anteckningsknappen visas kvar när ärendet HAR anteckningar,
   eftersom glöden är information som bara listan visar. */
:root body .team-ticket-card .history-trigger-btn,
:root body .team-ticket-card .notes-trigger-btn:not(.has-notes-active) {
  display: none !important;
}

/* Kategori-/fordonsikonen i ärendelistor (Inkorgen/Mina/kundkortet döljer den redan
   i mobile-app-compact.css). Kundlistans span är ärendeantalet — det står kvar. */
:root body .team-ticket-card[data-id] .ticket-top-right > span,
:root body .team-ticket-card[data-conv-id] .ticket-top-right > span {
  display: none !important;
}

:root body #customer-list .team-ticket-card .ticket-top-right > span {
  font-size: 11px !important;
  padding: 1px 8px !important;
  border: none !important;
}

:root body .team-ticket-card .notes-trigger-btn.has-notes-active {
  min-height: 28px !important;
  min-width: 28px !important;
  padding: 0 4px !important;
}

:root body .team-ticket-card .ticket-preview {
  grid-area: mtc-prev;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  color: var(--mtc-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}

:root body .team-ticket-card .ticket-preview > * {
  display: inline !important;
}

/* Sidfotsbandet upphör som låda; tid och etikett blir egna celler i kortets rutnät. */
:root body .team-ticket-card .ticket-footer-bar,
:root body .team-ticket-card .ticket-footer-bar > .ticket-footer-left {
  display: contents !important;
}

:root body .team-ticket-card .ticket-time {
  grid-area: mtc-time;
  justify-self: end;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums;
  color: var(--mtc-muted) !important;
  white-space: nowrap;
  opacity: 0.9;
}

:root body .team-ticket-card .ticket-footer-bar > :not(.ticket-time):not(.ticket-footer-left) {
  grid-area: mtc-tag;
  justify-self: end;
  display: flex !important;
  align-items: center;
  gap: 4px;
  min-width: 0;
  /* Etiketten får inte göra tidskolumnen bredare än tiden — då krymper namnet. */
  max-width: 7.2rem;
  overflow: hidden;
}

/* Etiketten (kontor/agent) som ren färgad text, utan ram eller platta. */
:root body .team-ticket-card .ticket-tag,
:root body .team-ticket-card .ticket-footer-bar > .ticket-tag,
:root body .team-ticket-card .ticket-footer-bar > :not(.ticket-time):not(.ticket-footer-left) > span {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0 !important;
}

:root body .team-ticket-card .ticket-tag svg {
  width: 10px !important;
  height: 10px !important;
}

/* Kundkortets ärendehistorik bär både status (AKTIVT/ARKIVERAT) och enhet i etikettcellen. */
:root body #customer-ticket-list-body .team-ticket-card .ticket-footer-bar > :not(.ticket-time):not(.ticket-footer-left) {
  max-width: 11rem;
}

/* Åtgärdsmeny (⋯), plocka-knapp och papperskorg: egen smal kolumn till höger. */
:root body .team-ticket-card > .card-menu-btn,
:root body .team-ticket-card > .claim-mini-btn,
:root body .team-ticket-card > button:not(.card-prio-btn) {
  grid-area: mtc-menu;
  position: static !important;
  align-self: center;
  justify-self: end;
  transform: none !important;
  margin: 0 -4px 0 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  opacity: 0.7;
}

/* Listorna: lite luft runt korten så skuggan syns. */
:root body :is(#inbox-list, #my-tickets-list, #archive-list, #customer-list, #customer-ticket-list-body) {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* -----------------------------------------------------------------------------
   2. ADMIN — "Pågående ärenden" för agent/enhet (.admin-ticket-preview)
   Samma kortspråk: namn + tid överst, ämne + etiketter under.
   ----------------------------------------------------------------------------- */
:root body #view-admin .admin-ticket-preview {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "atp-icon atp-sender atp-sender atp-date"
    "atp-icon atp-subj   atp-prio   atp-tags";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 14px !important;
  margin: 0 0 8px 0 !important;
  border: none !important;
  /* Inline border-left med !important (admin-core.js) — se kortregeln ovan. */
  border-image: linear-gradient(transparent, transparent) 1 !important;
  border-radius: var(--mtc-radius) !important;
  background: var(--mtc-card-bg) !important;
  background-clip: border-box !important;
  box-shadow: var(--mtc-card-shadow) !important;
  min-height: 0 !important;
}

:root body #view-admin .admin-ticket-preview .atp-main-row,
:root body #view-admin .admin-ticket-preview .atp-footer-row {
  display: contents !important;
}

:root body #view-admin .admin-ticket-preview .atp-main-row > span:first-child {
  grid-area: atp-icon;
  align-self: start;
  margin-top: 2px;
  color: var(--atp-color, var(--accent-primary)) !important;
  opacity: 1 !important;
}

:root body #view-admin .admin-ticket-preview .atp-body {
  display: contents !important;
}

:root body #view-admin .admin-ticket-preview .atp-sender {
  grid-area: atp-sender;
  min-width: 0;
  font-size: 14px !important;
  font-weight: 650 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root body #view-admin .admin-ticket-preview .atp-subject {
  grid-area: atp-subj;
  min-width: 0;
  font-size: 12.5px !important;
  color: var(--mtc-muted) !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset !important;
  display: block !important;
}

:root body #view-admin .admin-ticket-preview .atp-date {
  grid-area: atp-date;
  justify-self: end;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums;
  color: var(--mtc-muted) !important;
  white-space: nowrap;
}

/* Prio-prick + ev. anteckningsglöd hamnar bredvid tiden; historik/anteckning
   finns i readerns huvud. Kategori-ikonen finns som pill i readern. */
:root body #view-admin .admin-ticket-preview .atp-actions {
  grid-area: atp-prio;
  display: flex !important;
  align-items: center;
  gap: 0 !important;
}

/* Patrik 10-14: adminkorten (Personal, Kontor) visar prio, kategori, historik och anteckningar som på datorn. */
:root body #view-admin .admin-ticket-preview .atp-actions > * {
  margin: 0 !important;
}

:root body #view-admin .admin-ticket-preview .atp-pills {
  grid-area: atp-tags;
  justify-self: end;
  display: flex !important;
  gap: 8px;
  min-width: 0;
  max-width: 11rem;
  overflow: hidden;
}

:root body #view-admin .admin-ticket-preview .atp-pill {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

:root body #view-admin .admin-ticket-preview .atp-pill svg {
  width: 10px !important;
  height: 10px !important;
}

/* -----------------------------------------------------------------------------
   3. DEKORBANDET ÖVERST I LISTVYERNA
   Rubriken upprepar den aktiva fliken (fliknamnet står kvar i toppmenyn, L-160).
   ----------------------------------------------------------------------------- */
:root body #view-inbox .list-panel-header,
:root body #view-my-tickets .list-panel-header,
:root body #view-customers .list-panel-header,
:root body #view-archive #archive-wide-header .archive-rect-section {
  display: none !important;
}

/* Sökfältet ligger kvar överst i listan när man scrollar. */
:root body #view-inbox .list-panel-search,
:root body #view-my-tickets .list-panel-search,
:root body #view-archive .list-panel-search,
:root body #view-customers .list-panel-search {
  position: sticky !important;
  top: 0 !important;
  z-index: 15 !important;
  margin: 0 0 6px 0 !important;
  padding: 10px 0 8px !important;
  /* Samma ton som listan under, så att sökfältet inte får en egen ruta. */
  background: inherit !important;
}

:root body .list-panel-search .filter-input {
  height: 44px !important;
  border-radius: 22px !important;
  font-size: 14px !important;
}

/* -----------------------------------------------------------------------------
   4. ÖPPNAT ÄRENDE — kompakt huvud
   Rad 1: avatar + namn (full bredd). Rad 2: metadata-pills (scroll) + åtgärder.
   a) Inkorgen, Mina ärenden, Garaget: renderDetailHeader (detail-ui.js).
   ----------------------------------------------------------------------------- */
:root body .detail-container > .detail-header-top:has(.detail-header-actions) {
  padding: 10px 14px 8px !important;
  min-height: 0 !important;
}

:root body .detail-header-top > div:has(> .detail-header-actions) {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "detail-title detail-title"
    "detail-pills detail-actions" !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
  align-items: center !important;
}

:root body .detail-header-top > div:has(> .detail-header-actions) .detail-subject {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

:root body .detail-header-top > div:has(> .detail-header-actions) .detail-subject > div:first-child {
  width: 28px !important;
  height: 28px !important;
  margin-right: 8px !important;
  font-size: 11px !important;
}

/* mobile.css ger pills width:max-content (rad 2 hade hela bredden förut);
   här delar de rad 2 med åtgärderna och scrollar inom sin cell. */
:root body :is(#view-inbox, #view-my-tickets, #view-archive) .detail-header-top .detail-pills-container,
:root body .detail-header-top .detail-pills-container {
  margin-top: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

:root body .detail-header-top .detail-header-actions {
  gap: 0 !important;
}

:root body .detail-header-top .detail-header-actions > div[style*="width: 1px"] {
  display: none !important;
}

:root body .detail-header-top .detail-header-actions :is(button, .action-icon-btn) {
  min-width: 32px !important;
  width: 32px !important;
  padding: 0 !important;
}

/* b) Readern i Kunder och Admin (#customer-reader-modal, #atlas-reader-modal):
      samma två rader; dragzonen löses upp så pills och åtgärder delar rad 2. */
: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]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
  padding: 10px 14px 8px !important;
}

:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle] {
  display: contents !important;
}

:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle] > div:first-child {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-title] {
  flex: 1 1 calc(100% - 40px) !important;
  font-size: 16px !important;
}

: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]) > div:not([data-reader-drag-handle]) {
  order: 2;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
}

:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle] > div:last-child {
  order: 3;
  gap: 0 !important;
}

:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle] > div:last-child > .btn-glass-icon {
  width: 32px !important;
  min-width: 32px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root body :is(#atlas-reader-modal, #customer-reader-modal):not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle] > div:last-child > div[style*="width:1px"] {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   5. ÖPPNAT ÄRENDE — bläddring (2/4) och textstorlek i en egen remsa
   Remsan är textstorleksankaret (sticky överst i scrollytan) med ogenomskinlig
   bakgrund; bläddringen flyttas från sidokanterna in i remsans vänsterdel.
   Meddelandena får hela bredden.
   ----------------------------------------------------------------------------- */
:root body .detail-container > .detail-header-top { order: 0; }
:root body .detail-container > .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 > .atlas-ticket-detail-side-nav { order: 1; }
:root body .detail-container > :not(.detail-header-top):not(.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 > :not(.atlas-ticket-detail-side-nav):not(:first-child) { order: 2; }

:root body .atlas-ticket-detail-side-nav {
  position: relative !important;
  height: 0 !important;
  overflow: visible !important;
  z-index: 25 !important;
  display: block;
}

:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn {
  position: absolute !important;
  top: 2px !important;
  bottom: auto !important;
  transform: none !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
  color: var(--text-secondary) !important;
}

/* Fasta platser oavsett första/sista ärendet: "‹ 2/4" + "›". Knapparna får
   aldrig flytta sig, annars träffar nästa tryck fel knapp (Patrik 10-09:
   "ärenden hoppade"). Avstängd knapp tonas i stället för att döljas. */
:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-prev { left: 12px !important; right: auto !important; width: 76px !important; }
:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-next { left: 94px !important; right: auto !important; width: 48px !important; }
:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-next .atlas-ticket-detail-nav-counter { display: none !important; }
:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn.is-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
}

:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-btn svg {
  width: 16px !important;
  height: 16px !important;
}

:root body .atlas-ticket-detail-side-nav .atlas-ticket-detail-nav-counter {
  position: static !important;
  font-size: 11px !important;
}

/* Textstorleksankaret blir remsan. */
:root body .bfs-anchor {
  position: sticky !important;
  top: 0 !important;
  height: 36px !important;
  width: auto !important;
  align-self: stretch !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  /* Samma ton som scrollytan (ärver dess bakgrund) — remsan döljer det som
     scrollar under den i stället för att lägga knappar över texten. */
  background: inherit !important;
  pointer-events: none;
  z-index: 20 !important;
}

/* Scrollytans toppmarginal skulle annars lämna en glipa ovanför den klistrade remsan. */
:root body :is(#my-chat-scroll-area, #reader-chat-scroll, #cust-reader-chat-scroll, .detail-body):has(> .bfs-anchor) {
  padding-top: 0 !important;
}

:root body .bfs-pill {
  flex-direction: row !important;
  gap: 2px !important;
  padding: 2px 6px !important;
  opacity: 0.85 !important;
  margin: 0 !important;
  transform: none !important;
}

:root body .bfs-btn {
  min-width: 26px !important;
  min-height: 28px !important;
}

:root body .bfs-anchor ~ .msg-row.atlas,
:root body .bfs-anchor + [data-reader-content="1"] > .msg-row.atlas,
:root body .bfs-anchor + .inbox-chat-history > .msg-row.atlas,
:root body .bfs-anchor + .msg-row.atlas {
  padding-right: 0 !important;
}

/* -----------------------------------------------------------------------------
   6. ÖPPNAT ÄRENDE — meddelanden i full bredd
   Före: scrollytans 16 px + historikens 20 px per sida och bubbelkolumn på 80 %
   (60 % i kundreadern) gav ~190–250 px textbredd på 390 px skärm.
   ----------------------------------------------------------------------------- */
:root body .detail-container > .detail-body:has(.msg-row),
:root body :is(#reader-chat-scroll, #cust-reader-chat-scroll) {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

:root body .detail-body .inbox-chat-history {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

:root body :is(#reader-chat-scroll, #cust-reader-chat-scroll) [data-reader-content="1"] {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:root body :is(.detail-body, #reader-chat-scroll, #cust-reader-chat-scroll) .msg-row > div:not([class]) {
  max-width: 88% !important;
}

/* -----------------------------------------------------------------------------
   7. MOBILHUVUDET (alla vyer) — titel + ikoner på EN rad, flikar direkt under
   Före: titel och ikonknappar bröts på två rader (ljust tema, Inkorgen ~170 px
   före flikarna) och i Garaget klipptes "Arkivet". Hamburgare/tillbaka sitter
   fast 10–48 px (mobile.css:244–284), så rad 1 är 56 px och vänsterplatsen 54 px.
   Fliknamnet bredvid vy-ikonen står kvar (L-160).
   ----------------------------------------------------------------------------- */
:root body :is(#view-chat, #view-inbox, #view-my-tickets, #view-archive, #view-customers, #view-templates, #view-about, #view-admin, #view-onboarding) > .chat-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 4px !important;
  row-gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--safe-area-top, 0px) 8px 0 54px !important;
}

/* KAN-424: appens body har redan statusradens marginal; räkna den inte igen. */
:root body.capacitor-client :is(#view-chat, #view-inbox, #view-my-tickets, #view-archive, #view-customers, #view-templates, #view-about, #view-admin) > .chat-header {
  padding-top: 0 !important;
}

: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 {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 56px !important;
  margin: 0 !important;
  gap: 8px !important;
}

: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 .header-title-icon {
  width: 18px !important;
  height: 18px !important;
  padding: 7px !important;
}

:root body :is(#view-chat, #view-inbox, #view-my-tickets, #view-archive, #view-customers, #view-templates, #view-about, #view-admin, #view-onboarding) > .chat-header > .header-actions {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 56px !important;
}

:root body :is(#view-chat, #view-inbox, #view-my-tickets, #view-archive, #view-customers, #view-templates, #view-about, #view-admin, #view-onboarding) > .chat-header > .header-actions > :is(button, span, a) {
  width: 36px !important;
  min-width: 36px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Flikraden: egen rad i full bredd under rad 1, tonar ut i högerkanten. */
:root body :is(#view-chat, #view-inbox, #view-my-tickets, #view-archive, #view-customers, #view-templates, #view-about, #view-admin, #view-onboarding) > .chat-header > :is(.header-tabs, #template-tabs) {
  order: 3 !important;
  flex: 0 0 calc(100% + 46px) !important;
  max-width: calc(100% + 46px) !important;
  margin: 0 0 0 -46px !important;
  padding: 2px 28px 4px 4px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

/* -----------------------------------------------------------------------------
   8. CHIPSRADER I ÖPPNAT ÄRENDE — uttoning i stället för hårt klipp
   Vald framför radbrytning: raden behåller sin höjd (huvudet växer inte och
   meddelandena flyttas inte), och uttoningen visar att raden går att svepa.
   ----------------------------------------------------------------------------- */
:root body .detail-header-top .detail-pills-container,
: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]) > div:not([data-reader-drag-handle]),
:root body .mobile-detail-footer-pills {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  padding-right: 20px !important;
}

/* Nedre listen: Svara-knappen tar sin egen bredd, chipsen får resten och tonar ut. */
:root body .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 104px !important;
}

:root body .atlas-mobile-reply-summary-row > .mobile-detail-footer-pills {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
}