@import url("../../elastic/styles/styles.min.css");
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ============================================================
   FunkyLabs skin — Claude Design 1:1 (layer over Elastic dark)
   ============================================================ */
html.dark-mode{
  --accent:#F2641E; --accent-hover:#FF7A3D; --on-accent:#fff;
  --accent-soft:rgba(242,100,30,.13); --accent-soft-2:rgba(242,100,30,.20);
  --accent-border:rgba(242,100,30,.34); --accent-ring:rgba(242,100,30,.45);
  --bg-app:#0B0C0E; --surface-rail:#0E0F12; --surface-1:#121317; --surface-2:#16181D; --surface-3:#1C1E24;
  --surface-hover:rgba(255,255,255,.045);
  --border-subtle:rgba(255,255,255,.06); --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.145);
  --text-primary:#ECEEF1; --text-secondary:#AAB0B8; --text-tertiary:#767C86; --text-muted:#565C66;
  --r-sm:7px; --r-md:9px; --r-lg:12px;
}

/* ---- base / font ---- */
html.dark-mode body, html.dark-mode input, html.dark-mode button, html.dark-mode select,
html.dark-mode textarea, html.dark-mode .listing, html.dark-mode .messagelist, html.dark-mode .form-control,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode .boxtitle{
  font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}
html.dark-mode body, html.dark-mode #layout, html.dark-mode #layout > div, html.dark-mode #layout-content{
  background-color:var(--bg-app) !important; color:var(--text-primary) !important;
}
html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode .listing,
html.dark-mode .scroller, html.dark-mode .messagelist{ background-color:var(--surface-1) !important; }
html.dark-mode *{ border-color:var(--border-subtle) !important; }
html.dark-mode .header{ background-color:transparent !important; min-height:54px !important; }
html.dark-mode .header-title{ color:var(--text-primary) !important; font-weight:600 !important; }

/* ---- left task rail ---- */
html.dark-mode #layout-menu{ background-color:var(--surface-rail) !important; }
html.dark-mode #taskmenu a{ color:var(--text-tertiary) !important; border-radius:var(--r-lg) !important; margin:3px 6px !important; }
html.dark-mode #taskmenu a .inner{ font-size:10px !important; font-weight:500 !important; }
html.dark-mode #taskmenu a:hover{ background-color:var(--surface-hover) !important; color:var(--text-secondary) !important; }
html.dark-mode #taskmenu a:hover:before{ color:var(--text-secondary) !important; }
html.dark-mode #taskmenu a.selected{ background-color:rgba(255,255,255,.05) !important; color:var(--text-primary) !important; }
html.dark-mode #taskmenu a.selected:before{ color:var(--accent) !important; }
html.dark-mode #taskmenu a:before{ color:var(--text-tertiary) !important; }
html.dark-mode #taskmenu a.compose{ background-color:var(--accent) !important; color:#fff !important; box-shadow:0 6px 16px -6px rgba(242,100,30,.6) !important; }
html.dark-mode #taskmenu a.compose:before, html.dark-mode #taskmenu a.compose .inner{ color:#fff !important; }
html.dark-mode #taskmenu a.compose:hover{ background-color:var(--accent-hover) !important; }
html.dark-mode #taskmenu a.logout:before{ color:#E26A4D !important; }

/* ---- folder list ---- */
html.dark-mode #mailboxlist{ padding:8px 8px !important; }
html.dark-mode #mailboxlist li a{ border-radius:var(--r-md) !important; color:var(--text-secondary) !important; padding-top:8px !important; padding-bottom:8px !important; }
html.dark-mode #mailboxlist li a:before{ color:var(--text-tertiary) !important; }
html.dark-mode #mailboxlist li a:hover{ background-color:var(--surface-hover) !important; color:var(--text-primary) !important; }
html.dark-mode #mailboxlist li.selected > a{ background-color:var(--accent-soft) !important; color:#FCEAE0 !important; box-shadow:inset 3px 0 0 var(--accent) !important; }
html.dark-mode #mailboxlist li.selected > a:before{ color:var(--accent) !important; }
html.dark-mode .unreadcount{ background-color:var(--surface-3) !important; color:var(--text-tertiary) !important; border-radius:999px !important; font-weight:700 !important; font-size:11px !important; }
html.dark-mode #mailboxlist li.selected .unreadcount{ background-color:var(--accent) !important; color:#fff !important; }

/* ---- search ---- */
html.dark-mode .searchbar{ background-color:var(--surface-3) !important; border:1px solid var(--border-subtle) !important; border-radius:var(--r-md) !important; margin:8px 10px !important; height:40px !important; }
html.dark-mode .searchbar:focus-within{ border-color:var(--accent-border) !important; box-shadow:0 0 0 3px var(--accent-ring) !important; }
html.dark-mode .searchbar input{ background:transparent !important; color:var(--text-primary) !important; }
html.dark-mode .searchbar input::placeholder{ color:var(--text-tertiary) !important; }
html.dark-mode .searchbar .button:before{ color:var(--text-tertiary) !important; }

/* ---- toolbars ---- */
html.dark-mode .menu.toolbar a, html.dark-mode .header a.button{ color:var(--text-secondary) !important; border-radius:8px !important; }
html.dark-mode .menu.toolbar a:before, html.dark-mode .header a.button:before{ color:var(--text-tertiary) !important; }
html.dark-mode .menu.toolbar a:hover, html.dark-mode .header a.button:hover{ background-color:var(--surface-hover) !important; color:var(--text-primary) !important; }
html.dark-mode .menu.toolbar a:hover:before, html.dark-mode .header a.button:hover:before{ color:var(--text-primary) !important; }
html.dark-mode .menu.toolbar a.disabled, html.dark-mode .header a.button.disabled{ color:var(--text-muted) !important; opacity:1 !important; }

/* ---- message list rows ---- */
html.dark-mode .messagelist tbody td{ padding-top:10px !important; padding-bottom:11px !important; }
html.dark-mode .messagelist tr td.subject{ padding-left:14px !important; }
html.dark-mode .messagelist tr:hover td{ background-color:var(--surface-hover) !important; }
html.dark-mode .messagelist tr:not(.unread):not(.selected):not(.deleted) td.subject span.subject a{ color:var(--text-tertiary) !important; font-weight:400 !important; }
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date{ color:var(--text-tertiary) !important; }
html.dark-mode .messagelist tr.unread:not(.selected) td.subject span.subject,
html.dark-mode .messagelist tr.unread:not(.selected) td.subject span.subject a{ color:var(--text-primary) !important; font-weight:700 !important; }
html.dark-mode .messagelist tr.unread:not(.selected) td.subject span.fromto{ color:var(--text-secondary) !important; }
html.dark-mode .messagelist tr.unread td.subject span.msgicon.status.unread:before{ color:var(--accent) !important; }
html.dark-mode .messagelist tr.selected td{ background-color:var(--accent-soft) !important; color:#FCEAE0 !important; }
html.dark-mode .messagelist tr.selected td.subject{ box-shadow:inset 3px 0 0 var(--accent) !important; }
html.dark-mode .messagelist tr.selected td.subject a, html.dark-mode .messagelist tr.selected td.subject span.subject a{ color:#FCEAE0 !important; }

/* ---- buttons ---- */
html.dark-mode .btn-primary, html.dark-mode button.btn.primary, html.dark-mode .button.primary, html.dark-mode a.button.primary{
  background-color:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; border-radius:var(--r-md) !important;
}
html.dark-mode .btn-primary:hover{ background-color:var(--accent-hover) !important; border-color:var(--accent-hover) !important; }
html.dark-mode .form-control{ background-color:var(--surface-3) !important; border-radius:var(--r-md) !important; }
html.dark-mode .form-control:focus{ border-color:var(--accent-border) !important; box-shadow:0 0 0 3px var(--accent-soft-2) !important; }

/* ---- reading pane (inside preview iframe) ---- */
html.dark-mode.iframe body, html.dark-mode #layout-content.selected, html.dark-mode .content.frame-content{ background-color:var(--bg-app) !important; }
html.dark-mode #message-header{ padding:22px 30px 10px !important; border:0 !important; }
html.dark-mode #message-header h2.subject{ color:var(--text-primary) !important; font-weight:700 !important; font-size:21px !important; letter-spacing:-.01em !important; }
html.dark-mode #message-header .contactphoto{ width:44px !important; height:44px !important; border-radius:50% !important; }
html.dark-mode #message-header .header-summary, html.dark-mode #message-header .header-summary span{ color:var(--text-secondary) !important; }
html.dark-mode #message-header .header-summary a, html.dark-mode #message-header .adr a{ color:var(--text-primary) !important; }
html.dark-mode #message-header .header-headers .header-title{ color:var(--text-tertiary) !important; }
html.dark-mode #messagebody{ background:#FAF9F6 !important; color:#232323 !important; margin:16px 30px 30px !important; padding:30px 34px !important; border-radius:var(--r-lg) !important; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 34px rgba(0,0,0,.5) !important; }
html.dark-mode #messagebody a{ color:#2F6BD6 !important; }

/* ---- scrollbars ---- */
html.dark-mode ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10) !important; }

/* read rows: hide the status dot (design shows dot only for unread) */
html.dark-mode .messagelist tr:not(.unread):not(.flagged) td.subject span.msgicon.status:before{ color:transparent !important; }

/* ============================================================
   refinements: airy rail, folder pills, toolbar label fit
   ============================================================ */
/* rail wider + airy (design .rail = 84px, labels 10px wrap) */
html.dark-mode #layout-menu{ width:84px !important; }
html.dark-mode #taskmenu a{ width:72px !important; margin:3px 6px !important; height:auto !important; min-height:0 !important; padding:9px 2px !important; }
html.dark-mode #taskmenu span.inner{ font-size:10px !important; line-height:1.18 !important; white-space:normal !important; max-width:70px !important; overflow:visible !important; text-overflow:clip !important; }

/* folder items = inset rounded pills with breathing room (design .fitem) */
html.dark-mode #mailboxlist{ padding:10px 8px !important; }
html.dark-mode #mailboxlist li a{ margin:1px 4px !important; padding:9px 12px !important; border-radius:9px !important; }
html.dark-mode #mailboxlist li.selected > a{ box-shadow:inset 3px 0 0 var(--accent) !important; }

/* buttons: background-blended, subtle hover only (design) */
html.dark-mode .menu.toolbar a, html.dark-mode .header a.button{ background-color:transparent !important; }
html.dark-mode .menu.toolbar a:hover, html.dark-mode .header a.button:hover{ background-color:var(--surface-hover) !important; }

/* top toolbar buttons: fit full Finnish labels (smaller label, no ellipsis) */
html.dark-mode .header .menu.toolbar a, html.dark-mode .header a.button{ padding:6px 9px !important; min-width:0 !important; }
html.dark-mode .header a.button .inner, html.dark-mode .menu.toolbar a .inner{ font-size:10px !important; max-width:none !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }

/* reading toolbar long Finnish labels (Välitä eteenpäin) — fit fully */
html.dark-mode #layout-content .header a.button .inner,
html.dark-mode #messagelist-header .menu.toolbar a .inner{ font-size:9.5px !important; letter-spacing:-.1px !important; }
html.dark-mode #layout-content .header a.button{ padding-left:7px !important; padding-right:7px !important; }

/* rail brand: flask-only icon (login/watermark keep the full wordmark) */
html.dark-mode #layout-menu .popover-header img#logo,
html.dark-mode #layout-menu .popover-header img{
  content:url("https://mail.funkylabs.fi/static.php/plugins/funkylabs_dark/funkylabs-flask.png") !important;
  width:auto !important; height:46px !important; max-width:60px !important; object-fit:contain !important;
}

/* center + size the rail flask brand */
html.dark-mode #layout-menu .popover-header{ justify-content:center !important; text-align:center !important; padding:10px 0 6px !important; }
html.dark-mode #layout-menu .popover-header a{ margin:0 auto !important; }
html.dark-mode #layout-menu .popover-header img#logo,
html.dark-mode #layout-menu .popover-header img{ height:50px !important; width:auto !important; max-width:64px !important; margin:0 auto !important; display:block !important; }

/* ===== scrollbars: calm design style (fix Elastic blue) ===== */
html.dark-mode{ scrollbar-color:rgba(255,255,255,.18) transparent !important; }
html.dark-mode ::-webkit-scrollbar{ width:11px !important; height:11px !important; }
html.dark-mode ::-webkit-scrollbar-track{ background:transparent !important; }
html.dark-mode ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10) !important; border:3px solid transparent !important; background-clip:content-box !important; border-radius:99px !important; }
html.dark-mode ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20) !important; background-clip:content-box !important; }

/* ===== folder account avatar chip ===== */
html.dark-mode #layout-sidebar > .header .header-title.username{ position:relative !important; padding-left:36px !important; }
html.dark-mode #layout-sidebar > .header .header-title.username::before{
  content:"I"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:8px; line-height:1;
  background:linear-gradient(150deg,#33271d,#211b16); border:1px solid var(--border);
  color:var(--accent); font-weight:700; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}

/* ===== "KANSIOT" divider + section label before first custom folder ===== */
html.dark-mode #mailboxlist > li.archive + li::before{
  content:"KANSIOT"; display:block;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); padding:6px 12px 6px; margin:9px 4px 2px;
  border-top:1px solid var(--border-subtle);
}

/* ===== folder spacing + selected ===== */
html.dark-mode #mailboxlist li a{ padding-top:10px !important; padding-bottom:10px !important; }
html.dark-mode #mailboxlist li.selected > a{ color:#FCEAE0 !important; font-weight:600 !important; }

/* ===== reading toolbar: readable full labels, spacious (design look) ===== */
html.dark-mode #layout-content .header a.button{ padding:6px 13px !important; }
html.dark-mode #layout-content .header a.button .inner{ font-size:11px !important; max-width:none !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; letter-spacing:0 !important; }

/* anchor first-custom-folder badge to its row (not the li with the KANSIOT ::before) */
html.dark-mode #mailboxlist > li.archive + li{ position:static !important; }
html.dark-mode #mailboxlist > li.archive + li > a{ position:relative !important; }

/* ===== folders: remove per-row separator lines (design has none) ===== */
html.dark-mode #mailboxlist li{ border:0 !important; }
html.dark-mode #mailboxlist li > a{ border:0 !important; }
/* selected folder: warm pill + SHORT ROUNDED accent bar (design shape) */
html.dark-mode #mailboxlist li.selected > a{ background-color:rgba(242,100,30,.16) !important; box-shadow:none !important; position:relative !important; }

/* ===== quota (disk) bar -> design: thin rounded, surface-3 track, orange fill ===== */
html.dark-mode #quotadisplay .bar{ height:5px !important; border-radius:99px !important; background:var(--surface-3) !important; overflow:hidden !important; border:0 !important; }
html.dark-mode #quotadisplay .bar .value{ background:var(--accent) !important; border-radius:99px !important; }
html.dark-mode #quotadisplay .count{ color:var(--text-tertiary) !important; }
html.dark-mode #quotadisplay .bar:before, html.dark-mode #quotadisplay .bar:after{ display:none !important; }

/* ===== rail flask: smaller + breathing room above the Compose button ===== */
html.dark-mode #layout-menu .popover-header{ padding:12px 0 16px !important; }
html.dark-mode #layout-menu .popover-header img#logo,
html.dark-mode #layout-menu .popover-header img{ height:36px !important; }

/* ===== folder panel — match design precisely ===== */
/* compact rows */
html.dark-mode #mailboxlist li{ height:auto !important; }
html.dark-mode #mailboxlist li > a{ padding:9px 12px !important; min-height:0 !important; }
/* selected: warm orange pill, icon kept+orange, short rounded bar via ::after */
html.dark-mode #mailboxlist li.selected{ background:transparent !important; }
html.dark-mode #mailboxlist li.selected > a{ background-color:rgba(242,100,30,.18) !important; box-shadow:none !important; position:relative !important; color:#FCEAE0 !important; font-weight:600 !important; }
html.dark-mode #mailboxlist li.selected > a:before{ color:var(--accent) !important; }
html.dark-mode #mailboxlist li.selected > a::after{ content:"" !important; position:absolute !important; left:1px !important; top:9px !important; bottom:9px !important; width:3px !important; border-radius:3px !important; background:var(--accent) !important; }
/* KANSIOT: label only, NO divider line */
html.dark-mode #mailboxlist > li.archive + li::before{ border-top:0 !important; margin-top:4px !important; padding-top:6px !important; }
/* account header: email tight to the "I" chip */
html.dark-mode #layout-sidebar > .header .header-title.username{ margin-left:0 !important; padding-left:32px !important; }

/* account header: left-align so email hugs the "I" chip (not centered) */
html.dark-mode #layout-sidebar > .header{ justify-content:flex-start !important; }
html.dark-mode #layout-sidebar > .header .header-title.username{ text-align:left !important; flex:1 1 auto !important; }

/* ===== selected folder: rounded pill (all corners), shorter; bar at PANEL EDGE ===== */
html.dark-mode #mailboxlist li > a{ padding-top:7px !important; padding-bottom:7px !important; }
html.dark-mode #mailboxlist li.selected > a{ border-radius:9px !important; }
html.dark-mode #mailboxlist li.selected{ position:relative !important; }

/* ===== top toolbars: spacious, full labels, no "..." ===== */
html.dark-mode #layout-content .header a.button,
html.dark-mode #messagelist-header .menu.toolbar a{ padding:6px 12px !important; min-width:0 !important; width:auto !important; overflow:visible !important; }
html.dark-mode #layout-content .header a.button .inner,
html.dark-mode #messagelist-header .menu.toolbar a .inner{ font-size:11px !important; max-width:none !important; width:auto !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; letter-spacing:0 !important; }

/* ===== toolbar: remove Elastic's 84px button cap so full Finnish labels fit (no "...") ===== */
html.dark-mode #layout-content .header a,
html.dark-mode .menu.toolbar a,
html.dark-mode .toolbar a{ max-width:none !important; width:auto !important; overflow:visible !important; }
html.dark-mode #layout-content .header a .inner,
html.dark-mode .menu.toolbar a .inner,
html.dark-mode .toolbar a .inner{ font-size:11px !important; max-width:none !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }

/* ===== selection bar via a::after — panel-edge, rounded right, works for ALL folders (incl. Bästa El) ===== */
html.dark-mode #mailboxlist li.selected > a{ position:relative !important; overflow:visible !important; border-radius:9px !important; }
html.dark-mode #mailboxlist li.selected > a::after{ content:"" !important; position:absolute !important; left:-12px !important; top:7px !important; bottom:7px !important; width:3px !important; border-radius:0 3px 3px 0 !important; background:var(--accent) !important; z-index:4 !important; }

/* ===== FIX: folder A overflowed LI (overflow:hidden) -> right rounded corner clipped square.
   Force A fully inside LI so border-radius isn't clipped. ===== */
html.dark-mode #mailboxlist li > a{ box-sizing:border-box !important; width:calc(100% - 12px) !important; margin-left:6px !important; margin-right:6px !important; }

/* ===== account header: center the "I" chip + email group in the panel ===== */
html.dark-mode #layout-sidebar > .header{ position:relative !important; }
html.dark-mode #layout-sidebar > .header .header-title.username{
  position:absolute !important; left:50% !important; transform:translateX(-50%) !important;
  margin:0 !important; padding:0 !important; max-width:none !important; text-align:center !important;
  display:inline-flex !important; align-items:center !important; gap:9px !important;
}
html.dark-mode #layout-sidebar > .header .header-title.username::before{
  content:"I" !important; position:static !important; transform:none !important; flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:26px !important; height:26px !important; border-radius:8px !important; line-height:1 !important;
  background:linear-gradient(150deg,#33271d,#211b16) !important; border:1px solid var(--border) !important;
  color:var(--accent) !important; font-weight:700 !important; font-size:12px !important;
}

/* keep folder-options (3-dot) pinned right after centering the username */
html.dark-mode #layout-sidebar > .header .sidebar-menu{ position:absolute !important; right:10px !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; }
html.dark-mode #layout-sidebar > .header .back-list-button{ display:none !important; }

/* ===== refinements: header align, compose line-height, dark top bar, lighter toolbar ===== */
/* 1. vertically center email + 3-dot together in the folder header */
html.dark-mode #layout-sidebar > .header .header-title.username{ top:50% !important; transform:translate(-50%,-50%) !important; }
html.dark-mode #layout-sidebar > .header .sidebar-menu{ display:flex !important; align-items:center !important; justify-content:center !important; }

/* 2. tighten wrapped "Viestin kirjoitus" line spacing */
html.dark-mode #taskmenu span.inner{ line-height:1.04 !important; }

/* 3. top-bar header strips -> dark (uniform with top panel bg, not surface-1) */
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #messagelist-header{ background-color:var(--bg-app) !important; }

/* 4. top-bar icons + labels lighter for contrast */
html.dark-mode #layout-content .header a,
html.dark-mode #messagelist-header a,
html.dark-mode .menu.toolbar a,
html.dark-mode .toolbar a{ color:#CDD2D8 !important; }
html.dark-mode #layout-content .header a:before,
html.dark-mode #messagelist-header a:before,
html.dark-mode .menu.toolbar a:before,
html.dark-mode .toolbar a:before{ color:#AEB4BC !important; }
html.dark-mode #layout-content .header a .inner,
html.dark-mode #messagelist-header a .inner,
html.dark-mode .menu.toolbar a .inner,
html.dark-mode .toolbar a .inner{ color:#CDD2D8 !important; }

/* 3-dot icon sits low because button line-height = header height (58px). Force line-height:1 so the icon centers. */
html.dark-mode #layout-sidebar > .header .sidebar-menu{ line-height:1 !important; }
html.dark-mode #layout-sidebar > .header .sidebar-menu::before{ line-height:1 !important; height:auto !important; align-self:center !important; }

/* ===== FIX compose line spacing: span.inner is inline so the A's 21px line-height (strut)
   sets the gap. Make the label inline-block so its own tight line-height applies. ===== */
html.dark-mode #taskmenu a .inner{ display:inline-block !important; line-height:1.05 !important; vertical-align:middle !important; }

/* ===== FIX top-bar light strip: the toolbar UL itself has surface-1 bg. Make it transparent. ===== */
html.dark-mode .menu.toolbar{ background-color:transparent !important; }
html.dark-mode ul.toolbar, html.dark-mode .header .toolbar{ background-color:transparent !important; }

/* folder unread badge: vertically center with the folder name (was top:0 -> too high) */
html.dark-mode #mailboxlist li .unreadcount{ top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; margin-top:0 !important; margin-bottom:0 !important; }

/* ============================================================
   reading-pane header — pixel-match Claude Design
   ============================================================ */
/* subject "open in new window" icon: muted grey (was blue) */
html.dark-mode #message-header h2.subject a.extwin,
html.dark-mode #message-header h2.subject a.extwin:before{ color:var(--text-tertiary) !important; }

/* meta links (Tiedot / Otsakkeet / Tavallinen teksti) + their icons: muted grey */
html.dark-mode .header-links a{ color:var(--text-secondary) !important; }
html.dark-mode .header-links a:before,
html.dark-mode .header-links a span:before,
html.dark-mode .header-links a .inner:before{ color:var(--text-secondary) !important; }

/* sender name bold/white, rest of summary dim */
html.dark-mode #message-header .header-summary{ color:var(--text-secondary) !important; }
html.dark-mode #message-header .header-summary .adr a.rcmContactAddress{ color:var(--text-primary) !important; font-weight:600 !important; }

/* avatar: warm gradient circle (design) instead of grey person icon */
html.dark-mode #message-header .contactphoto{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235a4636'/%3E%3Cstop offset='1' stop-color='%23312720'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='22' cy='22' r='22' fill='url(%23g)'/%3E%3C/svg%3E") !important;
  width:44px !important; height:44px !important; border-radius:50% !important;
}

/* security banner: dark warm, rounded, inset, gold accents (design) */
html.dark-mode #remote-objects-message.boxwarning,
html.dark-mode .boxwarning{
  background:rgba(212,165,75,.09) !important; border:1px solid rgba(212,165,75,.30) !important;
  border-radius:10px !important; margin:14px 30px 4px !important; padding:11px 15px !important;
  color:#D8C9A8 !important; box-shadow:none !important;
}
html.dark-mode .boxwarning > span{ color:#D8C9A8 !important; }
html.dark-mode .boxwarning .icon,
html.dark-mode .boxwarning .icon:before{ color:#E0B255 !important; }
/* banner buttons: gold outline (not orange) */
html.dark-mode .boxwarning .btn,
html.dark-mode #remote-objects-message .btn{
  background:transparent !important; border:1px solid rgba(212,165,75,.45) !important;
  color:#E6CC8E !important; border-radius:8px !important; font-weight:600 !important;
}
html.dark-mode .boxwarning .btn:hover,
html.dark-mode #remote-objects-message .btn:hover{ background:rgba(212,165,75,.14) !important; border-color:rgba(212,165,75,.65) !important; }

/* FIX banner right-edge clipping (same as folders): banner width = container so margin-left
   pushed it past the right edge. Force it to fit inside with the side margins. */
html.dark-mode #remote-objects-message.boxwarning,
html.dark-mode .boxwarning{ width:calc(100% - 60px) !important; box-sizing:border-box !important; }
/* avatar: drop CSS content so the JS-set initials src shows; keep size+round */
html.dark-mode #message-header .contactphoto{ content:normal !important; }

/* banner: let buttons show full address; wrap to next line if needed (never truncate) */
html.dark-mode .boxwarning{ flex-wrap:wrap !important; row-gap:8px !important; }
html.dark-mode .boxwarning .boxbuttons{ flex-shrink:0 !important; }
html.dark-mode .boxwarning .btn{ max-width:none !important; width:auto !important; overflow:visible !important; text-overflow:clip !important; white-space:nowrap !important; }

/* ===== thread view: selection bar on the leftmost visible cell (threads col), not mid-row ===== */
html.dark-mode .messagelist tr.selected td.threads{ box-shadow:inset 3px 0 0 var(--accent) !important; }
html.dark-mode .messagelist tr.selected td.threads + td.subject{ box-shadow:none !important; }
html.dark-mode .messagelist td.threads .expando{ color:var(--text-tertiary) !important; }
html.dark-mode .messagelist tr:hover td.threads .expando{ color:var(--text-secondary) !important; }

/* ============================================================
   2026-07-06 (v2)  reading-pane fixes
   (a) orange meta toggles + attachment action links
   (b) inline image-attachment preview: small light card, fully
       contained INSIDE the message body (no edge overflow)
   (c) roomier message body
   ============================================================ */

/* (a1) message meta toggles (Tiedot / Otsakkeet / Tavallinen teksti) -> orange.
   Scoped to #message-header (ID) to outrank Elastic's dark rule. */
html.dark-mode #message-header .header-links a,
html.dark-mode #message-header .header-links a .inner{ color:var(--accent) !important; }
html.dark-mode #message-header .header-links a:before,
html.dark-mode #message-header .header-links a .inner:before,
html.dark-mode #message-header .header-links a span:before{ color:var(--accent) !important; }
html.dark-mode #message-header .header-links a:hover,
html.dark-mode #message-header .header-links a:hover .inner,
html.dark-mode #message-header .header-links a:hover:before{ color:var(--accent-hover) !important; }

/* (c) message body: roomier AND contains its floated inline previews.
   display:flow-root makes the cream box wrap the float so the preview
   sits fully inside the white area instead of spilling over the edge. */
html.dark-mode #messagebody{ min-height:240px !important; display:flow-root !important; box-sizing:border-box !important; }

/* (b) inline image-attachment preview: compact LIGHT card on the cream surface */
html.dark-mode #messagebody p.image-attachment,
html.dark-mode p.image-attachment{
  min-width:190px !important; max-width:240px !important; min-height:0 !important;
  background-color:#EFECE4 !important;
  border:1px solid rgba(0,0,0,.12) !important; border-radius:10px !important;
  margin:14px 0 6px !important; overflow:hidden !important; clear:both !important;
}
html.dark-mode #messagebody p.image-attachment .image-link{ margin:1.8rem .6rem 2rem !important; align-self:center !important; }
html.dark-mode #messagebody p.image-attachment .image-link img{
  max-width:104px !important; max-height:104px !important;
  width:auto !important; height:auto !important; border-radius:7px !important;
}
html.dark-mode #messagebody p.image-attachment span{ color:#6B6B6B !important; }

/* (a2) preview action links (Näytä / lataa) -> orange.
   #messagebody-scoped so it beats the skin's `#messagebody a {blue}` rule
   (that is why only the icons turned orange but the label text stayed blue). */
html.dark-mode #messagebody p.image-attachment .attachment-links a,
html.dark-mode #messagebody p.image-attachment .attachment-links a .inner,
html.dark-mode #messagebody p.image-attachment .attachment-links a:before{ color:var(--accent) !important; }
html.dark-mode #messagebody p.image-attachment .attachment-links a:hover,
html.dark-mode #messagebody p.image-attachment .attachment-links a:hover:before{ color:var(--accent-hover) !important; }

/* ------------------------------------------------------------
   2026-07-06 (v3) uniform reading surface:
   Elastic dark forces the inner message part to white
   (.message-htmlpart { background:white } in dark.less), which
   showed a white rectangle inside the cream #messagebody. Make the
   inner parts transparent + borderless so the whole surface is one
   even cream tone (also applies to HTML newsletters).
   ------------------------------------------------------------ */
html.dark-mode #messagebody .message-part,
html.dark-mode #messagebody .message-htmlpart,
html.dark-mode #messagebody .message-partheaders{
  background-color:transparent !important;
  border:0 !important;
  margin-top:0 !important;
}