/* kit.css: the skins every option can use. The navigation bar (a faithful copy of the landing nav with
   the twelvebell lockup), the replayed chat, the owner deck and the shader host. Positioning is the
   option's job; these rules only give the surfaces their look. Prefix: tb- */

/* lockup: struck arc mark + the product name from window.TB.name */
.tb-lockup{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:21px;letter-spacing:-.03em;line-height:1}
.tb-lockup svg{width:auto;height:.95em;flex:none;overflow:visible}
.tb-lockup .tb-arc{stroke:currentColor}
.tb-lockup .tb-dot{fill:var(--accent)}
.tb-lockup.is-white{color:#fff}
.tb-lockup.is-white .tb-dot{fill:#5B8BFF}

/* nav: same box, spacing, links and actions as the landing nav */
.tb-nav{position:relative;z-index:20;height:var(--nav-h);background:rgba(255,255,255,0);border-bottom:1px solid transparent;color:var(--ink)}
.tb-nav-in{display:flex;align-items:center;gap:32px;height:100%}
.tb-nav-links{display:flex;gap:26px;font-size:15px}
.tb-nav-links a{text-decoration:none;color:inherit;opacity:.72;transition:opacity .2s var(--ease)}
.tb-nav-links a:hover{opacity:1}
.tb-nav-actions{margin-left:auto;display:flex;gap:8px}
.tb-nav.is-white{color:#fff}
.tb-nav.is-white .rect-black{background:#fff;color:var(--ink)}
@media (max-width:820px){.tb-nav-links{display:none}}
@media (max-width:420px){.tb-nav .rect{padding:0 12px}}

/* shader host: fills its positioned parent, canvas stretches */
.tb-shader{position:absolute;inset:0;z-index:0}
.tb-shader canvas{width:100%!important;height:100%!important;display:block}

/* chat: the glass card with a replayed conversation */
.tb-chat{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-line);border-radius:20px;padding:16px 16px 14px;box-shadow:var(--glass-lift);color:var(--ink);text-align:left}
.tb-chat-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:12px}
.tb-chat-head .tb-live{width:8px;height:8px;border-radius:50%;background:#1DBF73;box-shadow:0 0 0 3px rgba(29,191,115,.18);flex:none}
.tb-chat-time{margin-left:auto;font-size:12px;color:var(--text-3)}
.tb-chat-log{display:flex;flex-direction:column;gap:8px;min-height:132px}
.tb-bub{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.tb-bub.is-shown{opacity:1;transform:none}
.tb-bub.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.tb-bub.out{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.tb-chat-foot{height:22px;margin-top:8px;display:flex;align-items:center}
.tb-typing{display:inline-flex;gap:4px;padding:0 6px}
.tb-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:tb-tp 1s infinite ease-in-out}
.tb-typing i:nth-child(2){animation-delay:.15s}.tb-typing i:nth-child(3){animation-delay:.3s}
@keyframes tb-tp{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.tb-booked{font-size:13px;color:#0B7A4B;background:#E6F7EF;border-radius:999px;padding:3px 10px}
@media (prefers-reduced-motion:reduce){.tb-typing i{animation:none}.tb-bub{transition:none}}

/* deck: the dark glass owner view */
.tb-deck{background:var(--glass-ink);color:#fff;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-radius:18px;padding:16px;border:1px solid var(--glass-line-ink);text-align:left}
.tb-deck-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.tb-deck-rows{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.tb-deck-rows li{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}
.tb-deck-rows span{color:rgba(255,255,255,.6)}
.tb-deck-rows b{font-weight:500;text-align:right;max-width:60%;transition:color .3s var(--ease)}
.tb-deck-rows b.is-set{color:#8CF3C0}
.tb-deck .pill-ghost{background:rgba(255,255,255,.14);color:#fff}
.tb-deck .pill-ghost:hover{background:rgba(255,255,255,.22)}