/* Tobira widget v8 replica for the landing prototype (worker A).
   Values copied from src/client/embed/v8 (tokens.css, shell.css, frame.css, chat/chat.css) and the legacy
   booking card (styles/embed.css .embed-v2__bk-*) on origin/main. Scope: .tbw only. Always light. */

.tbw {
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.18, .88, .3, 1.05);
  /* soft_light (base .wv8) */
  --bg: #fff; --surface: #fbfbfa; --surface-2: #f1f3f5;
  --ink: #303334; --muted: #62676c; --faint: #777d83; --hairline: #e5e5e3; --wash: #f1f3f5;
  --accent: #286caa; --accent-soft: #eaf2fb; --gold: #987127; --gold-soft: #faf1db; --side-bg: #f5f6f7;
  --cta-bg: #252626; --cta-ink: #fff; --bk-cta: #2e3033; --bk-cta-ink: #fff;
  --dot-avail: #7695b9; --chip-border: #e2e5e9; --chip-on: #2e3033; --day-sel: #2e3033;
  --type-grad: linear-gradient(110deg, #eef3fa, #e4edf8, #eef0f4);
  --mist: radial-gradient(ellipse at 90% 18%, #dce8ff99, transparent 55%), radial-gradient(ellipse at 10% 40%, #eae1f66b, transparent 58%), radial-gradient(ellipse at 75% 90%, #f8e6dc88, transparent 53%);
  --r-win: 18px; --r-md: 12px; --r-sm: 8px;
  --shadow: 0 22px 70px #302a2321, 0 4px 16px #302a230b;
  --blob-1: #f6c86a; --blob-2: #f3a78a; --blob-3: #c9b8f0; --blob-4: #a9d3c8;
  color-scheme: light;
  font-family: var(--font);
  color: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  line-height: normal;
  letter-spacing: normal;
}
.tbw[data-style=notion] {
  --surface: #fcfbf8; --surface-2: #f1efea;
  --ink: #37352f; --muted: #68655e; --faint: #79756d; --hairline: #e7e5df; --wash: #f1efea;
  --accent: #89651c; --accent-soft: #f7efd9; --gold: #9a7420; --gold-soft: #faf3da; --side-bg: #f7f5f0;
  --cta-bg: #292824; --bk-cta: #eea30d; --bk-cta-ink: #fff; --chip-on: #3a352c; --day-sel: #2f2c27;
  --dot-avail: #a5863e; --chip-border: #e5e0d5;
  --type-grad: linear-gradient(110deg, #f8efd6, #f1e7cc, #f8f2e6);
  --mist: radial-gradient(ellipse at 70% 12%, #fae5ad85, transparent 53%), radial-gradient(ellipse at 8% 48%, #f6dfcf75, transparent 55%), radial-gradient(ellipse at 92% 90%, #eee5c67d, transparent 58%);
}
.tbw[data-style=aura] {
  --bg: #fdfaf4; --surface: rgba(255,255,255,.72); --surface-2: rgba(80,66,44,.07);
  --ink: #2e2a23; --muted: #7c7469; --faint: #a89f92; --hairline: rgba(80,66,44,.12); --wash: rgba(80,66,44,.07);
  --accent: #b97800; --accent-soft: #f7ecdc; --gold: #b97800; --gold-soft: #f7ecdc; --side-bg: #f6efe4;
  --cta-bg: #2e2a23; --bk-cta: #ECA10D; --chip-on: #2e2a23; --day-sel: #2e2a23; --dot-avail: #b97800;
  --r-win: 26px; --r-md: 16px; --r-sm: 11px;
  --shadow: 0 30px 90px rgba(64,50,28,.2), 0 6px 22px rgba(64,50,28,.08);
  --mist: linear-gradient(145deg, #f5dcbf66, #fbefdf55 52%, #dfe8f866);
}
.tbw[data-style=atelier] {
  --font-display: "Playfair Display", Georgia, serif;
  --bg: #fbf8f2; --surface: #f5f1e9; --surface-2: rgba(33,27,19,.06);
  --ink: #211d16; --muted: #6e675b; --faint: #a2988a; --hairline: rgba(33,27,19,.13); --wash: rgba(33,27,19,.06);
  --accent: #211d16; --accent-soft: #f2ead9; --gold: #a2733c; --gold-soft: #f2ead9; --side-bg: #f5f1e9;
  --cta-bg: #16130e; --cta-ink: #f6f1e7; --bk-cta: #16130e; --bk-cta-ink: #f6f1e7; --chip-on: #16130e; --day-sel: #16130e; --dot-avail: #a2733c;
  --r-win: 18px; --r-md: 12px; --r-sm: 10px;
  --shadow: 0 26px 80px rgba(46,36,20,.2), 0 5px 18px rgba(46,36,20,.07);
  --mist: linear-gradient(145deg, #e8ddca66, #f5efe355 52%, #dfe4ea66);
}

:where(.tbw) *, :where(.tbw) *::before, :where(.tbw) *::after { box-sizing: border-box; }
:where(.tbw) :is(button, input, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.tbw) button { border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: background-color .16s ease, color .16s ease, transform .2s var(--ease), opacity .16s ease; }
:where(.tbw) button:active:not(:disabled) { transform: scale(.97); }
:where(.tbw) button:disabled { cursor: default; opacity: .4; }
:where(.tbw) :is(button, input, textarea):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
:where(.tbw) svg { display: block; width: 16px; height: 16px; flex: none; }
:where(.tbw) [hidden] { display: none !important; }
:where(.tbw) p { margin: 0; }
.tbw :is(h1, h2, h3, p, small, strong, b, span, button, label) { text-transform: none; }
.tbw :is(h1, h2, h3) { font-style: normal; }

/* ---------- window ---------- */
.tbw-win { position: relative; display: flex; width: 100%; height: 100%; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-win); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.tbw-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; isolation: isolate; }
.tbw-main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mist); pointer-events: none; }

/* header */
.tbw-head { position: relative; z-index: 10; height: 66px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-bottom: 1px solid var(--hairline); background: #ffffffaf; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); white-space: nowrap; }
.tbw[data-style=aura] .tbw-head, .tbw[data-style=atelier] .tbw-head { background: transparent; }
.tbw-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--cta-bg); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -1px; overflow: hidden; }
.tbw-mark img { width: 100%; height: 100%; object-fit: cover; }
.tbw-mark[data-logo] { background: #fff; border: 1px solid var(--hairline); }
.tbw[data-style=aura] .tbw-mark:not([data-logo]) { background: linear-gradient(135deg, #f6e2c6, #fcefdd 55%, #e3ecfa); color: #3c3428; border-radius: 11px; }
.tbw[data-style=atelier] .tbw-mark:not([data-logo]) { background: #16130e; color: #f6f1e7; border-radius: 50%; font-family: var(--font-display); }
.tbw-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tbw-brand strong { font-size: 13px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.tbw[data-style=atelier] .tbw-brand strong { font-family: var(--font-display); letter-spacing: -.01em; font-size: 14px; }
.tbw-brand small { display: block; font-size: 9px; line-height: 1.5; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tbw-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 5px; vertical-align: 1px; }
.tbw[data-style=notion] .tbw-dot, .tbw[data-agent=tobira] .tbw-dot { background: #d9960f; }
.tbw-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.tbw-book { display: flex; align-items: center; gap: 5px; margin-right: 2px; padding: 8px 10px; border-radius: 8px; font-size: 11px; font-weight: 550; color: var(--cta-ink) !important; background: var(--cta-bg) !important; box-shadow: 0 2px 4px #22222212; }
.tbw-book:hover { background: #42413d !important; transform: translateY(-1px); }
.tbw-book svg { width: 13px; height: 13px; }
.tbw-icon { width: 27px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); flex: none; }
.tbw-icon:hover { background: var(--wash); color: var(--ink); }
.tbw-icon svg { width: 16px; height: 16px; }
.tbw[data-layout=wide] .tbw-head { padding: 0 22px; }
.tbw[data-layout=wide] .tbw-actions { gap: 6px; }
.tbw[data-layout=wide] .tbw-book { padding: 9px 13px; font-size: 12px; margin-right: 6px; }

/* view */
.tbw-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tbw-view { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #d7d3ca transparent; overscroll-behavior: contain; }
.tbw-home { padding: 17px 18px; }
.tbw[data-layout=wide] .tbw-home { max-width: 680px; margin: 0 auto; padding: 30px 28px 20px; }

/* banner (hero card) */
.tbw-hero { position: relative; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 18px #242e3c04; }
.tbw[data-style=aura] .tbw-hero, .tbw[data-style=atelier] .tbw-hero { background: var(--bg); }
.tbw-hero-media { position: relative; height: 112px; margin: 9px 9px 0; border-radius: 9px; overflow: hidden; background: #fbf4e6; }
.tbw[data-layout=wide] .tbw-hero-media { height: 135px; }
.tbw-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #fff, transparent 65%); }
.tbw-blob { position: absolute; border-radius: 50%; filter: blur(22px); opacity: .85; will-change: transform; }
.tbw-blob:nth-child(1) { width: 58%; height: 150%; left: -8%; top: -40%; background: var(--blob-1); }
.tbw-blob:nth-child(2) { width: 46%; height: 130%; left: 34%; top: -10%; background: var(--blob-2); opacity: .7; }
.tbw-blob:nth-child(3) { width: 44%; height: 140%; right: -10%; top: -50%; background: var(--blob-3); opacity: .75; }
.tbw-blob:nth-child(4) { width: 30%; height: 90%; right: 18%; bottom: -30%; background: var(--blob-4); opacity: .6; }
.tbw[data-agent=arco] { --blob-1: #e9c8a0; --blob-2: #c98f6e; --blob-3: #b9c9d8; --blob-4: #d8cba6; }
.tbw-anim .tbw-blob { animation: tbwDrift 14s ease-in-out infinite alternate; }
.tbw-anim .tbw-blob:nth-child(2) { animation-duration: 17s; animation-delay: -4s; }
.tbw-anim .tbw-blob:nth-child(3) { animation-duration: 19s; animation-delay: -8s; }
@keyframes tbwDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(8%, 6%) scale(1.08); } }
.tbw-hero-label { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 5px 7px; border-radius: 5px; background: #fcfcfded; border: 1px solid #fff9; font-size: 8px; font-weight: 550; letter-spacing: .12em; color: var(--ink); }
.tbw-hero-body { padding: 0 15px 15px; }
.tbw[data-layout=wide] .tbw-hero-body { padding: 1px 20px 20px; }
.tbw-hero-body h2 { margin: 3px 0 7px; font-family: var(--font-display); font-size: 17px; font-weight: 630; line-height: 1.35; letter-spacing: -.03em; color: var(--ink); }
.tbw[data-layout=wide] .tbw-hero-body h2 { font-size: 22px; }
.tbw-hero-body p { margin: 0 0 12px; font-size: 11px; line-height: 1.55; color: var(--muted); }
.tbw[data-layout=wide] .tbw-hero-body p { font-size: 12px; }
.tbw-hero-bottom { display: flex; align-items: center; gap: 9px; }
.tbw-avatar { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hairline); background: linear-gradient(135deg, #3b352c, #6d5a3c); color: #fff8ea; font-size: 11px; font-weight: 600; }
.tbw-hero-bottom small { font-size: 9px; color: var(--faint); }
.tbw-hero-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 7px; font-size: 10px; font-weight: 600; background: var(--gold-soft); color: #755719; }
.tbw-hero-cta:hover { background: #f3e5bd; }
.tbw[data-style=atelier] .tbw-hero-cta, .tbw[data-style=soft] .tbw-hero-cta { background: var(--wash); color: var(--ink); }
.tbw-hero-cta svg { width: 13px; height: 13px; }

/* welcome + tasks */
.tbw-welcome { margin: 24px 6px 16px; }
.tbw[data-layout=wide] .tbw-welcome { margin: 29px 5px 18px; }
.tbw-welcome-label { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 10px; color: var(--faint); }
.tbw-welcome h2 { margin: 0 0 9px; font-family: var(--font-display); font-size: 24px; font-weight: 550; letter-spacing: -.04em; line-height: 1.15; color: var(--ink); }
.tbw[data-layout=wide] .tbw-welcome h2 { font-size: 29px; }
.tbw-welcome p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.tbw-team { display: flex; align-items: center; gap: 6px; margin: 0 5px 14px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 12px; font-weight: 550; color: var(--ink); }
.tbw-team svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.tbw-team:hover svg { transform: translateX(3px); }
.tbw-tasks { display: flex; flex-direction: column; gap: 3px; }
.tbw-task { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 9px; border-radius: 10px; text-align: left; transition: transform .24s cubic-bezier(.2,.9,.25,1.4), background-color .18s, box-shadow .2s !important; }
.tbw-task:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 6px 18px #302c2010; }
.tbw-task > span:first-child { width: 30px; height: 33px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--gold-soft); color: var(--gold); transition: transform .25s var(--ease); }
.tbw-task:nth-child(3) > span:first-child { background: #edeae1; color: #70624a; }
.tbw[data-style=soft] .tbw-task > span:first-child { background: var(--accent-soft); color: var(--accent); }
.tbw[data-style=aura] .tbw-task > span:first-child { background: #f7ecdc; color: #4a4238; border-radius: 11px; }
.tbw[data-style=atelier] .tbw-task > span:first-child { background: transparent; color: #6e675b; }
.tbw-task:hover > span:first-child { transform: rotate(-5deg) scale(1.07); }
.tbw-task-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tbw-task strong { font-size: 12px; font-weight: 550; color: var(--ink); }
.tbw-task small { font-size: 10px; line-height: 1.4; color: var(--muted); }
.tbw-task > svg:last-child { margin-left: auto; width: 14px; color: var(--accent); opacity: 0; transition: opacity .15s; }
.tbw-task:hover > svg:last-child { opacity: 1; }
.tbw[data-layout=wide] .tbw-task { padding: 13px 9px; }

/* chat feed */
.tbw-chat { max-width: 710px; margin: 0 auto; padding: 14px 23px 15px; color: var(--ink); }
.tbw[data-layout=wide] .tbw-chat { max-width: 750px; padding: 18px 28px 16px; }
.tbw-msg { margin-bottom: 26px; animation: tbwIn .26s var(--ease) backwards; }
.tbw-msg-user { margin-left: 25px; display: flex; flex-direction: column; align-items: flex-end; }
.tbw-bubble { max-width: 100%; padding: 12px 15px; border-radius: 18px 18px 5px 18px; background: var(--surface-2); color: var(--ink); font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.tbw[data-layout=wide] .tbw-bubble { font-size: 14px; max-width: 90%; }
.tbw-byline { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; font-size: 10px; color: color-mix(in srgb, var(--muted) 65%, var(--bg)); }
.tbw-byline .tbw-mark { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; letter-spacing: 0; }
.tbw-answer { font-size: 14px; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.tbw-answer p { margin: 0 0 13px; }
.tbw-answer p:last-child { margin-bottom: 0; }
.tbw-answer strong { font-weight: 600; }
.tbw-caret { display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: currentColor; opacity: .5; animation: tbwBreath 1.2s ease-in-out infinite; }
.tbw-status { display: flex; align-items: center; gap: 8px; margin: 14px 0 24px; padding: 5px 0; font-size: 12px; font-weight: 500; color: var(--ink); animation: tbwIn .2s var(--ease) backwards; }
.tbw-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px #7777770b; animation: tbwBreath 1.8s ease-in-out infinite; }
@keyframes tbwBreath { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes tbwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tbw-table { margin: 14px 0 16px; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.tbw-table table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5; }
.tbw-table th, .tbw-table td { padding: 10px 12px; border-top: 1px solid var(--hairline); text-align: left; vertical-align: top; color: var(--ink); }
.tbw-table thead th { border-top: 0; background: var(--surface-2); font-weight: 600; }
.tbw-table tbody th { font-weight: 550; background: var(--surface); }
/* d4 v7: the table arrives whole, once, from a light blur (rows no longer stream in one by one) */
.tbw-table { animation: tbwBlurIn .42s var(--ease) backwards; }
@keyframes tbwBlurIn { from { opacity: 0; filter: blur(5px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
.tbw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tbw-chip-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--hairline) !important; background: var(--bg) !important; color: var(--ink); font-size: 12px; animation: tbwIn .25s var(--ease) backwards; }
.tbw-chip-btn[data-primary] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg); }
.tbw-chip-btn:hover { transform: translateY(-1px); }
.tbw-chip-btn svg { width: 13px; height: 13px; }
.tbw-chip-btn[data-press] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(.97); }
.tbw-files { display: flex; justify-content: flex-end; margin-bottom: 9px; }
.tbw-doc { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg); box-shadow: 0 3px 10px #27395006; color: var(--ink); max-width: 100%; }
.tbw-ext { width: 30px; height: 36px; flex: none; display: grid; place-items: end start; padding: 0 0 4px 3px; border-radius: 7px; border: 1px solid var(--hairline); background: var(--surface); font-size: 6px; font-weight: 700; letter-spacing: .02em; color: #b4412c; }
.tbw-doc-copy { display: flex; flex-direction: column; min-width: 0; }
.tbw-doc-copy strong { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.tbw-doc-copy small { margin-top: 1px; font-size: 10px; color: var(--muted); }
.tbw-booked { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 13px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg); font-size: 12.5px; line-height: 1.45; }
.tbw-booked > span:first-child { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold); }
.tbw-booked svg { width: 14px; height: 14px; }

/* composer */
.tbw-composer-region { position: relative; z-index: 3; flex: none; padding: 9px 14px 0; }
.tbw[data-layout=wide] .tbw-composer-region { max-width: 766px; width: 100%; margin: 0 auto; padding: 12px 25px 0; }
.tbw-composer { position: relative; padding: 10px 10px 8px 13px; border: 1px solid color-mix(in srgb, var(--muted) 8%, var(--hairline)); border-radius: 17px; background: var(--bg); box-shadow: 0 2px 7px #322e2205; transition: border-color .2s, box-shadow .2s; }
.tbw-composer:focus-within { border-color: color-mix(in srgb, var(--muted) 20%, var(--hairline)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 5%, transparent); }
.tbw-composer textarea { display: block; width: 100%; min-height: 24px; max-height: 92px; padding: 3px 2px; border: 0; outline: 0 !important; resize: none; background: transparent; font-size: 14px; line-height: 1.6; color: var(--ink); scrollbar-width: thin; }
.tbw-composer textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, var(--bg)); }
.tbw-tools { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.tbw-tools .tbw-icon { width: 29px; height: 29px; }
.tbw-tools .tbw-icon svg { width: 17px; height: 17px; }
.tbw-spacer { flex: 1; }
.tbw-send { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink) !important; color: var(--bg); box-shadow: 0 2px 4px #0001; }
.tbw-send:disabled { background: color-mix(in srgb, var(--muted) 55%, var(--bg)) !important; opacity: .7; }
.tbw-send svg { width: 16px; height: 16px; }
.tbw-pending { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 8px; }
.tbw-pending .tbw-doc { padding: 7px 12px 7px 7px; border: 0; border-radius: 11px; background: var(--surface-2); box-shadow: none; animation: tbwIn .22s var(--ease) backwards; }
.tbw-pending .tbw-doc-copy strong { max-width: 150px; font-size: 11px; }
.tbw-recording { display: flex; align-items: center; gap: 8px; height: 29px; padding: 0 10px; border-radius: 22px; border: 1px solid var(--hairline); background: var(--surface); font-size: 11px; color: var(--muted); }
.tbw-wave { display: flex; align-items: center; gap: 2px; height: 14px; }
.tbw-wave i { width: 2px; height: 100%; border-radius: 2px; background: var(--ink); transform: scaleY(.3); animation: tbwWave 1s ease-in-out infinite; }
.tbw-wave i:nth-child(2) { animation-delay: -.2s; } .tbw-wave i:nth-child(3) { animation-delay: -.4s; } .tbw-wave i:nth-child(4) { animation-delay: -.6s; } .tbw-wave i:nth-child(5) { animation-delay: -.8s; }
@keyframes tbwWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.tbw-voice { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--hairline); border-radius: 17px; background: var(--bg); box-shadow: 0 2px 7px #322e2205; }
.tbw-voice-orb { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background: conic-gradient(from 30deg, #dfc799, #fae9c1, #d9b797, #ecdec0, #f5e6bc, #dfc799); }
.tbw-anim .tbw-voice-orb { animation: tbwSpin 6s linear infinite; }
@keyframes tbwSpin { to { transform: rotate(1turn); } }
.tbw-voice-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tbw-voice-copy small { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.tbw-voice-copy span { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.tbw-voice-end { padding: 8px 11px; border-radius: 9px; background: var(--wash) !important; font-size: 11px; font-weight: 550; }
.tbw-footer { display: flex; align-items: center; gap: 4px; padding: 9px 2px 12px; font-size: 9px; color: var(--faint); white-space: nowrap; }
.tbw-footer b { font-weight: 550; color: var(--muted); }
.tbw-footer .tbw-spacer { flex: 1; }
.tbw-skip { position: absolute; z-index: 6; bottom: 10px; right: 14px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hairline) !important; background: #ffffffd9 !important; font-size: 10.5px; font-weight: 550; color: var(--muted); backdrop-filter: blur(6px); }
.tbw-skip:hover { color: var(--ink); }

/* sidebar (wide) */
.tbw-side { display: none; width: 236px; flex: none; flex-direction: column; padding: 23px 13px 13px; background: var(--side-bg); border-right: 1px solid var(--hairline); white-space: nowrap; overflow: hidden; }
.tbw[data-layout=wide]:not([data-narrow]) .tbw-side { display: flex; }
.tbw-side-brand { display: flex; align-items: center; gap: 9px; padding: 0 11px 24px; font-size: 17px; font-weight: 650; letter-spacing: -.7px; color: var(--ink); }
.tbw[data-style=atelier] .tbw-side-brand { font-family: var(--font-display); letter-spacing: -.01em; }
.tbw-side-brand .tbw-mark { width: 24px; height: 24px; font-size: 14px; border-radius: 6px; }
.tbw-nav { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 8px; font-size: 12px; text-align: left; color: var(--muted); }
.tbw-nav svg { color: var(--faint); }
.tbw-nav:hover, .tbw-nav[data-on] { background: var(--wash); color: var(--ink); }
.tbw-nav[data-on] { font-weight: 550; }
.tbw-side-label { padding: 29px 12px 9px; font-size: 11px; font-weight: 500; color: var(--faint); }
.tbw-search { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 10px 12px; border-radius: 9px; background: var(--wash); font-size: 12px; color: var(--faint); }
.tbw-spot { position: relative; isolation: isolate; overflow: hidden; margin: auto 2px 15px; padding: 20px 16px 15px; border-radius: 17px; background: #32232c; color: #fff8ed; box-shadow: 0 7px 20px #47292219; white-space: normal; }
.tbw-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 4% 2%, #ffd351 0, transparent 55%), radial-gradient(ellipse at 92% 58%, #a62c6d 0, transparent 68%), radial-gradient(ellipse at 18% 100%, #b0543f 0, transparent 68%), #392839; }
.tbw[data-agent=tobira] .tbw-spot::before { background: radial-gradient(ellipse at 4% 2%, #ffd351 0, transparent 55%), radial-gradient(ellipse at 92% 58%, #c2622f 0, transparent 68%), radial-gradient(ellipse at 18% 100%, #7a4b8f 0, transparent 68%), #2f2630; }
.tbw-spot small { display: block; margin-bottom: 10px; font-size: 7px; font-weight: 650; letter-spacing: .14em; opacity: .93; }
.tbw-spot strong { display: block; font-size: 17px; font-weight: 570; line-height: 1.2; letter-spacing: -.035em; text-shadow: 0 1px 7px #27121c55; }
.tbw-spot p { margin: 8px 0 13px; font-size: 10.5px; line-height: 1.5; color: #fff5ef; }
.tbw-spot button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 11px; border-radius: 9px; background: #ffffff21 !important; border: 1px solid #ffffff2b !important; color: #fff; font-size: 10px; font-weight: 550; }
.tbw-spot button svg { width: 13px; height: 13px; }
.tbw-account { display: flex; align-items: center; gap: 9px; padding: 9px 7px; border-radius: 9px; text-align: left; width: 100%; }
.tbw-account:hover { background: var(--wash); }
.tbw-account > span:first-child { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold); }
.tbw-account > span:first-child svg { width: 14px; height: 14px; }
.tbw-account-copy { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; }
.tbw-account-copy small { font-size: 9px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }

/* booking layer */
.tbw-bk { position: absolute; inset: 0; z-index: 5; overflow-y: auto; padding: 8px 14px 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: tbwFade .22s var(--ease) backwards; }
@keyframes tbwFade { from { opacity: 0; } to { opacity: 1; } }
.tbw-bk-card { max-width: 560px; margin: 0 auto; border: 1px solid var(--hairline); border-radius: 16px; background: #fff; box-shadow: 0 4px 20px #28374b06; padding-bottom: 16px; animation: tbwIn .28s var(--ease) backwards; }
.tbw[data-style=aura] .tbw-bk-card, .tbw[data-style=atelier] .tbw-bk-card { background: var(--bg); }
.tbw-bk-head { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 10px 14px 0; }
.tbw-bk-head > span:first-child { width: 26px; }
.tbw-bk-nav { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.tbw-bk-nav:hover { background: var(--wash); }
.tbw-bk-nav svg { width: 14px; height: 14px; }
.tbw-steps { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.tbw-steps i { width: 5px; height: 5px; border-radius: 99px; background: var(--hairline); transition: background-color .2s; }
.tbw-steps i[data-on] { width: 14px; background: var(--ink); }
.tbw-bk-body { padding: 5px 16px 0; }
.tbw-kicker { font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); }
.tbw-bk-title { margin: 3px 0 2px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.tbw-bk-sub { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tbw-field { display: block; margin-bottom: 13px; }
.tbw-field > span { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 550; color: var(--ink); }
.tbw-field input, .tbw-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--chip-border); border-radius: 10px; background: #fff; font-size: 13.5px; color: var(--ink); outline: 0; transition: border-color .15s; }
.tbw-field textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.tbw-field input:focus, .tbw-field textarea:focus { border-color: color-mix(in srgb, var(--ink) 40%, var(--chip-border)); }
.tbw-hint { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.tbw-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.tbw-choice { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--chip-border) !important; background: #fff !important; font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tbw-choice:hover { border-color: #b9ad97 !important; }
.tbw-choice[aria-pressed=true] { background: var(--chip-on) !important; border-color: var(--chip-on) !important; color: #fff; }
.tbw-inline-input { margin-top: 8px; max-width: 220px; }
.tbw-cta { display: grid; place-items: center; width: 100%; height: 42px; margin-top: 6px; border-radius: 999px; background: var(--bk-cta) !important; color: var(--bk-cta-ink); font-size: 13px; font-weight: 600; }
.tbw-cta:hover:not(:disabled) { transform: translateY(-1px); }
.tbw-session { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--type-grad); }
.tbw-session strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.tbw-session small { font-size: 11px; color: var(--muted); }
.tbw-session b { font-size: 15px; font-weight: 600; }
.tbw-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.tbw-cal-head strong { font-size: 13px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.tbw-cal-head > span { display: flex; gap: 2px; }
.tbw-cal-head button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.tbw-cal-head button:hover:not(:disabled) { background: var(--wash); }
.tbw-cal-head svg { width: 13px; height: 13px; }
.tbw-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tbw-dow { padding: 3px 0; text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--faint); }
.tbw-day { position: relative; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.tbw-day:hover:not(:disabled) { background: var(--wash); }
.tbw-day:disabled { opacity: 1; color: var(--hairline); }
.tbw-day[data-avail]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 3.5px; height: 3.5px; margin-left: -1.75px; border-radius: 50%; background: var(--dot-avail); }
.tbw-day[data-sel] { background: var(--day-sel) !important; color: #fff; font-weight: 600; }
.tbw-day[data-sel]::after { background: #fff; }
.tbw-tz { display: flex; align-items: center; gap: 5px; margin: 12px 0 9px; font-size: 10.5px; color: var(--faint); }
.tbw-tz svg { width: 11px; height: 11px; }
.tbw-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.tbw-slot { height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--chip-border) !important; background: #fff !important; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); animation: tbwIn .25s var(--ease) backwards; }
.tbw-slot:hover { border-color: #a99d86 !important; transform: translateY(-1px); }
.tbw-slot[aria-pressed=true] { background: var(--chip-on) !important; border-color: var(--chip-on) !important; color: #fff; }
.tbw-done { padding: 8px 16px 0; text-align: center; }
.tbw-done-mark { width: 44px; height: 44px; margin: 8px auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold); animation: tbwPop .4s var(--spring) backwards; }
.tbw-done-mark svg { width: 20px; height: 20px; }
@keyframes tbwPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.tbw-done h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.tbw-done-when { font-size: 13.5px; font-weight: 550; color: var(--ink); margin-bottom: 10px !important; }
.tbw-done p { font-size: 12px; line-height: 1.55; color: var(--muted); }
.tbw-done-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.tbw-done-actions button { padding: 9px 13px; border-radius: 9px; font-size: 12px; font-weight: 550; border: 1px solid var(--hairline) !important; background: #fff !important; }
.tbw-done-actions button[data-primary] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg); }

/* static frames: account + plans */
.tbw-frame-split { display: flex; height: 100%; }
.tbw-frame-split .tbw-side { display: flex; width: 178px; padding: 18px 10px 12px; }
.tbw-frame-split .tbw-side-brand { font-size: 14px; padding: 0 8px 16px; }
.tbw-frame-split .tbw-side-label { padding: 16px 10px 7px; }
.tbw-hist { display: flex; flex-direction: column; gap: 2px; }
.tbw-hist .tbw-nav { padding: 9px 10px; font-size: 11.5px; flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
.tbw-hist .tbw-nav small { font-size: 9.5px; color: var(--faint); font-weight: 400; }
.tbw-signin { flex: 1; min-width: 0; padding: 26px 18px; display: flex; flex-direction: column; background: var(--bg); }
.tbw-signin h3 { margin: 12px 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.tbw-signin > p { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-bottom: 16px; }
.tbw-oauth { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 40px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--chip-border) !important; background: #fff !important; font-size: 12.5px; font-weight: 550; }
.tbw-or { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 10px; color: var(--faint); }
.tbw-or::before, .tbw-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.tbw-plan { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 8px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; }
.tbw-plan[data-on] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tbw-radio { width: 15px; height: 15px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--faint); }
.tbw-plan[data-on] .tbw-radio { border: 4.5px solid var(--ink); }
.tbw-plan-copy { flex: 1; min-width: 0; }
.tbw-plan-copy strong { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.tbw-plan-copy small { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.tbw-note { display: flex; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--wash); font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.tbw-note svg { width: 13px; height: 13px; margin-top: 1px; }

/* ---------- dock (whole landing page) ---------- */
.tbw-dockroot { position: fixed; z-index: 2147483000; right: 0; bottom: 0; width: 0; height: 0; }
.tbw-veil { position: fixed; inset: 0; background: #19222f26; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.tbw-dockroot[data-open][data-layout=wide] .tbw-veil { opacity: 1; pointer-events: auto; }
.tbw-dockbar { position: fixed; right: 24px; bottom: 24px; width: min(432px, calc(100vw - 36px)); height: 82px; display: flex; flex-direction: column; padding: 10px 11px 8px 15px; background: #fff; border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow); cursor: text; transform-origin: 100% 100%; transition: opacity .2s ease, transform .38s var(--ease); }
.tbw-dockbar:hover { box-shadow: 0 26px 76px #302a232a, 0 4px 16px #302a230d; }
.tbw-dock-field { display: block; width: 100%; height: 23px; padding: 0 2px; text-align: left; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--muted) 65%, var(--bg)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbw-dock-tools { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.tbw-dock-brand { width: 25px; height: 25px; margin-right: 6px; display: grid; place-items: center; border-radius: 7px; overflow: hidden; background: var(--gold-soft); }
.tbw-dock-brand img { width: 100%; height: 100%; object-fit: cover; }
.tbw-dockroot[data-open] .tbw-dockbar { opacity: 0; transform: scale(.96); pointer-events: none; }
.tbw-dockroot .tbw-panel { position: fixed; right: 24px; bottom: 24px; width: 404px; height: calc(100dvh - 48px); max-height: 860px; transform-origin: 100% 100%; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .26s ease, transform .38s var(--spring); }
.tbw-dockroot[data-open] .tbw-panel { opacity: 1; transform: none; pointer-events: auto; }
.tbw-dockroot[data-layout=wide] .tbw-panel { width: min(1120px, calc(100vw - 64px)); height: calc(100dvh - 64px); max-height: none; right: 50%; bottom: 50%; transform: translate(50%, 50%); transform-origin: 50% 50%; }
.tbw-dockroot[data-layout=wide]:not([data-open]) .tbw-panel { transform: translate(50%, calc(50% + 14px)) scale(.94); }
.tbw-dockroot[data-layout=wide] .tbw-panel .tbw-win { box-shadow: 0 40px 100px #1b1c1e33, 0 4px 12px #1b1c1e14; border-radius: 20px; }
.tbw-dockroot[data-swap] .tbw-panel { transition: none; }
.tbw-dockroot[data-swap] .tbw-win { animation: tbwSwap .32s var(--ease); }
@keyframes tbwSwap { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .tbw-dockbar { right: 12px; bottom: 16px; width: calc(100vw - 24px); }
  .tbw-dockroot .tbw-panel, .tbw-dockroot[data-layout=wide] .tbw-panel { right: 6px; bottom: 6px; width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: none; transform: translateY(18px) scale(.94); }
  .tbw-dockroot[data-open] .tbw-panel, .tbw-dockroot[data-open][data-layout=wide] .tbw-panel { transform: none; }
  .tbw-dockroot .tbw-win { border-radius: 15px; }
  .tbw-dockroot .tbw-veil { display: none; }
}

/* ---------- inline embed ---------- */
.tbw-embed { position: relative; width: 100%; height: var(--tbw-h, 640px); margin: 0 auto; }
.tbw-embed[data-layout=panel] { max-width: 404px; }
.tbw-embed[data-layout=center] { max-width: 520px; }
.tbw-embed[data-layout=wide] { max-width: 1120px; }
.tbw-embed[data-swap] .tbw-win { animation: tbwSwap .32s var(--ease); }
.tbw-static { width: 100%; max-width: 420px; height: var(--tbw-h, 520px); margin: 0 auto; pointer-events: none; user-select: none; }
.tbw-static .tbw-win { box-shadow: 0 18px 50px #302a231c, 0 3px 12px #302a230a; }
.tbw-static .tbw-view { overflow: hidden; }
.tbw-static .tbw-msg, .tbw-static .tbw-status, .tbw-static .tbw-table, .tbw-static .tbw-bk, .tbw-static .tbw-bk-card, .tbw-static .tbw-slot, .tbw-static .tbw-chip-btn { animation: none; }

/* narrow / phone-sized instances */
.tbw[data-mobile] .tbw-head { height: 60px; padding: 0 11px; gap: 7px; }
.tbw[data-mobile] .tbw-mark { width: 27px; height: 27px; font-size: 15px; border-radius: 8px; }
.tbw[data-mobile] .tbw-brand strong { font-size: 12px; }
.tbw[data-mobile] .tbw-brand small { font-size: 8px; }
.tbw[data-mobile] .tbw-book { font-size: 10px; padding: 7px 8px; gap: 4px; }
.tbw[data-mobile] .tbw-icon[data-act=expand] { display: none; }
.tbw[data-mobile] .tbw-home { padding: 14px 16px; }
.tbw[data-mobile] .tbw-welcome h2 { font-size: 25px; }
.tbw[data-mobile] .tbw-chat { padding: 12px 16px; }
.tbw[data-mobile] .tbw-composer-region { padding: 8px 12px 0; }
.tbw[data-mobile] .tbw-composer textarea { font-size: 16px; }
.tbw[data-mobile] .tbw-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.tbw[data-mobile] .tbw-bk { padding: 6px 8px 12px; }
.tbw[data-mobile] .tbw-slot { font-size: 12px; }
.tbw[data-layout=wide][data-narrow] .tbw-home { padding: 17px 18px; }
@media (max-width: 360px) { .tbw .tbw-book svg { display: none; } .tbw .tbw-brand small { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tbw *, .tbw *::before, .tbw *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .tbw-dockroot .tbw-panel, .tbw-dockbar { transition: none !important; }
}

/* ---------- Brightline demo additions (w3): voice orb view, document result, recent chats, signed-in account ---------- */
.tbw-orbhost:empty { display: none; }
.tbw-orbview { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 22px 18px; background: var(--bg); }
.tbw-orb { position: relative; width: 112px; height: 112px; border-radius: 50%; filter: blur(.3px);
  background: radial-gradient(circle at 50% 50%, #fff6e8 0%, rgba(255,246,232,0) 72%); }
.tbw-orb i { position: absolute; inset: 10px; border-radius: 50%; mix-blend-mode: multiply; filter: blur(10px); }
.tbw-orb i:nth-child(1) { background: radial-gradient(circle at 35% 40%, #ffb347 0%, rgba(255,179,71,0) 62%); }
.tbw-orb i:nth-child(2) { background: radial-gradient(circle at 62% 45%, #ff6a45 0%, rgba(255,106,69,0) 58%); }
.tbw-orb i:nth-child(3) { background: radial-gradient(circle at 48% 66%, #f0508c 0%, rgba(240,80,140,0) 56%); }
.tbw-anim .tbw-orb i:nth-child(1) { animation: tbwOrbA 5s ease-in-out infinite; }
.tbw-anim .tbw-orb i:nth-child(2) { animation: tbwOrbB 6.5s ease-in-out infinite; }
.tbw-anim .tbw-orb i:nth-child(3) { animation: tbwOrbA 7s ease-in-out infinite reverse; }
.tbw-anim .tbw-orbview[data-state=speaking] .tbw-orb { animation: tbwOrbPulse 1.1s ease-in-out infinite; }
@keyframes tbwOrbA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6px, -5px) scale(1.08); } }
@keyframes tbwOrbB { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-7px, 4px) rotate(40deg); } }
@keyframes tbwOrbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.tbw-orb-state { font-size: 11.5px; font-weight: 550; color: var(--muted); letter-spacing: .01em; }
.tbw-orb-lines { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.tbw-orb-line { max-width: 86%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; animation: tbwIn .25s var(--ease) backwards; }
.tbw-orb-line[data-who=user] { margin-left: auto; background: var(--surface-2); color: var(--ink); border-bottom-right-radius: 5px; }
.tbw-orb-line[data-who=agent] { background: var(--bg); border: 1px solid var(--hairline); color: var(--ink); border-bottom-left-radius: 5px; }
.tbw-orb-lines .tbw-orb-line:nth-last-child(n+4) { display: none; }

.tbw-docres { margin: 2px 0 10px; padding: 12px 13px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg); }
.tbw-docres-top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink); }
.tbw-docres-top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbw-docres-bar { height: 5px; margin: 11px 0 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.tbw-docres-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb347, #ff6a45 60%, #f0508c); }
.tbw-docres-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tbw-docres-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); font-size: 10.5px; font-weight: 550; color: var(--muted); }
.tbw-docres-tags span[data-ok] { background: #e7f6ec; color: #1f7a45; }
.tbw-docres-tags svg { width: 11px; height: 11px; }

.tbw-recent { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 10px; }
.tbw-recent span { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg); font-size: 12px; color: var(--ink); }
.tbw-recent b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbw-recent small { font-size: 10px; color: var(--faint); }
.tbw-recent svg { width: 13px; height: 13px; color: var(--muted); }
.tbw-side .tbw-hist { margin-top: 4px; }
.tbw-account .tbw-who { background: linear-gradient(135deg, #ffb347, #f0508c) !important; color: #fff !important; font-size: 12px; font-weight: 650; }
.tbw-blplans { padding: 24px 20px; }
.tbw-blplans h3 { margin-top: 10px; }
.tbw[data-agent=brightline] .tbw-mark:not([data-logo]) { background: #1B1713; color: #fff; }
.tbw[data-layout=wide]:not([data-narrow]) .tbw-recent { display: none; }
.tbw-table thead th, .tbw-table tbody th { white-space: nowrap; }
.tbw[data-mobile] .tbw-table th, .tbw[data-mobile] .tbw-table td { padding: 9px 9px; }
.tbw-account .tbw-who { position: relative; overflow: hidden; }
.tbw-who img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tbw-side .tbw-hist ~ .tbw-spot { display: none; }
.tbw-side .tbw-hist ~ .tbw-account { margin-top: auto; }

/* landing demo, expanded "ideal" view: incoming topics in the sidebar, suggestions over the composer */
.tbw-in-label { display: flex; align-items: center; gap: 7px; padding-top: 22px; }
.tbw-in-label .tbw-dot { animation: tbwLive 1.8s ease-in-out infinite; }
.tbw-in { display: flex; flex-direction: column; gap: 3px; }
.tbw-in-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border-radius: 10px; text-align: left; white-space: normal; color: var(--ink);
  animation: tbwIn .45s var(--ease) backwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
.tbw-in-item:hover { background: var(--wash); }
.tbw-in-item[data-live] { background: var(--bg); box-shadow: 0 1px 2px #302a2312, 0 6px 16px -10px #302a2340; }
.tbw-in-emo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--wash); font-size: 15px; line-height: 1; }
.tbw-in-item[data-live] .tbw-in-emo { background: var(--gold-soft); }
.tbw-in-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbw-in-copy span { font-size: 12px; font-weight: 520; line-height: 1.3; }
.tbw-in-copy small { font-size: 10px; color: var(--faint); }
.tbw-side .tbw-in ~ .tbw-spot { display: none; }
.tbw-side .tbw-in ~ .tbw-account { margin-top: auto; }
.tbw-sugg { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.tbw-sugg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; background: var(--bg); border: 1px solid var(--hairline) !important;
  font-size: 12px; color: var(--ink); animation: tbwIn .4s var(--ease) backwards; animation-delay: calc(var(--i) * 80ms + 250ms); }
.tbw-sugg-btn:hover { background: var(--wash); }
.tbw-sugg-btn span { font-size: 13px; line-height: 1; }
@keyframes tbwLive { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tbw-in-item, .tbw-sugg-btn, .tbw-in-label .tbw-dot { animation: none; } }

/* ---------- d4 v7: demo widget = real v8 ---------- */
/* Backdrops (v8 frame.css: white / mist / warm). Real v8 default is white; v7-75 asked for less tint.
   notion: white, no backdrop (lighter and whiter). soft: v8 mist spots. aura, atelier: v8 "warm" spots
   (radial, light) instead of the full linear wash that tinted the whole window. Embed only; the page dock is unchanged. */
.tbw-embed[data-style=notion] { --mist: none; }
.tbw[data-style=aura] { --mist: radial-gradient(ellipse at 70% 12%, #fae5ad85, transparent 53%), radial-gradient(ellipse at 8% 48%, #f6dfcf75, transparent 55%), radial-gradient(ellipse at 92% 90%, #eee5c67d, transparent 58%); }
.tbw[data-style=atelier] { --mist: radial-gradient(ellipse at 72% 10%, #eadfca70, transparent 52%), radial-gradient(ellipse at 6% 52%, #efe6d860, transparent 55%), radial-gradient(ellipse at 94% 92%, #e3e6ea66, transparent 56%); }
.tbw-embed .tbw-main::before { opacity: .55; }
/* Corners (v7-74): the header's backdrop-filter escaped the window's rounded clip in Chrome and left square white
   corners. clip-path clips filters too; the shadow stays on .tbw-win, the clip sits on its inner columns. */
.tbw-embed .tbw-main { clip-path: inset(0 round 0 calc(var(--r-win) - 1px) calc(var(--r-win) - 1px) 0); }
.tbw-embed[data-layout=panel] .tbw-main, .tbw-embed[data-narrow] .tbw-main { clip-path: inset(0 round calc(var(--r-win) - 1px)); }
.tbw-embed .tbw-side { clip-path: inset(0 round calc(var(--r-win) - 1px) 0 0 calc(var(--r-win) - 1px)); }
.tbw-embed .tbw-win { background-clip: padding-box; }
/* Honest note when a real visitor types into the client demo widget: not a Brightline answer, a quiet system line. */
.tbw-sysnote { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 22px 25px; padding: 10px 12px; border-radius: 12px; background: var(--wash); font-size: 12px; line-height: 1.45; color: var(--muted); }
.tbw-sysnote svg { width: 14px; height: 14px; margin-top: 1px; color: var(--faint); }
/* Collapsed (closed) widget inside the demo page: the v8 dock bar, bottom right of the "site". */
.tbw-dockwrap { position: absolute; right: 0; bottom: 0; z-index: 4; width: min(404px, 100%); pointer-events: none; }
.tbw-dockbar.tbw-dockbar-inline { position: relative; right: auto; bottom: auto; width: 100%; opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none;
  background: var(--bg); text-align: left; transition: opacity .3s var(--ease), transform .45s var(--spring), box-shadow .2s; }
.tbw-dockwrap[data-on] .tbw-dockbar-inline { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.tbw-dockbar-inline .tbw-dock-brand { color: var(--ink); font-size: 12px; font-weight: 650; }
.tbw-dockbar-inline .tbw-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--muted); }
.tbw-dockbar-inline .tbw-send { background: var(--cta-bg, var(--ink)) !important; color: #fff; }
.tbw[data-style=atelier] .tbw-dockbar-inline .tbw-dock-brand { background: #16130e; color: #f6f1e7; border-radius: 50%; }
.tbw[data-style=aura] .tbw-dockbar-inline .tbw-dock-brand { background: linear-gradient(135deg, #f6e2c6, #fcefdd 55%, #e3ecfa); color: #3c3428; }
.tbw-embed { transform-origin: 100% 100%; transition: opacity .3s var(--ease), transform .45s var(--spring), height .6s var(--ease); }
.tbw-embed[data-collapsed] { opacity: 0; transform: translateY(16px) scale(.94); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tbw-embed, .tbw-dockbar.tbw-dockbar-inline { transition: none; } }