:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --text: #17243a;
  --muted: #66748a;
  --line: #e3e9f2;
  --accent: #1769e0;
  --sidebar: #0b1f3a;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; opacity: .62; }
button:focus-visible, a:focus-visible { outline: 3px solid #7eacdf; outline-offset: 4px; }
svg { width: 19px; height: 19px; stroke-width: 1.7; flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
p { line-height: 1.65; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
[hidden] { display: none !important; }
.public-site { min-height: 100vh; background: #f7f8fa; }
.landing-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 38px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.landing-brand { display: flex; align-items: center; gap: 10px; }
.brand-image { display: block; width: 70px; height: 70px; object-fit: contain; object-position: center; border-radius: 8px; background: #fff; }
.landing-brand strong { font-size: 24px; font-weight: 700; color: var(--text); }
.landing-brand strong span { color: var(--accent); }
.landing-nav nav { display: flex; align-items: center; gap: 25px; color: #65706a; font-size: 12px; }
.landing-nav nav a:hover { color: var(--accent); }
.landing-actions { display: flex; align-items: center; gap: 10px; }
.text-button { background: transparent; color: #43504a; font-size: 12px; font-weight: 600; padding: 10px; }
.text-button:hover { color: var(--accent); }
.hero-section { min-height: calc(100dvh - 76px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); gap: 54px; align-items: center; padding: 58px 7vw 48px; }
.hero-copy { max-width: 680px; }
.hero-copy h1 { font-size: 58px; line-height: 1.02; font-weight: 720; max-width: 740px; color: var(--text); }
.hero-copy p { color: #5f6973; font-size: 17px; max-width: 620px; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.proof-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; color: #68726d; font-size: 12px; }
.proof-row span { display: inline-flex; align-items: center; gap: 7px; }
.proof-row svg { width: 15px; height: 15px; color: var(--accent); }
.hero-product { background: #fff; border: 1px solid #dfe5e1; border-radius: 8px; padding: 22px; box-shadow: 0 28px 70px #22352914; min-width: 0; }
.product-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 16px; font-size: 12px; color: #63706a; }
.product-top b { color: #99783b; background: #fbf4e8; padding: 6px 9px; border-radius: 4px; font-size: 10px; }
.product-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.product-metrics article { background: #f7f9f8; border: 1px solid #ecf0ed; border-radius: 7px; padding: 16px; }
.product-metrics small { color: #89928d; font-size: 10px; }
.product-metrics strong { display: block; font-size: 13px; margin: 8px 0 6px; }
.product-metrics span { color: #7a8580; font-size: 10px; line-height: 1.5; display: block; }
.conversation-panel { border-top: 1px solid var(--line); padding-top: 12px; }
.conversation-panel > div { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid #f0f1f3; }
.conversation-panel p { font-size: 12px; color: #57635d; }
.public-section { padding: 78px 7vw; border-top: 1px solid var(--line); }
.split-section { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 50px; align-items: start; }
.public-section h2, .conversion-section h2 { font-size: 34px; line-height: 1.14; font-weight: 680; color: #252b32; }
.public-section p, .conversion-section p { color: #65717b; font-size: 14px; max-width: 560px; margin-top: 14px; }
.value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: #fff; }
.value-grid article { padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.value-grid svg { color: #4f7d62; margin-bottom: 18px; }
.value-grid strong { display: block; font-size: 14px; margin-bottom: 7px; }
.value-grid span { color: #6d7780; font-size: 12px; line-height: 1.65; }
.public-heading { margin-bottom: 24px; }
.public-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.public-card-grid article { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 25px; }
.public-card-grid h3 { font-size: 16px; margin: 18px 0 8px; }
.public-card-grid p { font-size: 13px; margin: 0; }
.assurance-list { list-style: none; padding: 0; margin: 0; background: #fff; border-top: 1px solid var(--line); }
.assurance-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); color: #525f58; font-size: 13px; line-height: 1.65; }
.assurance-list svg { color: #5b896d; margin-top: 2px; }
.pilot-section { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 45px; background: #fff; }
.public-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.public-steps li { padding: 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public-steps span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e5efff; color: #1457b9; font-size: 11px; font-weight: 700; margin-bottom: 17px; }
.public-steps strong { display: block; font-size: 13px; margin-bottom: 7px; }
.public-steps small { color: #748078; line-height: 1.55; }
.conversion-section { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 7vw 50px; padding: 38px; background: #0b1f3a; color: #fff; border-radius: 8px; }
.conversion-section h2 { color: #fff; }
.conversion-section p { color: #c6d1ca; }
.conversion-section .eyebrow { color: #9fbcaa; }
.conversion-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.conversion-section .secondary { background: transparent; color: #eef5ef; border-color: #56655c; }
.conversion-section .secondary:hover { background: #2b372f; }
.landing-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 7vw; border-top: 1px solid var(--line); color: #8c9490; font-size: 11px; }
.login-button { width: 100%; margin-top: 22px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; }
.sidebar { position: sticky; top: 0; height: 100dvh; background: var(--sidebar); color: #d4dcd6; padding: 31px 18px 0; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #fff; }
.brand strong { font-size: 25px; font-weight: 650; }
.brand strong span { color: #94c8a6; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; background: #a9d7b7; border-radius: 8px; color: #223c2b; }
.brand-mark svg { width: 23px; height: 23px; stroke-width: 2; }
.brand .brand-image { width: 78px; height: 78px; }
.workspace-label { display: flex; align-items: center; gap: 9px; border: 1px solid #414942; border-radius: 6px; margin: 34px 0 27px; padding: 12px 10px; }
.workspace-label > svg { width: 15px; margin-left: auto; color: #9aa69c; }
.workspace-avatar { height: 29px; width: 29px; display: grid; place-items: center; background: #3b463e; border-radius: 5px; font-size: 13px; color: #d9e6dd; }
.workspace-label strong { display: block; font-size: 12px; font-weight: 550; color: #e4e9e5; }
.workspace-label div > span { display: block; font-size: 10px; color: #9ba79f; margin-top: 4px; }
.nav-label { font-size: 10px; font-weight: 600; color: #8f9d94; padding: 0 12px; margin-bottom: 12px; }
.nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 6px; font-size: 13px; min-height: 42px; transition: background .15s, color .15s; }
.nav-item svg { width: 18px; height: 18px; color: #9cac9f; }
.nav-item:hover { background: #2b362f; }
.nav-item.active { background: #1a4f8b; color: #fff; }
.nav-item.active svg { color: #b6dabc; }
.nav-count { font-size: 10px; background: #3d4941; color: #c1cbc3; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
.management-label { margin: 25px 0 7px; }
.sidebar-bottom { margin-top: auto; padding: 30px 11px 22px; }
.setup-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #c1d2c5; }
.small-dot { display: inline-block; width: 6px; height: 6px; background: #a6be98; border-radius: 50%; flex-shrink: 0; }
.sidebar-bottom p { font-size: 11px; color: #8f9d94; margin: 17px 0 8px; }
.sidebar-bottom a { font-size: 12px; color: #e1eae3; display: flex; align-items: center; justify-content: space-between; }
.leave-workspace-button { width: 100%; margin-top: 14px; padding: 8px 0; border: 0; background: transparent; color: #9fb7d2; font: inherit; font-size: 12px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.leave-workspace-button:hover { color: #ffffff; }
.leave-workspace-button svg { width: 15px; height: 15px; }
.sidebar-bottom svg { width: 16px; }
.sidebar-footer { border-top: 1px solid #3a433c; padding: 20px 9px; display: flex; align-items: center; gap: 11px; }
.avatar { background: #d4ded4; color: #405444; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 650; }
.avatar { position: relative; overflow: hidden; flex: 0 0 auto; line-height: 1; text-align: center; }
.avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: inherit; }
.avatar-initials { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; text-align: center; }
.avatar-image:not([hidden]) + .avatar-initials { display: none; }
.sidebar-footer strong { font-size: 12px; font-weight: 550; display: block; }
.sidebar-footer div > span { font-size: 10px; color: #9daa9f; display: block; margin-top: 4px; }
.workspace { min-width: 0; }
.topbar { height: 73px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 36px; }
.breadcrumb { display: flex; align-items: center; gap: 15px; font-size: 12px; color: var(--muted); }
.breadcrumb svg { width: 13px; }
.breadcrumb strong { color: #454c53; font-weight: 500; }
.environment { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #777d74; }
.environment .small-dot { background: #ba9c5d; }
.page-content { padding: 28px 20px 0; max-width: 1680px; margin: auto; width: 100%; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 29px; }
.eyebrow { font-size: 10px; font-weight: 600; color: #7b847e; margin-bottom: 11px; }
h1 { font-size: 29px; font-weight: 620; line-height: 1.25; }
.page-heading p { font-size: 13px; color: var(--muted); margin-top: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 6px; padding: 11px 15px; font-size: 12px; font-weight: 550; min-height: 39px; white-space: nowrap; transition: background .15s; }
.button svg { width: 16px; height: 16px; }
.primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
.primary:hover { background: #1c5c45; }
.secondary { border: 1px solid #d8dedb; background: white; color: #43574a; }
.secondary:hover { background: #f0f5f1; }
.setup-banner { display: flex; align-items: center; gap: 15px; padding: 19px 22px; background: #edf5ff; border-top: 1px solid #d6e5f8; border-bottom: 1px solid #d6e5f8; }
.setup-icon { height: 36px; width: 36px; flex-shrink: 0; background: #dcebdd; border-radius: 50%; display: grid; place-items: center; color: #467456; }
.setup-icon svg { width: 18px; }
.setup-banner strong { font-size: 13px; font-weight: 600; color: #365640; }
.setup-banner p { font-size: 12px; color: #6a7c6c; margin-top: 4px; }
.setup-banner > a { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; color: #365e43; margin-left: auto; white-space: nowrap; }
.setup-banner > a svg { width: 15px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.metric { padding: 19px 21px 0; position: relative; min-width: 0; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #6a717a; min-height: 30px; }
.metric-label svg { width: 16px; color: #949ca2; }
.metric > strong { font-size: 31px; font-weight: 500; display: block; margin: 8px 0 9px; line-height: 1; }
.metric strong small { font-size: 12px; color: #92999f; font-weight: 400; margin-left: 8px; }
.metric > span { font-size: 10px; color: #91979e; }
.metric-line { height: 2px; width: 34px; margin-top: 21px; }
.green { background: #74a78b; } .blue { background: #7c9fbf; } .amber { background: #c5aa77; } .rose { background: #c89197; }
.operations-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.activity-section { padding: 24px; min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h2 { font-size: 14px; }
.section-heading p { color: var(--muted); font-size: 11px; margin-top: 5px; }
.muted-label { font-size: 10px; color: #7c848e; white-space: nowrap; }
.activity-chart { height: 196px; position: relative; margin-top: 22px; }
.chart-grid { position: absolute; inset: 8px 0 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid span { border-top: 1px dashed #e8ebee; width: 100%; }
.chart-empty { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.empty-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #849a8c; background: #f0f4f1; border-radius: 50%; margin-bottom: 13px; }
.empty-icon svg { width: 21px; height: 21px; }
.chart-empty strong { font-size: 12px; font-weight: 550; background: #fff; padding: 3px 8px; }
.chart-empty p { font-size: 11px; color: #90969d; max-width: 285px; background: white; padding: 3px 8px; }
.chart-legend { display: flex; gap: 20px; justify-content: center; margin-top: 18px; font-size: 10px; color: #818992; }
.chart-legend > span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 6px; height: 6px; border-radius: 2px; }
.checklist-section { border-left: 1px solid var(--line); padding: 24px; }
.onboarding-list { list-style: none; padding: 0; margin: 20px 0 0; }
.onboarding-list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.onboarding-list li + li { border-top: 1px solid #f0f1f3; }
.onboarding-list li > span { width: 25px; height: 25px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #dce5df; color: #64816d; border-radius: 50%; font-size: 10px; }
.onboarding-list li > span svg { width: 13px; height: 13px; }
.onboarding-list li.complete > span { background: #eaf2ff; border-color: #c9ddf4; color: #1769e0; }
.onboarding-list li.complete small { color: #1769e0; }
.onboarding-list li.current strong { color: #155fce; }
.onboarding-list a { flex: 1; }
.onboarding-list strong { font-size: 11px; font-weight: 550; display: block; }
.onboarding-list small { font-size: 10px; color: #8d939c; display: block; margin-top: 4px; }
.onboarding-list svg { width: 13px; color: #a2aaa5; }
.onboarding-list a:hover strong { color: var(--accent); }
.channel-summary { margin-top: 31px; }
.text-link { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--accent); font-weight: 550; }
.text-link svg { width: 14px; }
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 17px; }
.channel-card { border: 1px solid var(--line); border-radius: 7px; background: #fff; display: flex; gap: 13px; align-items: center; padding: 20px; min-width: 0; }
.channel-logo { width: 39px; height: 39px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.channel-logo svg { width: 21px; height: 21px; }
.whatsapp { background: #eaf5ed; color: #459162; } .email { background: #edf2f9; color: #6086b1; } .automation { background: #f7efe5; color: #ac8351; }
.channel-card h3 { font-size: 12px; }
.channel-card p { font-size: 10px; color: var(--muted); margin-top: 5px; }
.badge { font-size: 10px; color: #7d848c; background: #f3f4f6; padding: 5px 8px; border-radius: 4px; white-space: nowrap; display: inline-block; }
.channel-card .badge { margin-left: auto; }
.amber-badge { background: #fbf4e8; color: #99783b; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 36px; padding: 20px 0; color: #969da3; font-size: 10px; }
.footer-divider { margin: 0 8px; color: #c0c6c9; }
.icon-button { width: 32px; height: 32px; background: transparent; color: #69746e; border-radius: 5px; display: grid; place-items: center; }
.icon-button:hover { background: #e8eee9; }
.menu-button { display: none; }
.view { min-height: calc(100dvh - 213px); }
.empty-view { text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 360px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; padding: 32px; }
.empty-view p { max-width: 430px; font-size: 13px; color: var(--muted); margin: 12px 0 22px; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.integration-card { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; position: relative; }
.integration-card > .badge { position: absolute; right: 25px; top: 30px; }
.integration-card h2 { margin: 23px 0 10px; font-size: 19px; }
.integration-card p { color: var(--muted); font-size: 13px; max-width: 360px; }
.integration-provider { font-size: 11px; color: #909790; margin: 25px 0 15px; }
.integration-card .button { width: 100%; justify-content: space-between; }
.connection-state { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.connection-state strong { display: block; color: var(--text); font-size: 12px; }
.connection-state p { margin-top: 6px; font-size: 11px; line-height: 1.5; }
.connection-state img { display: block; width: min(280px, 100%); height: auto; aspect-ratio: 1; margin: 14px 0 8px; padding: 6px; border: 1px solid var(--line); background: #fff; image-rendering: pixelated; object-fit: contain; }
.connection-countdown { display: block; color: #1d5fa9; font-size: 11px; font-weight: 600; }
.connection-state[data-status="qr_expired"],
.connection-state[data-status="error"] { color: #a23b3b; }
.table-wrap { border-top: 1px solid var(--line); background: #fff; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { font-weight: 500; font-size: 11px; color: var(--muted); padding: 18px; border-bottom: 1px solid var(--line); }
.table-empty { text-align: center; height: 300px; padding: 25px; color: var(--muted); }
.table-empty svg { display: block; width: 30px; height: 30px; color: #99afa0; margin: 0 auto 18px; }
.table-empty strong { display: block; color: var(--text); font-weight: 550; }
.table-empty span { display: block; font-size: 12px; margin-top: 10px; }
.automation-row { display: flex; align-items: center; gap: 15px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.automation-row .badge { margin-left: auto; }
.automation-row p { font-size: 12px; color: var(--muted); margin-top: 6px; }
.workflow-preview { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 45px 10px; }
.workflow-preview > div { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; text-align: center; }
.workflow-preview > div > svg { width: 28px; height: 28px; color: #648773; }
.workflow-preview strong { font-size: 12px; font-weight: 550; }
.workflow-preview span { font-size: 11px; color: var(--muted); }
.workflow-preview > svg { color: #bbc7bd; }
.integration-note { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; }
.deployment-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr); gap: 24px; align-items: start; }
.deployment-main, .deployment-side { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px; min-width: 0; }
.deployment-steps { list-style: none; padding: 0; margin: 22px 0 0; }
.deployment-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 17px 0; border-top: 1px solid #f0f1f3; }
.deployment-steps li:first-child { border-top: 0; padding-top: 0; }
.deployment-steps strong { display: block; font-size: 13px; font-weight: 600; }
.deployment-steps p { color: var(--muted); font-size: 11px; margin-top: 5px; }
.step-state { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f5f6f5; color: #9ca59f; }
.step-state svg { width: 14px; height: 14px; }
.service-list { margin-top: 21px; border-top: 1px solid #f0f1f3; }
.service-list article { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid #f0f1f3; }
.service-list article > svg { color: #638b72; width: 19px; height: 19px; }
.service-list strong { display: block; font-size: 12px; font-weight: 600; }
.service-list span { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.service-list b { font-size: 10px; font-weight: 550; color: #99783b; background: #fbf4e8; border-radius: 4px; padding: 5px 8px; white-space: nowrap; }
.service-list b.ready { color: #1457b9; background: #e5efff; }
.sales-readiness { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sales-readiness p { color: var(--muted); font-size: 12px; max-width: 760px; margin-top: 7px; }
.security-list article { display: flex; gap: 18px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.security-list article > svg { color: #638b72; }
.security-list p { font-size: 12px; color: var(--muted); margin-top: 7px; }
.security-list .badge { margin-left: auto; }
dialog { width: min(480px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 8px; padding: 26px; color: var(--text); box-shadow: 0 20px 80px #192e2526; }
dialog::backdrop { background: #14271d66; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
dialog p { font-size: 13px; color: var(--muted); margin-top: 15px; }
dialog ul { padding-left: 20px; font-size: 13px; line-height: 2; }
.dialog-note { display: flex; gap: 10px; align-items: flex-start; background: #f3f5f3; padding: 13px; font-size: 11px; line-height: 1.6; color: #728176; }
.dialog-note svg { width: 15px; margin-top: 2px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: min(420px, calc(100vw - 36px)); padding: 13px 15px; border: 1px solid #d7e4da; border-radius: 7px; background: #f2f8f3; color: #285b3d; box-shadow: 0 18px 45px #22352924; font-size: 12px; line-height: 1.5; }
.toast[data-type="error"] { background: #fff1f1; border-color: #f0cdcd; color: #9a3939; }
.toast[data-type="warning"] { background: #fff8e9; border-color: #ead8a9; color: #806331; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.segmented { display: inline-flex; gap: 2px; border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 3px; }
.segmented button { min-height: 31px; padding: 0 12px; border-radius: 5px; background: transparent; color: #65706a; font-size: 11px; font-weight: 550; }
.segmented button.active { background: #e5efff; color: #1457b9; }
.search-field { display: flex; align-items: center; gap: 9px; min-width: min(360px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 0 12px; color: #8b9590; }
.search-field svg { width: 15px; }
input, select, textarea { width: 100%; border: 1px solid #dbe1dd; border-radius: 6px; background: #fff; color: var(--text); padding: 10px 11px; font: inherit; min-height: 38px; }
textarea { resize: none; overflow-y: hidden; min-height: 38px; }
input:focus, select:focus, textarea:focus { outline: 3px solid #d8e8dc; border-color: #7aa68b; }
.search-field input { border: 0; padding-left: 0; }
.search-field input:focus { outline: 0; }
.ticket-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.ticket-list, .ticket-detail, .panel-form, .info-panel { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticket-list { display: grid; gap: 0; }
.pagination-action { width: calc(100% - 28px); margin: 14px; justify-self: center; }
.knowledge-sources-panel .pagination-action { width: auto; margin: 4px 0; }
.ticket-card { text-align: left; background: #fff; border-bottom: 1px solid #eef1ef; padding: 17px; color: var(--text); }
.ticket-card:hover, .ticket-card.active { background: #f4f8f5; }
.ticket-card strong { display: block; font-size: 13px; margin: 8px 0 6px; }
.ticket-card > span:not(.ticket-meta) { display: block; font-size: 11px; color: var(--muted); }
.ticket-card em { display: inline-flex; margin-top: 12px; font-style: normal; font-size: 10px; color: #99783b; background: #fbf4e8; border-radius: 4px; padding: 5px 8px; }
.ticket-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #76807a; font-size: 10px; }
.ticket-meta b { color: #456553; }
.ticket-detail { min-height: 420px; padding: 26px; }
.ticket-detail h2 { font-size: 21px; margin: 14px 0 12px; }
.ticket-detail p { color: var(--muted); font-size: 13px; max-width: 650px; }
.detail-head, .detail-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ticket-detail dl { margin: 24px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ticket-detail dl div { padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticket-detail dt { font-size: 10px; color: var(--muted); margin-bottom: 7px; }
.ticket-detail dd { margin: 0; font-size: 12px; font-weight: 600; }
.form-grid { display: grid; gap: 13px; margin: 22px 0 16px; }
.form-grid.compact { grid-template-columns: 1fr; }
label { display: grid; gap: 7px; color: #68726d; font-size: 11px; font-weight: 550; }
.feature-note { background: #fff; margin-top: 18px; padding: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.knowledge-layout, .settings-grid, .rules-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
.knowledge-layout.read-only-layout { grid-template-columns: minmax(0, 1fr); }
.panel-form, .info-panel { padding: 24px; }
.panel-form h2, .info-panel h2 { font-size: 16px; margin-bottom: 8px; }
.panel-form p { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.panel-form.read-only input:disabled, .panel-form.read-only select:disabled, .panel-form.read-only textarea:disabled { color: #71849a; background: #f7f9fc; cursor: not-allowed; }
.permission-note { color: #71849a; font-size: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.panel-form label + label { margin-top: 14px; }
.panel-form .button { margin-top: 18px; width: 100%; }
.knowledge-form .form-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.knowledge-form .form-heading p { margin-bottom:0; }
.knowledge-fields { display:grid; gap:14px; }
.knowledge-fields label { margin-top:0 !important; }
.knowledge-fields small, .knowledge-sources-panel td small { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.knowledge-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.knowledge-actions .button { margin-top:0; }
.knowledge-preview { margin-top:16px; border:1px solid #cbdcf0; background:#f5f9ff; padding:14px; color:#24415f; }
.knowledge-preview strong, .knowledge-preview span { display:block; }
.knowledge-preview span { color:var(--muted); font-size:11px; margin-top:4px; }
.knowledge-preview pre { white-space:pre-wrap; max-height:220px; overflow:auto; margin:12px 0 0; padding-top:12px; border-top:1px solid #dbe7f3; font:11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.knowledge-row-actions { display:flex; flex-wrap:wrap; gap:8px; }
.text-button { border:0; background:transparent; color:#1763bd; cursor:pointer; font:inherit; font-size:11px; padding:0; }
.text-button:hover { text-decoration:underline; }
.text-button.danger { color:#b64e58; }
.channel-setup .button.danger { border-color:#efcaca; color:#a43c3c; background:#fff8f8; }
.channel-setup .button.danger:hover { background:#fff0f0; }
.knowledge-error { color:#b64e58 !important; max-width:220px; }
.error-badge { color:#a4424b; background:#fff0f1; }
.ready-badge { color:#2466ad; background:#e8f2ff; }
td { padding: 17px 18px; border-bottom: 1px solid #eef1ef; font-size: 12px; color: #59635e; }
td strong { color: var(--text); font-weight: 600; }
code { background: #f4f6f5; border: 1px solid #e6ebe7; border-radius: 4px; padding: 3px 6px; font-size: 11px; color: #43574a; }
.plain-list { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid #eef1ef; }
.plain-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 13px; padding: 17px 0; border-bottom: 1px solid #eef1ef; }
.plain-list svg { color: #638b72; margin-top: 3px; }
.plain-list strong { display: block; margin-bottom: 5px; }
.plain-list span { color: #65706a; font-size: 12px; line-height: 1.65; }
.ready-badge { background: #e5efff; color: #1457b9; }
.check-row { display: flex; grid-template-columns: none; align-items: center; gap: 10px; }
.check-row input { width: 17px; min-height: 17px; }
.compact-flow { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; min-height: 271px; padding: 34px 20px; }
@media (min-width: 1500px) {
  .page-content { padding-top: 42px; }
  .activity-chart { height: 235px; }
  .metric { padding-top: 25px; }
  .channel-card { padding: 24px; }
}
@media (max-width: 1180px) {
  .landing-nav { padding: 0 24px; }
  .landing-nav nav { gap: 16px; }
  .hero-section { grid-template-columns: 1fr; padding: 46px 6vw; }
  .hero-copy h1 { font-size: 48px; }
  .hero-product { max-width: 780px; }
  .split-section, .pilot-section { grid-template-columns: 1fr; }
  .public-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .page-content { padding: 28px 24px 0; }
  .topbar { padding: 0 24px; }
  .channel-card { flex-wrap: wrap; }
  .channel-card .badge { margin-left: 52px; }
  .setup-banner { flex-wrap: wrap; }
  .setup-banner > a { margin-left: 51px; }
  .operations-grid { grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); }
  .activity-section, .checklist-section { padding: 20px; }
  .metric { padding-left: 15px; padding-right: 15px; }
  .metric-label { font-size: 10px; min-height: 36px; }
  .metric-label svg { display: none; }
}
@media (max-width: 900px) {
  .landing-nav nav { display: none; }
  .landing-actions .primary { display: none; }
  .public-card-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .conversion-section { display: block; }
  .conversion-actions { margin-top: 24px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
  .operations-grid { grid-template-columns: 1fr; }
  .checklist-section { border-left: 0; border-top: 1px solid var(--line); }
  .onboarding-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .onboarding-list li + li { border-top: 0; }
  .channel-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; }
  h1 { font-size: 25px; }
  .page-heading > .button { align-self: center; }
  .integration-grid { grid-template-columns: 1fr; }
  .deployment-layout { grid-template-columns: 1fr; }
  .toolbar, .ticket-layout, .knowledge-layout, .settings-grid, .rules-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .segmented { overflow-x: auto; }
  .ticket-layout, .knowledge-layout, .settings-grid, .rules-grid { display: grid; }
  .automation-row { flex-wrap: wrap; }
  .automation-row .badge { margin-left: 54px; }
}
@media (max-width: 650px) {
  .landing-nav { height: 64px; padding: 0 18px; }
  .landing-brand strong { font-size: 19px; }
  .landing-brand .brand-image { width: 58px; height: 58px; }
  .landing-brand .brand-mark { width: 31px; height: 31px; }
  .text-button { padding: 8px 0; }
  .hero-section { min-height: auto; padding: 42px 18px; gap: 30px; }
  .hero-copy h1 { font-size: 38px; line-height: 1.08; }
  .hero-copy p { font-size: 15px; }
  .hero-actions .button { width: 100%; }
  .proof-row { display: grid; gap: 10px; }
  .hero-product { padding: 17px; }
  .product-metrics { grid-template-columns: 1fr; }
  .product-top { align-items: flex-start; }
  .public-section { padding: 52px 18px; }
  .public-section h2, .conversion-section h2 { font-size: 27px; }
  .value-grid article, .public-card-grid article, .public-steps li { padding: 20px; }
  .public-steps { grid-template-columns: 1fr; }
  .conversion-section { margin: 0 18px 34px; padding: 25px; }
  .conversion-actions .button { width: 100%; }
  .landing-footer { padding: 22px 18px; align-items: flex-start; font-size: 10px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 60px; bottom: 0; height: calc(100dvh - 60px); width: 238px; z-index: 10; transform: translateX(-100%); transition: transform .2s; overflow: auto; box-shadow: 20px 0 60px #1b27241a; }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: grid; }
  .breadcrumb #page-label { display: none; }
  .breadcrumb .menu-button svg { width: 18px; }
  .topbar { height: 60px; padding: 0 16px; gap: 8px; }
  .breadcrumb { gap: 8px; font-size: 11px; }
  .breadcrumb > span, .breadcrumb > svg { display: none; }
  .environment { font-size: 10px; }
  .page-content { padding: 26px 18px 0; }
  .page-heading { display: block; margin-bottom: 23px; }
  .page-heading > .button { margin-top: 18px; }
  .page-heading p { font-size: 12px; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: 26px; }
  .setup-banner { display: grid; grid-template-columns: 35px minmax(0, 1fr); padding: 16px; gap: 12px; }
  .setup-banner > div { flex: 1; min-width: 0; }
  .setup-banner strong { font-size: 12px; }
  .setup-banner p { font-size: 11px; }
  .setup-banner > a { grid-column: 2; margin-left: 0; font-size: 10px; }
  .setup-icon { width: 35px; height: 35px; }
  .metrics { margin: 22px 0; }
  .metric-label { font-size: 10px; min-height: 25px; }
  .metric > span { font-size: 9px; }
  .operations-grid .section-heading { align-items: flex-start; }
  .muted-label { font-size: 9px; }
  .activity-section, .checklist-section { padding: 19px 16px; }
  .onboarding-list { grid-template-columns: 1fr; }
  .onboarding-list li + li { border-top: 1px solid #f0f1f3; }
  .channel-summary .section-heading { align-items: flex-start; }
  .text-link { font-size: 10px; white-space: nowrap; gap: 4px; }
  .section-heading h2 { font-size: 13px; }
  .section-heading p { font-size: 10px; }
  .channel-card { padding: 17px; gap: 12px; }
  .channel-card .badge { margin-left: 51px; }
  .page-footer { font-size: 9px; align-items: flex-start; }
  .page-footer > span:last-child { max-width: 100px; text-align: right; }
  .workflow-preview { flex-direction: column; gap: 24px; }
  .workflow-preview > svg { transform: rotate(90deg); }
  .ticket-layout, .knowledge-layout, .settings-grid, .rules-grid { grid-template-columns: 1fr; }
  .ticket-detail dl { grid-template-columns: 1fr; }
  .ticket-detail { min-height: auto; padding: 20px 16px; }
  .segmented button { white-space: nowrap; }
  .search-field { min-width: 0; }
  .panel-form, .info-panel { padding: 19px 16px; }
  .knowledge-actions { grid-template-columns:1fr; }
  .knowledge-form .form-heading { display:block; }
  .deployment-main, .deployment-side { padding: 19px 16px; }
  .deployment-steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .step-state { width: 24px; height: 24px; }
  .service-list article { grid-template-columns: 24px minmax(0, 1fr); }
  .service-list b { grid-column: 2; justify-self: start; }
  .sales-readiness { display: block; }
  .sales-readiness .text-link { margin-top: 14px; }
  .security-list article { flex-wrap: wrap; }
  .security-list article > div { flex: 1; }
  .security-list .badge { margin-left: 37px; }
  .automation-row h2 { font-size: 14px; }
  .view { min-height: calc(100dvh - 197px); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Blue enterprise skin: shared across public and authenticated surfaces. */
.public-site { background: var(--bg); }
.landing-nav { box-shadow: 0 1px 0 #d9e2ef; }
.landing-brand strong, .hero-copy h1 { color: var(--text); }
.landing-brand strong span, .landing-nav nav a:hover, .text-button:hover { color: #1769e0; }
.brand-mark { background: #dbeafe; color: #1769e0; }
.eyebrow { color: #54708f; letter-spacing: .08em; }
.hero-section { background: #f7f9fc; }
.hero-product { border-color: #d7e3f3; box-shadow: 0 24px 60px #0b1f3a12; }
.product-metrics article { background: #f3f7fc; border-color: #e1eaf5; }
.primary { background: #1769e0; border-color: #1769e0; }
.primary:hover { background: #1258c3; }
.secondary { border-color: #cad7e7; color: #214d83; }
.secondary:hover { background: #eef5ff; }
.hero-copy p, .public-section p { color: #5f6f84; }
.value-grid, .public-card-grid article, .assurance-list, .operations-grid, .metrics,
.integration-card, .table-wrap, .ticket-list, .ticket-detail, .panel-form, .info-panel,
.deployment-main, .deployment-side, .empty-view { box-shadow: 0 8px 26px #0b1f3a08; }
.value-grid svg, .assurance-list svg, .text-link, .workflow-preview > div > svg,
.security-list article > svg { color: #1769e0; }
.public-steps span { background: #e5efff; color: #1457b9; }
.conversion-section { background: #0b1f3a; box-shadow: 0 16px 36px #0b1f3a22; }
.conversion-section .eyebrow { color: #9ec5ff; }
.conversion-section .secondary { color: #fff; border-color: #7899c7; }
.sidebar { background: #0b1f3a; }
.brand strong span { color: #8fc2ff; }
.workspace-label { border-color: #294b75; background: #102b4e; }
.workspace-avatar { background: #1b4777; color: #d8eaff; }
.nav-label, .sidebar-bottom p, .sidebar-footer div > span { color: #91a9c5; }
.nav-item svg { color: #8eabd0; }
.nav-item:hover { background: #12345c; }
.nav-item.active { background: #1a4f8b; color: #fff; }
.nav-item.active svg { color: #b9d7ff; }
.nav-count { background: #23558e; color: #d8eaff; }
.sidebar-bottom a, .sidebar-bottom .setup-status { color: #d8eaff; }
.sidebar-footer { border-color: #294b75; }
.avatar { background: #dbeafe; color: #164b8d; }
.topbar { box-shadow: 0 1px 0 #d9e2ef; }
.environment .small-dot { background: #d49a32; }
.setup-banner { background: #edf5ff; border-color: #d6e5f8; }
.setup-icon { background: #dcecff; color: #1769e0; }
.setup-banner strong, .setup-banner > a { color: #1b4e87; }
.metric-line.green, .green { background: #1769e0; }
.metric-line.blue, .blue { background: #4f91e8; }
.empty-icon { color: #1769e0; background: #edf4ff; }
.onboarding-list li > span { border-color: #cfe0f5; color: #1769e0; }
.onboarding-list a:hover strong { color: #1769e0; }
.whatsapp { background: #e7f0ff; color: #1769e0; }
.automation { background: #fff5df; color: #a46b00; }
.ready-badge { background: #e5efff; color: #1457b9; }
.service-list article > svg { color: #1769e0; }
.table-empty svg { color: #6da2e8; }
.dialog-note { background: #f1f6fc; color: #62748b; }
dialog::backdrop { background: #0b1f3a66; }
.toast { background: #edf5ff; border-color: #cfe0f5; color: #164b8d; }
.segmented button.active { background: #e5efff; color: #1457b9; }
input:focus, select:focus, textarea:focus { outline-color: #d7e8ff; border-color: #6da2e8; }
.ticket-card:hover, .ticket-card.active { background: #f1f6fd; }
code { background: #f1f6fc; border-color: #dce7f3; color: #214d83; }

/* PingPilot visual contract: blue-forward, precise enterprise SaaS. */
:root {
  --bg: #f5f8fc;
  --text: #10233f;
  --muted: #66778e;
  --line: #dce5f0;
  --accent: #155fce;
  --sidebar: #0b1d35;
}
body { background: var(--bg); }
.landing-nav {
  background: rgb(255 255 255 / 94%);
  border-bottom-color: #dbe5f0;
  backdrop-filter: blur(12px);
}
.landing-nav nav { color: #52647a; }
.text-button { color: #29425f; }
.hero-section {
  min-height: calc(100dvh - 76px);
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
  border-bottom: 1px solid #dfe8f3;
}
.hero-copy { max-width: 640px; }
.hero-copy h1 { font-size: clamp(42px, 4.1vw, 62px); letter-spacing: 0; }
.hero-copy p { max-width: 590px; color: #566a83; }
.proof-row { color: #50647c; }
.proof-row span { padding-right: 16px; border-right: 1px solid #d9e3ef; }
.proof-row span:last-child { border-right: 0; padding-right: 0; }
.hero-product {
  border-color: #cfddec;
  border-radius: 8px;
  box-shadow: 0 22px 55px rgb(25 72 125 / 13%);
}
.product-top { color: #59708a; }
.product-top b, .amber-badge, .service-list b {
  background: #fff3db;
  color: #986300;
}
.product-metrics article { background: #f7faff; border-color: #dce8f6; }
.product-metrics small, .product-metrics span { color: #73849a; }
.conversation-panel p { color: #405a77; }
.public-section { border-top-color: #dce5f0; }
.public-section h2 { color: #10233f; }
.value-grid, .assurance-list { border-color: #dbe5f0; }
.value-grid article { border-color: #dbe5f0; }
.value-grid svg, .assurance-list svg { color: #155fce; }
.value-grid span, .assurance-list li { color: #5c6f86; }
.public-card-grid article {
  border-color: #d6e2f0;
  box-shadow: 0 8px 24px rgb(35 84 139 / 7%);
}
.public-card-grid h3 { color: #183552; }
.pilot-section { background: #fafdff; }
.public-steps { border-color: #d9e5f1; }
.public-steps li { border-color: #d9e5f1; }
.public-steps small { color: #657891; }
.conversion-section { background: #102a4a; border: 1px solid #193b65; }
.conversion-section p { color: #ccd9e9; }
.conversion-section .secondary:hover { background: #173b67; }
.landing-footer { border-top-color: #dce5f0; color: #6c7d92; }
.sidebar { background: #0b1d35; }
.workspace-label { border-color: #28496f; background: #102945; }
.workspace-avatar { background: #1c518e; color: #e7f1ff; }
.workspace-label strong { color: #f1f6ff; }
.workspace-label div > span { color: #a1b6d0; }
.nav-label, .sidebar-bottom p, .sidebar-footer div > span { color: #8da7c5; }
.nav-item svg { color: #9db7d7; }
.nav-item:hover { background: #112f54; }
.nav-item.active { background: #195fae; box-shadow: inset 3px 0 0 #80b5ff; }
.nav-item.active svg { color: #e6f1ff; }
.nav-count { background: #2e70b7; color: #edf6ff; }
.sidebar-bottom .setup-status, .sidebar-bottom a { color: #d9eaff; }
.small-dot { background: #58a2ff; }
.sidebar-footer { border-color: #28496f; }
.avatar { background: #d8e9ff; color: #10477f; }
.topbar { border-bottom-color: #dce5f0; }
.breadcrumb strong { color: #193653; }
.environment { color: #63758c; }
.eyebrow { color: #52729a; }
.primary { background: #155fce; border-color: #155fce; box-shadow: 0 5px 12px rgb(21 95 206 / 17%); }
.primary:hover { background: #104fae; }
.secondary { border-color: #c8d8ea; color: #1d4d86; }
.secondary:hover { background: #edf5ff; }
.setup-banner { background: #edf5ff; border-color: #cfe0f4; }
.setup-icon { background: #d9eaff; color: #155fce; }
.setup-banner strong, .setup-banner > a { color: #174c87; }
.setup-banner p { color: #5d7693; }
.metrics, .operations-grid, .integration-card, .ticket-list, .ticket-detail,
.panel-form, .info-panel, .deployment-main, .deployment-side, .empty-view,
.table-wrap, .feature-note { border-color: #dbe5f0; }
.metric + .metric, .checklist-section { border-color: #dbe5f0; }
.metric-label, .metric > span, .muted-label { color: #687a91; }
.metric-line.green, .green { background: #155fce; }
.metric-line.blue, .blue { background: #61a1ef; }
.empty-icon { color: #155fce; background: #eaf3ff; }
.chart-grid span { border-color: #dfe8f2; }
.onboarding-list li > span { border-color: #c9ddf4; color: #155fce; }
.onboarding-list a:hover strong, .text-link { color: #155fce; }
.whatsapp { background: #e8f2ff; color: #155fce; }
.email { background: #eef4ff; color: #3a78c4; }
.automation { background: #fff3dc; color: #a16c09; }
.badge { background: #f0f4f9; color: #607287; }
.ready-badge, .service-list b.ready { background: #e6f1ff; color: #145bbd; }
.service-list article > svg, .security-list article > svg, .plain-list svg { color: #155fce; }
.icon-button { color: #5e7087; }
.icon-button:hover { background: #eaf2fb; }
.search-field, input, select, textarea { border-color: #cfdbea; }
label { color: #5d6f85; }
input:focus, select:focus, textarea:focus { outline-color: #d7e8ff; border-color: #5e9ced; }
.ticket-card { border-color: #e2e9f1; }
.ticket-card:hover, .ticket-card.active { background: #edf5ff; }
.ticket-meta b { color: #1d5fa9; }
.step-state { background: #eff5fc; color: #6683a4; }
.plain-list li, .deployment-steps li, .service-list, .service-list article { border-color: #e1e8f1; }
dialog { border-color: #cbd9ea; box-shadow: 0 25px 80px rgb(9 36 70 / 20%); }
dialog::backdrop { background: rgb(5 22 42 / 56%); }
.dialog-note { background: #eef5fd; color: #506b87; }
.toast { background: #edf5ff; border-color: #c5dcf7; color: #194f8d; box-shadow: 0 18px 45px rgb(20 75 136 / 14%); }

@media (max-width: 650px) {
  .proof-row span { border-right: 0; padding-right: 0; }
  .hero-section { background: #f7faff; }
}

.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #dbeafe; color: #155fce; font-size: 17px; font-weight: 800; line-height: 1; }
.landing-brand strong, .brand strong { display: block; color: #10233f; font-size: 23px; font-weight: 720; letter-spacing: 0; }
.landing-brand strong span { color: #155fce; }
.sidebar .brand-symbol { background: #dbeafe; color: #155fce; }
.sidebar .brand strong { color: #fff; }
.sidebar .brand strong span { color: #8fc2ff; }
@media (max-width: 650px) {
  .landing-brand strong { font-size: 20px; }
  .brand-symbol { width: 31px; height: 31px; }
}
.avatar-button { border: 0; padding: 0; cursor: pointer; appearance: none; font: inherit; }
.avatar-button:focus-visible { outline: 2px solid #4c9aff; outline-offset: 3px; }
.brand-image-lockup { width: 214px; height: 52px; object-fit: contain; object-position: left center; background: transparent; border-radius: 0; }
.sidebar .brand-image-lockup { width: 178px; height: 44px; filter: none; }
@media (max-width: 650px) {
  .landing-brand .brand-image-lockup { width: 168px; height: 42px; }
  .sidebar .brand-image-lockup { width: 158px; height: 40px; filter: none; }
}
.account-grid { align-items: start; }
.account-identity { display: flex; align-items: center; gap: 14px; padding: 6px 0 24px; border-bottom: 1px solid var(--line); }
.account-identity strong, .account-identity span { display: block; }
.account-identity span:not(.avatar) { color: var(--muted); font-size: 12px; margin-top: 4px; }
.large-avatar { width: 44px; height: 44px; font-size: 14px; }
.account-details { display: grid; gap: 0; margin: 0; }
.account-details div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.account-details dt { color: var(--muted); font-size: 12px; }
.account-details dd { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.account-profile .button { margin-top: 22px; }
.account-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.account-actions .button { margin: 0; }
.account-actions .danger { border-color: #efcaca; color: #a43c3c; background: #fff8f8; }
.account-actions .danger:hover { background: #fff0f0; }
.privacy-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 18px; max-width: 560px; }
.account-identity .avatar { flex: 0 0 auto; }
@media (min-width: 1181px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; height: 100dvh; z-index: 10; }
  .workspace { margin-left: 238px; }
}
@media (min-width: 651px) and (max-width: 1180px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 210px; height: 100dvh; z-index: 10; }
  .workspace { margin-left: 210px; }
}
.sidebar { background: #ffffff; color: #193653; border-right: 1px solid #dbe5f0; align-self: start; overflow-y: auto; overflow-x: hidden; }
.sidebar .brand-image-lockup { background: transparent; }
.workspace-label { background: #f5f9ff; border-color: #d6e3f2; }
.workspace-label strong { color: #193653; }
.workspace-label div > span, .nav-label, .sidebar-bottom p, .sidebar-footer div > span { color: #71849a; }
.workspace-avatar { background: #e5f0ff; color: #155fce; }
.workspace-select-field { display: flex; min-width: 0; flex: 1; gap: 3px; }
.workspace-select-field select { min-width: 0; min-height: 25px; padding: 2px 18px 2px 0; border: 0; border-radius: 0; background: transparent; color: #193653; font-size: 12px; font-weight: 600; }
.workspace-select-field select:focus { outline: 2px solid #b8d2f4; outline-offset: 1px; }
.workspace-select-field select:disabled { opacity: 1; color: #193653; cursor: default; }
.workspace-select-field > span { display: block; color: #71849a; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item { color: #38516c; }
.nav-item svg { color: #6e89a6; }
.nav-item:hover { background: #f0f6fd; }
.nav-item.active { background: #155fce; color: #fff; box-shadow: inset 3px 0 0 #0d4ea9; }
.nav-item.active svg { color: #fff; }
.nav-count { background: #dbeafe; color: #155fce; }
.management-label { color: #71849a; }
.sidebar-bottom .setup-status, .sidebar-bottom a { color: #38516c; }
.sidebar-footer { border-color: #dbe5f0; }
.sidebar-footer strong { color: #193653; }
.avatar { background: #dbeafe; color: #155fce; }

/* Give the operational navigation enough room for labels and the brand lockup. */
@media (min-width: 1181px) {
  .sidebar { width: 272px; }
  .workspace { margin-left: 272px; }
}

@media (min-width: 651px) and (max-width: 1180px) {
  .sidebar { width: 252px; }
  .workspace { margin-left: 252px; }
}


/* conversion-cta-contrast-fix */
.conversion-section,
.conversion-section h2,
.conversion-section p,
.conversion-section .eyebrow {
  color: #ffffff;
}
.conversion-section h2 { color: #ffffff !important; }
.conversion-section p { color: #d7e4f5 !important; }
.conversion-section .eyebrow { color: #9ec5ff !important; }
.conversion-section .secondary {
  color: #ffffff;
  border-color: #7899c7;
  background: transparent;
}



/* ===== Inbox denser layout ===== */
#inbox .page-heading { margin-bottom: 14px; gap: 12px; }
#inbox .page-heading h1 { font-size: 22px; }
#inbox .page-heading p { margin-top: 4px; font-size: 12px; max-width: 46ch; }
#inbox .toolbar { margin-bottom: 12px; gap: 10px; }
#inbox .segmented button { min-height: 28px; padding: 0 10px; font-size: 11px; }

.ticket-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: calc(100vh - 210px);
}

.ticket-list,
.ticket-detail {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 0;
}

.ticket-list {
  overflow: auto;
  max-height: calc(100vh - 210px);
}

.ticket-card {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.ticket-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ticket-card-top b { font-size: 11px; color: #64748b; font-weight: 600; }
.ticket-card strong {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #0f172a;
}
.ticket-card-sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-status {
  display: inline-flex;
  margin: 0;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #9a6b2f;
  background: #fff7ed;
  border-radius: 999px;
  padding: 3px 7px;
}
.ticket-card.active { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
.ticket-card:hover { background: #f8fafc; }
.ticket-card.active:hover { background: #eff6ff; }

.ticket-detail {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: calc(100vh - 210px);
  max-height: calc(100vh - 210px);
  overflow: hidden;
}
.ticket-detail-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.ticket-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.ticket-detail-title { min-width: 0; flex: 1; }
.ticket-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ticket-detail-header h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}
.ticket-detail-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.ticket-detail-summary {
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: #475569;
  border-bottom: 1px solid #eef2f7;
  max-height: 3.2em;
  overflow: hidden;
}
.detail-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.button.compact { min-height: 30px; padding: 0 10px; font-size: 12px; }
.badge.soft-badge { background: #f1f5f9; color: #475569; }

.ticket-chat {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #f8fafc;
  min-height: 0;
  max-height: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  gap: 8px;
}
.chat-bubble {
  max-width: min(78%, 680px);
  padding: 8px 10px;
  border-radius: 12px;
  box-shadow: none;
}
.chat-bubble header { margin-bottom: 4px; }
.chat-bubble header strong { font-size: 10px; }
.chat-bubble p { font-size: 12.5px; line-height: 1.4; }
.chat-empty { padding: 20px 12px; font-size: 12px; }
.chat-composer {
  padding: 10px 12px;
  gap: 8px;
}
.chat-composer textarea {
  min-height: 56px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.chat-composer-actions small { font-size: 11px; max-width: 65%; }

@media (max-width: 960px) {
  .ticket-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ticket-list,
  .ticket-detail {
    max-height: none;
    min-height: auto;
  }
  .ticket-detail { min-height: 60vh; }
  .ticket-detail-header { flex-direction: column; }
  .detail-actions { justify-content: flex-start; }
}

/* class aliases for denser inbox */
.ticket-detail-shell { display:flex; flex-direction:column; min-height:0; height:100%; }
.detail-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.badge.soft-badge, .soft-badge { background:#f1f5f9; color:#475569; }
.ticket-card-sub { display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket-status { display:inline-flex; margin:0; font-style:normal; font-size:10px; font-weight:600; color:#9a6b2f; background:#fff7ed; border-radius:999px; padding:3px 7px; }
.button.compact { min-height:30px; padding:0 10px; font-size:12px; }

.ticket-detail-shell > .ticket-chat { flex: 1; min-height: 0; }
.ticket-detail .permission-note { padding: 0 16px 10px; font-size: 12px; color: var(--muted); }



/* inbox full width fix */
#inbox { width: 100%; max-width: none; }
#inbox .ticket-layout { width: 100%; }
#inbox .ticket-detail,
#inbox .ticket-list { width: 100%; min-width: 0; }
#inbox .chat-bubble { max-width: min(78%, 680px); }


/* Fix: keep main workspace in the right grid column */
.app-shell > .sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
}
.app-shell > .topbar {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.app-shell > .page-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 22px 28px;
  box-sizing: border-box;
}
#inbox {
  width: 100%;
  max-width: none;
}
#inbox .ticket-layout {
  width: 100%;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  min-height: calc(100vh - 170px);
}
#inbox .ticket-list,
#inbox .ticket-detail {
  width: 100%;
  min-width: 0;
}
#inbox .ticket-detail {
  max-height: calc(100vh - 170px);
}
#inbox .ticket-list {
  max-height: calc(100vh - 170px);
}
#inbox .chat-bubble {
  max-width: min(75%, 720px);
}



/* ===== Inbox layout repair (final) ===== */
#client-app.app-shell {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}
#client-app.app-shell > .sidebar {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
}
#client-app.app-shell > .topbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100%;
  min-width: 0;
}
#client-app.app-shell > .page-content {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 18px 20px !important;
  min-width: 0;
  overflow: auto;
}

#inbox.view,
#inbox {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 120px);
}

#inbox .page-heading {
  margin-bottom: 0;
  padding-bottom: 8px;
}
#inbox .page-heading h1 { font-size: 22px; }
#inbox .page-heading p { margin-top: 2px; font-size: 12px; max-width: none; }
#inbox .toolbar { margin-bottom: 0; }

#inbox .ticket-layout {
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  flex: 1;
  min-height: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

#inbox .ticket-list,
#inbox .ticket-detail {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: #fff !important;
  overflow: hidden;
}

#inbox .ticket-list {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 170px);
  overflow: auto;
}

#inbox .ticket-detail {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  max-height: calc(100vh - 170px);
  min-height: calc(100vh - 170px);
}

#inbox .ticket-detail-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

#inbox .ticket-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
#inbox .ticket-detail-title { min-width: 0; flex: 1 1 auto; }
#inbox .ticket-detail-header h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  max-width: none !important;
}
#inbox .ticket-detail-meta,
#inbox .ticket-detail-summary {
  max-width: none !important;
}
#inbox .ticket-detail-summary {
  padding: 8px 14px;
  margin: 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 12px;
  color: #475569;
  flex: 0 0 auto;
}
#inbox .detail-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

#inbox .ticket-chat {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  overflow: hidden;
}

#inbox .chat-thread {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  gap: 8px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

#inbox .chat-bubble {
  display: block;
  max-width: min(78%, 680px) !important;
  width: fit-content;
  box-sizing: border-box;
}
#inbox .chat-bubble.inbound { align-self: flex-start; }
#inbox .chat-bubble.outbound { align-self: flex-end; }

#inbox .chat-composer {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

#inbox .chat-composer textarea,
#inbox .chat-composer input,
#inbox .chat-composer .button {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#inbox .chat-composer textarea {
  display: block !important;
  min-height: 72px !important;
  resize: none !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font: inherit !important;
}

#inbox .chat-composer-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}
#inbox .chat-composer-actions small {
  flex: 1 1 auto;
  max-width: none !important;
  color: #64748b;
  font-size: 12px;
}
#inbox .chat-composer-actions .button {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 96px;
}

#inbox .ticket-detail p {
  max-width: none !important;
}

@media (max-width: 980px) {
  #inbox .ticket-layout {
    grid-template-columns: 1fr !important;
  }
  #inbox .ticket-list,
  #inbox .ticket-detail {
    max-height: none;
    min-height: auto;
  }
}



/* ===== Shell density: sidebar + content sem vão ===== */
#client-app.app-shell {
  display: grid !important;
  grid-template-columns: 232px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100%;
  max-width: 100%;
}
#client-app.app-shell > .sidebar {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: 232px !important;
  max-width: 232px !important;
  height: 100dvh;
}
#client-app.app-shell > .workspace {
  grid-column: 2 !important;
  grid-row: 1 / -1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
#client-app .topbar {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
#client-app .page-content {
  margin: 0 !important;
  margin-left: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 16px 18px 28px !important;
}
#client-app .page-heading {
  margin-bottom: 14px !important;
}
#client-app .page-heading p {
  max-width: 62ch !important;
}
@media (min-width: 651px) and (max-width: 1180px) {
  #client-app.app-shell {
    grid-template-columns: 216px minmax(0, 1fr) !important;
  }
  #client-app.app-shell > .sidebar {
    width: 216px !important;
    max-width: 216px !important;
  }
  #client-app.app-shell > .workspace {
    margin-left: 0 !important;
  }
}
@media (max-width: 650px) {
  #client-app.app-shell {
    display: block !important;
  }
  #client-app.app-shell > .workspace {
    margin-left: 0 !important;
  }
}



/* ===== Ticket pane fill (no phantom gap) ===== */
#inbox.view,
#inbox {
  width: 100% !important;
  max-width: none !important;
}
#inbox .ticket-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
#inbox .ticket-list,
#inbox .ticket-detail {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}
#inbox .ticket-detail,
#inbox .ticket-detail-shell,
#inbox .ticket-chat,
#inbox .chat-thread,
#inbox .chat-composer {
  width: 100% !important;
  max-width: none !important;
}
#inbox .chat-bubble {
  max-width: min(85%, 720px) !important;
}
#client-app .page-content {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
#client-app.app-shell > .workspace {
  margin-left: 0 !important;
}



/* ===== Production UI polish ===== */
#client-app.app-shell {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --sidebar-width: 248px;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

#client-app.app-shell {
  display: grid !important;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
}

#client-app.app-shell > .workspace {
  margin-left: 0 !important;
  min-width: 0 !important;
  background: var(--bg);
}

#client-app .sidebar {
  background: #fff !important;
  border-right: 1px solid var(--line) !important;
}

#client-app .nav-item {
  border-radius: 10px !important;
  font-weight: 500;
}

#client-app .nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

#client-app .topbar {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line) !important;
}

#client-app .page-content {
  padding: 22px 24px 36px !important;
  max-width: none !important;
  margin: 0 !important;
}

#client-app .page-heading h1,
#client-app .page-heading h1 {
  letter-spacing: -0.03em;
  font-weight: 700;
}

#client-app .panel,
#client-app .metric,
#client-app .channel-card,
#client-app .table-wrap,
#client-app .info-panel,
#client-app .panel-form,
#client-app .ticket-list,
#client-app .ticket-detail {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

#client-app .button.primary,
#client-app .primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

#client-app .button.secondary,
#client-app .secondary {
  border-radius: 10px !important;
}

#client-app input,
#client-app select,
#client-app textarea {
  border-radius: 10px !important;
  border-color: #dbe3ee !important;
}

/* Production chat (not WhatsApp) */
#inbox .ticket-chat {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: #f8fafc !important;
  background-image: none !important;
  border-top: 1px solid var(--line) !important;
}

#inbox .chat-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#inbox .chat-row { display: contents; }
#inbox .chat-avatar,
#inbox .chat-bubble-wrap,
#inbox .chat-meta,
#inbox .chat-author,
#inbox .chat-time { display: none !important; }

#inbox .chat-bubble {
  position: relative;
  display: block;
  width: fit-content;
  max-width: min(78%, 640px) !important;
  padding: 10px 12px 11px !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#inbox .chat-bubble::before,
#inbox .chat-bubble::after { display: none !important; content: none !important; }

#inbox .chat-bubble header {
  display: flex !important;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
#inbox .chat-bubble header strong {
  font-size: 11px;
  font-weight: 650;
  color: #475569;
}
#inbox .chat-bubble header time {
  font-size: 10.5px;
  color: #94a3b8;
}
#inbox .chat-bubble p {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #0f172a !important;
  white-space: pre-wrap;
  word-break: break-word;
}

#inbox .chat-bubble.inbound {
  align-self: flex-start;
  background: #fff !important;
}
#inbox .chat-bubble.outbound {
  align-self: flex-end;
  background: #eff6ff !important;
  border-color: #dbeafe !important;
}
#inbox .chat-bubble.outbound header strong { color: #1d4ed8; }
#inbox .chat-bubble.ai {
  align-self: flex-end;
  background: #f5f3ff !important;
  border-color: #e9e5ff !important;
}
#inbox .chat-bubble.ai header strong { color: #6d28d9; }

#inbox .chat-empty {
  margin: auto;
  color: #64748b;
  font-size: 13px;
  text-align: center;
  padding: 28px 12px;
  background: transparent !important;
  box-shadow: none !important;
}

#inbox .chat-composer {
  display: grid !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
}
#inbox .chat-composer-box { display: contents; }
#inbox .chat-composer textarea {
  width: 100% !important;
  min-height: 72px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: #fff !important;
  font: inherit;
  font-size: 13.5px !important;
  resize: none !important;
  box-shadow: none !important;
}
#inbox .chat-composer-actions {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#inbox .chat-composer-actions small { color: #94a3b8; font-size: 12px; }
#inbox .chat-send {
  display: none !important;
}
#inbox .chat-composer .button.primary {
  width: auto !important;
  min-width: 96px;
}

#inbox .ticket-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
  gap: 14px !important;
}
#inbox .ticket-list,
#inbox .ticket-detail {
  overflow: hidden;
}

#client-app .badge {
  border-radius: 999px !important;
  font-weight: 600;
}


/* ===== Agent messages visibility fix ===== */
#inbox .chat-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#inbox .chat-bubble {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#inbox .chat-bubble.inbound { align-self: flex-start !important; }
#inbox .chat-bubble.outbound,
#inbox .chat-bubble.ai { align-self: flex-end !important; }
#inbox .chat-bubble header { display: flex !important; }


/* ===== Chat composer: no resize ===== */
#inbox .chat-composer textarea,
#inbox textarea[name="body"],
.ticket-chat .chat-composer textarea,
.chat-composer textarea {
  resize: none !important;
}


/* ===== Force agent bubbles visible ===== */
#ticket-chat-thread,
.ticket-chat .chat-thread,
#inbox .chat-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#ticket-chat-thread .chat-bubble,
.ticket-chat .chat-bubble,
#inbox .chat-bubble {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: min(85%, 560px);
}
#ticket-chat-thread .chat-bubble.inbound,
.ticket-chat .chat-bubble.inbound,
#inbox .chat-bubble.inbound { align-self: flex-start !important; }
#ticket-chat-thread .chat-bubble.outbound,
#ticket-chat-thread .chat-bubble.ai,
.ticket-chat .chat-bubble.outbound,
.ticket-chat .chat-bubble.ai,
#inbox .chat-bubble.outbound,
#inbox .chat-bubble.ai {
  align-self: flex-end !important;
  background: #eff6ff !important;
}


/* ===== Agent bubbles must always show ===== */
#ticket-chat-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
}
#ticket-chat-thread .chat-bubble {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}
#ticket-chat-thread .chat-bubble.outbound,
#ticket-chat-thread .chat-bubble.ai {
  align-self: flex-end !important;
  margin-left: auto !important;
  background: #eff6ff !important;
}
#ticket-chat-thread .chat-bubble.inbound {
  align-self: flex-start !important;
  margin-right: auto !important;
}