/* Fluent 2 (Microsoft 365): the web v9 tokens (brand ramp #0f6cbd, neutral greys, Segoe UI), a brand-coloured
   header as in Outlook on the web (data-base "brand") or a neutral one as in Teams ("neutral"), a Teams-style app
   bar with a brand indicator, Outlook's unread bar, Teams chat bubbles on a grey canvas, inputs with the animated
   brand underline, acrylic flyouts and the Fluent motion curves.
   Loaded after themes.css and app.css; every rule is scoped to [data-theme="fluent"]. Raw values are --fl-*. */

[data-theme="fluent"] {
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: #f0f0f0; --paper: #ffffff; --paper-2: #fafafa; --card: #ffffff; --elevated: #ffffff;
  --subtle: #f5f5f5; --hover: #f5f5f5; --active: #ebebeb;
  --fg: #242424; --fg-2: #424242; --fg-3: #616161; --fg-muted: #707070;
  --border: #e0e0e0; --border-strong: #d1d1d1; --input: #d1d1d1;

  --primary: #0f6cbd; --primary-hover: #115ea3; --primary-fg: #ffffff;
  --primary-soft: #ebf3fc; --primary-soft-fg: #115ea3;
  --ring: #0f6cbd; --ring-alpha: 30%;
  --focus-w: 2px; --focus-c: #000000; --focus-o: 1px;

  --danger: #b10e1c; --danger-solid: #c50f1f; --danger-soft: #fdf3f4; --danger-border: #eeacb2;
  --warn: #bc4b09; --warn-soft: #fff9f5; --warn-border: #fdcfb4;
  --ok: #0e700e; --ok-solid: #107c10; --ok-soft: #f1faf1; --ok-border: #9fd89f;
  --snooze: #4f52b2; --snooze-solid: #5b5fc7; --snooze-soft: #f0f0fa; --snooze-border: #c5c6ec;
  --label: #5c2e91; --label-soft: #f6f0fa; --label-border: #d4c1e8;
  --sample: #8a3707; --sample-soft: #fdf6f3; --sample-border: #f4c9b1;
  --unread: #0f6cbd; --unread-line: color-mix(in srgb, var(--primary) 40%, transparent); --draft: #c50f1f;
  --note-bg: #fefbf4; --note-border: #f9e2ae; --note-fg: #835b00; --note-strong: #a16305; --note-focus: #eaa300; --note-soft: #fffcf5;
  --fail-bg: #fff9f5; --fail-border: #fdcfb4;

  --bubble-in: #ffffff; --bubble-in-fg: #242424;
  --bubble-out: color-mix(in srgb, var(--primary) 14%, #ffffff); --bubble-out-fg: #242424;
  --bubble-other: #f1faf1; --bubble-other-fg: #242424; --bubble-other-border: #c9eac9;
  --bubble-fail: #fdf3f4; --bubble-fail-border: #eeacb2; --bubble-fail-fg: #242424;
  --file-bg: #fafafa; --file-border: #e0e0e0;
  --summary-bg: var(--primary-soft); --summary-border: color-mix(in srgb, var(--primary) 25%, #ffffff); --summary-fg: #242424;
  --sug-bg: #ffffff; --sug-border: #d1d1d1; --sug-hover: #f5f5f5; --sug-fg: #242424;
  --info-soft: var(--primary-soft); --info-fg: #0c3b5e;
  --mark: #fef7b2; --star: #eaa300;

  --toast-bg: #ffffff; --toast-fg: #242424; --toast-border: transparent; --toast-action: var(--primary);
  --skel-a: #e6e6e6; --skel-b: #fafafa; --skel-anim: aa-shimmer 2s ease infinite;
  --scrim: rgb(0 0 0 / .4); --scroll-shadow: rgb(0 0 0 / .1);
  /* shadow2, shadow4, shadow16, shadow28 */
  --shadow-xs: 0 0 #0000;
  --shadow-sm: 0 0 2px rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .14);
  --shadow-md: 0 0 2px rgb(0 0 0 / .12), 0 8px 16px rgb(0 0 0 / .14);
  --shadow-lg: 0 0 8px rgb(0 0 0 / .12), 0 14px 28px rgb(0 0 0 / .14);
  --shadow-side: 0 0 2px rgb(0 0 0 / .12), 0 8px 16px rgb(0 0 0 / .14);

  /* radius 4 (borderRadiusMedium) gives Fluent's scale: small 2, medium 4, large 6, x-large 8, circular */
  --btn-radius: var(--r-lg); --field-radius: var(--r-lg); --card-radius: calc(var(--radius) * 1.5); --menu-radius: var(--r-lg);
  --item-radius: var(--r-lg); --chip-radius: 999px; --pill-radius: var(--r-lg); --row-radius: 0px;
  --bubble-radius: calc(var(--radius) * 1.5); --panel-radius: calc(var(--radius) * 2);
  --weight-strong: 600; --weight-head: 600; --weight-active: 600; --tracking-head: 0;
  --sec-transform: none; --sec-size: 12px; --sec-weight: 600; --sec-spacing: 0;
  --side-bg: #f0f0f0; --side-fg: #424242; --side-hover: rgb(0 0 0 / .05); --side-hover-fg: #242424;
  --side-active-bg: #e6e6e6; --side-active-fg: #242424; --side-muted: #616161;
  --side-border: #e0e0e0; --side-title: #242424; --side-sub-bg: transparent; --side-parent-fg: #242424;

  --fl-header: var(--primary); --fl-canvas: #f5f5f5; --fl-divider: #ebebeb;
  --fl-subtle-hover: #f5f5f5; --fl-pressed: #e0e0e0;
  --fl-stroke-hover: #c7c7c7; --fl-stroke-pressed: #b3b3b3; --fl-stroke-accessible: #616161; --fl-stroke-accessible-hover: #575757;
  --fl-brand-fg: var(--primary); --fl-brand-stroke: color-mix(in srgb, var(--primary) 35%, #ffffff); --fl-brand-pressed: color-mix(in srgb, var(--primary) 60%, #000000);
  --fl-acrylic: rgb(252 252 252 / .86); --fl-flyout-border: rgb(0 0 0 / .06); --fl-search-fg: #616161;
  color-scheme: light;
}
[data-theme="fluent"][data-mode="dark"] {
  --bg: #141414; --paper: #292929; --paper-2: #1f1f1f; --card: #292929; --elevated: #292929;
  --subtle: #333333; --hover: #383838; --active: #383838;
  --fg: #ffffff; --fg-2: #d6d6d6; --fg-3: #adadad; --fg-muted: #adadad;
  --border: #3d3d3d; --border-strong: #666666; --input: #666666;

  --primary: #115ea3; --primary-hover: #0f6cbd; --primary-fg: #ffffff;
  --primary-soft: #082338; --primary-soft-fg: #479ef5; --ring-alpha: 45%;
  --focus-c: #ffffff;

  --danger: #dc626d; --danger-solid: #c50f1f; --danger-soft: #3b0509; --danger-border: #8a1c27;
  --warn: #faa06b; --warn-soft: #411200; --warn-border: #8a3a0c;
  --ok: #54b054; --ok-solid: #107c10; --ok-soft: #052505; --ok-border: #0e5a0e;
  --snooze: #9a9cf0; --snooze-solid: #7f85f5; --snooze-soft: #1e1f3d; --snooze-border: #3a3d80;
  --label: #c6a5ec; --label-soft: #2a1a3d; --label-border: #4d2e73;
  --sample: #f4a87a; --sample-soft: #3d1a06; --sample-border: #7a3510;
  --unread: #479ef5; --draft: #dc626d;
  --note-bg: #3d2a00; --note-border: #6e4d00; --note-fg: #f2c661; --note-strong: #a16305; --note-focus: #eaa300; --note-soft: #2b1e00;
  --fail-bg: #411200; --fail-border: #8a3a0c;

  --bubble-in: #292929; --bubble-in-fg: #ffffff;
  --bubble-out: color-mix(in srgb, var(--primary) 34%, #292929); --bubble-out-fg: #ffffff;
  --bubble-other: #0f2b0f; --bubble-other-fg: #ffffff; --bubble-other-border: #1d4d1d;
  --bubble-fail: #3b0509; --bubble-fail-border: #8a1c27; --bubble-fail-fg: #ffffff;
  --file-bg: #1f1f1f; --file-border: #3d3d3d;
  --summary-border: color-mix(in srgb, var(--primary) 45%, #1f1f1f); --summary-fg: #ffffff;
  --sug-bg: #292929; --sug-border: #666666; --sug-hover: #383838; --sug-fg: #ffffff;
  --info-fg: #b4d6fa;
  --mark: rgb(254 247 178 / .3); --star: #f2c661;

  --toast-bg: #292929; --toast-fg: #ffffff;
  --skel-a: #333333; --skel-b: #3d3d3d;
  --scrim: rgb(0 0 0 / .5); --scroll-shadow: rgb(0 0 0 / .5);
  --shadow-sm: 0 0 2px rgb(0 0 0 / .24), 0 1px 2px rgb(0 0 0 / .28);
  --shadow-md: 0 0 2px rgb(0 0 0 / .24), 0 8px 16px rgb(0 0 0 / .28);
  --shadow-lg: 0 0 8px rgb(0 0 0 / .24), 0 14px 28px rgb(0 0 0 / .28);
  --shadow-side: 0 0 2px rgb(0 0 0 / .24), 0 8px 16px rgb(0 0 0 / .28);
  --side-bg: #141414; --side-fg: #d6d6d6; --side-hover: rgb(255 255 255 / .06); --side-hover-fg: #ffffff;
  --side-active-bg: #2e2e2e; --side-active-fg: #ffffff; --side-muted: #adadad;
  --side-border: #3d3d3d; --side-title: #ffffff; --side-parent-fg: #ffffff;

  --fl-header: color-mix(in srgb, var(--primary) 45%, #141414); --fl-canvas: #1f1f1f; --fl-divider: #333333;
  --fl-subtle-hover: #383838; --fl-pressed: #2e2e2e;
  --fl-stroke-hover: #757575; --fl-stroke-pressed: #6b6b6b; --fl-stroke-accessible: #adadad; --fl-stroke-accessible-hover: #bdbdbd;
  --fl-brand-fg: var(--primary-soft-fg); --fl-brand-stroke: color-mix(in srgb, var(--primary-soft-fg) 55%, #292929); --fl-brand-pressed: color-mix(in srgb, var(--primary) 70%, #000000);
  --fl-acrylic: rgb(44 44 44 / .86); --fl-flyout-border: rgb(255 255 255 / .08); --fl-search-fg: #adadad;
  color-scheme: dark;
}
/* sizes: 48 header (Outlook), 32 controls (Fluent medium), 36 navigation items; compact uses Fluent small */
[data-theme="fluent"] { --top-h: 48px; --ctl-h: 32px; --ctl-sm: 32px; --nav-h: 36px; --nav-h-sm: 32px; }
[data-theme="fluent"][data-density="compact"] { --top-h: 44px; --ctl-h: 28px; --ctl-sm: 24px; --nav-h: 32px; --nav-h-sm: 28px; }

/* motion: durationFaster/Fast/Normal on curveDecelerateMid (Tinh tế), Fast/Gentle/Slower on curveDecelerateMax (Mượt) */
[data-theme="fluent"][data-motion="subtle"] {
  --dur-1: 100ms; --dur-2: 150ms; --dur-3: 200ms;
  --ease-out: cubic-bezier(0, 0, 0, 1); --ease-spring: cubic-bezier(.1, .9, .2, 1);
}
[data-theme="fluent"][data-motion="smooth"] {
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 400ms;
  --ease-out: cubic-bezier(0, 0, 0, 1); --ease-spring: cubic-bezier(.1, .9, .2, 1); --enter-y: 10px;
}

/* Fluent System Icons are drawn with a lighter stroke; a selected icon is filled */
[data-theme="fluent"] .ic { stroke-width: 1.5; }

/* ── header: brand bar as in Outlook on the web, or neutral as in Teams ── */
[data-theme="fluent"] .top { gap: 8px; padding: 0 8px 0 12px; border-bottom-color: var(--border); }
[data-theme="fluent"] .brand { font-size: 16px; font-weight: 600; letter-spacing: 0; }
[data-theme="fluent"] .gsearch { height: 32px; max-width: 520px; padding: 0 10px; gap: 8px; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--subtle); color: var(--fl-search-fg); font-size: 14px; }
[data-theme="fluent"] .gsearch:hover { background: var(--subtle); border-color: var(--fl-stroke-hover); }
[data-theme="fluent"] .gsearch .ic { color: var(--fl-brand-fg); }
[data-theme="fluent"] kbd { border-radius: var(--r-sm); }
[data-theme="fluent"] .tenant { height: 32px; border-color: var(--border-strong); box-shadow: none; font-size: 14px; font-weight: 400; }
[data-theme="fluent"] .iconbtn { border-radius: var(--r-lg); }
[data-theme="fluent"] .me { border-radius: var(--r-lg); }
[data-theme="fluent"] .demo-btn { height: 28px; border-radius: var(--r-lg); background: transparent; font-weight: 400; font-size: 13px; }
[data-theme="fluent"] .conn { height: 28px; border-radius: var(--r-lg); font-weight: 600; font-size: 12px; }
[data-theme="fluent"] .badge { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 16px; box-shadow: 0 0 0 1px var(--paper); }
/* the brand bar re-colours what sits on it through the same tokens */
[data-theme="fluent"][data-base="brand"] .top {
  --fg: #ffffff; --fg-2: #ffffff; --fg-3: #ffffff; --fg-muted: rgb(255 255 255 / .82);
  --hover: rgb(255 255 255 / .14); --border: rgb(255 255 255 / .32); --border-strong: rgb(255 255 255 / .5);
  background: var(--fl-header); border-bottom-color: transparent; color: #ffffff;
}
[data-theme="fluent"][data-base="brand"] .top .logo-bg { fill: #ffffff; }
[data-theme="fluent"][data-base="brand"] .top .logo-fg { fill: var(--fl-header); }
[data-theme="fluent"][data-base="brand"] .top .tenant { background: transparent; }
[data-theme="fluent"][data-base="brand"] .top .gsearch { background: var(--paper); }
[data-theme="fluent"][data-base="brand"] .top .gsearch:hover { border-color: transparent; box-shadow: 0 0 0 1px rgb(255 255 255 / .6); }
[data-theme="fluent"][data-base="brand"] .top .gsearch kbd { border-color: var(--input); color: var(--fl-search-fg); background: transparent; }
[data-theme="fluent"][data-base="brand"] .top .demo-btn { border-color: rgb(255 255 255 / .6); color: #ffffff; }
[data-theme="fluent"][data-base="brand"] .top .demo-btn:hover, [data-theme="fluent"][data-base="brand"] .top .demo-btn.on { background: rgb(255 255 255 / .14); border-color: #ffffff; color: #ffffff; }
[data-theme="fluent"][data-base="brand"] .top .conn.ok { background: rgb(255 255 255 / .16); color: #ffffff; }
[data-theme="fluent"][data-base="brand"] .top .badge { box-shadow: 0 0 0 1px var(--fl-header); }
[data-theme="fluent"][data-base="brand"] .top .iconbtn.on { background: rgb(255 255 255 / .2); color: #ffffff; }
[data-theme="fluent"][data-base="brand"] .top :focus-visible { outline-color: #ffffff; }

/* ── app bar (classic): Teams' left bar, a brand indicator and a filled icon on the selected app ── */
[data-theme="fluent"] .rail { width: 68px; border-right: 0; }
[data-theme="fluent"] .rail-scroll { gap: 0; padding: 4px 0; }
[data-theme="fluent"] .rail-foot { border-top-color: var(--side-border); }
[data-theme="fluent"] .rail-btn { width: 64px; min-height: 54px; gap: 2px; border-radius: var(--r-lg); font-size: 10px; font-weight: 400; }
[data-theme="fluent"] .rail-btn .ic { width: 24px; height: 24px; }
[data-theme="fluent"] .rail-btn:hover { color: var(--fl-brand-fg); }
[data-theme="fluent"] .rail-btn.on { background: transparent; color: var(--fl-brand-fg); font-weight: 600; }
[data-theme="fluent"] .rail-btn.on .ic, [data-theme="fluent"] .sb-item.on .ic { fill: color-mix(in srgb, currentColor 16%, transparent); }
[data-theme="fluent"] :is(.rail-btn, .sb-item, .sb-subitem, .nav-row).on::before { content: ""; position: absolute; left: -2px; top: 50%; width: 3px; height: 20px; translate: 0 -50%; border-radius: 2px; background: var(--primary); }
[data-theme="fluent"] :is(.sb-item, .sb-subitem, .nav-row).on::before { left: 0; height: 16px; }
[data-theme="fluent"] .rail-btn .count { top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--danger-solid); color: #ffffff; font-size: 10px; font-weight: 600; line-height: 16px; box-shadow: 0 0 0 1px var(--side-bg); }
[data-theme="fluent"] .rail-sep { width: 32px; background: var(--side-border); }
[data-theme="fluent"] .rail-cap { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ── navigation pane (sidebar layout): the Windows 11 look, content in a frame with one rounded corner ── */
[data-theme="fluent"][data-layout="sidebar"] .app { background: var(--side-bg); }
[data-theme="fluent"][data-layout="sidebar"] .rail { --sb-w: 15rem; width: var(--sb-w); background: var(--side-bg); }
[data-theme="fluent"][data-layout="sidebar"][data-sidebar="collapsed"] .rail { --sb-w: 3.5rem; }
[data-theme="fluent"][data-layout="sidebar"] .main { margin: 0; border: 1px solid var(--border); border-width: 1px 0 0 1px; border-radius: var(--panel-radius) 0 0 0; box-shadow: none; }
[data-theme="fluent"][data-layout="sidebar"][data-mode="dark"] .main { box-shadow: none; }
[data-theme="fluent"] .sb-item, [data-theme="fluent"] .sb-subitem { position: relative; border-radius: var(--r-lg); font-weight: 400; }
[data-theme="fluent"] .sb-item { height: var(--nav-h); }
[data-theme="fluent"] .sb-subitem { height: var(--nav-h-sm); }
[data-theme="fluent"] :is(.sb-item, .sb-subitem).on { font-weight: 600; }
[data-theme="fluent"] .sb-label { font-weight: 600; color: var(--side-fg); }
[data-theme="fluent"] .sb-sub { border-left: 0; margin-left: 8px; }
[data-theme="fluent"] .sb-badge { color: var(--fl-brand-fg); font-weight: 600; }
/* an open parent shows no indicator; the selected view carries it. Folded to icons, the parent shows it again. */
[data-theme="fluent"] .sb-row:has(+ .sb-sub) .sb-item.on::before { display: none; }
[data-theme="fluent"][data-sidebar="collapsed"] .sb-row .sb-item.on::before { display: block; }
[data-theme="fluent"][data-sidebar="collapsed"] .sb-item { width: 40px; height: 36px; }

/* ── folder pane: Outlook's folders, brand unread counts ── */
[data-theme="fluent"] .nav-row { height: var(--nav-h); border-radius: var(--r-lg); font-weight: 400; }
[data-theme="fluent"] .nav-row:hover { background: var(--fl-subtle-hover); }
[data-theme="fluent"] .nav-row.on { background: var(--active); color: var(--fg); font-weight: 600; }
[data-theme="fluent"] .nav-row .num, [data-theme="fluent"] .nav-row.on .num { color: var(--fl-brand-fg); font-weight: 600; }
[data-theme="fluent"] .nav-sec { color: var(--fg-2); }

/* ── message list: full-width rows, a brand bar on unread ones, a tinted selection ── */
[data-theme="fluent"] .vrow { left: 0; right: 0; height: var(--row-h); margin-top: -4px; }
[data-theme="fluent"] .conv { position: relative; border-radius: 0; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--fl-divider); }
[data-theme="fluent"] .conv:hover { background: var(--fl-subtle-hover); }
[data-theme="fluent"] .conv.on { background: var(--primary-soft); }
[data-theme="fluent"] .conv.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
[data-theme="fluent"] .conv-name { font-weight: 400; }
[data-theme="fluent"] .conv.unread .conv-name { font-weight: 600; }
[data-theme="fluent"] .conv.unread .conv-time { color: var(--fl-brand-fg); font-weight: 600; }
[data-theme="fluent"] .conv.unread .conv-prev { color: var(--fl-brand-fg); }
[data-theme="fluent"] .skel-row { padding: 12px 16px 12px 20px; }
[data-theme="fluent"][data-density="compact"] .conv, [data-theme="fluent"][data-density="compact"] .skel-row { padding: 8px 16px 8px 20px; }
[data-theme="fluent"] .unread-count { background: var(--primary); font-weight: 600; }
[data-theme="fluent"] :is(.viewpick, .sortbtn) { border-radius: var(--r-lg); }
[data-theme="fluent"] .viewpick { font-weight: 600; }
/* filters as Teams' circular toggle pills */
[data-theme="fluent"] .chip { height: 28px; padding: 0 8px 0 12px; border-color: var(--border-strong); font-size: 13px; font-weight: 400; color: var(--fg); }
[data-theme="fluent"] .chip:hover { background: var(--fl-subtle-hover); border-color: var(--fl-stroke-hover); }
[data-theme="fluent"] .chip:active { background: var(--fl-pressed); }
[data-theme="fluent"] .chip.on { background: var(--primary-soft); border-color: var(--fl-brand-stroke); color: var(--fl-brand-fg); font-weight: 600; }
/* Badge, tint appearance */
[data-theme="fluent"] .pill { height: 20px; padding: 0 6px; font-size: 12px; font-weight: 600; border-color: transparent; }
[data-theme="fluent"] .pill.red { border-color: var(--danger-border); }
[data-theme="fluent"] .pill.amber { border-color: var(--warn-border); }
[data-theme="fluent"] .pill.green { border-color: var(--ok-border); }
[data-theme="fluent"] .pill.snoozed { border-color: var(--snooze-border); }
[data-theme="fluent"] .pill.label { border-color: var(--label-border); }
[data-theme="fluent"] .pill.sample { border-color: var(--sample-border); }
[data-theme="fluent"] :is(.pill.grey, .pill.inbox) { background: var(--paper); border-color: var(--border-strong); color: var(--fg-2); font-weight: 400; }

/* ── inputs: grey frame, darker bottom stroke, and the brand underline that grows from the centre on focus ── */
[data-theme="fluent"] :is(.lsearch, .nav-search, .composer) { position: relative; border-color: var(--input); border-bottom-color: var(--fl-stroke-accessible); box-shadow: none; }
[data-theme="fluent"] :is(.lsearch, .nav-search) { height: 32px; border-radius: var(--r-lg); background: var(--paper); }
[data-theme="fluent"] :is(.lsearch, .nav-search):hover, [data-theme="fluent"] .composer:hover { border-color: var(--fl-stroke-hover); border-bottom-color: var(--fl-stroke-accessible-hover); }
[data-theme="fluent"] :is(.lsearch, .nav-search, .composer):focus-within { border-color: var(--input); border-bottom-color: var(--fl-stroke-accessible); box-shadow: none; }
[data-theme="fluent"] :is(.lsearch, .nav-search, .composer)::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: max(2px, var(--r-lg));
  border-bottom: 2px solid var(--primary); border-radius: 0 0 var(--r-lg) var(--r-lg); clip-path: inset(calc(100% - 2px) 0 0 0);
  transform: scaleX(0); transition: transform var(--dur-1) cubic-bezier(.9, .1, 1, .2); pointer-events: none;
}
[data-theme="fluent"] :is(.lsearch, .nav-search, .composer):focus-within::after { transform: scaleX(1); transition: transform var(--dur-2) cubic-bezier(0, 0, 0, 1); }
[data-theme="fluent"] .composer.note::after { border-bottom-color: var(--note-focus); }
[data-theme="fluent"] .composer.note { border-bottom-color: var(--note-strong); }
[data-theme="fluent"] .composer.note:focus-within { box-shadow: none; border-color: var(--note-border); border-bottom-color: var(--note-strong); }

/* ── reading pane: Teams chat, white bubbles on a grey canvas, a white header ── */
[data-theme="fluent"] .thread { background: var(--fl-canvas); }
[data-theme="fluent"] .th-head { background: var(--paper); }
[data-theme="fluent"] .th-who h1 { font-size: 16px; font-weight: 600; }
[data-theme="fluent"] .bubble, [data-theme="fluent"] .row.out .bubble { border-radius: var(--bubble-radius); padding: 8px 12px; }
[data-theme="fluent"] .row.in .bubble { box-shadow: var(--shadow-sm); }
[data-theme="fluent"] .row.out.other .bubble { box-shadow: inset 0 0 0 1px var(--bubble-other-border); }
[data-theme="fluent"] .summary { border-bottom-color: var(--summary-border); }
[data-theme="fluent"] .summary .ic { color: var(--fl-brand-fg); }
[data-theme="fluent"] .day::before, [data-theme="fluent"] .day::after { background: var(--border-strong); }
[data-theme="fluent"] .sys span { background: var(--paper); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); }
/* Button: semibold, 4px; Secondary has a grey frame; Primary in the brand colour; Split for send */
[data-theme="fluent"] .btn { height: var(--ctl-sm); padding: 0 12px; border-color: var(--border-strong); background: var(--paper); box-shadow: none; font-size: 14px; font-weight: 600; color: var(--fg); }
[data-theme="fluent"] .btn:hover { background: var(--fl-subtle-hover); border-color: var(--fl-stroke-hover); }
[data-theme="fluent"] .btn:active { background: var(--fl-pressed); border-color: var(--fl-stroke-pressed); }
[data-theme="fluent"] .btn.primary { border-color: transparent; background: var(--primary); color: var(--primary-fg); }
[data-theme="fluent"] .btn.primary:hover { background: var(--primary-hover); }
[data-theme="fluent"] .btn.primary:active, [data-theme="fluent"] .sendgrp button:active { background: var(--fl-brand-pressed); }
[data-theme="fluent"] .btn.icon { width: var(--ctl-sm); padding: 0; }
[data-theme="fluent"] .seg { border-color: var(--border-strong); box-shadow: none; }
[data-theme="fluent"] .seg button + button { border-left-color: var(--border-strong); }
[data-theme="fluent"] .sendgrp { box-shadow: none; }
[data-theme="fluent"] .sendgrp button { height: 32px; font-size: 14px; font-weight: 600; }
[data-theme="fluent"] :is(.tool, .linkbtn, .ghost, .sortbtn) { font-weight: 400; }
[data-theme="fluent"] .linkbtn { color: var(--fl-brand-fg); border-radius: var(--r-lg); }
[data-theme="fluent"] .linkbtn:hover { background: transparent; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="fluent"] .linkbtn.red { color: var(--danger); }
[data-theme="fluent"] .viewing { border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); }
/* TabList: the selected tab gets a 3px brand indicator, hovering shows a grey one; the label is semibold */
[data-theme="fluent"] :is(.tab, .ctx-tab) { position: relative; border-bottom: 0; font-size: 14px; font-weight: 400; color: var(--fg-2); }
[data-theme="fluent"] :is(.tab, .ctx-tab):hover { color: var(--fg); }
[data-theme="fluent"] :is(.tab, .ctx-tab):hover::after, [data-theme="fluent"] :is(.tab, .ctx-tab).on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 2px; background: var(--fl-stroke-hover); }
[data-theme="fluent"] :is(.tab, .ctx-tab).on { color: var(--fg); text-shadow: 0 0 .4px currentColor, 0 0 .4px currentColor; }
[data-theme="fluent"] :is(.tab, .ctx-tab).on::after { background: var(--primary); }
[data-theme="fluent"] .composer.note .tab.on::after { background: var(--note-focus); }
[data-theme="fluent"] .composer.note .tab.on { color: var(--note-fg); }
[data-theme="fluent"] .sug { border-radius: var(--r-lg); height: 30px; }

/* ── details pane and pages: cards with shadow4, no frame ── */
[data-theme="fluent"] :is(.card, .trow, .kpi, .pcard) { border-color: transparent; box-shadow: var(--shadow-sm); }
[data-theme="fluent"] .ghost { border-color: var(--border-strong); box-shadow: none; }
[data-theme="fluent"] .ghost:hover { background: var(--fl-subtle-hover); border-color: var(--fl-stroke-hover); }
[data-theme="fluent"] .ghost.note:hover { background: var(--note-bg); border-color: var(--note-focus); }
[data-theme="fluent"] .ctx-tabs { background: var(--paper); }
[data-theme="fluent"] .page h1 { font-size: 20px; line-height: 28px; font-weight: 600; }
[data-theme="fluent"] .tbl th { background: var(--paper); font-size: 12px; font-weight: 600; color: var(--fg-2); }
[data-theme="fluent"] .tbl tbody tr:hover td { background: var(--fl-subtle-hover); }
[data-theme="fluent"] .state .ico { background: transparent; color: var(--fl-brand-fg); }

/* ── flyouts in acrylic, the Toast at the bottom end, dialogs scale in ── */
[data-theme="fluent"] :is(.pop, .macros, .look, .palette) { border-color: var(--fl-flyout-border); background: var(--fl-acrylic); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); }
[data-theme="fluent"] :is(.pop, .macros) { padding: 4px; }
[data-theme="fluent"] .pop { animation: fl-slide var(--dur-3) var(--ease-out); }
[data-theme="fluent"] .pop button { height: 32px; padding: 0 8px 0 6px; gap: 6px; font-size: 14px; }
[data-theme="fluent"] .pop button:hover, [data-theme="fluent"] .pop button:focus-visible, [data-theme="fluent"] .macro:hover, [data-theme="fluent"] .macro.on { background: rgb(0 0 0 / .05); }
[data-theme="fluent"][data-mode="dark"] :is(.pop button:hover, .pop button:focus-visible, .macro:hover, .macro.on) { background: rgb(255 255 255 / .07); }
[data-theme="fluent"] .pop button .ic { color: var(--fl-brand-fg); }
[data-theme="fluent"] .toast { left: auto; right: 16px; bottom: 16px; translate: none; min-width: 320px; max-width: min(420px, calc(100vw - 32px)); padding: 12px; gap: 8px; border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); font-size: 14px; animation: fl-toast var(--dur-3) var(--ease-spring); }
[data-theme="fluent"] .toast > span { flex: 1; }
[data-theme="fluent"] .toast::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 999px; background: radial-gradient(circle at 50% 30%, #ffffff 0 1.3px, transparent 1.5px), linear-gradient(#ffffff, #ffffff) 50% 70% / 1.8px 6.5px no-repeat, var(--fl-brand-fg); }
[data-theme="fluent"] .toast button { color: var(--fl-brand-fg); font-weight: 600; }
[data-theme="fluent"] .palette { animation: fl-dialog var(--dur-3) var(--ease-spring); }
[data-theme="fluent"] .palette .it { height: 36px; }
[data-theme="fluent"] .palette .it.on { background: var(--active); }
[data-theme="fluent"] .look-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
@keyframes fl-slide { from { opacity: 0; transform: translateY(-10px); } }
@keyframes fl-toast { from { opacity: 0; transform: translateX(40px); } }
@keyframes fl-dialog { from { opacity: 0; transform: scale(.94); } }

@media (max-width:767px) {
  /* Outlook mobile: the indicator moves to the top of the selected tab */
  [data-theme="fluent"] .rail-btn.on::before { left: 50%; top: 0; width: 20px; height: 3px; translate: -50% 0; }
  [data-theme="fluent"] .toast { left: 8px; right: 8px; bottom: 74px; min-width: 0; }
}

/* the header strip of this theme's mini preview in the Giao diện panel */
[data-theme="fluent"][data-base="brand"] { --pv-top: var(--fl-header); }