/* EPC AI CHAT shared visual language — merchant and administrator surfaces. */
:root{--navy-950:#071d3a;--navy-900:#0b2d5b;--primary:#2563eb;--cyan:#06b6d4;--purple:#8b5cf6;--success:#10b981;--amber:#f59e0b;--rose:#f43f5e;--canvas:#f5f9ff;--surface:#fff;--line:#e4ecf5;--muted:#64748b;--green:#2563eb;--blue:#2563eb;--nav:#0b2d5b;--shadow:0 4px 16px rgba(15,46,89,.06);font-family:Inter,"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#142b49;background:var(--canvas);font-size:14px;line-height:1.57;font-variant-numeric:tabular-nums}
body{background:var(--canvas);color:#142b49}h1{font-size:24px;line-height:32px;letter-spacing:normal}h2{font-size:20px;line-height:28px}h3{font-size:16px;line-height:24px}small,.muted,.help{font-size:12px;color:var(--muted)}button,input,textarea,select{font-family:inherit}button,a{transition:background-color .15s ease-out,box-shadow .18s ease-out,transform .15s ease-out}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #2563eb40;outline-offset:3px}button:not(:disabled):active{transform:translateY(1px)}input:not([type=checkbox]):not([type=radio]),select{min-height:40px}input,textarea,select{font-size:13px;border:1px solid #dce6f2;border-radius:8px;padding:9px 12px;color:#142b49;background:#fff}input::placeholder,textarea::placeholder{color:#94a3b8}input:focus,textarea:focus,select:focus{outline:3px solid #2563eb1f;border-color:var(--primary)}label{font-size:13px;font-weight:600}input[type=checkbox]{accent-color:var(--primary)}.primary,.secondary,.danger,.mode-button{min-height:36px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;line-height:20px;gap:8px;box-shadow:none}.primary{background:var(--primary);color:#fff}.primary:hover{background:#1d4ed8}.secondary{background:#eff6ff;color:var(--primary);border:1px solid #dbeafe}.danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.card,.contact-card,.connect-card{border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow)}.card-title h2{font-size:16px;line-height:24px}.page-heading{margin-bottom:20px}.page-heading p{font-size:12px}.pill,.badge{border-radius:999px;font-size:11px;line-height:18px;padding:2px 8px}.pill{background:#ecfdf5;color:#15803d;border-color:#d1fae5}.pill.warn{background:#fffbeb;color:#b45309;border-color:#fde68a}.pill.neutral{background:#f1f5f9;color:#64748b}.metric{padding:16px;border-radius:12px;border-color:var(--line);box-shadow:var(--shadow)}.metric strong{font-size:28px;line-height:34px}.metric p,.metric small{font-size:12px}.metric:nth-child(4n+1){background:#eff6ff}.metric:nth-child(4n+2){background:#ecfeff}.metric:nth-child(4n+3){background:#ecfdf5}.metric:nth-child(4n){background:#f5f3ff}.metrics{gap:16px}.grid-two{gap:20px}table{font-size:13px}th{height:44px;background:#f3f7fc;color:#64748b;font-size:12px;font-weight:600}td{height:52px;padding:12px 14px;border-color:var(--line)}tbody tr:hover{background:#f8fbff}.tabs button{font-size:13px}.tabs button.selected{color:var(--primary);border-color:var(--primary)}dialog{border-radius:16px;max-height:85dvh;border:1px solid var(--line);color:#142b49;box-shadow:0 24px 70px #071d3a33}dialog::backdrop{background:rgba(7,29,58,.45)}.dialog-head h2{font-size:18px}#editor{padding:24px}.notice{font-size:13px;border-color:#dbeafe;background:#eff6ff;color:#1e40af}.attachment-upload{background:#faf8ff;border:2px dashed #c4b5fd;border-radius:12px;padding:24px}.attachment-upload .primary{background:var(--purple)}
/* Persistent application frame. */
#shell>.sidebar{width:220px;padding:0 12px 16px;background:linear-gradient(180deg,#071d3a,#0b2d5b 65%,#104ea0);box-shadow:none;overflow-y:auto}#shell>.sidebar .brand-image{width:180px;height:72px;margin:0 auto 12px}#shell>.sidebar nav{gap:4px}#shell>.sidebar nav button{height:40px;min-height:40px;padding:0 12px;gap:12px;border-radius:8px;font-size:13px;color:#dceaff}#shell>.sidebar nav button span{font-size:13px;font-weight:500}#shell>.sidebar nav svg{width:18px;height:18px;flex:0 0 18px;color:#d5e7ff}#shell>.sidebar nav button:hover{background:#ffffff17}#shell>.sidebar nav button.active{background:#2563eb;box-shadow:inset 3px 0 #06b6d4;color:white}#shell>.sidebar nav button.active svg{color:white}#shell>.sidebar .logout{font-size:13px;min-height:36px;padding:8px 12px;background:#ffffff0d;border:1px solid #ffffff26}#shell>.main{margin-left:220px}.topbar{height:64px;padding:0 24px;background:white;border-bottom:1px solid var(--line);font-size:13px}.content{padding:24px;max-width:1600px}.sidebar-bottom{padding-top:20px}#shell .workspace{display:none}.ui-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
/* Conversation density follows the same typography as every other screen. */
.inbox-top{padding:16px 20px;gap:16px}.inbox-title h1{font-size:24px}.inbox-title p{font-size:12px}.inbox-toolbar{min-width:0;gap:8px;flex-wrap:wrap}.inbox-search{max-width:280px}.inbox-toolbar .secondary,.wa-status{font-size:12px}.inbox-sync{padding:8px 20px;font-size:11px;background:#eff6ff}.inbox{grid-template-columns:160px 280px minmax(0,1fr)}.inbox-folders{padding:12px 8px;background:#f8fbff}.inbox-folders button{font-size:12px;padding:9px 10px}.conversation{min-height:76px;padding:12px;gap:10px}.conversation .contact-avatar{width:36px;height:36px;flex-basis:36px}.conversation strong{font-size:13px}.conversation small{font-size:11px}.conversation p{font-size:12px;margin-top:3px}.conversation.active{background:#eaf2ff}.conversation:hover{background:#f1f7ff}.chat-panel>header{min-height:60px;padding:12px 16px;gap:10px;flex-wrap:wrap}.chat-identity strong{font-size:13px}.chat-identity small{font-size:11px}.chat-identity .contact-avatar{width:36px;height:36px;flex-basis:36px}.chat-actions{gap:6px}.chat-actions .mode-button{font-size:12px;padding:6px 10px;min-height:32px;white-space:nowrap}.mode-button.ai.active{background:#ecfeff;color:#0891b2;border-color:#a5f3fc}.mode-button.manual.active{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}.messages{padding:20px;background:#f8fbff;background-image:none}.message{padding:10px 14px;border-radius:12px;background:#f1f5f9;border-color:transparent;box-shadow:none;font-size:13px;max-width:75%}.message.out{background:#e7f1ff;border-color:transparent}.message p{font-size:13px;line-height:1.7}.message small{font-size:10px}.reply-box{padding:12px 16px;gap:10px;min-height:72px}.reply-box textarea{min-height:44px;font-size:13px;border-radius:10px}.reply-box .primary{min-height:36px}.unread-dot{background:#f43f5e}.followup-summary{font-size:12px}
@media(min-width:768px) and (max-width:1199px){#shell>.sidebar{width:68px;padding:0 8px 12px}#shell>.main{margin-left:68px}#shell>.sidebar .brand-image{width:48px;height:64px}#shell>.sidebar nav button{justify-content:center;padding:0}#shell>.sidebar nav button span,#shell>.sidebar .logout span{display:none}#shell>.sidebar .logout{justify-content:center}.content{padding:16px}.inbox{grid-template-columns:120px 260px minmax(0,1fr)}}
@media(max-width:767px){#shell>.sidebar{position:static;width:100%;padding:0 12px 12px}#shell>.sidebar .brand-image{width:140px;height:56px;margin:0}#shell>.sidebar nav{display:flex;overflow-x:auto}#shell>.sidebar nav button{width:auto;flex-shrink:0;padding:0 12px}#shell>.sidebar .sidebar-bottom{display:none}#shell>.main{margin-left:0}.topbar{height:56px;padding:0 16px}.content{padding:16px}.page-heading{gap:12px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:16px}.inbox-top{padding:12px}.inbox-title p{display:none}.inbox-toolbar{width:100%}.inbox-search{max-width:none;flex:1}.inbox{grid-template-columns:1fr}.chat-actions{flex-wrap:wrap}.message{max-width:88%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Dashboard uses live records; no illustrative conversion metrics. */
body.dashboard-mode{overflow:auto}body.dashboard-mode .topbar{display:flex}body.dashboard-mode .content{height:auto;overflow:visible;padding:24px}body.dashboard-mode .main{height:auto}.epc-dashboard{display:grid;gap:20px}.epc-welcome{display:flex;align-items:center;justify-content:space-between;gap:16px}.epc-welcome h1{font-size:20px;margin:0 0 6px}.epc-welcome p{font-size:12px;color:var(--muted);margin:0}.epc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.epc-kpi{text-align:left;border:1px solid #dbeafe;border-radius:12px;padding:16px;background:#eff6ff;color:#2563eb;min-height:124px;box-shadow:var(--shadow)}.epc-kpi strong{display:block;font-size:28px;line-height:34px;margin:8px 0}.epc-kpi-label{font-size:12px;font-weight:600}.epc-kpi small{font-size:11px}.epc-kpi.cyan{background:#ecfeff;border-color:#cffafe;color:#0891b2}.epc-kpi.green{background:#ecfdf5;border-color:#d1fae5;color:#059669}.epc-kpi.rose{background:#fff1f2;border-color:#ffe4e6;color:#e11d48}.epc-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0f2e591a}.epc-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px}.epc-dashboard-grid>.card{margin:0;min-width:0}.epc-activity{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 0;background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;color:#142b49}.epc-activity:last-child{border-bottom:0}.epc-activity>span:nth-child(2){flex:1;min-width:0}.epc-activity strong{display:block;font-size:13px}.epc-activity small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;max-width:100%}.epc-activity time{font-size:11px;color:#94a3b8;max-width:110px;text-align:right}.epc-avatar{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#eff6ff;color:#2563eb;font-size:14px;font-weight:600}.epc-avatar.green{background:#ecfdf5;color:#059669}.epc-avatar.purple{background:#f5f3ff;color:#8b5cf6}.epc-avatar.cyan{background:#ecfeff;color:#0891b2}.epc-ai-visual{height:108px;display:grid;place-items:center;background:linear-gradient(120deg,#eff6ff,#ecfeff);border-radius:12px;margin:12px 0}.epc-ai-visual svg{width:88px;height:88px}.epc-dashboard .wide{margin-top:16px}.epc-dashboard .card-title{margin-bottom:8px}
@media(max-width:1199px){.epc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.epc-dashboard-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){body.dashboard-mode .content{padding:16px}.epc-dashboard-grid{grid-template-columns:1fr}.epc-kpis{gap:12px}.epc-kpi{padding:14px}.epc-welcome{align-items:flex-start;flex-wrap:wrap}}
/* Shared navigation: compact desktop rail and an accessible mobile drawer. */
#sidebar-collapse{display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:8px 12px;margin-bottom:8px;border:0;border-radius:8px;background:transparent;color:#dceaff;font-size:13px;cursor:pointer}#sidebar-collapse:hover{background:#ffffff17}#sidebar-collapse>span:first-child{font-size:24px;line-height:20px}#mobile-navigation{display:none}.nav-backdrop{display:none}#shell>.sidebar{transition:width 220ms ease-out,transform 220ms ease-out}#shell>.main{transition:margin-left 220ms ease-out}#shell>.sidebar nav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#shell>.sidebar .sidebar-bottom{margin-top:auto}#shell>.sidebar{display:flex;flex-direction:column}
@media(min-width:768px){body.navigation-collapsed #shell>.sidebar{width:68px;padding:0 8px 12px}body.navigation-collapsed #shell>.main{margin-left:68px}body.navigation-collapsed #shell>.sidebar .brand-image{width:48px;height:64px}body.navigation-collapsed #shell>.sidebar nav button{justify-content:center;padding:0}body.navigation-collapsed #shell>.sidebar nav button span,body.navigation-collapsed #shell>.sidebar .logout span,body.navigation-collapsed #sidebar-collapse>span:last-child{display:none}body.navigation-collapsed #sidebar-collapse{justify-content:center}body.navigation-collapsed #sidebar-collapse>span:first-child{transform:rotate(180deg)}}
@media(min-width:768px) and (max-width:1199px){#sidebar-collapse{display:none}}
@media(max-width:767px){#shell>.sidebar{position:fixed;inset:0 auto 0 0;z-index:101;width:220px;height:100dvh;padding:0 12px 16px;transform:translateX(-100%);visibility:hidden}body.navigation-open #shell>.sidebar{transform:translateX(0);visibility:visible}#shell>.sidebar nav{display:flex;flex-direction:column;overflow:visible}#shell>.sidebar nav button{width:100%;flex-shrink:0;justify-content:flex-start}#shell>.sidebar .sidebar-bottom{display:block}#shell>.sidebar .brand-image{width:180px;height:72px}#shell>.main{margin-left:0;width:100%}#shell .topbar{display:flex!important;height:56px;min-height:56px;gap:12px;padding:0 12px}#shell .topbar>.pill{display:none}#mobile-navigation{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px}.nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:100;width:100%;height:100%;border:0;border-radius:0;background:rgba(7,29,58,.45)}body.navigation-open{overflow:hidden}#sidebar-collapse>span:last-child{font-size:0}#sidebar-collapse>span:last-child:after{content:'Close';font-size:13px}}
@media(prefers-reduced-motion:reduce){#shell>.sidebar,#shell>.main{transition:none}}
.mobile-chat-back{display:none}
@media(max-width:767px){body.inbox-mode #shell>.main{height:100dvh;min-height:0;overflow:hidden}body.inbox-mode #shell .content{height:calc(100dvh - 56px);min-height:0;padding:0}body.inbox-mode #shell .inbox-shell{height:100%;min-height:0;width:100%}body.inbox-mode .inbox{display:flex;flex:1;min-height:0;flex-direction:column}.inbox .inbox-folders{display:none}.inbox .conversation-list{flex:1;min-height:0;max-height:none;width:100%;border:0}.inbox .chat-panel{display:none}.inbox-top{padding:12px;flex-wrap:wrap}.inbox-toolbar{width:100%;min-width:0;flex-wrap:wrap;gap:8px}.inbox-search{flex:1 1 100%;min-width:0}.inbox-toolbar>button{font-size:11px;padding:6px 10px;min-height:32px}.inbox-title{display:none}.inbox-sync{font-size:11px;padding:8px 12px}body.mobile-chat-open .inbox-top,body.mobile-chat-open .inbox-sync,body.mobile-chat-open .conversation-list{display:none}body.mobile-chat-open .inbox .chat-panel{display:flex;flex:1;width:100%;height:100%}.chat-panel>header{position:relative;display:flex;flex-wrap:wrap;gap:10px;padding:10px 12px}.mobile-chat-back{display:inline-flex;align-items:center;justify-content:center;font-size:26px;width:32px;min-height:36px;flex:0 0 32px}.chat-identity{flex:1}.chat-actions{display:flex!important;flex:1 1 100%;flex-wrap:wrap;gap:6px}.chat-actions .mode-button{font-size:10px;min-height:30px;padding:5px 8px}.messages{padding:12px}.reply-box{padding:10px;gap:6px;grid-template-columns:auto minmax(0,1fr) auto}.reply-tools{display:flex}.reply-tools button{width:28px;height:32px;font-size:18px}.reply-box .primary{min-width:48px;padding:8px}.reply-box textarea{min-height:44px;max-height:120px}.topbar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Knowledge categories count and filter actual stored files. */
body.page-products{overflow:auto}body.page-products #shell>.main,body.page-products .content{height:auto;overflow:visible}body.page-products .knowledge-hub{height:auto;display:grid;grid-template-rows:none;gap:16px}body.page-products .knowledge-hero{min-height:64px;height:auto;padding:0;background:none;border:0}body.page-products .knowledge-hero h1{font-size:20px}.knowledge-hero .knowledge-emblem{width:44px;height:44px;border-radius:12px}.knowledge-emblem svg{width:24px;height:24px}.knowledge-bubble{display:none}.knowledge-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.knowledge-category{display:flex;align-items:center;gap:12px;text-align:left;min-height:88px;padding:16px;border-radius:12px;background:#eff6ff;border:2px solid transparent;color:#2563eb}.knowledge-category i{display:grid;place-items:center;width:36px;height:36px}.knowledge-category svg{width:22px;height:22px}.knowledge-category span{font-size:12px;font-weight:600}.knowledge-category strong{font-size:18px;margin-left:auto}.knowledge-category.pdf{background:#fffbeb;color:#d97706}.knowledge-category.image{background:#ecfeff;color:#0891b2}.knowledge-category.web{background:#f5f3ff;color:#8b5cf6}.knowledge-category:hover,.knowledge-category[aria-pressed=true]{border-color:currentColor}.knowledge-columns{grid-template-columns:minmax(0,1fr) 280px;gap:16px}.knowledge-entry,.knowledge-tips,.knowledge-library{border-radius:12px;padding:20px;min-height:0}.knowledge-title h2,.knowledge-tips h2{font-size:16px}.knowledge-title p,.knowledge-tips p{font-size:12px}.knowledge-drop{min-height:150px;padding:16px;background:#faf8ff;border:2px dashed #c4b5fd;border-radius:12px}.knowledge-drop>span{color:#8b5cf6}.knowledge-drop svg{width:32px;height:32px}.knowledge-drop h3{font-size:14px}.knowledge-drop p{font-size:12px}.knowledge-drop label,[data-knowledge-panel=upload]>.primary{background:#8b5cf6;color:white;border-color:#8b5cf6}.knowledge-tabs{gap:8px}.knowledge-tabs button{border-radius:8px;padding:10px}.knowledge-tabs strong{font-size:13px}.knowledge-tabs small{font-size:11px}.knowledge-entry textarea{min-height:150px;height:160px;font-size:13px}.knowledge-tips>div{padding:10px 0}.knowledge-tips strong{font-size:13px}.knowledge-library-heading{gap:16px}.knowledge-filters input{height:38px}.knowledge-library .table-wrap{max-height:400px}
@media(max-width:1199px){.knowledge-columns{grid-template-columns:1fr}.knowledge-tips{display:none}}
@media(max-width:767px){.knowledge-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.knowledge-category{min-height:80px;padding:12px}.knowledge-library-heading{flex-direction:column;align-items:stretch}.knowledge-filters{width:100%;flex-wrap:wrap}.knowledge-filters input{min-width:0;flex:1}.knowledge-tabs button{padding:8px}.knowledge-tabs small{display:none}.knowledge-hero p{font-size:12px}.knowledge-hero .knowledge-emblem{display:none}}
body.page-products .knowledge-entry textarea#knowledge-text{height:180px;min-height:150px;flex:none}body.page-products .knowledge-columns{align-items:start}body.page-products .knowledge-tips>div{padding:10px;background:transparent}body.page-products .knowledge-tips p{margin:4px 0;line-height:1.5}body.page-products .knowledge-entry form{display:block}body.page-products .knowledge-entry .knowledge-tabs{margin-bottom:12px}
.mode-button .ui-icon{width:14px;height:14px;flex:0 0 14px}.mode-button{display:inline-flex;align-items:center;justify-content:center;gap:5px}.reply-box .primary{display:inline-flex;align-items:center;justify-content:center;gap:6px}.inbox-search>.ui-icon{width:16px;height:16px;flex:0 0 16px}.epc-kpi{transition:transform 180ms ease-out,box-shadow 180ms ease-out}button:focus-visible,a:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
/* Calendar and an adjacent list share the same filtered appointment records. */
body.page-appointments{overflow:auto}body.page-appointments #shell>.main,body.page-appointments .content{height:auto;overflow:visible}.appointment-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:20px}.appointment-calendar-main{min-width:0}.appointment-agenda{border-left:1px solid var(--line);padding-left:20px;max-height:580px;overflow-y:auto}.appointment-agenda h3{display:flex;align-items:center;justify-content:space-between;font-size:16px;margin:0 0 16px}.appointment-agenda-row{display:flex;gap:12px;width:100%;min-height:64px;margin:0 0 10px;padding:10px;border:1px solid var(--line);border-left:3px solid #2563eb;border-radius:8px;background:white;text-align:left}.appointment-agenda-row time{font-size:12px;font-weight:600;flex:0 0 76px}.appointment-agenda-row span{min-width:0}.appointment-agenda-row strong{font-size:13px;display:block}.appointment-agenda-row small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.appointment-agenda-row em{display:inline-block;margin-top:4px;padding:2px 8px;font-size:11px;font-style:normal;border-radius:999px;background:#dbeafe;color:#1d4ed8}.appointment-agenda-row.status-confirmed{border-left-color:#10b981}.appointment-agenda-row.status-confirmed em{background:#dcfce7;color:#15803d}.appointment-agenda-row.status-pending{border-left-color:#f59e0b}.appointment-agenda-row.status-pending em{background:#fef3c7;color:#b45309}.appointment-agenda-row.status-cancelled{border-left-color:#ef4444}.appointment-agenda-row.status-cancelled em{background:#fee2e2;color:#b91c1c}.appointment-calendar .calendar-day{min-height:72px}.appointment-calendar .calendar-day>header b{font-size:12px}.appointment-calendar .calendar-booking{font-size:11px;padding:4px}.appointment-calendar .calendar-booking small{display:none}.calendar-toolbar h2{font-size:16px}.calendar-navigation{flex-wrap:wrap}.calendar-navigation button,.calendar-navigation select{height:32px;min-height:32px;font-size:12px}.calendar-controls{flex-wrap:wrap;gap:12px}
@media(max-width:1199px){.appointment-layout{grid-template-columns:1fr}.appointment-agenda{border-left:0;border-top:1px solid var(--line);padding:16px 0 0;max-height:340px}}
@media(max-width:767px){.calendar-toolbar{flex-direction:column;align-items:stretch}.calendar-navigation{gap:6px}.appointment-calendar .calendar-day{min-height:54px;padding:4px}.calendar-legend{flex-wrap:wrap}.calendar-weekday b{font-size:10px}.appointment-calendar .calendar-booking strong{display:none}.appointment-calendar .calendar-booking time{font-size:9px}.calendar-controls>div{flex-wrap:wrap}}
/* Flow forms retain the existing schedule and seven-step maximum. */
.flow-heading h1{font-size:20px}.flow-heading .muted,.flow-editor .muted{font-size:12px}.flow-step{border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0;background:white;box-shadow:0 4px 16px rgba(15,46,89,.04)}.flow-step h3{font-size:14px;margin:0 0 12px;color:#142b49}.flow-step:nth-of-type(3n+1){border-left:3px solid #06b6d4}.flow-step:nth-of-type(3n+2){border-left:3px solid #8b5cf6}.flow-step:nth-of-type(3n){border-left:3px solid #f59e0b}.flow-step textarea{font-size:13px;border-radius:8px}.flow-heading{margin-bottom:20px}.flow-setting-grid{gap:16px}.flow-step-grid{gap:16px}.flow-step label{font-size:12px}.flow-footer{margin-top:16px}
/* Preserve folder filters in a popover while giving the chat its own detail pane. */
.inbox{position:relative;grid-template-columns:300px minmax(0,1fr)}.inbox .inbox-folders{display:none;position:absolute;inset:0 auto 0 0;z-index:12;width:260px;background:white;box-shadow:8px 0 24px #142b4920;border-right:1px solid var(--line)}body.inbox-filters-open .inbox .inbox-folders{display:block}.customer-details{display:none;background:#f8faff;border-left:1px solid var(--line);padding:20px;overflow:auto}.customer-details h2{font-size:14px}.customer-details-identity{display:flex;align-items:center;gap:10px;margin:20px 0}.customer-details-identity strong{font-size:13px;overflow-wrap:anywhere}.customer-details dl{margin:0}.customer-details dt{font-size:12px;color:#64748b;margin-top:20px}.customer-details dd{margin:6px 0 0;font-size:13px;overflow-wrap:anywhere}.customer-details-close{margin-left:auto}.customer-details .pill{margin:2px 0}.customer-details .card-title{display:flex;align-items:center;justify-content:space-between}
@media(min-width:1440px){.inbox{grid-template-columns:300px minmax(420px,1fr) 280px}.customer-details{display:block}.customer-details-close{display:none}}
@media(min-width:768px) and (max-width:1439px){.inbox{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:1439px){body.customer-details-open .customer-details{display:block;position:absolute;inset:0 0 0 auto;width:280px;max-width:100%;z-index:15;box-shadow:-8px 0 24px #142b4920}}
@media(max-width:767px){.inbox .conversation-list{width:100%}body.customer-details-open .customer-details{width:min(320px,100%)}.chat-actions .ui-icon{width:14px;height:14px}}
.chat-panel>header{flex-wrap:wrap;gap:10px}.chat-actions{flex-wrap:wrap}.conversation{min-height:72px;padding:12px}.conversation-copy p{margin-top:4px}
@media(min-width:1440px){body.customer-details-collapsed .customer-details{display:none}body.customer-details-collapsed .inbox{grid-template-columns:300px minmax(420px,1fr)}}
.appointment-calendar .calendar-weekday,.appointment-calendar .calendar-week{grid-template-columns:repeat(7,minmax(0,1fr));min-width:0}.appointment-calendar .calendar-day{overflow:hidden}.appointment-calendar .calendar-day.today>header b{background:transparent;color:#2563eb;border:1px solid #2563eb}.appointment-calendar .calendar-booking{max-width:100%;overflow:hidden}
.appointment-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.appointment-metric{display:flex;flex-direction:column;gap:8px;padding:16px;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px;color:#2563eb}.appointment-metric strong{font-size:24px}.appointment-metric span{font-size:12px}.appointment-metric.green{background:#ecfdf5;border-color:#d1fae5;color:#059669}.appointment-metric.purple{background:#f5f3ff;border-color:#ede9fe;color:#8b5cf6}.appointment-metric.rose{background:#fff1f2;border-color:#ffe4e6;color:#e11d48}@media(max-width:767px){.appointment-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.unread-dot{display:grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:#ef4444;color:white;font-size:10px;font-style:normal;padding:0 4px}.switch>span{width:38px;height:22px;background:#cbd5e1;border-radius:999px;transition:background 160ms ease-out}.switch>span:before{width:16px;height:16px;top:3px;left:3px}.switch input:checked+span{background:#2563eb}.switch input:checked+span:before{transform:translateX(16px)}.switch input:focus-visible+span{outline:2px solid #2563eb;outline-offset:3px}
body.page-products .knowledge-drop>span{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 8px;color:#8b5cf6;background:transparent}body.page-products .knowledge-drop label{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:8px 14px;min-height:36px;font-size:13px;margin:8px 0}body.page-products .knowledge-drop input{font-size:12px;background:white;border-color:#ede9fe}body.page-products .knowledge-drop.is-dragging{border-color:#8b5cf6;background:#f5f3ff}

/* Channel inbox entry points and unconnected social inboxes. */
.channel-section{margin:24px 0}.channel-section .card-title{margin-bottom:14px}.channel-section h2{font-size:16px;margin:0}.channel-section .muted{margin:4px 0 0;font-size:12px}.channel-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.channel-card{background:#fff;border:1px solid #e4ecf5;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 16px #0f2e5906}.channel-card-top{display:flex;align-items:center;justify-content:space-between}.channel-icon{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;flex-shrink:0}.channel-icon svg{width:24px;height:24px}.channel-icon.wa{background:#ecfdf5;color:#059669}.channel-icon.ig{background:#fdf2f8;color:#c026d3}.channel-icon.ms{background:#eff6ff;color:#2563eb}.channel-card h3{font-size:16px;margin:2px 0 0}.channel-card p{font-size:13px;color:#64748b;margin:0}.channel-card small{color:#64748b;font-size:11px}.channel-card>button{margin-top:6px;display:flex;justify-content:space-between;width:100%}.social-heading,.social-brand{display:flex;align-items:center;gap:14px}.social-heading{justify-content:space-between;margin-bottom:20px}.social-heading h1{font-size:22px;margin:0}.social-heading p{color:#64748b;font-size:13px;margin:3px 0 0}.channel-tabs{display:flex;gap:8px;border-bottom:1px solid #e4ecf5;margin-bottom:18px}.channel-tabs button{background:transparent;color:#64748b;border:0;border-radius:0;padding:12px 16px;border-bottom:2px solid transparent}.social-inbox .channel-tabs button.active{background:#eff6ff;color:#2563eb;border-left:0;border-bottom-color:#2563eb;box-shadow:none}.social-connection-notice{padding:14px 18px;background:#eff6ff;border:1px solid #dbeafe;border-radius:10px;display:flex;gap:8px;flex-direction:column;font-size:12px;color:#334155;margin-bottom:18px}.social-inbox-grid{display:grid;grid-template-columns:260px minmax(280px,1fr) 240px;background:#fff;border:1px solid #e4ecf5;border-radius:14px;min-height:480px;overflow:hidden}.social-conversation-list,.social-customer-empty{padding:20px}.social-conversation-list{border-right:1px solid #e4ecf5}.social-customer-empty{border-left:1px solid #e4ecf5;background:#f8fbff}.social-inbox-grid h2{font-size:15px;margin:0 0 16px}.social-search{display:flex;align-items:center;gap:8px;background:#f1f5f9;padding:0 10px;border-radius:8px}.social-search input{border:0!important;background:transparent!important;min-width:0;width:100%;font-size:12px}.social-filters{display:flex;gap:16px;margin:18px 0;font-size:12px;color:#94a3b8}.social-filters span:first-child{color:#2563eb}.social-list-empty,.social-chat-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:14px;padding:40px 20px;color:#64748b}.social-list-empty{font-size:12px;padding:48px 0}.social-chat-empty h2{font-size:19px;margin:0;color:#142b49}.social-chat-empty p{max-width:340px;font-size:13px;line-height:1.8;margin:0 0 8px}.social-chat-empty .channel-icon{width:64px;height:64px;border-radius:18px}.social-customer-empty p,.social-customer-empty dt{font-size:12px;color:#94a3b8}.social-customer-empty dd{margin:8px 0 24px;font-size:13px}.social-chat-empty button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1199px){.social-inbox-grid{grid-template-columns:240px minmax(0,1fr)}.social-customer-empty{display:none}}
@media(max-width:767px){.channel-cards{grid-template-columns:1fr}.channel-card{padding:16px}.social-inbox-grid{grid-template-columns:1fr;min-height:0}.social-conversation-list{border-right:0;border-bottom:1px solid #e4ecf5}.social-list-empty{padding:20px 0}.social-chat-empty{padding:32px 20px}.channel-tabs button{padding:10px;font-size:12px}.social-heading h1{font-size:19px}}

/* One Inbox navigation entry with shared channel switching. */
.inbox-channel-header{padding:20px 22px 0;background:#fff;flex:0 0 auto}.inbox-channel-header h1{margin:0;font-size:24px;color:#142b49}.inbox-channel-header p{margin:6px 0 16px;color:#64748b;font-size:13px}.inbox-channel-header .channel-tabs{margin:0;gap:8px}.inbox-channel-header .channel-tabs button{width:auto;min-height:44px;padding:10px 18px;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:#64748b}.inbox-channel-header .channel-tabs button.active{background:#eff6ff;color:#2563eb;border-bottom-color:#2563eb;box-shadow:none}.social-inbox>.inbox-channel-header{padding:0;background:transparent;margin-bottom:18px}.inbox-shell>.inbox-top{flex:0 0 auto}.inbox-top .inbox-toolbar{flex:1;min-width:0}body.mobile-chat-open .inbox-channel-header{display:none}@media(max-width:767px){.inbox-channel-header{padding:12px 12px 0}.inbox-channel-header h1{font-size:20px}.inbox-channel-header p{font-size:12px;margin-bottom:10px}.inbox-channel-header .channel-tabs{gap:0}.inbox-channel-header .channel-tabs button{padding:10px 12px;font-size:12px}}
.social-connections-heading{margin-bottom:20px}.social-connections-heading h1{font-size:24px;margin:0 0 8px}.social-connections-heading p{font-size:13px;color:#64748b}.social-login-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.social-login-card{padding:24px}.social-login-title{display:flex;align-items:center;gap:12px}.social-login-title h2{font-size:18px;margin:0;flex:1}.social-login-card p{font-size:13px;line-height:1.7;color:#64748b}.social-login-card small{display:block;color:#64748b;margin-top:14px}.social-login-link{display:inline-flex;align-items:center;padding:10px 16px;border-radius:8px;text-decoration:none;background:#2563eb;color:white;font-size:13px;font-weight:600}.social-login-card .connection-actions{flex-wrap:wrap;gap:8px;justify-content:flex-start}.social-login-card select{margin:8px 0 12px}.social-live-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.social-live-grid{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:480px;height:calc(100dvh - 290px);background:white;border:1px solid #e4ecf5;border-radius:12px;overflow:hidden}.social-live-list{overflow:auto;border-right:1px solid #e4ecf5;padding:16px}.social-live-list h2{font-size:16px;margin:0 0 8px}.social-live-list>small{color:#64748b;font-size:11px}.social-peer{display:flex;position:relative;flex-direction:column;gap:6px;width:100%;text-align:left;background:transparent;color:#142b49;border:0;padding:14px 10px;margin-top:6px}.social-peer small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b}.social-peer.active{background:#eff6ff;color:#2563eb}.social-peer b{position:absolute;right:4px;top:4px;background:#ef4444;color:white;border-radius:12px;padding:2px 6px;font-size:11px}.social-live-chat{display:flex;flex-direction:column;min-width:0;min-height:0}.social-live-chat>header{display:flex;flex-direction:column;gap:4px;padding:16px;border-bottom:1px solid #e4ecf5}.social-live-chat>header small{color:#64748b}.social-live-messages{flex:1;overflow:auto;min-height:0;padding:20px;background:#f8fbff}.social-live-compose{display:flex;gap:10px;padding:14px}.social-live-compose textarea{flex:1;min-width:0;min-height:44px;height:64px;margin:0}.social-window-note{padding:10px 14px 0;color:#64748b;font-size:11px}.social-empty-connect{text-align:center;padding:60px 24px}.social-empty-connect p{color:#64748b;font-size:13px}[data-social-error]{color:#b91c1c;font-size:13px}@media(max-width:767px){.social-login-grid{grid-template-columns:1fr}.social-live-grid{grid-template-columns:1fr;height:auto}.social-live-list{max-height:200px;border-right:0;border-bottom:1px solid #e4ecf5}.social-live-chat{height:520px}.social-login-title{flex-wrap:wrap}}

/* Shared Inbox chrome and empty-state icon treatment across channels. */
.social-inbox{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.social-inbox>.inbox-channel-header{padding:20px 22px 0;background:#fff;margin:0}
.social-inbox>#social-root{padding:18px 22px 22px}
.inbox-empty-icon,.inbox-welcome>.inbox-empty-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;flex:0 0 auto;border-radius:18px;background:#eff6ff;color:#2563eb;font-size:0;line-height:1}
.inbox-empty-icon svg,.inbox-welcome>.inbox-empty-icon svg{display:block;width:30px;height:30px;stroke-width:1.75}
.social-empty-connect>.inbox-empty-icon{margin-bottom:20px}
@media(max-width:767px){.social-inbox>.inbox-channel-header{padding:12px 12px 0}.social-inbox>#social-root{padding:12px}.inbox-empty-icon,.inbox-welcome>.inbox-empty-icon{width:56px;height:56px;border-radius:16px}.inbox-empty-icon svg{width:28px;height:28px}}

body.inbox-mode .social-inbox{height:100%;min-height:0;display:flex;flex-direction:column;border-radius:0;border-top:0;border-bottom:0}
body.inbox-mode .social-inbox>#social-root{flex:1;min-height:0;overflow:auto}
body.inbox-mode.page-instagram .inbox-channel-header,body.inbox-mode.page-messenger .inbox-channel-header{display:block}
@media(max-width:767px){body.inbox-mode.page-instagram #shell .content,body.inbox-mode.page-messenger #shell .content{height:100dvh}}

/* Connection overview: three explicit rows prevent the heading from overlapping WhatsApp. */
body.page-whatsapp #page{display:flex;flex-direction:column;gap:16px;height:auto;min-height:0}
body.page-whatsapp .content{overflow:auto}
.page-whatsapp .social-connections-heading{margin-bottom:12px}
.page-whatsapp .social-connections-heading p{margin:4px 0 0}
.page-whatsapp .social-login-grid{margin:0;gap:16px}
.page-whatsapp .social-login-card{padding:16px}
.page-whatsapp .social-login-card p{margin:8px 0;font-size:12px}
.page-whatsapp .social-login-card small{margin-top:8px;font-size:11px}
.page-whatsapp .social-login-title h2{font-size:16px}
.page-whatsapp .channel-icon{width:36px;height:36px;border-radius:10px}
.page-whatsapp .channel-icon svg{width:22px;height:22px;stroke-width:1.75}
.page-whatsapp .page-heading{margin:0;flex:0 0 auto}
.page-whatsapp .page-heading h1{font-size:20px;margin:0}
.page-whatsapp .page-heading p{margin:4px 0 0;font-size:12px}
.page-whatsapp .channel-connect,.page-whatsapp .connect-card{height:auto;min-height:0;overflow:visible;padding:18px;border-radius:12px;flex:0 0 auto}
.page-whatsapp .channel-intro{display:none}
.page-whatsapp .channel-grid{max-width:none;gap:16px}
.page-whatsapp .channel-option{min-height:0;padding:16px;grid-template-columns:36px minmax(0,1fr);gap:12px;border-radius:12px}
.page-whatsapp .channel-option strong{font-size:14px}
.page-whatsapp .channel-option small{font-size:12px}
.page-whatsapp .channel-option em{font-size:11px;padding:4px 8px}
.page-whatsapp .channel-option b{grid-column:2;font-size:12px}
.page-whatsapp .connection-note{font-size:11px;margin:12px 0 0}
.page-whatsapp .connect-card .wa-mark{width:56px;height:56px;font-size:28px;box-shadow:none}
.page-whatsapp .connect-card h2{font-size:20px;margin:12px 0 0}
.page-whatsapp .connect-card p{font-size:13px;margin:8px 0}
.page-whatsapp .connect-button{margin:10px 0}
@media(min-width:1101px){body.page-whatsapp .content{height:calc(100dvh - 64px);padding:18px 24px}body.page-whatsapp #page{gap:14px}}

/* Compact Inbox header: title and channels share a row; tools occupy the next. */
body.inbox-mode .inbox-channel-header{display:flex;align-items:center;gap:20px;padding:10px 18px 0;min-height:48px}
body.inbox-mode .inbox-channel-header h1{font-size:20px;line-height:28px;white-space:nowrap;margin:0}
body.inbox-mode .inbox-channel-header>p{display:none}
body.inbox-mode .inbox-channel-header .channel-tabs{flex:1;min-width:0;gap:4px;margin:0}
body.inbox-mode .inbox-channel-header .channel-tabs button{min-height:36px;padding:7px 14px;font-size:13px;line-height:20px}
body.inbox-mode .inbox-top{padding:8px 18px;gap:8px}
body.inbox-mode .inbox-toolbar{gap:8px;min-width:0;flex-wrap:nowrap}
body.inbox-mode .inbox-search{height:34px;min-height:34px;min-width:160px;max-width:300px;flex:1;padding:0 10px}
body.inbox-mode .inbox-search input{height:32px;min-height:32px;padding:6px 0;font-size:12px;min-width:0}
body.inbox-mode .inbox-toolbar>button{height:34px;min-height:34px;padding:6px 12px;font-size:12px;line-height:20px;white-space:nowrap}
body.inbox-mode .wa-status{padding:6px 10px;font-size:11px;line-height:20px;white-space:nowrap}
body.inbox-mode .inbox-sync{padding:5px 18px;font-size:11px;line-height:16px}
body.inbox-mode .social-inbox>#social-root{padding-top:8px}
body.inbox-mode.page-instagram .inbox-channel-header,body.inbox-mode.page-messenger .inbox-channel-header{display:flex}
@media(max-width:900px){body.inbox-mode .inbox-toolbar{overflow-x:auto}body.inbox-mode .inbox-search{flex:0 0 220px}}
@media(max-width:767px){body.inbox-mode .inbox-channel-header{padding:8px 12px 0;gap:10px;min-height:44px}body.inbox-mode .inbox-channel-header h1{font-size:16px}body.inbox-mode .inbox-channel-header .channel-tabs button{padding:7px 8px;font-size:12px}body.inbox-mode .inbox-top{padding:6px 12px}body.mobile-chat-open.page-inbox .inbox-channel-header{display:none}}