/* ═══ APP SHELL ═══ */

#app{height:100%;display:flex;overflow-x:hidden}

.screen{display:none;height:100%;width:100%}

.screen.active{display:flex}

/* ═══ MOBILE: stack screens ═══ */

/* Call item swipe */

/* ═══ DESKTOP NAV SIDEBAR ═══ */

.desktop-nav::-webkit-scrollbar{width:0;display:none}

/* Sidebar user profile */

.sidebar-profile-avatar .online-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:var(--green);border:2px solid var(--bg-2)}

/* Sidebar nav links */

/* Sidebar section headers */

/* Sidebar inbox items */

.sidebar-inbox-info{flex:1;min-width:0}

/* Sidebar team list */

.sidebar-team{padding:var(--space-1) var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}

.sidebar-member-dot.online{background:var(--success)}

.sidebar-member-you{font-size:var(--fs-2xs);color:var(--text-3);font-weight:500;margin-left:-4px}

.sidebar-member-role{font-size:var(--fs-2xs);color:var(--text-3);font-weight:500;margin-left:var(--space-1);vertical-align:middle}

/* Sidebar spacer & bottom */

.sidebar-spacer{flex:1}

/* Legacy compat */

.nav-avatar{display:none}

/* ═══ MOBILE TAB BAR ═══ */

.mobile-tabs{position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--hover-overlay);padding:var(--space-2) 0;padding-bottom:calc(8px + var(--safe-b));z-index:50;display:none;backdrop-filter:blur(8px)}

.mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--fs-2xs);color:var(--text-3);font-weight:500;cursor:pointer;position:relative;background:none;border:none}

.mob-tab.active{color:var(--text)}

.mob-tab .ico{font-size:var(--fs-2xl);line-height:1}

.mob-tab .badge{position:absolute;top:-2px;right:calc(50% - 16px);background:var(--danger);color:var(--white);font-size:var(--fs-2xs);font-weight:700;border-radius:var(--radius-sm);padding:0 var(--space-1);min-width:16px}

/* ═══ COMMON ═══ */

.topbar h2{font-size:var(--fs-lg);font-weight:700;flex:1}

.back-btn{background:none;border:none;color:var(--brand);font-size:var(--fs-2xl);font-weight:700;padding:var(--space-1) var(--space-2);cursor:pointer;margin-left:-8px}

.icon-btn:active{opacity:.85}

.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}

#inbox-list .empty,#calls-list .empty,#contacts-list .empty,#stmpl-list .empty,.contacts-list .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);gap:var(--space-2);padding:var(--space-10)}

.fab:hover{opacity:.9;transform:none;box-shadow:none}

.fab:active{opacity:.85}

.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ═══ DESKTOP INBOX HEADER ═══ */

.inbox-desk-actions{display:flex;align-items:center;gap:var(--space-2)}

.inbox-action-btn:active{opacity:.85}

.inbox-filter-pill:active:not(.active){opacity:.85}

.calls-inline-list .call-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--overlay-light);cursor:pointer;transition:background .12s ease,color .12s ease}

.calls-inline-list .call-item:hover{background:var(--border-light)}

.calls-inline-list .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);gap:var(--space-2);padding:var(--space-10)}

.calls-inline-list .empty .big{font-size:var(--fs-icon-xl);opacity:.5}

/* Light mode desktop inbox header */

.inbox-filter-dropdown-wrap{position:relative}

.ifd-section{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-3) var(--space-4) var(--space-1)}

.ifd-options{padding:0 var(--space-2)}

.ifd-option.selected{color:var(--brand);font-weight:500}

.ifd-option.selected::before{content:"\2713";font-size:var(--fs-sm);color:var(--brand);font-weight:700}

.ifd-option:not(.selected)::before{content:"";width:12px}

.ifd-actions{padding:var(--space-2) var(--space-4) var(--space-1);border-top:1px solid var(--border);margin-top:var(--space-2)}

.ifd-clear{background:none;border:none;color:var(--text-3);font-size:var(--fs-sm);cursor:pointer;padding:var(--space-1) 0;transition:color .12s ease}

.ifd-clear:hover{color:var(--danger)}

/* ═══ LOGIN ═══ */

.login-screen{flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);background:var(--bg)}

.login-box h1{text-align:center;font-size:var(--fs-3xl);color:var(--text);-webkit-text-fill-color:var(--text);background:none;-webkit-background-clip:unset;font-weight:800}

.login-box .sub{text-align:center;color:var(--text-3);font-size:var(--fs-base);margin-bottom:var(--space-1)}

.login-box input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-10)}

.login-box input::placeholder{color:var(--text-3)}

.login-btn{background:var(--brand);border:none;border-radius:var(--radius-md);padding:var(--space-4);color:var(--white);font-size:var(--fs-lg);font-weight:600;cursor:pointer;width:100%;transition:background .2s ease,color .2s ease;box-shadow:none}

.login-btn:hover{transform:none;box-shadow:none;opacity:.9}

.login-btn:active{opacity:.85}

.login-error{color:var(--danger);font-size:var(--fs-base);text-align:center;min-height:20px}

/* ═══ INVITE SIGNUP ═══ */

.invite-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--space-4);background:var(--bg-2);padding:var(--space-10) var(--space-8);border-radius:var(--radius-xl);border:1px solid var(--overlay-light);box-shadow:var(--shadow-lg)}

.invite-box h1{text-align:center;font-size:var(--fs-3xl);background:linear-gradient(135deg,var(--brand),#6b94f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}

.invite-subtitle{text-align:center;color:var(--text-2);font-size:var(--fs-md);line-height:1.5}

.invite-role-badge{display:inline-block;font-size:var(--fs-sm);font-weight:700;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);text-transform:capitalize}

.invite-role-badge.role-admin{background:var(--indigo-12);color:var(--role-admin)}

.invite-role-badge.role-member{background:var(--gray-12);color:var(--text-3)}

.invite-role-badge.role-owner{background:var(--amber-12);color:var(--role-owner)}

.invite-box input{background:var(--bg-3);border:1.5px solid var(--overlay-light);border-radius:var(--radius-md);padding:var(--space-4) var(--space-4);font-size:var(--fs-md);outline:none;-webkit-appearance:none;width:100%;color:var(--text);transition:background .2s ease,color .2s ease}

.invite-box input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-10)}

.invite-box input::placeholder{color:var(--text-3)}

.invite-error-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--space-4);background:var(--bg-2);padding:var(--space-10) var(--space-8);border-radius:var(--radius-xl);border:1px solid var(--overlay-light);box-shadow:var(--shadow-lg);text-align:center}

.invite-error-box h1{font-size:var(--fs-3xl);background:linear-gradient(135deg,var(--brand),#6b94f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}

.invite-error-icon{font-size:var(--fs-icon-xl);margin-bottom:var(--space-1)}

.invite-error-title{font-size:var(--fs-lg);font-weight:700;color:var(--danger)}

.invite-error-msg{color:var(--text-3);font-size:var(--fs-base);line-height:1.6}

.invite-link{text-align:center;font-size:var(--fs-base);color:var(--text-3)}

.invite-link a{color:var(--brand);font-weight:600;cursor:pointer}

.invite-link a:hover{text-decoration:underline}

.invite-form-error{color:var(--danger);font-size:var(--fs-base);text-align:center;min-height:20px}

.invite-loading{text-align:center;color:var(--text-3);padding:60px 0}

.invite-loading-spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:var(--space-3)}

@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ INBOX PANEL ═══ */

.inbox-switcher{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}

.inbox-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.inbox-name{font-size:var(--fs-lg);font-weight:700}

.inbox-arrow{color:var(--text-3);font-size:var(--fs-sm)}

.inbox-filters{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5);overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--hover-overlay)}

.inbox-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}

/* Conversation item */

.ctx-menu.show{display:block;animation:ctxIn .12s cubic-bezier(.2,.6,.35,1)}

@keyframes ctxIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}

.ctx-menu-item:hover{background:var(--overlay-light)}

.ctx-menu-item:active{background:var(--overlay-medium)}

.ctx-menu-item .ctx-icon{width:22px;height:22px;color:var(--overlay-white-50);flex-shrink:0;display:flex;align-items:center;justify-content:center}

.ctx-menu-item:hover .ctx-icon{color:var(--overlay-white-70)}

.ctx-menu-item.danger{color:var(--danger-light)}

.ctx-menu-item.danger .ctx-icon{color:var(--danger-light)}

.ctx-menu-item.danger:hover{background:var(--danger-bg)}

.ctx-menu-sep{height:1px;background:var(--overlay-light);margin:var(--space-1) 0}

.pin-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-2xs);color:var(--text-3);font-weight:600;letter-spacing:.3px;opacity:.8}

.pinned-divider span{font-size:var(--fs-sm)}

.convo-item.number-blocked{opacity:.55}

.convo-item.number-blocked .convo-name{color:var(--text-3)}

.blocked-badge{position:absolute;bottom:-2px;right:-2px;font-size:var(--fs-2xs);line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}

.convo-body{flex:1;min-width:0}

.convo-top{display:flex;justify-content:space-between;align-items:center}

.convo-msg .you{color:var(--brand);font-weight:500}

/* Inbox dropdown */

.inbox-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg);box-shadow:var(--shadow-md);border-radius:0 0 var(--radius-lg) var(--radius-lg);z-index:10;overflow:hidden;display:none}

.inbox-dropdown.open{display:block}

.inbox-dd-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4);cursor:pointer;border-bottom:1px solid var(--border-lighter)}

.inbox-dd-item:hover{background:var(--bg-2)}

.inbox-dd-item.active{background:var(--teal-bg)}

.inbox-dd-name{font-size:var(--fs-md);font-weight:600}

.inbox-dd-num{font-size:var(--fs-sm);color:var(--text-3)}

.inbox-dd-badge{margin-left:auto;background:var(--danger);color:var(--white);font-size:var(--fs-2xs);font-weight:700;border-radius:var(--radius-sm);padding:2px var(--space-2)}

/* ═══ CHAT PANEL ═══ */

.chat-info{flex:1;min-width:0}

.crm-strip-cell:last-child{border-right:none}

.crm-strip-cell .sv.warn{color:var(--danger)}

.crm-strip-cell .sv.crm-strip-blocked{color:var(--danger)}

.msg-bubble.internal{background:var(--amber-10);color:var(--internal);align-self:flex-end;border-bottom-right-radius:var(--radius-sm);border:1px solid var(--amber-15);font-style:italic}

.msg-bubble.inbound .msg-meta{color:var(--text-3)}

.msg-bubble.outbound .msg-meta{color:rgba(255,255,255,1);opacity:1}

.msg-bubble.internal .msg-meta{color:var(--internal)}

.typing-indicator{font-size:var(--fs-sm);color:var(--text-3);padding:var(--space-2) var(--space-4);font-style:italic;display:none;align-items:center;gap:var(--space-1)}

.typing-indicator.show{display:flex}

.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:typingBounce 1.4s infinite ease-in-out}

.typing-dot:nth-child(1){animation-delay:0s}

.typing-dot:nth-child(2){animation-delay:.2s}

.typing-dot:nth-child(3){animation-delay:.4s}

@keyframes typingBounce{0%,80%,100%{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:1}}

.typing-name{margin-left:var(--space-2);font-style:italic}

.chat-send:hover:not(:disabled){opacity:.85;box-shadow:none}

.chat-send:active:not(:disabled){opacity:.85}

/* ═══ CRM PANEL (desktop right sidebar) ═══ */

.crm-big-name{font-size:var(--fs-md);font-weight:700;margin-top:var(--space-4);color:var(--text);letter-spacing:-.3px}

.crm-act-wrap{display:flex;flex-direction:row;align-items:center;flex-shrink:0}

.crm-act-wrap .crm-act-label{font-size:var(--fs-2xs);color:inherit;font-weight:500;white-space:nowrap}

.crm-act.edit-act:hover{background:var(--active-overlay);border-color:var(--overlay-medium);color:var(--white)}

.crm-tag .x{opacity:.4;font-size:var(--fs-2xs);transition:opacity .12s ease}

.crm-tag:hover .x{opacity:.8}

.crm-note:hover .note-actions{opacity:1}

.note-actions{position:absolute;top:8px;right:8px;display:flex;gap:var(--space-1);opacity:0;transition:opacity .12s ease}

.note-act{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-sm);padding:2px var(--space-1);border-radius:var(--radius-xs);transition:background .12s ease,color .12s ease}

.note-act:hover{color:var(--text);background:var(--overlay-light)}

.note-act.del:hover{color:var(--danger);background:var(--rose-10b)}

.note-edit-area{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--brand-20);background:var(--surface-elevated);color:var(--text);font-size:var(--fs-sm);font-family:inherit;resize:vertical;min-height:40px;outline:none;line-height:1.4}

.note-edit-btns{display:flex;gap:var(--space-2);margin-top:var(--space-2);justify-content:flex-end}

.note-edit-btns button{padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:none;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.note-edit-btns .save{background:var(--brand);color:var(--white)}

.note-edit-btns .save:hover{background:var(--brand-hover)}

.note-edit-btns .cancel{background:var(--surface-elevated);color:var(--text-2)}

.note-edit-btns .cancel:hover{background:var(--active-overlay)}

/* ═══ CONTACTS PANEL ═══ */

.contacts-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);height:100%;min-height:0}

.contact-item.active{background:var(--brand-bg);border-left:3px solid var(--brand);padding-left:var(--space-3)}

.contact-item:active{background:var(--bg-3);transform:none}

.contact-item .contact-name{font-size:var(--fs-base);font-weight:500;color:var(--text);line-height:1.3}

.contact-item .contact-phone{font-size:var(--fs-sm);color:var(--text-3);margin-top:1px}

.contact-cb-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border-radius:var(--radius-sm);margin:-4px -8px -4px -4px;transition:background .12s ease}

.contact-cb-wrap:hover{background:var(--bg-3)}

.contact-cb-wrap:active{background:var(--surface-elevated)}

.contact-cb{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex-shrink:0;margin:0;border-radius:var(--radius-xs);pointer-events:none}

.contact-cb:active{opacity:.85}

.contact-item.selected{background:var(--brand-bg);border-left:2px solid var(--brand);padding-left:var(--space-4)}

.contacts-bulk-bar{display:none;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--bg-2);border-bottom:1px solid var(--border);flex-shrink:0;animation:bulkBarIn .2s ease}

.contacts-bulk-bar.show{display:flex}

@keyframes bulkBarIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.contacts-bulk-bar .bulk-count{font-size:var(--fs-sm);font-weight:600;color:var(--text)}

.contacts-bulk-bar .bulk-actions{display:flex;gap:var(--space-2);margin-left:auto}

.contacts-bulk-bar .bulk-btn{font-size:var(--fs-sm);padding:var(--space-1) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text-2);cursor:pointer;font-weight:500;transition:background .12s ease,color .12s ease}

.contacts-bulk-bar .bulk-btn:active{opacity:.85}

.contacts-bulk-bar .bulk-btn:hover{background:var(--bg-3)}

.contacts-bulk-bar .bulk-btn.danger{border-color:var(--danger);color:var(--danger)}

.contacts-bulk-bar .bulk-btn.danger:hover{background:var(--danger-bg)}

.bulk-label-overlay{position:fixed;inset:0;z-index:500;display:none}

.bulk-label-overlay.show{display:block}

.bulk-label-panel{position:fixed;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:500;width:240px;overflow:hidden;animation:blIn .15s ease}

@keyframes blIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.bulk-label-header{padding:var(--space-3) var(--space-4);font-size:var(--fs-xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}

.bulk-label-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;font-size:var(--fs-sm);color:var(--text);transition:background .12s ease,color .12s ease}

.bulk-label-item:hover{background:var(--bg-2)}

.bulk-label-item:active{background:var(--bg-3)}

.bulk-label-item .bli-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);flex-shrink:0}

.bulk-label-item .bli-icon.tag{background:var(--brand-bg);color:var(--brand)}

.bulk-label-item .bli-icon.loc{background:var(--blue-10);color:var(--brand)}

.bulk-label-item .bli-icon.eth{background:var(--purple-10);color:var(--purple)}

.bulk-label-item .bli-icon.pref{background:var(--amber-10);color:var(--role-owner)}

.bulk-label-item .bli-icon.tp{background:var(--pink-10);color:var(--pink)}

.bulk-label-item .bli-icon.val{background:var(--bg-3)}

.bulk-label-back{padding:var(--space-3) var(--space-4);cursor:pointer;font-size:var(--fs-sm);color:var(--brand);display:flex;align-items:center;gap:var(--space-1);border-bottom:1px solid var(--border);transition:background .12s ease}

.bulk-label-back:hover{background:var(--bg-2)}

.contact-select-all-wrap{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4) 0 0}

.contact-phone{font-size:var(--fs-sm);color:var(--text-3)}

.contacts-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}

/* contacts desktop header */

.contacts-desk-header{display:none;flex-direction:column;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--hover-overlay)}

.contacts-desk-row1{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-4) var(--space-2)}

.contacts-desk-title{font-size:var(--fs-lg);font-weight:700;color:var(--text)}

.contacts-desk-right{display:flex;align-items:center;gap:var(--space-3)}

.contacts-count{font-size:var(--fs-sm);color:var(--text-3);font-weight:500}

.contacts-add-wrap{position:relative}

.contacts-add-btn{background:var(--brand);color:var(--white);border:none;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.contacts-add-btn:hover{opacity:.9}

.contacts-add-btn:active{opacity:.85}

.contacts-add-split{background:var(--brand);border:none;border-left:1px solid var(--overlay-strong);color:var(--white);cursor:pointer;padding:var(--space-2) var(--space-3);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm);transition:background .12s ease,color .12s ease}

.contacts-add-split:hover{background:var(--overlay-strong)}

.contacts-add-main{border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:var(--space-2) var(--space-3)}

.contacts-split-dd{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:10;padding:var(--space-1) 0;display:none}

.contacts-split-dd.show{display:block}

.contacts-split-dd-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;transition:background .12s ease,color .12s ease;border:none;background:none;width:100%;text-align:left}

.contacts-split-dd-item:hover{background:var(--bg-3);color:var(--text)}

.contacts-split-dd-item svg{width:14px;height:14px;flex-shrink:0}

.contacts-desk-row2{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-4) var(--space-2);flex-shrink:0;overflow-x:visible;flex-wrap:wrap;position:relative}

.contacts-desk-search{padding:0 var(--space-4) var(--space-3)}

.contacts-desk-search input{width:100%;background:var(--bg-3);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);color:var(--text);outline:none;transition:background .2s ease,color .2s ease;box-sizing:border-box}

.contacts-desk-search input::placeholder{color:var(--text-3)}

.contacts-desk-search input:focus{border-color:var(--brand-40);box-shadow:0 0 0 3px var(--brand-bg)}

.cfd-wrap{position:relative}

.cfd-dropdown{display:none}

.cfd-panel{position:fixed;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:500;width:220px;overflow:hidden;animation:blIn .15s ease;max-height:320px;display:flex;flex-direction:column}

.cfd-panel-header{padding:var(--space-3) var(--space-4);font-size:var(--fs-xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);flex-shrink:0}

.cfd-panel-list{overflow-y:auto;padding:var(--space-1) 0;flex:1}

.cfd-panel-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);cursor:pointer;font-size:var(--fs-sm);color:var(--text);transition:background .12s ease,color .12s ease}

.cfd-panel-item:hover{background:var(--bg-2)}

.cfd-panel-item:active{background:var(--bg-3)}

.cfd-panel-item.selected{color:var(--brand);font-weight:500}

.cfd-panel-item .cfd-check{width:16px;height:16px;border-radius:var(--radius-xs);border:1.5px solid var(--text-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-2xs);transition:background .12s ease,color .12s ease}

.cfd-panel-item.selected .cfd-check{background:var(--brand);border-color:var(--brand);color:var(--white)}

.cfd-panel-clear{padding:var(--space-2) var(--space-4);cursor:pointer;font-size:var(--fs-sm);color:var(--text-3);border-top:1px solid var(--border);transition:background .12s ease,color .12s ease;flex-shrink:0}

.cfd-panel-clear:hover{color:var(--danger);background:var(--danger-bg)}

.cfd-overlay{position:fixed;inset:0;z-index:500}

/* ═══ COMPOSE ═══ */

.sk-field-section{padding:var(--space-4)}

.sk-field-title{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-3)}

.sk-field-pill:hover{border-color:var(--overlay-medium);background:var(--surface-elevated)}

.sk-field-pill button:hover{opacity:1}

.sk-field-add input:focus{border-color:var(--teal-40);box-shadow:0 0 0 3px var(--teal-10);outline:none}

.sk-field-add button:hover{transform:none;box-shadow:none;opacity:.9}

.sk-field-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}

.sk-field-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xl);background:var(--bg-3);color:var(--text);font-size:var(--fs-base);border:1px solid var(--overlay-light);transition:background .12s ease,color .12s ease}

.sk-field-pill button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:var(--fs-base);padding:0;line-height:1;opacity:.7;transition:opacity .12s ease}

.sk-field-add{display:flex;gap:var(--space-2);margin-top:var(--space-2)}

.sk-field-add input{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-3);color:var(--text);font-size:var(--fs-base);transition:background .2s ease,color .2s ease}

.sk-field-add button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:none;background:var(--brand);color:var(--white);cursor:pointer;font-size:var(--fs-base);font-weight:600;box-shadow:var(--shadow-md);transition:background .2s ease,color .2s ease}

.compose-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);height:100%}

.compose-body{flex:1;padding:var(--space-5) var(--space-4);display:flex;flex-direction:column;gap:var(--space-5);overflow-y:auto}

.compose-label{font-size:var(--fs-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:var(--space-2)}

.compose-input{background:var(--bg-3);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);font-size:var(--fs-md);color:var(--text);outline:none;-webkit-appearance:none;width:100%}

.compose-input:focus{border-color:var(--teal)}

.compose-input::placeholder{color:var(--text-3)}

.compose-textarea{min-height:120px;resize:none;line-height:1.5;font-family:inherit}

.compose-from{display:flex;gap:var(--space-2)}

.compose-line{flex:1;padding:var(--space-3);border-radius:var(--radius-md);text-align:center;font-size:var(--fs-base);font-weight:600;border:2px solid var(--border);color:var(--text-3);cursor:pointer;background:none}

.compose-line.selected{border-color:var(--brand);background:var(--brand-bg);color:var(--brand)}

.compose-send{background:var(--brand);border:none;border-radius:var(--radius-lg);padding:var(--space-4);color:var(--white);font-size:var(--fs-lg);font-weight:600;cursor:pointer;width:100%}

.compose-send:disabled{opacity:.4}

.compose-send:active{opacity:.8}

/* === INLINE COMPOSE MODE === */

.chat-header.compose-mode{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4);padding-top:calc(16px + var(--safe-t))}

.compose-to-label{font-size:var(--fs-md);font-weight:600;color:var(--teal);flex-shrink:0}

.compose-to-input{flex:1;border:none;background:transparent;font-size:var(--fs-md);color:var(--text);outline:none;font-family:inherit;padding:0}

.compose-to-input::placeholder{color:var(--text-3)}

.compose-to-input:focus-visible{outline:none}

.compose-to-cancel{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-md);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}

.compose-to-cancel:hover{background:var(--bg-3);color:var(--text)}

.compose-results{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);z-index:10;display:none;max-height:320px;overflow-y:auto;padding:var(--space-1) 0}

.compose-result{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);cursor:pointer;transition:background .12s ease;border-radius:0}

.compose-result:hover,.compose-result.active{background:var(--bg-2)}

.convo-item.kb-active,.contact-row.kb-active{background:var(--brand-bg);outline:none}

.profile-hero{display:flex;flex-direction:column;align-items:center;padding:var(--space-10) var(--space-6) 28px;background:transparent}

.profile-av-wrap{position:relative;cursor:pointer;transition:transform .2s cubic-bezier(.4,0,.2,1)}

.profile-av-wrap:hover{opacity:.85}

.profile-av-wrap:hover .profile-av-edit{opacity:1}

.profile-av-edit{position:absolute;inset:0;border-radius:50%;background:var(--overlay-dark-45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none}

.profile-username{font-size:var(--fs-xl);font-weight:600;color:var(--text);margin-top:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}

.profile-username .edit-icon{color:var(--text-3);font-size:var(--fs-base);cursor:pointer;transition:color .12s ease}

.profile-username .edit-icon:hover{color:var(--brand)}

.profile-role{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px;text-transform:capitalize}

.profile-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin:0 0 var(--space-4)}

.profile-row{display:flex;align-items:center;padding:var(--space-4) var(--space-4);gap:var(--space-3);cursor:pointer;transition:background .12s ease}

.profile-row:hover{background:var(--bg-3)}

.profile-row:not(:last-child){border-bottom:1px solid var(--border)}

.profile-row-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--bg-3);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0}

.profile-row-info{flex:1;min-width:0}

.profile-row-label{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

.profile-row-value{font-size:var(--fs-base);color:var(--text);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.profile-row-value.empty{color:var(--text-3);font-style:italic}

.profile-row-chevron{color:var(--text-3);flex-shrink:0;transition:transform .2s}

.profile-row.expanded .profile-row-chevron{transform:rotate(90deg)}

.profile-expand{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}

.profile-expand.open{max-height:800px;overflow-y:auto}

.profile-expand-inner{padding:0 var(--space-4) var(--space-4)}

.profile-input{width:100%;padding:var(--space-3) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:var(--fs-base);box-sizing:border-box;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}

.profile-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-12)}

.profile-save-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-sm);border:none;background:var(--brand);color:var(--white);cursor:pointer;font-size:var(--fs-sm);font-weight:600;margin-top:var(--space-2);transition:opacity .12s ease}

.profile-save-btn:hover{opacity:.9}

.profile-save-btn:disabled{opacity:.5;cursor:not-allowed}

.pw-strength{height:4px;border-radius:var(--radius-xs);background:var(--surface-elevated);margin-top:var(--space-2);overflow:hidden}

.pw-strength-bar{height:100%;border-radius:var(--radius-xs);transition:width .3s,background .3s;width:0}

.pw-strength-label{font-size:var(--fs-xs);margin-top:var(--space-1);transition:color .3s}

.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-3);padding:var(--space-1)}

.pw-eye:hover{color:var(--text)}

.avatar-picker{position:fixed;inset:0;background:var(--overlay-dark-55);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}

.avatar-picker-card{background:var(--bg-2);border-radius:var(--radius-lg);width:380px;max-width:90vw;max-height:80vh;overflow:hidden;box-shadow:var(--shadow-xl);animation:scaleIn .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}

@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.avatar-picker-tabs{display:flex;border-bottom:1px solid var(--border)}

.avatar-picker-tab{flex:1;padding:var(--space-4);text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--text-3);cursor:pointer;transition:background .12s ease,color .12s ease;border-bottom:2px solid transparent}

.avatar-picker-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

.avatar-picker-tab:hover{background:var(--bg-3)}

.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1);padding:var(--space-4);overflow-y:auto;max-height:320px}

.emoji-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xl-plus);border-radius:var(--radius-sm);cursor:pointer;transition:background .12s ease,color .12s ease;border:2px solid transparent}

.emoji-cell:hover{background:var(--bg-3)}

.emoji-cell.selected{border-color:var(--brand);background:var(--brand-bg)}

.upload-zone{margin:var(--space-4);border:2px dashed var(--border);border-radius:var(--radius-md);padding:var(--space-10) var(--space-5);text-align:center;cursor:pointer;transition:background .2s ease,color .2s ease}

.upload-zone:hover,.upload-zone.dragover{border-color:var(--brand);background:var(--brand-bg)}

.upload-preview{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:var(--space-4) auto;display:block;border:3px solid var(--brand)}

.compose-result-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);font-weight:600;flex-shrink:0}

.compose-result-name{font-size:var(--fs-base);font-weight:500;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.compose-result-phone{font-size:var(--fs-sm);color:var(--text-3);flex-shrink:0}

.compose-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);opacity:.3}

.compose-empty svg{width:48px;height:48px;color:var(--text-3)}

.compose-empty-text{font-size:var(--fs-base);color:var(--text-3)}

.nc-save-btn{width:100%;padding:var(--space-3);background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.nc-save-btn:hover{opacity:.9}

.nc-save-btn:active{opacity:.85}

/* ═══ CALLS PANEL ═══ */

.calls-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);height:100%;min-height:0}

.call-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-lighter)}

.call-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.call-icon.incoming-answered{background:var(--success-bg);color:var(--success)}

.call-icon.incoming-missed{background:var(--danger-bg);color:var(--danger)}

.call-icon.outgoing-answered{background:var(--success-bg);color:var(--success)}

.call-icon.outgoing-noanswer{background:var(--yellow-12);color:var(--role-owner)}

.call-info{flex:1;min-width:0}

.call-name{font-size:var(--fs-base);font-weight:600}

.call-detail{font-size:var(--fs-sm);color:var(--text-3)}

.call-time{font-size:var(--fs-sm);color:var(--text-3);flex-shrink:0;white-space:nowrap}

.call-detail .missed-text{color:var(--danger);font-weight:500}

.call-detail .noanswer-text{color:var(--role-owner);font-weight:500}

.calls-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}

/* ═══ DIALPAD ═══ */

.dialpad-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);z-index:100;display:none;align-items:center;justify-content:center}

.dialpad-overlay.open{display:flex}

.dialpad{background:var(--bg);border-radius:var(--radius-xl);width:min(90%, 360px);padding:28px var(--space-6) var(--space-6);animation:dialFadeIn .3s cubic-bezier(.16,1,.3,1);border:1px solid var(--border);box-shadow:var(--shadow-xl)}

@keyframes dialFadeIn{from{transform:scale(.92) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

.dialpad-display{text-align:center;padding:var(--space-2) 0 var(--space-4)}

.dialpad-number{font-size:var(--fs-3xl);font-weight:700;color:var(--text);letter-spacing:2px;min-height:44px;word-break:break-all;font-variant-numeric:tabular-nums}

.dialpad-number:empty::before{content:'Enter number';color:var(--text-3);font-size:var(--fs-xl);font-weight:400;letter-spacing:1px}

.dialpad-label{font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--space-2);letter-spacing:.5px}

.dialpad-inbox-select{display:flex;gap:var(--space-2);justify-content:center;margin:var(--space-1) 0 var(--space-2)}

.dialpad-inbox-select .pill{font-size:var(--fs-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-xl);transition:background .2s ease,color .2s ease}

.dialpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding:var(--space-2) var(--space-3) var(--space-4)}

.dialpad-key{height:64px;width:64px;margin:0 auto;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-2xl-plus);font-weight:600;color:var(--text);background:var(--bg-2);border:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease;user-select:none;position:relative}

.dialpad-key:hover{background:var(--bg-3);border-color:var(--border)}

.dialpad-key:active{background:var(--brand-bg);border-color:var(--brand);opacity:.85}

.dialpad-key .sub{font-size:8px;color:var(--text-3);letter-spacing:2px;margin-top:0;font-weight:500}

.dialpad-actions{display:flex;justify-content:center;gap:36px;padding:var(--space-1) 0 0;align-items:center}

.dialpad-call{width:68px;height:68px;border-radius:50%;background:var(--success);border:none;color:var(--white);font-size:var(--fs-3xl-minus);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:background .2s ease,color .2s ease;position:relative}

.dialpad-call:hover{opacity:.9;transform:none;box-shadow:none}

.dialpad-call:active{opacity:.85}

.dialpad-call:disabled{opacity:.2;transform:none;box-shadow:none}

.dialpad-call:not(:disabled)::after{display:none}

@keyframes callPulse{0%,100%{opacity:0;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}

.dialpad-del{width:48px;height:48px;border-radius:50%;background:transparent;border:none;color:var(--text-3);font-size:var(--fs-2xl);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}

.dialpad-del:hover{color:var(--text);background:var(--overlay-light)}

.dialpad-close{width:48px;height:48px;border-radius:50%;background:transparent;border:none;color:var(--text-3);font-size:var(--fs-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}

.dialpad-close:hover{color:var(--text);background:var(--overlay-light)}

.calls-fab{position:absolute;bottom:calc(20px + var(--safe-b) + 60px);right:16px;width:56px;height:56px;background:var(--success);border:none;border-radius:50%;color:var(--white);font-size:var(--fs-2xl-plus);cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;z-index:1;transition:background .2s ease,color .2s ease}

.calls-fab:active{opacity:.85}

/* ═══ IN-CALL OVERLAY ═══ */

.incall-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;color:var(--white)}

.incall-overlay.active{display:flex}

.incall-status{font-size:var(--fs-base);color:var(--overlay-white-60);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:1px}

.incall-name{font-size:var(--fs-3xl-minus);font-weight:700;margin-bottom:var(--space-1)}

.incall-phone{font-size:var(--fs-md);color:var(--overlay-white-50);margin-bottom:var(--space-1)}

.incall-timer{font-size:var(--fs-xl);font-weight:600;color:var(--white-80);margin-top:var(--space-3);font-variant-numeric:tabular-nums}

.incall-avatar{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-icon-lg);font-weight:700;margin-bottom:var(--space-6)}

.incall-actions{display:flex;gap:28px;margin-top:var(--space-12)}

.incall-btn{width:64px;height:64px;border-radius:50%;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-2xl-plus);cursor:pointer;color:var(--white)}

.incall-btn .lbl{font-size:var(--fs-2xs);margin-top:var(--space-1);font-weight:500}

.incall-btn.mute{background:var(--overlay-medium)}

.incall-btn.mute.active{background:var(--role-owner)}

.incall-btn.hangup{background:var(--danger);width:72px;height:72px;font-size:var(--fs-3xl-minus);box-shadow:var(--shadow-md)}

.incall-btn.speaker{background:var(--overlay-medium)}

.incall-btn:active{opacity:.8}

.incall-via{font-size:var(--fs-sm);color:var(--white-40);margin-top:var(--space-8)}

/* ═══ IN-CALL DTMF KEYPAD ═══ */

.incall-dtmf{display:none;position:absolute;bottom:180px;left:50%;transform:translateX(-50%);background:var(--overlay-dark-70);border-radius:var(--radius-xl);padding:var(--space-4)}

.incall-dtmf.open{display:block}

.incall-dtmf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}

.incall-dtmf-key{width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-2xl);font-weight:600;color:var(--white);background:var(--overlay-medium);border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ═══ iOS PWA STANDALONE FIX ═══ */

input,textarea,select,button{-webkit-user-select:auto!important;user-select:auto!important;touch-action:manipulation!important}

input:focus:not(:focus-visible),textarea:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}

.incall-dtmf-key:active{background:var(--overlay-strong)}

.incall-dtmf-key .sub{font-size:8px;color:var(--overlay-white-50);letter-spacing:2px;margin-top:-2px;font-weight:400}

.incall-dtmf-sent{color:var(--overlay-white-70);font-size:var(--fs-xl);text-align:center;margin-bottom:var(--space-2);letter-spacing:4px;font-weight:600;min-height:28px;font-variant-numeric:tabular-nums}

.incall-dtmf-close{width:100%;text-align:center;margin-top:var(--space-2)}

.incall-dtmf-close button{background:none;border:none;color:var(--overlay-white-50);font-size:var(--fs-sm);cursor:pointer;padding:var(--space-1) var(--space-3)}

/* ═══ CHAT ATTACH BUTTON ═══ */

.chat-attach{width:42px;height:42px;background:var(--bg-3);border:1px solid var(--border);border-radius:50%;color:var(--text-3);font-size:var(--fs-xl);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.chat-attach:hover{background:var(--brand-bg);color:var(--brand)}

.attach-preview{display:none;padding:var(--space-2) var(--space-3);background:var(--bg-3);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-2);align-items:center;gap:var(--space-2)}

.attach-preview.show{display:flex}

.attach-preview img{max-height:48px;border-radius:var(--radius-sm)}

.attach-preview .remove{cursor:pointer;color:var(--danger);font-size:var(--fs-md);margin-left:auto}

/* ═══ DRAG & DROP OVERLAY ═══ */

.drop-overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:var(--teal-12);border:3px dashed var(--brand);border-radius:var(--radius-md);z-index:10;align-items:center;justify-content:center;pointer-events:none}

.drop-overlay.show{display:flex}

.drop-overlay-inner{background:var(--bg);padding:var(--space-5) var(--space-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center}

.drop-overlay-inner .drop-icon{font-size:var(--fs-icon-lg);margin-bottom:var(--space-2)}

.drop-overlay-inner .drop-text{font-size:var(--fs-md);font-weight:600;color:var(--brand)}

.drop-overlay-inner .drop-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}

/* ═══ GLOBAL SEARCH ═══ */

.gsearch-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);z-index:100;display:none;justify-content:center;padding-top:60px;backdrop-filter:blur(2px)}

.gsearch-overlay.open{display:flex}

.gsearch-box{width:100%;max-width:560px;max-height:80vh;background:var(--bg);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);animation:gsearchIn .15s ease}

@keyframes gsearchIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

.gsearch-input-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}

.gsearch-input-bar .ico{flex-shrink:0;color:var(--text-3)}

.gsearch-input{flex:1;background:none;border:none;font-size:var(--fs-lg);color:var(--text)}.gsearch-input:focus-visible{outline:none}

.gsearch-input::placeholder{color:var(--text-3)}

.gsearch-close{background:none;border:none;font-size:var(--fs-sm);color:var(--text-3);cursor:pointer;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:var(--bg-3)}

.gsearch-results{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

.gsearch-result{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-5);cursor:pointer;border-bottom:1px solid var(--border-lighter)}

.gsearch-result:hover{background:var(--bg-2)}

.gsearch-result:active{background:var(--bg-3)}

.gsearch-result-body{flex:1;min-width:0}

.gsearch-result-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}

.gsearch-result-name{font-size:var(--fs-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gsearch-result-time{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;flex-shrink:0}

.gsearch-result-snippet{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.gsearch-result mark,.gsearch-result-snippet mark,.gsearch-result-name mark{background:var(--overlay-medium);color:var(--white);font-weight:600;border-radius:var(--radius-xs);padding:0 var(--space-1);text-decoration:underline;text-decoration-color:var(--overlay-strong);text-underline-offset:2px}

.gsearch-result-meta{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}

.gsearch-empty{padding:var(--space-10) var(--space-5);text-align:center;color:var(--text-3);font-size:var(--fs-base)}

.gsearch-section-label{padding:var(--space-3) var(--space-5) var(--space-2);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3)}

.gsearch-hint{padding:var(--space-10) var(--space-5);text-align:center;color:var(--text-3)}

.gsearch-hint .big{font-size:36px;margin-bottom:var(--space-2)}

.gsearch-hint p{font-size:var(--fs-base);line-height:1.5}

.gsearch-hint kbd{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-xs);padding:2px var(--space-2);font-size:var(--fs-sm);font-family:inherit}

/* ═══ SETTINGS ═══ */

.settings-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);height:100%;min-height:0;min-width:0;overflow:hidden}

.settings-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-6)}

.settings-inner{max-width:680px;margin:0 auto;width:100%}

.settings-title{font-size:var(--fs-2xl-plus);font-weight:600;color:var(--text);padding-bottom:var(--space-6)}

.settings-section-label{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:0 0 var(--space-2);margin-top:var(--space-3)}

.settings-section-label:first-child{margin-top:0}

.settings-row:hover{background:var(--bg-3)}

.settings-row:active{opacity:.85}

.settings-row-icon{width:20px;height:20px;color:var(--text-3);flex-shrink:0;display:flex;align-items:center;justify-content:center}

.settings-row-label{flex:1;font-size:var(--fs-base);color:var(--text);font-weight:400;margin-left:var(--space-3)}

.settings-row-value{font-size:var(--fs-base);color:var(--text-3);margin-right:var(--space-1);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.settings-row-chevron{color:var(--text-3);font-size:var(--fs-md);flex-shrink:0}

.settings-row.danger{cursor:pointer}

.settings-row.danger .settings-row-icon,.settings-row.danger .settings-row-label{color:var(--danger)}

.settings-row.danger:hover{background:var(--danger-bg)}

.settings-toggle.on{background:var(--brand)}

.settings-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--white);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .2s cubic-bezier(.4,0,.2,1)}

.settings-toggle.on::after{transform:translateX(20px)}

/* Settings two-column layout */

.settings-nav-section{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-4) var(--space-3) var(--space-2);margin-top:var(--space-1)}

.settings-nav-section:first-child{margin-top:0;padding-top:var(--space-2)}

.settings-nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;border-radius:var(--radius-sm);transition:background .12s ease,color .12s ease;position:relative;user-select:none}

.settings-nav-item:hover{background:var(--bg-3);color:var(--text)}

.settings-nav-item.active{background:var(--bg-3);color:var(--text)}

.settings-nav-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--brand);border-radius:var(--radius-xs)}

.settings-nav-item svg{width:16px;height:16px;color:var(--text-3);flex-shrink:0}

.settings-nav-item.active svg{color:var(--brand)}

.settings-nav-item:hover svg{color:var(--text-2)}

.settings-nav-spacer{flex:1}

.settings-nav-item.danger{color:var(--danger)}

.settings-nav-item.danger svg{color:var(--danger)}

.settings-nav-item.danger:hover{background:var(--danger-bg)}

.settings-content-title{font-size:var(--fs-2xl);font-weight:700;color:var(--text);margin-bottom:var(--space-1)}

.settings-content-subtitle{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--space-6)}

.settings-toggle-label{font-size:var(--fs-sm);color:var(--text-3);margin-right:var(--space-2)}

/* ═══ ADD CONTACT MODAL ═══ */

.ac-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center}

.ac-overlay.open{display:flex}

.ac-card{position:relative;background:var(--bg-2);border-radius:var(--radius-lg);padding:28px;width:90%;max-width:420px;max-height:85vh;overflow-y:auto;animation:acFadeIn .3s cubic-bezier(.16,1,.3,1);border:1px solid var(--overlay-light);box-shadow:var(--shadow-lg)}
.ac-close-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:0;background:transparent;color:var(--text-3);font-size:22px;line-height:1;cursor:pointer;padding:0;transition:background-color .15s ease,color .15s ease}
.ac-close-btn:hover{background:var(--overlay-light);color:var(--text)}
.ac-close-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@keyframes acFadeIn{from{transform:scale(.92) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

.ac-title{margin:0 0 var(--space-6);color:var(--white);font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.3px}

.ac-title span{background:linear-gradient(135deg,var(--brand),#6b94f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ac-policy-notice{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin:0 0 var(--space-4);background:rgba(98,116,239,.08);border:1px solid rgba(98,116,239,.18);border-left:3px solid var(--brand);border-radius:var(--radius-sm);font-size:var(--fs-xs);color:rgba(255,255,255,.85);line-height:1.45}
[data-theme="light"] .ac-policy-notice{background:rgba(98,116,239,.06);border-color:rgba(98,116,239,.2);color:#374151}
.ac-policy-notice svg{flex-shrink:0;color:var(--brand);margin-top:1px}
.ac-policy-notice strong{color:#ffffff;font-weight:600}
[data-theme="light"] .ac-policy-notice strong{color:#111827}

.ac-form{display:flex;flex-direction:column;gap:var(--space-4)}

.ac-field{position:relative}

.ac-field input,.ac-field select,.ac-field textarea{width:100%;padding:var(--space-4) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--active-overlay);background:var(--border-lighter);color:var(--text);font-size:var(--fs-base);outline:none;transition:background .2s ease,color .2s ease;box-sizing:border-box;font-family:inherit}

.ac-field input::placeholder,.ac-field textarea::placeholder{color:var(--overlay-strong)}

.ac-field input:focus,.ac-field select:focus,.ac-field textarea:focus{border-color:var(--teal-50);background:var(--teal-4);box-shadow:0 0 0 3px var(--teal-10)}

.ac-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}

.ac-field select option{background:var(--bg);color:var(--text)}

.ac-field textarea{resize:vertical;min-height:80px;font-family:inherit}

.ac-field-label{display:block;font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2);font-weight:600}

.ac-multi-row{display:flex;gap:var(--space-2);align-items:stretch}

.ac-multi-row select{flex:1}

.ac-add-btn{width:44px;min-width:44px;border-radius:var(--radius-md);border:1px solid var(--brand-20);background:var(--brand-bg);color:var(--brand);cursor:pointer;font-size:var(--fs-lg);font-weight:600;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}

.ac-add-btn:hover{background:var(--brand-20);border-color:var(--brand-20)}

.ac-add-btn:active{opacity:.85}

.ac-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-2)}

.ac-pills:empty{display:none;margin:0}

.ac-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);margin:var(--space-1) 0}

.ac-actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-2)}

.ac-btn-cancel{padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:1px solid var(--active-overlay);background:var(--border-lighter);color:var(--text-2);cursor:pointer;font-size:var(--fs-base);font-weight:500;transition:background .2s ease,color .2s ease}

.ac-btn-cancel:hover{background:var(--overlay-light);border-color:var(--overlay-medium);color:var(--white)}

.ac-btn-save{padding:var(--space-3) 28px;border-radius:var(--radius-md);border:none;background:var(--brand);color:var(--white);cursor:pointer;font-size:var(--fs-base);font-weight:600;transition:background .2s ease,color .2s ease;box-shadow:none}

.ac-btn-save:hover{transform:none;box-shadow:none;opacity:.9}

.ac-btn-save:active{opacity:.85}

/* ═══ DELETE CONTACT BTN ═══ */

.delete-contact-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-4);margin-top:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--rose-10b);background:var(--rose-3);color:var(--rose-60);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease}

.delete-contact-btn:hover{background:var(--danger-bg);border-color:var(--rose-25);color:var(--danger)}

/* ═══ EDIT CONTACT MODAL ═══ */

.ec-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center}

.ec-overlay.open{display:flex}

.ec-card{position:relative;background:var(--bg-2);border-radius:var(--radius-md);padding:28px;width:90%;max-width:400px;max-height:80vh;overflow-y:auto}

.ec-heading{margin:0 0 var(--space-4);color:var(--text)}

.ec-fields{display:flex;flex-direction:column;gap:var(--space-3)}

.ec-label{color:var(--text-3);font-size:12px;margin-bottom:-8px}

.ec-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-2)}

.ec-select{width:100%;padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-3);color:var(--text)}

.ec-phone-input{padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-2);color:var(--text-3)}

.ec-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-2)}

/* ═══ INBOX CONTEXT MENU ═══ */

.inbox-ctx-menu{position:fixed;z-index:9999;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-1) 0;min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.3)}

.inbox-ctx-item{padding:var(--space-2) var(--space-4);cursor:pointer;font-size:12px;color:var(--text);border-radius:var(--radius-xs);margin:0 var(--space-1);transition:background .1s}

.inbox-ctx-item:hover{background:var(--bg-3)}

/* ═══ MANAGE FIELD OPTIONS POPUP ═══ */

.mfo-overlay{position:fixed;inset:0;background:var(--overlay-dark);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center}

.mfo-card{background:var(--bg-2);border-radius:var(--radius-xl);padding:28px;width:90%;max-width:420px;max-height:80vh;overflow-y:auto;color:var(--text);border:1px solid var(--border);box-shadow:0 24px 64px rgba(0,0,0,.4)}

.mfo-heading{margin:0 0 var(--space-5);color:var(--text);font-size:var(--fs-xl);font-weight:700;letter-spacing:-0.3px}

.mfo-input{flex:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-3);color:var(--text);font-size:var(--fs-base);outline:none;transition:border-color .2s,box-shadow .2s}

.mfo-btn{padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);border:none;background:var(--brand);color:var(--white);cursor:pointer;font-size:var(--fs-base);font-weight:600;box-shadow:none;transition:opacity .2s}

.mfo-done-row{margin-top:var(--space-5);text-align:right}

.mfo-done-btn{padding:var(--space-3) 28px;border-radius:var(--radius-sm);border:none;background:var(--brand);color:var(--white);cursor:pointer;font-size:var(--fs-base);font-weight:600;box-shadow:none;transition:opacity .2s}

.mfo-edit-btn{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:12px;padding:0 2px;line-height:1;opacity:.6;transition:opacity .15s}

.mfo-del-btn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:var(--fs-md);padding:0 0 0 2px;line-height:1;opacity:.7;transition:opacity .15s}

.mfo-edit-input{background:var(--bg-3);border:1px solid var(--brand);border-radius:var(--radius-xs);color:var(--text);padding:var(--space-1) var(--space-2);font-size:13px;width:120px;outline:none}

/* ═══ ACTION BUTTON ICON COLORS ═══ */

.crm-act:active{opacity:.85}

/* ─── Import/Export Bar ─── */

.ie-bar{display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-4);align-items:center}

.ie-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-3);color:var(--text-2);transition:background .2s ease,color .2s ease}

.ie-btn:hover{background:var(--brand-bg);color:var(--brand);border-color:var(--brand)}

.ie-btn svg{width:14px;height:14px;vertical-align:-2px;margin-right:var(--space-1)}

/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════ */

/* Base */

/* Desktop Nav */

/* Mobile Tabs */

/* Topbar */

/* Inbox */

/* Chat */

/* CRM strip & sidebar */

/* Contacts */

/* Calls */

/* Settings */

.settings-inbox-card:hover{border-color:var(--brand-20)}

.settings-inbox-card-top{display:flex;align-items:center;gap:var(--space-4)}

.settings-inbox-avatar{flex-shrink:0}

.settings-inbox-avatar:hover{opacity:.8}

.settings-inbox-info{flex:1;min-width:0}

.settings-inbox-name-input{border:none;background:var(--bg-3);color:var(--text);font-size:var(--fs-md);font-weight:600;padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);outline:none;width:100%;box-sizing:border-box;font-family:inherit}

.settings-inbox-name-input:focus{box-shadow:0 0 0 2px rgba(79,125,245,.3);background:var(--surface-elevated)}

.settings-inbox-display-name{font-size:var(--fs-md);font-weight:600;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);margin:-2px -8px;border-radius:var(--radius-xs);transition:background .12s ease}

.settings-inbox-display-name:hover{background:var(--bg-3)}

.settings-volume{display:flex;align-items:center;gap:var(--space-3);flex:1}

.settings-volume input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-xs);background:var(--surface-elevated);outline:none;cursor:pointer}

.settings-volume input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brand);cursor:pointer;box-shadow:var(--shadow-sm)}

.settings-volume input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);cursor:pointer;border:none}

.settings-volume-label{font-size:var(--fs-xs);color:var(--text-3);min-width:28px;text-align:right}

.settings-toggle{position:relative;width:44px;height:24px;background:var(--toggle-off);border-radius:var(--radius-md);cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;border:none;padding:0}

/* FABs */

/* Login */

/* Overlays & Modals */

/* sakuraPrompt / sakuraConfirm */

/* Context Menu */

/* Toast */

/* Global Search */

/* Dialpad & Incall */

/* Incoming call card */

/* Swipe actions stay the same — they're colored buttons */

/* IE bar */

/* Delete contact button */

/* Compose */

/* Inbox switcher */

/* Multi pills */

/* Drop overlay */

/* Attach preview */

/* Internal banner */

/* Theme toggle button */

.theme-toggle{width:36px;height:36px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);transition:background .2s ease,color .2s ease}

.theme-toggle:hover{background:var(--overlay-light);color:var(--text)}

/* manageFieldOptions overlay */

/* ═══ Notion-Style Profile Properties ═══ */

.np-name{font-size:var(--fs-sm);font-weight:700;color:var(--text);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:background .12s ease;display:block;position:relative;z-index:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.np-name:hover{background:var(--brand-bg)}

.np-name-input{font-size:var(--fs-lg);font-weight:700;color:var(--text);background:transparent;border:none;border-bottom:2px solid var(--brand);outline:none;padding:var(--space-1) var(--space-2);width:100%;font-family:inherit}

/* CRM Field Rows — Notion-style */

.np-row:hover{background:var(--bg-3)}

.np-val-input{width:100%;border:none;background:var(--bg-3);font-size:var(--fs-sm);color:var(--text);outline:none;padding:var(--space-1) var(--space-2);font-family:inherit;border-radius:var(--radius-xs);box-sizing:border-box}

.np-val-input:focus{background:var(--surface-elevated);box-shadow:0 0 0 2px rgba(79,125,245,.2)}

.np-pills{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}

.np-pill-x:hover{color:var(--danger)}

.note-color-picker{display:flex;gap:var(--space-2);padding:var(--space-2) 0;align-items:center}

.note-color-dot{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--overlay-medium);cursor:pointer;transition:background .12s ease,color .12s ease;flex-shrink:0;padding:0;outline:none;appearance:none;-webkit-appearance:none;box-sizing:border-box;display:block}

.note-color-dot:hover{border-color:var(--overlay-strong)}

.note-color-dot.active{border-color:var(--white);transform:scale(1.25);box-shadow:0 0 8px rgba(255,255,255,.25)}

/* Dropdowns */

.np-dropdown{position:fixed;width:240px;max-height:280px;overflow-y:auto;margin-top:2px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:100;animation:npDdIn .12s ease}

@keyframes npDdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.np-dd-search{width:100%;border:none;border-bottom:1px solid var(--border);background:transparent;padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);color:var(--text);outline:none;box-sizing:border-box}

.np-dd-search::placeholder{color:var(--text-3)}

.np-dd-list{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--space-1);min-height:0}

.np-dd-opt{padding:var(--space-2) var(--space-3);cursor:pointer;font-size:var(--fs-sm);color:var(--text);display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius-xs);margin:1px 0;transition:background .12s ease}

.np-dd-opt:hover{background:var(--bg-3)}

.np-dd-opt.selected{color:var(--brand)}

.np-dd-opt.clear{color:var(--text-3);font-size:var(--fs-sm)}

.np-dd-opt .check{color:var(--brand);font-size:var(--fs-base)}

.np-dd-opt .tag-on{width:16px;height:16px;border-radius:var(--radius-xs);background:var(--brand);display:inline-flex;align-items:center;justify-content:center;color:var(--white);font-size:var(--fs-2xs);flex-shrink:0;margin-right:var(--space-2)}

.np-dd-opt .tag-off{width:16px;height:16px;border-radius:var(--radius-xs);border:1.5px solid var(--text-3);display:inline-block;flex-shrink:0;margin-right:var(--space-2);box-sizing:border-box}

/* Light mode */

.np-note-input{width:100%;padding:var(--space-3) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-3);color:var(--text);font-size:var(--fs-base);resize:none;min-height:40px;max-height:120px;font-family:inherit;outline:none;transition:background .2s ease,color .2s ease}

.np-note-input:focus{border-color:var(--teal);background:var(--bg-2);min-height:60px}

.np-note-send{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;border:none;background:var(--brand);color:var(--white);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;transition:opacity .15s ease}
.np-note-send:disabled{opacity:.5;cursor:default}

.np-note-wrap{position:relative}

.np-saved{color:var(--brand);font-size:var(--fs-xs);opacity:0;transition:opacity .3s;margin-left:var(--space-1)}

.np-saved.show{opacity:1}

/* === MSG COMPOSER REDESIGN === */

.msg-composer textarea{width:100%;border:none;outline:none;background:transparent;color:var(--text);font-size:var(--fs-base);font-family:inherit;resize:none;min-height:36px;max-height:120px;line-height:1.4;padding:0}

.msg-composer textarea:focus,.msg-composer textarea:focus-visible{outline:none}

.msg-composer textarea::placeholder{color:var(--text-3)}

/* === SLASH COMMAND DROPDOWN === */

.slash-dropdown{position:absolute;bottom:100%;left:0;right:0;margin-bottom:var(--space-1);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;display:none;z-index:50;padding:var(--space-1) 0}

.slash-dropdown.show{display:block}

.slash-item{padding:var(--space-3) var(--space-4);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-1);transition:background .12s ease}

.slash-item:hover,.slash-item.active{background:var(--border-light);border-left:3px solid var(--brand);padding-left:var(--space-3);border-radius:var(--radius-sm);margin:var(--space-1)}

.slash-name{font-size:var(--fs-sm);font-weight:600;color:var(--brand)}

.slash-preview{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.slash-empty{padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);color:var(--text-3);text-align:center}

.msg-toolbar{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-2);gap:var(--space-1)}

.msg-toolbar-left{display:flex;gap:var(--space-1)}

.msg-toolbar-right{display:flex;gap:var(--space-1);align-items:center}

.msg-tbtn{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease;padding:0}

.msg-tbtn:hover{background:var(--bg-3);color:var(--text)}

.msg-tbtn.active{background:var(--brand-bg);color:var(--brand)}

.msg-send{width:36px;height:36px;border-radius:50%;border:none;background:var(--bg-3);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}

.msg-send.active:hover{opacity:.85}

.emoji-picker{position:fixed;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);width:320px;height:420px;box-shadow:var(--shadow-lg);z-index:10000;display:none;flex-direction:column;overflow:hidden}

.emoji-picker.show{display:flex}

.ep-search-wrap{position:relative;padding:var(--space-3)}

.ep-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:var(--fs-base);pointer-events:none}

.ep-search{width:100%;background:var(--bg-3);border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-8);font-size:var(--fs-sm);color:var(--text);outline:none;box-sizing:border-box}

.ep-search::placeholder{color:var(--text-3)}

.ep-tabs{display:flex;gap:var(--space-1);padding:var(--space-1) var(--space-3);overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}

.ep-tab{font-size:var(--fs-md);padding:var(--space-1) var(--space-2);cursor:pointer;border-radius:var(--radius-sm);border:none;background:transparent;transition:background .12s ease;flex-shrink:0;line-height:1}

.ep-tab:hover,.ep-tab.active{background:var(--bg-3)}

.ep-grid-wrap{flex:1;overflow-y:auto;padding:var(--space-1) var(--space-3) var(--space-3);-webkit-overflow-scrolling:touch}

.ep-cat-label{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-2) 0 var(--space-1);font-weight:600}

.ep-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1)}

.ep-grid span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-sm);font-size:var(--fs-2xl);transition:background .12s ease}

.ep-grid span:hover{background:var(--bg-3)}

.ep-empty{padding:var(--space-10) var(--space-3);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}

/* ─── Template Manager Overlay ─────────────────────────── */

.tmpl-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);z-index:100;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}

.tmpl-overlay.open{display:flex;opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.tmpl-panel{background:var(--bg);border-radius:var(--radius-lg);max-width:700px;width:90%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(10px);transition:transform .2s;position:relative;border:1px solid var(--border);box-shadow:var(--shadow-xl)}

.tmpl-overlay.open .tmpl-panel{transform:translateY(0)}

.tmpl-header{display:flex;align-items:flex-start;justify-content:space-between;padding:28px 28px 0}

.tmpl-header-left h2{font-size:var(--fs-xl);font-weight:700;color:var(--text);margin:0}

.tmpl-header-left p{font-size:var(--fs-sm);color:var(--text-3);margin:var(--space-1) 0 0}

.tmpl-add-btn{background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease;white-space:nowrap}

.tmpl-add-btn:hover{opacity:.9}

.tmpl-add-btn:active{opacity:.85}

.tmpl-search{padding:var(--space-4) 28px 0}

.tmpl-search-wrap{position:relative}

.tmpl-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}

.tmpl-search-input{width:100%;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4) var(--space-3) 36px;font-size:var(--fs-base);color:var(--text);outline:none;transition:border-color .12s ease;box-sizing:border-box}

.tmpl-search-input:focus{border-color:var(--teal)}

.tmpl-search-input::placeholder{color:var(--text-3)}

.tmpl-count{padding:var(--space-3) 28px var(--space-2);font-size:var(--fs-sm);color:var(--text-3);flex-shrink:0}

.tmpl-list{flex:1;overflow-y:auto;padding:0 28px 28px;-webkit-overflow-scrolling:touch}

.tmpl-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-2);cursor:pointer;transition:background .12s ease,color .12s ease;position:relative}

.tmpl-card:hover{border-color:var(--brand)}

.tmpl-card-top{display:flex;align-items:center;justify-content:space-between}

.tmpl-card-name{font-weight:600;font-size:var(--fs-base);color:var(--brand)}

.tmpl-card-menu{opacity:0;background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-lg);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:background .12s ease,color .12s ease}

.tmpl-card:hover .tmpl-card-menu{opacity:1}

.tmpl-card-menu:hover{background:var(--bg-3);color:var(--text)}

.tmpl-card-body{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;margin-top:var(--space-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tmpl-card-dd{position:absolute;top:40px;right:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:10;padding:var(--space-1) 0;display:none;min-width:140px}

.tmpl-card-dd.show{display:block}

.tmpl-card-dd-item{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);border:none;background:none;color:var(--text);cursor:pointer;transition:background .12s ease}

.tmpl-card-dd-item:hover{background:var(--bg-2)}

.tmpl-card-dd-item.danger{color:var(--danger)}

.tmpl-card-dd-item.danger:hover{background:var(--danger-bg)}

.tmpl-edit{padding:0 var(--space-6) var(--space-6)}

.tmpl-edit-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5)}

.tmpl-edit-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2)}

.tmpl-edit-input{width:100%;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--text);outline:none;transition:border-color .12s ease;box-sizing:border-box}

.tmpl-edit-input:focus{border-color:var(--teal)}

.tmpl-edit-textarea{width:100%;min-height:120px;resize:vertical;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--text);line-height:1.6;outline:none;transition:border-color .12s ease;font-family:inherit;box-sizing:border-box}

.tmpl-edit-textarea:focus{border-color:var(--teal)}

.tmpl-edit-charcount{font-size:var(--fs-xs);color:var(--text-3);text-align:right;margin-top:var(--space-1)}

.tmpl-edit-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}

.tmpl-edit-cancel{background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-5);font-size:var(--fs-sm);cursor:pointer;transition:background .12s ease,color .12s ease}

.tmpl-edit-cancel:hover{background:var(--bg-3)}

.tmpl-edit-save{background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-5);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.tmpl-edit-save:hover{opacity:.9}

.tmpl-edit-save:disabled{opacity:.5;cursor:not-allowed}

.tmpl-empty{text-align:center;padding:var(--space-12) var(--space-6)}

.tmpl-empty-icon{font-size:var(--fs-icon-xl);margin-bottom:var(--space-3)}

.tmpl-empty-title{font-size:var(--fs-md);font-weight:600;color:var(--text);margin-bottom:var(--space-1)}

.tmpl-empty-desc{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--space-4)}

.tmpl-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-xl);width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease;flex-shrink:0;margin-left:var(--space-2)}

.tmpl-close:hover{background:var(--bg-3);color:var(--text)}

/* ─── Team Manager Overlay ─────────────────────────────── */

.team-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);z-index:100;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}

.team-overlay.open{display:flex;opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.team-panel{background:var(--bg);border-radius:var(--radius-lg);max-width:700px;width:90%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(10px);transition:transform .2s;position:relative;border:1px solid var(--border);box-shadow:var(--shadow-xl)}

.team-overlay.open .team-panel{transform:translateY(0)}

.team-header{display:flex;align-items:flex-start;justify-content:space-between;padding:28px 28px var(--space-4)}

.team-header-left h2{font-size:var(--fs-xl);font-weight:700;color:var(--text);margin:0}

.team-header-left p{font-size:var(--fs-sm);color:var(--text-3);margin:var(--space-1) 0 0}

.team-invite-btn{background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-xl);padding:var(--space-2) var(--space-5);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease;white-space:nowrap}

.team-invite-btn:hover{opacity:.9}

.team-invite-btn:active{opacity:.85}

.team-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-xl);width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease;flex-shrink:0;margin-left:var(--space-2)}

.team-close:hover{background:var(--bg-3);color:var(--text)}

.team-list{flex:1;overflow-y:auto;padding:0 28px 28px;-webkit-overflow-scrolling:touch}

.team-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);transition:background .12s ease,color .12s ease;position:relative}

.team-card:hover{border-color:var(--brand-20)}

.team-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:700;flex-shrink:0;position:relative}

.team-avatar .team-presence{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg-2)}

.team-presence.online{background:var(--success)}

.team-presence.offline{background:var(--text-3)}

.team-info{flex:1;min-width:0}

.team-name{font-size:var(--fs-base);font-weight:600;color:var(--text);display:flex;align-items:center;gap:var(--space-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.team-name .you-badge{font-size:var(--fs-2xs);font-weight:600;color:var(--brand);background:var(--brand-bg);padding:1px var(--space-2);border-radius:var(--radius-xs)}

.team-meta{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px;display:flex;align-items:center;gap:var(--space-2)}

.team-status-dot{width:6px;height:6px;border-radius:50%;display:inline-block}

.team-status-dot.online{background:var(--success)}

.team-status-dot.offline{background:var(--text-3)}

.team-role-badge{font-size:var(--fs-xs);font-weight:600;padding:2px var(--space-2);border-radius:var(--radius-sm);flex-shrink:0;text-transform:capitalize}

.team-role-owner{background:var(--amber-10);color:var(--role-owner)}

.team-role-admin{background:var(--indigo-10);color:var(--role-admin)}

.team-role-member{background:var(--gray-10);color:var(--text-3)}

.team-menu-btn{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-lg);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:background .12s ease,color .12s ease;opacity:0;flex-shrink:0}

.team-card:hover .team-menu-btn{opacity:1}

.team-menu-btn:hover{background:var(--bg-3);color:var(--text)}

.team-dropdown{position:absolute;top:44px;right:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:10;padding:var(--space-1) 0;display:none;min-width:180px}

.team-dropdown.show{display:block}

.team-dd-item{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);border:none;background:none;color:var(--text);cursor:pointer;transition:background .12s ease}

.team-dd-item:hover{background:var(--bg-2)}

.team-dd-item.danger{color:var(--danger)}

.team-dd-item.danger:hover{background:var(--danger-bg)}

.team-dd-divider{height:1px;background:var(--border);margin:var(--space-1) 0}

.team-section-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:var(--space-4) 0 var(--space-2);margin-top:var(--space-2)}

.team-invite-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-4);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-4);transition:background .12s ease,color .12s ease}

.team-invite-icon{width:40px;height:40px;border-radius:50%;background:var(--brand-bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);flex-shrink:0;color:var(--brand)}

.team-invite-info{flex:1;min-width:0}

.team-invite-role{font-size:var(--fs-sm);font-weight:600;color:var(--text)}

.team-invite-exp{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}

.team-invite-actions{display:flex;gap:var(--space-2);flex-shrink:0}

.team-inv-copy{background:var(--bg-3);color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background .12s ease,color .12s ease}

.team-inv-copy:hover{border-color:var(--brand);color:var(--text)}

.team-inv-copy:active{opacity:.85}

.team-inv-revoke{background:none;color:var(--danger);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background .12s ease,color .12s ease}

.team-inv-revoke:hover{background:var(--rose-6);border-color:var(--rose-20)}

.team-inv-revoke:active{opacity:.85}

.team-empty{text-align:center;padding:var(--space-12) var(--space-6)}

.team-empty-icon{font-size:var(--fs-icon-lg);margin-bottom:var(--space-3);opacity:.6}

.team-empty-text{font-size:var(--fs-base);color:var(--text-3)}

/* Invite sub-modal */

.team-invite-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);z-index:100;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}

.team-invite-overlay.open{display:flex;opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.team-invite-modal{background:var(--bg);border-radius:var(--radius-lg);max-width:380px;width:90%;padding:28px;transform:translateY(10px);transition:transform .2s;border:1px solid var(--border);box-shadow:var(--shadow-xl)}.invite-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.invite-modal-title{font-size:var(--fs-lg);font-weight:700;margin:0;color:var(--text);flex:1}.invite-close-btn{appearance:none;background:transparent;border:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--text-3);cursor:pointer;transition:background .12s ease,color .12s ease;padding:0;margin:-4px -4px 0 0;flex-shrink:0}.invite-close-btn:hover{background:var(--bg-3);color:var(--text)}.invite-close-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.team-invite-overlay.open .team-invite-modal{transform:translateY(0)}

.team-invite-modal h3{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--space-1);color:var(--text)}

.team-invite-modal .team-inv-sub{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--space-5);line-height:1.5}

.team-role-selector{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}

.team-role-pill{flex:1;padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-2);text-align:center;cursor:pointer;transition:background .12s ease,color .12s ease;font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}

.team-role-pill:hover{border-color:var(--brand)}

.team-role-pill.active{border-color:var(--brand);background:var(--brand-bg);color:var(--brand)}

.team-role-pill:active{opacity:.85}

.team-role-desc{font-size:var(--fs-sm);color:var(--text-3);line-height:1.5;margin-bottom:var(--space-5);padding:var(--space-3);background:var(--bg-2);border-radius:var(--radius-sm);border:1px solid var(--border)}

.team-gen-btn{width:100%;background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.team-gen-btn:hover{opacity:.9}

.team-gen-btn:active{opacity:.85}

.team-gen-btn:disabled{opacity:.5;cursor:not-allowed}

.team-link-result{margin-top:var(--space-4)}

.team-link-input{width:100%;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-3);font-size:var(--fs-sm);color:var(--text);outline:none;box-sizing:border-box;font-family:monospace}

.team-link-input:focus{border-color:var(--teal)}

.team-link-actions{display:flex;gap:var(--space-2);margin-top:var(--space-3)}

.team-link-copy{flex:1;background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.team-link-copy:hover{opacity:.9}

.team-link-copy:active{opacity:.85}

.team-link-done{flex:1;background:var(--bg-3);color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background .12s ease,color .12s ease}

.team-link-done:hover{border-color:var(--brand);color:var(--text)}

/* Light mode */

/* Mobile: full width panel */

/* ═══ INTERNAL CHAT ═══ */

.ic-conv-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;border-left:3px solid transparent;transition:background .12s ease}

.ic-conv-row:hover{background:var(--bg-3)}

.ic-conv-row.active{border-left-color:var(--role-admin);background:var(--indigo-8)}

.ic-conv-row .ic-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:600;flex-shrink:0;position:relative}

.ic-conv-row .ic-dot{position:absolute;bottom:1px;right:1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg);background:var(--text-3)}

.ic-conv-row .ic-dot.online{background:var(--green)}

.ic-conv-row .ic-body{flex:1;min-width:0}

.ic-conv-row .ic-role{font-size:var(--fs-xs);color:var(--text-3);margin-left:var(--space-2);font-weight:400}

.ic-conv-row .ic-top{display:flex;align-items:center;justify-content:space-between}

.ic-conv-row .ic-time{font-size:var(--fs-xs);color:var(--text-3);flex-shrink:0}

.ic-conv-row .ic-preview{font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

.ic-conv-row .ic-badge{background:var(--role-admin);color:var(--white);font-size:var(--fs-xs);font-weight:700;min-width:20px;height:20px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;padding:0 var(--space-2);flex-shrink:0}

.ic-back-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);cursor:pointer}

.ic-back-header:hover{background:var(--bg-3)}

.ic-back-header svg{flex-shrink:0;color:var(--text-2)}

.ic-back-header span{font-size:var(--fs-md);font-weight:700;color:var(--text)}

.ic-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);color:var(--text-3);text-align:center;gap:var(--space-2)}

.ic-empty .big{font-size:var(--fs-icon-xl);opacity:.5}

.ic-empty p{font-size:var(--fs-base)}

.ic-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-12) var(--space-6);height:100%;min-height:240px;text-align:center;color:var(--text-3)}
.ic-empty-state .ic-empty-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--overlay-light);color:var(--text-3);margin-bottom:var(--space-2)}
.ic-empty-state .ic-empty-title{font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.ic-empty-state .ic-empty-sub{font-size:var(--fs-sm);color:var(--text-3);max-width:280px;line-height:1.5}

.internal-header-pill{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--indigo-15);color:var(--indigo);font-size:var(--fs-xs);font-weight:600;padding:2px var(--space-2);border-radius:var(--radius-md);margin-left:var(--space-2)}

.msg-bubble.ic-sent .msg-meta{color:var(--overlay-white-60)}

.msg-bubble.ic-received .msg-meta{color:var(--text-3)}

.msg-bubble .ic-read{color:var(--overlay-white-50);font-size:var(--fs-xs);margin-left:var(--space-1)}

.sidebar-member-badge{position:absolute;top:-2px;right:-4px;background:var(--role-admin);color:var(--white);font-size:var(--fs-2xs);font-weight:700;min-width:16px;height:16px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;padding:0 var(--space-1);border:2px solid var(--bg-2);z-index:1}

.ic-send-btn-active{background:var(--role-admin);color:var(--white)}

/* Telegram-style overlay */

.ic-msg-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;display:none}

.ic-msg-overlay.show{display:block}

/* Reaction bar - floating pill */

.ic-reaction-bar{position:fixed;display:flex;align-items:center;gap:2px;background:rgba(30,30,40,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-xl);padding:var(--space-1) var(--space-2);box-shadow:var(--shadow-lg);z-index:500;animation:icBarIn .15s cubic-bezier(.2,1,.3,1)}

@keyframes icBarIn{from{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

.ic-reaction-emoji{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xl);border-radius:50%;cursor:pointer;transition:background .12s ease,color .12s ease;user-select:none}

.ic-reaction-emoji:hover{background:var(--overlay-medium)}

.ic-reaction-emoji:active{opacity:.85}

.ic-reaction-plus{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);color:var(--white-40);border-radius:50%;cursor:pointer;transition:background .12s ease,color .12s ease;border-left:1px solid var(--active-overlay);margin-left:2px}

.ic-reaction-plus:hover{background:var(--overlay-medium);color:var(--overlay-white-70)}

/* Context menu */

.ic-ctx-menu{position:fixed;background:rgba(30,30,40,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;min-width:200px;z-index:500;display:none;animation:icMenuIn .15s cubic-bezier(.2,1,.3,1) .05s both}

@keyframes icMenuIn{from{opacity:0;transform:scale(.92) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}

.ic-ctx-menu.show{display:block}

.ic-ctx-item{display:flex;align-items:center;gap:var(--space-3);height:44px;padding:0 var(--space-4);font-size:var(--fs-base);color:var(--white-90);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .12s ease;font-weight:400}

.ic-ctx-item:hover{background:var(--active-overlay)}

.ic-ctx-item:active{background:var(--overlay-medium)}

.ic-ctx-item.danger{color:var(--danger-light)}

.ic-ctx-item.danger:hover{background:var(--rose-10)}

.ic-ctx-item svg{width:20px;height:20px;flex-shrink:0;opacity:.6}

.ic-ctx-item:hover svg{opacity:.9}

.ic-ctx-sep{height:1px;background:var(--overlay-light);margin:var(--space-1) var(--space-2)}

/* Reactions on message bubbles */

.msg-reactions{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}

.msg-reaction-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-md);background:var(--overlay-medium);font-size:var(--fs-sm);cursor:pointer;transition:background .12s ease,color .12s ease;border:1.5px solid transparent;user-select:none}

.msg-reaction-pill:hover{background:var(--overlay-medium)}

.msg-reaction-pill:active{opacity:.85}

.msg-reaction-pill.mine{border-color:var(--indigo-50);background:var(--indigo-15)}

.msg-reaction-pill .r-count{font-size:var(--fs-xs);color:var(--overlay-white-60);font-weight:600}

.ic-received .msg-reaction-pill{background:var(--overlay-medium)}

.ic-received .msg-reaction-pill:hover{background:var(--overlay-medium)}

.ic-received .msg-reaction-pill .r-count{color:var(--text-3)}

.msg-bubble.outbound .msg-reaction-pill{background:var(--overlay-strong)}

.msg-bubble.outbound .msg-reaction-pill:hover{background:var(--overlay-strong)}

.msg-bubble.outbound .msg-reaction-pill .r-count{color:var(--overlay-white-70)}

.msg-bubble.inbound .msg-reaction-pill{background:var(--overlay-medium)}

.msg-bubble.inbound .msg-reaction-pill:hover{background:var(--overlay-medium)}

.msg-bubble.inbound .msg-reaction-pill .r-count{color:var(--text-3)}

.ic-msg-edited{font-size:var(--fs-2xs);color:var(--white-40);font-style:italic;margin-left:var(--space-1)}

.ic-received .ic-msg-edited{color:var(--text-3)}

.ic-msg-recalled{text-align:center;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);color:var(--text-3);font-style:italic;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}

.ic-msg-recalled svg{width:14px;height:14px;opacity:.5}

.ic-edit-area{width:100%;background:var(--overlay-medium);border:1px solid var(--overlay-strong);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);color:inherit;font-size:inherit;font-family:inherit;resize:none;line-height:1.4;outline:none;min-height:36px;box-sizing:border-box}

.ic-edit-area:focus{border-color:rgba(99,102,241,.5);box-shadow:0 0 0 2px rgba(99,102,241,.15)}

.ic-edit-btns{display:flex;gap:var(--space-2);margin-top:var(--space-2);justify-content:flex-end}

.ic-edit-btns button{padding:var(--space-1) var(--space-4);border-radius:var(--radius-sm);border:none;font-size:var(--fs-sm);cursor:pointer;font-weight:600;transition:background .12s ease,color .12s ease}

.ic-edit-btns button:active{opacity:.85}

.ic-edit-btns .ic-edit-save{background:var(--role-admin);color:var(--white)}

.ic-edit-btns .ic-edit-save:hover{opacity:.9}

.ic-edit-btns .ic-edit-cancel{background:transparent;color:var(--text-3);border:1px solid var(--border)}

.ic-edit-btns .ic-edit-cancel:hover{background:var(--bg-3)}

/* Mobile inline attach/emoji buttons for internal chat */

.ic-mob-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:background .12s ease}

.ic-mob-btn:active{background:var(--bg-3);opacity:.85}

/* Light mode internal chat overrides */

/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════ */

/* Light mode mobile overrides */

/* === Incoming Call Overlay === */

/* ═══ INCOMING CALL — Premium Centered Overlay ═══ */

.incoming-overlay{position:fixed;top:16px;right:16px;z-index:9999;display:none;animation:incomingSlideIn .35s cubic-bezier(.16,1,.3,1)}

.incoming-overlay.active{display:block}

@keyframes incomingFadeIn{from{opacity:0}to{opacity:1}}

.incoming-card{width:340px;text-align:center;padding:28px;background:var(--bg-2);border:1px solid var(--overlay-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);animation:incomingSlideIn .35s cubic-bezier(.16,1,.3,1)}

@keyframes incomingSlideIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

.incoming-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:28px}

.incoming-inbox-badge{display:flex;align-items:center;gap:var(--space-1);font-size:var(--fs-sm);color:var(--text-3);font-weight:500}

.incoming-inbox-icon{width:20px;height:20px;border-radius:var(--radius-sm);background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs)}

.incoming-label{font-size:var(--fs-xs);color:var(--brand-90);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}

.incoming-avatar-wrap{position:relative;width:96px;height:96px;margin:0 auto var(--space-5)}

.incoming-pulse{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:var(--white);position:relative;z-index:1;box-shadow:var(--shadow-lg)}

.incoming-ring-1,.incoming-ring-2{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--brand-20);animation:incomingRing 2s ease-out infinite}

.incoming-ring-2{inset:-16px;animation-delay:.4s;border-color:var(--brand-bg)}

@keyframes incomingRing{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.15);opacity:0}}

.incoming-name{font-size:var(--fs-2xl);font-weight:700;color:var(--white);margin-bottom:var(--space-1);letter-spacing:-.3px}

.incoming-sub{font-size:var(--fs-base);color:var(--white-40);margin-bottom:2px}

.incoming-phone{font-size:var(--fs-sm);color:var(--overlay-strong);margin-bottom:var(--space-8);font-variant-numeric:tabular-nums}

.incoming-actions{display:flex;justify-content:center;gap:var(--space-12);margin-bottom:var(--space-5)}

.incoming-action-col{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}

.incoming-action-label{font-size:var(--fs-xs);color:var(--overlay-white-50);font-weight:500}

.incoming-btn-round{width:64px;height:64px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s ease,color .12s ease;-webkit-tap-highlight-color:transparent}

.incoming-btn-round.decline{background:var(--danger);box-shadow:var(--shadow-md)}

.incoming-btn-round.accept{background:var(--success);box-shadow:var(--shadow-md)}

.incoming-btn-round:hover{opacity:.9}

.incoming-btn-round:active{opacity:.85}

.incoming-hint{font-size:var(--fs-xs);color:var(--overlay-strong);text-align:center}

/* === Sakura Prompt/Modal === */

.stoggle.on{background:var(--brand)}

.stoggle.on>div{transform:translateX(20px)}

/* === Sakura Confirm + Template Settings === */

.sakura-confirm-overlay{position:fixed;inset:0;background:var(--overlay-dark);backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center;animation:scFadeIn .2s ease}

.sakura-confirm-overlay.open{display:flex}

@keyframes scFadeIn{from{opacity:0}to{opacity:1}}

.sakura-confirm{background:var(--bg-2);border:1px solid var(--overlay-light);border-radius:var(--radius-xl);padding:28px;width:360px;max-width:90vw;box-shadow:var(--shadow-xl);animation:scSlideIn .25s cubic-bezier(.16,1,.3,1);color:var(--white)}

@keyframes scSlideIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.sakura-confirm-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xl);margin-bottom:var(--space-4)}

.sakura-confirm-icon.danger{background:var(--danger-bg);color:var(--danger-light)}

.sakura-confirm-icon.warning{background:var(--amber-12);color:var(--internal)}

.sakura-confirm-icon.info{background:var(--brand-bg);color:var(--brand)}

.sakura-confirm-title{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--space-2)}

.sakura-confirm-msg{font-size:var(--fs-base);color:var(--overlay-white-50);line-height:1.5;margin-bottom:var(--space-6)}

.sakura-confirm-actions{display:flex;gap:var(--space-3);justify-content:flex-end}

.sakura-confirm-btn{height:40px;padding:0 var(--space-5);border-radius:var(--radius-md);border:none;font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}

.sakura-confirm-btn:hover{transform:none;box-shadow:none;opacity:.9}

.sakura-confirm-btn:active{opacity:.85}

.sakura-confirm-btn.cancel{background:var(--overlay-light);color:var(--overlay-white-70);border:1px solid var(--active-overlay)}

.sakura-confirm-btn.cancel:hover{background:var(--overlay-medium);color:var(--white)}

.sakura-confirm-btn.danger{background:var(--danger);color:var(--white);box-shadow:none}

.sakura-confirm-btn.danger:hover{opacity:.9}

.sakura-confirm-btn.primary{background:var(--brand);color:var(--white);box-shadow:none}

.sakura-confirm-btn.primary:hover{opacity:.9}

.sakura-confirm-btn.warning{background:var(--role-owner);color:var(--white);box-shadow:none}

.sp-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--space-5);animation:spIn .2s ease}

@keyframes spIn{from{opacity:0}to{opacity:1}}

.sp-card{background:var(--bg-2);border:1px solid var(--active-overlay);border-radius:var(--radius-xl);padding:28px;width:100%;max-width:420px;box-shadow:var(--shadow-xl);animation:spSlide .25s ease}

@keyframes spSlide{from{transform:scale(.92) translateY(16px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

.sp-title{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:var(--space-2)}

.sp-msg{font-size:var(--fs-base);color:var(--text-3);margin-bottom:var(--space-5);line-height:1.5}

.sp-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--overlay-light);border:1.5px solid var(--overlay-medium);border-radius:var(--radius-md);color:var(--text);font-size:var(--fs-md);outline:none;transition:border-color .2s;margin-bottom:var(--space-3);font-family:inherit}

.sp-input:focus{border-color:var(--teal-50);box-shadow:0 0 0 3px var(--teal-10)}

.sp-input::placeholder{color:var(--text-3)}

.sp-hint{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--space-4)}

.sp-btns{display:flex;gap:var(--space-3);justify-content:flex-end}

.sp-btn{padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;cursor:pointer;border:none;transition:background .12s ease,color .12s ease}

.sp-btn.cancel{background:var(--overlay-light);color:var(--text-3);border:1px solid var(--active-overlay)}

.sp-btn.cancel:hover{background:var(--overlay-medium);color:var(--text)}

.sp-btn.ok{background:var(--brand);color:var(--white);box-shadow:none}

.sp-btn.ok:hover{box-shadow:none;transform:none;opacity:.9}

.sp-lbl{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--space-1);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* --- Emoji Profile Picker (EPP) --- */

.epp-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-dark);z-index:100;display:none;align-items:center;justify-content:center}

.epp-backdrop.open{display:flex;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

.epp-modal{background:var(--bg-2);border-radius:var(--radius-lg);width:360px;max-height:480px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-xl);animation:eppIn .2s cubic-bezier(.4,0,.2,1)}

@keyframes eppIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.epp-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-4) 0}

.epp-header h3{font-size:var(--fs-md);font-weight:600;color:var(--text);margin:0}

.epp-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-lg);width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}

.epp-close:hover{background:var(--bg-3);color:var(--text)}

.epp-preview{display:flex;flex-direction:column;align-items:center;padding:var(--space-4) 0 var(--space-3);gap:var(--space-2)}

.epp-preview-circle{width:64px;height:64px;border-radius:50%;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:var(--fs-3xl);border:2px solid var(--border);transition:background .2s ease,color .2s ease}

.epp-remove{font-size:var(--fs-sm);color:var(--text-3);cursor:pointer;background:none;border:none;transition:color .12s ease}

.epp-remove:hover{color:var(--danger)}

.epp-search{padding:0 var(--space-4) var(--space-2);position:relative}

.epp-search input{width:100%;height:36px;border-radius:var(--radius-sm);background:var(--bg-3);border:1px solid var(--border);padding:0 var(--space-3) 0 var(--space-8);font-size:var(--fs-sm);color:var(--text);outline:none;box-sizing:border-box;transition:border-color .15s}

.epp-search input:focus{border-color:var(--teal)}

.epp-search input::placeholder{color:var(--text-3)}

.epp-search svg{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}

.epp-grid-wrap{flex:1;overflow-y:auto;padding:0 var(--space-4) var(--space-4);-webkit-overflow-scrolling:touch}

.epp-category{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-3) 0 var(--space-2)}

.epp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1)}

.epp-cell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xl);border-radius:var(--radius-sm);cursor:pointer;transition:background .12s ease,color .12s ease;border:2px solid transparent}

.epp-cell:hover{background:var(--bg-3)}

.epp-cell:active{opacity:.85}

.epp-cell.selected{border-color:var(--brand);background:var(--brand-bg)}

/* Inbox Access in Team Cards */

.team-inbox-access{width:100%;border-top:1px solid var(--border);margin-top:var(--space-3);padding-top:var(--space-3)}

.team-inbox-label{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2)}

.team-inbox-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0}

.team-inbox-icon{font-size:var(--fs-md);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--bg-3)}

.team-inbox-name{flex:1;font-size:var(--fs-sm);color:var(--text-2)}

.team-inbox-auto{font-size:var(--fs-xs);color:var(--text-3);font-style:italic;margin-top:var(--space-2)}

/* Settings inline templates */

.settings-tmpl-add{background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease;white-space:nowrap}

.settings-tmpl-add:hover{opacity:.9}

.settings-tmpl-search{max-width:100%;margin-bottom:var(--space-3)}.settings-tmpl-search input{width:100%;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);color:var(--text);outline:none;box-sizing:border-box}

.settings-tmpl-search input:focus{border-color:var(--teal)}

.settings-tmpl-search input::placeholder{color:var(--text-3)}

.settings-tmpl-count{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--space-3)}

.stmpl-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-4);margin-bottom:var(--space-2);cursor:pointer;transition:background .12s ease,color .12s ease;position:relative;max-width:100%;box-sizing:border-box}

.stmpl-card:hover{border-color:var(--brand)}

.stmpl-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}

.stmpl-name{font-weight:600;font-size:var(--fs-base);color:var(--brand);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.stmpl-body{font-size:var(--fs-sm);color:var(--text-2);margin-top:var(--space-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.stmpl-actions{display:flex;gap:var(--space-1);flex-shrink:0}

.stmpl-card:hover .stmpl-actions{opacity:1}

.stmpl-action{background:none;border:none;cursor:pointer;font-size:var(--fs-base);padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);transition:background .1s,color .1s;color:var(--text-3)}

.stmpl-action:hover{background:var(--bg-3)}

.stmpl-action.danger:hover{color:var(--danger)}

.stmpl-edit-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2)}

.stmpl-edit-input{width:100%;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--text);outline:none;box-sizing:border-box}

.stmpl-edit-input:focus{border-color:var(--teal)}

.stmpl-edit-textarea{width:100%;min-height:120px;resize:vertical;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--text);line-height:1.6;outline:none;font-family:inherit;box-sizing:border-box}

.stmpl-edit-textarea:focus{border-color:var(--teal)}

.stmpl-edit-charcount{font-size:var(--fs-xs);color:var(--text-3);text-align:right;margin-top:var(--space-1)}

.stmpl-edit-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}

.stmpl-cancel{background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-5);font-size:var(--fs-sm);cursor:pointer}

.stmpl-cancel:hover{background:var(--bg-3)}

.stmpl-save{background:var(--brand);color:var(--white);border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-5);font-size:var(--fs-sm);font-weight:600;cursor:pointer}

.stmpl-save:hover{opacity:.9}

/* ═══ EMPTY STATE ICONS ═══ */

.contacts-detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);gap:var(--space-1);padding:var(--space-10) var(--space-5);text-align:center}

.contacts-detail-empty .empty-icon{opacity:.2;margin-bottom:var(--space-3)}

.contacts-detail-empty .empty-text{font-size:var(--fs-sm);color:var(--text-3);opacity:.6}

.gsearch-hint .empty-icon{opacity:.2;margin-bottom:var(--space-2)}

.ic-empty .empty-icon{opacity:.2;margin-bottom:var(--space-2)}

/* ═══ CRM SIDEBAR — READABLE OVERRIDES ═══ */

/* Drag handle for inbox reorder */

.drag-handle{display:flex;align-items:center;justify-content:center;width:20px;cursor:grab;color:var(--text-3);flex-shrink:0;border-radius:var(--radius-xs);transition:color .12s ease}

.drag-handle:hover{color:var(--text-2)}

.drag-handle:active{cursor:grabbing}

.settings-inbox-card.dragging{opacity:.4;transform:scale(.97)}

.settings-inbox-card.drag-over{border-top:2px solid var(--brand);margin-top:-2px}

.settings-inbox-card.drag-over-below{border-bottom:2px solid var(--brand);margin-bottom:-2px}

/* Sidebar inbox drag handle — hidden until hover */

.sidebar-drag-handle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:20px;cursor:grab;color:var(--text-3);opacity:0;transition:opacity .12s ease;flex-shrink:0;z-index:1;border-radius:var(--radius-xs)}

.sidebar-inbox:hover .sidebar-drag-handle{opacity:.4}

.sidebar-drag-handle:hover{opacity:1;color:var(--text-2);background:var(--bg-3)}

.sidebar-drag-handle:active{cursor:grabbing}

.sidebar-inbox.dragging{opacity:.35}

.sidebar-inbox.drag-over{border-top:2px solid var(--brand);margin-top:-2px}

.sidebar-inbox.drag-over-below{border-bottom:2px solid var(--brand);margin-bottom:-2px}

/* Sidebar inbox menu + mute */

.sidebar-inbox-menu{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;cursor:pointer;color:var(--text-3);opacity:0;transition:opacity .12s ease;border-radius:var(--radius-xs);z-index:1}

.sidebar-inbox:hover .sidebar-inbox-menu{opacity:.5}

.sidebar-inbox-menu:hover{opacity:1;background:var(--bg-3);color:var(--text-2)}

/* Electron desktop app — window drag region */

/* ═══ ELECTRON WINDOW DRAG REGIONS ═══ */

/* Only applies in Electron — .platform-mac / .platform-windows injected by main.js */

/* Hide the old drag bar entirely */

/* Electron drag bar — thin strip across full top, passes clicks through */

.platform-mac #electron-drag-bar,.platform-windows #electron-drag-bar{display:block;position:fixed;top:0;left:0;right:0;height:16px;-webkit-app-region:drag;z-index:9999}

#electron-drag-bar{position:fixed;top:0;left:0;right:0;height:8px;-webkit-app-region:drag;z-index:9999;display:none}

/* Platform-specific sidebar top padding */

.platform-mac .desktop-nav{padding-top:28px}

/* Sidebar = draggable (both platforms) */

.platform-mac .desktop-nav,
.platform-windows .desktop-nav{padding-top:var(--space-1);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}

/* All interactive elements inside sidebar = NOT draggable */

.platform-mac .desktop-nav *,
.platform-windows .desktop-nav *{-webkit-app-region:no-drag}

/* But the nav container itself stays draggable — only direct children get no-drag for clicks */

.platform-mac .desktop-nav .sidebar-link,

.platform-mac .desktop-nav .sidebar-inbox,

.platform-mac .desktop-nav .sidebar-member,

.platform-mac .desktop-nav .sidebar-inbox-icon,

.platform-mac .desktop-nav .sidebar-inbox-menu,

.platform-mac .desktop-nav .sidebar-drag-handle,

.platform-mac .desktop-nav button,

.platform-mac .desktop-nav input,

.platform-mac .desktop-nav a,

.platform-windows .desktop-nav .sidebar-link,

.platform-windows .desktop-nav .sidebar-inbox,

.platform-windows .desktop-nav .sidebar-member,

.platform-windows .desktop-nav .sidebar-inbox-icon,

.platform-windows .desktop-nav .sidebar-inbox-menu,

.platform-windows .desktop-nav .sidebar-drag-handle,

.platform-windows .desktop-nav button,

.platform-windows .desktop-nav input,
.platform-windows .desktop-nav a{-webkit-app-region:no-drag;-webkit-user-select:auto;user-select:auto;cursor:pointer}

/* Inbox desk header = draggable */

.platform-mac #inbox-desk-header,
.platform-windows #inbox-desk-header{-webkit-app-region:drag;-webkit-user-select:none;user-select:none}

.platform-mac #inbox-desk-header *,
.platform-windows #inbox-desk-header *{-webkit-app-region:no-drag}

/* Chat header = draggable */

.platform-mac .chat-header,
.platform-windows .chat-header{-webkit-app-region:drag;-webkit-user-select:none;user-select:none}

.platform-mac .chat-header *,
.platform-windows .chat-header *{-webkit-app-region:no-drag}

/* Truncation hardening */

.crm-strip-cell .sv{font-size:var(--fs-xs);color:var(--text);font-weight:600;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.contact-name{font-size:var(--fs-base);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ic-conv-row .ic-name{font-size:var(--fs-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}

.convo-crm{display:flex;gap:var(--space-1);margin-top:var(--space-1);flex-wrap:wrap;max-height:20px;overflow:hidden}

.contact-tags{display:flex;gap:var(--space-1);margin-top:0;flex-wrap:wrap;align-items:center;max-height:22px;overflow:hidden}

/* ═══════════════════════════════════════════════════════════════════ */

/* PREMIUM REDESIGN — Linear/Notion-level polish (v2)                  */

/* Applied as overrides at end of app.css                              */

/* ═══════════════════════════════════════════════════════════════════ */

/* ─── Refined Color System ─── */

/* ─── Base Typography ─── */

/* ─── Scrollbar — Hair-thin ─── */

/* ─── Panel Backgrounds ─── */

.desktop-nav{width:var(--nav-w);background:var(--panel-sidebar);display:flex;flex-direction:column;padding:0;flex-shrink:0;border-right:1px solid var(--border-lighter);overflow-y:auto;overflow-x:hidden}

.inbox-panel{flex:0 0 var(--inbox-w);min-width:260px;max-width:340px;border-right:1px solid var(--border-lighter);display:flex;flex-direction:column;background:var(--panel-list);position:relative;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden}

.chat-panel{flex:1;display:flex;flex-direction:column;min-width:350px;height:100%;background:var(--panel-chat);overflow:hidden}

.crm-panel{flex:0 1 var(--crm-w);min-width:240px;max-width:320px;border-left:1px solid var(--border-lighter);display:flex;flex-direction:column;background:var(--panel-crm);overflow-y:auto;overflow-x:hidden}

/* ═══ SIDEBAR ═══ */

.sidebar-profile{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-10) var(--space-4) var(--space-3);flex-shrink:0}

.sidebar-profile-avatar{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:50%;overflow:visible;line-height:0;background:linear-gradient(135deg,var(--brand),var(--brand-hover));display:flex;align-items:center;justify-content:center;color:var(--white);font-size:var(--fs-sm);font-weight:700;flex-shrink:0;position:relative}

.sidebar-profile-name{font-size:var(--fs-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}

.sidebar-links{padding:var(--space-2) var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}

.sidebar-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);font-weight:400;transition:background .12s ease,color .12s ease;position:relative;user-select:none;line-height:1.3}

.sidebar-link:hover{background:var(--border-lighter);color:var(--text)}

.sidebar-link.active{background:var(--nav-active-bg);color:var(--nav-active-text);font-weight:500}

.sidebar-link.active .sl-icon{color:var(--brand)}

.sidebar-link .sl-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;transition:color .12s ease}

.sidebar-link:hover .sl-icon{color:var(--text-2)}

.sidebar-section{padding:var(--space-5) var(--space-4) var(--space-2);font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}

.sidebar-inbox{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);margin:1px var(--space-2);border-radius:var(--radius-sm);cursor:pointer;transition:background .12s ease,color .12s ease;position:relative}

.sidebar-inbox:hover{background:var(--border-light)}

.sidebar-inbox-icon{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);overflow:hidden;line-height:1;font-weight:700;color:var(--white);flex-shrink:0}

.sidebar-inbox-name{font-size:var(--fs-sm);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:var(--space-1)}

.sidebar-gw-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:none}
.sidebar-gw-dot.offline{display:inline-block;background:#ef4444;animation:gw-pulse 2s ease-in-out infinite}
@keyframes gw-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.sidebar-inbox-number{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-inbox-badge{background:var(--brand);color:var(--white);font-size:var(--fs-2xs);font-weight:600;border-radius:var(--radius-md);padding:1px var(--space-2);min-width:16px;text-align:center;flex-shrink:0;line-height:1.3}

.sidebar-member{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:background .12s ease,color .12s ease}

.sidebar-member:hover{background:var(--border-light)}

.sidebar-member-avatar{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;flex-shrink:0;position:relative;overflow:visible;line-height:1}

.sidebar-member-name{font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}

.sidebar-member-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg-2);background:var(--text-3)}

.sidebar-bottom{padding:var(--space-2);border-top:1px solid var(--hover-overlay);flex-shrink:0}

/* ═══ DESKTOP INBOX HEADER ═══ */

.inbox-desk-header{display:flex;flex-direction:column;flex-shrink:0;background:var(--panel-list);border-bottom:1px solid var(--hover-overlay)}

.inbox-desk-row1{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-4) var(--space-2);min-height:44px}

.inbox-desk-tabs{display:flex;align-items:center;gap:0;background:transparent;border-radius:0;padding:0}

.inbox-tab{font-size:var(--fs-base);font-weight:500;color:var(--text-3);background:none;border:none;padding:var(--space-2) var(--space-4);border-radius:0;cursor:pointer;transition:background .12s ease,color .12s ease;line-height:1.2;border-bottom:2px solid transparent}

.inbox-tab:hover{color:var(--text-2)}

.inbox-tab.active{font-weight:600;color:var(--text);background:none;border-bottom-color:var(--brand)}

.inbox-desk-row2{display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-3);flex-shrink:0;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}

.inbox-action-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}

.inbox-action-btn:hover{background:var(--hover-overlay);color:var(--text)}

/* ═══ FILTER PILLS ═══ */

.inbox-filter-pill{font-size:var(--fs-sm);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border-light);color:var(--text-3);cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease;font-weight:500;user-select:none;flex-shrink:0}

.inbox-filter-pill:hover{background:var(--border-light);color:var(--text-2)}

.inbox-filter-pill.active{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ═══ CONVERSATION LIST ═══ */

.convo-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--overlay-light);cursor:pointer;transition:background .12s ease}

.convo-item:hover{background:var(--border-light)}

.convo-item:active{background:var(--hover-overlay);transform:none}

.convo-item.active{background:var(--brand-bg);border-left:none;position:relative;padding-left:var(--space-4);box-shadow:none}

.convo-item.active .convo-name{color:var(--text);font-weight:600}

.convo-item.pinned{background:var(--brand-bg);border-left:2px solid var(--brand-25);padding-left:var(--space-4)}

.convo-item.pinned:hover{background:var(--brand-bg)}

.convo-item.pinned .convo-name{color:var(--text)}

.convo-av{width:36px;height:36px;font-size:var(--fs-sm);min-width:36px;min-height:36px;overflow:hidden;line-height:1;position:relative}

.convo-name{font-size:var(--fs-sm);font-weight:600;flex:1;min-width:0;color:var(--text);line-height:1.3;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.convo-time{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;font-weight:400;min-width:42px;text-align:right;white-space:nowrap;flex-shrink:0}

.convo-msg{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}

.convo-badge{background:var(--brand);color:var(--white);font-size:var(--fs-2xs);font-weight:600;border-radius:var(--radius-full);padding:0;flex-shrink:0;margin-top:2px;min-width:20px;height:20px;line-height:20px;text-align:center;box-shadow:none}

.pinned-divider{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;background:var(--overlay-light);border-bottom:1px solid var(--border-lighter);border-top:1px solid var(--border-lighter)}

/* Unread conversations */

.convo-item[data-unread="true"] .convo-name,.convo-item .convo-name.unread{color:var(--text);font-weight:700}

.convo-item[data-unread="true"]{font-weight:500}

/* ═══ CHAT AREA ═══ */

.chat-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);padding-top:calc(12px + var(--safe-t));border-bottom:1px solid var(--hover-overlay);flex-shrink:0;position:relative;background:var(--panel-chat);min-height:52px}

.chat-name{font-size:var(--fs-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;letter-spacing:-.02em;line-height:1.3}

.chat-sub{font-size:var(--fs-xs);color:var(--text-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chat-sub-phone{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:copy;border-radius:var(--radius-xs)}
.chat-sub-phone:hover{color:var(--text);background:var(--overlay-light)}
.chat-sub-phone:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chat-sub-save{display:inline-flex;align-items:center;gap:2px;background:var(--brand-bg);color:var(--brand);border:1px solid transparent;border-radius:var(--radius-md);padding:1px 8px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;line-height:1.4;letter-spacing:.01em;transition:background .12s ease,border-color .12s ease}
.chat-sub-save:hover{background:var(--brand);color:var(--white,#fff);border-color:var(--brand)}
.chat-sub-save:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.quick-reply-strip{display:none;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;background:var(--bg-2);border-top:1px solid var(--border);animation:qrSlide .18s ease}
@keyframes qrSlide{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.quick-reply-pill{display:inline-flex;align-items:center;gap:4px;background:var(--brand-bg);color:var(--brand);border:1px solid transparent;border-radius:var(--radius-md);padding:4px 10px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;line-height:1.4;letter-spacing:.01em;font-family:inherit;transition:background .12s ease,border-color .12s ease,color .12s ease}
.quick-reply-pill:hover{background:var(--brand);color:var(--white,#fff);border-color:var(--brand)}
.quick-reply-pill:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.quick-reply-pill .qr-arrow{font-weight:700;opacity:.7}
.quick-reply-pill:hover .qr-arrow{opacity:1}

.chat-messages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);background:var(--panel-chat);max-width:900px;margin:0 auto;width:100%}

.msg-bubble{max-width:62%;-webkit-user-select:text;user-select:text;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:1.5;word-wrap:break-word;margin-bottom:1px}

.msg-bubble.inbound{background:var(--panel-elevated);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:none}

.msg-bubble.outbound{background:#3b6de6;color:var(--white);align-self:flex-end;border-bottom-right-radius:4px;box-shadow:none}

.msg-meta{font-size:var(--fs-2xs);margin-top:var(--space-1);display:flex;gap:var(--space-2);justify-content:flex-end;opacity:.7}

.msg-bubble.outbound .msg-meta{color:#fff;opacity:1}
.msg-bubble.outbound .msg-status.status-failed{color:#ff4d4d;font-weight:700}

.msg-date{text-align:center;font-size:var(--fs-xs);color:var(--text-3);padding:var(--space-5) 0 var(--space-2);font-weight:500;letter-spacing:.3px}

.msg-bubble+.msg-date{margin-top:var(--space-3)}

/* Input area */

.chat-input-bar{background:var(--panel-chat);border-top:1px solid var(--hover-overlay);padding:var(--space-3) var(--space-4);padding-bottom:calc(12px + var(--safe-b));display:flex;align-items:flex-end;gap:var(--space-2);flex-shrink:0}

.chat-input{flex:1;background:var(--panel-list);border:1px solid var(--overlay-light);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--text);outline:none;resize:none;max-height:120px;min-height:42px;line-height:1.5;-webkit-appearance:none;transition:background .2s ease,color .2s ease}

.chat-input:focus,.chat-input:focus-visible{border-color:var(--teal);box-shadow:var(--focus-teal);outline:none;background:var(--input-focus-bg)}

.chat-input::placeholder{color:var(--text-3)}

.chat-send{width:38px;height:38px;background:var(--brand);border:none;border-radius:50%;color:var(--white);font-size:var(--fs-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:none;transition:background .2s ease,color .2s ease}

.chat-send:disabled{opacity:.12;box-shadow:none}

.chat-send:not(:disabled):hover{opacity:.85}

/* Composer */

.msg-composer{position:relative;background:var(--panel-list);border:1px solid var(--overlay-light);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);transition:background .2s ease,color .2s ease;flex:1;min-width:0}

.msg-composer:focus-within{border-color:var(--brand-20);box-shadow:0 0 0 2px rgba(79,125,245,.06)}

.msg-send.active{background:var(--brand);color:var(--white);box-shadow:none}

/* ═══ SCHEDULE DROPDOWN ═══ */

.schedule-dropdown{position:fixed;z-index:10000;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:220px;padding:var(--space-1) 0;display:none}

.schedule-dropdown.show{display:block}

.schedule-dd-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);color:var(--text);cursor:pointer;border:none;background:none;width:100%;text-align:left}

.schedule-dd-item:hover{background:var(--bg-3)}

.schedule-dd-item svg{flex-shrink:0;color:var(--text-3)}

.schedule-custom-row{padding:var(--space-2) var(--space-4);border-top:1px solid var(--border)}

.schedule-custom-row input{width:100%;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:var(--fs-sm)}

.schedule-custom-row button{margin-top:var(--space-2);width:100%;padding:var(--space-2);border:none;border-radius:var(--radius-sm);background:var(--brand);color:var(--white);font-size:var(--fs-sm);cursor:pointer;font-weight:500}

.schedule-custom-row button:hover{opacity:.85}

.msg-scheduled-badge{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--brand-bg);color:var(--brand);font-size:var(--fs-2xs);font-weight:500;padding:2px var(--space-2);border-radius:var(--radius-full);margin-top:var(--space-1)}

.msg-bubble.scheduled{opacity:.7;border-left:3px solid var(--brand)}

/* ═══ CRM PANEL ═══ */

.crm-header{text-align:center;padding:var(--space-5) var(--space-4) var(--space-3);position:relative;overflow:hidden;min-width:0;flex-grow:0;flex-shrink:0}

.crm-header::before{display:none}

.crm-big-av{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:700;position:relative;z-index:1;box-shadow:0 0 0 2px rgba(255,255,255,.08);min-width:48px}

.crm-header .np-name,.crm-header #crm-sidebar-name{font-size:var(--fs-md);margin-top:var(--space-3);padding:2px var(--space-2);font-weight:700;letter-spacing:-.02em}

.crm-big-phone{font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--space-1);letter-spacing:.3px;font-variant-numeric:tabular-nums}

.crm-actions{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-1);position:relative;z-index:1;flex-wrap:wrap;margin:var(--space-3) 0 var(--space-1)}

.crm-act{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--hover-overlay);border:none;font-size:var(--fs-xs);color:var(--text-2);cursor:pointer;transition:background .12s ease,color .12s ease;white-space:nowrap;min-height:30px;font-weight:500}

.crm-act:hover{background:var(--overlay-light);border-color:var(--brand-20);color:var(--text);transform:none;box-shadow:none}

.crm-act svg{width:12px;height:12px}

.crm-act .crm-act-label{font-size:var(--fs-2xs)}

/* CRM Sections */

.crm-section{padding:var(--space-3) var(--space-4);min-width:0;overflow:visible;flex-grow:0;flex-shrink:0}

.crm-section+.crm-section{border-top:1px solid var(--border-lighter);padding-top:var(--space-3)}

.crm-stitle{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}

.crm-stitle::after{display:none}

.crm-detail-card{background:var(--overlay-light);border:1px solid var(--border-lighter);border-radius:var(--radius-md);padding:var(--space-1) 0;overflow:hidden}

.crm-field{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm)}

.crm-field+.crm-field{border-top:1px solid var(--overlay-light)}

.crm-field .l{color:var(--text-3);font-weight:400;display:flex;align-items:center;gap:var(--space-2)}

.crm-field .l .fi{font-size:var(--fs-sm);opacity:.4}

.crm-field .v{color:var(--text);-webkit-user-select:text;user-select:text;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* CRM notes */

.crm-note{background:var(--overlay-light);border-radius:var(--radius-md);padding:var(--space-4) var(--space-4);margin-bottom:var(--space-3);border:1px solid var(--border-lighter);position:relative;transition:background .2s ease,color .2s ease}

.crm-note:hover{background:var(--border-lighter);border-color:var(--border-light);box-shadow:none}

.crm-note-date{font-size:var(--fs-2xs);color:var(--text-3);margin-bottom:var(--space-2);letter-spacing:.3px}

.crm-note-text{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;overflow-wrap:break-word;word-break:break-word}

.crm-add-note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);border:1px dashed var(--border-light);color:var(--text-3);font-size:var(--fs-sm);cursor:pointer;background:none;width:100%;transition:background .2s ease,color .2s ease;margin-top:var(--space-2)}

.crm-add-note:hover{border-color:var(--brand-25);color:var(--brand);background:var(--brand-bg);border-style:solid}

/* Notion-style property rows */

.np-props{padding:2px 0}

.np-row{display:flex;align-items:center;height:auto;min-height:30px;padding:var(--space-1) 0;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s ease;position:relative;overflow:visible;gap:var(--space-2)}

.np-icon{width:18px;font-size:var(--fs-sm);color:var(--text-3);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:18px}

.np-label{width:110px;font-size:var(--fs-sm);color:var(--text-3);font-weight:500;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:110px}

.np-val{flex:1 1 auto;font-size:var(--fs-sm);color:var(--text);min-height:26px;line-height:1.4;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);overflow-wrap:break-word;word-break:break-word;transition:background .12s ease}

.np-val:hover{background:var(--border-lighter);cursor:pointer}

.np-val.empty{color:var(--text-3);opacity:.5;display:block;height:auto;max-height:22px;min-height:0;padding:2px var(--space-2);margin:0;flex-grow:0;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.4;box-sizing:border-box;font-style:italic;font-size:var(--fs-sm)}

.np-val.empty:hover{background:var(--brand-bg);color:var(--brand);opacity:1}

/* Np pills */

.np-pill{background:var(--border-light);border-radius:var(--radius-xs);padding:2px var(--space-2);font-size:var(--fs-xs);color:var(--text-2);display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap;border:none}

span.np-pill[data-tag]{background:var(--yellow-tag-12);color:var(--internal);border:1px solid var(--yellow-tag-25)}

span.np-pill[data-eth]{background:var(--orange-12);color:var(--orange);border:1px solid var(--orange-25)}

span.np-pill[data-pref]{background:var(--violet-12);color:var(--purple);border:1px solid var(--violet-25)}

span.np-pill.np-pill-blocked,span.np-pill-blocked[data-tag],span.np-pill-blocked[data-eth],span.np-pill-blocked[data-pref]{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-30)}

span.np-pill.np-pill-new,span.np-pill.np-pill-new[data-tag]{background:var(--mint-15);color:var(--green);border:1px solid var(--mint-30)}

span.np-pill.np-pill-vip,span.np-pill.np-pill-vip[data-tag]{background:var(--gold-15);color:var(--internal);border:1px solid var(--gold-30)}

.np-pill-x{cursor:pointer;color:var(--text-3);font-size:var(--fs-xs);line-height:1}

/* ═══ TAGS/CHIPS — Restrained, single signal ═══ */

.tag{font-size:var(--fs-xs);padding:2px var(--space-2);border-radius:var(--radius-xs);font-weight:500;display:inline-block;letter-spacing:0;background:var(--border-light);color:var(--text-2);border:none}

.tag-vip{background:var(--amber-12);color:var(--internal);border:none}

.tag-regular{background:var(--purple-alt-10);color:var(--purple);border:none}

.tag-new{background:var(--success-bg);color:var(--green);border:none}

.tag-blocked{background:var(--danger-bg);color:var(--danger);border:none}

.tag-loc{background:var(--blue-12b);color:var(--blue);border:none}

.tag-eth{background:var(--orange-12);color:var(--orange);border:none}

/* CRM tags */

.crm-tags{display:flex;gap:var(--space-2);flex-wrap:wrap}

.crm-tag{font-size:var(--fs-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:var(--space-1);transition:background .2s ease,color .2s ease;border:none;backdrop-filter:none;box-shadow:none;background:var(--hover-overlay)}

.crm-tag:hover{transform:none;box-shadow:none;background:var(--overlay-light)}

/* ═══ CRM STRIP ═══ */

.crm-strip{display:flex;gap:0;border-bottom:1px solid var(--border-lighter);background:var(--panel-list);flex-shrink:0;flex-wrap:nowrap;overflow:hidden;overflow-x:auto}

.crm-strip-cell{flex:1 1 0;padding:var(--space-2) var(--space-2);text-align:center;border-right:1px solid var(--border-lighter);min-width:0}

.crm-strip-cell .sl{font-size:var(--fs-2xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* ═══ ICON BUTTONS ═══ */

.icon-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);color:var(--text-3);cursor:pointer;background:transparent;border:none;transition:background .12s ease,color .12s ease}

.icon-btn:hover{background:var(--hover-overlay);color:var(--text)}

/* ═══ SEARCH BOX ═══ */

.search-box{margin:var(--space-2) var(--space-3);background:var(--border-lighter);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--border-light);transition:background .2s ease,color .2s ease}

.search-box:focus-within{border-color:var(--brand-20);box-shadow:none}

.search-box input{flex:1;background:none;border:none;outline:none;font-size:var(--fs-sm);color:var(--text)}

.search-box input:focus-visible{outline:none}

.search-box input::placeholder{color:var(--text-3)}

/* ═══ PILL/BUTTON ═══ */

.pill{display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--text-2);background:transparent;cursor:pointer;font-weight:500;border:1px solid var(--border-light);white-space:nowrap;transition:background .12s ease,color .12s ease}

.pill:hover{background:var(--overlay-light);color:var(--text);border-color:var(--overlay-light)}

.pill.active{background:var(--brand-bg);color:var(--brand);border-color:var(--brand-bg);box-shadow:none}

/* ═══ TOPBAR ═══ */

.topbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);padding-top:calc(16px + var(--safe-t));background:var(--panel-list);border-bottom:1px solid var(--hover-overlay);flex-shrink:0;backdrop-filter:none}

/* ═══ TOAST ═══ */

.toast{position:fixed;top:calc(20px + var(--safe-t));left:50%;transform:translateX(-50%) translateY(-80px);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:500;color:var(--white);z-index:9999;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s,visibility .3s;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--shadow-md)}

.toast.success{background:rgba(48,164,108,.92);box-shadow:var(--shadow-lg)}

.toast.error{background:rgba(229,72,77,.92);box-shadow:var(--shadow-lg)}

/* ═══ CONTEXT MENU ═══ */

.ctx-menu{display:none;position:fixed;background:var(--panel-elevated);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:100000;min-width:210px;padding:var(--space-1) 0;overflow:hidden;border:1px solid var(--overlay-light);backdrop-filter:blur(8px)}

.ctx-menu-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);color:var(--text);cursor:pointer;font-size:var(--fs-sm);font-weight:400;border:none;background:none;width:100%;text-align:left;transition:background .12s ease}

/* ═══ CONTACTS ═══ */

.contact-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--overlay-light);cursor:pointer;transition:background .12s ease,color .12s ease;user-select:none;position:relative}

.contact-item:hover{background:var(--border-light)}

.contact-alpha{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);padding:var(--space-2) var(--space-4);background:var(--panel-list);border-bottom:1px solid var(--hover-overlay);border-top:1px solid var(--hover-overlay);position:sticky;top:0;z-index:1}

/* ═══ EMPTY STATES ═══ */

#inbox-list .empty,#calls-list .empty,#contacts-list .empty,.contacts-list .empty{color:var(--text-3);font-size:var(--fs-sm);gap:var(--space-1);padding:var(--space-12) var(--space-6)}

.empty .big{font-size:var(--fs-icon-xl);opacity:.5;display:none}

.empty-icon{color:var(--text-3);opacity:.12;margin-bottom:var(--space-1);display:flex;align-items:center;justify-content:center}

.empty-icon svg{stroke:currentColor;width:40px;height:40px}

/* ═══ DROPDOWNS ═══ */

.inbox-filter-dropdown{position:fixed;min-width:240px;background:var(--panel-elevated);border:1px solid var(--overlay-light);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:500;padding:var(--space-2) 0;max-height:360px;overflow-y:auto}

.ifd-option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);white-space:nowrap;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);transition:background .12s ease,color .12s ease}

.ifd-option:hover{background:var(--border-light);color:var(--text)}

/* ═══ INTERNAL CHAT ═══ */

.msg-bubble.ic-sent{background:var(--role-admin);color:var(--white);align-self:flex-end;border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);box-shadow:var(--shadow-sm)}

.msg-bubble.ic-received{background:var(--panel-elevated);color:var(--text);align-self:flex-start;border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xs);border:none}

.internal-banner{background:var(--indigo-6);padding:var(--space-2) var(--space-4);font-size:var(--fs-xs);color:var(--indigo);border-bottom:1px solid var(--indigo-8);flex-shrink:0;font-weight:500}

/* ═══ SETTINGS ═══ */

.settings-card{background:var(--panel-sidebar);border-radius:var(--radius-md);border:1px solid var(--border-light);overflow:hidden;margin-bottom:var(--space-3)}

.settings-row{display:flex;align-items:center;height:48px;padding:0 var(--space-4);cursor:pointer;transition:background .12s ease,color .12s ease;border-bottom:none;user-select:none;position:relative}

.settings-row + .settings-row::before{content:'';position:absolute;top:0;left:16px;right:0;height:0.5px;background:var(--border-lighter)}

/* ═══ LOGIN ═══ */

.login-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--space-4);background:var(--panel-sidebar);padding:var(--space-10) var(--space-8);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-lg)}

.login-box input{background:var(--panel-list);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-4) var(--space-4);font-size:var(--fs-md);outline:none;-webkit-appearance:none;width:100%;color:var(--text);transition:background .2s ease,color .2s ease;appearance:none}

/* ═══ FAB ═══ */

.fab{position:absolute;bottom:calc(20px + var(--safe-b) + 60px);right:16px;width:52px;height:52px;background:var(--brand);border:none;border-radius:var(--radius-lg);color:var(--white);font-size:var(--fs-2xl);cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;z-index:1;transition:background .2s ease,color .2s ease}

/* ═══ KEYBOARD FOCUS ═══ */

.convo-item:focus-visible{background:var(--brand-bg);outline:none}
.sidebar-link:focus-visible,.sidebar-inbox:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--radius-sm)}

.icon-btn:focus-visible,.sidebar-link:focus-visible,.settings-row:focus-visible,.pill:focus-visible,.inbox-action-btn:focus-visible,.sidebar-member:focus-visible,.mob-tab:focus-visible,.settings-nav-item:focus-visible,.call-item:focus-visible,.msg-send:focus-visible,.inbox-filter-pill:focus-visible,.bulk-btn:focus-visible,.login-btn:focus-visible,.ifd-option:focus-visible,.np-dd-opt:focus-visible,.slash-item:focus-visible,.compose-send:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-xs)}

/* ═══ SIDEBAR ACTIVE STATE ═══ */

.sidebar-inbox.active{background:var(--brand-bg);border-left:2px solid var(--brand);padding-left:var(--space-2)}

.sidebar-inbox.active .sidebar-inbox-name{color:var(--text);font-weight:600}

/* ═══ SMOOTH SCROLLING ═══ */

/* chat-messages intentionally NOT in this list — chat must snap to bottom
   instantly on open (iMessage / Instagram behavior) with no scroll animation. */
.inbox-list,.contacts-list,.calls-list,.settings-list{scroll-behavior:smooth}

/* ═══ DRAFT INDICATOR ═══ */

/* ═══ MOBILE TOUCH TARGETS ═══ */

/* ═══ MSG STATES ═══ */

.msg-sending{opacity:.55}

.msg-sending .msg-meta::after{content:"Sending...";font-size:var(--fs-2xs);color:inherit;margin-left:var(--space-2)}

.msg-sent .msg-meta::after{content:"\2713";font-size:var(--fs-xs);color:inherit;margin-left:var(--space-1)}

.msg-failed{opacity:.85;border-left:3px solid var(--danger)}

.msg-failed .msg-meta::after{content:"Failed \00b7 Tap to retry";color:inherit;font-weight:500;cursor:pointer}

.msg-bubble.outbound.msg-failed .msg-meta::after{color:#ff4d4d}
.msg-bubble.outbound.msg-failed .msg-meta{color:#fff;opacity:1}

.msg-bubble.inbound.msg-failed .msg-meta::after{color:var(--danger)}

.msg-status.status-failed{color:#ff4d4d;font-weight:700}

.msg-failed:hover{opacity:1}

/* ═══ OFFLINE BANNER ═══ */

.offline-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;text-align:center;padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:500;transition:background .3s,color .3s,opacity .3s,border-color .3s ease}

.offline-banner.offline{display:block;background:var(--danger);color:var(--white)}

.offline-banner.reconnecting{display:block;background:var(--warning);color:var(--white)}

.offline-banner.online{display:block;background:var(--success);color:var(--white)}

/* ═══ SKELETON LOADING ═══ */

@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

.skel{border-radius:var(--radius-xs);background:linear-gradient(90deg,var(--bg-3) 25%,var(--surface-elevated) 50%,var(--bg-3) 75%);background-size:800px 100%;animation:shimmer 1.5s ease infinite}

.skel-circle{border-radius:50%}

.skel-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3)}

.skel-line{height:12px;flex:1}

.skel-line-short{height:8px;width:60%}

.skel-avatar{width:40px;height:40px;flex-shrink:0}

.skel-lines{display:flex;flex-direction:column;gap:var(--space-2);flex:1}

/* ═══ BUTTON DISABLED ═══ */

.ac-btn-save:disabled,.ac-btn-cancel:disabled,.ec-btn:disabled,.compose-send:disabled,.bulk-btn:disabled,.ie-btn:disabled,.login-btn:disabled,.settings-save-btn:disabled,button.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none;filter:none}

/* ═══ TOAST VARIANTS ═══ */

.toast.warning{background:var(--warning);color:var(--white)}

.toast.info{background:var(--brand);color:var(--white)}

/* ═══ CALL HOVER ═══ */

.call-item:hover{background:var(--border-light)}

/* ═══ TOGGLE DISABLED ═══ */

.settings-toggle.disabled,.settings-toggle:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ═══ EMPTY STATE BTN ═══ */

.empty-state-btn{margin-top:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--brand);color:var(--white);border:none;font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:opacity .12s ease}

.empty-state-btn:hover{opacity:.85}

/* ═══ MSG LOAD OLDER ═══ */

.msg-load-older{text-align:center;font-size:var(--fs-sm);color:var(--text-3);padding:var(--space-3) 0;font-weight:500}

/* ═══ APP BOOT LOADER ═══ */

.app-loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}

.app-loader.fade-out{opacity:0;pointer-events:none}

.app-loader-inner{text-align:center}

.app-loader-spinner{width:32px;height:32px;border:3px solid var(--surface-elevated);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto var(--space-3)}

.app-loader-text{color:var(--text-3);font-size:var(--fs-sm)}

/* ═══ COMPOSE VALIDATION ═══ */

.compose-input.invalid{border-color:var(--danger);box-shadow:0 0 0 2px rgba(239,68,68,.15)}

.compose-input.valid{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-15)}

/* ═══════════════════════════════════════════════════════════════════ */

/* LIGHT MODE — Premium Redesign Overrides                             */

/* ═══════════════════════════════════════════════════════════════════ */

/* ═══ Status dot colors ═══ */

.sidebar-member-dot.status-active{background:var(--green)}

.sidebar-member-dot.status-away{background:var(--status-away)}

.sidebar-member-dot.status-dnd{background:var(--status-dnd);border-radius:var(--radius-xs)}

.sidebar-member-dot.status-invisible{background:transparent;border:1.5px solid var(--text-3)}

.ic-dot.status-active{background:var(--green)}

.ic-dot.status-away{background:var(--status-away)}

.ic-dot.status-dnd{background:var(--status-dnd);border-radius:var(--radius-xs)}

.ic-dot.status-invisible{background:transparent;border:1.5px solid var(--text-3)}

.online-dot.status-active{background:var(--green)}

.online-dot.status-away{background:var(--status-away)}

.online-dot.status-dnd{background:var(--status-dnd);border-radius:var(--radius-xs)}

.online-dot.status-invisible{background:transparent;border:1.5px solid var(--text-3)}

/* ═══ Status popover ═══ */

.status-popover{position:fixed;width:260px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100;overflow:hidden;animation:stPIn .15s ease}

@keyframes stPIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.sp-hdr{padding:var(--space-3) var(--space-4) var(--space-2);font-size:var(--fs-xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

.sp-tw{padding:0 var(--space-3) var(--space-2)}

.sp-ti{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-3);color:var(--text);font-size:var(--fs-sm);outline:none;transition:border-color .12s ease;box-sizing:border-box}

.sp-ti:focus{border-color:var(--teal-40)}

.sp-ti::placeholder{color:var(--text-3)}

.sp-opts{padding:var(--space-1) 0}

.sp-opt{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;transition:background .12s ease}

.sp-opt:hover{background:var(--bg-3)}

.sp-opt.selected{background:var(--brand-bg)}

.sp-dt{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.sp-oi{flex:1;min-width:0}

.sp-ol{font-size:var(--fs-sm);font-weight:500;color:var(--text)}

.sp-od{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}

.sp-ck{color:var(--brand);font-size:var(--fs-base);font-weight:600}

/* Mobile Inbox Dropdown */

.mob-inbox-dd{position:absolute;top:100%;left:0;right:0;background:var(--bg-2);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:50;padding:var(--space-1) 0}

.mob-inbox-dd-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;transition:background .12s ease}

.mob-inbox-dd-item:active{background:var(--bg-3)}

.mob-inbox-dd-item.active{background:var(--brand-bg)}

.mob-inbox-dd-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);color:var(--white);flex-shrink:0}

.mob-inbox-dd-info{flex:1;min-width:0}

.mob-inbox-dd-name{font-size:var(--fs-base);font-weight:600;color:var(--text)}

.mob-inbox-dd-phone{font-size:var(--fs-sm);color:var(--text-3)}

/* Mobile Keypad */

/* ═══ MOBILE KEYPAD ═══ */

.keypad-panel{display:flex;flex-direction:column;background:var(--bg);height:100%;width:100%;padding-bottom:calc(56px + var(--safe-b))}

.keypad-header{text-align:center;padding:var(--space-4) var(--space-4) 0;cursor:pointer}

.keypad-inbox-name{font-size:var(--fs-md);font-weight:700;color:var(--text)}

.keypad-inbox-phone{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}

.keypad-display{display:flex;align-items:flex-end;justify-content:center;flex:1;padding:0 var(--space-10) var(--space-4);position:relative}

.keypad-number{font-size:36px;font-weight:300;color:var(--text);letter-spacing:2px;text-align:center;font-variant-numeric:tabular-nums;word-break:break-all}

.keypad-number:empty::before{content:'Enter number';color:var(--text-3);font-size:var(--fs-lg);font-weight:400;letter-spacing:1px}

.keypad-backspace{position:absolute;right:40px;bottom:20px;background:none;border:none;color:var(--text-3);cursor:pointer;padding:var(--space-2);border-radius:50%}

.keypad-backspace:active{background:var(--bg-3);color:var(--text)}

.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);padding:0 var(--space-12);flex-shrink:0}

.keypad-btn{background:var(--bg-3);border:none;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--text)}

.keypad-btn:active{background:var(--surface-elevated);opacity:.85}

.kb-digit{font-size:var(--fs-3xl-minus);font-weight:300;line-height:1.2}

.kb-letters{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);letter-spacing:2px;text-transform:uppercase;line-height:1;margin-top:1px}

.keypad-actions{display:flex;justify-content:center;align-items:center;gap:28px;padding:var(--space-5) var(--space-12) var(--space-6);flex-shrink:0}

.keypad-action-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}

.keypad-action-btn:active{opacity:.85}

.keypad-sms{background:var(--bg-3);color:var(--text-2)}

.keypad-call{background:var(--success);color:var(--white);width:64px;height:64px}

.keypad-call:active{background:var(--success)}

/* Global focus-visible */

button:focus-visible,[role="button"]:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

*:focus:not(:focus-visible){outline:none}

/* Unread/read distinction */

.convo-item[data-unread="true"] .convo-name{font-weight:700;color:var(--text)}

.convo-item:not([data-unread="true"]) .convo-name{font-weight:500;color:var(--text-2)}

.convo-item:not([data-unread="true"]) .convo-msg{color:var(--text-3)}

/* Swiping performance hint */

.swiping{will-change:transform}

/* Mute popover */

.mute-popover{position:absolute;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2);z-index:1000;min-width:180px;box-shadow:var(--shadow-md);animation:popIn .15s cubic-bezier(.2,0,0,1)}

@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.mute-option{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);color:var(--text)}

.mute-option:hover{background:var(--border-light)}

.mute-toggle{width:36px;height:20px;border-radius:var(--radius-md);background:var(--bg-3);position:relative;cursor:pointer;transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}

.mute-toggle::after{content:;position:absolute;width:16px;height:16px;border-radius:50%;background:var(--white);top:2px;left:2px;transition:transform .15s cubic-bezier(.2,0,0,1);box-shadow:var(--shadow-sm)}

.mute-toggle.active{background:var(--brand)}

.mute-toggle.active::after{transform:translateX(16px)}

.sidebar-mute-btn{display:none;cursor:pointer;padding:2px;border-radius:var(--radius-xs);color:var(--text-3);align-items:center;transition:opacity .12s ease;flex-shrink:0}

.sidebar-mute-btn.has-mute{display:flex;opacity:.5}

.sidebar-inbox:hover .sidebar-mute-btn.has-mute{opacity:0}

/* Call Routing */

.cr-section{padding:var(--space-3) var(--space-4) var(--space-4);border-top:1px solid var(--border);margin-top:var(--space-2)}

.cr-title{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:var(--space-3)}

.cr-list{display:flex;flex-direction:column;gap:var(--space-1)}

.cr-empty{padding:var(--space-5) var(--space-3);text-align:center;color:var(--text-3);font-size:var(--fs-sm)}

.cr-step{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md)}

.cr-step.dragging{opacity:.85;box-shadow:var(--shadow-lg);z-index:50}

.cr-handle{cursor:grab;color:var(--text-3);padding:2px;flex-shrink:0;display:flex}

.cr-handle:active{cursor:grabbing}

.cr-num{color:var(--text-3);font-size:var(--fs-sm);font-weight:600;min-width:16px;flex-shrink:0}

.cr-info{flex:1;min-width:0}

.cr-label{font-size:var(--fs-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cr-detail{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}

.cr-time{font-size:var(--fs-xs);color:var(--text-2);background:var(--bg-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0;transition:background .12s ease}

.cr-time:hover{background:var(--bg-3);color:var(--text)}

.cr-remove{color:var(--text-3);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);flex-shrink:0;display:flex;transition:color .12s,background .12s}

.cr-remove:hover{color:var(--danger);background:var(--danger-bg)}

.cr-add{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);margin-top:var(--space-1);color:var(--brand);font-size:var(--fs-sm);cursor:pointer;border-radius:var(--radius-md);transition:background .12s ease}

.cr-add:hover{background:var(--brand-bg)}

.cr-divider{height:1px;background:var(--border);margin:var(--space-4) 0}

.cr-fb-title{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:var(--space-2)}

.cr-fb-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}

.cr-radio{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);transition:color .12s ease}

.cr-radio:hover,.cr-radio.on{color:var(--text)}

.cr-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--text-3);position:relative;flex-shrink:0;transition:border-color .12s ease}

.cr-radio.on .cr-dot{border-color:var(--brand)}

.cr-radio.on .cr-dot::after{content:'';position:absolute;width:8px;height:8px;background:var(--brand);border-radius:50%;top:4px;left:4px}

.cr-fb-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);color:var(--text);font-size:var(--fs-sm);width:160px;outline:none;transition:border-color .12s ease}

.cr-fb-input:focus{border-color:var(--brand)}

.cr-picker{position:fixed;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-1);min-width:220px;max-width:300px;box-shadow:var(--shadow-lg);z-index:1000;animation:popIn .12s ease}

.cr-picker-title{padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

.cr-picker-item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);color:var(--text);display:flex;align-items:center;gap:var(--space-2);transition:background .12s ease}

.cr-picker-item:hover{background:var(--border-light)}

.cr-picker-item .sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}

.cr-picker-item.brand{color:var(--brand)}

/* ═══ INTERACTIVE STATE AUDIT — missing :active press feedback ═══ */

.sidebar-link:active,.sidebar-inbox:active,.sidebar-member:active{opacity:.85}

.settings-nav-item:active{opacity:.85}

.settings-row.danger:active{opacity:.85}

.inbox-tab:active{opacity:.85}

.inbox-dd-item:active{opacity:.85}

.pill:active{opacity:.85}

.ctx-menu-item:active{opacity:.85}

.compose-send:active{opacity:.85}

.compose-to-cancel:active{opacity:.85}

.compose-result:active{opacity:.85}

.profile-row:active{opacity:.85}

.profile-save-btn:active{opacity:.85}

.profile-av-wrap:active{opacity:.85}

.avatar-picker-tab:active{opacity:.85}

.emoji-cell:active{opacity:.85}

.nc-save-btn:active{opacity:.85}

.dialpad-close:active{opacity:.85}

.dialpad-del:active{opacity:.85}

.chat-attach:active{opacity:.85}

.ep-tab:active{opacity:.85}

.ep-grid span:active{opacity:.85}

.msg-tbtn:active{opacity:.85}

.msg-tbtn:focus-visible,.dialpad-key:focus-visible,.keypad-btn:focus-visible,.incall-btn:focus-visible,.incall-dtmf-key:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.note-act:active{opacity:.85}

.note-edit-btns .save:active,.note-edit-btns .cancel:active{opacity:.85}

.np-row:active{opacity:.85}

.np-name:active{opacity:.85}

.np-dd-opt:active{opacity:.85}

.np-pill-x:active{opacity:.85}

.slash-item:active{opacity:.85}

.tmpl-card:active{opacity:.85}

.tmpl-card-menu:active{opacity:.85}

.tmpl-card-dd-item:active{opacity:.85}

.tmpl-edit-cancel:active,.tmpl-edit-save:active{opacity:.85}

.tmpl-close:active{opacity:.85}

.team-card:active{opacity:.85}

.team-menu-btn:active{opacity:.85}

.team-dd-item:active{opacity:.85}

.team-close:active{opacity:.85}

.team-inv-copy:active{opacity:.85}

.team-inv-revoke:active{opacity:.85}

.team-role-pill:active{opacity:.85}

.team-link-done:active{opacity:.85}

.ic-conv-row:active{opacity:.85}

.ic-back-header:active{opacity:.85}

.ic-ctx-item:active{opacity:.85}

.ic-reaction-plus:active{opacity:.85}

.ic-edit-btns .ic-edit-save:active,.ic-edit-btns .ic-edit-cancel:active{opacity:.85}

.delete-contact-btn:active{opacity:.85}

.ie-btn:active{opacity:.85}

.ac-btn-cancel:active{opacity:.85}

.empty-state-btn:active{opacity:.85}

.ifd-option:active{opacity:.85}

.ifd-clear:active{opacity:.85}

.call-item:active{opacity:.85}

.mute-option:active{opacity:.85}

.epp-close:active{opacity:.85}

.epp-cell:active{opacity:.85}

.stmpl-card:active{opacity:.85}

.stmpl-action:active{opacity:.85}

.stmpl-cancel:active,.stmpl-save:active{opacity:.85}

.settings-tmpl-add:active{opacity:.85}

.settings-inbox-card:active{opacity:.85}

.settings-inbox-avatar:active{opacity:.85}

.settings-inbox-display-name:active{opacity:.85}

.sp-opt:active{opacity:.85}

.sp-btn.ok:active,.sp-btn.cancel:active{opacity:.85}

.sakura-confirm-btn.cancel:active{opacity:.85}

.sakura-confirm-btn.danger:active{opacity:.85}

.sakura-confirm-btn.primary:active{opacity:.85}

.theme-toggle:active{opacity:.85}

.sk-field-pill:active{opacity:.85}

.sk-field-add button:active{opacity:.85}

.contacts-add-split:active{opacity:.85}

.contacts-split-dd-item:active{opacity:.85}

.bulk-label-back:active{opacity:.85}

.cfd-panel-item:active{opacity:.85}

.cfd-panel-clear:active{opacity:.85}

.cr-time:active{opacity:.85}

.cr-remove:active{opacity:.85}

.cr-add:active{opacity:.85}

.cr-radio:active{opacity:.85}

.cr-picker-item:active{opacity:.85}

.pw-eye:active{opacity:.85}

.msg-failed:active{opacity:.85}

.crm-tag:active{opacity:.85}

.sidebar-inbox-menu:active{opacity:.85}

.msg-send.active:active{opacity:.85}

.mob-inbox-dd-item:active{opacity:.85}

/* Inline tag pills in conversation list */

/* Internal note banner (clean blue strip below header) */

/* Note input row */

/* Conversation list note preview */

/* Action buttons — always pinned to bottom */

/* Video elements */

/* When remote video is active: local becomes PiP */

/* Light mode */

/* IC header call buttons */

/* Mobile */

/* Light mode overrides for notes */

/* ═══ DEFAULT HIDDEN VIEWS (toggled via style.display in JS) ═══ */
#view-chat,#view-crm,#view-contacts,#view-calls,#view-settings,#view-compose,#view-contact-profile,#view-keypad,#calls-inline-list,#tmpl-edit,#team-link-result{display:none}

/* ═══ LAYOUT PROPERTIES (moved from inline styles) ═══ */
#screen-main{flex-direction:row}
#main-content{flex:1;display:flex;height:100%;min-height:0;overflow:hidden}
#inbox-desk-header{padding-top:28px}
#mob-header-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);font-weight:700;color:var(--white);flex-shrink:0}
#mob-profile-header{cursor:pointer;text-align:center;position:absolute;left:50%;transform:translateX(-50%)}
#mob-profile-name{font-size:var(--fs-md);font-weight:700}
#mob-profile-phone{font-size:12px;color:var(--text-3)}
#profile-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
#calls-inline-list{flex:1;overflow-y:auto}
#attach-thumb{width:40px;height:40px;border-radius:var(--radius-sm);object-fit:cover}
#attach-name{flex:1;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#attach-remove{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-md)}
#tmpl-var-preview{padding:var(--space-2) var(--space-3);font-size:12px;color:var(--text-3);background:var(--bg-2);border-top:1px solid var(--border);line-height:1.5;white-space:pre-wrap;max-height:60px;overflow-y:auto}
#emoji-btn{position:relative}
#compose-attach-btn{cursor:pointer}
#compose-attach-name{font-size:var(--fs-sm);color:var(--text-3)}
#compose-templates{display:flex;gap:6px;flex-wrap:wrap}
#incall-avatar{background:var(--overlay-medium)}
#tmpl-var-btn{font-size:12px;padding:var(--space-1) 10px;border:1px solid var(--border);background:var(--bg-2);color:var(--text-2);border-radius:var(--radius-sm);cursor:pointer}
#pwa-drag-bar{position:fixed;top:0;left:0;right:0;height:12px;-webkit-app-region:drag;z-index:99999;pointer-events:auto}
.inbox-topbar-mobile{position:relative}
.contacts-desk-search{display:flex;align-items:center;gap:var(--space-2)}
#contacts-search{flex:1}
.bulk-btn{position:relative}
#view-calls{position:relative}
#incall-keypad-btn{background:var(--overlay-medium)}

/* ═══ KEYBOARD FOCUS INDICATORS ═══ */
button:focus-visible,[role="button"]:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}