/* Live (database-driven) customer workspace */
.sidebar{overflow-y:auto}
.live-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 16px}
.live-empty>svg{width:40px;height:40px;color:var(--muted)}
.live-empty h2{margin:6px 0 0}
.live-empty p{max-width:420px}
.metrics.two{grid-template-columns:repeat(2,1fr)}
.live-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.dashboard-actions a{min-height:72px;border-radius:10px;background:#f7f9fd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:12px;text-align:center;padding:8px}
.dashboard-actions a svg{color:var(--red)}
.setup-steps{display:flex;flex-direction:column;margin-top:12px}
.setup-step{display:grid;grid-template-columns:22px 1fr 18px;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-weight:600}
.setup-step svg{width:18px;height:18px;color:var(--muted)}
.setup-step.done{color:var(--muted);text-decoration:line-through}
.setup-step.done svg:first-child{color:var(--green)}
.ledger-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ledger-row small{color:var(--muted)}
.info-box{margin:10px 0}
.call-submit{margin-top:14px}
.tabs.chips[data-filter-group]{margin:0 0 10px}
.contact-row .unread{font-style:normal;background:var(--red);color:#fff;border-radius:10px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;font-weight:700}
.contact-row.selected{background:var(--pink)}

/* Chat */
.live-chat{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.live-chat .chat-list-panel{display:block;margin:0;border-radius:var(--radius)}
.live-chat .chat-list-panel .search{margin:10px 0}
.live-chat .chat-panel{margin:0;border-radius:var(--radius);display:flex;flex-direction:column;min-height:520px}
.live-chat .chat-top{grid-template-columns:auto auto 1fr auto}
.live-chat .chat-top h2{margin:0}.live-chat .chat-top p{margin:0}
.live-chat .chat-back{display:none}
.live-chat .messages{flex:1;min-height:380px;max-height:60vh;overflow-y:auto;margin:12px 0}
.chat-empty-note{text-align:center;margin:auto}
.bubble.failed p{outline:1px solid var(--red)}

/* Header user menu */
.user-menu{position:relative}
button.user{border:0;background:transparent;padding:0;text-align:left;cursor:pointer}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:40;display:flex;flex-direction:column}
.user-dropdown[hidden]{display:none}
.user-dropdown a,.user-dropdown button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:0;background:none;font-weight:600;color:var(--navy);text-align:left;width:100%}
.user-dropdown a:hover,.user-dropdown button:hover{background:var(--soft)}
.user-dropdown svg{width:17px}

/* Dialog lists */
.dialog-list{display:flex;flex-direction:column;max-height:55vh;overflow:auto;margin:10px 0}
.dialog-list>div{padding:10px 0;border-bottom:1px solid var(--line)}
.dialog-list b{display:block}
.dialog-list small{color:var(--muted)}
.dialog-list .unread-item b:before{content:"";display:inline-block;width:8px;height:8px;background:var(--red);border-radius:50%;margin-right:8px}
.dialog-fields{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.detail-grid{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;margin:12px 0}
.detail-grid dt{color:var(--muted)}.detail-grid dd{margin:0;word-break:break-word}

/* Mobile "More" sheet */
.more-nav-sheet{border:0;border-radius:18px 18px 0 0;padding:18px;width:100%;max-width:100%;margin:auto 0 0;position:fixed;bottom:0;max-height:80vh}
.more-nav-sheet::backdrop{background:rgba(5,15,45,.5)}
.more-nav-sheet .section-title{position:relative}
.more-nav-sheet .dialog-close{position:static}
.more-nav-sheet nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.more-nav-sheet nav a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:600;text-align:center}
.more-nav-sheet nav a.active{border-color:var(--red);color:var(--red);background:var(--pink)}
.bottom-nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:62px;color:#52658f}
.bottom-nav button svg{width:26px;height:26px}
.bottom-nav button.active{color:var(--red)}
.settings-account .btn{width:100%;margin-top:8px}

@media(max-width:1100px){
  .live-two{grid-template-columns:1fr}
}
@media(max-width:760px){
  .metrics.two{grid-template-columns:1fr 1fr}
  .live-chat{grid-template-columns:1fr}
  .live-chat.has-active .chat-list-panel{display:none}
  .live-chat:not(.has-active) .chat-placeholder{display:none}
  .live-chat .chat-back{display:inline-flex}
  .live-chat .chat-panel{min-height:0}
  .live-chat .messages{max-height:none;min-height:50vh}
  .call-row{grid-template-columns:auto 1fr auto;row-gap:6px}
  .call-row time{grid-column:2}
  .user-dropdown{right:-6px}
  .help{display:none}
  .dashboard-actions{grid-template-columns:repeat(4,1fr)}
  .group-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}
.live-chat .chat-top{display:flex;align-items:center;gap:12px}
.live-chat .chat-top>div{flex:1;min-width:0}
@media(max-width:760px){
  .topbar:before,.topbar:after{content:none!important;display:none!important}
  .topbar,.workspace-topbar{height:72px;min-height:72px;padding-top:10px;align-items:center}
}

/* UI/UX audit fixes */
[hidden]{display:none!important}
.two-col>*,.form-grid>*,.auth-layout>*,.settings-grid>*,.desktop-main-aside>*,.assistant-layout>*,.field{min-width:0}
.field input,.field select,.field textarea{width:100%;max-width:100%}
.search input{height:100%;min-height:40px}
.mini-activity time,.mini-activity small,.contact-row time,.call-row time{font-size:11px}
.login-links button{min-height:40px;padding:8px 12px}
body[data-page="premium"] .plan-banner+.card,body[data-page="premium-usage"] .plan-banner+.card{background-image:none!important;padding-right:18px!important;min-height:0!important}
.live-empty-row{padding:0}
.btn{transition:filter .15s ease,transform .1s ease,background-color .15s ease}
.btn:hover:not(:disabled){filter:brightness(.96)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:1100px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .tools-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .plan-grid .card{min-height:0}
  body[data-page="home"] .top-actions .legal-start,body[data-page="onboarding"] .top-actions .legal-start{display:inline-flex!important;min-height:38px;padding:0 14px;font-size:13px}
  .brand small{display:none}
}
@media(max-width:760px){#toast{left:16px;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));text-align:center}}

/* Login / sign-up card */
.auth-card{align-self:start}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:12px;margin-bottom:22px}
.auth-tabs button{border:0;background:transparent;border-radius:9px;min-height:44px;font-weight:700;color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.auth-tabs button.active{background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(19,42,93,.08)}
.auth-panel h2{font-size:24px;margin-bottom:4px}
.auth-panel>p{margin-bottom:18px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .btn,.auth-panel .form-grid>.btn{width:100%;min-height:48px;font-size:15px}
.auth-switch{text-align:center;margin:18px 0 0;font-size:14px}
.auth-switch button{border:0;background:none;padding:4px;color:var(--red);font-weight:700;cursor:pointer}
.auth-switch button:hover{text-decoration:underline}
.auth-error{background:#fff1f3;border:1px solid #ffc9d2;color:#c40020;border-radius:10px;padding:11px 14px;margin:0 0 14px;font-weight:600;font-size:13px}
.auth-panel .check{display:flex;gap:10px;align-items:flex-start;font-weight:500;line-height:1.45}
.auth-panel .check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--red)}
.auth-panel .check a{color:var(--red);font-weight:600}
.password-wrap{position:relative;display:block}
.password-wrap input{width:100%;padding-right:64px}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-weight:700;font-size:12px;padding:8px;cursor:pointer}
.password-toggle:hover{color:var(--red)}
@media(max-width:760px){
  body[data-page="login"] .auth-layout{display:flex;flex-direction:column}
  body[data-page="login"] .auth-card{order:-1;margin-bottom:18px}
  body[data-page="login"] .auth-layout .page-hero{margin-top:6px}
  body[data-page="login"] .auth-panel .form-grid{grid-template-columns:1fr}
}