/* Ärendebubblorna på DATORN (Patrik + ledartråd 25, 2026-10-14, godkänt live i Chrome).
   Laddas bara på skärmar >= 769 px; telefonens variant ligger sist i mobile-soft-shell-reader.css.
   Prov och mätningar: C:/AtlasWork/datorrunda-20261014/LOGG.md. */
:root body .msg-row.msg-row {
  --bubble-neutral-border: transparent !important; --detail-bubble-border: transparent !important;
  position: relative !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble.bubble {
  position: relative !important; border: none !important; overflow: visible !important;
  box-shadow: none !important; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.13)) drop-shadow(0 3px 6px rgba(0,0,0,0.06)) !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble table {
  table-layout: fixed !important; width: 100% !important; max-width: 100% !important;
}
/* KAN-423: bildceller behöver auto-layout för att bilden ska stanna bredvid texten. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble table:has(img) {
  table-layout: auto !important;
}
/* Bild efter bild är ett galleri, inte textcellen som behöver ett textminimum. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row .bubble table tr > :is(th, td):has(img) + :is(th, td):has(img) {
  min-width: 0 !important;
}
/* Svansen uppe mot ringen. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble { border-radius: 0 18px 18px 18px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble { border-radius: 18px 0 18px 18px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user .bubble.bubble::after {
  content: "" !important; position: absolute !important; left: -10px !important; top: 0 !important; width: 12px !important; height: 14px !important;
  background: inherit !important; clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas .bubble.bubble::after {
  content: "" !important; position: absolute !important; right: -10px !important; top: 0 !important; width: 12px !important; height: 14px !important;
  background: inherit !important; clip-path: polygon(0 0, 100% 0, 0 100%) !important;
}
/* Ringen 22 px på namnraden, tar ingen bredd. */
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row.msg-row > div:not(:has(.bubble)) {
  display: flex !important; position: static !important; align-self: flex-start !important;
  width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; flex: none !important;
  align-items: center !important; justify-content: center !important; font-size: 11px !important; line-height: 1 !important; z-index: 1 !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:not(:has(.bubble)) { margin: 0 -22px 0 0 !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:not(:has(.bubble)) { margin: 0 0 0 -22px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row > div:not(:has(.bubble)) svg { width: 13px !important; height: 13px !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:has(.bubble) { margin-left: 10px !important; align-items: flex-start !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:has(.bubble) { margin-right: 10px !important; align-items: flex-end !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.msg-row > div:has(.bubble) > div:first-child:not(.bubble) {
  min-height: 22px !important; line-height: 22px !important; margin-bottom: 6px !important;
  font-size: 11px !important; font-weight: 600 !important; color: var(--text-secondary) !important; opacity: 1 !important;
}
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.user > div:has(.bubble) > div:first-child:not(.bubble) { padding-left: 18px !important; text-align: left !important; }
:root body :is(#my-chat-scroll-area, #inbox-detail-body, #archive-detail-body, #reader-chat-scroll, #cust-reader-chat-scroll, #archive-detail) .msg-row.atlas > div:has(.bubble) > div:first-child:not(.bubble) { padding-right: 18px !important; text-align: right !important; }
/* v4 (Patrik 09:37): ljusa teman — kundbubblan nästan vit ⇒ svagt tonad mot temats accentfärg (Apple Light Green, Prism Light, Nordic Dawn). */
body.atlas-light-theme .msg-row.msg-row.msg-row {
  --bubble-neutral-bg: color-mix(in srgb, var(--accent-primary) 15%, #ffffff) !important;
}