/* =====================================================================================================================
   owns.ai  -  UNFOLD: THE MEMBER AREA AND ADMIN

   Loaded after unfold.css (the system); builds only on its tokens. The dashboard, assistant editor, team assistant,
   library, bookings, tickets, connectors, billing, invoices, profile, workspace editor, admin and demos.

   The controls panel is the calm side of Unfold: a white (black) canvas, a left rail of pill links, big tight page
   titles, and content held in borderless grey TILES (var(--tile), 22px corners) with hairline rows. Inside a tile the
   nested surfaces (a stat, an option, a step) are SUB-TILES: white on the grey tile in light, a step lighter in dark
   (--sub). Cobalt marks only the active or primary moment; everything else is ink and greys. Every rule is scoped
   to .app-shell (or a page id) so it outranks the shared components without touching the public pages.

   Coded By Darko G.
   ===================================================================================================================== */

:root,
[data-theme="light"] {
    --sub: #FFFFFF;                 /* a surface sitting on a tile */
    --msub: #F4F4F4;                /* a surface sitting in a modal (the modal is white) */
    --sub-line: rgba(0, 0, 0, .06); /* its hairline, where one is needed */
    --row-hover: rgba(0, 0, 0, .035);
    --chart-1: #1A4BFF;             /* the 30-day chart: messages (the accent) */
    --chart-2: #A1A1A8;             /* conversations (a neutral, dashed) */
    --chart-3: #9DB2FF;             /* leads (a light cobalt bar) */
}

[data-theme="dark"] {
    --sub: #1C1C1F;
    --msub: #1C1C1F;
    --sub-line: rgba(255, 255, 255, .06);
    --row-hover: rgba(255, 255, 255, .04);
    --chart-1: #4D7BFF;
    --chart-2: #6E6E75;
    --chart-3: #2E4FB8;
}


/* ---- THE SHELL: the left rail and the canvas ------------------------------------------------------------------------ */

.app-shell { grid-template-columns: 264px minmax(0, 1fr); background: var(--bg); }
.app-side { padding: 18px 14px 18px; gap: 18px; background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto; scrollbar-width: none; }
.app-side::-webkit-scrollbar { display: none; }
.side-nav { gap: 2px; }
.side-label { padding: 18px 14px 8px; font-size: 13px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--muted); }
.side-label:first-child { padding-top: 4px; }
.side-nav a { position: relative; height: 42px; padding: 0 14px; gap: 12px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--text-2);
              box-shadow: none; transition: background .4s var(--ease-fade), color .4s var(--ease-fade); }
.side-nav a i { width: 20px; font-size: 15px; color: var(--muted); transition: color .4s var(--ease-fade); }
.side-nav a:hover { background: var(--tile); color: var(--text); }
.side-nav a:hover i { color: var(--text); }
.side-nav a.is-active { background: var(--accent-soft); color: var(--text); font-weight: 600; box-shadow: none; }
.side-nav a.is-active i { color: var(--accent-text); }
.side-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--accent); color: #fff; border: 0; box-shadow: none; }

/* the plan, at the foot of the rail: a small tile */
.side-plan { padding: 16px !important; background: var(--tile) !important; border: 0 !important; border-radius: var(--r-lg) !important; box-shadow: none !important; }
.side-plan::before, .side-plan::after { display: none !important; }
.side-plan .badge { height: 24px; }

.app-main { padding: 40px clamp(24px, 3.4vw, 56px) 80px; }

/* ---- PAGE HEAD: a big tight title, sentence case, pill actions ------------------------------------------------------- */

.app-head { align-items: flex-end; gap: 20px 24px; margin-bottom: 32px; }
.app-head > div:first-child { min-width: 0; flex: 1 1 560px; }
.app-shell .app-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; height: auto; margin: 0 0 12px; padding: 0; border: 0; background: none; box-shadow: none;
                                font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--accent-text); }
.app-shell .app-head .eyebrow::before, .app-shell .app-head .eyebrow::after { display: none; }
.app-shell .app-head .eyebrow i { width: auto; height: auto; padding: 0; background: none; border-radius: 0; color: inherit; font-size: 14px; box-shadow: none; }
.app-head h1, .bot-title h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-transform: none; }
.app-head h1 { font-size: clamp(34px, 3.3vw, 48px); }
.app-head p { margin-top: 12px; max-width: 64ch; font-size: 17px; line-height: 1.5; color: var(--muted); }
.app-head .row { gap: 10px; flex-wrap: wrap; }
.app-shell .breadcrumb { margin-bottom: 18px; font-size: 14px; font-weight: 500; color: var(--faint); }
.app-shell .breadcrumb i { font-size: 10px; }
.app-shell .breadcrumb a { color: var(--muted); }
.app-shell .breadcrumb a:hover { color: var(--accent-text); }


/* ---- SURFACES: every card in the member area is a borderless tile ---------------------------------------------------- */

.app-shell .card { background: var(--tile); border: 0; border-radius: var(--r-lg); box-shadow: none; }
.app-shell .card::before, .app-shell .card::after { display: none; }
.app-shell .card-hover:hover { transform: none; box-shadow: none; background: var(--tile-2); }
.app-shell .card-header { padding: 20px 24px 14px; border-bottom: 0; }
.app-shell .card-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.app-shell .card-title i, .app-shell .d-form-card h3 i, .app-shell .ms-h3 i, .app-shell .in-h i, .app-shell .in-section i { color: var(--accent-text); }
.app-shell .card .card { background: var(--sub); }
.app-shell .skeleton { border-radius: var(--r-lg); border: 0; }
.app-shell .card.skeleton { background: var(--tile); }

/* section titles between tiles */
.d-section-title { margin: 44px 0 16px; }
.d-section-title h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.d-section-title h2 i { display: none; }
.d-muted-link { font-size: 15px; color: var(--text-2); }
.d-muted-link:hover { color: var(--accent-text); }

/* sub-tiles: the nested surfaces inside a tile, white on grey (light) or a step lighter (dark), no borders */
.app-shell :is(.d-bot-stats div, .d-steps div, .d-item, .d-job, .pg-stat div, .d-install-status, .d-member-note, .lai-box, .nd-row, .tm-empty-levels > div,
               .tm-access-opt, .tm-role-opt, .tm-starter, .tm-theme-opt, .xtp-opt, .lkp-shape, .d-opt, .d-theme, .icp-ic, .psp-screen, .d-platform,
               .bks-mode, .ms-pack, .ms-perk, .tm-viewer-body, .tm-editor-preview, .d-ip-preview, .xtp-demo, .lkp-demo, .in-ex span) {
    background: var(--sub); border-color: transparent; box-shadow: none;
}
/* the same nested surfaces in a modal (which is white itself) sit on the grey tile instead */
.modal :is(.d-item, .d-opt, .d-theme, .icp-ic, .tm-access-opt, .tm-role-opt, .tm-theme-opt, .xtp-opt, .lkp-shape, .bks-mode, .d-platform, .tm-viewer-body, .tm-editor-preview, .xtp-demo, .lkp-demo, .lai-box,
           .bk-detail, .bk-chat, .tk-details, .card) {
    background: var(--msub); border-color: transparent; box-shadow: none;
}

/* the choosers: an option is a sub-tile; the chosen one gets a cobalt ring and its icon goes cobalt */
:is(.d-opt, .d-theme, .tm-access-opt, .tm-role-opt, .tm-theme-opt, .xtp-opt, .lkp-shape, .bks-mode, .ms-pack) { border: 0 !important; border-radius: var(--r) !important; transition: box-shadow .4s var(--ease-fade), background .4s var(--ease-fade), transform .3s var(--ease); }
:is(.d-opt, .d-theme, .tm-access-opt, .tm-role-opt, .tm-theme-opt, .xtp-opt, .lkp-shape, .bks-mode):hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
:is(.d-opt, .d-theme, .tm-access-opt, .tm-role-opt, .tm-theme-opt, .xtp-opt, .lkp-shape, .bks-mode, .ms-pack).is-active,
.ms-pack.is-featured { box-shadow: inset 0 0 0 2px var(--accent) !important; background: var(--sub); }
.modal :is(.d-opt, .d-theme, .tm-access-opt, .tm-role-opt, .tm-theme-opt, .xtp-opt, .lkp-shape, .bks-mode).is-active { background: var(--msub); }
.d-opt i, .d-opt.is-active i { color: var(--accent-text); }
.tm-access-opt.is-active > i, .tm-role-opt.is-active > i { background: var(--accent); color: #fff; }
.tm-access-opt > i, .tm-role-opt > i { border-radius: 50%; background: var(--tile); }
.modal .tm-access-opt:not(.is-active) > i, .modal .tm-role-opt:not(.is-active) > i { background: var(--surface); }
.tm-access-opt[data-access="private"].is-active > i { background: var(--warning); }
.tm-access-opt[data-access="public"].is-active > i { background: var(--success); }
.d-opt.is-special { background: var(--sub); }
.d-opt.is-special.is-active { box-shadow: inset 0 0 0 2px var(--sp-1) !important; background: var(--sub); }
.d-opt-tag { background: var(--sp-1); color: #fff; letter-spacing: 0; text-transform: none; font: 600 11px/1 var(--font-sans); padding: 5px 9px; }


/* ---- STATUS: pill badges, pill chips, pill switches --------------------------------------------------------------- */

.app-shell .badge, .modal .badge { height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.app-shell .badge:empty { display: none; }
.app-shell .badge-success, .modal .badge-success { background: var(--success-soft); color: var(--success); }
.app-shell .badge-warning, .modal .badge-warning { background: var(--warning-soft); color: var(--warning); }
.app-shell .badge-danger, .modal .badge-danger { background: var(--danger-soft); color: var(--danger); }
.app-shell .badge-info, .app-shell .badge-brand, .modal .badge-info, .modal .badge-brand { background: var(--accent-soft); color: var(--accent-text); }
.app-shell .badge-muted, .modal .badge-muted { background: var(--tile-2); color: var(--muted); }
.app-shell .badge-grad, .modal .badge-grad { background: var(--accent); color: #fff; }
.app-shell .card .badge-muted { background: var(--sub); }

.app-shell .chip, .modal .chip { min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 0; background: var(--sub); color: var(--text-2); font-family: var(--font-sans); font-size: 14px; font-weight: 500;
                                 box-shadow: inset 0 0 0 1px var(--border); transition: background .4s var(--ease-fade), color .4s var(--ease-fade), box-shadow .4s var(--ease-fade); }
.app-shell .chip:hover, .modal .chip:hover { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
.app-shell .chip.is-active, .modal .chip.is-active { background: var(--ink); color: var(--ink-inv); box-shadow: none; }
.app-shell .chip.is-active .tm-chip-n { color: inherit; opacity: .7; }

:is(.app-shell, .modal) .switch > span { border-radius: var(--r-pill); border: 0; background: var(--tile-2); }
:is(.app-shell .card, .modal) .switch > span { background: var(--border-strong); }
:is(.app-shell, .modal) .switch input:checked + span { background: var(--accent); }
:is(.app-shell, .modal) .switch input:focus-visible + span { box-shadow: var(--field-glow); }

.app-shell .dot-live { box-shadow: none; animation: none; }

.d-lock-tag { border: 0; border-radius: var(--r-pill); padding: 4px 10px; background: var(--warning-soft); color: var(--warning); font-size: 11.5px; font-weight: 600; }
.d-ai-tag { border-radius: var(--r-pill); padding: 4px 10px; background: var(--accent); box-shadow: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; }


/* ---- TABS: pill tabs on a grey track -------------------------------------------------------------------------------- */

.app-shell .tabs { display: flex; gap: 4px; padding: 5px; border: 0; border-radius: var(--r-pill); background: var(--tile); overflow-x: auto; scrollbar-width: none; width: max-content; max-width: 100%; }
.app-shell .tabs .tab { height: 40px; padding: 0 16px; gap: 8px; border: 0; border-radius: var(--r-pill); margin: 0; flex: none; white-space: nowrap; color: var(--text-2);
                        font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; text-transform: none; background: transparent;
                        transition: background .4s var(--ease-fade), color .4s var(--ease-fade); }
.app-shell .tabs .tab i { font-size: 14px; color: var(--muted); }
.app-shell .tabs .tab:hover { color: var(--text); background: var(--row-hover); }
.app-shell .tabs .tab.is-active { background: var(--ink); color: var(--ink-inv); box-shadow: none; }
.app-shell .tabs .tab.is-active i { color: inherit; }
.app-shell .tabs .tab::after, .app-shell .tabs .tab::before { display: none; }
.app-shell .tabs .tab .badge { height: 20px; padding: 0 7px; font-size: 11.5px; background: var(--sub); color: var(--text-2); }
.app-shell .tabs .tab.is-active .badge { background: color-mix(in srgb, var(--ink-inv) 18%, transparent); color: inherit; }
/* a tab bar that heads a tile sits inside it, on the sub-tile colour */
.app-shell .card > .tabs { margin: 16px 18px 8px; padding: 0; background: transparent; border-radius: 0; }
.app-shell .card > .tabs .tab:hover { background: var(--sub); }
.app-shell .card > .tabs .tab .badge { background: var(--tile); }
.app-shell .card > .tabs .tab.is-active .badge { background: color-mix(in srgb, var(--ink-inv) 18%, transparent); }

.app-shell .segmented, .modal .segmented { padding: 4px; gap: 2px; border: 0; border-radius: var(--r-pill); background: var(--tile); }
.app-shell .card .segmented, .modal .card .segmented { background: var(--sub); }
.app-shell .segmented button, .modal .segmented button { height: 36px; padding: 0 16px; border-radius: var(--r-pill); font: 600 14px var(--font-sans); letter-spacing: -.01em; color: var(--text-2); }
.app-shell .segmented button.is-active, .modal .segmented button.is-active { background: var(--ink); color: var(--ink-inv); box-shadow: none; }


/* ---- DATA: KPI tiles, tables, lists, bars --------------------------------------------------------------------------- */

.app-shell .kpi { padding: 22px 22px 20px; display: flex; flex-direction: column; }
.app-shell .kpi-label { font-size: 14px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: -.005em; gap: 10px; }
.app-shell .kpi-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--sub); color: var(--text); font-size: 14px; box-shadow: none; }
.app-shell .kpi-value { margin-top: 18px; font-family: var(--font-display); font-size: clamp(32px, 2.6vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.app-shell .kpi-sub { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.d-kpis, .d-admin-kpis, .bk-kpis, .ms-kpis { gap: 12px !important; }
.d-kpis .kpi { padding: 20px; }
.d-kpis .kpi-label { flex-direction: column; align-items: flex-start; gap: 12px; line-height: 1.3; }
.d-kpis .kpi-value { margin-top: 12px; }
.d-kpis .kpi-value { font-size: clamp(30px, 2.3vw, 38px); }
.d-kpi-trend { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: 600; }
.d-admin-kpis .kpi.is-hero { background: var(--ink); color: var(--ink-inv); box-shadow: none; }
.d-admin-kpis .kpi.is-hero .kpi-value { color: var(--ink-inv); }
.d-admin-kpis .kpi.is-hero .kpi-label, .d-admin-kpis .kpi.is-hero .kpi-sub { color: color-mix(in srgb, var(--ink-inv) 66%, transparent); }
.d-admin-kpis .kpi.is-hero .kpi-icon { background: color-mix(in srgb, var(--ink-inv) 14%, transparent); color: var(--ink-inv); }
.bk-k-warn, .tk-k-urgent { background: var(--warning-soft) !important; color: var(--warning) !important; }
.tk-k-urgent { background: var(--danger-soft) !important; color: var(--danger) !important; }
.tk-k-open { background: var(--accent-soft) !important; color: var(--accent-text) !important; }

.app-shell .table th, .modal .table th { padding: 14px 18px 10px; font-size: 13px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--muted); border-bottom: 1px solid var(--border); }
.app-shell .table td, .modal .table td { padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-2); }
.app-shell .card .table th, .app-shell .card .table td { border-bottom-color: var(--sub-line); }
[data-theme="light"] .app-shell .card .table th, [data-theme="light"] .app-shell .card .table td { border-bottom-color: rgba(0, 0, 0, .07); }
.app-shell .table tbody tr:hover, .modal .table tbody tr:hover { background: var(--row-hover); }
.app-shell .table tr:last-child td { border-bottom: 0; }
.app-shell .table :is(.select, .input) { height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; font-size: 14.5px; }

.d-list li { padding: 13px 0; font-size: 15px; border-bottom-color: var(--sub-line); }
[data-theme="light"] .d-list li { border-bottom-color: rgba(0, 0, 0, .07); }
.d-bar, .pg-score, .tm-debug-bar, .ms-bar, .app-shell .meter, .app-shell .progress { height: 8px; border-radius: var(--r-pill); background: var(--tile-2); }
.card .d-bar, .card .pg-score, .card .ms-bar, .app-shell .card .meter, .app-shell .card .progress { background: var(--sub); }
.d-bar span, .pg-score span, .tm-debug-bar span, .ms-bar span { background: var(--accent); border-radius: var(--r-pill); }

.app-shell .empty-state .empty-icon, .tm-empty .empty-icon, .d-locked .empty-icon { border-radius: 50%; background: var(--sub); color: var(--accent-text); box-shadow: none; }
.app-shell .empty-state h3, .tm-empty h3, .d-locked h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.d-locked { border: 0; background: var(--tile); border-radius: var(--r-lg); }
.card .d-locked { background: var(--sub); }

.app-shell .alert { border-radius: var(--r-lg); border: 0; }
.d-bk-alert { padding: 16px 22px; }
.d-bk-alert:hover { transform: none; box-shadow: none; }
.d-bk-go { font-weight: 600; }
@media (max-width: 700px) { .d-bk-alert { flex-wrap: wrap; } .d-bk-go { margin-left: 30px; } }


/* ---- DASHBOARD -------------------------------------------------------------------------------------------------------- */

/* the welcome banner: a cobalt stage */
.d-banner { border-radius: var(--r-xl); padding: 34px 36px; background: var(--accent); box-shadow: none; }
.d-banner h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.d-banner .confetti i { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.d-banner .d-banner-close { border-radius: 50%; background: rgba(255, 255, 255, .18); }
.d-banner .btn-white, .d-banner .btn:not(.btn-ghost) { background: #fff; color: #000; }
.d-banner .btn-white:hover { background: #000; color: #fff; }

.d-usage { padding: 24px 26px; gap: 24px; }
.d-usage-top strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.d-quick { gap: 12px; }
.d-quick-card { padding: 22px 24px; border: 0; border-radius: var(--r-lg); background: var(--tile); box-shadow: none; transition: background .4s var(--ease-fade); }
.d-quick-card:hover { transform: none; box-shadow: none; background: var(--tile-2); }
.d-quick-card .qc-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--ink-inv); box-shadow: none; font-size: 16px; }
.d-quick-card:hover .qc-ico { background: var(--accent); color: #fff; }
.d-quick-card b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.d-quick-card span { font-size: 14.5px; }
.d-quick-card:hover .qc-go { color: var(--accent-text); }

.d-chart-card { padding: 24px 26px 18px; }
.d-chart-head h3, .app-shell .d-form-card h3, .ms-h3, .in-h, .ai-h { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.d-chart-legend { font-size: 13.5px; gap: 18px; }
.d-chart-legend i { width: 10px; height: 10px; border-radius: 50%; }
.d-chart-wrap { height: 300px; }

.d-two { gap: 12px; align-items: start; }

/* an assistant: a tile with its avatar, live state, three sub-tile stats and pill links */
.d-bots { gap: 12px; }
.d-bot-card { padding: 24px; gap: 18px; }
.d-bot-top h3 { font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.d-bot-top a.d-domain { font-size: 14px; }
.d-bot-stats { gap: 8px; }
.d-bot-stats div { padding: 14px 14px 12px; border-radius: var(--r); }
.d-bot-stats b { font-size: 24px; font-weight: 800; letter-spacing: -.035em; }
.d-bot-stats span { font-size: 13px; }
.d-bot-links { gap: 6px; }
/* the assistant's quick links: solid mid-grey tiles, no edge, white label and icon (the same in both themes); hover
   lightens them a shade and lifts them a little */
.d-bot-links a { flex-direction: column; justify-content: center; gap: 6px; min-height: 62px; padding: 10px 2px; border: 0; border-radius: var(--r); background: #777777; font-size: 13px; letter-spacing: -.015em; font-weight: 600;
                 box-shadow: none; color: #fff; transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade), box-shadow .4s var(--ease-fade), transform .4s var(--ease); }
.d-bot-links a i { font-size: 15px; color: inherit; }
.d-bot-links a:hover { background: #8A8A8A; color: #fff; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); transform: translateY(-2px); }
.d-bot-links a:active { transform: scale(.97); }
.d-bot-links + .d-bot-links { margin-top: -12px; }
.d-bot-links a span, .d-bot-links a { white-space: nowrap; }
.d-live { font-size: 13.5px; font-weight: 500; }

.d-av { border-radius: 50%; box-shadow: none; font-weight: 700; }
.d-av.is-lg { width: 64px; height: 64px; border-radius: 50%; font-size: 26px; }
.d-av.is-sm { border-radius: 50%; }

.d-new-card { min-height: 300px; border: 0; border-radius: var(--r-lg); background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--muted); }
.d-new-card:hover { background: var(--tile); box-shadow: inset 0 0 0 1.5px transparent; color: var(--text); }
.d-new-card .d-new-plus { border-radius: 50%; background: var(--ink); color: var(--ink-inv); box-shadow: none; }
.d-new-card:hover .d-new-plus { background: var(--accent); color: #fff; }
.d-new-card b, .d-new-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }

.as-summary { padding: 22px 24px; }
.d-new-wrap { max-width: 920px; margin-top: 8px; }

/* /new: the website field is one pill with its button inside */
.d-hero-empty { padding: 48px 44px; border-radius: var(--r-xl) !important; }
.d-hero-empty h2 { font-size: clamp(32px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 6px 0 14px; }
.d-hero-empty .eyebrow { background: none; border: 0; padding: 0; text-transform: none; letter-spacing: -.005em; font-size: 15px; color: var(--accent-text); }
.d-hero-empty .eyebrow i { background: none; color: inherit; }
.d-urlform { padding: 6px; gap: 8px; border: 0; border-radius: var(--r-pill); background: var(--sub); box-shadow: inset 0 0 0 1px var(--border); }
.d-urlform:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent), var(--field-glow); }
.d-urlform .input { height: 48px; min-height: 48px; padding-left: 4px; }
.d-urlform .input-icon { padding-left: 14px; color: var(--muted); }
.d-urlform .btn { height: 48px; }
.d-steps { gap: 10px; margin-top: 28px; }
.d-steps div { padding: 18px; border-radius: var(--r); font-size: 14.5px; }
.d-steps b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.d-steps i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tile); color: var(--accent-text); font-size: 15px; margin-bottom: 12px; }
@media (max-width: 600px) { .d-urlform { flex-wrap: wrap; border-radius: var(--r-lg); } .d-urlform .btn { width: 100%; } .d-hero-empty { padding: 30px 20px; } }


/* ---- THE ASSISTANT EDITOR --------------------------------------------------------------------------------------------- */

.bot-head { gap: 20px; margin-bottom: 22px; }
.bot-title h1 { font-size: clamp(32px, 3vw, 44px); gap: 12px; }
.bot-title .d-bot-meta { margin-top: 10px; gap: 10px; }
.bot-actions { gap: 8px; }
.d-menu { border: 0; border-radius: var(--r-lg); padding: 8px; background: var(--surface); box-shadow: var(--shadow-lg), var(--ring); }
.d-menu button, .d-menu a { border-radius: var(--r-pill); padding: 10px 14px; font-size: 15px; }
.d-menu button, .d-menu a { transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade); }
.d-menu button:hover, .d-menu a:hover { background: var(--tile); }

/* the tab bar: pill tabs on a grey track, pinned under the nav */
.bot-tabs { margin: 0 0 28px; padding: 10px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.bot-tabs .tabs { width: max-content; max-width: 100%; }
.bot-tabs .tabs .tab { padding: 0 15px; }
@media (max-width: 1700px) { .bot-tabs .tabs { gap: 2px; } .bot-tabs .tabs .tab { padding: 0 12px; font-size: 14px; } .bot-tabs .tabs .tab > i { display: none; } }
.bot-banner .alert, .bot-banner > div { border-radius: var(--r-lg); }

.d-stack { gap: 12px; }
.d-form-card { padding: 28px; }
.d-form-card > .d-sub { margin-bottom: 22px; }
.d-sub { font-size: 15px; line-height: 1.5; }
.d-hint { font-size: 13.5px; }

/* the save bar: a floating ink pill */
.d-savebar, .ms-savebar { bottom: 20px; padding: 8px 8px 8px 22px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--ink-inv); box-shadow: var(--shadow-lg);
                          -webkit-backdrop-filter: none; backdrop-filter: none; }
.d-savebar .d-dirty, .ms-savebar .d-dirty { color: color-mix(in srgb, var(--ink-inv) 70%, transparent); font-size: 14.5px; }
.d-savebar.is-dirty .d-dirty { color: var(--ink-inv); }
.d-savebar .btn-primary, .ms-savebar .btn-primary { background: var(--accent); color: #fff; }
.d-savebar .btn-primary:hover, .ms-savebar .btn-primary:hover { background: var(--ink-inv); color: var(--ink); }
.d-savebar .btn-ghost, .ms-savebar .btn-ghost { color: var(--ink-inv); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink-inv) 30%, transparent); background: transparent; }
.d-savebar .btn-ghost:hover, .ms-savebar .btn-ghost:hover { background: var(--ink-inv); color: var(--ink); }

/* overview */
.d-check li { padding: 14px 0; font-size: 15px; border-bottom-color: var(--sub-line); }
[data-theme="light"] .d-check li { border-bottom-color: rgba(0, 0, 0, .07); }
.d-check .tick { width: 28px; height: 28px; background: var(--sub); }
.d-check li.is-done .tick { background: var(--success-soft); }

/* knowledge */
.d-item { padding: 16px 18px; border-radius: var(--r); }
.d-item .d-kind { border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.d-item .grow b { font-size: 15.5px; }
.d-page-title { font-weight: 600; }

/* appearance */
.d-split { gap: 16px; }
.d-preview-stage { border: 0; border-radius: var(--r-xl); background: var(--tile); box-shadow: none; }
.d-preview-chrome { height: 40px; background: var(--tile-2); border-bottom: 0; }
.d-preview-chrome span { width: 11px; height: 11px; background: var(--border-strong); opacity: 1; }
.d-preview-chrome em { padding: 4px 14px; border-radius: var(--r-pill); background: var(--tile); font-size: 12.5px; }
.d-preview-mount, .d-preview-fallback { top: 40px; }
.d-themes { gap: 10px; }
.d-theme { padding: 10px; }
.d-theme-name { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.d-theme-brand { background: var(--sub) !important; }
.d-swatch { border-radius: 50%; width: 32px; height: 32px; }
.d-swatch.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--sub), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.icp-ic { border-radius: var(--r-sm); border: 0; }
.icp-ic:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.icp-ic.is-active { background: var(--accent) !important; color: #fff; box-shadow: none; transform: none; }
.icb-fab { border-radius: 50%; }
.icb-ph.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.psp-screen { border: 0; box-shadow: none; }
.psp-bar { border-bottom-color: var(--sub-line); }
.psp-cell { border-color: var(--border); }
.psp-cell.is-active { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.psp-cell.is-active .psp-dot { background: var(--accent); box-shadow: none; }
.d-brand-panel { border: 0; background: var(--sub); border-radius: var(--r-lg); }
.xtp-chips em, .xtp-pill { border-radius: var(--r-pill); }
.lkp-range { height: 6px; border-radius: var(--r-pill); }
.lkp-ticks button:hover { color: var(--accent-text); }

/* behaviour */
.d-opts { gap: 8px; }
.d-opt { padding: 16px; }
.d-opt b { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.d-opt span { font-size: 13px; }

/* install */
.d-platforms { gap: 6px; }
.d-platform { height: 42px; padding: 0 16px; border: 0; border-radius: var(--r-pill); font: 600 14.5px var(--font-sans); letter-spacing: -.01em; box-shadow: inset 0 0 0 1px var(--border); }
.d-platform:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.d-platform.is-active { background: var(--ink) !important; color: var(--ink-inv); box-shadow: none; }
.d-steps-list li::before { border-radius: 50%; background: var(--ink); color: var(--ink-inv); font: 700 14px var(--font-sans); }
.d-install-status { border-radius: var(--r-lg); }
.d-install-status .big { border-radius: 50%; }
.d-install-status.is-ok .big { background: var(--success-soft); }
.d-install-status.is-bad .big { background: var(--warning-soft); }
.d-ip-preview { border: 0; border-radius: var(--r-lg); }
.app-shell .copy-box, .modal .copy-box { border: 0; border-radius: var(--r); }
:is(.app-shell, .modal) .copy-box .copy-btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
:is(.app-shell, .modal) .copy-box .copy-btn:hover { background: #fff; color: #000; box-shadow: none; }

/* conversations: a list tile and a transcript tile */
.conv-layout { gap: 12px; }
.conv-tools .input { min-height: 42px; border-radius: var(--r-pill); }
.conv-item { padding: 16px 20px; border-bottom-color: var(--sub-line); }
[data-theme="light"] .conv-item { border-bottom-color: rgba(0, 0, 0, .07); }
.conv-item:hover { background: var(--row-hover); }
.conv-item.is-active { background: var(--sub); box-shadow: inset 3px 0 0 var(--accent); }
.conv-item p { font-size: 15px; }
.transcript-body { padding: 24px; gap: 10px; }

/* chat bubbles everywhere in the panel: the visitor in cobalt, the assistant on a sub-tile */
.d-msg .bub { padding: 11px 16px; border: 0; border-radius: 20px; background: var(--sub); font-size: 15px; line-height: 1.5; }
.d-msg.is-bot .bub { border-bottom-left-radius: 6px; }
.d-msg.is-user .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; box-shadow: none; }
.d-msg .meta { font-size: 12px; }
.d-src { border: 0; border-radius: var(--r-pill); background: var(--sub); font-size: 12px; padding: 4px 10px; }
.d-lead-card { border: 0; border-radius: var(--r); background: var(--success-soft); }

/* playground */
.pg { gap: 12px; }
.pg-chat { border-radius: var(--r-xl) !important; }
.pg-head { padding: 16px 20px; border-bottom: 1px solid var(--sub-line); }
[data-theme="light"] .pg-head { border-bottom-color: rgba(0, 0, 0, .06); }
.pg-head b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.pg-msgs { padding: 24px 22px; gap: 12px; }
.pg-msgs .d-msg .bub { font-size: 15.5px; }
.pg-input { padding: 12px; border-top: 0; }
.pg-input .input { height: 50px; min-height: 50px; border-radius: var(--r-pill); padding-left: 20px; background: var(--sub); border-color: transparent; }
.pg-input .btn { height: 50px; width: 50px; padding: 0; border-radius: 50%; flex: none; }
.pg-cursor { background: var(--accent); }
.pg-suggest .chip { min-height: 32px; font-size: 13.5px; }
.pg-hood-body { padding: 18px 22px; }
.pg-stat div { border-radius: var(--r); }
.pg-stat b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.pg-hit { border-bottom-color: var(--sub-line); }

/* gaps */
.d-gap { padding: 22px 24px; }
.d-gap-q { font-size: 17px; letter-spacing: -.015em; }
.d-gap-count { border: 0; border-radius: var(--r); background: var(--warning-soft); }
.d-gap-reply { border-left: 0; border-radius: var(--r); background: var(--sub); padding: 12px 16px; }

/* insights & ROI */
.in-hero { border-radius: var(--r-xl) !important; }
.in-hero-main { padding: 34px 36px; background: var(--ink); color: var(--ink-inv); border-right: 0; }
.in-hero-main .in-hero-value { color: var(--ink-inv); }
.in-hero-main .in-hero-label { color: color-mix(in srgb, var(--ink-inv) 75%, transparent); }
.in-hero-main .in-hero-roi { background: color-mix(in srgb, var(--ink-inv) 12%, transparent); color: var(--ink-inv); border: 0; border-radius: var(--r-pill); padding: 8px 14px; }
.in-hero-main .in-hero-roi b { color: var(--ink-inv); }
.in-hero-main .small, .in-hero-main .muted, .in-hero-main p { color: color-mix(in srgb, var(--ink-inv) 70%, transparent); }
.in-hero-lines { padding: 16px 28px; }
.in-line { border-bottom-color: var(--sub-line); }
.in-line-ic { border-radius: 50%; background: var(--sub); color: var(--accent-text); }
.in-line-v { font-size: 22px; letter-spacing: -.03em; }
.in-two { gap: 12px; }
.in-hours { gap: 4px; }
.in-hour { border-radius: 6px; }
.in-hour span { background: var(--accent); border-radius: 6px 6px 2px 2px; }
.in-hour.is-off { background: var(--sub); }
.in-hour.is-off span { background: var(--chart-2); opacity: 1; }
.in-report { background: var(--tile) !important; border: 0 !important; }
.in-headline { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.in-sent { height: 10px; border-radius: var(--r-pill); }
.in-sent-key i { border-radius: 50%; border: 0; }
.in-opps { gap: 12px; }
.in-opp { background: var(--tile) !important; }
.in-opp .in-action { background: var(--sub); }
.in-action { border-radius: var(--r); background: var(--accent-soft); }
.in-ex span { border-radius: var(--r-pill); padding: 4px 10px; }
.in-theme, .in-row { border-bottom-color: var(--sub-line); }

/* lead intelligence and nudges */
.lai-chip { border: 0; border-radius: var(--r-pill); padding: 0 10px; height: 26px; font-size: 12.5px; font-weight: 600; }
.lai-hot { background: var(--danger-soft); }
.lai-warm { background: var(--warning-soft); }
.lai-cold { background: var(--accent-soft); color: var(--accent-text); --lai: var(--accent); }
.lai-chip.is-pending { background: var(--tile-2); }
.lai-box { border-radius: var(--r-lg); }
.lai-empty-ic { border-radius: 50%; }
.lai-ring { background: radial-gradient(closest-side, var(--sub) 78%, transparent 80% 100%), conic-gradient(var(--lai) calc(var(--p) * 1%), var(--tile-2) 0); }
.lai-next { border-radius: var(--r); background: var(--accent-soft); }
.lai-next span { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
.lai-follow { border-top-color: var(--sub-line); }
.nd-row { border-radius: var(--r); }

/* admin: AI usage colours, cobalt and neutrals */
.ai-usage { --ai-s1: #1A4BFF; --ai-s2: #9DB2FF; --ai-s3: #A1A1A8; }
[data-theme="dark"] .ai-usage { --ai-s1: #4D7BFF; --ai-s2: #2E4FB8; --ai-s3: #6E6E75; }
[data-theme="light"] .ai-usage { --ai-s1: #1A4BFF; --ai-s2: #9DB2FF; --ai-s3: #A1A1A8; }
.ai-key { border-radius: 50%; }
.ai-usage [data-ai-table][aria-pressed="true"] { color: var(--ink-inv); background: var(--ink); box-shadow: none; }


/* ---- TEAM ASSISTANT: the panel's own chat --------------------------------------------------------------------------- */

.tm-app { background: var(--bg); }
.tm-history { background: var(--bg); border-right: 1px solid var(--border); }
.tm-history-head { padding: 18px 16px 10px; border-bottom: 0; }
.tm-history-head .btn { height: 44px; }
.tm-history-list { padding: 4px 10px 18px; }
.tm-history-group { padding: 16px 12px 6px; font-size: 13px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--muted); }
.tm-history-item { height: 40px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14.5px; }
.tm-history-item:hover { background: var(--tile); }
.tm-history-item.is-active { background: var(--accent-soft); box-shadow: none; color: var(--text); font-weight: 600; }
.tm-history-item.is-active > i { color: var(--accent-text); }
.tm-history-del { border-radius: 50%; }

.tm-chat-head { padding: 14px 26px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent);
                -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.tm-bot-face, .tm-welcome-face, .tm-msg-face, .tm-icon-face { border-radius: 50%; box-shadow: none; animation: none; }
.tm-bot-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.tm-bot-sub { font-size: 13.5px; }

.tm-thread-inner { max-width: 840px; padding: 36px 28px 20px; gap: 18px; }
.tm-welcome { padding: 7vh 0 10px; }
.tm-welcome-face { width: 72px; height: 72px; font-size: 28px; }
.tm-welcome h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin-bottom: 12px; }
.tm-welcome-greet { font-size: 17px; color: var(--muted); }
.tm-know span { height: 32px; padding: 0 13px; border: 0; border-radius: var(--r-pill); background: var(--tile); font-size: 13.5px; }
.tm-know i { color: var(--accent-text); }
.tm-starters { gap: 8px; }
.tm-starter { padding: 16px 18px; border: 0; border-radius: var(--r-lg); background: var(--tile) !important; font-size: 15px; color: var(--text);
              transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade); }
.tm-starter:hover { transform: none; background: var(--tile-2) !important; box-shadow: none; }
.tm-starter i { color: var(--accent-text); }

/* bubbles: the person in cobalt on the right, the assistant on a grey tile on the left */
.tm-msg { gap: 10px; align-items: flex-start; }
.tm-msg.is-user .tm-bub { max-width: 76%; padding: 12px 18px; border-radius: 22px 22px 6px 22px; background: var(--accent); color: #fff; box-shadow: none; font-size: 15.5px; line-height: 1.5; }
.tm-msg.is-user .tm-bub a { color: #fff; text-decoration: underline; }
.tm-msg.is-bot .tm-bub { flex: 0 1 auto; max-width: min(100%, 720px); padding: 14px 20px; border-radius: 22px 22px 22px 6px; background: var(--tile); color: var(--text-2); line-height: 1.65; }
.tm-msg.is-bot .tm-bub:has(.tm-typing) { padding: 8px 18px; }
.tm-msg-face { width: 34px; height: 34px; margin-top: 2px; }
.tm-text { font-size: 15.5px; }
.tm-text :is(ul, ol) { padding-left: 1.2em; margin: .5em 0; }
.tm-text code { padding: 1px 6px; border-radius: 6px; background: var(--sub); font-size: .9em; }
.tm-text pre { border-radius: var(--r); }
.tm-sources-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tm-source { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--sub); font-size: 13px; }
.tm-source:hover { background: var(--ink); color: var(--ink-inv); }
.tm-source:hover i { color: inherit; }
.tm-source i { color: var(--accent-text); }
.tm-icon-btn { border: 0; border-radius: 50%; width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
.tm-icon-btn:hover { background: var(--sub); border-color: transparent; }
.tm-debug { border: 0; border-radius: var(--r); background: var(--sub); }
.tm-suggest .chip { min-height: 34px; }

/* the composer: one pill field with a round send button */
.tm-composer { padding: 10px 28px 20px; background: linear-gradient(180deg, transparent, var(--bg) 30%); }
.tm-composer-box { padding: 7px 7px 7px 22px; border: 0; border-radius: 28px; background: var(--tile); box-shadow: none; }
.tm-composer-box:hover { border-color: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.tm-composer-box:focus-within { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--accent), var(--field-glow); }
.tm-composer textarea { font-size: 16px; padding: 11px 0; }
.tm-send { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--ink-inv); box-shadow: none; transition: background-color .4s var(--ease-fade), color .4s var(--ease-fade); }
.tm-send:hover { transform: none; filter: none; background: var(--accent); color: #fff; }
.tm-send.is-stop { background: var(--tile-2); box-shadow: none; }
.tm-composer-foot { font-size: 12.5px; }
.app-shell .tm-composer-foot .kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--tile); box-shadow: none; font-size: 11.5px; color: var(--muted); }
@media (min-width: 981px) { .tm-chat-head .tm-history-toggle { display: none; } }

/* team assistant settings (modal) */
.tm-theme-opt { padding: 10px 12px; font: 600 14px var(--font-sans); }
.tm-theme-swatch { border-radius: 50%; }

/* ---- KNOWLEDGE LIBRARY AND TEAM -------------------------------------------------------------------------------------- */

.tm-meters { gap: 12px; }
.tm-meter { padding: 20px 22px; gap: 12px; }
.tm-meter-label { font-size: 14px; font-weight: 500; color: var(--muted); }
.tm-meter-label i { color: var(--text); }
.tm-meter-num { font-size: 14px; }
.tm-meter-num b { font-size: 26px; font-weight: 800; letter-spacing: -.035em; margin-right: 2px; }

.tm-acc { height: 24px; padding: 0 10px; border: 0; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; }
.tm-acc-private { color: var(--warning); background: var(--warning-soft); }
.tm-acc-team { color: var(--accent-text); background: var(--accent-soft); }
.tm-acc-public { color: var(--success); background: var(--success-soft); }
.tm-acc-web { color: var(--text-2); background: var(--tile-2); }
.card .tm-acc-web { background: var(--sub); }

.tm-upload { padding: 14px; }
.tm-upload-grid { gap: 14px; }
.tm-upload-zone { border: 0; border-radius: var(--r-lg); background: var(--sub); box-shadow: inset 0 0 0 1.5px var(--border-strong); min-height: 240px;
                  transition: box-shadow .4s var(--ease-fade), background-color .4s var(--ease-fade); }
.link-btn { transition: color .4s var(--ease-fade); }
.tm-upload-zone:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.tm-upload-zone.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); transform: none; }
.tm-upload-zone h3 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.tm-upload-orb { border-radius: 50%; background: var(--ink); color: var(--ink-inv); box-shadow: none; animation: none; }
.tm-upload-zone:hover .tm-upload-orb, .tm-upload-zone.is-over .tm-upload-orb { background: var(--accent); color: #fff; }

.tm-library { margin-top: 12px; }
.tm-library-bar { padding: 18px 20px; border-bottom: 0; }
.tm-search .input, .tk-search, .dm-search .input { border-radius: var(--r-pill); }
.tm-doc { padding: 14px 20px; border-bottom-color: var(--sub-line); }
[data-theme="light"] .tm-doc { border-bottom-color: rgba(0, 0, 0, .07); }
.tm-doc:first-of-type { border-top: 1px solid var(--sub-line); }
[data-theme="light"] .tm-doc:first-of-type { border-top-color: rgba(0, 0, 0, .07); }
.tm-doc:hover { background: var(--row-hover); }
.tm-doc-icon { border-radius: var(--r-sm); }
.tm-doc-icon.is-article { background: var(--accent-soft); color: var(--accent-text); }
.tm-doc-icon.is-text { background: var(--sub); }
.tm-doc-icon.is-code { background: var(--accent-soft); color: var(--accent-text); }
.tm-doc-title { font-weight: 600; font-size: 15.5px; }
.tm-doc-main:hover .tm-doc-title { color: var(--accent-text); }
.tm-doc-meta { font-size: 13px; }
.tm-pulse { background: var(--accent); }
.tm-status.is-busy { color: var(--accent-text); }

.tm-seats { padding: 22px 24px; }
.tm-seats-avatars .tm-av { box-shadow: 0 0 0 3px var(--tile); }
.tm-av { box-shadow: 0 0 0 2px var(--tile); }
.tm-person-name { font-weight: 600; font-size: 15.5px; }
.tm-person-email { font-size: 13.5px; }
.tm-role-select { height: 40px; min-height: 40px; border-radius: var(--r-pill); font-size: 14.5px; }
.tm-invite { padding: 16px 24px; border-bottom-color: var(--sub-line); }
.tm-roles { gap: 12px; }
.tm-role-card { padding: 24px; }
.tm-role-card h4 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.tm-role-icon { border-radius: 50%; }
.tm-role-icon.is-owner { background: var(--ink); color: var(--ink-inv); }
.tm-role-icon.is-admin { background: var(--accent-soft); color: var(--accent-text); }
.tm-role-icon.is-member { background: var(--sub); }
.tm-limit-icon, .tm-inv-ok-icon, .tm-join-icon { border-radius: 50%; box-shadow: none; }
.tm-limit-icon, .tm-join-icon { background: var(--ink); color: var(--ink-inv); }
.tm-inv-ok-icon { background: var(--success); }
.tm-editor-tabs button { border-radius: var(--r-pill); height: 34px; padding: 0 14px; font: 600 14px var(--font-sans); }
.tm-editor-tabs button.is-active { background: var(--ink); color: var(--ink-inv); }
.tm-viewer-body, .tm-editor-preview { border: 0; border-radius: var(--r-lg); }
.tm-viewer-head { border-bottom-color: var(--border); }

/* /join (the invitation): a calm tile, no glow */
.tm-join-glow { display: none; }
.tm-join-card { border-radius: var(--r-xl); box-shadow: none; }
.tm-join-card h1 { font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.tm-join-perks i { color: var(--accent-text); }


/* ---- BOOKINGS, TICKETS, CONNECTED APPS ------------------------------------------------------------------------------ */

.bk-filter { border-radius: var(--r-pill); min-height: 48px; }
.bk-list .bk-row, .bk-list .tk-row { border-bottom-color: var(--sub-line); }
[data-theme="light"] .bk-list :is(.bk-row, .tk-row, .bk-day-head) { border-bottom-color: rgba(0, 0, 0, .07); }
.bk-row:hover, .tk-row:hover { background: var(--row-hover); }
.bk-when { border: 0; border-radius: var(--r); background: var(--sub); }
.bk-when b, .bk-when strong { color: var(--text); }
.bk-day-head { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--text-2); }
.bk-day-head span { border-radius: var(--r-pill); background: var(--sub); }
.bk-msg { border: 0; border-radius: 20px; background: var(--sub); }
.bk-msg.is-visitor { background: var(--accent); color: #fff; border-color: transparent; }
.bk-msg.is-visitor .bk-msg-who { color: rgba(255, 255, 255, .78); }
.bk-detail { border: 0; border-radius: var(--r-lg); background: var(--tile); }
.bk-dl { padding: 13px 18px; font-size: 15px; }
.bk-dl + .bk-dl { border-top-color: var(--border); }
.modal .bk-dl + .bk-dl { border-top-color: color-mix(in srgb, var(--text) 8%, transparent); }
.bk-chat { border: 0; border-radius: var(--r-lg); padding: 16px; }
.bk-chat .bk-msg:not(.is-visitor) { background: var(--surface); }
.bk-msg-who { font-weight: 600; }
.bks-mode { border-radius: var(--r); }
.bkp-ic { border-radius: 50%; background: var(--ink); color: var(--ink-inv); box-shadow: none; }
.tk-search { width: 280px; max-width: 100%; }
.tk-act > i { border-radius: 50%; }
.tk-act.is-reply > i { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.tk-state, .bk-state .badge { border-radius: var(--r-pill); }

.cn-grid { gap: 12px !important; }
.cn-card { border-radius: var(--r-lg); }
.cn-logo, .cn-logo-sm { border-radius: var(--r-sm); }
.cn-h { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 44px 0 16px; }
.cn-steps { gap: 12px; }
.cn-step { padding: 22px; border: 0; border-radius: var(--r-lg); background: var(--tile); }
.cn-step b { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.cn-step b i { color: var(--accent-text); }
.cn-step p { font-size: 14.5px; }
.cn-conn, .cn-card { padding: 24px; }
.cn-conn-name b, .cn-card-head b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.cn-stats { gap: 8px; }
.cn-stat { padding: 14px 16px; border: 0; border-radius: var(--r); background: var(--sub); }
.cn-stat b { font-size: 26px; letter-spacing: -.035em; }
.cn-stat span { font-size: 13px; }
.cn-stat.is-hot { background: var(--danger-soft); }
.cn-acts { border-top-color: var(--sub-line); }
[data-theme="light"] .cn-acts { border-top-color: rgba(0, 0, 0, .07); }
.cn-blurb { font-size: 15px; }
.cn-creates { font-size: 13.5px; }
.cn-creates i { color: var(--accent-text); }
.cn-log-row { padding: 14px 22px; }
.cn-log-row + .cn-log-row { border-top-color: var(--sub-line); }
[data-theme="light"] .cn-log-row + .cn-log-row { border-top-color: rgba(0, 0, 0, .07); }
.cn-log-who b { font-family: var(--font-sans); font-weight: 600; }
.cn-step-n { border-radius: 50%; background: var(--ink); color: var(--ink-inv); font: 700 14px var(--font-sans); }
.cn-upgrade { background: var(--accent-soft) !important; border: 0 !important; }
.cn-upgrade-icon { border-radius: 50%; background: var(--accent); }


/* ---- AI WORKSPACE EDITOR ---------------------------------------------------------------------------------------------- */

.ms-tabs { margin-bottom: 28px; }
.ms-url { font-family: var(--font-sans); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.025em; }
.ms-url b { font-weight: 800; }
.ms-url-label { font-size: 14px; font-weight: 500; }
.ms-checklist { gap: 8px; }
.ms-check { padding: 14px 16px; border: 0; border-radius: var(--r); background: var(--sub); }
.ms-check b { font-size: 15.5px; font-weight: 600; }
.ms-check span { font-size: 13.5px; }
.ms-tab-count { border-radius: var(--r-pill); }
.ms-perk > i, .ms-person-av { border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.ms-how-step span { background: var(--ink); color: var(--ink-inv); }
.ms-url-card, .ms-credit-hero { background: var(--tile) !important; }
.ms-big { color: var(--text); }
.ms-month-bar span { background: var(--accent); border-radius: 6px; }
.ms-preview-stage { border-radius: var(--r-xl); border: 0; }
.ms-preset, .ms-color, .ms-asset { border-radius: var(--r); }
.ms-pack.is-featured { box-shadow: inset 0 0 0 2px var(--accent) !important; }


/* ---- BILLING, CHECKOUT, INVOICES, PROFILE (account.css underneath) ---------------------------------------------------- */

.app-shell :is(.usage-card, .settings-card, .danger-card, .order-card, .pay-card, .plan-hero, .acct-plans > *, .profile-nav, .profile-me) { border: 0; border-radius: var(--r-lg); box-shadow: none; }
.app-shell :is(.usage-card, .settings-card, .order-card, .pay-card, .profile-nav, .profile-me) { background: var(--tile); }
.app-shell .plan-hero { background: var(--ink); color: var(--ink-inv); }
.app-shell .plan-hero :is(h2, h3, .plan-hero-name, .plan-hero-price, b, strong) { color: var(--ink-inv); }
.app-shell .plan-hero :is(.muted, .small, p, .plan-hero-meta) { color: color-mix(in srgb, var(--ink-inv) 70%, transparent); }
/* the labels and icons: cobalt is lost on the black card of the light theme, so there they are a bright violet and the
   meta icons a bright green (the dark theme's card is white, where cobalt reads) */
:root:not([data-theme="dark"]) .app-shell .plan-hero .eyebrow { color: #C79BFF; }
:root:not([data-theme="dark"]) .app-shell .plan-hero .plan-hero-meta i { color: #4ADE80; }
.app-shell .plan-hero .btn-primary { background: var(--ink-inv); color: var(--ink); }
.app-shell .plan-hero .btn-primary:hover { background: var(--accent); color: #fff; }
.app-shell .plan-hero .btn-ghost { color: var(--ink-inv); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink-inv) 35%, transparent); }
.app-shell .plan-hero .btn-ghost:hover { background: var(--ink-inv); color: var(--ink); }
.app-shell .plan-hero-name { font-size: clamp(32px, 3vw, 44px); font-weight: 800; letter-spacing: -.035em; }
.app-shell .danger-card { background: var(--danger-soft); }
.app-shell .current-ribbon { border-radius: var(--r-pill); }
.app-shell .acct-section-title { margin: 48px 0 18px; }
.app-shell .acct-section-title h2 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; text-transform: none; }
.app-shell .acct-section-title p { font-size: 15px; }
.app-shell .profile-nav a { border-radius: var(--r-pill); }
.app-shell .profile-nav a.is-active { background: var(--accent-soft); color: var(--text); }
.app-shell .usage-row { border-bottom-color: var(--sub-line); }
.app-shell .trust-item { border: 0; border-radius: var(--r); background: var(--sub); font-size: 12.5px; }
.app-shell .trust-item i { color: var(--accent-text); }
.app-shell .order-card .order-plan .avatar { border-radius: 50%; background: var(--ink); color: var(--ink-inv); }
.app-shell .order-plan h2 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.app-shell .invoice-doc { border-radius: var(--r-xl); overflow: hidden; }
.app-shell .invoice-doc::before { background: #1A4BFF; }   /* the paper is always light: the light accent */
.app-shell .inv-stamp { top: 92px; right: 44px; }


/* ---- ADMIN AND DEMOS ------------------------------------------------------------------------------------------------- */

.dm-tabs .tab, .dm-acts .btn { border-radius: var(--r-pill); }
.dm-table th { text-transform: none; letter-spacing: 0; }
.dm-state, .dm-live, .dm-ok, .dm-bad { border-radius: var(--r-pill); }
.dm-progress, .dm-bar { border-radius: var(--r-pill); }
.dm-now-card { border-radius: var(--r-lg); }
.dm-log { border-radius: var(--r); }


/* ---- PHONE ------------------------------------------------------------------------------------------------------------ */

@media (max-width: 980px) {
    /* the rail becomes a row of pills that scrolls sideways under the nav */
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-side { position: sticky; top: var(--nav-h); z-index: 30; height: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--border);
                background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
    .side-nav { gap: 6px; }
    .side-nav a { height: 38px; padding: 0 14px; flex: none; background: var(--tile); font-size: 14px; }
    .side-nav a.is-active { background: var(--ink); color: var(--ink-inv); }
    .side-nav a.is-active i { color: inherit; }
    .app-main { padding: 28px 16px 64px; }
    .bot-tabs { top: calc(var(--nav-h) + 59px); margin: 0 0 22px; padding: 8px 0; }
    .tm-app { height: calc(100vh - var(--nav-h) - 59px); }
    .tm-history { border-right: 0; }
    .tm-app:not(.show-history) .tm-history { box-shadow: none; }
}
@media (max-width: 700px) {
    .app-head { margin-bottom: 24px; }
    .app-head h1 { font-size: 34px; }
    .app-head p { font-size: 16px; }
    .app-head .row .btn { flex: 1 1 auto; }
    .d-form-card { padding: 22px 18px; }
    .app-shell .kpi { padding: 18px; }
    .app-shell .kpi-value { margin-top: 14px; font-size: 30px; }
    .d-bot-card { padding: 20px; }
    .d-banner { padding: 26px 22px; }
    .tm-thread-inner { padding: 24px 16px 12px; }
    .tm-composer { padding: 8px 12px 12px; }
    .tm-msg.is-user .tm-bub { max-width: 86%; }
    .tm-msg-face { display: none; }
    .in-hero-main { padding: 28px 24px; }
    .d-savebar { left: 0; right: 0; }
    .bk-kpis.grid-4, .bk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .bk-kpis .kpi-sub { display: none; }
    .app-shell .kpi-label { flex-direction: column; align-items: flex-start; gap: 10px; line-height: 1.3; }
    .app-head .row > .select, .app-head .row > .bk-filter { flex: 1 1 100%; }
    .bk-when { padding: 8px 4px; }
    .bk-when b { font-size: 13.5px; }
}