/* Copied verbatim from brandandco/schedule-dentist src/styles/portal.css (the shared app shell). Brand overrides live in concentric.css. */
/* Practice portal app shell (/portal). Values are CSS px from the spec; token overrides from the brief. */
:root {
  color-scheme: light dark;
  --surface: #FCFCFC;
  --text-primary: #0D0D0D;
  --text-secondary: #5D5D5D;
  --text-tertiary: #8F8F8F;
  --row-text: rgba(13, 13, 13, .85);
  --hover-bg: rgba(0, 0, 0, .05);
  --border: rgba(0, 0, 0, .10);
  --composer-bg: #FFFFFF;
  --composer-ring: inset 0 0 1px rgba(0, 0, 0, .20), 0 4px 16px rgba(0, 0, 0, .04);
  --bubble-bg: #CFF3E0;
  --bubble-text: #000000;
  --accent: #000000;
  --accent-ink: #FFFFFF;
  --highlight: #CFF3E0;
  --scrollbar: rgba(0, 0, 0, .15);
  --tooltip-bg: #0D0D0D;
  --ib-hover-bg: #FFFFFF; --ib-hover-ring: rgba(0, 0, 0, .08);
  --tooltip-ink: #FFFFFF;
  --menu-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);

  --rail-w: 52px;
  --sidebar-w: 340px;
  --row-h: 36px;
  --topbar-h: 52px;
  --thread-max: 768px;
  --panel-w: 400px;
  --ease-panel: cubic-bezier(.33, 1, .68, 1);
  --dur-open: 260ms;
  --dur-close: 230ms;
  --dur-color: 150ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #000000; --text-primary: #EDEDED; --text-secondary: #CDCDCD; --text-tertiary: #AFAFAF; --row-text: rgba(237, 237, 237, .85);
    --hover-bg: rgba(255, 255, 255, .10); --border: rgba(255, 255, 255, .15); --composer-bg: #1B1B1B; --composer-ring: inset 0 0 1px rgba(255, 255, 255, .20);
    --bubble-bg: #1F4D37; --bubble-text: #EAF7F0; --accent: #FFFFFF; --accent-ink: #000000; --highlight: #1F4D37; --scrollbar: rgba(255, 255, 255, .15);
    --tooltip-bg: #EDEDED; --tooltip-ink: #0D0D0D; --ib-hover-bg: #2A2A2A; --ib-hover-ring: rgba(255, 255, 255, .10); --menu-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --surface: #000000; --text-primary: #EDEDED; --text-secondary: #CDCDCD; --text-tertiary: #AFAFAF; --row-text: rgba(237, 237, 237, .85);
  --hover-bg: rgba(255, 255, 255, .10); --border: rgba(255, 255, 255, .15); --composer-bg: #1B1B1B; --composer-ring: inset 0 0 1px rgba(255, 255, 255, .20);
  --bubble-bg: #1F4D37; --bubble-text: #EAF7F0; --accent: #FFFFFF; --accent-ink: #000000; --highlight: #1F4D37; --scrollbar: rgba(255, 255, 255, .15);
  --tooltip-bg: #EDEDED; --tooltip-ink: #0D0D0D; --ib-hover-bg: #2A2A2A; --ib-hover-ring: rgba(255, 255, 255, .10); --menu-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body.portal {
  margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: row;
  background: var(--surface); color: var(--text-primary);
  font-family: -apple-system, ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; font-weight: 400; -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic.ic-fill { fill: currentColor; stroke: none; }
svg.ic.ic-w2 { stroke-width: 2; }
.ib { width: 36px; height: 36px; text-decoration: none; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); transition: background-color var(--dur-color) ease, box-shadow var(--dur-color) ease; position: relative; }
.ib:hover { background: var(--ib-hover-bg); box-shadow: 0 0 0 .5px var(--ib-hover-ring); }
.ib[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--tooltip-bg); color: var(--tooltip-ink); font-size: 12px; line-height: 16px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-color) ease; z-index: 50; }
.ib[data-tip]:hover::after { opacity: 1; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: #0B1F33; color: #FFFFFF; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em; flex: none; }

/* ---------------------------------------------------------------- aside: two layers, width animates */
.left-panel { position: relative; flex: none; width: var(--sidebar-w); height: 100%; overflow: hidden; background: var(--surface); transition: width var(--dur-open) var(--ease-panel); }
.left-panel[data-open="false"] { width: var(--rail-w); transition-duration: var(--dur-close); }
html.no-anim .left-panel, html.no-anim .panel-layer, html.no-anim .rail { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .left-panel, .panel-layer, .rail, .seg-pill { transition-duration: 0ms !important; } }

/* Rail: 52px, no border of its own (the divider is main's border-left at x=52). Measured boxes:
   logo 8,8 36×36 (icon 24 at 14,14) · nav 8,60 36×35 on a 36px pitch (icon 20 at 16,67.5 …) · avatar 8,bottom 12 36×36 (24 circle at 14,y+6). */
.rail { position: absolute; inset: 0 auto 0 0; width: var(--rail-w); height: 100vh; box-sizing: border-box; border: 0; padding: 0; overflow: visible; background: var(--surface); opacity: 0; pointer-events: none; transition: opacity var(--dur-color) steps(1, start); }
.left-panel[data-open="false"] .rail { opacity: 1; pointer-events: auto; }
.rail-hit { position: absolute; inset: 0; cursor: e-resize; background: transparent; border: 0; outline: none; }
.rail-stack { position: relative; z-index: 1; width: var(--rail-w); height: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 0 8px 0; pointer-events: none; }
.rail-stack > * { pointer-events: auto; }
.rail-top, .rail-btn, .rail-account { position: relative; flex: none; width: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; outline: none; box-shadow: none; padding: 0; margin: 0; transition: background-color var(--dur-color) ease; }
.rail-top { margin-top: 8px; height: 36px; color: var(--text-tertiary); }
.rail-top .logo, .rail-top .panel-ic { position: absolute; display: block; line-height: 0; transition: opacity 0ms; }
.rail-top .logo { left: 9px; top: 9px; width: 18px; height: 18px; color: var(--text-primary); }
.rail-top .logo svg { display: block; width: 18px; height: 18px; }
.rail-top .panel-ic { left: 8px; top: 8px; width: 20px; height: 20px; opacity: 0; color: var(--text-tertiary); }
.rail-top .panel-ic svg { display: block; width: 20px; height: 20px; }
.rail:hover .rail-top .logo { opacity: 0; }
.rail:hover .rail-top .panel-ic { opacity: 1; }
.rail-nav { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rail-btn { height: 35px; color: var(--text-primary); }
.rail-btn svg { display: block; width: 20px; height: 20px; }
.rail-account { margin-top: auto; margin-bottom: 4px; height: 36px; color: var(--text-primary); }
.rail-account .avatar-svg { display: block; width: 24px; height: 24px; }
.rail-top:hover, .rail-btn:hover, .rail-account:hover, .rail-account[aria-expanded="true"] { background: var(--ib-hover-bg); box-shadow: 0 0 0 .5px var(--ib-hover-ring); }
.rail-btn[aria-current="page"] { background: var(--hover-bg); }
.rail-stack button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail-btn[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--tooltip-bg); color: var(--tooltip-ink); font-size: 12px; line-height: 16px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-color) ease; z-index: 50; }
.rail-btn[data-tip]:hover::after { opacity: 1; }

.panel-layer { position: absolute; inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; height: 100%; opacity: 1; transition: opacity var(--dur-color) linear; }
.left-panel[data-open="false"] .panel-layer { opacity: 0; pointer-events: none; }
.panel-head { flex: none; height: 52px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; }
.switcher { margin-left: 2px; height: 31px; padding: 0 6px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100% - 46px); font-size: 16px; line-height: 16px; font-weight: 500; color: var(--text-primary); transition: background-color var(--dur-color) ease; position: relative; }
.switcher:hover { background: var(--hover-bg); }
.switcher .chev { width: 12px; height: 12px; flex: none; }
.switcher-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head .acts { display: flex; gap: 8px; }
#panel-close { color: var(--text-tertiary); }
#panel-close svg.ic { width: 18px; height: 18px; }
.row { position: relative; display: flex; align-items: center; gap: 8px; margin-left: 5px; width: calc(var(--sidebar-w) - 12px); height: var(--row-h); padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--text-primary); text-align: left; transition: background-color var(--dur-color) ease; white-space: nowrap; flex: none; }
.row:hover, .row[aria-current="page"] { background: var(--hover-bg); }
.row .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--row-text); }
.row.nav .lbl { color: var(--text-primary); }
.row .badge { font-size: 12px; line-height: 16px; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--highlight); color: var(--text-primary); text-align: center; font-weight: 500; }
.row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.row .acts { position: absolute; right: 8px; top: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-color) ease; }
.row:hover .acts, .row:focus-within .acts { opacity: 1; }
.row:hover .lbl { padding-right: 44px; }
.row .acts button { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.row .acts button:hover { background: var(--hover-bg); }
.row .acts svg { width: 12px; height: 12px; }
@media (hover: none) { .row .acts { opacity: 1; } .row .lbl { padding-right: 44px; } }
.row-primary { margin-top: 7px; flex: none; }
.row.text-only { padding-left: 15px; }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; display: flex; flex-direction: column; gap: 16px; padding-top: 0; }
.group { display: flex; flex-direction: column; }
.sec-head { position: relative; display: flex; align-items: center; height: 36px; margin-left: 12px; width: calc(var(--sidebar-w) - 24px); }
.sec-lbl { height: 36px; padding: 2px 4px; border-radius: 6px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 4px; }
.sec-lbl .chev { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-color) ease, transform 150ms cubic-bezier(.4, 0, .2, 1); }
.sec-head:hover .sec-lbl .chev { opacity: 1; }
.group[data-collapsed="true"] .sec-lbl .chev { transform: rotate(-90deg); }
.group[data-collapsed="true"] .sec-list { display: none; }
.sec-acts { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-color) ease; }
.sec-head:hover .sec-acts { opacity: 1; }
.sec-acts button { width: 23px; height: 23px; border-radius: 4px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.sec-acts button:hover { background: var(--hover-bg); }
.sec-acts svg { width: 14px; height: 14px; }
.sec-list .row { height: 37px; }
.row.showmore .lbl { color: var(--text-secondary); }
.row .ric { width: 18px; height: 18px; color: var(--text-secondary); }
.empty-row { margin-left: 15px; font-size: 13px; line-height: 20px; color: var(--text-tertiary); padding: 6px 0; }

.panel-foot { flex: none; height: 64px; padding: 0 6px; background: var(--surface); position: relative; display: flex; align-items: center; }
.account { margin-left: -1px; width: calc(var(--sidebar-w) - 12px); height: 52px; padding: 6px 10px; border-radius: 12px; display: flex; align-items: center; gap: 9px; text-align: left; transition: background-color var(--dur-color) ease; }
.account:hover, .account[aria-expanded="true"] { background: var(--hover-bg); }
.account .l1 { font-size: 14px; line-height: 20px; color: var(--text-primary); }
.account .l2 { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.menu { position: absolute; left: 5px; bottom: calc(100% - 6px); width: calc(var(--sidebar-w) - 12px); background: var(--composer-bg); border-radius: 16px; box-shadow: var(--menu-shadow); padding: 8px; z-index: 40; transform-origin: bottom left; opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity var(--dur-color) ease, transform var(--dur-color) ease; }
.menu[data-open="true"] { opacity: 1; transform: scale(1); pointer-events: auto; }
.menu button, .menu a { display: flex; width: 100%; align-items: flex-start; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 18px; text-align: left; text-decoration: none; }
.menu .mi-ic { flex: none; width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.menu .mi-ic svg { width: 20px; height: 20px; }
.menu .mi-ic svg[viewBox="0 0 12 12"] { width: 12px; height: 12px; }
.menu .mi-text { min-width: 0; flex: 1; text-align: left; line-height: 18px; }
.menu button:hover, .menu a:hover { background: var(--hover-bg); }
.menu .mhead { font-size: 12px; color: var(--text-tertiary); padding: 6px 10px 2px; }
.switcher-menu { position: absolute; top: 44px; left: 8px; bottom: auto; width: 280px; transform-origin: top left; }

/* ---------------------------------------------------------------- account menu (fixed popover, anchored to the trigger) */
:root { --menu-bg: rgba(255, 255, 255, .90); --menu-ring: rgba(0, 0, 0, .10); --menu-sep: rgba(0, 0, 0, .10); --menu-av: #3E9D7E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --menu-bg: rgba(48, 48, 48, .90); --menu-ring: rgba(255, 255, 255, .15); --menu-sep: rgba(255, 255, 255, .15); } }
:root[data-theme="dark"] { --menu-bg: rgba(48, 48, 48, .90); --menu-ring: rgba(255, 255, 255, .15); --menu-sep: rgba(255, 255, 255, .15); }
.menu-pop { position: fixed; z-index: 70; width: 228px; padding: 10px; border-radius: 16px; box-sizing: border-box; background: var(--menu-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 0.5px var(--menu-ring), 0 8px 16px -4px rgba(0, 0, 0, .12); max-height: calc(100vh - 16px); overflow-y: auto; scrollbar-width: thin; outline: none; opacity: 0; transform: scale(.96); transform-origin: bottom left; pointer-events: none; transition: opacity 100ms cubic-bezier(.4, 0, .2, 1), transform 100ms cubic-bezier(.4, 0, .2, 1); }
.menu-pop[data-open="true"] { opacity: 1; transform: scale(1); pointer-events: auto; transition-duration: 150ms; }
.menu-sub { transform-origin: top left; }
@media (prefers-reduced-motion: reduce) { .menu-pop { transform: none !important; transition: opacity 100ms linear; } }
.mi { position: relative; display: flex; align-items: center; gap: 6px; width: 208px; height: 36px; padding: 6px 10px; margin: 0; border-radius: 12px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-primary); text-align: left; background: transparent; border: 0; white-space: nowrap; box-sizing: border-box; }
.mi > span:first-child:not(.mi-av) { display: inline-flex; width: 20px; height: 20px; flex: none; }
.mi svg.ic { width: 20px; height: 20px; }
.mi:hover, .mi[data-active="true"] { background: var(--hover-bg); }
.mi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mi > span:has(> .chev-r) { margin-left: auto; display: inline-flex; width: 16px; height: 16px; flex: none; }
.mi .chev-r { width: 16px; height: 16px; color: var(--text-tertiary); flex: none; }
.mi-head { height: 46px; gap: 6px; }
.mi-av { width: 20px; height: 20px; border-radius: 50%; background: var(--menu-av); color: #FFFFFF; font-size: 9px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.mi-text { display: flex; flex-direction: column; min-width: 0; }
.mi-text .n { font-size: 14px; line-height: 20px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.mi-text .p { font-size: 12px; line-height: 14px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; }
.mi-sep { padding: 8px; }
.mi-sep i { display: block; height: 1px; background: var(--menu-sep); }
.mi-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.mi-badge > span { display: inline-flex; align-items: center; line-height: 0; }
.mi-badge svg { display: block; width: 12px; height: 12px; }

/* ---------------------------------------------------------------- main */
main.shell { flex: 1; min-width: 0; height: 100%; position: relative; border-left: 0.5px solid var(--border); display: flex; flex-direction: row; }
.body-scroll { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; padding-top: 84px; display: flex; flex-direction: column; }
.column { width: 100%; max-width: calc(var(--thread-max) + 48px); padding-inline: 24px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
@media (max-width: 480px) { .column { padding-inline: 16px; } }

.topbar { position: fixed; top: 0; right: 0; height: var(--topbar-h); z-index: 30; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 15px; left: var(--sidebar-w); transition: left var(--dur-open) var(--ease-panel); }
.left-panel[data-open="false"] ~ main .topbar { left: var(--rail-w); transition-duration: var(--dur-close); }
html.no-anim .topbar { transition: none !important; }
.topbar > * { pointer-events: auto; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 4px; }
.tb-right { padding-right: 0; }
.hamburger { display: none; color: var(--text-secondary); }
.hamburger svg.ic { width: 30px; height: 30px; }
.seg { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 223px; height: 36px; border-radius: 9999px; display: none; background: transparent; padding: 0; }
.seg button { position: relative; z-index: 1; width: 111px; height: 36px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); transition: color var(--dur-color) ease; }
.seg button[aria-pressed="true"] { color: var(--text-primary); }
.seg-pill { position: absolute; top: 0; left: 0; width: 111px; height: 36px; border-radius: 9999px; background: var(--hover-bg); transition: transform 200ms var(--ease-panel); }
.seg[data-active="profile"] .seg-pill { transform: translateX(112px); }
@media (max-width: 1279px) { body[data-current="home"] .seg { display: block; } }
.tb-right .ib[aria-pressed="true"] { background: var(--hover-bg); }
.ib[data-tip-b]::after { content: attr(data-tip-b); position: absolute; top: calc(100% + 6px); right: 0; background: var(--tooltip-bg); color: var(--tooltip-ink); font-size: 12px; line-height: 16px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-color) ease; }
.ib[data-tip-b]:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- live profile panel */
.live-panel { flex: none; width: var(--panel-w); height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; border-left: 0.5px solid var(--border); padding: 84px 24px 32px; display: none; }
@media (min-width: 1280px) { body[data-panel="true"] .live-panel { display: block; } }
@media (max-width: 1279px) { #panel-toggle { display: none; } }
.bb-kicker { font-size: 12px; line-height: 16px; color: var(--text-tertiary); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; }
.bb-sec { padding: 14px 0; border-top: 0.5px solid var(--border); }
.bb-sec:first-of-type { border-top: 0; padding-top: 0; }
.bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bb-head h3 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.bb-edit { font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.bb-edit:hover { color: var(--text-primary); }
.bb-name { font-size: 22px; line-height: 28px; font-weight: 500; margin: 0; }
.bb-city { font-size: 14px; color: var(--text-secondary); margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--highlight); color: var(--text-primary); border-radius: 999px; padding: 2px 8px; }
.vbadge svg { width: 12px; height: 12px; }
.bb-dent { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.bb-dent .ph { width: 40px; height: 40px; border-radius: 50%; background: var(--hover-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); overflow: hidden; flex: none; }
.bb-dent .ph img { width: 100%; height: 100%; object-fit: cover; }
.bb-dent .n { font-size: 15px; line-height: 20px; }
.bb-dent .b { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.bb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; line-height: 18px; padding: 4px 10px; border-radius: 999px; background: var(--hover-bg); color: var(--text-primary); }
.bb-week { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bb-day { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; }
.bb-day .d { color: var(--text-secondary); font-size: 13px; }
.bb-day .closed { color: var(--text-tertiary); }
.bb-contact { font-size: 14px; line-height: 22px; color: var(--text-primary); }
.staged { background: var(--highlight); border-radius: 4px; padding: 0 4px; }
.staged-old { text-decoration: line-through; color: var(--text-tertiary); margin-right: 6px; }
.staged-note { font-size: 12px; color: var(--text-tertiary); margin-left: 6px; }

/* ---------------------------------------------------------------- views */
.view { display: none; flex: 1; flex-direction: column; }
.view[data-active="true"] { display: flex; }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
.hero h1 { font-size: 36px; line-height: 1.2; font-weight: 400; text-align: center; margin: 0 0 8px; }
.hero .status { text-align: center; color: var(--text-secondary); margin: 0 0 28px; font-size: 16px; line-height: 24px; }
.thread { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.msg-user { align-self: flex-end; max-width: 70%; padding: 10px 16px; border-radius: 22px; background: var(--bubble-bg); color: var(--bubble-text); white-space: pre-wrap; }
.msg-ai { width: 100%; white-space: pre-wrap; position: relative; }
.msg-ai p { margin: 0 0 16px; }
.msg-ai .acts { display: flex; gap: 4px; margin-top: 4px; opacity: .35; transition: opacity var(--dur-color) ease; }
.msg-ai:hover .acts { opacity: 1; }
.msg-ai .acts button { width: 28px; height: 28px; border-radius: 6px; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; }
.msg-ai .acts button:hover { background: var(--hover-bg); }
.msg-ai .acts svg { width: 16px; height: 16px; }
.tool-note { font-size: 13px; color: var(--text-tertiary); }

.cards { display: flex; flex-direction: column; gap: 10px; margin: 0 auto 20px; width: 100%; max-width: 560px; }
.card { background: var(--composer-bg); box-shadow: var(--composer-ring); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.card .ct { flex: 1; min-width: 0; }
.card .l1 { font-size: 15px; line-height: 20px; font-weight: 500; }
.card .l2 { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.card .cb { display: flex; gap: 8px; flex: none; }
.btn { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--dur-color) ease, color var(--dur-color) ease; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { opacity: .9; }
.btn-soft { background: var(--hover-bg); color: var(--text-primary); }
.btn-soft:hover { background: var(--border); }
.btn:disabled { opacity: .5; cursor: default; }
.card.done .l2 { color: var(--text-secondary); }
.card.proposal { align-items: flex-start; flex-direction: column; gap: 10px; }
.card.proposal .cb { align-self: flex-end; }
.card .meta { font-size: 12px; color: var(--text-tertiary); }
.card.review { border-left: 3px solid var(--text-tertiary); }

.composer-wrap { position: sticky; bottom: 0; padding: 8px 0 0; background: var(--surface); }
.composer { min-height: 52px; border-radius: 28px; background: var(--composer-bg); box-shadow: var(--composer-ring); display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px 8px 8px; }
.composer .plus { color: var(--text-primary); flex: none; }
.composer textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; outline: none; font-size: 16px; line-height: 26px; padding: 5px 4px; max-height: 160px; }
.composer textarea::placeholder { color: var(--text-tertiary); }
.composer .mic { color: var(--text-primary); flex: none; }
.composer .mic[aria-pressed="true"] { color: var(--text-primary); background: var(--hover-bg); }
.send { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: opacity var(--dur-color) ease; }
.send:disabled { opacity: .35; cursor: default; }
.send svg { width: 20px; height: 20px; stroke: var(--accent-ink); }
.attach { display: flex; gap: 6px; padding: 0 12px 6px; }
.attach img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.chips button { font-size: 13px; line-height: 18px; color: var(--text-secondary); padding: 6px 12px; border-radius: 999px; transition: background-color var(--dur-color) ease, color var(--dur-color) ease; }
.chips button:hover { background: var(--hover-bg); color: var(--text-primary); }
.disclaimer { font-size: 12px; line-height: 16px; text-align: center; color: var(--text-tertiary); margin: 8px 0 0; padding-bottom: 8px; }

/* secondary views */
.v-head { font-size: 32px; line-height: 1.2; font-weight: 400; margin: 0 0 16px; }
.list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.plain-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--border); font-size: 14px; }
.plain-row .s { color: var(--text-secondary); font-size: 13px; }
.sub { color: var(--text-secondary); font-size: 14px; margin: 0 0 16px; }

/* ---------------------------------------------------------------- mobile drawer */
.scrim { display: none; }
@media (max-width: 767px) {
  .left-panel { position: fixed; left: 0; top: 0; bottom: 0; width: 300px !important; z-index: 60; transform: translateX(-100%); transition: transform var(--dur-open) var(--ease-panel); --sidebar-w: 300px; }
  .left-panel[data-drawer="true"] { transform: translateX(0); }
  .left-panel .rail { display: none; }
  .left-panel .panel-layer { opacity: 1 !important; pointer-events: auto !important; width: 300px; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity var(--dur-color) ease; z-index: 55; }
  .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
  main.shell { border-left: 0; }
  .topbar { left: 0 !important; padding-left: 8px; }
  .hamburger { display: inline-flex; }
  .seg { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
  .topbar { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; }
  .tb-left { min-width: 0; grid-column: 1; }
  .seg { grid-column: 2; }
  .tb-right { grid-column: 3; justify-self: end; }
  .card { flex-direction: column; align-items: stretch; }
  .card .cb { justify-content: flex-end; }
  .msg-user { max-width: 85%; }
}

/* ---------- search dialog ---------- */
.search-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.search-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.search-dlg { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(800px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 32px)); transform: translate(-50%, -50%) scale(.98); transform-origin: center; display: flex; flex-direction: column; background: var(--composer-bg); color: var(--text-primary); border-radius: 20px; box-shadow: var(--menu-shadow), 0 0 0 .5px var(--border); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 150ms ease, transform 150ms var(--ease-panel); }
.search-dlg[data-open="true"] { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.search-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px 14px 24px; border-bottom: .5px solid var(--border); }
.search-head input { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 17px; line-height: 24px; }
.search-head input::placeholder { color: var(--text-tertiary); }
.search-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 8px 12px 12px; }
.sr-head { font-size: 13px; line-height: 18px; color: var(--text-tertiary); padding: 12px 12px 6px; }
.sr-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 20px; color: var(--text-primary); text-align: left; transition: background-color var(--dur-color) ease; }
.sr-row:hover, .sr-row[data-active="true"] { background: var(--hover-bg); }
.sr-row .ic { flex: none; width: 20px; height: 20px; color: var(--text-secondary); }
.sr-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .s { flex: none; font-size: 13px; color: var(--text-tertiary); }
.sr-empty { padding: 24px 12px 20px; font-size: 14px; color: var(--text-tertiary); }
@media (max-width: 767px) { .search-dlg { top: 16px; transform: translate(-50%, 0) scale(.98); max-height: calc(100vh - 32px); } .search-dlg[data-open="true"] { transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .search-dlg, .search-scrim { transition-duration: 0ms !important; } }

/* ---------- platform admin banner (persistent) ---------- */
:root { --admin-h: 0px; }
body[data-admin="read-only"], body[data-admin="act-as"] { --admin-h: 40px; }
.admin-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--admin-h); z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; font-size: 12px; line-height: 16px; color: #FFFFFF; background: #0B1F33; }
body[data-admin="act-as"] .admin-banner { background: #B3261E; }
.admin-banner b { font-weight: 600; }
.ab-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.ab-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #FFFFFF; color: #0B1F33; cursor: pointer; }
.ab-link { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.ab-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; color: #FFFFFF; background: transparent; cursor: pointer; transition: background-color 120ms ease; }
.ab-ib:hover, .ab-ib:focus-visible { background: rgba(255, 255, 255, .18); }
.ab-ib svg { width: 18px; height: 18px; display: block; }
.admin-banner form { display: inline-flex; margin: 0; }
body[data-admin] .left-panel, body[data-admin] .rail, body[data-admin] .body-scroll, body[data-admin] .live-panel { height: calc(100vh - var(--admin-h)); }
body[data-admin] .topbar { top: var(--admin-h); }
body[data-admin] { padding-top: var(--admin-h); box-sizing: border-box; }
@media (max-width: 767px) { body[data-admin] .left-panel { top: var(--admin-h); } }
/* read-only: no composer, no change/request actions */
body[data-readonly="true"] .composer-wrap, body[data-readonly="true"] .bb-edit, body[data-readonly="true"] .cb, body[data-readonly="true"] .chips { display: none !important; }

/* ---------- admin links in the portal ---------- */
a.row, a.mi, a.rail-btn { text-decoration: none; color: inherit; }
.sec-lbl.sec-static { cursor: default; color: var(--text-tertiary); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body[data-current="stats"] .column, body[data-current="practices"] .column, body[data-current="licenses"] .column, body[data-current="readiness"] .column, body[data-current="photos"] .column, body[data-current="review"] .column { max-width: 1180px; }
body[data-current="stats"] .live-panel, body[data-current="practices"] .live-panel, body[data-current="licenses"] .live-panel, body[data-current="readiness"] .live-panel, body[data-current="photos"] .live-panel, body[data-current="review"] .live-panel { display: none; }

/* ---------- admin mode: the admin's own dashboard, nothing practice-specific ---------- */
body[data-admin="admin"] .row-primary, body[data-admin="admin"] #g-nav, body[data-admin="admin"] #g-waiting, body[data-admin="admin"] #g-changes, body[data-admin="admin"] #g-recents,
body[data-admin="admin"] .rail-nav .rail-btn:not(a), body[data-admin="admin"] #rail-search, body[data-admin="admin"] .seg, body[data-admin="admin"] #public-link, body[data-admin="admin"] #panel-toggle,
body[data-admin="admin"] .live-panel, body[data-admin="admin"] #account-menu [data-view], body[data-admin="admin"] #account-menu [data-act="locations"] { display: none !important; }
body[data-admin="admin"] .sec-head { margin-top: 4px; }

/* licensed photo credit in the live profile */
.bb-dent .credit { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.bb-dent .credit .bb-edit { display: inline; padding: 0; font-size: 11px; background: none; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.bb-dent .ph img.pending { filter: grayscale(.2); outline: 2px dashed var(--text-tertiary); outline-offset: 2px; }

.hero-link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }