.official {
  background: linear-gradient(100deg, #182b31, var(--panel));
  border-color: #315765;
}
.leader {
  background: linear-gradient(100deg, #27261a, var(--panel));
  border-color: #514d32;
}
.official-channel { background: #173945; color: #73dff1; }
.leader-channel { background: #403a1b; color: #ffe187; }
.tags i.official-tag { background: #73dff120; color: #73dff1; }
.tags i.leader-tag { background: #ffe18720; color: #ffe187; }
.lead-alert {
  width: 100%; margin-top: 12px; padding: 13px 14px; border-radius: 16px;
  border: 1px solid #66883e; background: linear-gradient(110deg, #1c321d, #102019);
  color: white; display: flex; align-items: center; gap: 11px; text-align: left;
}
.lead-alert .ai-spark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--lime); color: #07110f; }
.lead-alert span:nth-child(2) { flex: 1; }
.lead-alert small, .lead-alert b { display: block; }
.lead-alert small { color: var(--lime); font-size: 9px; margin-bottom: 3px; }
.lead-alert b { font-size: 13px; }
.lead-alert > span:last-child { color: var(--lime); font-size: 11px; }
.filters { display: flex; gap: 7px; margin: -4px 0 11px; }
.filters button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 16px; padding: 6px 12px; font-size: 11px; }
.filters button.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.conversation[hidden] { display: none; }
.summary-sheet { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; border-top: 1px solid #4e7040; background: #101d19; box-shadow: 0 -20px 60px #000a; transform: translateY(105%); transition: transform .25s ease; }
.summary-sheet.show { transform: translateY(0); }
.summary-sheet header { display: flex; justify-content: space-between; align-items: start; }
.summary-sheet header small { color: var(--lime); font-size: 10px; }
.summary-sheet header h2 { margin: 3px 0 12px; font-size: 20px; }
.summary-sheet header button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #192824; color: white; font-size: 20px; }
.intent-row { display: flex; justify-content: space-between; padding: 11px 13px; border-radius: 13px; background: #b8f15a12; color: var(--lime); font-size: 12px; }
.summary-sheet dl { margin: 10px 0; }
.summary-sheet dl div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.summary-sheet dt { color: var(--muted); font-size: 11px; }
.summary-sheet dd { margin: 0; font-size: 12px; line-height: 1.45; }
.next-action { margin-top: 13px; padding: 13px; border-radius: 15px; background: #1a2e20; }
.next-action small { color: var(--lime); font-size: 9px; }
.next-action p { margin: 5px 0 11px; font-size: 12px; }
.next-action button { width: 100%; border: 0; border-radius: 11px; padding: 10px; background: var(--lime); color: #07110f; font-weight: 800; }
.summary-note { margin: 11px 0 0; text-align: center; color: var(--muted); font-size: 9px; }
.workspace-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px 4px; }
.workspace-head h1 { margin: 0; font-size: 25px; }
.workspace-head h1 small { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--lime); color: var(--bg); font-size: 10px; vertical-align: 4px; }
.compact-status { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 16px; color: #bcd0c8; font-size: 11px; }
.compact-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.compact-status input, .compact-status span { display: none; }
.workspace-head + .lead-alert { margin-top: 10px; padding: 10px 12px; }
.workspace-head + .lead-alert .ai-spark { width: 30px; height: 30px; }
.workspace-head ~ .section-head { margin-top: 18px; }
.profile-page { padding-top: 20px; }
.profile-title { display: flex; align-items: center; gap: 13px; padding: 8px 2px 14px; }
.profile-title h1 { margin: 0; font-size: 24px; }
.profile-title small { color: var(--muted); font-size: 11px; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.profile-stats article { position: relative; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.profile-stats span { display: block; color: var(--muted); font-size: 10px; }
.profile-stats strong { display: block; margin-top: 4px; font-size: 22px; }
.profile-stats small { position: absolute; right: 12px; bottom: 14px; color: var(--lime); font-size: 9px; }
.stats-rule { margin: -3px 2px 11px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.personal-entry { display: flex; gap: 13px; align-items: center; padding: 13px; border: 1px solid #355046; border-radius: 16px; background: linear-gradient(120deg,#11251f,#0d1916); }
.qr-code { position: relative; flex: 0 0 78px; height: 78px; border: 7px solid white; border-radius: 8px; background: repeating-conic-gradient(#07110f 0 25%,white 0 50%) 0 0/14px 14px; overflow: hidden; }
.qr-code span { position: absolute; inset: 21px; display: grid; place-items: center; background: var(--lime); color: var(--bg); border: 3px solid white; font-size: 10px; font-weight: 900; z-index: 2; }
.qr-code i,.qr-code b,.qr-code em { position: absolute; width: 17px; height: 17px; border: 4px solid #07110f; background: white; }
.qr-code i { left: 1px; top: 1px; }.qr-code b { right: 1px; top: 1px; }.qr-code em { left: 1px; bottom: 1px; }
.entry-copy { min-width: 0; flex: 1; }
.entry-copy h3 { margin: 0 0 4px; font-size: 14px; }
.entry-copy > p:not(.eyebrow) { margin: 0 0 9px; color: #a9beb5; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.entry-copy div { display: flex; gap: 6px; }
.entry-copy button { border: 1px solid #4a665b; border-radius: 9px; padding: 6px 9px; background: #172721; color: white; font-size: 9px; }
.topbar { height: 52px; }
.inbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 0 10px; }
.inbox-bar h1 { margin: 0; font-size: 22px; }
.inbox-bar h1 small { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--bg); font-size: 9px; vertical-align: 3px; }
.inbox-bar .filters { margin: 0; }
.inbox-bar .filters button { padding: 5px 10px; }
.bottom-nav { justify-content: space-around; }
.bottom-nav > button { width: 42%; }
.new-customers { margin-top: 5px; border: 1px solid var(--line); border-radius: 14px; background: #0d1a17; overflow: hidden; }
.new-customers-toggle { width: 100%; min-height: 42px; padding: 8px 12px; border: 0; background: transparent; color: white; display: flex; align-items: center; gap: 9px; text-align: left; }
.new-customers-toggle > span { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.new-customers-toggle i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #b8f15a14; }
.new-customers-toggle b { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: var(--lime); color: var(--bg); font-size: 10px; }
.new-customers-toggle em { color: var(--muted); font-style: normal; transition: transform .2s; }
.new-customers-toggle[aria-expanded="true"] em { transform: rotate(180deg); }
.new-customers-list { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(-8px); border-top: 1px solid transparent; transition: max-height .42s cubic-bezier(.2,.85,.25,1), opacity .2s ease, transform .42s cubic-bezier(.2,.85,.25,1), border-color .2s ease; }
.new-customers-list.open { max-height: 240px; opacity: 1; pointer-events: auto; transform: translateY(0); border-color: var(--line); }
.waiting-customer { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: white; display: flex; align-items: center; gap: 10px; text-align: left; }
.waiting-customer:last-child { border-bottom: 0; }
.waiting-customer .channel { flex-basis: 35px; height: 35px; border-radius: 11px; }
.waiting-customer > span:last-child { min-width: 0; }
.waiting-customer b, .waiting-customer small, .waiting-customer em { display: block; }
.waiting-customer b { font-size: 12px; }
.waiting-customer small { margin-top: 2px; color: #bdcec8; font-size: 10px; }
.waiting-customer em { margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.waiting-customer > span:nth-child(2) { flex: 1; }
.claim-btn { border: 1px solid #719746; border-radius: 10px; background: #b8f15a12; color: var(--lime); padding: 7px 9px; font-size: 10px; font-weight: 800; }
:root { --spring: cubic-bezier(.18,.89,.32,1.18); --smooth: cubic-bezier(.22,.75,.24,1); }
button, [role="button"] { -webkit-tap-highlight-color: transparent; transition: transform .16s var(--spring), background-color .2s ease, border-color .2s ease, opacity .2s ease; }
button:active, [role="button"]:active { transform: scale(.965); }
.conversation { transition: transform .24s var(--spring), opacity .2s ease, background-color .2s ease, border-color .2s ease; }
.conversation:hover { transform: translateY(-1px); }
.summary-sheet { transition: transform .36s var(--spring); }
dialog[open] { animation: dialog-in .28s var(--spring); }
dialog::backdrop { animation: backdrop-in .2s ease both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
#homePage, #profilePage { transition: opacity .18s ease, transform .28s var(--smooth); }
.page-enter { opacity: 0; transform: translateX(18px); }
.page-leave { opacity: 0; transform: translateX(-14px); }
.messages, .customer-strip, .quick-replies, .app-shell { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.pin-lock { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 70% 0,#16372c,transparent 32%),#07110f; color: white; padding: max(24px,env(safe-area-inset-top)) 24px max(18px,env(safe-area-inset-bottom)); transition: opacity .3s ease, transform .42s var(--smooth); }
.pin-lock.unlocked { opacity: 0; transform: translateY(-20px) scale(1.02); pointer-events: none; }
.lock-brand { align-self: flex-start; display: flex; align-items: center; gap: 9px; font-size: 15px; }
.lock-brand b { color: var(--lime); }
.lock-copy { margin-top: clamp(55px,10vh,90px); text-align: center; }
.lock-icon { width: 54px; height: 54px; margin: auto auto 18px; display: grid; place-items: center; border: 1px solid #426054; border-radius: 18px; background: #10231d; color: var(--lime); font-size: 27px; }
.lock-copy h1 { margin: 0 0 8px; font-size: 24px; }
.lock-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.pin-dots { display: flex; gap: 14px; margin: 29px 0 8px; }
.pin-dots i { width: 12px; height: 12px; border: 1px solid #627870; border-radius: 50%; transition: transform .2s var(--spring), background .2s ease; }
.pin-dots i.filled { background: var(--lime); border-color: var(--lime); transform: scale(1.12); }
.pin-dots.shake { animation: pin-shake .38s var(--smooth); }
.pin-error { height: 18px; margin: 2px 0 8px; color: #ff8d83; font-size: 11px; }
.pin-pad { width: min(100%,300px); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px 18px; }
.pin-pad button { height: 54px; border: 1px solid #263b34; border-radius: 18px; background: #0d1c18; color: white; font-size: 20px; }
.pin-pad button:active { background: #1c332a; transform: scale(.92); }
.pin-pad button:disabled { opacity: .32; cursor: not-allowed; }
.conversation:focus-visible, [role="button"]:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.managed-note { margin-top: auto; color: #61776f; font-size: 10px; }
@keyframes pin-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 50%{transform:translateX(8px)} 75%{transform:translateX(-5px)} }
.ai-reception { position: absolute; left: 0; right: 0; bottom: 65px; min-height: 58px; padding: 8px 13px; border-top: 1px solid #2d493d; background: #0f201aee; backdrop-filter: blur(14px); display: flex; align-items: center; gap: 8px; }
.ai-reception > button { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 0; background: none; color: white; text-align: left; }
.ai-live { flex: 0 0 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: var(--bg); box-shadow: 0 0 0 0 #b8f15a55; animation: ai-pulse 2.2s ease-out infinite; }
.ai-reception b,.ai-reception small { display: block; }
.ai-reception b { font-size: 11px; }.ai-reception small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.ai-switch input { display: none; }.ai-switch span { position: relative; display: block; width: 38px; height: 23px; border-radius: 15px; background: #34453f; transition: background .25s ease; }
.ai-switch span::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:white; transition: transform .3s var(--spring); }
.ai-switch input:checked + span { background: var(--lime); }.ai-switch input:checked + span::after { transform: translateX(15px); background: var(--bg); }
.ai-message { border: 1px solid #45633d; background: linear-gradient(135deg,#213923,#20352a); }
.ai-message small:first-child { color: var(--lime); margin: 0 0 6px; }
.messages { padding-bottom: 150px; }
@keyframes ai-pulse { 0%{box-shadow:0 0 0 0 #b8f15a55} 70%{box-shadow:0 0 0 8px #b8f15a00} 100%{box-shadow:0 0 0 0 #b8f15a00} }
.agent-profile { margin-top: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); overflow: hidden; }
.agent-profile summary { list-style: none; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.agent-profile summary::-webkit-details-marker { display: none; }
.agent-profile summary > span { display: flex; align-items: center; gap: 10px; }
.agent-profile summary i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: #b8f15a16; color: var(--lime); font-style: normal; }
.agent-profile summary b,.agent-profile summary small { display: block; }.agent-profile summary b { font-size: 12px; }.agent-profile summary small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.agent-profile summary em { color: var(--lime); font-size: 10px; font-style: normal; }
.agent-profile-body { padding: 0 13px 13px; animation: profile-open .3s var(--smooth); }
.agent-profile-body label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.agent-profile-body input,.agent-profile-body select,.agent-profile-body textarea { width: 100%; margin-top: 5px; border: 1px solid #30463e; border-radius: 10px; background: #091510; color: white; padding: 9px; font: inherit; font-size: 10px; outline: none; }
.agent-profile-body textarea { height: 78px; resize: vertical; line-height: 1.5; }.agent-profile-body textarea.short { height: 62px; }
.agent-profile-body input:focus,.agent-profile-body select:focus,.agent-profile-body textarea:focus { border-color: #6c9543; box-shadow: 0 0 0 3px #b8f15a10; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.form-row.three { grid-template-columns: 1.2fr 1fr .7fr; }
.time-range { display: flex; align-items: center; gap: 5px; }.time-range input { min-width: 0; }.time-range i { color: var(--muted); font-size: 9px; font-style: normal; }
.profile-editor-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.profile-editor-foot span { color: var(--muted); font-size: 9px; }.profile-editor-foot button { border: 0; border-radius: 10px; padding: 8px 13px; background: var(--lime); color: var(--bg); font-size: 10px; font-weight: 800; }
.profile-editor-foot .over-limit { color: #ff8d83; }
@keyframes profile-open { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.lead-score { cursor: pointer; }
.customer-preview { width: min(calc(100% - 32px), 420px); height: auto; min-height: 0; margin: auto; padding: 18px; border: 1px solid #42634c; border-radius: 22px; background: #101d19; color: white; }
.customer-preview::backdrop { background: #000a; backdrop-filter: blur(3px); }
.customer-preview header { display: flex; align-items: center; gap: 10px; }
.customer-preview header div { flex: 1; }
.customer-preview header small { color: var(--lime); font-size: 9px; }
.customer-preview header h2 { margin: 2px 0 0; font-size: 19px; }
.customer-preview header > button { border: 0; background: none; color: white; font-size: 22px; }
.preview-score { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px; padding: 13px; border-radius: 13px; background: #b8f15a12; color: var(--lime); font-size: 12px; }
.preview-score strong { font-size: 22px; }
.customer-preview dl { margin: 0 0 15px; }
.customer-preview dl div { display: grid; grid-template-columns: 62px 1fr; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
.customer-preview dt { color: var(--muted); }
.customer-preview dd { margin: 0; }
.open-chat { width: 100%; border: 0; border-radius: 12px; padding: 12px; background: var(--lime); color: var(--bg); font-weight: 800; }