/* ==========================================================================
   DEVELOPER START HERE — STYLESHEET MAP
   ==========================================================================
   This project intentionally uses ONE shared stylesheet for the authenticated
   app, login/install screens, and public legal pages.

   HOW PAGE SCOPING WORKS
   ----------------------
   includes/header.php derives the current PHP filename and adds a class such as
   .page-dashboard, .page-inbox, .page-campaigns, .page-settings, etc. to the
   <section class="page-content ..."> wrapper. Page-specific CSS should be scoped
   under that class so it cannot accidentally change another screen.

   JAVASCRIPT STATE CLASSES
   ------------------------
   assets/app.js adds/removes runtime classes such as .sidebar-open, .open, .show,
   .active, .has-unread, .incoming, .outgoing, .is-recording, status names, and
   dialog type classes. Do NOT classify a selector as unused only because the
   class is not visible in static PHP markup.

   CASCADE / CONSOLIDATION NOTE
   ----------------------------
   The stylesheet originally contained many generations of visual override
   blocks. A conservative consolidation pass removed earlier declarations only
   when a later declaration for the exact same selector, responsive context,
   property, and cascade importance definitively superseded it. Whole legacy
   selectors that could still be created dynamically were intentionally kept.

   MAINTENANCE RULE
   ----------------
   New page-specific work should be added under the matching .page-* scope and
   should include a short comment describing the component and reason. Avoid
   adding another global override when a page-scoped selector is sufficient.

   UNUSED-CSS REVIEW
   -----------------
   See /CSS-AUDIT.md for the latest conservative static scan. Suspected legacy
   selectors are documented there but were NOT deleted automatically, because
   this application builds some class names dynamically in PHP/JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CORE / LEGACY BASE LAYER
   Shared primitives: variables, shell, navigation, buttons, panels, forms,
   tables, status badges, modals, and the first-pass component geometry.
   Later page-specific sections may intentionally override these declarations.
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;}body{margin:0;}a{color:inherit;text-decoration:none;}button,input,select,textarea{font:inherit;}.side-nav a:hover,.side-nav a.active{background:rgba(31,191,109,.18);color:#3dde88;}.sidebar-user div{display:grid;}.online-dot{border-radius:50%;margin-left:auto;}.avatar{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;background:#e5f8ed;color:#0b9850;font-weight:800;flex:0 0 auto;}.avatar.large{width:54px;height:54px;font-size:20px;}.avatar.xl{width:74px;height:74px;font-size:28px;}.icon-button{display:inline-grid;place-items:center;cursor:pointer;}.connection-pill{display:flex;align-items:center;gap:8px;}.top-user{margin-right:8px;}.page-heading{display:flex;justify-content:space-between;}.page-heading p{margin:0;}.btn{cursor:pointer;}.btn.danger:hover{background:#ffe4e6;border-color:#e79098;}.btn.danger-outline{background:#fff;color:#c92e39;border-color:#efb8bd;}.btn.danger-outline:hover{background:#fff0f1;border-color:#e79098;}.btn:disabled{opacity:.5;cursor:not-allowed;}.metric-card{border:1px solid var(--line);}.metric-card>div{display:grid;min-width:0;}.panel{background:#fff;border:1px solid var(--line);box-shadow:0 2px 4px rgba(30,45,70,.02);min-width:0;}.dashboard-grid{display:grid;}.support-number{text-align:center;}.support-card>p{text-align:center;}th,td{text-align:left;}td strong{display:block;}td small{display:block;margin-top:3px;}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.status{background:#eef2f7;color:#5c687c;}.alert{border:1px solid;}.two-column{display:grid;}.search-form{display:flex;gap:6px;}.search-form input{min-width:220px;}.stack-form{display:grid;}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}label{display:grid;}.checkbox{display:flex;grid-template-columns:20px 1fr;align-items:flex-start;gap:10px;}.checkbox input{width:17px;height:17px;margin-top:2px;}.center{text-align:center;}.modal{position:fixed;inset:0;}.notice{display:flex;gap:13px;padding:14px 16px;border:1px solid #cbe7d7;border-radius:8px;margin-top:16px;}.notice i{color:var(--green-dark);font-size:19px;margin-top:2px;}.notice p{margin:4px 0 0;color:var(--muted);}.consent-box{display:flex;gap:13px;padding:15px;border-radius:8px;border:1px solid #cdebd9;}.consent-box i{font-size:24px;color:var(--green-dark);}.consent-box p{margin:4px 0 0;color:var(--muted);}.progress{min-width:150px;margin-bottom:5px;}.progress span{display:block;height:100%;}.agent-card{border:1px solid var(--line);}.agent-top{display:flex;justify-content:space-between;}.agent-card h3{margin:14px 0 3px;}.agent-card p{color:var(--muted);margin:0;}.agent-stats{display:grid;grid-template-columns:1fr 1fr;margin:18px 0;}.agent-stats span{color:var(--muted);}.agent-stats strong{display:block;}.auth-body{min-height:100vh;display:grid;place-items:center;padding:20px;}.auth-card{background:#fff;border:1px solid var(--line);}.auth-logo{display:grid;place-items:center;font-size:36px;margin-bottom:16px;}.auth-card h1{margin:0 0 7px;}.auth-card>p{color:var(--muted);margin:0 0 20px;}.inbox-layout{display:grid;}.conversation-list{display:flex;flex-direction:column;min-height:0;}.conversation-search{position:relative;}.conversation-search i{position:absolute;}.conversation-scroll{overflow:auto;}.conversation-item{width:100%;border:0;display:flex;align-items:center;text-align:left;cursor:pointer;}.conversation-item:hover,.conversation-item.active{background:#f0faf5;}.conversation-copy{display:grid;min-width:0;flex:1;}.conversation-copy strong,.conversation-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.conversation-copy small{margin-top:4px;}.conversation-item b{background:var(--green);color:#fff;border-radius:20px;min-width:21px;height:21px;display:grid;place-items:center;font-size:11px;}.chat-panel{display:flex;}.chat-placeholder,.customer-empty{margin:auto;text-align:center;color:var(--muted);padding:30px;}.chat-active{flex-direction:column;width:100%;}.chat-header>div:nth-child(2){display:grid;}.chat-header small{color:var(--muted);}.service-window{text-align:center;}.service-window.open{background:#e2f7eb;color:#087740;}.service-window.open.closing-soon{background:#fff4dc;color:#8a5700;}.window-countdown{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap;}.messages{overflow:auto;background-attachment:local;}.message-row{display:flex;}.message-row.outbound{justify-content:flex-end;}.bubble{background:#fff;}.bubble p{white-space:pre-wrap;word-break:break-word;}.bubble span{display:block;text-align:right;margin-top:5px;}.reply-box{display:flex;gap:9px;padding:10px;}.reply-box textarea{min-height:42px;max-height:110px;}.send-button{border-radius:50%;cursor:pointer;}.mobile-chat-back{display:none;}.customer-panel{text-align:center;}.customer-active h3{margin-bottom:3px;}.customer-active>p{margin-top:0;}.customer-details{text-align:left;margin-top:22px;}.customer-details small,.customer-details strong{display:block;}.customer-details small{margin-bottom:3px;}.empty-state{text-align:center;padding:30px 20px;color:var(--muted);}.empty-state i{font-size:42px;color:#adc1b4;}
@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(3,1fr);}.agent-grid{grid-template-columns:repeat(3,1fr);}.inbox-layout{grid-template-columns:280px 1fr;}.customer-panel{display:none;}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.22s;}.sidebar-open .sidebar{transform:none;}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25;}.sidebar-open .sidebar-overlay{display:block;}.main-area{margin-left:0;}.menu-button{display:inline-grid;}.metric-grid{grid-template-columns:repeat(2,1fr);}.dashboard-grid,.two-column{grid-template-columns:1fr;}.agent-grid{grid-template-columns:repeat(2,1fr);}.inbox-layout{grid-template-columns:250px 1fr;}.page-content{padding:15px;}}
@media(max-width:650px){.page-heading{align-items:flex-start;flex-direction:column;}.heading-actions{width:100%;flex-wrap:wrap;}.heading-actions .btn{flex:1;}.metric-grid{grid-template-columns:1fr 1fr;gap:9px;}.metric-card{padding:12px;display:grid;}.metric-icon{width:37px;height:37px;}.dashboard-grid{grid-template-columns:1fr;}.form-grid{grid-template-columns:1fr;}.agent-grid{grid-template-columns:1fr;}.top-user{display:none;}.inbox-layout{height:calc(100vh - 145px);grid-template-columns:1fr;}.conversation-list{width:100%;}.chat-panel{position:fixed;inset:68px 0 0;z-index:40;display:none;}.inbox-layout.chat-open .chat-panel{display:flex;}.customer-panel{display:none;}.page-content:has(.inbox-layout){padding:8px;}.inbox-heading{display:none;}.search-form input{min-width:0;}.auth-card{padding:22px;}.metric-card strong{font-size:18px;}}

/* Template component builder */
.template-requirements{padding:11px 13px;border:1px solid #cfe3d7;background:#f4fbf7;border-radius:8px;color:#315845;font-size:12px;line-height:1.5;}
.template-requirements.compact{grid-column:1/-1;padding:8px 10px;}
.template-requirements.error-state{border-color:#f1c4c8;background:#fff1f2;color:#ad2630;}

.template-field[hidden],.template-requirements[hidden],.inbox-media-field[hidden],.inbox-button-fields[hidden]{display:none!important;}

.inbox-media-field{grid-column:1/-1;display:grid;gap:5px;}
.inbox-media-field small{color:var(--muted);line-height:1.4;}
.inbox-button-fields{grid-column:1/-1;display:grid;gap:7px;}

.template-reply .btn{min-height:40px;}

@media(max-width:900px){.template-reply{grid-template-columns:1fr 1fr;}.template-reply .btn{grid-column:1/-1;}}
@media(max-width:650px){.template-reply{grid-template-columns:1fr;}.template-reply .btn{grid-column:auto;}}
.campaign-error{max-width:320px;}.api-error{display:block;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b42630;font-size:11px;}.api-ok{color:#087740;font-size:11px;font-weight:700;}.row-actions form{margin:0;}
.template-data-summary{font-size:11px;color:#4f5c72;}.template-data-summary.has-error{color:#b42630;font-weight:700;}

/* Live inbox and webhook improvements */
.live-inbox-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;}.live-inbox-pill span{width:8px;height:8px;border-radius:50%;animation:livePulse 1.8s infinite;}@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(23,184,102,0)}100%{box-shadow:0 0 0 0 rgba(23,184,102,0)}}
.inbox-toast.success{border:1px solid #bde8cf;}.inbox-toast.error{border:1px solid #f0bdc2;}.inbox-layout{position:relative;}
.message-image-link{display:block;margin:-2px -2px 7px;}.message-attachment{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:7px;border-radius:7px;background:rgba(255,255,255,.56);border:1px solid rgba(36,71,52,.12);font-weight:700;color:#176a43;}.message-attachment i{font-size:20px;}.voice-record-button{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:#fff;color:#0b8f4d;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:.15s ease;}.voice-record-button:hover{background:#edf9f2;transform:translateY(-1px);}.voice-record-button.recording{background:#fff0f1;color:#c72d39;box-shadow:0 0 0 3px rgba(199,45,57,.10);}.voice-record-button[data-disabled],.voice-record-button:disabled{opacity:.55;cursor:not-allowed;}.voice-record-button span{font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;}.send-button:disabled{opacity:.55;cursor:not-allowed;}.conversation-item.active b{background:#0a9a51;}.conversation-item small{line-height:1.25;}.conversation-scroll{scrollbar-width:thin;}
.stack-form code{font-size:11px;background:#f0f3f7;padding:2px 4px;border-radius:4px;}
@media(max-width:650px){.live-inbox-pill{display:none;}.inbox-toast{position:fixed;top:78px;}.message-image{width:100%;max-height:280px;}.chat-actions{gap:4px;}.chat-actions select{padding:7px 5px;}}

/* Keep conversation controls hidden until a customer conversation is selected. */
.chat-active[hidden] {
  display: none !important;
}


/* Keep the chat composer pinned inside the inbox instead of allowing message
   history to push it below the visible panel. */
.inbox-layout,
.chat-panel,
.chat-active,
.messages {
  min-height: 0;
}
.chat-panel,
.chat-active {
  overflow: hidden;
}
.messages {
  flex: 1 1 auto;

}
.reply-box,
.template-reply {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
}
.reply-box {
  align-items: flex-end;
}
.reply-box textarea {
  flex: 1 1 auto;
}
.send-button {
  flex: 0 0 45px;
}
.agent-actions{grid-template-columns:1fr 1fr;}@media(max-width:420px){.agent-actions{grid-template-columns:1fr;}}
/* Inbox date filters and safe three-dot conversation actions */
.conversation-filter-bar{display:block;}
.conversation-filter-bar .conversation-search{margin:0;min-width:0;}

.conversation-filter-empty{padding:34px 18px;text-align:center;color:var(--muted);}
.conversation-filter-empty i{font-size:28px;margin-bottom:9px;color:#9aa6b8;}
.conversation-filter-empty p{margin:0;line-height:1.45;}

.chat-more-toggle:hover,.chat-more-toggle[aria-expanded="true"]{background:#eef2f7;}
.chat-more-menu{width:218px;padding:6px;}
.chat-menu-delete{width:100%;border:0;background:#fff;padding:10px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;}
.chat-menu-reset{width:100%;border:0;background:#fff;padding:10px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;color:#7a5b1c;}

.chat-menu-delete:disabled{opacity:.55;cursor:not-allowed;}
.chat-menu-delete i{width:18px;text-align:center;}
.chat-menu-delete span{display:grid;gap:2px;}
.chat-menu-reset span{display:grid;gap:2px;}
.chat-menu-delete strong{font-size:13px;}
.chat-menu-delete small{font-size:10px;color:#8c5d63;font-weight:500;}
.chat-menu-reset small{font-size:10px;color:#8b7958;font-weight:500;}
@media(max-width:650px){.conversation-filter-bar{padding:8px;}.chat-actions select{max-width:96px;}.chat-more-menu{right:-2px;width:205px;}}

/* Conversation date grouping and newest-first list */

.conversation-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
.conversation-title-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conversation-title-row time{flex:0 0 auto;white-space:nowrap;}
.conversation-item[hidden]{display:none!important;}
@media(max-width:560px){}

/* Conversation-row date/time visibility fix */
.conversation-title-row time{max-width:132px;overflow:hidden;text-overflow:ellipsis;text-align:right;}
@media(max-width:560px){.conversation-title-row time{max-width:118px;font-size:9px;}}

/* Simple, non-technical template management */
.template-empty-card{display:grid;justify-items:center;gap:10px;}

.template-empty-card h2{margin:5px 0 0;}
.template-empty-card p{line-height:1.55;}
.template-empty-actions,.template-help-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:12px;}
.template-empty-actions form,.template-help-actions form{margin:0;}
.template-simple-note{display:flex;align-items:flex-start;gap:10px;line-height:1.45;}
.template-simple-note i{margin-top:2px;}
.template-help-modal{max-width:690px;}

.template-guide{display:grid;margin:18px 0;}
.template-guide-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border:1px solid var(--line);}
.template-guide-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;}
.template-guide-step strong{display:block;margin:1px 0 4px;font-size:14px;}
.template-guide-step p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;}
.template-help-warning{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding:12px 14px;font-size:12px;line-height:1.45;}
.template-help-warning i{margin-top:2px;}
@media(max-width:560px){.template-empty-actions,.template-help-actions{display:grid;width:100%;}.template-empty-actions .btn,.template-help-actions .btn{width:100%;justify-content:center;}.template-help-actions form{width:100%;}.template-guide-step{grid-template-columns:32px minmax(0,1fr);padding:12px;}.template-guide-number{width:30px;height:30px;}}

/* Agent inbox rich composer: image, PDF, audio file, and location. */
.rich-reply-box{position:relative;}.reply-tool-wrap{position:relative;flex:0 0 auto;}.reply-tool-button{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:0 0 auto;}.reply-tool-button:hover{color:#23354a;}.reply-attachment-menu{position:absolute;left:0;bottom:50px;background:#fff;padding:7px;z-index:30;}.reply-attachment-menu[hidden]{display:none!important;}.reply-attachment-menu button{width:100%;border:0;background:#fff;padding:10px 11px;border-radius:7px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;color:#26354a;}.reply-attachment-menu button:hover{background:#f1f7f4;}.reply-attachment-menu button i{width:20px;text-align:center;color:var(--green-dark);font-size:17px;}.reply-compose-area{display:grid;gap:6px;}.reply-preview{min-height:54px;background:#fff;border:1px solid #dbe2e9;padding:7px;display:flex;align-items:center;gap:9px;}.reply-preview[hidden]{display:none!important;}.reply-preview-thumb{width:42px;height:42px;border-radius:7px;background:#e7f7ed;color:#0b9850;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;font-size:18px;}.reply-preview-thumb img{width:100%;height:100%;object-fit:cover;}.reply-preview-copy{display:grid;min-width:0;flex:1;}.reply-preview-copy strong,.reply-preview-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.reply-preview-copy small{color:var(--muted);font-size:11px;margin-top:2px;}.reply-preview-remove{border:0;background:transparent;width:32px;height:32px;border-radius:50%;cursor:pointer;color:#6c7788;}.reply-preview-remove:hover{background:#ffe7e9;color:#c72d39;}.message-audio{display:flex;align-items:center;gap:9px;min-width:min(320px,65vw);padding:5px 2px 7px;}.message-audio>i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(23,184,102,.16);color:#0c8f4c;}.message-audio audio{width:100%;height:36px;min-width:180px;}.message-video{display:block;width:min(360px,100%);max-height:360px;border-radius:7px;margin-bottom:7px;background:#111;}.message-location{display:flex;align-items:center;gap:10px;min-width:min(270px,65vw);padding:11px;border-radius:8px;background:rgba(255,255,255,.63);border:1px solid rgba(36,71,52,.12);margin-bottom:6px;}.message-location-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e1f7e9;color:#079650;font-size:18px;flex:0 0 auto;}.message-location>span:last-child{display:grid;min-width:0;}.message-location strong,.message-location small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.message-location small{color:var(--muted);margin-top:3px;}.message-attachment span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px;}
@media(max-width:650px){.rich-reply-box{gap:4px;padding:8px 7px;}.reply-tool-button{width:38px;height:40px;}.reply-attachment-menu{left:0;bottom:48px;}.message-audio{min-width:min(245px,72vw);}.message-audio audio{min-width:150px;}.reply-preview-copy strong{max-width:190px;}}

/* ========================================================================
   FINAL RESPONSIVE UI REFRESH
   Clearer spacing, larger touch targets, consistent cards, and reliable
   desktop / tablet / mobile layouts. These rules intentionally come last.
   ======================================================================== */

html{min-height:100%;}

button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;}
button,.btn,.icon-button,.side-nav a{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;}

/* Navigation */

.mobile-page-title{min-width:0;}
.icon-button{font-size:15px;}

/* Page layout and reusable cards */

.panel,.metric-card,.agent-card,.auth-card{border-color:var(--line);border-radius:var(--radius-md);}

input,select,textarea{border-color:#cbd5e1;}

.agent-stats span{border:1px solid #edf1f5;}
.table-wrap{scrollbar-width:thin;}

/* Inbox */

.conversation-search i{left:14px;top:50%;transform:translateY(-50%);color:#8592a5;}

.conversation-scroll{overscroll-behavior:contain;}

.chat-placeholder i{font-size:72px;}
.chat-placeholder h2{margin:14px 0 5px;color:#35445a;}
.chat-placeholder p{margin:0;}
.chat-header{position:relative;z-index:12;}
.chat-person{display:flex;align-items:center;flex:1 1 auto;}
.chat-person-copy{display:grid;min-width:0;}
.chat-person-copy strong,.chat-person-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.chat-more{flex:0 0 auto;}

.chat-menu-delete{min-height:50px;border-radius:9px;}

.messages{overscroll-behavior:contain;}

.rich-reply-box{border-top-color:#dfe5ec;}

.reply-tool-button{width:44px;height:44px;}
.send-button{width:44px;height:44px;flex-basis:44px;}
.send-button:hover{transform:translateY(-1px);}
.reply-attachment-menu{border-radius:13px;width:210px;}

.live-inbox-pill{min-height:36px;padding:8px 13px;}

/* Tablet: use the full screen, keep chat controls in a reliable second row,
   and always reserve a visible cell for the three-dot delete menu. */
@media(max-width:1100px){

  .connection-pill{margin-left:14px;}

  .chat-more,.chat-more-toggle{width:42px!important;}
  .chat-more-menu{right:0;}
  
  .dashboard-grid,.two-column{grid-template-columns:1fr;}
}

@media(max-width:820px){

  .inbox-layout{grid-template-columns:255px minmax(0,1fr);height:calc(100dvh - 151px);}
  .conversation-item{padding-inline:11px;}
  .conversation-item .avatar{width:39px;height:39px;}
  .chat-actions{grid-template-columns:minmax(0,1fr) minmax(100px,.7fr) 42px;}
  .messages{padding:16px;}
  .bubble{max-width:84%;}

}

/* Phone */
@media(max-width:720px){
  
  .mobile-page-title{margin-left:2px;}
  
  .connection-pill i{margin:0;}
  
  .top-user{display:none;}

  .metric-card{display:flex;}

  .auth-card{padding:24px;}
  .inbox-heading{display:none;}
  .page-content:has(.inbox-layout){padding:8px;}
  .inbox-layout{display:grid;}
  .conversation-list{width:100%;}

  .chat-panel{position:fixed;z-index:40;display:none;}
  
  .mobile-chat-back{display:inline-grid;flex:0 0 40px;}
  
  .chat-person{gap:7px;}
  
  .chat-actions{grid-template-columns:minmax(0,1fr) minmax(92px,.75fr) 40px;}

  .service-window{font-size:10px;}
  
  .bubble{padding:8px 9px;}
  
  .reply-tool-button{width:38px;height:42px;}
  .send-button{width:42px;height:42px;flex-basis:42px;}.voice-record-button{width:42px;height:42px;flex-basis:42px;}
  .reply-attachment-menu{position:fixed;left:8px;bottom:68px;width:min(230px,calc(100vw - 16px));}

}

@media(max-width:430px){
  
  .metric-card{min-height:82px;}
  .chat-actions{grid-template-columns:minmax(0,1fr) minmax(84px,.68fr) 38px;}
  .chat-more,.chat-more-toggle{width:38px!important;}
  .chat-person-copy small{max-width:180px;}
  .message-audio{min-width:min(230px,76vw);}
  .reply-preview-copy strong{max-width:150px;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ========================================================================
   INBOX HEADER ALIGNMENT + AGENT DELETE ACCESS FIX
   Keeps the assignment/status/menu controls inside the header on desktop,
   tablet, and phone. The three-dot menu remains visible for assigned agents.
   ======================================================================== */
.chat-header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  align-content:center!important;

  overflow:visible!important;
}
.chat-person{
  min-width:0!important;
  width:auto!important;
}
.chat-actions{
  width:auto!important;

  justify-content:end!important;
  
}

.chat-actions select{

  min-width:0!important;

  margin:0!important;
}
.chat-more{
  display:block!important;

  align-self:center!important;
  justify-self:end!important;
  z-index:35!important;
}
.chat-more-toggle{
  display:inline-grid!important;

  margin:0!important;
}
.chat-more-menu{
  position:absolute!important;

  left:auto!important;
  z-index:120!important;
}
.service-window{
  position:relative!important;
  z-index:5!important;
  flex:0 0 auto!important;
}

@media(max-width:1100px){
  .chat-header{
    
    grid-template-rows:auto auto!important;

  }
  .chat-person{
    grid-column:1!important;
    
  }
  .chat-actions{
    grid-column:1!important;
    
  }
  
  .chat-actions.agent-view{
    
    justify-content:end!important;
  }
}

@media(max-width:720px){

  .chat-actions.agent-view{
    
    justify-content:stretch!important;
  }
  .chat-actions select{

    padding:6px 26px 6px 8px!important;
    font-size:12px!important;
  }
  .chat-more,
  .chat-more-toggle{
    width:40px!important;
    height:38px!important;
  }
  .chat-more-menu{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    right:0!important;
    width:min(230px,calc(100vw - 20px))!important;
  }
}

@media(max-width:430px){
  .chat-actions.has-agent-select{
    grid-template-columns:minmax(0,1fr) 92px 38px!important;
  }
  .chat-actions.agent-view{
    grid-template-columns:minmax(0,1fr) 38px!important;
  }
  .chat-more,
  .chat-more-toggle{
    width:38px!important;
  }
}

/* Live webhook diagnostics */
.notice.danger{border-color:#f0b9be;}.notice.danger i{color:var(--danger);}.notice.danger strong{color:#b52732;}.notice.danger p{color:#8d3b43;}

/* Chat history alignment and reliable auto-scroll.
   Short conversations begin at the top, so the customer's first message is
   immediately visible in normal chronological order. JavaScript still scrolls
   longer conversations to the newest message when the chat is opened. */
.messages{
  overflow-anchor:none;
}
.messages-inner{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.messages-inner .message-row:last-child{
  margin-bottom:0;
}

/* Contact spreadsheet and Google Sheets import */
.import-contacts-body{display:grid;}
.import-or{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.import-or::before,.import-or::after{content:"";height:1px;background:var(--line);flex:1;}
.import-or span{flex:0 0 auto;}
.import-columns-help{padding:13px 14px;border:1px solid var(--line);}
.import-columns-help>strong{display:block;margin-bottom:5px;}
.import-columns-help .help{margin:0;}
.import-samples{display:grid;grid-template-columns:1fr 1fr;}
.import-contacts-panel input[type="file"]{padding:8px;background:#fbfcfe;}
@media(max-width:650px){.import-samples{grid-template-columns:1fr;}.import-contacts-body{padding:15px;}}

/* ============================================================
   Polished popup system
   Replaces unstyleable browser confirm boxes and refreshes every
   existing application modal with one consistent responsive design.
   ============================================================ */
body.popup-open{overflow:hidden;}

/* Existing Add contact / Add agent / Template help popups */
.modal{
  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:900;
}
.modal.show{
  display:flex;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.modal-card{
  position:relative;

  transform:translateY(16px) scale(.975);
  opacity:.82;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
  scrollbar-width:thin;
}
.modal.show .modal-card{transform:translateY(0) scale(1);opacity:1;}
.modal-head{

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.modal-head h2{margin:0;}
.modal-head .icon-button{
  flex:0 0 38px;

  border:1px solid #e2e8f0;
  
  background:#fff;
  color:#64748b;
}
.modal-head .icon-button:hover{background:#f1f5f9;color:#172033;border-color:#cbd5e1;transform:none;box-shadow:none;}
.modal .stack-form{gap:17px;}
.modal .stack-form>.btn:last-child{margin-top:3px;min-height:44px;border-radius:10px;}
.modal-subtitle{margin:5px 0 0;font-size:12.5px;line-height:1.5;}

/* Shared confirmation / information dialog */
.app-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
.app-dialog-overlay[hidden]{display:none!important;}
.app-dialog-overlay.show{opacity:1;visibility:visible;}
.app-dialog{
  position:relative;
  
  display:grid;

  overflow:hidden;

  background:#fff;
  
  transform:translateY(18px) scale(.965);
  opacity:.78;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}
.app-dialog::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,#e5484d,#ff7b72);
}
.app-dialog-overlay.show .app-dialog{transform:translateY(0) scale(1);opacity:1;}
.app-dialog-close{
  position:absolute;

  display:grid;
  place-items:center;
  border:1px solid transparent;
  
  background:transparent;
  
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.app-dialog-close:hover{background:#f1f5f9;border-color:#e2e8f0;color:#253147;}
.app-dialog-icon{

  display:grid;
  place-items:center;

}
.app-dialog-copy{min-width:0;}
.app-dialog-kicker{
  display:block;

  line-height:1.3;
  text-transform:uppercase;
}
.app-dialog-copy h2{
  margin:0;
  color:#172033;

}
.app-dialog-copy p{

  white-space:pre-line;
}
.app-dialog-actions{

  grid-template-columns:1fr 1fr;

}
.app-dialog-button{

  border:1px solid #d7dee8;

  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.app-dialog-button:hover{transform:translateY(-1px);}
.app-dialog-button:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(32,184,108,.16);}

.app-dialog-button.confirm{color:#fff;border-color:#cf3540;background:linear-gradient(180deg,#ed5961,#d93b45);box-shadow:0 8px 18px rgba(217,59,69,.22);}
.app-dialog-button.confirm:hover{background:linear-gradient(180deg,#e74c56,#cc303b);box-shadow:0 10px 22px rgba(207,48,59,.28);}

/* Optional dialog types use the same component without duplicating markup. */
.app-dialog-overlay.type-warning .app-dialog::before{background:linear-gradient(90deg,#ee9d25,#ffc15a);}
.app-dialog-overlay.type-warning .app-dialog-icon{box-shadow:inset 0 0 0 1px rgba(238,157,37,.17);}
.app-dialog-overlay.type-warning .app-dialog-kicker{color:#a46000;}

.app-dialog-overlay.type-success .app-dialog-icon{box-shadow:inset 0 0 0 1px rgba(16,169,92,.15);}

.app-dialog-overlay.type-info .app-dialog::before{background:linear-gradient(90deg,#3578e5,#6ca3ff);}
.app-dialog-overlay.type-info .app-dialog-icon{box-shadow:inset 0 0 0 1px rgba(53,120,229,.14);}
.app-dialog-overlay.type-info .app-dialog-kicker{color:#2b64b6;}

@media(max-width:560px){
  .modal{padding:14px;align-items:flex-end;}
  .modal-card{width:100%;max-height:92dvh;border-radius:20px 20px 14px 14px;padding:21px;}
  .modal-head{margin:-21px -21px 19px;padding:16px 15px 16px 20px;border-radius:20px 20px 0 0;}
  .modal-head h2{font-size:17px;}
  .app-dialog-overlay{padding:14px;align-items:flex-end;}
  .app-dialog{width:100%;grid-template-columns:50px minmax(0,1fr);column-gap:14px;padding:23px 20px 0;border-radius:22px 22px 14px 14px;}
  .app-dialog-icon{width:50px;height:50px;border-radius:15px;font-size:20px;}
  .app-dialog-copy{padding-right:25px;}
  .app-dialog-copy h2{font-size:19px;}
  .app-dialog-copy p{font-size:13px;}
  .app-dialog-actions{margin:22px -20px 0;padding:14px 20px calc(15px + env(safe-area-inset-bottom));}
}
@media(max-width:380px){
  .app-dialog-actions{grid-template-columns:1fr;}
  .app-dialog-button.confirm{order:-1;}
}
@media(prefers-reduced-motion:reduce){
  .modal,.modal-card,.app-dialog-overlay,.app-dialog,.app-dialog-button{transition:none!important;}
}

/* Template stale-cache removal action */

/* Real Meta webhook source indicator for the 24-hour reply window. */
.window-source {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  opacity: .72;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ========================================================================
   PREMIUM UI — FINAL VISUAL-ONLY REFRESH
   Styling overrides only. No application behavior or data logic is changed.
   ======================================================================== */
:root{

  --green-deep:#05613b;
  --green-soft:#edf9f3;
  --green-soft-2:#f6fcf9;

  --navy-3:#173c5e;

  --text-2:#34445c;

  --line-strong:#cbd6e2;
  
  --danger-dark:#b72f3a;
  --danger-soft:#fff4f5;
  --warning:#b86c08;
  --warning-soft:#fff8e9;
  --info:#2f72d7;
  --info-soft:#eff5ff;
  --shadow-xs:0 1px 2px rgba(18,38,63,.04);
  --shadow-sm:0 5px 18px rgba(18,38,63,.055);
  --shadow-md:0 14px 40px rgba(18,38,63,.09);
  --shadow-lg:0 26px 70px rgba(7,24,43,.18);
  --radius-xs:8px;
  --radius-sm:11px;
  --radius-md:15px;
  --radius-lg:20px;
  --content-width:1800px;
}

*{scrollbar-width:thin;scrollbar-color:#c8d3df transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:#c8d3df;border:2px solid transparent;border-radius:999px;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:#aebdcb;border:2px solid transparent;background-clip:padding-box;}

/* App frame */

.sidebar-user .avatar{border:1px solid rgba(255,255,255,.13);}

.connection-pill{
  
  padding:8px 14px;
  
  border-color:#c8ead8;
  background:#f3fcf7;
  color:#087846;
  font-size:12px;
  
  box-shadow:var(--shadow-xs);
}

.icon-button:hover{box-shadow:var(--shadow-xs);}
.mobile-page-title{letter-spacing:-.015em;}

/* Page content and headings */

.page-heading{
  align-items:flex-end;
  gap:20px;
  
}
.page-heading h1{
  margin:0 0 6px;

}
.page-heading p{max-width:780px;}

/* Buttons */
.btn{

  border-color:#d5dee8;

}
.btn i{font-size:.95em;}

.btn.danger:hover,.btn.danger-outline:hover{box-shadow:0 6px 16px rgba(183,47,58,.08);}

.btn[aria-busy="true"]{cursor:wait;opacity:.68;}
.icon-button.danger{border-color:transparent;background:transparent;}
.icon-button.danger:hover{color:#a82935;}

/* Panels and cards */
.panel,.metric-card,.agent-card,.auth-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow-sm);
}
.panel{
  border-radius:var(--radius-md);
  
}

.panel-header a:hover{text-decoration:underline;text-underline-offset:3px;}

.dashboard-grid,.two-column{gap:19px;}

/* Metrics */

.metric-card::after{

  right:-35px;
  bottom:-42px;

}
.metric-card:hover{transform:translateY(-2px);}

.metric-card span:last-child{text-transform:uppercase;}

/* Tables */
.table-wrap{
  position:relative;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}
table{background:#fff;}
th,td{padding:14px 16px;border-bottom:1px solid #e9eef4;}
th{
  position:relative;

}

.row-actions{display:flex;flex-wrap:wrap;}

.status.approved,.status.completed,.status.delivered,.status.read{border-color:#ccebd9;background:#eaf8f1;color:#087a48;}

/* Forms */

input[type="file"]{padding:7px;background:#fbfcfe;color:#5e6c80;}
input[type="file"]::file-selector-button{
  min-height:31px;
  margin-right:10px;
  padding:6px 11px;
  border:1px solid #d4dde7;
  border-radius:8px;
  background:#fff;
  color:#34445a;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
input[type="file"]::file-selector-button:hover{border-color:#b9c7d5;background:#f5f8fb;}
.checkbox{padding:2px 0;color:#46566c;font-weight:580;}
.checkbox input{accent-color:var(--green);box-shadow:none;}

code{border:1px solid #e2e8ef;}

/* Alerts, notices and information blocks */
.alert{
  position:relative;

}
.alert::before{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  font-family:inherit;
  font-weight:850;
}
.alert.success::before{content:"✓";}
.alert.error::before{content:"!";}
.alert.warning::before{content:"!";}

.notice{background:#f5fbf8;}
.notice.compact{margin-top:14px;}
.notice.danger{background:#fff6f6;}
.consent-box{background:linear-gradient(180deg,#f3fbf7,#eef9f3);}

/* Contact import */

.import-contacts-body{gap:18px;}

/* Templates */
.template-simple-note{
  
  border-bottom:1px solid #dfece5;

}

.template-empty-icon{

  margin:0 auto 17px;
  display:grid;
  place-items:center;

}

.template-empty-card p{max-width:540px;margin:8px auto 20px;}
.template-empty-actions,.template-help-actions{gap:10px;}
.template-guide{gap:11px;}
.template-guide-step{border-radius:12px;}

.template-help-warning{border-radius:11px;}
.template-requirements,.template-data-summary{border-radius:11px;}
.template-field{padding:14px;border:1px solid #e3e9f0;border-radius:11px;background:#fbfcfe;}

/* Campaigns */
.form-panel>form>.btn.primary:last-of-type{align-self:flex-start;min-width:160px;}
.consent-box strong{color:#1e4d36;}

/* Agents */

.agent-card{
  
  border-radius:15px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.agent-card:hover{border-color:#d3dde7;box-shadow:0 14px 32px rgba(18,38,63,.085);transform:translateY(-2px);}
.agent-top .avatar{box-shadow:inset 0 0 0 1px rgba(8,121,74,.06);}

.agent-card p{word-break:break-word;}

.agent-stats strong{color:#1c2a40;}

/* Authentication and installation */
.auth-body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -10%,rgba(43,196,122,.2),transparent 30rem),
    linear-gradient(145deg,#eef8f3 0%,#f5f7fb 54%,#eef3f8 100%);
}
.auth-body::before,.auth-body::after{
  content:"";
  position:fixed;
  width:360px;
  height:360px;
  border-radius:50%;
  pointer-events:none;
  filter:blur(1px);
}
.auth-body::before{left:-180px;bottom:-210px;background:rgba(22,164,103,.06);}
.auth-body::after{right:-190px;top:-210px;background:rgba(45,114,215,.05);}
.auth-card{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  padding:34px;
  border-radius:21px;
  box-shadow:0 25px 70px rgba(11,34,56,.13);
}
.auth-card.wide{width:min(680px,100%);}
.auth-logo{
  width:62px;
  height:62px;
  border:1px solid #cdebd9;
  border-radius:18px;
  background:linear-gradient(145deg,#f5fcf8,#e6f8ee);
  color:var(--green-dark);
  box-shadow:0 9px 24px rgba(16,150,90,.11);
}
.auth-card h1{color:#172235;letter-spacing:-.035em;}

/* Existing application modals */
.modal{

  -webkit-backdrop-filter:blur(6px);
  
}

.modal-head{
  min-height:58px;
  margin:-24px -24px 21px;
  padding:15px 15px 15px 21px;
  border-radius:17px 17px 0 0;
  background:#fbfcfe;
}

.modal-head .icon-button{width:36px;height:36px;border-radius:9px;}

/* Compact, neutral confirmation dialog.
   The card remains white; red is limited to a small icon and the delete action. */
.app-dialog-overlay{
  padding:18px;
  background:rgba(8,23,40,.46);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.app-dialog{
  width:min(410px,100%);
  grid-template-columns:44px minmax(0,1fr);
  column-gap:14px;
  padding:21px 21px 0;
  border:1px solid #e0e7ef;
  border-radius:16px;
  box-shadow:0 24px 68px rgba(5,20,37,.23);
}
.app-dialog::before{display:none;}
.app-dialog-close{
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:8px;
  color:#7e8a9b;
}
.app-dialog-icon{
  width:44px;
  height:44px;
  border:1px solid #f0c7cc;
  border-radius:12px;
  background:#fff5f6;
  color:#c83b47;
  box-shadow:none;
  font-size:18px;
}
.app-dialog-copy{padding:0 27px 0 0;}
.app-dialog-kicker{
  margin:0 0 4px;
  color:#8793a4!important;
  
  font-weight:800;
  letter-spacing:.07em;
}
.app-dialog-copy h2{

  letter-spacing:-.022em;
}
.app-dialog-copy p{margin:7px 0 0;color:#69768a;line-height:1.55;}
.app-dialog-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin:19px -21px 0;
  padding:13px 17px;
  border-top:1px solid #e7edf3;
  background:#fafbfd;
}
.app-dialog-button{
  width:auto;
  min-width:92px;
  min-height:39px;
  padding:8px 14px;
  border-radius:9px;

}
.app-dialog-button.secondary{border-color:#d5dee8;background:#fff;color:#3b4a5f;}
.app-dialog-button.secondary:hover{border-color:#bdc9d6;background:#f5f8fb;box-shadow:none;}
.app-dialog-button.confirm,
.app-dialog-button.confirm.type-danger{
  border-color:#ca3945;
  background:#d7434e;
  color:#fff;
  box-shadow:0 4px 11px rgba(201,57,69,.16);
}
.app-dialog-button.confirm:hover,
.app-dialog-button.confirm.type-danger:hover{border-color:#b52d38;background:#c63743;box-shadow:0 5px 13px rgba(181,45,56,.2);}
.app-dialog-overlay.type-warning .app-dialog-icon{border-color:#efddb8;background:#fff9ed;color:#a96609;}
.app-dialog-button.confirm.type-warning{border-color:#b87512;background:#c98318;box-shadow:0 4px 11px rgba(184,108,8,.15);}

.app-dialog-overlay.type-info .app-dialog-icon{border-color:#cfdef6;background:#f1f6ff;color:#2f72d7;}
.app-dialog-button.confirm.type-info{border-color:#2d68bd;background:#3778d8;box-shadow:0 4px 11px rgba(47,114,215,.16);}

/* Inbox visual polish — behavior and layout logic remain unchanged */
.inbox-layout{
  border-color:#dbe4ed;

}

.conversation-title-row time{font-weight:650;}
.chat-panel{background-color:#efeae2;}

.chat-actions select{background-color:#fff;}

.chat-more-menu{border:1px solid #e1e8ef;background:#fff;box-shadow:0 17px 42px rgba(10,29,48,.17);}

.window-source{background:rgba(255,255,255,.44);}

.rich-reply-box,.template-reply{border-top:1px solid #dce4ec;background:#f7f9fb;}
.reply-tool-button{border-color:#d8e1ea;}
.reply-tool-button:hover{border-color:#bfcbd7;background:#f4f7fa;}

.reply-preview{border-color:#d9e2ea;border-radius:10px;}
.reply-attachment-menu{border:1px solid #dfe7ef;box-shadow:0 16px 38px rgba(12,31,50,.16);}

.live-inbox-pill{box-shadow:var(--shadow-xs);}

/* Empty states */
.empty-state,.customer-empty,.chat-placeholder{color:#7d899b;}
.empty-state i,.chat-placeholder i{filter:drop-shadow(0 6px 14px rgba(22,164,103,.09));}

/* Desktop and smaller laptop */
@media(max-width:1250px){
  .page-content{padding:25px 23px 32px;}
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .two-column{grid-template-columns:minmax(0,1.45fr) minmax(290px,.8fr);}
}

/* Tablet / drawer navigation */
@media(max-width:1100px){

  .sidebar-overlay{-webkit-backdrop-filter:blur(2px);}

  .two-column,.dashboard-grid{grid-template-columns:1fr;}
  .import-contacts-panel{order:2;}
}

@media(max-width:820px){
  
  .page-heading{align-items:flex-start;flex-direction:column;gap:13px;}
  .heading-actions{width:100%;justify-content:flex-start;}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid{grid-template-columns:1fr;}
  .agent-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-panel{padding:20px;}
}

/* Mobile */
@media(max-width:720px){

  .brand{height:68px;padding:0 17px;}

  .mobile-page-title{max-width:42vw;font-size:14px;}
  .connection-pill{width:37px;margin-left:auto;justify-content:center;}
  .connection-pill i{font-size:13px;}
  
  .page-heading{margin-bottom:16px;gap:11px;}

  .heading-actions .btn{width:100%;padding-inline:10px;}
  .heading-actions>*:only-child{grid-column:1/-1;}
  .panel{border-radius:13px;}

  .search-form{width:100%;}
  .search-form input{flex:1;min-width:0;}

  .metric-icon{border-radius:12px;}
  .support-number{font-size:44px;}
  .agent-grid{grid-template-columns:1fr;}
  .agent-card{padding:17px;}
  th,td{padding:12px 13px;}
  table{min-width:670px;}
  .table-wrap::after{
    content:"Swipe to view more";
    position:sticky;
    left:0;
    display:block;
    width:max-content;
    margin:7px 10px 9px auto;
    padding:3px 8px;
    border:1px solid #e1e8ef;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#8a96a6;
    font-size:9px;
    font-weight:700;
    pointer-events:none;
  }
  .row-actions{flex-wrap:nowrap;}
  
  .btn.small{min-height:33px;}
   /* avoids unwanted iOS zoom */
  .import-contacts-body{padding:15px;}
  .import-samples{grid-template-columns:1fr;}
  .auth-body{padding:14px;}
  .auth-card,.auth-card.wide{padding:24px 20px;border-radius:18px;}
  .auth-card h1{font-size:24px;}

  .modal-head{margin:-19px -19px 18px;padding:13px 12px 13px 18px;border-radius:15px 15px 0 0;}
  .modal-head h2{font-size:17px;}
  .app-dialog-overlay{align-items:center;padding:12px;}
  .app-dialog{
    width:min(390px,100%);
    grid-template-columns:40px minmax(0,1fr);
    column-gap:12px;
    padding:18px 18px 0;
    border-radius:15px;
  }
  .app-dialog-icon{width:40px;height:40px;border-radius:11px;font-size:16px;}
  .app-dialog-copy{padding-right:24px;}
  .app-dialog-copy h2{font-size:17px;}
  .app-dialog-copy p{font-size:12.5px;}
  .app-dialog-actions{margin:17px -18px 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:8px;}
  .app-dialog-button{flex:1;min-width:0;min-height:40px;padding-inline:10px;}
  
  .conversation-filter-bar{padding:9px;}
  .conversation-item{min-height:69px;}
  .chat-panel{inset:64px 0 0;}
  .chat-header{border-radius:0;}
  .service-window{text-align:center;}
  .window-source{margin-left:4px;padding-inline:5px;}
}

@media(max-width:480px){
  .heading-actions{grid-template-columns:1fr;}
  .metric-grid{grid-template-columns:1fr 1fr;}
  .metric-card{display:grid;align-content:start;}
  .metric-card::after{display:none;}
  .metric-card strong{font-size:20px;}
  .panel-header .search-form{display:grid;grid-template-columns:minmax(0,1fr) 43px;}
  .agent-stats{grid-template-columns:1fr 1fr;}
  .template-empty-card{padding:38px 17px;}
  .template-empty-actions,.template-help-actions{display:grid;width:100%;}
  .template-empty-actions .btn,.template-help-actions .btn,.template-help-actions form{width:100%;}
  .app-dialog-kicker{display:none;}
}

@media(max-width:360px){
  .mobile-page-title{max-width:36vw;}
  .metric-grid{grid-template-columns:1fr;}
  .metric-card{display:flex;min-height:82px;}
  .app-dialog-actions{display:grid;grid-template-columns:1fr;}
  .app-dialog-button.confirm{order:-1;}
}

@media(hover:hover){
  .metric-card,.agent-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
}

@media(prefers-reduced-motion:reduce){
  .metric-card,.agent-card{transform:none!important;}
}

/* Dashboard support inbox card correction.
   Keep this card compact instead of stretching to the height of the campaigns table. */
.dashboard-grid > .support-card{
  align-self:start;
  padding-bottom:16px;
}
.dashboard-grid > .support-card .support-number{
  margin:22px 16px 5px;
  font-size:46px;
  line-height:1;
}
.dashboard-grid > .support-card > p{
  margin:0 16px 20px;
  line-height:1.45;
}
.dashboard-grid > .support-card > .btn.full{
  
  max-width:none;
  
  min-height:44px;
  border-radius:10px;
}

@media(max-width:1100px){
  .dashboard-grid > .support-card{
    width:100%;
  }
}

@media(max-width:720px){
  .dashboard-grid > .support-card{
    padding-bottom:14px;
  }
  .dashboard-grid > .support-card .panel-header{
    align-items:center;
  }
  .dashboard-grid > .support-card .support-number{
    margin-top:18px;
    font-size:40px;
  }
  .dashboard-grid > .support-card > p{
    margin-bottom:17px;
  }
  .dashboard-grid > .support-card > .btn.full{
    
    min-height:42px;
  }
}

/* ========================================================================
   MOBILE ACTIVE-CHAT FULL-SCREEN FIX
   The normal app header remains available on the conversation list. Once a
   conversation is opened on a phone, the chat takes over the full viewport,
   so the navigation drawer cannot appear above or outside the conversation.
   ======================================================================== */
@media (max-width:720px){
  body:has(.inbox-layout.chat-open) .topbar{
    display:none!important;
  }

  body:has(.inbox-layout.chat-open) .sidebar,
  body:has(.inbox-layout.chat-open) .sidebar-overlay{
    display:none!important;
  }

  body.sidebar-open:has(.inbox-layout.chat-open){
    overflow:visible!important;
  }

  body:has(.inbox-layout.chat-open) .page-content{
    width:100%;
    max-width:none;
    height:100dvh;
    padding:0!important;
    margin:0!important;
    overflow:hidden;
  }

  body:has(.inbox-layout.chat-open) .rich-reply-box{
    width:100%;

    background:#f8fafc;
  }

  body:has(.inbox-layout.chat-open) .rich-reply-box textarea{
    min-width:0;

  }

  body:has(.inbox-layout.chat-open) .reply-tool-button{
    width:40px;
    height:46px;
    flex:0 0 40px;
  }

  body:has(.inbox-layout.chat-open) .send-button{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    margin:0!important;
  }

  body:has(.inbox-layout.chat-open) .reply-attachment-menu{
    bottom:calc(72px + env(safe-area-inset-bottom));
  }

  body:has(.inbox-layout.chat-open) .inbox-toast{
    top:10px;
  }
}

@media (max-width:380px){
  body:has(.inbox-layout.chat-open) .rich-reply-box{
    padding-left:8px!important;
    padding-right:9px!important;
    gap:6px!important;
  }

  body:has(.inbox-layout.chat-open) .reply-tool-button{
    width:38px;
    flex-basis:38px;
  }

  body:has(.inbox-layout.chat-open) .send-button{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
}

/* Support inbox button alignment fix */
.dashboard-grid > .support-card{
  display:flex;
  flex-direction:column;
}
.dashboard-grid > .support-card > .btn.full{
  display:flex;
  width:calc(100% - 32px);
  margin:0 16px;
  justify-content:center;
  align-items:center;
  align-self:center;
  white-space:nowrap;
}
@media(max-width:720px){
  .dashboard-grid > .support-card > .btn.full{
    width:calc(100% - 28px);
    margin:0 14px;
  }
}

/* ========================================================================
   SHARED HEADER ACCOUNT MENU
   Replaces the standalone logout icon with a compact three-dot menu on every
   authenticated page, including administrator, supervisor and agent accounts.
   ======================================================================== */
.top-account{
  
  display:flex;
  align-items:center;
  gap:7px;
  
}
.top-account .top-user{margin-right:0;}
.account-menu-button{
  position:relative;
  flex:0 0 auto;
  font-size:17px;
}
.account-menu-button[aria-expanded="true"]{
  border-color:#cbd6e2;
  background:#f1f5f9;
  color:#1f3046;
  box-shadow:0 4px 12px rgba(18,38,63,.08);
}
.account-menu-dropdown{
  position:absolute;

  z-index:120;

  transform-origin:top right;
  animation:accountMenuIn .16s ease-out;
}
.account-menu-dropdown[hidden]{display:none!important;}
.account-menu-profile{
  display:flex;
  align-items:center;
  
  min-width:0;
  
  margin-bottom:6px;
  
}
.account-menu-profile .avatar{
  width:36px;
  height:36px;
  flex:0 0 36px;
  font-size:13px;
}
.account-menu-profile>span:last-child{
  display:grid;
  min-width:0;
  line-height:1.3;
}
.account-menu-profile strong,
.account-menu-profile small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-menu-profile strong{color:#1e2c40;font-size:13px;font-weight:780;}
.account-menu-profile small{margin-top:2px;color:#7a8799;font-size:11px;}
.account-menu-item{
  width:100%;
  
  padding:9px 11px;
  
  display:flex;
  align-items:center;
  gap:10px;
  color:#34445a;
  font-weight:700;
  transition:background .16s ease,color .16s ease;
}
.account-menu-item i{width:18px;text-align:center;}
.account-menu-item:hover,
.account-menu-item:focus-visible{
  outline:0;
  background:#f3f6f9;
  color:#18283d;
}

.account-menu-item.logout:hover,
.account-menu-item.logout:focus-visible{background:#fff1f2;color:#a5222e;}
@keyframes accountMenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:720px){
  .top-account{margin-left:3px;}
  .top-account .top-user{display:none!important;}
  .account-menu-button{width:40px;height:40px;}
  
}

/* Inbox mobile back button refinement.
   Visual-only: keeps the arrow perfectly centered inside a compact square button. */
@media(max-width:650px){
  .mobile-chat-back{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    flex:0 0 42px;
    padding:0;
    margin:0;
    border:1px solid #d7e0ea;
    border-radius:11px;
    background:#f8fafc;
    color:#26364b;
    box-shadow:0 2px 7px rgba(20,39,63,.08);
    line-height:1;
  }
  .mobile-chat-back i{
    display:block;
    margin:0;
    font-size:17px;
    line-height:1;
    transform:none;
  }
  .mobile-chat-back:hover,
  .mobile-chat-back:focus-visible{
    border-color:#b8c6d5;
    background:#f0f4f8;
    color:#10243b;
    outline:0;
    box-shadow:0 0 0 3px rgba(23,184,102,.12),0 3px 9px rgba(20,39,63,.1);
  }
  .mobile-chat-back:active{
    background:#e8eef4;
    box-shadow:0 1px 3px rgba(20,39,63,.08);
    transform:translateY(1px);
  }
}

/* ========================================================================
   MOBILE API STATUS BADGE
   Shows a clear check + "API" label instead of an unexplained phone icon.
   ======================================================================== */

@media (max-width:720px){
  .topbar .connection-pill{
    width:auto!important;
    min-width:64px!important;
    height:38px!important;
    min-height:38px!important;
    
    padding:0 11px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .topbar .connection-pill i{
    margin:0!important;
    font-size:14px!important;
  }

  .topbar .connection-pill .connection-label-full{display:none!important;}
  .topbar .connection-pill .connection-label-mobile{
    display:inline!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
  }

  /* MOBILE HAMBURGER BUTTON REFINEMENT */
  .topbar .menu-button{
    display:inline-grid!important;
    place-items:center!important;

    padding:0!important;
    margin:0 3px 0 0!important;
    border:1px solid #dce4ed!important;
    
    background:#f8fafc!important;
    color:#34465c!important;
    box-shadow:0 2px 7px rgba(15,36,59,.07)!important;
    
    line-height:1!important;
  }

  .topbar .menu-button i{
    display:block!important;
    margin:0!important;
    line-height:1!important;
    transform:none!important;
  }

  .topbar .menu-button:hover,
  .topbar .menu-button:focus-visible{
    outline:0!important;
    border-color:#bdcad8!important;
    background:#f0f4f8!important;
    color:#172a40!important;
    box-shadow:0 0 0 3px rgba(23,184,102,.10),0 3px 9px rgba(15,36,59,.09)!important;
  }

  .topbar .menu-button:active{
    background:#e9eff5!important;
    transform:translateY(1px)!important;
    box-shadow:0 1px 3px rgba(15,36,59,.08)!important;
  }
}

/* ========================================================================
   GREENLEAF DIGITAL HEADER LOGO
   Desktop: immediately after the API status badge.
   Mobile: replaces the page title and appears immediately after the menu button.
   ======================================================================== */
.topbar .menu-button{order:1;}
.topbar .mobile-page-title{order:2;}
.topbar .connection-pill{order:3;flex:0 0 auto;}
.topbar .header-company-logo{
  order:4;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:clamp(175px,15vw,230px);
  height:62px;
  min-width:0;
  margin-left:18px;
  overflow:hidden;
  flex:0 1 auto;
}
.topbar .header-company-logo img{
  display:block;
  width:100%;
  height:auto;
  max-height:58px;
  object-fit:contain;
  object-position:left center;
}

.topbar .top-account{order:6;}

@media (max-width:1100px){
  .topbar .header-company-logo{
    width:clamp(150px,21vw,220px);
    margin-left:14px;
  }
}

@media (max-width:720px){
  /* The company logo replaces the page title on phones. */
  .topbar .mobile-page-title{
    display:none!important;
  }
  .topbar .header-company-logo{
    order:2;

    margin:0 7px;
    flex:0 1 auto;
  }
  
  .topbar .connection-pill{
    order:3;
    flex:0 0 auto!important;
    margin-left:auto!important;
  }
  .topbar .topbar-spacer{order:4;}
  .topbar .top-account{order:5;flex:0 0 auto;}
}

@media (max-width:430px){
  
  .topbar .connection-pill{
    min-width:58px!important;
    padding-inline:9px!important;
  }
}

@media (max-width:360px){
  
}

/* ========================================================================
   DESKTOP HEADER POSITION FIX
   Desktop/tablet: logo uses the former API position on the left; API status
   sits on the right immediately before the signed-in Administrator/account.
   Phone layout remains: menu -> logo -> API -> account menu.
   ======================================================================== */
@media (min-width:721px){
  .topbar .menu-button{order:1;}
  .topbar .mobile-page-title{order:2;}
  .topbar .header-company-logo{
    order:3;
    margin-left:0;
    margin-right:18px;
  }
  .topbar .topbar-spacer{order:4;display:block;flex:1 1 auto;}
  .topbar .connection-pill{
    order:5;
    margin-left:12px;
    margin-right:14px;
    flex:0 0 auto;
  }
  .topbar .top-account{order:6;flex:0 0 auto;}
}

/* ========================================================================
   MOBILE GREENLEAF LOGO — ONE MORE SIZE INCREASE
   Phone-only visual adjustment. Desktop/tablet positioning is unchanged.
   ======================================================================== */
@media (max-width:720px){
  .topbar .header-company-logo{
    width:clamp(146px,43vw,210px);
    height:55px;
    margin-left:4px;
    margin-right:4px;
  }
  .topbar .header-company-logo img{
    max-height:53px;
  }
}

@media (max-width:430px){
  .topbar .header-company-logo{
    width:clamp(142px,43vw,185px);
    margin-left:2px;
    margin-right:2px;
  }
}

@media (max-width:360px){
  .topbar .header-company-logo{
    width:136px;
    margin-left:1px;
    margin-right:1px;
  }
}

/* ========================================================================
   MOBILE GREENLEAF LOGO — SLIGHT RIGHT POSITION ADJUSTMENT
   Moves only the phone header logo a few pixels to the right. Logo size and
   desktop/tablet header layout remain unchanged.
   ======================================================================== */
@media (max-width:720px){
  .topbar .header-company-logo{
    transform:translateX(6px);
  }
}

@media (max-width:360px){
  .topbar .header-company-logo{
    transform:translateX(4px);
  }
}

/* ========================================================================
   SIDEBAR DEVELOPER CREDIT
   Cleaner compact card with improved alignment and better proportions.
   ======================================================================== */
.sidebar-developer{
  position:relative;

}
.sidebar-developer .developer-card-row{
  display:grid;
  
  align-items:center;
  
}

.sidebar-developer .developer-card-bottom{
  text-decoration:none;
}
.sidebar-developer .developer-icon{

  display:grid;
  place-items:center;
  
  border:1px solid rgba(74,221,153,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.sidebar-developer .developer-icon i{
  
  color:#2fe084;
}
.sidebar-developer .developer-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.sidebar-developer .developer-value{
  
  font-size:13px;
  line-height:1.2;
  font-weight:800;
}
.sidebar-developer .developer-phone{
  color:#ffffff;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
}
.sidebar-developer .developer-divider{
  
  border-top:1px dashed rgba(173,192,210,.2);
}
.sidebar-developer .developer-contact{
  color:inherit;
}
.sidebar-developer .developer-contact:hover,
.sidebar-developer .developer-contact:focus-visible{
  color:inherit;
}
.sidebar-developer .developer-arrow{

  line-height:1;
  opacity:.9;
  transition:transform .18s ease, opacity .18s ease;
}
.sidebar-developer .developer-contact:hover .developer-arrow,
.sidebar-developer .developer-contact:focus-visible .developer-arrow{
  transform:translateX(2px);
  opacity:1;
}

@media (max-width:720px){
  .sidebar-developer{
    margin:-4px 14px 18px;
    padding:11px;
  }
  .sidebar-developer .developer-card-row{
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:9px;
  }
  .sidebar-developer .developer-card-top{
    grid-template-columns:40px minmax(0,1fr);
  }
  .sidebar-developer .developer-icon{
    width:40px;
    height:40px;
    border-radius:11px;
  }
  .sidebar-developer .developer-icon i{
    font-size:17px;
  }
  .sidebar-developer .developer-label{
    font-size:10.5px;
  }
  .sidebar-developer .developer-value,
  .sidebar-developer .developer-phone{
    font-size:12.5px;
  }
  .sidebar-developer .developer-divider{
    margin:9px 0;
  }
}

/* ========================================================================
   FINAL UNIFORM HEADER + DIVIDER ALIGNMENT
   One shared header system for Dashboard, Contacts, Templates, Campaigns,
   Agent Inbox, Agents and API Settings. The sidebar brand divider and the
   main topbar divider now sit on the exact same horizontal line at every
   responsive breakpoint.
   ======================================================================== */
:root{
  --app-header-height:74px;
  --app-header-divider:1px;
}

.brand,
.topbar{
  box-sizing:border-box;
  height:var(--app-header-height)!important;
  min-height:var(--app-header-height)!important;
  max-height:var(--app-header-height)!important;
  border-bottom-width:var(--app-header-divider)!important;
  border-bottom-style:solid!important;
}

.brand{
  flex:0 0 var(--app-header-height);
  border-bottom-color:rgba(220,228,237,.16)!important;
}

.topbar{
  border-bottom-color:rgba(220,228,237,.92)!important;
}

/* Tablet: the drawer brand and visible topbar share one 70px baseline. */
@media (max-width:1100px){
  :root{--app-header-height:70px;}
}

/* Phone: both header sections share one 68px baseline. */
@media (max-width:720px){
  :root{--app-header-height:68px;}

  .brand{
    padding-top:0!important;
    padding-bottom:0!important;
  }

  .topbar{
    padding-top:0!important;
    padding-bottom:0!important;
  }
}

/* ========================================================================
   MOBILE SIDEBAR EXACT-DESIGN VISIBILITY FIX
   Preserve the original drawer sizing, spacing and card design exactly.
   When the visible mobile browser area is shorter than the drawer content,
   allow the drawer itself to move vertically instead of clipping its bottom.
   The scrollbar is hidden so the original appearance remains unchanged.
   ======================================================================== */
@media (max-width:1100px){
  .sidebar{

    overflow-x:hidden;
    overflow-y:auto;
    
    overscroll-behavior-y:contain;
    scrollbar-width:none;
  }

  .sidebar::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  @supports (height:100dvh){
    
  }
}

/* ========================================================================
   AGENT INBOX NOTICE — FULL-WIDTH, NON-OVERLAPPING RESPONSIVE ALERT
   Matches the polished page alerts used elsewhere while keeping the chat
   header, assignment controls, messages and composer fully visible.
   ======================================================================== */
.inbox-notice-slot[hidden],
.inbox-toast[hidden]{display:none!important;}
.inbox-notice-slot{
  display:block;
  width:100%;
  margin:0 0 15px;
}
.inbox-toast{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  z-index:auto!important;
  display:flex;
  align-items:center;
  width:100%;
  max-width:none!important;
  min-height:60px;
  margin:0;
  padding:15px 18px 15px 52px;
  border:1px solid;
  border-radius:14px;
  box-shadow:0 7px 22px rgba(17,37,61,.055);
  color:#087343;
  font-size:14px;
  font-weight:650;
  line-height:1.5;
  text-align:left;
  animation:inboxNoticeEnter .2s ease-out both;
}
.inbox-toast::before{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  font-size:20px;
  font-weight:850;
  line-height:1;
}
.inbox-toast.success{border-color:#b9e3cb;background:#effaf4;color:#087343;}
.inbox-toast.success::before{content:"✓";}
.inbox-toast.error{border-color:#efc1c6;background:#fff3f4;color:#aa2b37;}
.inbox-toast.error::before{content:"!";}
.inbox-toast.warning{border-color:#ecd7aa;background:#fff9ec;color:#825306;}
.inbox-toast.warning::before{content:"!";}
@keyframes inboxNoticeEnter{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:translateY(0)}
}

/* Temporarily shorten the fixed-height inbox while the page-level notice is
   visible, so no lower content is pushed below the viewport. */
body.inbox-notice-visible .inbox-layout{
  height:calc(100dvh - 166px - var(--inbox-notice-space,0px));
}
@media(max-width:1100px){
  body.inbox-notice-visible .inbox-layout{
    height:calc(100dvh - 158px - var(--inbox-notice-space,0px));
  }
}
@media(max-width:820px){
  body.inbox-notice-visible .inbox-layout{
    height:calc(100dvh - 151px - var(--inbox-notice-space,0px));
  }
}
@media(max-width:720px){
  .inbox-notice-slot{margin-bottom:10px;}
  .inbox-toast{
    min-height:0;
    padding:15px 15px 15px 52px;
    border-radius:14px;
    font-size:14px;
    line-height:1.55;
  }
  .inbox-toast::before{left:17px;}
  body.inbox-notice-visible .inbox-layout{
    height:calc(100dvh - 80px - var(--inbox-notice-space,0px));
    min-height:0;
  }

  /* In an opened phone conversation the notice becomes a normal flex item at
     the top of the chat, instead of floating over Assigned agent or Status. */
  .chat-active > .inbox-notice-slot{
    flex:0 0 auto;
    width:100%;
    margin:0;
    padding:9px 9px 0;
    background:#fff;
  }
  .chat-active > .inbox-notice-slot .inbox-toast{
    border-radius:12px;
    box-shadow:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .inbox-toast{animation:none;}
}

/* ========================================================================
   MOBILE UNREAD MESSAGE COUNT
   Keep the unread number clearly visible on every phone-sized conversation
   row without changing the existing desktop/tablet inbox layout.
   ======================================================================== */
.conversation-unread{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  box-shadow:0 2px 7px rgba(11,152,80,.2);
  font-size:11px;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.conversation-item.active .conversation-unread{background:#0a9a51;}

@media(max-width:720px){
  .conversation-item{
    position:relative;
    padding-right:48px;
  }
  .conversation-unread{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    min-width:23px;
    height:23px;
    padding-inline:6px;
    font-size:11px;
  }
}

@media(max-width:380px){
  .conversation-item{padding-right:45px;}
  .conversation-unread{right:10px;bottom:11px;}
}

/* ========================================================================
   UNREAD COUNT BESIDE CUSTOMER NAME — PHONE, TABLET AND PC
   The unread total is part of the customer row on every screen. It stays
   visible until that conversation is opened, then the existing read action
   clears it normally.
   ======================================================================== */
.conversation-title-main{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex:1 1 auto;
}
.conversation-title-main strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.conversation-title-main .conversation-unread{
  flex:0 0 auto;
}
.conversation-item.has-unread .conversation-copy > small{
  color:#34435a;
  font-weight:700;
}

@media(min-width:721px){
  .conversation-title-row{
    align-items:center;
  }
  .conversation-title-row time{
    margin-left:8px;
  }
  .conversation-title-main .conversation-unread{
    position:static;
    min-width:22px;
    height:22px;
    padding:0 6px;
  }
}

/* ========================================================================
   OUTGOING LAST-MESSAGE TICK
   Show a clear tick before the conversation preview whenever the latest
   message was sent from the business inbox, including from another device.
   Incoming customer previews remain unchanged.
   ======================================================================== */
.conversation-last-message{
  display:flex!important;
  align-items:center;
  gap:5px;
  min-width:0;
}
.conversation-last-message-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.conversation-outgoing-mark{
  flex:0 0 auto;
  position:relative;
  display:inline-block;
  width:18px;
  min-width:18px;
  height:12px;
  color:#7d8da3;
  line-height:1;
}
.conversation-outgoing-mark::before,
.conversation-outgoing-mark::after{
  content:"✓";
  position:absolute;
  top:0;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.conversation-outgoing-mark::before{
  left:0;
}
.conversation-outgoing-mark::after{
  left:5px;
}
.conversation-item.has-unread .conversation-last-message.outgoing{
  font-weight:600;
}

/* Multi-business context */
.business-context-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:18px;}
.business-context-pill i{flex:0 0 auto;}.business-context-pill:not(i){text-overflow:ellipsis;}
.business-table-actions{display:flex;gap:8px;flex-wrap:wrap;}.business-status-active{color:#15803d;}.business-status-suspended{color:#b91c1c;}
@media(max-width:760px){.business-context-pill{display:none;}}
@media (min-width:721px){.topbar .business-context-pill{margin-right:22px;}}

/* Simplified customer WhatsApp onboarding */

#embeddedSignupStatus:not(:empty){margin-top:10px!important;padding:9px 11px;border-radius:8px;background:#f2f6fb;color:#40506a;font-weight:650;}

/* ========================================================================
   CONNECTION STATUS CARD — clearer hierarchy + Meta quality colors
   ======================================================================== */

.meta-status-badge{display:inline-flex!important;align-items:center;font-weight:850!important;white-space:nowrap;border:1px solid transparent;}

.meta-status-badge.quality-green{background:#e8f8ee;color:#087b42;border-color:#bde8cd;}
.meta-status-badge.quality-yellow{background:#fff6da;color:#9b6800;border-color:#f1dda0;}
.meta-status-badge.quality-red{background:#ffe9ea;color:#bf313a;border-color:#f2bec2;}
.meta-status-badge.quality-unknown,.meta-status-badge.meta-neutral{background:#f1f4f7;color:#637083;border-color:#dfe5eb;}
.meta-status-badge.meta-success{background:#e8f8ee;color:#087b42;border-color:#bde8cd;}
.meta-status-badge.meta-danger{background:#ffe9ea;color:#bf313a;border-color:#f2bec2;}

@media(max-width:520px){

  .meta-status-badge{font-size:9.5px!important;padding:4px 7px;}
}

/* Saved credential mask: keep the visual stars solid black, not faded like normal placeholders. */
input.saved-credential-mask::placeholder{color:#000!important;opacity:1!important;font-weight:700;}

/* ========================================================================
   COMPACT CONNECTION STATUS + NON-SCROLLING SIDEBAR DENSITY
   Keeps all status information visible with less vertical travel and keeps
   the navigation comfortably within the viewport on phone/tablet/desktop.
   ======================================================================== */

.meta-status-badge{
  justify-self:start!important;
  width:max-content!important;
  padding:3px 7px!important;
  gap:5px!important;
  font-size:9px!important;
}
.meta-status-badge .fa-circle{font-size:5px!important;}

/* Slightly denser navigation everywhere, without making it feel cramped. */

.sidebar-developer .developer-value,
.sidebar-developer .developer-phone{font-size:11.5px!important;}

/* The drawer should fit, not scroll. */
@media (max-width:1100px){
  .sidebar{
    
    max-height:100vh!important;
    
    -webkit-overflow-scrolling:auto!important;
  }
  @supports (height:100dvh){
    .sidebar{height:100dvh!important;max-height:100dvh!important;}
  }
}

/* Slightly smaller hamburger control, while retaining a comfortable tap area. */
@media (max-width:720px){
  .topbar .menu-button{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin-right:2px!important;
    border-radius:10px!important;
    font-size:16px!important;
  }

}

/* Extra density only on genuinely short screens so all drawer content remains visible. */
@media (max-height:700px){
  .side-nav{padding-top:8px!important;padding-bottom:8px!important;gap:3px!important;}
  .side-nav a{min-height:38px!important;padding-top:7px!important;padding-bottom:7px!important;}
  .sidebar-user{padding-top:7px!important;margin-bottom:6px!important;}
  .sidebar-developer{margin-bottom:7px!important;padding:7px!important;}
  .sidebar-developer .developer-icon{width:32px!important;height:32px!important;}
  .sidebar-developer .developer-card-row{grid-template-columns:32px minmax(0,1fr) auto!important;}
  .sidebar-developer .developer-card-top{grid-template-columns:32px minmax(0,1fr)!important;}
  .sidebar-developer .developer-divider{margin:5px 0!important;}
}

/* ========================================================================
   UNIFIED WORKSPACE UI — BUSINESS / DASHBOARD / CONTACTS / TEMPLATES /
   CAMPAIGNS / AGENT INBOX / AGENTS / API SETTINGS
   Main-page content only. Navigation, top header and hamburger/menu behavior
   are intentionally left unchanged.
   ======================================================================== */
.page-content{
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-green:#f4fbf7;
  --ui-border:#e2e8f0;
  --ui-border-strong:#d5dee8;
  --ui-text:#182337;
  --ui-muted:#718096;
  --ui-green:#10985a;
  --ui-green-dark:#087a48;
  --ui-shadow:0 8px 24px rgba(16,35,58,.055);
  --ui-shadow-hover:0 14px 34px rgba(16,35,58,.085);

}

/* Consistent page title area */
.page-content .page-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:58px;
  margin:0 0 20px;
  padding:0 2px;
}
.page-content .page-heading>div:first-child{min-width:0;}
.page-content .page-heading h1{
  margin:0 0 5px;
  color:var(--ui-text);
  font-size:clamp(25px,2vw,30px);
  font-weight:830;
  line-height:1.14;
  letter-spacing:-.038em;
}
.page-content .page-heading p{
  max-width:800px;
  margin:0;
  color:var(--ui-muted);
  font-size:13.5px;
  line-height:1.55;
}
.page-content .heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
  flex:0 0 auto;
}
.page-content .heading-actions form{margin:0;}

/* Shared surfaces */
.page-content .panel,
.page-content .metric-card,
.page-content .agent-card{
  border:1px solid var(--ui-border);
  border-radius:16px;
  background:var(--ui-surface);
  box-shadow:var(--ui-shadow);
}
.page-content .panel{overflow:hidden;min-width:0;}
.page-content .panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:58px;
  padding:13px 17px;
  border-bottom:1px solid #e9eef3;
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}
.page-content .panel-header h2,
.page-content .panel h2{
  margin:0;
  color:#1c2a3e;
  font-size:15.5px;
  font-weight:790;
  letter-spacing:-.016em;
}
.page-content .panel-header p{margin:3px 0 0;}
.page-content .panel-header a{
  color:var(--ui-green-dark);
  font-size:12px;
  font-weight:760;
}
.page-content .panel-header a:hover{text-decoration:none;color:#066a3d;}

/* Buttons aligned across every main page */
.page-content .btn{
  min-height:41px;
  padding:8px 14px;
  border:1px solid #d6dee7;
  border-radius:10px;
  background:#fff;
  color:#304056;
  box-shadow:0 1px 2px rgba(17,34,56,.025);
  font-size:13px;
  font-weight:730;
  line-height:1.2;
}
.page-content .btn:hover{
  border-color:#bcc8d5;
  background:#fbfcfd;
  color:#18263a;
  box-shadow:0 6px 16px rgba(17,34,56,.075);
  transform:translateY(-1px);
}
.page-content .btn.primary{
  border-color:#0d9155;
  background:linear-gradient(180deg,#1fb66d,#0f9658);
  color:#fff;
  box-shadow:0 7px 16px rgba(15,150,88,.18);
}
.page-content .btn.primary:hover{
  border-color:#087f49;
  background:linear-gradient(180deg,#1aaa65,#0c884f);
  color:#fff;
}
.page-content .btn.danger,
.page-content .btn.danger-outline{
  border-color:#efc8cd;
  background:#fff;
  color:#bd3440;
  box-shadow:none;
}
.page-content .btn.danger:hover,
.page-content .btn.danger-outline:hover{border-color:#e3a5ac;background:#fff5f6;color:#a92b36;}
.page-content .btn.small{min-height:32px;padding:6px 9px;border-radius:8px;font-size:11.5px;}
.page-content .icon-button.danger{border:1px solid transparent;}
.page-content .icon-button.danger:hover{border-color:#f0c8cd;background:#fff5f6;}

/* Forms */
.page-content .form-panel{padding:21px;}
.page-content .stack-form{gap:15px;}
.page-content .form-grid{gap:14px;}
.page-content label{
  gap:7px;
  color:#334158;
  font-size:12.5px;
  font-weight:720;
}
.page-content input,
.page-content select,
.page-content textarea{
  min-height:42px;
  padding:9px 11px;
  border:1px solid #ccd6e1;
  border-radius:9px;
  background:#fff;
  color:#172235;
  box-shadow:inset 0 1px 2px rgba(17,34,56,.02);
}
.page-content input:hover,
.page-content select:hover,
.page-content textarea:hover{border-color:#b8c5d2;}
.page-content input:focus,
.page-content select:focus,
.page-content textarea:focus{
  border-color:#39ad75;
  box-shadow:0 0 0 3px rgba(16,152,90,.10);
}
.page-content .help,
.page-content .muted{color:#77859a;font-size:11.5px;line-height:1.5;}
.page-content .checkbox{padding:2px 0;}

/* Tables */
.page-content .table-wrap{
  width:100%;
  overflow:auto;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#cbd5df transparent;
}
.page-content table{
  width:100%;
  min-width:720px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}
.page-content th,
.page-content td{
  padding:12px 14px;
  border-bottom:1px solid #e9eef3;
  vertical-align:middle;
}
.page-content th{
  background:#f7f9fb;
  color:#68788e;
  font-size:10px;
  font-weight:830;
  line-height:1.25;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.page-content td{color:#36465c;font-size:12.5px;line-height:1.4;}
.page-content td strong{color:#1d2a3e;font-weight:760;}
.page-content td small,
.page-content .table-subtext{margin-top:3px;color:#7c899a;font-size:10.8px;line-height:1.35;}
.page-content tbody tr{transition:background-color .15s ease;}
.page-content tbody tr:hover{background:#f9fcfb;}
.page-content tbody tr:last-child td{border-bottom:0;}
.page-content .empty{padding:42px 20px;color:#8793a3;}
.page-content .row-actions,
.page-content .business-table-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.page-content .row-actions form,
.page-content .business-table-actions form{margin:0;}

/* Status chips */
.page-content .status{
  min-height:25px;
  padding:4px 9px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:10px;
  font-weight:820;
  line-height:1.1;
}
.page-content .business-status-active,
.page-content .business-status-suspended{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border:1px solid;
  border-radius:999px;
  font-size:10.5px;
  font-weight:820;
}
.page-content .business-status-active{border-color:#c7ead6;background:#edf9f2;color:#087a48;}
.page-content .business-status-suspended{border-color:#f0c8cd;background:#fff2f3;color:#b6303b;}

/* Notices / guidance */
.page-content .notice,
.page-content .consent-box{
  gap:11px;
  padding:13px 14px;
  border-radius:12px;
  box-shadow:none;
}
.page-content .notice{border-color:#d7e9df;background:#f5fbf8;}
.page-content .notice>i{font-size:16px;}
.page-content .notice strong{color:#254635;font-size:12.5px;}
.page-content .notice p{margin:3px 0 0;font-size:11.5px;line-height:1.5;}
.page-content code{padding:2px 5px;border-radius:5px;background:#f1f4f7;color:#34465c;font-size:.94em;}

/* Dashboard */
.page-dashboard .metric-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));

}
.page-dashboard .metric-card{

  align-items:center;
  
}
.page-dashboard .metric-card::after{

  width:76px;

  pointer-events:none;
}
.page-dashboard .metric-card:hover{border-color:#d3dce6;box-shadow:var(--ui-shadow-hover);transform:translateY(-1px);}

.page-dashboard .dashboard-grid{
  grid-template-columns:minmax(0,2.25fr) minmax(245px,.75fr);

}
.page-dashboard .support-card{align-self:start;}

.page-dashboard>section.panel:last-child{margin-top:0;}

/* Businesses */
.page-businesses .table-panel table{min-width:930px;}

.page-businesses .table-panel td:first-child strong{font-size:13px;}

/* Contacts */
.page-contacts .two-column{
  grid-template-columns:minmax(0,1.72fr) minmax(300px,.78fr);
  
  align-items:start;
}
.page-contacts .panel-header .search-form{display:flex;align-items:center;gap:7px;}

.page-contacts .search-form .btn{width:40px;min-width:40px;padding:0;}
.page-contacts .import-contacts-panel{background:#fff;}

.page-contacts .import-columns-help{border:1px solid #e5ebf1;border-radius:10px;}

.page-contacts .import-samples{grid-template-columns:1fr 1fr;}

/* Templates */
.page-templates .template-simple-note{padding:13px 16px;font-size:12px;line-height:1.5;}
.page-templates table{min-width:900px;}

.page-templates .template-empty-card{max-width:760px;margin:20px auto 0;border-style:dashed;text-align:center;}
.page-templates .template-empty-icon{margin-bottom:13px;}

/* Campaigns */
.page-campaigns table{min-width:1080px;}
.page-campaigns .progress{min-width:145px;height:7px;margin-bottom:6px;}
.page-campaigns .campaign-error{max-width:260px;}
.page-campaigns .api-error,
.page-campaigns .api-ok{font-size:11.5px;line-height:1.4;}
.page-campaigns .campaign-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

}
.page-campaigns .campaign-info-grid .notice{margin-top:0;}

/* Agents */
.page-agents .agent-grid{
  display:grid;

}

.page-agents .agent-card p{font-size:11.5px;}

.page-agents .agent-actions form{min-width:0;}
.page-agents .agent-actions .btn{min-width:0;padding-inline:8px;}

/* API settings */

.page-settings>.panel.form-panel{margin-top:16px!important;}
.page-settings>.panel.form-panel>form.stack-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 14px;
}
.page-settings>.panel.form-panel>form.stack-form>button{grid-column:1/-1;}

/* Campaign creator / other forms inherit the same visual language */
.page-campaign-create .form-panel{padding:18px 20px;}
.page-campaign-create .stack-form{gap:14px;}
.page-campaign-create .form-grid{gap:15px 16px;align-items:start;}
.page-campaign-create label{min-width:0;align-content:start;}
.page-campaign-create input,
.page-campaign-create select{min-height:46px;height:46px;}
.page-campaign-create select{padding-right:34px;}
.page-campaign-create input:focus,
.page-campaign-create select:focus,
.page-campaign-create textarea:focus{box-shadow:0 0 0 2px rgba(16,152,90,.12);}
.page-campaign-create .consent-box{padding:14px 16px;}
.page-campaign-create .btn.primary{min-height:44px;}
.page-campaign-create .template-requirements{border-radius:10px;}

/* Agent Inbox — same workspace style, while preserving its existing behavior */

.page-inbox .inbox-layout{
  height:calc(100dvh - 160px);
  min-height:520px;
  grid-template-columns:300px minmax(440px,1fr) 270px;
  border:1px solid #dde5ec;

}

.page-inbox .conversation-search input{height:41px;min-height:41px;border-radius:10px;}
.page-inbox .conversation-item{min-height:67px;padding:10px 12px;}
.page-inbox .conversation-item.active{background:linear-gradient(90deg,#eaf8f1 0%,#f5fbf8 100%);}

.page-inbox .messages{padding:17px 18px;}

.page-inbox .reply-tool-button,
.page-inbox .send-button{height:42px;}.page-inbox .voice-record-button{height:42px;}
.page-inbox .reply-tool-button{width:42px;}
.page-inbox .send-button{width:42px;flex-basis:42px;}.page-inbox .voice-record-button{width:42px;flex-basis:42px;}
.page-inbox .customer-panel{padding:20px 17px;}
.page-inbox .customer-details{gap:8px;margin-top:18px;}
.page-inbox .customer-details span{padding:10px;}

/* Modal consistency for all workspace pages */
.page-content .modal-card{border:1px solid #e1e7ee;border-radius:15px;box-shadow:0 24px 70px rgba(7,22,38,.24);}
.page-content .modal-head{background:#fbfcfd;border-bottom:1px solid #e9eef3;}

/* Large laptop */
@media(max-width:1350px){
  .page-content{padding:23px 23px 31px;}
  .page-dashboard .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-agents .agent-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-inbox .inbox-layout{grid-template-columns:285px minmax(0,1fr);}
  .page-inbox .customer-panel{display:none;}
}

/* Tablet */
@media(max-width:1100px){
  .page-content{max-width:none;}
  .page-content .page-heading{min-height:0;margin-bottom:17px;}
  .page-dashboard .dashboard-grid,
  .page-contacts .two-column{grid-template-columns:1fr;}
  .page-contacts .import-contacts-panel{order:2;}
  .page-agents .agent-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-inbox .inbox-layout{height:calc(100dvh - 154px);grid-template-columns:270px minmax(0,1fr);}
  .page-inbox .chat-header{height:auto;}
  
  .page-settings>.panel.form-panel>form.stack-form{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Small tablet / large phone */
@media(max-width:820px){
  .page-content{padding:17px 14px 25px;}
  .page-content .page-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:11px;
    margin-bottom:15px;
  }
  .page-content .page-heading h1{font-size:24px;}
  .page-content .heading-actions{width:100%;justify-content:flex-start;}
  .page-content .form-grid{grid-template-columns:1fr;}
  .page-dashboard .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-campaigns .campaign-info-grid{grid-template-columns:1fr;}
  .page-inbox .inbox-layout{grid-template-columns:245px minmax(0,1fr);height:calc(100dvh - 148px);}
  .page-settings>.panel.form-panel>form.stack-form{grid-template-columns:1fr;}
  .page-settings>.panel.form-panel>form.stack-form>button{grid-column:auto;}
  
}

/* Phone */
@media(max-width:720px){
  
  .page-content .page-heading{gap:9px;margin-bottom:13px;padding-inline:1px;}
  .page-content .page-heading h1{font-size:22px;margin-bottom:4px;}
  .page-content .page-heading p{font-size:12.5px;line-height:1.5;}
  .page-content .heading-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .page-content .heading-actions>*{min-width:0;}
  .page-content .heading-actions form{display:block;}
  .page-content .heading-actions .btn{width:100%;min-width:0;padding-inline:9px;}
  .page-content .heading-actions>*:only-child{grid-column:1/-1;}
  .page-content .panel,
  .page-content .metric-card,
  .page-content .agent-card{border-radius:12px;box-shadow:0 3px 12px rgba(16,35,58,.045);}
  .page-content .panel-header{min-height:52px;}

  .page-content .btn{min-height:40px;font-size:12.5px;}
  .page-content input,
  .page-content select,
  .page-content textarea{min-height:41px;font-size:16px;}
  .page-content th,
  .page-content td{padding:10px 11px;}
  .page-content table{min-width:650px;}
  .page-content .table-wrap::after{
    content:"Swipe to view more";
    position:sticky;
    left:0;
    display:block;
    width:max-content;
    margin:6px 8px 7px auto;
    padding:3px 7px;
    border:1px solid #e0e7ee;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:#8b96a4;
    font-size:8.5px;
    font-weight:760;
    pointer-events:none;
  }
  .page-dashboard .metric-grid{gap:8px;margin-bottom:12px;}
  .page-dashboard .metric-card{min-height:82px;padding:11px;gap:9px;}
  .page-dashboard .metric-icon{width:38px;height:38px;border-radius:10px;}
  .page-dashboard .metric-card strong{font-size:19px;}
  .page-dashboard .dashboard-grid{gap:12px;margin-bottom:12px;}
  .page-dashboard .support-card .support-number{font-size:38px;margin-top:15px;}
  .page-businesses .table-panel table{min-width:860px;}
  .page-contacts .panel-header{flex-direction:column;}
  
  .page-contacts .search-form input{min-width:0;flex:1;}
  
  .page-templates table{min-width:820px;}
  .page-campaigns table{min-width:980px;}
  .page-agents .agent-grid{grid-template-columns:1fr;gap:10px;}
  .page-agents .agent-card{padding:15px;}
  .page-agents .agent-actions{grid-template-columns:1fr 1fr;}

  /* Inbox keeps its existing phone/full-chat interaction; only visuals tighten. */
  .page-inbox{padding:8px;}
  .page-inbox .inbox-heading{display:none;}
  .page-inbox .inbox-layout{box-shadow:none;}

}

@media(max-width:480px){
  .page-content .heading-actions{grid-template-columns:1fr;}
  .page-dashboard .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-dashboard .metric-card{display:flex;}
  .page-agents .agent-actions{grid-template-columns:1fr;}
  
}

@media(max-width:360px){
  .page-dashboard .metric-grid{grid-template-columns:1fr;}

}

/* ========================================================================
   FINAL API STATUS SCALE + INBOX SEARCH ALIGNMENT
   Content-only refinements. Existing sidebar/topbar/menu behavior unchanged.
   ======================================================================== */

.page-inbox .conversation-search i{

  text-align:center!important;

  font-size:14px!important;
}
.page-inbox .conversation-search input{
  
  padding:9px 12px 9px 43px!important;
  line-height:1.2!important;
}

@media(max-width:720px){

  .page-settings .meta-status-badge{font-size:9.5px!important;padding:3px 7px!important;}

  .page-inbox .conversation-search input{padding-left:40px!important;}
}

/* ========================================================================
   WELCOME-BACK LOGIN + PUBLIC LEGAL PAGES
   ======================================================================== */
.auth-body-premium{

  color:#172235;
}

.login-welcome{
  position:relative;

  overflow:hidden;

}
.login-welcome::before,.login-welcome::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.login-welcome::before{width:340px;height:340px;right:-190px;top:-160px;background:rgba(57,224,137,.13);}
.login-welcome::after{width:260px;height:260px;left:-150px;bottom:-155px;border:1px solid rgba(118,245,176,.18);}
.login-brand-lockup{position:relative;z-index:1;display:flex;align-items:center;gap:12px;}
.login-brand-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(96,239,163,.28);color:#48df91;font-size:24px;}
.login-brand-lockup>div{display:grid;gap:1px;}
.login-welcome-copy{position:relative;z-index:1;margin:auto 0;max-width:470px;}
.login-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:17px;font-weight:850;}
.login-welcome h2{max-width:440px;margin:0;color:#fff;font-size:clamp(32px,3.4vw,45px);line-height:1.05;letter-spacing:-.045em;}
.login-welcome-copy>p{margin:18px 0 23px;}
.login-feature-list{display:grid;grid-template-columns:1fr;}
.login-feature-list span{display:flex;align-items:center;gap:10px;color:#e5f7ed;font-weight:650;}
.login-feature-list i{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.08);color:#6bedaa;font-size:11px;}
.login-welcome-footer{position:relative;z-index:1;display:flex;align-items:center;gap:8px;}

.login-company-logo{width:230px;max-width:72%;height:72px;display:flex;align-items:center;overflow:hidden;}
.login-company-logo img{display:block;width:100%;max-height:68px;object-fit:contain;object-position:left center;}
.login-mobile-product{display:none;}
.login-title-wrap h1{margin:0 0 7px;}
.login-title-wrap p{margin:0 0 24px;}
.login-alert{display:flex;align-items:center;gap:9px;margin:0 0 15px;}
.login-form{display:grid;}
.login-form label{display:grid;gap:7px;color:#344257;font-weight:750;}
.login-input-wrap{position:relative;display:block;}
.login-input-wrap>i{position:absolute;left:14px;top:50%;z-index:2;transform:translateY(-50%);color:#8a98aa;font-size:13px;pointer-events:none;}
.login-input-wrap input{width:100%;padding:10px 45px 10px 42px;border:1px solid #cfd9e4;border-radius:11px;background:#fff;color:#172235;outline:none;box-shadow:inset 0 1px 2px rgba(17,34,56,.025);}
.login-input-wrap input::placeholder{color:#9aa6b5;}
.login-input-wrap input:focus{border-color:#3eb577;box-shadow:0 0 0 4px rgba(27,173,99,.11);}
.login-password-toggle{position:absolute;right:7px;top:50%;width:35px;height:35px;display:grid;place-items:center;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:#718096;cursor:pointer;}
.login-password-toggle:hover{background:#f1f5f3;color:#24523d;}
.login-submit{height:48px!important;margin-top:2px!important;border-radius:11px!important;justify-content:space-between!important;padding-inline:17px!important;}
.login-help{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:10px 11px;border:1px solid #e3ebe7;border-radius:10px;background:#f8fbf9;line-height:1.45;}
.login-help i{margin-top:2px;color:#3d9a68;}
.login-legal-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:25px;}
.login-legal-links a{position:relative;color:#607087;font-size:10.5px;font-weight:650;}
.login-legal-links a:hover{color:#087a48;}
.login-copyright{margin:12px 0 0;text-align:center;color:#9aa6b5;}

.public-site-header{position:sticky;top:0;z-index:10;gap:20px;}
.public-brand{color:#172235;}

.public-brand>span:last-child{display:grid;gap:0;}
.public-signin-link{display:inline-flex;align-items:center;gap:7px;}

.legal-shell{padding:48px 0 54px;}

.legal-eyebrow{margin-bottom:11px;}

.legal-card section{padding:24px 0;border-bottom:1px solid #edf1ef;}.legal-card section:last-child{border-bottom:0;}
.legal-card h2,.deletion-card h2{margin:0 0 9px;letter-spacing:-.02em;}
.legal-card p,.deletion-card p{margin:0;}
.legal-card a,.deletion-card a{font-weight:720;}
.deletion-shell{width:min(820px,calc(100% - 34px));}
.deletion-card{padding:30px 34px;}
.deletion-icon{display:grid;place-items:center;margin-bottom:15px;font-size:20px;}
.deletion-steps{display:grid;margin:24px 0;padding:0;list-style:none;border:1px solid #e5ebe8;border-radius:14px;overflow:hidden;}
.deletion-steps li{display:grid;grid-template-columns:35px minmax(0,1fr);gap:12px;padding:15px;border-bottom:1px solid #e9eeeb;background:#fbfcfc;}.deletion-steps li:last-child{border-bottom:0;}
.deletion-steps li>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#e9f8ef;color:#0a8b4f;font-size:11px;font-weight:850;}
.deletion-steps strong{display:block;margin:1px 0 3px;font-size:12.5px;}
.deletion-note{display:flex;gap:11px;padding:14px;border:1px solid #d9e9df;}.deletion-note>i{margin-top:2px;color:#218b55;}.deletion-note strong{display:block;margin-bottom:3px;color:#29503b;font-size:12px;}
.deletion-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;}
.legal-primary-button,.legal-secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.legal-primary-button{border:1px solid #0c9256;}.legal-secondary-button{border:1px solid #d8e1dc;}

.public-footer nav{flex-wrap:wrap;}.public-footer a{font-weight:650;}

@media(max-width:820px){
  .auth-body-premium{padding:18px;}
  .login-shell{grid-template-columns:1fr;min-height:0;width:min(500px,100%);}
  .login-welcome{display:none;}

  .login-mobile-product{margin-bottom:12px;}
  .public-site-header{padding:0 18px;}
}
@media(max-width:520px){
  
  .login-shell{width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none;}
  
  .login-company-logo{height:62px;}
  .login-title-wrap p{margin-bottom:21px;}
  .login-input-wrap input{height:47px;font-size:16px;}
  .login-legal-links{gap:10px 13px;margin-top:22px;}
  .public-site-header{height:64px;padding:0 12px;}.public-brand-icon{width:34px;height:34px;font-size:19px;}.public-signin-link{padding:7px 9px;}
  .legal-shell,.deletion-shell{width:min(100% - 20px,900px);padding:31px 0 38px;}
  .legal-hero{padding:0 6px 20px;}.legal-hero h1{font-size:30px;}.legal-hero p{line-height:1.6;}
  .legal-card{padding:5px 18px;border-radius:15px;}.legal-card section{padding:19px 0;}.legal-card h2,.deletion-card h2{font-size:15px;}.legal-card p,.deletion-card p{font-size:11.5px;line-height:1.7;}
  .deletion-card{padding:20px 17px;border-radius:15px;}.deletion-steps li{grid-template-columns:31px minmax(0,1fr);gap:9px;padding:12px;}.deletion-steps li>span{width:28px;height:28px;}.deletion-actions{display:grid;grid-template-columns:1fr;}.legal-primary-button,.legal-secondary-button{width:100%;}
  .public-footer{width:calc(100% - 24px);align-items:flex-start;flex-direction:column;gap:10px;padding-bottom:22px;}.public-footer nav{gap:12px;}
}

/* ========================================================================
   API SETTINGS PAGE REFINEMENT — balanced desktop layout + cleaner alignment
   ======================================================================== */
.page-settings .page-heading{
  margin-bottom:20px;
}
.page-settings .page-heading h1{
  font-size:26px;
  letter-spacing:-.02em;
}
.page-settings .page-heading p{
  max-width:760px;
  font-size:13.5px;
}

.page-settings .meta-status-badge{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 9px!important;
  font-size:11px!important;
  font-weight:800;
}

@media(max-width:720px){
  .page-settings .page-heading{margin-bottom:14px;}
  .page-settings .page-heading h1{font-size:22px;}
  .page-settings .page-heading p{font-size:12.5px;}

}

/* ========================================================================
   API SETTINGS ALIGNMENT CLEANUP — remove extra right-panel heading and
   align the Phone Number ID / WABA ID section more cleanly.
   ======================================================================== */

/* ========================================================================
   MOBILE / TABLET ONLY ALIGNMENT FIXES
   Keep desktop unchanged. Tighten API settings alignment and center the
   Welcome Back / logo area on tablet and phone.
   ======================================================================== */
@media(max-width:820px){
  /* API Settings */

  /* Welcome page */

  .login-company-logo{
    
    justify-content:center!important;
  }

  .login-mobile-product{
    width:100%;
    
    text-align:center;
  }
  .login-form{gap:14px;}
  .login-help{justify-content:flex-start;}
}

@media(max-width:520px){

}

/* ========================================================================
   API SETTINGS — FULL REDESIGN (SCOPED ONLY TO .page-settings)
   No menu, login, dashboard or other page styles are changed here.
   ======================================================================== */

.page-settings .api-rd-page-heading h1{line-height:1.15;margin-bottom:6px;}
.page-settings .api-rd-page-heading p{line-height:1.55;max-width:760px;}

.page-settings .api-rd-card{
  background:#fff;

}

.page-settings .api-rd-card-title{min-width:0;}
.page-settings .api-rd-title-icon{
  flex:0 0 42px;
  display:grid;place-items:center;

}
.page-settings .api-rd-title-icon.platform{font-size:17px;}
.page-settings .api-rd-card-title>div{min-width:0;}
.page-settings .api-rd-eyebrow{
  margin-bottom:4px;

}
.page-settings .api-rd-card h2{margin:0;line-height:1.25;}
.page-settings .api-rd-card-title p{margin:5px 0 0;line-height:1.5;}
.page-settings .api-rd-state{
  display:inline-flex;align-items:center;gap:6px;
  
  font-weight:800;white-space:nowrap;
}
.page-settings .api-rd-state.is-ready{border:1px solid #bce7cd;}
.page-settings .api-rd-state.is-pending{background:#fff4df;color:#9d6108;border:1px solid #efddb8;}

.page-settings .api-rd-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

}
.page-settings .api-rd-span-2{grid-column:1/-1;}
.page-settings .api-rd-note{
  display:flex;align-items:flex-start;gap:11px;

}
.page-settings .api-rd-note-icon{
  width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;border-radius:8px;
  font-size:12px;
}
.page-settings .api-rd-note strong{display:block;color:#284c3a;line-height:1.35;}
.page-settings .api-rd-note p{margin:4px 0 0;color:#6f7f93;line-height:1.55;}

.page-settings .api-rd-field{display:grid;grid-template-rows:auto 48px auto;color:#31425a;font-weight:700;}
.page-settings .api-rd-label{line-height:1.3;}
.page-settings .api-rd-field input{
  width:100%;height:48px;min-height:48px;
  padding:10px 13px;
  border:1px solid #cad5e2;
  background:#fff;color:#1b2940;
  font-weight:600;line-height:1.2;
  outline:none;
}
.page-settings .api-rd-field input:focus{border-color:#38b477;box-shadow:0 0 0 3px rgba(27,173,99,.1);}
.page-settings .api-rd-field input::placeholder{color:#9aa6b5;font-weight:550;}
.page-settings .api-rd-field input.saved-credential-mask::placeholder{color:#000!important;opacity:1!important;font-weight:800!important;letter-spacing:.04em;}
.page-settings .api-rd-field small{display:block;line-height:1.45;font-weight:550;}

.page-settings .api-rd-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:1px;}
.page-settings .api-rd-actions .btn{min-height:42px;border-radius:10px;padding-inline:15px;}
.page-settings .api-rd-security{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 12px;border:1px dashed #dbe4ec;border-radius:10px;
  background:#fbfcfe;color:#718098;font-size:10.5px;line-height:1.5;
}
.page-settings .api-rd-security i{margin-top:2px;color:#5e7898;}

.page-settings .api-rd-stat{
  min-width:0;
  display:grid;align-items:center;
  
}
.page-settings .api-rd-stat-wide{grid-column:1/-1;}
.page-settings .api-rd-stat-icon{display:grid;place-items:center;}

.page-settings .api-rd-stat>div{display:grid;gap:3px;min-width:0;}

.page-settings .api-rd-stat strong{min-width:0;line-height:1.35;overflow-wrap:anywhere;}
.page-settings .api-rd-stat .meta-status-badge{justify-self:start;font-size:10px!important;padding:4px 7px!important;}
.page-settings .api-rd-count{
  justify-self:start;min-width:29px;height:25px;padding:0 8px;
  display:inline-grid;place-items:center;border-radius:999px;
  background:#e8f8ee;color:#087b42;border:1px solid #bde8cd;
}
.page-settings .api-rd-quality-note{
  display:flex;align-items:flex-start;gap:7px;
  margin:14px -16px 0;padding:10px 16px 12px;
  border-top:1px solid #edf1f5;
  font-size:9.5px;line-height:1.45;
}
.page-settings .api-rd-quality-note i{margin-top:2px;color:#4f9a72;}
.page-settings .api-rd-error{
  display:flex;gap:9px;margin:0 -16px;padding:11px 16px;
  border-top:1px solid #f3d5d8;
  font-size:10.5px;line-height:1.45;
}
.page-settings .api-rd-error[hidden]{display:none!important;}
.page-settings .api-rd-error i{margin-top:2px;}.page-settings .api-rd-error div{display:grid;gap:2px;}

.page-settings .api-rd-platform-form{padding-top:18px;}
.page-settings .api-rd-platform-status{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.page-settings .api-rd-platform-status>div{
  min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid #e3eaf1;border-radius:10px;background:#f9fbfd;
}
.page-settings .api-rd-platform-status span{color:#718096;font-size:10.5px;line-height:1.35;}
.page-settings .api-rd-platform-status strong{display:inline-flex;align-items:center;gap:6px;text-align:right;line-height:1.3;white-space:nowrap;}
.page-settings .api-rd-platform-status strong.is-good{color:#087b42;}
.page-settings .api-rd-platform-status strong.is-bad{color:#aa680c;}
.page-settings .api-rd-platform-save{display:flex;justify-content:flex-end;}
.page-settings .api-rd-platform-save .btn{min-width:220px;min-height:42px;border-radius:10px;}

/* Tablet */
@media(max-width:1100px){
  .page-settings .api-rd-layout{grid-template-columns:1fr;}
  .page-settings .api-rd-overview-card{padding:15px 15px 0;}
  .page-settings .api-rd-quality-note{margin-inline:-15px;padding-inline:15px;}
  .page-settings .api-rd-error{margin-inline:-15px;padding-inline:15px;}
}

/* Small tablet / large phone */
@media(max-width:820px){
  .page-settings .api-rd-page-heading{margin-bottom:14px;}
  .page-settings .api-rd-page-heading h1{font-size:23px;}
  .page-settings .api-rd-page-heading p{font-size:12.5px;}
  .page-settings .api-rd-card{border-radius:14px;}
  .page-settings .api-rd-card-head{padding:15px;gap:10px;}
  .page-settings .api-rd-title-icon{width:38px;height:38px;flex-basis:38px;border-radius:10px;font-size:18px;}
  .page-settings .api-rd-card h2{font-size:15px;}
  .page-settings .api-rd-card-title p{font-size:11px;}
  .page-settings .api-rd-form{grid-template-columns:1fr;gap:13px;padding:15px;}
  .page-settings .api-rd-span-2{grid-column:auto;}
  .page-settings .api-rd-field{grid-template-rows:auto 46px auto;}
  .page-settings .api-rd-field input{height:46px;min-height:46px;}
  .page-settings .api-rd-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .page-settings .api-rd-platform-status{grid-template-columns:1fr;}
}

/* Phone */
@media(max-width:600px){
  .page-settings .api-rd-card-head{align-items:flex-start;}
  .page-settings .api-rd-card-title{gap:9px;}
  .page-settings .api-rd-title-icon{width:34px;height:34px;flex-basis:34px;font-size:16px;}
  .page-settings .api-rd-eyebrow{font-size:9px;}
  .page-settings .api-rd-card h2{font-size:14px;}
  .page-settings .api-rd-card-title p{font-size:10.5px;}
  .page-settings .api-rd-state{font-size:9px;padding:5px 7px;}
  .page-settings .api-rd-form{padding:13px;gap:12px;}
  .page-settings .api-rd-note{padding:11px 12px;}
  .page-settings .api-rd-note p{font-size:10.5px;}
  .page-settings .api-rd-field input{font-size:16px;}
  .page-settings .api-rd-actions{display:grid;grid-template-columns:1fr;gap:8px;}
  .page-settings .api-rd-actions .btn{width:100%;}
  .page-settings .api-rd-overview-card{padding:13px 13px 0;}
  .page-settings .api-rd-overview-grid{grid-template-columns:1fr;gap:7px;}
  .page-settings .api-rd-stat,.page-settings .api-rd-stat-wide{grid-column:auto;min-height:58px;padding:9px 10px;}
  .page-settings .api-rd-stat-icon{width:33px;height:33px;font-size:12px;}
  .page-settings .api-rd-stat small{font-size:10px;}
  .page-settings .api-rd-stat strong{font-size:12px;}
  .page-settings .api-rd-quality-note{margin-inline:-13px;padding:9px 13px 11px;}
  .page-settings .api-rd-error{margin-inline:-13px;padding:10px 13px;}
  .page-settings .api-rd-platform-status>div{align-items:flex-start;flex-direction:column;gap:4px;}
  .page-settings .api-rd-platform-status strong{text-align:left;white-space:normal;}
  .page-settings .api-rd-platform-save{display:block;}
  .page-settings .api-rd-platform-save .btn{width:100%;min-width:0;}
}

/* ========================================================================
   MOBILE WELCOME HEADER REFINEMENT
   Match the cleaner centered look shown in the design reference.
   Desktop stays unchanged.
   ======================================================================== */
@media(max-width:820px){
  .auth-body-premium{
    background:
      radial-gradient(circle at top right, rgba(40,184,98,.06) 0, rgba(40,184,98,.06) 120px, transparent 121px),
      linear-gradient(180deg, #fbfefc 0%, #f6fbf8 100%)!important;
  }
  .login-shell{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .login-form-panel{
    align-items:center;
    padding:34px 28px 30px!important;
    background:transparent!important;
  }
  .login-company-logo,
  .login-title-wrap,
  .login-alert,
  .login-form,
  .login-help,
  .login-legal-links,
  .login-copyright{
    width:min(100%,420px);
  }
  .login-company-logo{
    width:250px;
    max-width:82%;
    height:auto;
    min-height:68px;
    margin:0 auto 18px!important;
    justify-content:center;
  }
  .login-company-logo img{
    max-height:74px;
    object-position:center center!important;
  }
  .login-title-wrap{
    text-align:center!important;
    margin-bottom:22px;
  }
  .login-mobile-product{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:8px 14px;
    margin:0 auto 16px!important;
    border:1px solid #d8efe0;
    border-radius:999px;
    background:linear-gradient(180deg,#ffffff 0%, #f5fbf7 100%);
    color:#0d8f53;
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.05em;
    box-shadow:0 6px 16px rgba(15,132,79,.08);
  }
  .login-mobile-product i{font-size:14px;}
  .login-title-wrap h1{
    margin:0 0 10px;
    font-size:clamp(40px, 6.8vw, 50px);
    line-height:1.02;
    letter-spacing:-.045em;
    color:#14233a;
  }
  .login-title-wrap p{
    max-width:370px;
    margin:0 auto;
    color:#6d7b90;
    font-size:14px;
    line-height:1.6;
  }
}

@media(max-width:520px){
  .auth-body-premium{
    padding:0!important;
    background:
      radial-gradient(circle at 100% 0, rgba(43,182,101,.08) 0, rgba(43,182,101,.08) 92px, transparent 93px),
      radial-gradient(circle at 0 100%, rgba(43,182,101,.06) 0, rgba(43,182,101,.06) 112px, transparent 113px),
      linear-gradient(180deg, #fbfefc 0%, #f5faf7 100%)!important;
  }
  
  .login-company-logo,
  .login-title-wrap,
  .login-alert,
  .login-form,
  .login-help,
  .login-legal-links,
  .login-copyright{width:100%;}
  .login-company-logo{
    width:268px;
    max-width:92%;
    min-height:70px;
    margin-bottom:14px!important;
  }
  .login-company-logo img{max-height:74px;}
  .login-mobile-product{
    padding:7px 13px;
    margin-bottom:14px!important;
    font-size:11.5px;
  }
  .login-title-wrap{
    margin-bottom:18px;
  }
  .login-title-wrap h1{
    font-size:32px;
    margin-bottom:8px;
  }
  .login-title-wrap p{
    font-size:12.5px;
    max-width:100%;
  }
}

/* ========================================================================
   WELCOME PAGE MICRO FIXES
   - Center mobile welcome content vertically
   - Add dot separators between legal links on PC / tablet / phone
   ======================================================================== */
.login-legal-links{
  gap:0!important;
}
.login-legal-links a{
  display:inline-flex;
  align-items:center;
}
.login-legal-links a + a::before{
  content:"•";
  display:inline-block;
  margin:0 14px;
  color:#a3adba;
  font-size:12px;
  line-height:1;
}

@media(max-width:520px){
  .login-form-panel{
    min-height:100dvh;
    justify-content:center!important;
    padding:22px 18px 24px!important;
  }
  .login-legal-links a + a::before{
    margin:0 10px;
    font-size:11px;
  }
}

/* Delete-agent button alignment only */
.page-agents .agent-actions form{width:100%;}
.page-agents .agent-actions .btn.danger{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:5px;
  white-space:nowrap;
}
.page-agents .agent-actions .btn.danger i{
  flex:0 0 auto;
  margin:0;
  line-height:1;
}

/* Production system checks */
.system-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:19px;}.system-check-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--shadow-sm);}.system-check-card>div{display:grid;gap:4px;}.system-check-card small{color:var(--muted);line-height:1.45;}.system-check-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;}.system-check-card.is-ok .system-check-icon{background:#e9f9f0;color:var(--green-dark);}.system-check-card.is-warning .system-check-icon{background:#fff4e5;color:#b36a0a;}.system-columns{align-items:start;}.system-backup-body{display:grid;gap:18px;}.system-backup-form{display:grid;gap:10px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;}.system-backup-form .btn{justify-self:start;}.system-recovery-steps{padding:15px;border-radius:12px;border:1px solid var(--line);}.system-recovery-steps p{margin:7px 0;color:var(--muted);line-height:1.5;}.system-live-help p{color:var(--muted);line-height:1.55;}.system-live-help b{color:var(--text);}
@media(max-width:700px){.system-check-grid{grid-template-columns:1fr;}.system-backup-form .btn{width:100%;}}

/* ========================================================================
   TABLET HEADER ONLY
   Hide the page-name label on tablets so the menu icon and GreenLeaf logo
   have clean space. Desktop (>1100px) and phone (<=720px) are untouched.
   ======================================================================== */
@media (min-width:721px) and (max-width:1100px){
  .topbar .mobile-page-title{
    display:none!important;
  }
}

/* ========================================================================
   TABLET HEADER ALIGNMENT ONLY
   Keep desktop and phone untouched. On tablets, use the same hamburger
   treatment as the phone header and balance the spacing between the active
   business pill, menu button and GreenLeaf logo.
   ======================================================================== */
@media (min-width:721px) and (max-width:1100px){
  .topbar{
    align-items:center!important;
  }

  .topbar .business-context-pill{
    align-self:center!important;
    margin-left:0!important;
    margin-right:12px!important;
  }

  .topbar .menu-button{
    display:inline-grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:0!important;
    margin:0 12px 0 0!important;
    border:1px solid #dce4ed!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    color:#34465c!important;
    box-shadow:0 2px 7px rgba(15,36,59,.07)!important;
    font-size:16px!important;
    line-height:1!important;
    align-self:center!important;
  }

  .topbar .menu-button i{
    display:block!important;
    margin:0!important;
    line-height:1!important;
    transform:none!important;
  }

  .topbar .menu-button:hover,
  .topbar .menu-button:focus-visible{
    outline:0!important;
    border-color:#bdcad8!important;
    background:#f0f4f8!important;
    color:#172a40!important;
    box-shadow:0 0 0 3px rgba(23,184,102,.10),0 3px 9px rgba(15,36,59,.09)!important;
  }

  .topbar .menu-button:active{
    background:#e9eff5!important;
    transform:translateY(1px)!important;
    box-shadow:0 1px 3px rgba(15,36,59,.08)!important;
  }

  .topbar .header-company-logo{
    align-self:center!important;
    margin-left:0!important;
  }
}

/* ========================================================================
   CAMPAIGN LIVE PROGRESS + TABLE ALIGNMENT
   Keeps the existing visual language while making Campaigns and Dashboard
   campaign rows easier to scan and visibly live during queue processing.
   ======================================================================== */

.page-campaigns .campaign-table td:first-child strong,
.page-dashboard .dashboard-campaign-table td:first-child strong{font-weight:780;color:#1d2b40;}

.page-campaigns .campaign-table .progress span,
.page-dashboard .dashboard-progress span{
  border-radius:999px;
  transition:width .45s ease;
}

.page-campaigns .campaign-error{line-height:1.35;}
.page-campaigns .row-actions{justify-content:flex-start;align-items:center;}
.api-processing{display:inline-flex;align-items:center;gap:6px;color:#226fd9;font-weight:720;font-size:12px;}
.api-processing i{font-size:12px;}
.status.processing,.status.queued{
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 10px;
}
.status.processing::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 0 rgba(34,111,217,.35);
  animation:campaign-status-pulse 1.35s infinite;
}

-------
.status.completed{border-radius:999px;padding:5px 10px;}
.page-dashboard .dashboard-campaign-table .status {
    position: relative;
    top: 0px;
}
@keyframes campaign-status-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,111,217,.30)}
  70%{box-shadow:0 0 0 6px rgba(34,111,217,0)}
  100%{box-shadow:0 0 0 0 rgba(34,111,217,0)}
}

.page-dashboard .dashboard-campaign-table th,
.page-dashboard .dashboard-campaign-table td{
    vertical-align:middle;

}

.page-dashboard .dashboard-progress-copy strong{

  font-variant-numeric:tabular-nums;
}

.page-dashboard .dashboard-progress{
  
  min-width:0;

  border-radius:999px;
}

@media(prefers-reduced-motion:reduce){
  .status.processing::before{animation:none;}
  .page-campaigns .campaign-table .progress span,
  .page-dashboard .dashboard-progress span{transition:none;}
}

@media(max-width:720px){

}

/* Keep the Recent campaigns table itself compact instead of stretching a
   mostly-empty white panel to the taller Support inbox card beside it. */
.page-dashboard .recent-campaigns-panel{align-self:start;}

.page-dashboard .recent-campaigns-panel tbody tr:last-child td{border-bottom:0;}
.page-campaigns .campaign-table tbody tr,
.page-dashboard .dashboard-campaign-table tbody tr{transition:background-color .16s ease;}
@media(hover:hover){
  .page-campaigns .campaign-table tbody tr:hover,
  .page-dashboard .dashboard-campaign-table tbody tr:hover{background:#fbfefd;}
}
.page-campaigns .campaign-table td:nth-child(4),
.page-campaigns .campaign-table td:nth-child(7),
.page-dashboard .dashboard-campaign-table td:nth-child(4){white-space:nowrap;}

/* ========================================================================
   DASHBOARD CARD ALIGNMENT + CAMPAIGN PAGE POLISH
   Presentation-only refinements. No campaign, queue, inbox, or assignment
   behavior is changed here.
   ======================================================================== */

/* Recent Campaigns stays compact and scrolls inside its own card. */
.page-dashboard .recent-campaigns-panel{
  display:flex;
  flex-direction:column;
  
}
.page-dashboard .recent-campaigns-panel .panel-header{flex:0 0 auto;}
.page-dashboard .recent-campaigns-panel .table-wrap{
  min-height:0;
  
  overflow:auto;

}

.page-dashboard .recent-campaigns-panel .table-wrap::-webkit-scrollbar-thumb:hover{background:#aebbc9;}

/* On desktop both cards end on the exact same baseline without becoming tall. */
@media(min-width:1101px){
  .page-dashboard .dashboard-grid{align-items:stretch;}

  .page-dashboard .support-card{
    display:flex;
    flex-direction:column;
    padding-bottom:14px;
  }
  .page-dashboard .support-card>.btn.full{
    margin: auto 16px 0;
  }
}

/* Keep the stacked tablet/mobile layout natural while retaining the scroll cap. */
@media(max-width:1100px){
  .page-dashboard .recent-campaigns-panel,
  .page-dashboard .support-card{
    height:auto;
    align-self:start;
  }
  
}

/* Campaign page: subtle visual cleanup only. */
.page-campaigns section.panel[data-live-campaigns]{
  border-color:#dde5ed;

  background:#fff;
}
.page-campaigns section.panel[data-live-campaigns] .table-wrap{background:#fff;}
.page-campaigns .campaign-table thead th{
  
  border-bottom-color:#dde6ee;

}

.page-campaigns .campaign-info-grid .notice{
  border-color:#dbe8e1;
  
  background:linear-gradient(180deg,#fbfefc 0%,#f6fbf8 100%);
  
}

@media(hover:hover){
  .page-campaigns .campaign-table tbody tr:hover{background:#f8fcfa;}
}

/* Compact dashboard pair: keep the aligned cards shorter without changing content. */
@media(min-width:1101px){
  .page-dashboard .support-number{
    margin-top:16px;
    font-size:42px;
    line-height:1.08;
  }
  .page-dashboard .support-card>p{margin:4px 16px 14px;}
}

/* ========================================================================
   CAMPAIGNS PAGE — MORE COMPACT CARDS
   Visual-only sizing refinement. No campaign behavior is changed.
   ======================================================================== */

.page-campaigns .campaign-table td{
  padding-top:11px;
  padding-bottom:11px;
}
.page-campaigns .campaign-table td:first-child strong{
  margin-bottom:1px;
  
}

.page-campaigns .campaign-table .progress{
  
  margin-bottom:5px;
}
.page-campaigns .campaign-table .status{
  padding-top:4px;
  padding-bottom:4px;
}
.page-campaigns .campaign-table .row-actions .btn.small{
  
  padding-top:5px;
  padding-bottom:5px;
}
.page-campaigns .campaign-info-grid{
  
  margin-top:11px;
}
.page-campaigns .campaign-info-grid .notice{
  min-height:0;
  padding:11px 14px;
  gap:10px;
  
}
.page-campaigns .campaign-info-grid .notice>i{
  font-size:15px;
  margin-top:1px;
}
.page-campaigns .campaign-info-grid .notice strong{
  line-height:1.3;
}
.page-campaigns .campaign-info-grid .notice p{
  margin-top:2px;
  line-height:1.4;
}

@media(max-width:820px){
  .page-campaigns .campaign-table td{
    padding-top:10px;
    padding-bottom:10px;
  }
  .page-campaigns .campaign-info-grid .notice{
    padding:10px 12px;
  }
}

@media(max-width:700px){
  .page-campaign-create .form-grid{grid-template-columns:1fr;}
}

/* Support inbox card — exact centered content alignment */

.page-dashboard .support-card .support-number{

  text-align:center;
  
}

@media(max-width:1100px){
  
  .page-dashboard .support-card>p{margin:0 0 18px;}
}

/* ========================================================================
   DASHBOARD — PREMIUM VISUAL POLISH
   Dashboard-only CSS. No data, PHP, links, campaign, inbox, or queue logic.
   ======================================================================== */
.page-dashboard{
  --dash-border:#dde6ee;
  --dash-border-soft:#e8eef3;
  --dash-ink:#172337;
  --dash-muted:#718097;
  --dash-green:#10945a;
  --dash-shadow:0 9px 28px rgba(18,38,63,.055);
  --dash-shadow-hover:0 13px 30px rgba(18,38,63,.085);
}

/* Heading */
.page-dashboard .page-heading{
  margin-bottom:17px;
  align-items:center;
}
.page-dashboard .page-heading h1{
  margin-bottom:4px;
  color:var(--dash-ink);
  font-size:27px;
  font-weight:840;
  letter-spacing:-.035em;
}
.page-dashboard .page-heading p{
  color:#75849a;
  font-size:12.5px;
}
.page-dashboard .heading-actions{gap:8px;}
.page-dashboard .heading-actions .btn{
  min-height:38px;
  padding:7px 13px;
  border-radius:10px;
  box-shadow:0 2px 7px rgba(18,38,63,.025);
}
.page-dashboard .heading-actions .btn.primary{
  box-shadow:0 6px 15px rgba(16,148,90,.16);
}

/* Metric cards */
.page-dashboard .metric-grid{
  gap:11px;
  margin-bottom:14px;
}
.page-dashboard .metric-card{
  position:relative;
  min-height:88px;
  padding:13px 14px;
  gap:11px;
  overflow:hidden;
  border:1px solid var(--dash-border);
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#fcfdfe 100%);
  box-shadow:0 5px 17px rgba(18,38,63,.045);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.page-dashboard .metric-card::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,rgba(16,148,90,.38),rgba(16,148,90,0));
  opacity:.55;
}
@media(hover:hover){
  .page-dashboard .metric-card:hover{
    transform:translateY(-2px);
    border-color:#cfdbe5;
    box-shadow:var(--dash-shadow-hover);
  }
}
.page-dashboard .metric-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  font-size:14px;
  box-shadow:inset 0 0 0 1px rgba(23,35,55,.025);
}
.page-dashboard .metric-card>div{
  align-content:center;
  gap:0;
}
.page-dashboard .metric-card small{
  color:#718096;
  font-size:10.5px;
  font-weight:740;
  letter-spacing:.005em;
}
.page-dashboard .metric-card strong{
  margin-top:1px;
  color:var(--dash-ink);
  font-size:22px;
  font-weight:850;
  line-height:1.17;
  letter-spacing:-.035em;
}
.page-dashboard .metric-card span:last-child{
  margin-top:2px;
  color:#9aa6b5;
  font-size:8.5px;
  font-weight:760;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* Shared dashboard panels */
.page-dashboard .dashboard-grid{
  gap:13px;
  margin-bottom:13px;
}
.page-dashboard .dashboard-grid>.panel,
.page-dashboard>section.panel:last-child{
  overflow:hidden;
  border:1px solid var(--dash-border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--dash-shadow);
}
.page-dashboard .panel-header{
  min-height:50px;
  padding:11px 14px;
  border-bottom:1px solid var(--dash-border-soft);
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}
.page-dashboard .panel-header h2{
  color:#1d2b40;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.012em;
}
.page-dashboard .panel-header>a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border:1px solid #e0e8ef;
  border-radius:8px;
  background:#fff;
  color:#187548;
  font-size:10.5px;
  font-weight:760;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
@media(hover:hover){
  .page-dashboard .panel-header>a:hover{
    border-color:#cce2d5;
    background:#f4fbf7;
    color:#0d8d53;
  }
}

/* Recent campaigns */
.page-dashboard .recent-campaigns-panel .table-wrap{
  background:#fff;
}

.page-dashboard .dashboard-campaign-table td{
  
  border-bottom:1px solid #edf1f4;
  color:#334158;
  font-size:11.5px;
}

.page-dashboard .dashboard-progress-copy strong{
  
  color:#405169;
  font-size:10.5px;
  font-weight:780;
  
}
.page-dashboard .dashboard-progress-copy small{

  color:#8794a6;
  font-size:9px;
  
}
.page-dashboard .dashboard-progress{
  height:6px;
  background:#edf2f5;
  box-shadow:inset 0 0 0 1px rgba(31,58,80,.025);
}
.page-dashboard .dashboard-progress span{
  background:linear-gradient(90deg,#19b66a,#0e9c58);
}
.page-dashboard .dashboard-campaign-table .status{
  min-width:64px;
  justify-content:center;
  border-radius:999px;
  padding:4px 8px;
  font-size:9.5px;
  line-height:1.15;
}
@media(hover:hover){
  .page-dashboard .dashboard-campaign-table tbody tr:hover{
    background:#f9fcfa;
  }
}

/* Support Inbox */
.page-dashboard .support-card{

  padding-bottom:13px;
  background:linear-gradient(180deg,#fff 0%,#fbfefd 100%);
}
.page-dashboard .support-card .support-number{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:72px;
  height:72px;
  margin:auto auto 7px;
  padding:0;
  border:1px solid #d9efe4;
  border-radius:20px;
  background:linear-gradient(145deg,#f1fbf5,#e8f8ef);
  color:#0b9456;
  font-size:39px;
  font-weight:860;
  line-height:1;
  letter-spacing:-.055em;
  box-shadow:0 8px 18px rgba(13,145,83,.08),inset 0 1px 0 rgba(255,255,255,.8);
}
.page-dashboard .support-card>p{
  width:100%;
  margin:0 0 auto;
  padding:0 14px;
  color:#718097;
  text-align:center;
  font-size:11.5px;
  line-height:1.4;
}
.page-dashboard .support-card>.btn.full{
  width:calc(100% - 26px);
  min-height:40px;
  margin:0 13px;
  border-radius:10px;
  font-size:11.5px;
  box-shadow:0 7px 16px rgba(16,148,90,.13);
}

/* Recent messages */
.page-dashboard>section.panel:last-child .table-wrap{
  background:#fff;
}
.page-dashboard>section.panel:last-child table thead th{
  padding:9px 12px;
  background:#f7f9fb;
  color:#758399;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.075em;
}
.page-dashboard>section.panel:last-child table td{
  padding:10px 12px;
  border-bottom:1px solid #edf1f4;
  color:#3c4b61;
  font-size:11px;
  line-height:1.35;
}
.page-dashboard>section.panel:last-child table tbody tr:last-child td{border-bottom:0;}
.page-dashboard>section.panel:last-child table td strong{
  color:#223047;
  font-size:11.5px;
  font-weight:780;
}
.page-dashboard>section.panel:last-child table td small{
  margin-top:2px;
  color:#8a96a7;
  font-size:9.5px;
}
.page-dashboard>section.panel:last-child .status{
  border-radius:999px;
  padding:4px 8px;
  font-size:9.5px;
}
@media(hover:hover){
  .page-dashboard>section.panel:last-child table tbody tr:hover{background:#fafcfb;}
}

/* Compact aligned desktop pair */
@media(min-width:1101px){
  .page-dashboard .dashboard-grid>.recent-campaigns-panel,
  .page-dashboard .dashboard-grid>.support-card{
    
    align-self:stretch;
  }
  .page-dashboard .recent-campaigns-panel .table-wrap{
    flex:1 1 auto;
    
  }
}

/* Laptop */
@media(max-width:1350px){
  .page-dashboard .metric-card{min-height:84px;padding:12px;}
  .page-dashboard .metric-icon{width:40px;height:40px;}
  .page-dashboard .metric-card strong{font-size:20px;}
}

/* Tablet/mobile */
@media(max-width:1100px){
  
  .page-dashboard .support-card .support-number{margin:18px auto 7px;}
  .page-dashboard .support-card>p{margin-bottom:17px;}
  .page-dashboard .support-card>.btn.full{margin-bottom:0;}
}
@media(max-width:700px){
  .page-dashboard .page-heading{margin-bottom:14px;}
  .page-dashboard .page-heading h1{font-size:24px;}
  .page-dashboard .heading-actions{gap:7px;}
  .page-dashboard .heading-actions .btn{min-height:37px;border-radius:9px;}
  .page-dashboard .metric-grid{gap:8px;margin-bottom:11px;}
  .page-dashboard .metric-card{min-height:78px;padding:10px 11px;border-radius:12px;}
  .page-dashboard .metric-icon{width:37px;height:37px;border-radius:10px;}
  .page-dashboard .metric-card strong{font-size:19px;}
  .page-dashboard .dashboard-grid{gap:10px;margin-bottom:10px;}
  .page-dashboard .dashboard-grid>.panel,
  .page-dashboard>section.panel:last-child{border-radius:12px;}
  .page-dashboard .panel-header{min-height:47px;padding:9px 11px;}
  .page-dashboard .panel-header h2{font-size:13px;}
  .page-dashboard .panel-header>a{min-height:27px;padding:4px 8px;}
  .page-dashboard .recent-campaigns-panel .table-wrap{max-height:252px;}
  .page-dashboard .support-card .support-number{width:66px;height:66px;border-radius:18px;font-size:36px;}
}

/* ========================================================================
   UNIFIED WORKSPACE DESIGN SYSTEM
   Mirrors the approved Dashboard visual language across all admin pages.
   Visual-only: no layout logic, PHP, data, queue, inbox or API behavior.
   ======================================================================== */
.page-content:not(.page-dashboard){
  --workspace-border:#dde6ee;
  --workspace-border-soft:#e8eef3;
  --workspace-ink:#172337;
  --workspace-muted:#718097;
  --workspace-green:#10945a;
  --workspace-shadow:0 9px 28px rgba(18,38,63,.055);
  --workspace-shadow-hover:0 13px 30px rgba(18,38,63,.085);
}

/* Page headings: same scale as Dashboard */
.page-content:not(.page-dashboard) .page-heading{
  margin-bottom:17px;
  align-items:center;
}
.page-content:not(.page-dashboard) .page-heading h1{
  margin:0 0 4px;
  color:var(--workspace-ink);
  font-size:27px;
  font-weight:840;
  line-height:1.15;
  letter-spacing:-.035em;
}
.page-content:not(.page-dashboard) .page-heading p{
  margin:0;
  color:#75849a;
  font-size:12.5px;
  line-height:1.5;
}
.page-content:not(.page-dashboard) .heading-actions{gap:8px;}
.page-content:not(.page-dashboard) .heading-actions .btn,
.page-content:not(.page-dashboard) .page-heading>.btn{
  min-height:38px;
  padding:7px 13px;
  border-radius:10px;
  box-shadow:0 2px 7px rgba(18,38,63,.025);
}
.page-content:not(.page-dashboard) .heading-actions .btn.primary{
  box-shadow:0 6px 15px rgba(16,148,90,.16);
}

/* Shared cards / panels */
.page-content:not(.page-dashboard) .panel,
.page-content:not(.page-dashboard) .agent-card,
.page-content:not(.page-dashboard) .system-check-card{
  border:1px solid var(--workspace-border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--workspace-shadow);
}
.page-content:not(.page-dashboard) .panel{overflow:hidden;}
.page-content:not(.page-dashboard) .panel-header{
  min-height:50px;
  padding:11px 14px;
  border-bottom:1px solid var(--workspace-border-soft);
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}
.page-content:not(.page-dashboard) .panel-header h2,
.page-content:not(.page-dashboard) .panel>h2{
  color:#1d2b40;
  font-size:13.5px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.012em;
}
.page-content:not(.page-dashboard) .panel-header>a:not(.btn){
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border:1px solid #e0e8ef;
  border-radius:8px;
  background:#fff;
  color:#187548;
  font-size:10.5px;
  font-weight:760;
}
@media(hover:hover){
  .page-content:not(.page-dashboard) .panel-header>a:not(.btn):hover{
    border-color:#cce2d5;
    background:#f4fbf7;
    color:#0d8d53;
  }
}

/* Buttons */
.page-content:not(.page-dashboard) .btn{
  min-height:38px;
  padding:7px 13px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:760;
  line-height:1.2;
}
.page-content:not(.page-dashboard) .btn.small{
  min-height:30px;
  padding:5px 9px;
  border-radius:8px;
  font-size:10.5px;
}
.page-content:not(.page-dashboard) .btn.primary{
  box-shadow:0 6px 15px rgba(16,148,90,.14);
}
.page-content:not(.page-dashboard) .icon-button{
  border-radius:9px;
}

/* Forms */
.page-content:not(.page-dashboard) .form-panel{
  padding:18px;
}
.page-content:not(.page-dashboard) .stack-form{gap:14px;}
.page-content:not(.page-dashboard) .form-grid{gap:14px;}
.page-content:not(.page-dashboard) label{
  gap:6px;
  color:#334158;
  font-size:11.5px;
  font-weight:760;
  line-height:1.35;
}
.page-content:not(.page-dashboard) input,
.page-content:not(.page-dashboard) select,
.page-content:not(.page-dashboard) textarea{
  min-height:42px;
  padding:9px 11px;
  border:1px solid #ccd6e1;
  border-radius:9px;
  background:#fff;
  color:#172235;
  font-size:12px;
  box-shadow:inset 0 1px 2px rgba(17,34,56,.02);
}
.page-content:not(.page-dashboard) input:focus,
.page-content:not(.page-dashboard) select:focus,
.page-content:not(.page-dashboard) textarea:focus{
  border-color:#39ad75;
  box-shadow:0 0 0 3px rgba(16,152,90,.10);
}
.page-content:not(.page-dashboard) .help,
.page-content:not(.page-dashboard) .muted{
  color:#77859a;
  font-size:10.5px;
  line-height:1.5;
}
.page-content:not(.page-dashboard) .notice,
.page-content:not(.page-dashboard) .consent-box,
.page-content:not(.page-dashboard) .import-columns-help{
  border-radius:11px;
}

/* Tables: same compact hierarchy as Dashboard */
.page-content:not(.page-dashboard) .table-wrap{
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#cbd5df transparent;
}
.page-content:not(.page-dashboard) table thead th{
  padding:9px 12px;
  border-bottom:1px solid #e2e9ef;
  background:#f7f9fb;
  color:#758399;
  font-size:9.5px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.075em;
}
.page-content:not(.page-dashboard) table td{
  padding:10px 12px;
  border-bottom:1px solid #edf1f4;
  color:#3c4b61;
  font-size:11px;
  line-height:1.35;
}
.page-content:not(.page-dashboard) table tbody tr:last-child td{border-bottom:0;}
.page-content:not(.page-dashboard) table td strong{
  color:#223047;
  font-size:11.5px;
  font-weight:780;
  line-height:1.3;
}
.page-content:not(.page-dashboard) table td small,
.page-content:not(.page-dashboard) .table-subtext{
  margin-top:2px;
  color:#8a96a7;
  font-size:9.5px;
  line-height:1.35;
}
@media(hover:hover){
  .page-content:not(.page-dashboard) table tbody tr:hover{background:#fafcfb;}
}

/* Status pills / progress */
.page-content:not(.page-dashboard) .status,
.page-content:not(.page-dashboard) .meta-status-badge{
  border-radius:999px;
  padding:4px 8px;
  font-size:9.5px;
  font-weight:760;
  line-height:1.15;
}
.page-content:not(.page-dashboard) .progress{
  height:6px;
  border-radius:999px;
  background:#edf2f5;
}
.page-content:not(.page-dashboard) .progress span{
  background:linear-gradient(90deg,#19b66a,#0e9c58);
}

/* Empty states and alerts */
.page-content:not(.page-dashboard) .empty,
.page-content:not(.page-dashboard) .empty-state{
  color:#8390a3;
  font-size:11.5px;
}
.page-content:not(.page-dashboard) .alert{
  border-radius:10px;
  font-size:11.5px;
  line-height:1.45;
}

/* Contacts */

.page-contacts .import-contacts-body{padding:15px;}
.page-contacts .import-columns-help{padding:11px 12px;background:#f8fafc;}
.page-contacts .import-columns-help>strong{color:#33465b;}
.page-contacts .import-samples{gap:8px;}

/* Templates */
.page-templates>.panel{overflow:hidden;}
.page-templates .template-empty-card{padding:24px 18px;}
.page-templates .template-empty-icon{border-radius:14px;}
.page-templates .template-data-summary{font-size:10.5px;line-height:1.45;}
.page-templates .template-simple-note,
.page-templates .template-help-warning{border-radius:11px;font-size:10.5px;line-height:1.5;}

/* Campaigns */

.page-campaigns .campaign-info-grid{gap:12px;}
.page-campaigns .campaign-info-grid .notice{
  border-radius:12px;
  box-shadow:0 5px 17px rgba(18,38,63,.035);
}
.page-campaigns .campaign-info-grid .notice strong{font-size:11.5px;}
.page-campaigns .campaign-info-grid .notice p{font-size:10.5px;}

/* Create campaign */
.page-campaign-create .form-panel{

  border-radius:14px;
  box-shadow:var(--workspace-shadow);
}
.page-campaign-create .template-requirements,
.page-campaign-create .template-message-preview,
.page-campaign-create .variable-group{border-radius:11px;}
.page-campaign-create .consent-box strong{font-size:11.5px;}
.page-campaign-create .consent-box p{font-size:10.5px;}

/* Businesses */
.page-businesses .table-panel{border-radius:14px;}

/* Agents */

@media(hover:hover){
  .page-agents .agent-card:hover{
    transform:translateY(-2px);
    border-color:#cfdbe5;
    box-shadow:var(--workspace-shadow-hover);
  }
}

/* Agent inbox: preserve workspace mechanics; match visual scale */
.page-inbox .inbox-heading h1{font-size:27px;}
.page-inbox .inbox-heading p{font-size:12.5px;}
.page-inbox .inbox-layout{
  border-color:var(--workspace-border);
  border-radius:14px;
  box-shadow:var(--workspace-shadow);
}
.page-inbox .conversation-filter-bar{background:#fbfcfd;}

.page-inbox .conversation-copy strong{color:#223047;}
.page-inbox .conversation-copy small{color:#8a96a7;}

.page-inbox .customer-active h3{color:#223047;}

/* API Settings: retain bespoke functional layout but match Dashboard surfaces/type */
.page-settings .api-rd-page-heading{margin-bottom:17px;}
.page-settings .api-rd-page-heading h1{
  font-size:27px;
  font-weight:840;
  letter-spacing:-.035em;
}
.page-settings .api-rd-page-heading p{font-size:12.5px;color:#75849a;}
.page-settings .api-rd-card{
  border:1px solid var(--workspace-border);
  border-radius:14px;
  
}
.page-settings .api-rd-card-head{
  border-bottom-color:var(--workspace-border-soft);
  
}
.page-settings .api-rd-card h2{
  color:#1d2b40;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.012em;
}

.page-settings .api-rd-field{font-size:11.5px;}

.page-settings .api-rd-field input{border-radius:9px;}

.page-settings .api-rd-actions .btn,
.page-settings .api-rd-platform-save .btn{min-height:38px;border-radius:10px;font-size:11.5px;}

/* System */

.page-system .system-backup-form,
.page-system .system-recovery-steps{border-radius:11px;}
.page-system .system-recovery-steps p,
.page-system .system-live-help p{font-size:10.5px;}

/* Modals across workspace */
.page-content:not(.page-dashboard) .modal-card{
  border:1px solid var(--workspace-border);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(7,22,38,.22);
}
.page-content:not(.page-dashboard) .modal-head{
  border-bottom-color:var(--workspace-border-soft);
}
.page-content:not(.page-dashboard) .modal-head h2{
  color:#1d2b40;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.012em;
}
.page-content:not(.page-dashboard) .modal-subtitle{font-size:10.5px;color:#77859a;}

/* Tablet/mobile: same Dashboard responsive type scale */
@media(max-width:1100px){
  .page-content:not(.page-dashboard) .two-column{gap:12px;}
}
@media(max-width:700px){
  .page-content:not(.page-dashboard) .page-heading{margin-bottom:14px;}
  .page-content:not(.page-dashboard) .page-heading h1,
  .page-settings .api-rd-page-heading h1,
  .page-inbox .inbox-heading h1{font-size:24px;}
  .page-content:not(.page-dashboard) .page-heading p,
  .page-settings .api-rd-page-heading p,
  .page-inbox .inbox-heading p{font-size:11.5px;}
  .page-content:not(.page-dashboard) .heading-actions{gap:7px;}
  .page-content:not(.page-dashboard) .heading-actions .btn,
  .page-content:not(.page-dashboard) .page-heading>.btn{min-height:37px;border-radius:9px;}
  .page-content:not(.page-dashboard) .panel,
  .page-content:not(.page-dashboard) .agent-card,
  .page-content:not(.page-dashboard) .system-check-card,
  .page-settings .api-rd-card,
  .page-inbox .inbox-layout{border-radius:12px;}
  .page-content:not(.page-dashboard) .panel-header{min-height:47px;padding:9px 11px;}
  .page-content:not(.page-dashboard) .panel-header h2,
  .page-content:not(.page-dashboard) .panel>h2{font-size:13px;}
  .page-content:not(.page-dashboard) .panel-header>a:not(.btn){min-height:27px;padding:4px 8px;}
  .page-content:not(.page-dashboard) .form-panel{padding:14px;}
  .page-content:not(.page-dashboard) input,
  .page-content:not(.page-dashboard) select,
  .page-content:not(.page-dashboard) textarea{font-size:16px;} /* prevents iOS zoom */
  .page-content:not(.page-dashboard) table td{font-size:10.5px;}
  .page-content:not(.page-dashboard) table td strong{font-size:11px;}
}

/* Agents — keep existing card design, refine only the status indicator */
.page-agents .agent-top [data-agent-status]{
  display:inline-flex;
  align-items:center;
  gap:7px;

  border-radius:999px;
  border:1px solid transparent;

  letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(18,38,63,.045);
}
.page-agents .agent-top [data-agent-status]::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
}
.page-agents .agent-top [data-agent-status].approved{
  color:#087d49;
  background:linear-gradient(180deg,#eefaf4 0%,#e6f7ef 100%);
  border-color:#ccebdc;
}
.page-agents .agent-top [data-agent-status].approved::before{
  background:#12a963;
  box-shadow:0 0 0 4px rgba(18,169,99,.11);
}
.page-agents .agent-top [data-agent-status].cancelled{
  color:#a74650;
  background:linear-gradient(180deg,#fff7f7 0%,#fff0f1 100%);
  border-color:#f0d1d5;
}
.page-agents .agent-top [data-agent-status].cancelled::before{
  background:#dc5963;
  box-shadow:0 0 0 4px rgba(220,89,99,.09);
}

/* Header logo — slightly smaller on desktop and tablet only. Mobile unchanged. */
@media (min-width:1101px){
  .topbar .header-company-logo{
    width:clamp(160px,14vw,210px);
  }
  
}

@media (min-width:721px) and (max-width:1100px){
  .topbar .header-company-logo{
    width:clamp(140px,19vw,195px);
  }
  .topbar .header-company-logo img{
    max-height:50px;
  }
}

/* System → Live validation: keep status values exactly under their headings */
.page-system .system-columns > .panel:last-child .table-wrap table{
  width:100%;
  table-layout:fixed;
}
.page-system .system-columns > .panel:last-child .table-wrap th:first-child,
.page-system .system-columns > .panel:last-child .table-wrap td:first-child{
  width:42%;
  text-align:left;
}
.page-system .system-columns > .panel:last-child .table-wrap th:nth-child(2),
.page-system .system-columns > .panel:last-child .table-wrap th:nth-child(3),
.page-system .system-columns > .panel:last-child .table-wrap th:nth-child(4),
.page-system .system-columns > .panel:last-child .table-wrap td:nth-child(2),
.page-system .system-columns > .panel:last-child .table-wrap td:nth-child(3),
.page-system .system-columns > .panel:last-child .table-wrap td:nth-child(4){
  width:19.333%;
  text-align:center;
  vertical-align:middle;
}
.page-system .system-columns > .panel:last-child .table-wrap td:nth-child(n/**/+2) .status{
  min-width:64px;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}
.page-system .system-columns > .panel:last-child .table-wrap td:nth-child(4) .status{
  min-width:82px;
}
@media(max-width:700px){
  .page-system .system-columns > .panel:last-child .table-wrap table{min-width:520px;}
}

/* ========================================================================
   SPACING-ONLY POLISH — SIDEBAR CREDIT + INBOX COMPOSER
   Visual spacing only. No structure, behavior, or application logic changes.
   ======================================================================== */

/* Give the signed-in user block and developer card a cleaner separation. */
.sidebar-developer{
  margin-top:9px!important;
}

/* Keep the extra breathing room on compact/short drawers without causing
   the sidebar to become unnecessarily tall. */
@media (max-height:700px){
  .sidebar-developer{
    margin-top:4px!important;
  }
}

/* Tablet: separate attachment, reply field and send control more clearly. */
@media (max-width:1100px){
  .page-inbox .rich-reply-box{
    gap:12px!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }
}

/* Phone/full-chat: keep comfortable spacing while preserving input width. */
@media (max-width:720px){
  .page-inbox .rich-reply-box,
  body:has(.inbox-layout.chat-open) .rich-reply-box{
    gap:10px!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(11px,env(safe-area-inset-right))!important;
  }
}

/* Very narrow phones still get a visible gap without crowding the text box. */
@media (max-width:380px){
  .page-inbox .rich-reply-box,
  body:has(.inbox-layout.chat-open) .rich-reply-box{
    gap:8px!important;
  }
}

/* ========================================================================
   DASHBOARD PROGRESS LABEL ALIGNMENT — FINAL FIX
   Keep the sent count and total count on the same line directly above
   the progress bar. The Completed status remains in its existing status
   column; no table structure or application behavior is changed.
   ======================================================================== */
.page-dashboard .dashboard-progress-copy{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100%;
  margin-bottom:5px !important;
}
.page-dashboard .dashboard-progress-copy strong{
  display:inline !important;
  flex:0 1 auto;
  margin:0;
  white-space:nowrap;
}
.page-dashboard .dashboard-progress-copy small{
  display:inline !important;
  flex:0 0 auto;
  margin:0 !important;
  white-space:nowrap;
}
.page-dashboard .dashboard-progress{
  width:100%;
  margin:0;
}

/* ==========================================================================
   DASHBOARD RECENT CAMPAIGNS — STATUS + PROGRESS COUNTS
   Keep the progress bar in the Progress column. Put Completed, 1/1 and
   1 sent together in the Status column on the same row.
   ========================================================================== */
.page-dashboard .dashboard-progress-cell{
  min-width:0;
}

.page-dashboard .dashboard-progress-cell .dashboard-progress{
  
  min-width:0;

}

.page-dashboard .dashboard-status-cell{

  flex-wrap:nowrap;

}

.page-dashboard .dashboard-status-cell strong{
  display:inline-block;

}

.page-dashboard .dashboard-status-cell small{
  display:inline-block;

}

@media(max-width:720px){

}

/* ========================================================================
   RECENT CAMPAIGNS — TIGHTER TABLE SPACING
   Reduce unused horizontal/vertical space while keeping the 4-column layout.
   ======================================================================== */

@media(max-width:720px){

}

/* ========================================================================
   FINAL RECENT CAMPAIGNS COMPACT ALIGNMENT
   Keep all four columns visible, remove the oversized left gap, tighten rows,
   align the status/counts, and make the progress bar slightly shorter.
   ======================================================================== */

.page-dashboard .dashboard-campaign-table th{
  padding:7px 10px;
}
.page-dashboard .dashboard-campaign-table td{
  padding:7px 10px;
  
}

/* Do not reserve an unnecessarily tall blank area below the last campaign. */
@media(max-width:1100px){
  
}

/* Narrow screens: fit the complete four-column table instead of forcing a
   660px horizontal canvas that creates the oversized Campaign gap. */
@media(max-width:720px){

  .page-dashboard .dashboard-campaign-table th,
  .page-dashboard .dashboard-campaign-table td{
    padding:7px 7px;
  }

  .page-dashboard .dashboard-campaign-table .status{
    min-width:0;
    padding:4px 6px;
    font-size:8.5px;
  }

}

/* ========================================================================
   RECENT CAMPAIGNS — PREMIUM TABLE POLISH
   Final override: balanced columns, consistent rhythm, and cleaner alignment.
   ======================================================================== */
.page-dashboard .recent-campaigns-panel{
  overflow:hidden;
}

.page-dashboard .dashboard-campaign-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}

/* Give the campaign name enough room without leaving a giant dead zone. */
.page-dashboard .dashboard-campaign-table th:nth-child(1){width:25%;}
.page-dashboard .dashboard-campaign-table th:nth-child(2){width:14%;}
.page-dashboard .dashboard-campaign-table th:nth-child(3){width:31%;}
.page-dashboard .dashboard-campaign-table th:nth-child(4){width:30%;}

.page-dashboard .dashboard-campaign-table thead th{
  
  padding:0 12px;
  vertical-align:middle;
  border-bottom:1px solid #e3e9ef;
  color:#748197;
  background:#f8fafc;
  font-size:9.5px;
  font-weight:820;
  letter-spacing:.075em;
  line-height:1;
}

.page-dashboard .dashboard-campaign-table tbody td{
  
  padding:9px 12px;
  
  border-bottom:1px solid #edf1f4;

  line-height:1.2;
  background:#fff;
}

.page-dashboard .dashboard-campaign-table tbody tr:last-child td{
  border-bottom:0;
}

.page-dashboard .dashboard-campaign-table tbody tr{
  transition:background .16s ease;
}

@media (hover:hover){
  .page-dashboard .dashboard-campaign-table tbody tr:hover td{
    background:#fbfdfc;
  }
}

/* Campaign identity block */
.page-dashboard .dashboard-campaign-table td:first-child strong{
  display:block;
  margin:0 0 3px;
  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.page-dashboard .dashboard-campaign-table td:first-child small{
  display:block;
  overflow:hidden;
  margin:0;

  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Recipients */
.page-dashboard .dashboard-campaign-table td:nth-child(2){
  color:#3a4960;

}

/* Progress: centered vertically and slightly shorter than the cell width. */
.page-dashboard .dashboard-progress-cell{
  padding-left:8px !important;
  padding-right:8px !important;
}

.page-dashboard .dashboard-progress-cell .dashboard-progress{

  overflow:hidden;
  background:#e9eff2;
  
  box-shadow:inset 0 0 0 1px rgba(15,45,70,.025);
}

.page-dashboard .dashboard-progress-cell .dashboard-progress span{
  display:block;
  height:100%;
  min-width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#16b66b 0%,#0c9e5b 100%);
  box-shadow:0 1px 2px rgba(9,129,72,.14);
  transition:width .45s ease;
}

/* Status + counts: one compact, balanced visual group. */

.page-dashboard .dashboard-status-cell .status{
  
  margin:0;
  
  border-radius:999px;

  line-height:1;
  box-shadow:0 1px 2px rgba(18,38,63,.03);
}

.page-dashboard .dashboard-status-cell strong{
  flex:0 0 auto;
  margin:0;

  line-height:1;
  font-variant-numeric:tabular-nums;
}

.page-dashboard .dashboard-status-cell small{
  flex:0 0 auto;
  margin:0;

  line-height:1;
}

/* Keep the panel from reserving empty vertical space when there are only a
   few recent campaigns. */
.page-dashboard .recent-campaigns-panel .table-wrap{
  max-height:none;
}

@media (max-width:720px){
  .page-dashboard .dashboard-campaign-table{
    min-width:0;
  }

  .page-dashboard .dashboard-campaign-table th:nth-child(1){width:25%;}
  .page-dashboard .dashboard-campaign-table th:nth-child(2){width:13%;}
  .page-dashboard .dashboard-campaign-table th:nth-child(3){width:30%;}
  .page-dashboard .dashboard-campaign-table th:nth-child(4){width:32%;}

  .page-dashboard .dashboard-campaign-table thead th{
    padding:0 8px;
    font-size:8.5px;
  }

  .page-dashboard .dashboard-campaign-table tbody td{
    height:54px;
    padding:8px;
    
  }

  .page-dashboard .dashboard-progress-cell{
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .page-dashboard .dashboard-progress-cell .dashboard-progress{
    
    height:5px;
  }

}

/* ========================================================================
   PREMIUM STATUS ALIGNMENT — CENTER THE COMPLETE STATUS GROUP
   ======================================================================== */
.page-dashboard .dashboard-campaign-table th:nth-child(4){
  text-align:center;
}
.page-dashboard .dashboard-campaign-table td:nth-child(4){
  text-align:center;
}
.page-dashboard .dashboard-status-cell{
  width:100%;
  display:flex;

  min-width:0;
  white-space:nowrap;
}
.page-dashboard .dashboard-status-cell .status{
  flex:0 0 auto;
}
.page-dashboard .dashboard-status-cell strong,
.page-dashboard .dashboard-status-cell small{
  flex:0 0 auto;
}

/* Keep the progress track visually centered in its column. */
.page-dashboard .dashboard-campaign-table th:nth-child(3){
  text-align:center;
}
.page-dashboard .dashboard-progress-cell{
  text-align:center;
}
.page-dashboard .dashboard-progress-cell .dashboard-progress{
  
  margin:0 auto;
}

@media(max-width:720px){
  .page-dashboard .dashboard-status-cell{
    justify-content:center;
    gap:5px;
  }
  .page-dashboard .dashboard-progress-cell .dashboard-progress{
    width:90%;
  }
}

/* ========================================================================
   COMPACT PREMIUM CAMPAIGN ROWS
   Slightly reduce row/card height while preserving comfortable spacing.
   ======================================================================== */

/* ========================================================================
   EXTRA COMPACT CAMPAIGN ROWS
   ======================================================================== */
.page-dashboard .dashboard-campaign-table th,
.page-dashboard .dashboard-campaign-table td{
  padding-top:7px !important;
  padding-bottom:7px !important;
}

/* ========================================================================
   FINAL COMPACT RECENT CAMPAIGNS CARD
   Reduce the overall card height and tighten each campaign row without
   disturbing the column/status alignment.
   ======================================================================== */
@media(min-width:1101px){

  .page-dashboard .recent-campaigns-panel .table-wrap{
    max-height:none;
    overflow-y:auto;
  }
}

.page-dashboard .dashboard-campaign-table thead th{
  height:34px;
  padding-top:6px;
  padding-bottom:6px;
}

.page-dashboard .dashboard-campaign-table tbody td{
  height:42px;
  padding-top:5px !important;
  padding-bottom:5px !important;
}

.page-dashboard .dashboard-status-cell .status{
  padding-top:5px;
  padding-bottom:5px;
}

/* ========================================================================
   RECENT CAMPAIGNS — CONTENT SCALE BALANCE
   Keep the compact row height, but bring the typography back up so the
   table content matches the rest of the dashboard.
   ======================================================================== */

.page-dashboard .dashboard-campaign-table td:first-child strong{

  margin-bottom:2px;
}

@media(max-width:720px){
  .page-dashboard .dashboard-campaign-table tbody td{
    font-size:11px;
  }

  .page-dashboard .dashboard-campaign-table td:first-child strong{
    font-size:12px;
  }

  .page-dashboard .dashboard-campaign-table td:first-child small{
    font-size:9.5px;
  }

  .page-dashboard .dashboard-campaign-table td:nth-child(2){
    font-size:11px;
  }

  .page-dashboard .dashboard-status-cell .status{
    padding:5px 8px;
    font-size:9px;
  }

  .page-dashboard .dashboard-status-cell strong{
    font-size:11px;
  }

  .page-dashboard .dashboard-status-cell small{
    font-size:9px;
  }
}

/* ========================================================================
   CAMPAIGNS PAGE — PREMIUM TABLE REFINEMENT
   Balanced columns, compact rows, clearer completed-with-failures state.
   ======================================================================== */
.page-campaigns section.panel[data-live-campaigns]{
  border-radius:14px;
  box-shadow:0 10px 28px rgba(18,38,63,.055);
}

.page-campaigns .campaign-table tbody tr:hover{background:#fbfefd;}

.page-campaigns .campaign-table .campaign-error{
  font-size:11px;
  line-height:1.35;
}
.page-campaigns .campaign-table .row-actions{
  
  flex-direction:column;

}

.page-campaigns .campaign-table .row-actions .btn.small{
  
  min-width:82px;
  padding:5px 9px;
  border-radius:8px;
  font-size:11px;
}
@media(max-width:820px){
  .page-campaigns .campaign-table tbody td{height:70px;padding-top:8px;padding-bottom:8px;}
}

/* ========================================================================
   DASHBOARD RECENT CAMPAIGNS — PREMIUM RESPONSIVE POLISH v14
   Balanced typography, amber partial state, and true phone/tablet layout.
   ======================================================================== */
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.page-dashboard .dashboard-campaign-table tbody td{
  font-size:12.5px;
  color:#334158;
  vertical-align:middle;
}
.page-dashboard .dashboard-campaign-table td:first-child strong{
  font-size:13px;
  font-weight:750;
  letter-spacing:-.01em;
  color:#1d2b40;
}
.page-dashboard .dashboard-campaign-table td:first-child small{
  font-size:10px;
  font-weight:500;
  color:#8290a4;
}
.page-dashboard .dashboard-campaign-table td:nth-child(2){
  font-size:12.5px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.page-dashboard .dashboard-progress-cell .dashboard-progress{
  width:88%;
  height:5px !important;
  border-radius:999px;
}
.page-dashboard .dashboard-status-cell{
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}
.page-dashboard .dashboard-status-cell .status{
  padding:6px 10px;
  font-size:10.5px;
  font-weight:750;
  letter-spacing:-.005em;
}
.page-dashboard .dashboard-status-cell strong{
  font-size:12.5px;
  font-weight:750;
  color:#33445d;
}
.page-dashboard .dashboard-status-cell small{
  font-size:10.5px;
  font-weight:500;
  color:#8290a4;
}
.page-dashboard .dashboard-campaign-table .status.partial{
  background:#fff4d9;
  color:#a96b00;
  border:1px solid #f1d79d;
}
.page-dashboard .dashboard-campaign-table .status.completed-with-failures{
  background:#fff4d9;
  color:#a96b00;
  border:1px solid #f1d79d;
}

/* Tablet: keep all four columns usable without forcing a 660px canvas. */
@media (min-width:721px) and (max-width:1100px){
  .page-dashboard .dashboard-campaign-table{
    table-layout:fixed;
    min-width:0;
  }
  .page-dashboard .dashboard-campaign-table th:nth-child(1){width:27%;}
  .page-dashboard .dashboard-campaign-table th:nth-child(2){width:14%;}
  .page-dashboard .dashboard-campaign-table th:nth-child(3){width:30%;}
  .page-dashboard .dashboard-campaign-table th:nth-child(4){width:29%;}
  .page-dashboard .dashboard-campaign-table th,
  .page-dashboard .dashboard-campaign-table td{
    padding-left:9px;
    padding-right:9px;
  }
  .page-dashboard .dashboard-status-cell{
    gap:6px;
  }
  .page-dashboard .dashboard-status-cell .status{
    padding:5px 7px;
    font-size:9.5px;
  }
  .page-dashboard .dashboard-status-cell strong{font-size:11.5px;}
  .page-dashboard .dashboard-status-cell small{font-size:9.5px;}
}

/* ========================================================================
   RECENT CAMPAIGNS — CLEAN RESPONSIVE TABLE v17
   One consistent table at every breakpoint. On phones/tablets the table
   keeps its column alignment and becomes horizontally scrollable instead
   of transforming into cards or injecting repeated labels.
   ======================================================================== */
.page-dashboard .recent-campaigns-panel{
  min-width:0;
}

.page-dashboard .recent-campaigns-panel .table-wrap{
  width:100%;
  min-width:0;

  overscroll-behavior-x:contain;

}

.page-dashboard .recent-campaigns-panel .table-wrap::-webkit-scrollbar-track{
  
  border-radius:999px;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table{
  display:table !important;
  
  min-width:0;
  
  border-collapse:separate;
  border-spacing:0;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody{
  display:table-row-group !important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table tr{
  display:table-row !important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table th,
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td{
  display:table-cell !important;
  position:static !important;
  float:none !important;
  transform:none !important;
  box-sizing:border-box;
  vertical-align:middle !important;
}

/* Absolutely no mobile data-label headings inside rows. */
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td::before,
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td::after{
  content:none !important;
  display:none !important;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{

  white-space:nowrap;
  
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody td{

  white-space:normal;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:first-child strong{
  display:block;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:first-child small{
  display:block;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){

  white-space:nowrap;
}

.page-dashboard .recent-campaigns-panel .dashboard-progress-cell .dashboard-progress{
  display:block;

}

.page-dashboard .recent-campaigns-panel .dashboard-status-cell{

  flex-wrap:nowrap !important;

}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell .status,
.page-dashboard .recent-campaigns-panel .dashboard-status-cell strong,
.page-dashboard .recent-campaigns-panel .dashboard-status-cell small{
  flex:0 0 auto;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell .status{
  padding:6px 10px;
  font-size:10px;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell strong{
  font-size:12px;
  font-weight:750;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell small{
  font-size:10px;
}

/* Tablet: preserve readable fixed column widths and allow a small horizontal
   slide when the available viewport is narrower than the table. */
@media (min-width:721px) and (max-width:1100px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    overflow-x:auto !important;
  }

  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th,
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* Phone: keep the exact same four-column geometry. The user can swipe the
   table horizontally; rows never collapse or repeat their headings. */
@media (max-width:720px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    
    overflow-x:auto !important;
    overflow-y:auto !important;
  }

  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{

    font-size:9px;
  }
  
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:first-child strong{
    font-size:12.5px;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:first-child small{
    font-size:9.5px;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){
    font-size:11.5px;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-progress-cell .dashboard-progress{
    width:92%;
    height:5px !important;
  }
  
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell .status{
    padding:5px 8px;
    font-size:9px;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell strong{
    font-size:11px;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell small{
    font-size:9px;
  }
}

@media (max-width:380px){

}

/* ========================================================================
   RECENT CAMPAIGNS — FINAL COMPACT HEIGHT
   Keep the existing column geometry/alignment; only reduce the card height.
   ======================================================================== */
@media (min-width:1101px){
  .page-dashboard .dashboard-grid>.recent-campaigns-panel,
  .page-dashboard .dashboard-grid>.support-card{
    height:270px;
  }
}

@media (min-width:721px) and (max-width:1100px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    max-height:260px;
  }
}

@media (max-width:720px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    max-height:240px;
  }
}

@media (max-width:380px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    max-height:225px;
  }
}

/* ========================================================================
   RECENT CAMPAIGNS — COMPACT ROW HEIGHT
   Keep the card/column alignment intact while making each campaign row
   slightly shorter and denser.
   ======================================================================== */
.page-dashboard .dashboard-campaign-table tbody tr{
  height:44px;
}
.page-dashboard .dashboard-campaign-table td{
  padding-top:6px;
  padding-bottom:6px;
  height:44px;
  vertical-align:middle;
}
.page-dashboard .dashboard-campaign-table td:first-child strong{
  line-height:1.15;
}
.page-dashboard .dashboard-campaign-table td:first-child small{
  line-height:1.1;
}
.page-dashboard .dashboard-progress-cell .dashboard-progress{
  height:5px;
}
.page-dashboard .dashboard-status-cell{
  min-height:30px;
}

@media (max-width: 900px){
  .page-dashboard .dashboard-campaign-table tbody tr{
    height:42px;
  }
  .page-dashboard .dashboard-campaign-table td{
    padding-top:5px;
    padding-bottom:5px;
    height:42px;
  }
}

@media (max-width: 720px){
  .page-dashboard .dashboard-campaign-table tbody tr{
    height:40px;
  }
  .page-dashboard .dashboard-campaign-table td{
    padding-top:5px;
    padding-bottom:5px;
    height:40px;
  }
}

/* ========================================================================
   RECENT CAMPAIGNS — MOBILE/TABLET BOTTOM CLEANUP
   Keep horizontal scrolling, but remove the floating "Swipe to view more"
   pill that was adding visual clutter and extra height at the bottom.
   ======================================================================== */
.page-dashboard .recent-campaigns-panel .table-wrap{
  
  scrollbar-width:thin;
  scrollbar-color:#cbd5df transparent;
}
.page-dashboard .recent-campaigns-panel .table-wrap::after{
  display:none !important;
  content:none !important;
}
.page-dashboard .recent-campaigns-panel .table-wrap::-webkit-scrollbar{
  width:6px;
  height:5px;
}
.page-dashboard .recent-campaigns-panel .table-wrap::-webkit-scrollbar-track{
  background:transparent;
}
.page-dashboard .recent-campaigns-panel .table-wrap::-webkit-scrollbar-thumb{
  border:0;
  border-radius:999px;
  background:#cbd5df;
}
@media(max-width:820px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    padding-bottom:1px;
    margin-bottom:0;
  }
}
@media(max-width:720px){
  .page-dashboard .recent-campaigns-panel .table-wrap{
    padding-bottom:1px;
  }
}

/* ========================================================================
   RECENT CAMPAIGNS — STICKY COLUMN HEADER ON EVERY SCREEN SIZE
   Keep the Campaign / Recipients / Progress / Status header visible while
   the campaign rows scroll vertically. The same behavior applies on PC,
   tablet, and phone without changing the table's column geometry.
   ======================================================================== */
.page-dashboard .recent-campaigns-panel .table-wrap{
  position:relative;
  overflow-x:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead{
  position:static !important;
  display:table-header-group !important;
}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  
  background-clip:padding-box;
  box-shadow:0 1px 0 #dfe6ed;
}

@media (max-width:1100px){
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
  }
}

@media (max-width:720px){
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{
    
    min-height:36px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* ========================================================================
   GLOBAL UI CONSISTENCY — TABLES + TYPOGRAPHY
   One visual scale across Dashboard, Contacts, Campaigns, Templates,
   Businesses and System tables. Does not alter inbox/chat typography.
   ======================================================================== */
:root{
  
  --ui-heading:#1b2a40;
  
  --ui-muted:#7b8799;
  --ui-header:#66748a;
}

html,body,
button,input,select,textarea{
  font-family:var(--ui-font);
}

/* One shared table scale for every normal application table. */
.table-wrap > table:not(.dashboard-campaign-table){
  font-size:13px;
}
.table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
.table-wrap > table.dashboard-campaign-table > thead > tr > th{
  
  padding:0 14px !important;
  vertical-align:middle;
  
  line-height:1;
  font-weight:780;
  
  text-transform:uppercase;
  color:var(--ui-header);
  white-space:nowrap;
  background:#f8fafc;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td{
  vertical-align:middle;

  color:var(--ui-body);
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td strong,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child strong{

  font-weight:780;
  color:var(--ui-heading);
  letter-spacing:-.012em;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td small,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child small{

  color:var(--ui-muted);
}

.table-wrap .status,
.dashboard-status-cell .status{

  white-space:nowrap;
}

/* Keep the dashboard campaign table on the same visual scale while
   preserving its existing compact row geometry. */
.page-dashboard .dashboard-campaign-table > thead > tr > th{
  
  font-weight:780 !important;
  letter-spacing:.065em;
}
.page-dashboard .dashboard-campaign-table > tbody > tr > td:nth-child(2){
  font-size:13px;
}
.page-dashboard .dashboard-campaign-table .dashboard-status-cell strong{
  
  font-weight:780;
}

/* Shared controls. */

/* Consistent table alignment. */
.table-wrap > table > thead > tr > th,
.table-wrap > table > tbody > tr > td{
  text-align:left;
}
.table-wrap > table > thead > tr > th:not(:first-child),
.table-wrap > table > tbody > tr > td:not(:first-child){
  text-align:left;
}

/* Tablet and phone: keep the same typography scale instead of making
   table headers unusually tiny. Horizontal scrolling handles the width. */
@media (max-width:1100px){
  
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td{
    font-size:13px;
  }
}

@media (max-width:720px){

}

/* ========================================================================
   GLOBAL UI SCALE — SLIGHTLY MORE COMPACT
   Keep the unified typography from v22, but make the interface a little
   smaller and denser rather than increasing heights or font sizes.
   ======================================================================== */

.table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
.table-wrap > table.dashboard-campaign-table > thead > tr > th{
  height:40px;
  padding-left:12px !important;
  padding-right:12px !important;
  font-size:10.5px !important;
  letter-spacing:.055em;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td{
  font-size:12.5px;
  line-height:1.3;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td strong,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child strong{
  font-size:13px;
  line-height:1.15;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td small,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child small{
  font-size:11px;
  line-height:1.1;
}

@media (max-width:1100px){
  .table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
  .table-wrap > table.dashboard-campaign-table > thead > tr > th{
    height:39px;
    font-size:10px !important;
  }
}

@media (max-width:720px){

  .table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
  .table-wrap > table.dashboard-campaign-table > thead > tr > th{
    height:38px;
    font-size:9.5px !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td{
    font-size:12.5px;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td strong,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child strong{
    font-size:12.75px;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td small,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child small{
    font-size:10.75px;
  }
}

/* ========================================================================
   V24 — PAGE TYPOGRAPHY HARMONY
   Match the polished sidebar's compact Inter typography across the rest of
   the application. The sidebar/navigation rules above are intentionally
   untouched.
   ======================================================================== */
:root{
  --page-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --page-heading:#172235;
  --page-body:#33425a;
  --page-muted:#718097;
  --page-table-head:#68758c;
}

/* Keep the sidebar exactly as-is; these rules target page content only. */

.main-area{font-size:14px;line-height:1.45;color:var(--page-body);}

.page-heading{margin-bottom:18px;}
.page-heading h1{

  letter-spacing:-.035em;
  color:var(--page-heading);
}
.page-heading p{

  color:var(--page-muted);
}

.panel-header h2,
.panel h2{

  letter-spacing:-.018em;
  color:var(--page-heading);
}

/* One table header treatment everywhere. */
.table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
.table-wrap > table.dashboard-campaign-table > thead > tr > th,
.table-wrap > table > thead > tr > th{
  height:40px;
  padding:0 12px !important;
  vertical-align:middle;
  font-size:11px !important;
  line-height:1;
  font-weight:780 !important;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--page-table-head);
  white-space:nowrap;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td,
.table-wrap > table > tbody > tr > td{
  font-size:13px;
  line-height:1.3;
  color:var(--page-body);
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td strong,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child strong,
.table-wrap > table > tbody > tr > td strong{
  font-size:13px;
  line-height:1.15;
  font-weight:780;
  color:var(--page-heading);
  letter-spacing:-.012em;
}

.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td small,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child small,
.table-wrap > table > tbody > tr > td small{
  font-size:11px;
  line-height:1.1;
  color:var(--page-muted);
}

.table-wrap .status,
.dashboard-status-cell .status{
  font-size:10.5px !important;
  line-height:1;
  font-weight:750;
}

/* Controls follow the same scale as the sidebar labels without becoming
   oversized. */

.main-area .help,
.main-area .muted{font-size:12px;line-height:1.5;}

/* Keep dashboard campaign table compact while using the same type scale. */
.page-dashboard .dashboard-campaign-table > thead > tr > th{
  font-size:11px !important;
}
.page-dashboard .dashboard-campaign-table .dashboard-status-cell strong{
  font-size:13px;
}
.page-dashboard .dashboard-campaign-table .dashboard-status-cell small{
  font-size:11px;
}

@media (max-width:1100px){
  .page-heading h1{font-size:24px !important;}
  .table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
  .table-wrap > table.dashboard-campaign-table > thead > tr > th,
  .table-wrap > table > thead > tr > th{
    font-size:10.5px !important;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td,
  .table-wrap > table > tbody > tr > td{
    font-size:13px;
  }
}

@media (max-width:720px){
  .page-heading h1{font-size:22px !important;}
  .page-heading p{font-size:12px !important;}
  
  .panel-header h2,.panel h2{font-size:14px !important;}
  .panel-header a{font-size:11px !important;}

  .table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
  .table-wrap > table.dashboard-campaign-table > thead > tr > th,
  .table-wrap > table > thead > tr > th{
    height:38px;
    font-size:10px !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td,
  .table-wrap > table > tbody > tr > td{
    font-size:12.5px;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td strong,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child strong,
  .table-wrap > table > tbody > tr > td strong{
    font-size:12.75px;
  }
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td small,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child small,
  .table-wrap > table > tbody > tr > td small{
    font-size:10.75px;
  }
}

/* =========================================================
   Campaigns page — focused UI/UX layer
   Scoped to .campaign-page so shared navigation and other
   pages remain visually untouched.
   ========================================================= */
.campaign-page{margin:0 auto;}
.campaign-heading{margin-bottom:18px;}
.campaign-eyebrow{display:flex;align-items:center;gap:7px;color:var(--green-dark);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.campaign-eyebrow i{font-size:10px;}
.campaign-heading h1{font-size:27px;letter-spacing:-.025em;margin-bottom:4px;}
.campaign-heading p{font-size:13px;}
.campaign-new-btn{padding-left:16px;padding-right:16px;}

.campaign-stat{display:flex;align-items:center;gap:12px;}
.campaign-stat>div:last-child{display:grid;gap:3px;min-width:0;}
.campaign-stat span{font-size:11px;color:var(--muted);font-weight:650;}
.campaign-stat strong{line-height:1;}
.campaign-stat-icon{display:grid;place-items:center;flex:0 0 auto;}

.campaign-panel{border-radius:11px;}

.campaign-toolbar-title{min-width:190px;}
.campaign-title-icon{display:grid;place-items:center;flex:0 0 auto;}
.campaign-toolbar-title h2{margin:0 0 2px;letter-spacing:-.01em;}

.campaign-search{position:relative;display:block;}
.campaign-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;}
.campaign-search input{height:37px;padding:8px 11px 8px 33px;border-radius:7px;font-size:12px;}
.campaign-search input:focus{background:#fff;}
.campaign-filters select{height:37px;padding:8px 30px 8px 10px;border-radius:7px;background:#fbfcfe;font-size:12px;}

.campaign-table-wrap{background:#fff;}
.campaign-table{table-layout:fixed;}
.campaign-table th{height:42px;padding:10px 14px;font-size:10px;letter-spacing:.065em;background:#f8fafc;color:#69758a;border-bottom:1px solid #dde4ed;white-space:nowrap;}
.campaign-table td{padding:13px 14px;font-size:12px;color:#344158;}
.campaign-table tbody tr{transition:background .14s ease;}
.campaign-table tbody tr:hover{background:#fbfdfc;}
.campaign-table th:nth-child(1){width:18%;}
.campaign-table th:nth-child(2){width:12%;}
.campaign-table th:nth-child(3){width:20%;}
.campaign-table th:nth-child(4){width:10%;}
.campaign-table th:nth-child(5){width:17%;}
.campaign-table th:nth-child(6){width:11%;}
.campaign-table th:nth-child(7){width:12%;}
.campaign-table td strong{font-size:12px;color:#172033;line-height:1.35;}
.campaign-table td small{font-size:10.5px;line-height:1.35;color:#7b8799;margin-top:4px;}
.campaign-table .progress{height:6px;min-width:100px;margin-bottom:6px;background:#edf2f6;}
.campaign-table .progress span{background:linear-gradient(90deg,#17b866,#35c97d);border-radius:10px;}
.campaign-table .status{font-size:10px;padding:4px 8px;border-radius:999px;white-space:nowrap;}
.campaign-table .row-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px;}
.campaign-table .row-actions .btn{min-height:29px;font-size:10.5px;padding:5px 8px;border-radius:6px;}
.campaign-table .row-actions form{margin:0;}
.campaign-table .campaign-error{font-size:11px;line-height:1.35;}
.campaign-table .api-error,.campaign-table .api-processing,.campaign-table .api-ok{display:inline-flex;align-items:flex-start;gap:6px;}
.campaign-table .api-error{color:#c23a43;}
.campaign-table .api-processing{color:#2772d4;}
.campaign-table .api-ok{color:#0a9550;}
.campaign-table td:nth-child(6){font-size:11px;color:#6d7890;white-space:nowrap;}
.campaign-table tbody tr:last-child td{border-bottom:0;}

.campaign-table-footer span:first-child{display:flex;align-items:center;gap:6px;}
.campaign-table-footer i{color:#6c9a7e;}
.campaign-empty{padding:42px 20px;display:grid;justify-items:center;gap:6px;color:var(--muted);}
.campaign-empty-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin-bottom:3px;}
.campaign-empty strong{font-size:13px;color:#344158;}
.campaign-empty span{font-size:11px;}
.campaign-notice{margin-bottom:0!important;padding:12px 14px;}
.campaign-notice i{font-size:16px;}
.campaign-notice strong{font-size:11px;}
.campaign-notice p{font-size:10.5px;line-height:1.45;margin-top:3px!important;}

@media (max-width:1100px){
    .campaign-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .campaign-toolbar{align-items:stretch;flex-direction:column;}
    .campaign-filters{width:100%;}
    .campaign-search{flex:1;width:auto;}
}
@media (max-width:760px){
    .campaign-heading{align-items:flex-start;flex-direction:column;}
    .campaign-heading .heading-actions{width:100%;}
    .campaign-heading .heading-actions>*{flex:1;}
    
    .campaign-toolbar{padding:12px;}
    .campaign-filters{flex-direction:column;}
    .campaign-search,.campaign-filters select{width:100%;}
    .campaign-table{min-width:980px;}
    .campaign-table-wrap{overflow-x:auto;}
    .campaign-table-footer{gap:10px;align-items:flex-start;flex-direction:column;}
}
@media (max-width:480px){
    .campaign-stats{grid-template-columns:1fr;}
}

/* ========================================================================

/* ========================================================================
   CAMPAIGNS — PRECISION ALIGNMENT
   Campaign page only. Sidebar, header and every other page remain untouched.
   ======================================================================== */
.page-campaigns .campaign-page{
  width:100%;
  max-width:none;
  margin:0;
}

.page-campaigns .campaign-heading{
  
  margin:0 0 18px;
  padding:0;
}
.page-campaigns .campaign-heading > div:first-child{
  flex:1 1 auto;
  min-width:0;
}
.page-campaigns .campaign-heading h1{
  margin:0 0 5px;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.028em;
}
.page-campaigns .campaign-heading p{
  margin:0;
  line-height:1.5;
}
.page-campaigns .campaign-heading .heading-actions{
  flex:0 0 auto;
  align-self:flex-end;
  gap:8px;
}
.page-campaigns .campaign-heading .heading-actions form{margin:0;}
.page-campaigns .campaign-heading .btn{height:40px;min-height:40px;}

.page-campaigns .campaign-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 16px;
}
.page-campaigns .campaign-stat{
  min-width:0;
  min-height:78px;
  height:78px;
  padding:13px 15px;
  
  border-radius:10px;
}
.page-campaigns .campaign-stat-icon{
  width:38px;
  height:38px;
}
.page-campaigns .campaign-stat span{
  line-height:1.2;
}

.page-campaigns .campaign-panel{
  width:100%;
  margin:0;
  border-radius:12px;
  overflow:hidden;
}
.page-campaigns .campaign-toolbar{
  min-height:68px;
  padding:12px 16px;
  gap:20px;
}
.page-campaigns .campaign-toolbar-title{
  flex:1 1 auto;
  min-width:0;
}
.page-campaigns .campaign-toolbar-title > div:last-child{
  min-width:0;
}

.page-campaigns .campaign-filters{
  flex:0 0 auto;
  justify-content:flex-end;
  gap:8px;
}

.page-campaigns .campaign-filters select{width:154px;}
.page-campaigns .campaign-search input,
.page-campaigns .campaign-filters select{
  height:38px;
  min-height:38px;
}

.page-campaigns .campaign-table{

  margin:0;
}
.page-campaigns .campaign-table th,
.page-campaigns .campaign-table td{
  box-sizing:border-box;
  
}
.page-campaigns .campaign-table th{
  height:40px;
  padding:10px 12px;

  text-align:left;
  white-space:nowrap;
}
.page-campaigns .campaign-table td{
  
  line-height:1.35;
}
/* Balanced widths add a clear visual column rhythm. */

.page-campaigns .campaign-table th:nth-child(4),
.page-campaigns .campaign-table td:nth-child(4){text-align:center;}
.page-campaigns .campaign-table th:nth-child(6),
.page-campaigns .campaign-table td:nth-child(6){text-align:center;}
.page-campaigns .campaign-table th:nth-child(7),
.page-campaigns .campaign-table td:nth-child(7){text-align:right;}

.page-campaigns .campaign-table td:nth-child(1),
.page-campaigns .campaign-table td:nth-child(2),
.page-campaigns .campaign-table td:nth-child(3),
.page-campaigns .campaign-table td:nth-child(5){text-align:left;}

.page-campaigns .campaign-table .status{

  min-width:74px;

}

.page-campaigns .campaign-table .row-actions .btn.small{
  min-height:29px;
  white-space:nowrap;
}

.page-campaigns .campaign-table-footer{
  min-height:40px;
  padding:8px 14px;
  gap:12px;
  line-height:1.3;
}
.page-campaigns .campaign-table-footer span:last-child{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.page-campaigns .campaign-notice{
  margin-top:12px!important;
}

@media(max-width:1100px){

  .page-campaigns .campaign-filters{justify-content:stretch;}
  
}
@media(max-width:760px){
  .page-campaigns .campaign-heading{flex-direction:column;gap:12px;}
  .page-campaigns .campaign-heading .heading-actions{width:100%;align-self:stretch;}
  .page-campaigns .campaign-heading .heading-actions > *{flex:1;}
  .page-campaigns .campaign-stats{grid-template-columns:1fr 1fr;}
  .page-campaigns .campaign-toolbar{padding:12px;}
  .page-campaigns .campaign-filters{width:100%;}
  
}
@media(max-width:480px){
  .page-campaigns .campaign-stats{grid-template-columns:1fr;}
  .page-campaigns .campaign-stat{height:74px;min-height:74px;}
}

/* ========================================================================
   CAMPAIGNS — FINAL TYPOGRAPHY + ICON ALIGNMENT
   Campaign page only. No shared navigation or other page styles are changed.
   ======================================================================== */
.page-campaigns .campaign-page,
.page-campaigns .campaign-page *{
  box-sizing:border-box;
}

/* Header: one clean vertical center line for title, description and actions. */
.page-campaigns .campaign-heading{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-heading > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-campaigns .campaign-heading h1,
.page-campaigns .campaign-heading p{
  display:block;
}
.page-campaigns .campaign-heading .heading-actions{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-heading .heading-actions form,
.page-campaigns .campaign-heading .heading-actions a{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-heading .heading-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1;
}
.page-campaigns .campaign-heading .heading-actions .btn i{
  width:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Stat cards: icon, label and value share the same optical center. */
.page-campaigns .campaign-stat{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-stat-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.page-campaigns .campaign-stat-icon i{
  display:block;
  line-height:1;
}
.page-campaigns .campaign-stat > div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  line-height:1;
}
.page-campaigns .campaign-stat span,
.page-campaigns .campaign-stat strong{
  display:block;
  margin:0;
}

/* Toolbar: icon, title and controls all sit on the same visual axis. */
.page-campaigns .campaign-toolbar{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-toolbar-title{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-title-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.page-campaigns .campaign-title-icon i{
  display:block;
  line-height:1;
}
.page-campaigns .campaign-toolbar-title > div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-campaigns .campaign-toolbar-title h2,
.page-campaigns .campaign-toolbar-title span{
  display:block;
  margin-left:0;
}
.page-campaigns .campaign-filters{
  display:flex;
  
}

.page-campaigns .campaign-search i{
  display:flex;
  align-items:center;
  justify-content:center;
  height:14px;
  line-height:1;
}
.page-campaigns .campaign-search input,
.page-campaigns .campaign-filters select{
  line-height:1.2;
}

/* Table: every text/icon/status/action cell is vertically centered. */

.page-campaigns .campaign-table th{
  line-height:1.1;
}
.page-campaigns .campaign-table td > strong,
.page-campaigns .campaign-table td > small{
  display:block;
}
.page-campaigns .campaign-table td:first-child,
.page-campaigns .campaign-table td:nth-child(2),
.page-campaigns .campaign-table td:nth-child(3),
.page-campaigns .campaign-table td:nth-child(5){
  vertical-align:middle;
}
.page-campaigns .campaign-table td:nth-child(4),
.page-campaigns .campaign-table td:nth-child(6),
.page-campaigns .campaign-table td:nth-child(7){
  vertical-align:middle;
}

/* Progress and its supporting text use one consistent left edge. */

/* Status pills are true inline-flex controls, keeping text optically centered. */
.page-campaigns .campaign-table .status{

  vertical-align:middle;
  
}

/* API result icons and text share a baseline without drifting horizontally. */
.page-campaigns .campaign-table .campaign-error,
.page-campaigns .campaign-table .campaign-error > span{
  vertical-align:middle;
}
.page-campaigns .campaign-table .api-error,
.page-campaigns .campaign-table .api-processing,
.page-campaigns .campaign-table .api-ok{
  display:inline-flex;
  align-items:center;
  gap:7px;
  line-height:1.35;
}
.page-campaigns .campaign-table .api-error i,
.page-campaigns .campaign-table .api-processing i,
.page-campaigns .campaign-table .api-ok i{
  flex:0 0 13px;
  width:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin:0;
}

/* Action forms/buttons: identical height, icon position and text baseline. */
.page-campaigns .campaign-table .row-actions{

  justify-content:flex-end;
  
}
.page-campaigns .campaign-table .row-actions form{
  
  align-items:center;
  
}
.page-campaigns .campaign-table .row-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1;
  white-space:nowrap;
}
.page-campaigns .campaign-table .row-actions .btn i{
  width:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Footer and information note: icons align with the first text line. */
.page-campaigns .campaign-table-footer{
  display:flex;
  align-items:center;
}
.page-campaigns .campaign-table-footer span{
  display:inline-flex;
  align-items:center;
  line-height:1.3;
}
.page-campaigns .campaign-table-footer i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;
  line-height:1;
}
.page-campaigns .campaign-notice{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.page-campaigns .campaign-notice > i{
  flex:0 0 16px;
  width:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
  margin-top:1px;
}
.page-campaigns .campaign-notice > div{
  min-width:0;
}
.page-campaigns .campaign-notice strong,
.page-campaigns .campaign-notice p{
  display:block;
}

/* Keep the same alignment rules when the page stacks on smaller screens. */
@media(max-width:760px){
  .page-campaigns .campaign-heading{
    align-items:flex-start;
  }
  .page-campaigns .campaign-heading .heading-actions{
    align-items:stretch;
  }
  .page-campaigns .campaign-heading .heading-actions .btn{
    min-height:40px;
  }
  .page-campaigns .campaign-toolbar{
    align-items:stretch;
  }
  .page-campaigns .campaign-filters{
    align-items:stretch;
  }
}

/* ========================================================================
   CAMPAIGNS — FINAL VISUAL GRID ALIGNMENT
   Scoped to Campaigns only. Do not alter shared navigation or other pages.
   ======================================================================== */

/* One consistent left edge per column. */
.page-campaigns .campaign-table th,
.page-campaigns .campaign-table td{
  text-align:left;
  vertical-align:top;
}

/* Balanced desktop column rhythm. */
.page-campaigns .campaign-table th:nth-child(1){width:18%;}
.page-campaigns .campaign-table th:nth-child(2){width:13%;}
.page-campaigns .campaign-table th:nth-child(3){width:21%;}
.page-campaigns .campaign-table th:nth-child(4){width:12%;}
.page-campaigns .campaign-table th:nth-child(5){width:17%;}
.page-campaigns .campaign-table th:nth-child(6){width:10%;}
.page-campaigns .campaign-table th:nth-child(7){width:9%;}

/* Reset the earlier centered columns so header and cell content share the
   exact same x-axis. */
.page-campaigns .campaign-table th:nth-child(4),
.page-campaigns .campaign-table td:nth-child(4),
.page-campaigns .campaign-table th:nth-child(6),
.page-campaigns .campaign-table td:nth-child(6){
  text-align:left;
}

/* Every row starts on the same horizontal baseline. */
.page-campaigns .campaign-table td{
  padding:13px 12px 14px;
}
.page-campaigns .campaign-table td:first-child strong{
  display:block;
  
  margin:0;
}
.page-campaigns .campaign-table td small{
  display:block;
  margin-top:4px;
  line-height:1.35;
}

/* Progress content begins exactly where the Progress heading begins. */

/* Status pill sits on the same top rhythm as the campaign name. */
.page-campaigns .campaign-table td:nth-child(4) .status{
  margin-top:0;
  vertical-align:top;
}

/* API result icon + text behave as one aligned object. */
.page-campaigns .campaign-table .campaign-error > span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:24px;
  line-height:1.35;
}
.page-campaigns .campaign-table .campaign-error i{
  width:13px;
  min-width:13px;
  text-align:center;
  line-height:1;
}

/* Created date follows the same left edge as its header. */

/* Actions form a single clean vertical rail with equal button widths. */
.page-campaigns .campaign-table th:nth-child(7){
  text-align:right;
}

.page-campaigns .campaign-table td:nth-child(7) .row-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:6px;
  width:100%;
}
.page-campaigns .campaign-table td:nth-child(7) .row-actions form,
.page-campaigns .campaign-table td:nth-child(7) .row-actions .btn.small{
  width:102px;
}
.page-campaigns .campaign-table td:nth-child(7) .row-actions .btn.small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  padding:6px 8px;
  line-height:1;
  white-space:nowrap;
}
.page-campaigns .campaign-table td:nth-child(7) .row-actions .btn.small i{
  width:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Keep the table visually calm: no unexpected extra spacing in cells. */
.page-campaigns .campaign-table tbody tr:hover td{
  background:transparent;
}

@media(max-width:760px){
  
}

/* ========================================================================
   CAMPAIGNS — DESKTOP FIT + RESPONSIVE FIX
   Campaigns page only. Prevent horizontal page sliding on PC while keeping
   the table readable and preserving the existing sidebar/navigation.
   ======================================================================== */
@media (min-width:1101px){
  .page-campaigns .campaign-page{
    width:100%;
    max-width:none;
    min-width:0;
    overflow-x:clip;
  }

  .page-campaigns .campaign-toolbar{
    min-width:0;
  }

  .page-campaigns .campaign-toolbar-title{
    min-width:0;
    flex:1 1 auto;
  }

  .page-campaigns .campaign-filters{
    flex:0 0 432px;
    width:432px;
    min-width:432px;
  }

  .page-campaigns .campaign-search{
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }

  .page-campaigns .campaign-filters select{
    flex:0 0 154px;
    width:154px;
  }

  .page-campaigns .campaign-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
  }

  .page-campaigns .campaign-table{
    width:100%;
    min-width:0;
    max-width:100%;
    table-layout:fixed;
  }

  /* Give the action rail enough room without forcing the whole table wider. */
  .page-campaigns .campaign-table th:nth-child(1){width:18%;}
  .page-campaigns .campaign-table th:nth-child(2){width:12%;}
  .page-campaigns .campaign-table th:nth-child(3){width:20%;}
  .page-campaigns .campaign-table th:nth-child(4){width:11%;}
  .page-campaigns .campaign-table th:nth-child(5){width:16%;}
  .page-campaigns .campaign-table th:nth-child(6){width:10%;}
  .page-campaigns .campaign-table th:nth-child(7){width:13%;}

  .page-campaigns .campaign-table th,
  .page-campaigns .campaign-table td{
    min-width:0;
  }

  .page-campaigns .campaign-table td:nth-child(5) .api-error,
  .page-campaigns .campaign-table td:nth-child(5) .api-processing,
  .page-campaigns .campaign-table td:nth-child(5) .api-ok{
    max-width:100%;
  }

  .page-campaigns .campaign-table td:nth-child(5) span{
    overflow-wrap:anywhere;
  }

  .page-campaigns .campaign-table td:nth-child(6){
    white-space:normal;
  }

  .page-campaigns .campaign-table td:nth-child(7) .row-actions{
    width:100%;
    align-items:flex-end;
  }

  .page-campaigns .campaign-table td:nth-child(7) .row-actions form,
  .page-campaigns .campaign-table td:nth-child(7) .row-actions .btn.small{
    width:102px;
    max-width:100%;
  }
}

@media (max-width:1100px){
  /* The earlier campaign-specific rules have higher specificity than the
     generic responsive rules, so explicitly restack the toolbar here. */
  .page-campaigns .campaign-toolbar{
    flex-direction:column;
    
  }

  .page-campaigns .campaign-filters{
    width:100%;
    
    flex:1 1 auto;
  }

}

@media (max-width:760px){
  .page-campaigns .campaign-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .page-campaigns .campaign-table{
    
    max-width:none;
  }

  .page-campaigns .campaign-filters{
    flex-direction:column;
  }

  .page-campaigns .campaign-search,
  .page-campaigns .campaign-filters select{
    width:100%;
    flex:0 0 auto;
  }
}

/* ========================================================================
   CAMPAIGNS — DESKTOP / TABLET NO-COLLAPSE FIX
   Keep the Campaign toolbar on one row on PC/tablet and prevent the page
   from becoming horizontally scrollable. Campaign page only.
   ======================================================================== */
@media (min-width:761px) and (max-width:1100px){
  .page-campaigns .campaign-toolbar{
    flex-direction:row;
    align-items:center;
    gap:14px;
    min-width:0;
  }

  .page-campaigns .campaign-toolbar-title{
    flex:1 1 auto;
    min-width:0;
  }

  .page-campaigns .campaign-filters{
    flex:0 1 410px;
    width:auto;
    min-width:280px;
    justify-content:flex-end;
    flex-direction:row;
    gap:8px;
  }

  .page-campaigns .campaign-search{
    flex:1 1 auto;
    width:auto;
    min-width:150px;
  }

  .page-campaigns .campaign-filters select{
    flex:0 1 150px;
    width:150px;
    min-width:120px;
  }

  .page-campaigns .campaign-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .page-campaigns .campaign-table{
    width:100%;
    min-width:0;
    max-width:100%;
    table-layout:fixed;
  }

  .page-campaigns .campaign-table th,
  .page-campaigns .campaign-table td{
    min-width:0;
    padding-left:9px;
    padding-right:9px;
  }

  .page-campaigns .campaign-table th:nth-child(1){width:18%;}
  .page-campaigns .campaign-table th:nth-child(2){width:12%;}
  .page-campaigns .campaign-table th:nth-child(3){width:20%;}
  .page-campaigns .campaign-table th:nth-child(4){width:12%;}
  .page-campaigns .campaign-table th:nth-child(5){width:15%;}
  .page-campaigns .campaign-table th:nth-child(6){width:10%;}
  .page-campaigns .campaign-table th:nth-child(7){width:13%;}

  .page-campaigns .campaign-table td:nth-child(5) span,
  .page-campaigns .campaign-table td:nth-child(6),
  .page-campaigns .campaign-table td:nth-child(2){
    overflow-wrap:anywhere;
  }

  .page-campaigns .campaign-table td:nth-child(7) .row-actions{
    width:100%;
    align-items:flex-end;
  }

  .page-campaigns .campaign-table td:nth-child(7) .row-actions form,
  .page-campaigns .campaign-table td:nth-child(7) .row-actions .btn.small{
    width:100px;
    max-width:100%;
  }
}

/* ========================================================================
   CAMPAIGNS — SEARCH CONTROL OPTICAL ALIGNMENT
   Campaign page only. Keep the icon and text on separate, fixed tracks.
   ======================================================================== */

.page-campaigns .campaign-search > i{
  position:absolute;
  left:13px;
  top:50%;
  width:14px;
  height:14px;
  margin:0;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  pointer-events:none;
  color:#8995a8;
  font-size:12px;
  line-height:1;
}
.page-campaigns .campaign-search input[type="search"]{
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding-top:8px!important;
  padding-right:11px!important;
  padding-bottom:8px!important;
  padding-left:40px!important;
  text-indent:0!important;
  text-align:left!important;
  appearance:none;
  -webkit-appearance:none;
}

/* Campaign typography alignment — typography only; card geometry remains unchanged. */
.page-campaigns .campaign-stat span:first-child{
  color:#748198;

}
.page-campaigns .campaign-stat strong{
  color:#172337;

}
.page-campaigns .campaign-stat span:last-child{
  color:#98a3b0;

  text-transform:uppercase;
}

/* ========================================================================
   FINAL SITE-WIDE TYPOGRAPHY PASS
   One shared type hierarchy for all application pages.
   Sidebar/navigation styling is intentionally excluded.
   Dashboard values are the reference; other pages inherit these values.
   ======================================================================== */

.panel-header h2,
.panel h2{
  font-size:var(--ui-section-title) !important;
  font-weight:var(--ui-section-weight) !important;
  line-height:1.25;
}

.metric-card small{

  line-height:1.2;
}

.metric-card span:last-child{
  
  font-weight:650;
  line-height:1.15;
  letter-spacing:.04em;
}

.table-wrap > table > thead > tr > th,
.table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
.table-wrap > table.dashboard-campaign-table > thead > tr > th{
  font-size:var(--ui-table-head) !important;
  font-weight:780 !important;
  line-height:1.2;
  letter-spacing:.055em;
}

.table-wrap > table > tbody > tr > td,
.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td{
  font-size:var(--ui-body);
  line-height:1.35;
}

.table-wrap > table > tbody > tr > td strong,
.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td:first-child strong,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child strong{
  font-size:var(--ui-body-strong);
  font-weight:780;
  line-height:1.25;
}

.table-wrap > table > tbody > tr > td small,
.table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td:first-child small,
.table-wrap > table.dashboard-campaign-table > tbody > tr > td:first-child small{
  font-size:var(--ui-meta);
  line-height:1.25;
}

.table-wrap .status,
.dashboard-status-cell .status,
.status{
  font-size:10.5px !important;
  font-weight:750;
  line-height:1.2;
}

/* Campaign page: typography only; no card/table geometry changes. */
.page-campaigns .campaign-stat span:first-child{
  
  font-weight:650 !important;
  
}

.page-campaigns .campaign-stat strong{
  font-size:var(--ui-metric-value) !important;
  font-weight:820 !important;
  line-height:1.25;
  letter-spacing:-.035em;
}

.page-campaigns .campaign-stat span:last-child{
  
  font-weight:650 !important;
  
  letter-spacing:.04em;
}

.page-campaigns .campaign-table td:first-child strong{
  font-size:var(--ui-body-strong) !important;
  font-weight:780 !important;
  line-height:1.25;
}

.page-campaigns .campaign-table td:first-child small{
  font-size:var(--ui-meta) !important;
  line-height:1.25;
}

/* Other common page-specific headings/cards use the same hierarchy. */
.agent-card h3,
.template-empty-card h2,
.auth-card h1,
.modal-head h2,
.app-dialog-copy h2{
  font-family:var(--ui-font);
}

.agent-card h3{

  line-height:1.25;
}

.agent-card p,
.template-empty-card p,
.auth-card>p,
.app-dialog-copy p,
.notice p,
.consent-box p{
  font-size:var(--ui-help);
  line-height:1.5;
}

.agent-stats span{
  font-size:var(--ui-meta);
}

.agent-stats strong{
  font-size:18px;
}

.modal-head h2{

  line-height:1.25;
}

.app-dialog-kicker{
  font-size:9.5px !important;
}

.app-dialog-copy h2{
  font-size:18px !important;
  font-weight:790 !important;
  line-height:1.25;
}

.app-dialog-copy p{
  font-size:13px !important;
}

.app-dialog-button{
  font-size:13px !important;
  font-weight:730;
}

.conversation-copy small,
.conversation-title-row time{
  font-size:11.5px !important;
}

.customer-active h3{
  
  font-weight:780;
}

.customer-active>p,
.customer-details small,
.customer-details strong{
  font-size:var(--ui-help);
}

/* Standalone public/legal pages use the same family and readable body scale. */

/* Mobile: retain the same hierarchy with the existing compact page scale. */
@media (max-width:760px){

  .table-wrap > table > thead > tr > th,
  .table-wrap > table:not(.dashboard-campaign-table) > thead > tr > th,
  .table-wrap > table.dashboard-campaign-table > thead > tr > th{
    font-size:10.5px !important;
  }
  .table-wrap > table > tbody > tr > td,
  .table-wrap > table:not(.dashboard-campaign-table) > tbody > tr > td,
  .table-wrap > table.dashboard-campaign-table > tbody > tr > td{
    font-size:12.5px;
  }
  .page-campaigns .campaign-stat strong{font-size:21px !important;}
  .page-campaigns .campaign-table tbody td{font-size:12.5px !important;}
}

/* Final Agents page correction: restore a compact, centered card hierarchy. */
.page-agents .agent-grid{

  align-items:stretch;
}
.page-agents .agent-card{
  
  border:1px solid var(--line);
  
  background:#fff;

  transition:border-color .16s ease,box-shadow .16s ease;
}
.page-agents .agent-card:hover{
  transform:none;
  border-color:#d3dde7;
  box-shadow:0 8px 22px rgba(18,38,63,.07);
}
.page-agents .agent-top{

  gap:10px;
}

.page-agents .agent-top [data-agent-status]{

  font-weight:750;
}
.page-agents .agent-card h3{

  letter-spacing:-.01em;
  color:#223047;
}
.page-agents .agent-card>p{

  color:var(--muted);
}
.page-agents .agent-stats{
  display:grid;

}
.page-agents .agent-stats span{

  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid #e7edf3;
  
  background:#f8fafc;
  
  line-height:1.25;
  color:var(--muted);
}
.page-agents .agent-stats strong{
  
  line-height:1.1;
  margin-bottom:2px;
  color:var(--text);
}
.page-agents .agent-actions{
  display:grid;
  grid-template-columns:1fr 1fr;

}

.page-agents .help.center{
  margin-top:14px;
  font-size:10.5px;
}
@media(max-width:1200px){
  
}
@media(max-width:650px){

  .page-agents .agent-actions{grid-template-columns:1fr 1fr;}
}
@media(max-width:420px){
  .page-agents .agent-actions{grid-template-columns:1fr;}
}

/* Agents — Style 3 Minimal Row inside a compact square card. */
.page-agents .agent-grid{
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:14px;
}
.page-agents .agent-card{
  min-height:228px;
  padding:14px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border-radius:12px;
  box-shadow:0 3px 12px rgba(16,35,58,.045);
}
.page-agents .agent-top{
  display:grid;
  grid-template-columns:48px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
  align-items:center;
  justify-content:initial;
}
.page-agents .agent-top .avatar.large{
  grid-row:1 / span 2;
  width:48px;
  height:48px;
  font-size:19px;
}
.page-agents .agent-top [data-agent-status]{
  grid-column:2;
  justify-self:start;
  min-height:25px;
  padding:4px 8px;
  font-size:9.5px;
  line-height:1;
}
.page-agents .agent-card h3{
  margin:11px 0 1px;
  font-size:15px !important;
  line-height:1.2;
  font-weight:760 !important;
}
.page-agents .agent-card>p{
  margin:0;
  font-size:10px;
  line-height:1.35;
}
.page-agents .agent-stats{
  width:100%;
  grid-template-columns:1fr 1fr;
  justify-content:stretch;
  gap:7px;
  margin:12px 0 13px;
}
.page-agents .agent-stats span{
  min-height:52px;
  padding:7px 6px;
  border-radius:8px;
  font-size:9px;
}
.page-agents .agent-stats strong{
  font-size:16px;
  font-weight:760;
}
.page-agents .agent-actions{
  margin-top:auto;
  gap:7px;
}
.page-agents .agent-actions .btn{
  min-height:34px;
  padding:6px 8px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
}
@media(max-width:1200px){
  .page-agents .agent-grid{grid-template-columns:repeat(3,minmax(220px,1fr));}
}
@media(max-width:900px){
  .page-agents .agent-grid{grid-template-columns:repeat(2,minmax(220px,1fr));}
}
@media(max-width:650px){
  .page-agents .agent-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .page-agents .agent-card{min-height:220px;padding:12px;}
}
@media(max-width:480px){
  .page-agents .agent-grid{grid-template-columns:1fr;}
}

/* ========================================================================
   Agents — Style 3: Minimal Row
   Keep this page compact and aligned with the dashboard's card language.
   ======================================================================== */
.agent-grid{display:none!important;}

.agent-list .agent-card{
  min-width:0;

  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.agent-identity{
  min-width:0;
  display:grid;

}
.agent-identity .avatar.large{

  border-radius:50%;
  
  box-shadow:inset 0 0 0 1px rgba(8,121,74,.06);
}

.agent-name-row{display:flex;align-items:center;gap:10px;min-width:0;}
.agent-name-row h3{
  margin:0;
  color:#1a293e;
  font-size:15px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.agent-name-row .status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10.5px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
.agent-name-row .status i{font-size:6px;}
.agent-list .agent-card::before,
.agent-list .agent-card::after{width:1px;height:38px;background:#e5ebf1;grid-row:1;}
.agent-list .agent-card::before{grid-column:2;}
.agent-list .agent-card::after{grid-column:4;}
.agent-metric{min-width:0;display:grid;gap:2px;align-content:center;}
.agent-metric strong{
  color:#1c2a40;
  font-size:15px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
}
.agent-metric span{
  color:#718096;
  font-size:10.5px;
  line-height:1.2;
  white-space:nowrap;
}

@media(max-width:1050px){
  
}
@media(max-width:850px){
  
  .agent-list .agent-card::before{grid-column:2;}
  .agent-list .agent-card::after{grid-column:3;}
  .agent-actions{gap:6px;}
  .agent-actions .btn{min-width:82px;padding:7px 9px;}
  .agent-actions .btn.danger{min-width:112px;}
}
@media(max-width:680px){
  .agent-list .agent-card{
    min-height:0;
    padding:13px;
    
    row-gap:11px;
  }
  .agent-identity{grid-column:1 / -1;}
  .agent-list .agent-card::before,
  .agent-list .agent-card::after{display:none;}
  .agent-metric{padding-top:10px;border-top:1px solid #e8edf2;}
  .agent-actions{grid-column:1 / -1;justify-content:stretch;padding-top:1px;}
  .agent-actions form{flex:1;}
  .agent-actions .btn{width:100%;}
  .agent-account-note{grid-column:1 / -1;text-align:left;}
}
/* Refine row dividers without introducing extra grid items. */

.agent-list .agent-metric:first-of-type,
.agent-list .agent-metric + .agent-metric{
  border-left:1px solid #e5ebf1;
  padding-left:18px;
}
@media(max-width:1050px){
  
}
@media(max-width:850px){
  .agent-list .agent-card{
    grid-template-columns:minmax(220px,1.5fr) minmax(95px,.7fr) minmax(95px,.7fr) auto;
    column-gap:12px;
  }
}
@media(max-width:680px){
  .agent-list .agent-card{grid-template-columns:1fr 1fr;}
  .agent-list .agent-metric:first-of-type,
  .agent-list .agent-metric + .agent-metric{border-left:0;padding-left:0;}
}

/* Agents — exact compact reference row */
.agent-list{display:grid;grid-template-columns:1fr;gap:6px;}
.agent-list .agent-card{

  display:grid;

  border:1px solid #e2e8ef;
  border-radius:7px;
  background:#fff;
  box-shadow:0 2px 8px rgba(20,40,65,.045);
  transform:none;
}
.agent-list .agent-card:hover{transform:none;box-shadow:0 3px 10px rgba(20,40,65,.06);border-color:#dce4ec;}
.agent-identity{grid-template-columns:36px minmax(0,1fr);align-items:center;}
.agent-identity .avatar.large{width:36px;height:36px;min-width:36px;font-size:15px;}
.agent-identity-copy{display:grid;gap:1px;min-width:0;}
.agent-identity-copy h3{

  line-height:1.1;
  
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.agent-subline{display:flex;align-items:center;gap:7px;min-width:0;}
.agent-identity-copy p{
  margin:0;
  color:#78859a;
  font-size:8.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.agent-subline .status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-height:16px;
  padding:2px 6px;
  border-radius:999px;
  font-size:7.5px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
.agent-subline .status i{font-size:4px;}
.agent-list .agent-metric{display:grid;gap:1px;align-content:center;}
.agent-list .agent-metric:first-of-type,.agent-list .agent-metric + .agent-metric{border-left:1px solid #edf0f4;padding-left:14px;}
.agent-list .agent-metric strong{color:#172033;font-size:11px;line-height:1.05;font-weight:800;letter-spacing:0;}
.agent-list .agent-metric span{color:#77849a;font-size:7.5px;line-height:1.1;white-space:nowrap;}
.agent-actions{display:flex;justify-content:flex-end;align-items:center;min-width:0;}
.agent-actions form{margin:0;min-width:0;}
.agent-actions .btn{
  min-width:59px;
  width:auto;
  height:25px;
  min-height:25px;
  padding:4px 9px;
  border-radius:6px;
  font-size:8px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
.agent-actions .btn.danger{min-width:92px;background:#fff;border-color:#f0bfc3;color:#cf3540;}
.agent-actions .btn.danger i{font-size:8px;}
.agent-account-note{margin:0;grid-column:6;text-align:right;font-size:8px;}
@media(max-width:1050px){
  .agent-list .agent-card{column-gap:10px;}
  .agent-list .agent-metric:first-of-type,.agent-list .agent-metric + .agent-metric{padding-left:10px;}
}
@media(max-width:780px){
  .agent-list .agent-card{column-gap:8px;}
}
@media(max-width:600px){
  
  .agent-identity{grid-column:1 / -1;}
  .agent-list .agent-metric:first-of-type,.agent-list .agent-metric + .agent-metric{border-left:0;padding-left:0;}
  .agent-actions{grid-column:1 / -1;justify-content:stretch;}
  .agent-actions form{flex:1;}
  .agent-actions .btn{width:100%;}
}

/* FINAL AGENTS ROW FIX — match compact Style 3 reference exactly */
.agent-list .agent-card{
  height:58px;
  min-height:58px;
  padding:7px 10px;
  
  align-items:center;
  column-gap:0;
  overflow:hidden;
}
.agent-list .agent-card::before,
.agent-list .agent-card::after{display:none!important;content:none!important;}
.agent-list .agent-identity{
  min-width:0;
  grid-column:auto;
  grid-row:auto;
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
}
.agent-list .agent-metric{
  min-width:0;
  height:38px;
  padding-left:14px!important;
  border-left:1px solid #edf0f4!important;
}
.agent-list .agent-actions{
  min-width:0;
  height:36px;
  
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  overflow:visible;
}
.agent-list .agent-actions form{
  width:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  min-width:0!important;
}
.agent-list .agent-actions .btn{
  width:auto!important;
  min-width:59px!important;
  height:25px!important;
  min-height:25px!important;
  padding:4px 9px!important;
  font-size:8px!important;
  line-height:1!important;
  white-space:nowrap;
}
.agent-list .agent-actions .btn.danger{
  width:auto!important;
  min-width:92px!important;
}
.agent-list .agent-actions .btn.danger i{font-size:8px!important;}
@media(max-width:1050px){
  
  .agent-list .agent-metric{padding-left:10px!important;}
  
}
@media(max-width:780px){
  .agent-list .agent-card{height:auto;min-height:58px;}
}
@media(max-width:600px){
  .agent-list .agent-card{height:auto;padding:9px;}
  .agent-list .agent-identity{grid-column:1 / -1;}
  .agent-list .agent-metric{height:auto;border-left:0!important;border-top:1px solid #edf0f4;padding:8px 0 0!important;}
  .agent-list .agent-actions{height:auto;padding:0;justify-content:stretch;}
  .agent-list .agent-actions form{flex:1 1 0!important;width:auto!important;}
  .agent-list .agent-actions .btn{width:100%!important;}
}

/* FINAL AGENTS STYLE 3 — exact compact reference alignment */
.page-agents .agent-list{display:grid;grid-template-columns:1fr;}
.page-agents .agent-list .agent-card{

  padding:7px 10px!important;
  display:grid!important;

}
.page-agents .agent-identity{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  
  gap:9px!important;
}
.page-agents .agent-identity .avatar.large{
  width:38px!important;height:38px!important;min-width:38px!important;
  font-size:16px!important;
}
.page-agents .agent-identity-copy{min-width:0!important;display:grid!important;gap:1px!important;}
.page-agents .agent-identity-copy h3{
  margin:0!important;

}
.page-agents .agent-subline{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;}
.page-agents .agent-identity-copy p{
  margin:0!important;

}

.page-agents .agent-list .agent-metric{
  min-width:0!important;
  height:39px!important;
  padding:0 0 0 14px!important;
  border-left:1px solid #edf0f4!important;
  display:grid!important;
  align-content:center!important;
  gap:1px!important;
}

.page-agents .agent-list .agent-actions{
  min-width:0!important;

}
.page-agents .agent-list .agent-actions form{margin:0!important;min-width:0!important;}
.page-agents .agent-list .agent-actions .btn{
  width:auto!important;

  white-space:nowrap!important;
}

@media(max-width:900px){
  .page-agents .agent-list .agent-card{grid-template-columns:34% 16% 20% 30%!important;}
}
@media(max-width:680px){
  .page-agents .agent-list .agent-card{height:auto!important;min-height:61px!important;grid-template-columns:1fr 1fr!important;row-gap:8px!important;padding:9px!important;}
  .page-agents .agent-identity{grid-column:1/-1!important;}
  .page-agents .agent-list .agent-metric{height:auto!important;border-left:0!important;border-top:1px solid #edf0f4!important;padding:8px 0 0!important;}
  .page-agents .agent-list .agent-actions{grid-column:1/-1!important;height:auto!important;padding:0!important;justify-content:stretch!important;}
  .page-agents .agent-list .agent-actions form{flex:1 1 0!important;width:auto!important;}
  .page-agents .agent-list .agent-actions .btn{width:100%!important;}
}

/* Agents typography normalization — match the site's standard UI scale while preserving the compact row alignment */

.page-agents .agent-subline .status{
  min-height:19px!important;
  padding:3px 8px!important;
  gap:4px!important;
  
}

/* ========================================================================
   FINAL SITE-WIDE TYPOGRAPHY PASS
   One shared hierarchy across all application pages.
   Sidebar/navigation is intentionally excluded.
   ======================================================================== */
:root{
  --ui-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-body-size:14px;
  --ui-page-title:25px;
  --ui-page-title-weight:800;
  --ui-page-subtitle:13px;
  --ui-section-title:15px;
  --ui-section-weight:780;
  --ui-body:13px;
  --ui-body-strong:13.5px;
  --ui-meta:11.5px;
  --ui-table-head:11px;
  --ui-label:13px;
  --ui-button:12.5px;
  --ui-small-button:11.5px;
  --ui-help:11.5px;
  --ui-metric-label:12px;
  --ui-metric-value:25px;
  --ui-metric-meta:10.5px;
}

.main-area,
.main-area button,
.main-area input,
.main-area select,
.main-area textarea{
  font-family:var(--ui-font);
}

/* Page-level hierarchy */
.page-heading h1{font-size:var(--ui-page-title)!important;font-weight:var(--ui-page-title-weight)!important;line-height:1.18!important;}
.page-heading p{font-size:var(--ui-page-subtitle)!important;line-height:1.55!important;}
.panel-header h2,.panel h2{line-height:1.25!important;}

/* General content hierarchy */

.main-area input,.main-area select,.main-area textarea{font-size:13px!important;line-height:1.45!important;}
.main-area .help,.main-area .muted{font-size:var(--ui-help)!important;line-height:1.5!important;}

/* Buttons */

/* Tables */
.main-area .table-wrap th{font-size:var(--ui-table-head)!important;line-height:1.2!important;letter-spacing:.055em!important;}
.main-area .table-wrap td{font-size:var(--ui-body)!important;line-height:1.35!important;}
.main-area .table-wrap td strong{font-size:var(--ui-body-strong)!important;line-height:1.25!important;}
.main-area .table-wrap td small{font-size:var(--ui-meta)!important;line-height:1.25!important;}
.main-area .table-wrap .status,.main-area .status{font-size:10.5px!important;line-height:1.2!important;}

/* Dashboard / Campaign metrics */
.main-area .metric-card small,.main-area .campaign-stat span:first-child{font-size:var(--ui-metric-label)!important;line-height:1.2!important;}
.main-area .metric-card strong,.main-area .campaign-stat strong{font-size:var(--ui-metric-value)!important;line-height:1.25!important;letter-spacing:-.035em!important;}
.main-area .metric-card span:last-child,.main-area .campaign-stat span:last-child{font-size:var(--ui-metric-meta)!important;line-height:1.15!important;letter-spacing:.04em!important;}

/* Common cards / dialogs */

.main-area .modal-subtitle,.main-area .app-dialog-copy p{font-size:var(--ui-help)!important;line-height:1.5!important;}

.main-area .template-guide-step strong{font-size:14px!important;}
.main-area .template-guide-step p{font-size:var(--ui-help)!important;}

/* Inbox / messaging hierarchy */
.main-area .conversation-copy strong{font-size:13.5px!important;}
.main-area .conversation-copy small,.main-area .conversation-title-row time{font-size:var(--ui-meta)!important;}
.main-area .chat-person-copy strong{font-size:14px!important;}
.main-area .chat-person-copy small{font-size:var(--ui-meta)!important;}
.main-area .bubble p{font-size:13px!important;line-height:1.45!important;}
.main-area .bubble span{font-size:9px!important;}

/* Auth / public pages */

.public-legal-body{font-size:14px!important;line-height:1.55!important;}

/* Agents: preserve the approved compact row geometry, but restore the
   same typography hierarchy used everywhere else. */

/* Responsive typography keeps the same hierarchy rather than introducing
   unrelated page-specific scales. */
@media(max-width:760px){
  .page-heading h1{font-size:23px!important;}
  .page-heading p{font-size:12.5px!important;}
  
  .metric-card strong,.campaign-stat strong{font-size:21px!important;}
  .main-area .table-wrap th{font-size:10.5px!important;}
  .main-area .table-wrap td{font-size:12.5px!important;}
  .page-agents .agent-identity-copy h3{font-size:13.5px!important;}
  .page-agents .agent-identity-copy p{font-size:11px!important;}
  .page-agents .agent-list .agent-actions .btn{font-size:12px!important;}
}

/* FINAL TYPOGRAPHY QA OVERRIDE
   Align Agents with the shared site hierarchy without changing its approved layout. */
.page-agents .agent-identity-copy h3{

  letter-spacing:0!important;
}

.page-agents .agent-subline .status i{font-size:5px!important;}
.page-agents .agent-list .agent-metric strong{

  letter-spacing:0!important;
}

/* FINAL AGENT ACTIVE BADGE — polished compact status pill */

/* FINAL AGENT ACTIVE BADGE — subtle/minimal reference treatment */

.page-agents .agent-subline .status.approved i{
  width:5px!important;
  height:5px!important;
  min-width:5px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#18a861!important;
  font-size:0!important;
  flex:0 0 5px!important;
  box-shadow:none!important;
}

/* Agents — Active badge: exact compact reference proportions */
.page-agents .agent-subline{gap:8px;}

.page-agents .agent-subline .status.approved i,
.page-agents .agent-subline .status.approved::before{
  width:4px;
  height:4px;
  min-width:4px;
  min-height:4px;
  margin:0;
  border-radius:50%;
  background:#12a963;
  box-shadow:none;
  font-size:0;
}

/* FINAL ACTIVE BADGE DOT FIX
   Use a CSS pseudo-element for the dot so it is always rendered independently
   of Font Awesome loading/render timing. */
.page-agents .agent-subline .status.approved{

  overflow:visible!important;

}

/* Inbox navigation unread count */
.side-nav a .nav-label{min-width:0;}
.nav-unread-badge{align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums;}
.side-nav a.active .nav-unread-badge,.side-nav a:hover .nav-unread-badge{background:#f04f5b;color:#fff;}
@media (max-width:700px){.nav-unread-badge{min-width:20px;height:20px;font-size:10px;padding:0 5px;}}

/* Agents: restore a comfortable control/status size while preserving the approved compact row alignment */

.page-agents .agent-list .agent-actions .btn{
  min-width:70px!important;

  padding:5px 11px!important;
  border-radius:7px!important;

}
.page-agents .agent-list .agent-actions .btn.danger{
  min-width:105px!important;
}
.page-agents .agent-list .agent-actions .btn.danger i{
  font-size:9px!important;
}

/* Final Agents Active badge — readable compact size; do not alter card alignment */
.page-agents .agent-subline .status.approved{
  width:auto!important;
  min-width:52px!important;
  height:21px!important;
  min-height:21px!important;
  padding:0 8px!important;
  gap:4px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #d3ecdf!important;
  border-radius:999px!important;
  background:#eaf8f1!important;
  color:#087a48!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:21px!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
.page-agents .agent-subline .status.approved i{display:none!important;}
.page-agents .agent-subline .status.approved::before{
  content:""!important;
  display:block!important;
  width:5px!important;
  height:5px!important;
  min-width:5px!important;
  min-height:5px!important;
  flex:0 0 5px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#12a963!important;
  box-shadow:none!important;
}

/* Final table alignment pass: keep every body cell's first visual element
   anchored to the exact same left edge as its column header. */
.page-content .table-wrap > table > thead > tr > th,
.page-content .table-wrap > table > tbody > tr > td {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.page-content .table-wrap > table > tbody > tr > td > :first-child {
  margin-left: 0 !important;
}
.page-content .table-wrap > table > thead > tr > th:first-child,
.page-content .table-wrap > table > tbody > tr > td:first-child {
  padding-left: 14px !important;
}

/* Final table column alignment: body content starts on the exact same
   horizontal grid line as its corresponding header. */
.page-content table thead th,
.page-content table tbody td {
  padding-left: 16px !important;
  padding-right: 16px !important;
  text-align: left;
}
.page-content table tbody td > :first-child {
  margin-left: 0 !important;
}
.page-content table tbody td .business-table-actions,
.page-content table tbody td .row-actions {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* =====================================================================
   FINAL PREMIUM TYPOGRAPHY PASS — APP PAGES
   Typography only: no widths, margins, padding, grid/flex, or positioning.
   The sidebar/navigation and approved Agent card geometry remain untouched.
   ===================================================================== */
:root{
  --type-page-title:25px;
  --type-page-title-weight:800;
  --type-subtitle:13px;
  --type-section:16px;
  --type-section-weight:780;
  --type-body:13px;
  --type-body-strong:13.5px;
  --type-meta:11.5px;
  --type-label:12.5px;
  --type-button:12px;
  --type-small:11px;
  --type-table-head:10.5px;
  --type-table-body:12px;
  --type-metric-label:12px;
  --type-metric-value:24px;
  --type-metric-meta:10.5px;
}

/* Shared page hierarchy */
.main-area,
.page-content{font-family:var(--ui-font);font-size:var(--type-body);line-height:1.45;}
.page-heading h1,
.page-inbox .inbox-heading h1,
.page-campaigns .campaign-heading h1,
.page-settings .page-heading h1,
.page-settings .api-rd-page-heading h1,
.page-dashboard .page-heading h1{
  font-size:var(--type-page-title)!important;
  font-weight:var(--type-page-title-weight)!important;
  line-height:1.18!important;
  letter-spacing:-.035em!important;
}
.page-heading p,
.page-inbox .inbox-heading p,
.page-campaigns .campaign-heading p,
.page-settings .page-heading p,
.page-settings .api-rd-page-heading p{
  font-size:var(--type-subtitle)!important;
  line-height:1.55!important;
}
.panel-header h2,
.panel h2,
.page-content .panel>h2,
.page-settings .api-rd-card h2,
.page-dashboard .panel-header h2{
  font-size:var(--type-section)!important;
  font-weight:var(--type-section-weight)!important;
  line-height:1.25!important;
  letter-spacing:-.015em!important;
}

/* Body / supporting copy */
.main-area p{line-height:1.45;}
.main-area label{font-size:var(--type-label)!important;line-height:1.35!important;}
.main-area input,
.main-area select,
.main-area textarea{font-size:13px!important;line-height:1.45!important;}
.main-area .help,
.main-area .muted,
.main-area small{line-height:1.45;}

/* Buttons */
.main-area .btn{font-size:var(--type-button)!important;line-height:1.2!important;}
.main-area .btn.small{font-size:var(--type-small)!important;}

/* Tables — one hierarchy on every table */
.main-area .table-wrap th,
.main-area table th{font-size:var(--type-table-head)!important;font-weight:800!important;line-height:1.2!important;letter-spacing:.055em!important;}
.main-area .table-wrap td,
.main-area table td{font-size:var(--type-table-body)!important;line-height:1.35!important;}
.main-area .table-wrap td strong,
.main-area table td strong{font-size:var(--type-body-strong)!important;font-weight:780!important;line-height:1.25!important;}
.main-area .table-wrap td small,
.main-area table td small{font-size:var(--type-meta)!important;line-height:1.25!important;}
.main-area .table-wrap .status,
.main-area table .status{font-size:10.5px!important;font-weight:750!important;line-height:1.2!important;}

/* Dashboard / campaign metrics */
.main-area .metric-card small,
.main-area .campaign-stat span:first-child{font-size:var(--type-metric-label)!important;font-weight:650!important;line-height:1.2!important;}
.main-area .metric-card strong,
.main-area .campaign-stat strong{font-size:var(--type-metric-value)!important;font-weight:820!important;line-height:1.2!important;letter-spacing:-.03em!important;}
.main-area .metric-card span:last-child,
.main-area .campaign-stat span:last-child{font-size:var(--type-metric-meta)!important;font-weight:650!important;line-height:1.15!important;letter-spacing:.04em!important;}

/* Campaign page */
.page-campaigns .campaign-eyebrow{font-size:10.5px!important;font-weight:800!important;letter-spacing:.075em!important;}
.page-campaigns .campaign-toolbar-title h2{font-size:14px!important;font-weight:780!important;line-height:1.25!important;}
.page-campaigns .campaign-toolbar-title span{font-size:11px!important;line-height:1.4!important;}
.page-campaigns .campaign-search input,
.page-campaigns .campaign-filters select{font-size:12px!important;}
.page-campaigns .campaign-table th{font-size:var(--type-table-head)!important;}
.page-campaigns .campaign-table td{font-size:var(--type-table-body)!important;}
.page-campaigns .campaign-table td strong{font-size:var(--type-body-strong)!important;}
.page-campaigns .campaign-table td small{font-size:var(--type-meta)!important;}

.page-campaigns .campaign-table .row-actions .btn{font-size:var(--type-small)!important;}
.page-campaigns .campaign-info-grid .notice strong,
.page-campaign-create .consent-box strong{font-size:var(--type-body-strong)!important;}
.page-campaigns .campaign-info-grid .notice p,
.page-campaign-create .consent-box p{font-size:var(--type-meta)!important;}

/* Contacts / templates */
.page-contacts .import-columns-help>strong{font-size:var(--type-meta)!important;}
.page-templates .template-data-summary,
.page-templates .template-help-warning{font-size:var(--type-meta)!important;line-height:1.5!important;}
.page-templates .template-empty-card h2{font-size:20px!important;line-height:1.25!important;}
.page-templates .template-empty-card p{font-size:var(--type-subtitle)!important;line-height:1.55!important;}
.page-templates .template-guide-step strong{font-size:14px!important;}
.page-templates .template-guide-step p{font-size:var(--type-meta)!important;}

/* Settings */

.page-settings .api-rd-field,
.page-settings .api-rd-label{font-size:var(--type-meta)!important;}
.page-settings .api-rd-field input{font-size:12px!important;}
.page-settings .api-rd-field small,
.page-settings .api-rd-stat small,
.page-settings .api-rd-platform-status span{font-size:10px!important;}
.page-settings .api-rd-note strong{font-size:var(--type-meta)!important;}
.page-settings .api-rd-note p{font-size:var(--type-meta)!important;}

.page-settings .api-rd-platform-status strong{font-size:10.5px!important;}
.page-settings .api-rd-platform-save .btn{font-size:var(--type-button)!important;}

/* System */

.page-system .system-live-help p{font-size:var(--type-meta)!important;}

/* Inbox */
.page-inbox .conversation-search input{font-size:12px!important;}
.page-inbox .conversation-item{font-size:12px!important;}
.page-inbox .conversation-copy strong{font-size:13px!important;font-weight:780!important;}
.page-inbox .conversation-copy small{font-size:var(--type-meta)!important;}
.page-inbox .conversation-title-row time{font-size:10px!important;}

.page-inbox .customer-active h3{font-size:14px!important;font-weight:780!important;}
.page-inbox .customer-active>p{font-size:var(--type-meta)!important;}
.page-inbox .customer-details small{font-size:10px!important;}
.page-inbox .customer-details strong{font-size:12px!important;}
.page-inbox .bubble p{font-size:12px!important;line-height:1.45!important;}
.page-inbox .bubble span{font-size:9px!important;}

/* Agents — typography only; approved compact-row geometry is untouched */
.page-agents .agent-identity-copy h3{font-size:13.5px!important;line-height:1.15!important;}
.page-agents .agent-identity-copy p{font-size:var(--type-meta)!important;line-height:1.2!important;}
.page-agents .agent-subline .status{font-size:10.5px!important;line-height:1.1!important;}
.page-agents .agent-list .agent-metric strong{font-size:14px!important;line-height:1.08!important;}
.page-agents .agent-list .agent-metric span{font-size:var(--type-metric-meta)!important;line-height:1.15!important;}
.page-agents .agent-list .agent-actions .btn{font-size:var(--type-button)!important;line-height:1.1!important;}

/* Modals / dialogs */
.main-area .modal-head h2{font-size:18px!important;font-weight:780!important;line-height:1.25!important;}
.main-area .modal-subtitle,
.main-area .app-dialog-copy p{font-size:var(--type-meta)!important;line-height:1.5!important;}
.main-area .app-dialog-copy h2{font-size:18px!important;font-weight:790!important;line-height:1.25!important;}
.main-area .app-dialog-button{font-size:var(--type-button)!important;}

/* Public/auth pages use the same premium relationship without changing layout. */
.auth-card h1{font-size:27px!important;line-height:1.2!important;}
.auth-card>p{font-size:var(--type-subtitle)!important;line-height:1.55!important;}
.login-title-wrap h1{line-height:1.1!important;}
.login-title-wrap p{line-height:1.55!important;}
.legal-hero h1{line-height:1.1!important;}

.legal-card p,.deletion-card p{font-size:var(--type-body)!important;line-height:1.65!important;}

@media(max-width:760px){
  .page-heading h1,
  .page-inbox .inbox-heading h1,
  .page-campaigns .campaign-heading h1,
  .page-settings .page-heading h1,
  .page-settings .api-rd-page-heading h1,
  .page-dashboard .page-heading h1{font-size:23px!important;}
  .page-heading p,
  .page-inbox .inbox-heading p,
  .page-campaigns .campaign-heading p{font-size:12.5px!important;}
  .panel-header h2,.panel h2,.page-settings .api-rd-card h2{font-size:15px!important;}
  .main-area .table-wrap th,.main-area table th{font-size:10px!important;}
  .main-area .table-wrap td,.main-area table td{font-size:11.5px!important;}
  .main-area .metric-card strong,.main-area .campaign-stat strong{font-size:21px!important;}
}

/* FINAL VISUAL QA — FONT WEIGHT / PERCEIVED HIERARCHY ONLY
   No font sizes, spacing, dimensions, alignment, or positions are changed. */
.main-area .page-heading h1{font-weight:800!important;}
.main-area .page-heading p{font-weight:400!important;}
.main-area .panel-header h2,.main-area .panel h2{font-weight:700!important;}
.main-area .panel-header a{font-weight:600!important;}
.main-area .btn{font-weight:600!important;}
.main-area .btn.small{font-weight:600!important;}
.main-area label{font-weight:600!important;}
.main-area .help,.main-area .muted{font-weight:400!important;}
.main-area .metric-card small,.main-area .campaign-stat span:first-child{font-weight:600!important;}
.main-area .metric-card strong,.main-area .campaign-stat strong{font-weight:800!important;}
.main-area .metric-card span:last-child,.main-area .campaign-stat span:last-child{font-weight:600!important;}
.main-area .table-wrap th{font-weight:700!important;}
.main-area .table-wrap td{font-weight:400!important;}
.main-area .table-wrap td strong{font-weight:650!important;}
.main-area .table-wrap td small{font-weight:400!important;}
.main-area .table-wrap .status,.main-area .status{font-weight:650!important;}
.main-area .conversation-copy strong{font-weight:650!important;}
.main-area .chat-person-copy strong{font-weight:650!important;}
.main-area .chat-header small,.main-area .conversation-copy small,.main-area .conversation-title-row time,.main-area .chat-person-copy small{font-weight:400!important;}
.main-area .bubble p{font-weight:400!important;}
.main-area .bubble span{font-weight:400!important;}
.main-area .modal-head h2,.main-area .app-dialog-copy h2{font-weight:700!important;}
.main-area .app-dialog-button{font-weight:600!important;}
.main-area .template-guide-step strong{font-weight:650!important;}

.page-agents .agent-identity-copy p{font-weight:400!important;}
.page-agents .agent-subline .status{font-weight:650!important;}
.page-agents .agent-list .agent-metric strong{font-weight:700!important;}
.page-agents .agent-list .agent-metric span{font-weight:500!important;}
.page-agents .agent-list .agent-actions .btn{font-weight:600!important;}
.auth-card h1{font-weight:800!important;}
.auth-card>p{font-weight:400!important;}
.public-legal-body{font-weight:400!important;}

/* FINAL UI FIX — agent status placement and business Manage sizing. */
.agent-list .agent-card{
  grid-template-columns:minmax(210px,1.45fr) minmax(100px,.75fr) minmax(100px,.75fr) auto minmax(190px,1fr);
}
.agent-list .agent-status-slot{
  min-width:0;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border-left:1px solid #edf0f4;
  border-right:1px solid #edf0f4;
}
.agent-list .agent-status-slot .status{
  flex:0 0 auto;
}
.agent-list .agent-actions{
  padding-left:14px;
}
.business-table-actions .btn:not(.danger){
  width:115px;
  min-width:115px;
  height:48px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:1050px){
  .agent-list .agent-card{
    grid-template-columns:minmax(175px,1.4fr) minmax(85px,.7fr) minmax(85px,.7fr) auto minmax(170px,.9fr);
  }
  .agent-list .agent-status-slot{padding:0 5px;}
  .agent-list .agent-actions{padding-left:10px;}
}
@media(max-width:780px){
  .agent-list .agent-card{
    grid-template-columns:minmax(165px,1fr) minmax(75px,.6fr) minmax(75px,.6fr) auto;
  }
  .agent-list .agent-status-slot{grid-column:auto;border-left:1px solid #edf0f4;border-right:0;padding:0 4px;}
  .agent-list .agent-actions{padding-left:8px;}
}
@media(max-width:600px){
  .agent-list .agent-card{grid-template-columns:1fr 1fr;row-gap:8px;}
  .agent-list .agent-status-slot{grid-column:1 / -1;justify-content:flex-start;border-left:0;border-right:0;border-top:1px solid #edf0f4;height:30px;padding:5px 0;}
  .agent-list .agent-actions{grid-column:1 / -1;padding-left:0;}
}

/* FINAL REPAIR — keep the agent row on one line and place status between maximum and actions. */
.page-agents .agent-list .agent-card{
  height:61px!important;
  min-height:61px!important;
  grid-template-columns:34% 15.5% 22% 12% 16.5%!important;
  column-gap:0!important;
  align-items:center!important;
  overflow:hidden!important;
}
.page-agents .agent-list .agent-status-slot{
  grid-column:auto!important;
  grid-row:1!important;
  min-width:0!important;
  height:36px!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-left:1px solid #edf0f4!important;
  border-right:1px solid #edf0f4!important;
}
.page-agents .agent-list .agent-actions{
  grid-column:auto!important;
  grid-row:1!important;
  height:100%!important;
  padding-left:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
}
.page-agents .agent-list .agent-actions form{width:auto!important;flex:0 0 auto!important;}
.page-agents .agent-list .agent-actions .btn{height:27px!important;min-height:27px!important;}

@media(max-width:1050px){
  .page-agents .agent-list .agent-card{
    grid-template-columns:34% 16% 20% 12% 18%!important;
  }
}
@media(max-width:780px){
  .page-agents .agent-list .agent-card{
    grid-template-columns:minmax(165px,1fr) minmax(75px,.6fr) minmax(75px,.6fr) auto!important;
  }
  .page-agents .agent-list .agent-status-slot{
    grid-column:auto!important;
    grid-row:1!important;
    border-left:1px solid #edf0f4!important;
    border-right:0!important;
  }
  .page-agents .agent-list .agent-actions{
    grid-column:auto!important;
    grid-row:1!important;
    padding-left:8px!important;
  }
}
@media(max-width:600px){
  .page-agents .agent-list .agent-card{

    grid-template-columns:1fr 1fr!important;
    row-gap:8px!important;
  }
  .page-agents .agent-identity{grid-column:1/-1!important;}
  .page-agents .agent-list .agent-status-slot{
    grid-column:1/-1!important;
    grid-row:auto!important;
    justify-content:flex-start!important;
    border:0!important;
    border-top:1px solid #edf0f4!important;
    height:30px!important;
    padding:5px 0!important;
  }
  .page-agents .agent-list .agent-actions{
    grid-column:1/-1!important;
    grid-row:auto!important;
    height:auto!important;
    padding-left:0!important;
    justify-content:stretch!important;
  }
}

/* FINAL AGENTS — explicit column placement. Keep the DOM order visually stable. */
@media (min-width:601px){
  .page-agents .agent-list .agent-card > .agent-identity{
    grid-column:1!important;
    grid-row:1!important;
  }
  .page-agents .agent-list .agent-card > .agent-metric:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
  }
  .page-agents .agent-list .agent-card > .agent-metric:nth-child(3){
    grid-column:3!important;
    grid-row:1!important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot{
    grid-column:4!important;
    grid-row:1!important;
  }
  .page-agents .agent-list .agent-card > .agent-actions{
    grid-column:5!important;
    grid-row:1!important;
  }
}

/* FINAL STATUS + BUSINESS ACTION CONSISTENCY
   Keep Active badges consistent across the app and make Business actions
   share one exact control size. */
.page-agents .agent-top [data-agent-status].active,
.page-agents .agent-top [data-agent-status].approved{
  color:#087d49;
  background:linear-gradient(180deg,#eefaf4 0%,#e6f7ef 100%);
  border-color:#ccebdc;
}
.page-agents .agent-top [data-agent-status].active::before,
.page-agents .agent-top [data-agent-status].approved::before{
  background:#12a963;
  box-shadow:0 0 0 4px rgba(18,169,99,.11);
}
.page-content .business-status-active::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#12a963;
  box-shadow:0 0 0 3px rgba(18,169,99,.10);
  margin-right:6px;
}
.page-businesses .business-table-actions .btn{
  width:100px;
  
  height:48px;
  
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Active badge: same compact dot treatment in the actual Agents row layout. */

/* FINAL CROSS-PAGE CONSISTENCY — Businesses is the canonical table/control reference.
   Apply the same row scale, typography, controls and Active status treatment to
   Templates and Agents without changing page positions or overall layout. */

/* Templates: use the same table rhythm and type scale as Businesses. */
.page-templates .table-wrap > table{
  font-size:13px!important;
}
.page-templates .table-wrap > table > thead > tr > th{
  height:44px!important;
  padding:0 14px!important;
  vertical-align:middle!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:780!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
  color:var(--ui-header)!important;
  background:#f8fafc!important;
  white-space:nowrap!important;
}
.page-templates .table-wrap > table > tbody > tr > td{
  padding:12px 14px!important;
  vertical-align:middle!important;
  font-size:13px!important;
  line-height:1.35!important;
  color:var(--ui-body)!important;
}
.page-templates .table-wrap > table > tbody > tr > td strong{
  font-size:13.5px!important;
  line-height:1.2!important;
  font-weight:780!important;
  color:var(--ui-heading)!important;
}
.page-templates .table-wrap > table > tbody > tr > td small,
.page-templates .table-wrap .template-data-summary{
  font-size:11.5px!important;
  line-height:1.2!important;
  color:var(--ui-muted)!important;
}
.page-templates .table-wrap .status{
  min-height:25px!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Agents: match the Business table's row scale and control scale. */
@media (min-width:601px){
  .page-agents .agent-list .agent-card{
    height:72px!important;
    min-height:72px!important;
    grid-template-columns:34% 15.5% 22% 12% 16.5%!important;
    align-items:center!important;
  }
  .page-agents .agent-list .agent-actions{
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
  }
  .page-agents .agent-list .agent-actions form{
    width:auto!important;
    flex:0 0 auto!important;
  }
  .page-agents .agent-list .agent-actions .btn,
  .page-agents .agent-list .agent-actions .btn.danger{
    width:100px!important;
    min-width:100px!important;
    height:48px!important;
    min-height:48px!important;
    padding:8px 14px!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:650!important;
  }
}

/* Agents Active badge = same status pill proportions and dot treatment as Businesses. */
.page-agents .agent-status-slot [data-agent-status].active,
.page-agents .agent-status-slot [data-agent-status].approved{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:25px!important;
  padding:4px 9px!important;
  border:1px solid #ccebd9!important;
  border-radius:999px!important;
  background:#eaf8f1!important;
  color:#087a48!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.page-agents .agent-status-slot [data-agent-status].active::before,
.page-agents .agent-status-slot [data-agent-status].approved::before{
  content:""!important;
  width:6px!important;
  height:6px!important;
  flex:0 0 6px!important;
  border-radius:50%!important;
  background:#12a963!important;
  box-shadow:0 0 0 3px rgba(18,169,99,.10)!important;
}

/* Business actions remain the reference control size. */
.page-businesses .business-table-actions .btn,
.page-businesses .business-table-actions .btn.danger{
  width:100px!important;
  min-width:100px!important;
  height:48px!important;
  min-height:48px!important;
  padding:8px 14px!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:650!important;
}

@media (max-width:600px){
  .page-agents .agent-list .agent-card{
    height:auto!important;
    min-height:72px!important;
  }
  .page-agents .agent-list .agent-actions .btn,
  .page-agents .agent-list .agent-actions .btn.danger{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
  }
}

/* FINAL MICRO CONSISTENCY PASS — Business is the reference for controls/status pills. */
.page-businesses .business-table-actions .btn,
.page-businesses .business-table-actions .btn.danger,
.page-agents .agent-list .agent-actions .btn,
.page-agents .agent-list .agent-actions .btn.danger{
  width:96px!important;
  min-width:96px!important;
  height:42px!important;
  min-height:42px!important;
  padding:7px 12px!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:650!important;
}

/* Exact shared Active badge scale: Business and Agents use the same pill. */
.page-businesses .business-status-active,
.page-agents .agent-status-slot [data-agent-status].active,
.page-agents .agent-status-slot [data-agent-status].approved{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:26px!important;
  height:26px!important;
  box-sizing:border-box!important;
  padding:5px 9px!important;
  border:1px solid #c7ead6!important;
  border-radius:999px!important;
  background:#edf9f2!important;
  color:#087a48!important;
  font-size:10.5px!important;
  font-weight:820!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.page-businesses .business-status-active::before,
.page-agents .agent-status-slot [data-agent-status].active::before,
.page-agents .agent-status-slot [data-agent-status].approved::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  border-radius:50%!important;
  background:#12a963!important;
  box-shadow:0 0 0 3px rgba(18,169,99,.10)!important;
  margin-right:0!important;
}
/* The PHP markup contains a Font Awesome circle icon; hide it so the shared
   CSS dot above is the only visible indicator and never renders a duplicate. */
.page-agents .agent-status-slot [data-agent-status] > i{
  display:none!important;
}

/* FINAL SMALL-PHONE RESPONSIVE PASS — desktop/tablet styling remains untouched. */
@media (max-width: 480px){
  html,body{max-width:100%;overflow-x:hidden;}
  .main-area{width:100%;min-width:0;}
  .topbar{height:58px;padding:0 12px;gap:8px;}
  .menu-button{width:36px;height:36px;display:inline-grid;}
  .connection-pill{padding:6px 9px;font-size:10.5px;gap:6px;}
  .page-content{padding:12px 10px 22px!important;max-width:none;}

  /* Headings and actions */
  .page-heading{gap:12px;margin-bottom:14px;}
  .page-heading h1,.page-inbox .inbox-heading h1,.page-campaigns .campaign-heading h1{font-size:20px!important;line-height:1.2;}
  .page-heading p,.page-inbox .inbox-heading p,.page-campaigns .campaign-heading p{font-size:11.5px!important;line-height:1.45;}
  .heading-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px;}
  .heading-actions .btn{width:100%;min-width:0;flex:unset;}
  .heading-actions .btn:last-child:nth-child(odd){grid-column:1/-1;}

  /* Dashboard / metric cards */
  .metric-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .metric-card{min-width:0;padding:11px!important;gap:9px;}
  .metric-icon{width:32px;height:32px;font-size:12px;}
  .metric-card small{font-size:10px;line-height:1.25;}
  .metric-card strong{font-size:18px!important;line-height:1.2;}
  .metric-card span:last-child{font-size:9.5px;}
  .dashboard-grid,.two-column{grid-template-columns:1fr!important;gap:10px;}
  .panel-header{min-height:46px;padding:10px 12px;}
  .panel-header h2,.panel h2{font-size:14px!important;}

  /* Tables stay readable and scroll inside their own container instead of squeezing columns. */
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
  .table-wrap>table{min-width:620px;}
  .table-wrap th,.main-area .table-wrap th{font-size:9.5px!important;white-space:nowrap;}
  .table-wrap td,.main-area .table-wrap td{font-size:11px!important;white-space:nowrap;}
  .table-wrap th,.table-wrap td{padding:10px 11px!important;}
  .table-wrap td strong{font-size:11.5px!important;}
  .table-wrap .status{font-size:10px!important;min-height:23px;}
  .table-wrap::-webkit-scrollbar{height:5px;}

  /* Forms */
  .form-panel{padding:13px!important;}
  .form-grid{grid-template-columns:1fr!important;gap:11px;}
  .stack-form{gap:12px;}
  label{font-size:12px;}
  input,select,textarea{font-size:13px;padding:9px 10px;}
  .search-form{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;}
  .search-form input{min-width:0;width:100%;}

  /* Agents — compact stacked mobile card, while desktop remains unchanged. */
  .page-agents .agent-list .agent-card{
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    gap:0!important;
    padding:11px 12px!important;
    overflow:visible!important;
  }
  .page-agents .agent-list .agent-card>.agent-identity{
    grid-column:1/-1!important;grid-row:1!important;min-width:0!important;padding-bottom:9px!important;
  }
  .page-agents .agent-list .agent-card>.agent-metric:nth-child(2){
    grid-column:1!important;grid-row:2!important;border-top:1px solid #edf0f4!important;padding:8px 10px 7px 0!important;
  }
  .page-agents .agent-list .agent-card>.agent-metric:nth-child(3){
    grid-column:2!important;grid-row:2!important;border-top:1px solid #edf0f4!important;padding:8px 0 7px 10px!important;
  }
  .page-agents .agent-list .agent-card>.agent-status-slot{
    grid-column:1!important;grid-row:3!important;border:0!important;border-top:1px solid #edf0f4!important;
    height:40px!important;justify-content:flex-start!important;padding:7px 0 0!important;
  }
  .page-agents .agent-list .agent-card>.agent-actions{
    grid-column:2!important;grid-row:3!important;border-top:1px solid #edf0f4!important;
    height:40px!important;padding:7px 0 0 8px!important;justify-content:flex-end!important;gap:6px!important;
  }
  .page-agents .agent-list .agent-actions .btn,
  .page-agents .agent-list .agent-actions .btn.danger{
    width:auto!important;min-width:0!important;height:32px!important;min-height:32px!important;
    padding:6px 9px!important;font-size:10.5px!important;white-space:nowrap!important;
  }
  .page-agents .agent-status-slot [data-agent-status].active,
  .page-agents .agent-status-slot [data-agent-status].approved,
  .page-businesses .business-status-active{
    height:26px!important;min-height:26px!important;padding:5px 8px!important;font-size:10px!important;
  }

  /* Inbox: list first; chat becomes a full-screen panel when opened. */
  .page-content:has(.inbox-layout){padding:6px!important;}
  .inbox-layout{height:calc(100vh - 72px)!important;min-height:0!important;grid-template-columns:1fr!important;border-radius:7px;}
  .conversation-search{margin:9px;}
  .conversation-search input{font-size:12px;padding-top:9px;padding-bottom:9px;}
  .conversation-item{padding:10px;gap:8px;}
  .conversation-item .avatar{width:34px;height:34px;font-size:12px;}
  .conversation-copy strong{font-size:12px;}
  .conversation-copy small{font-size:10.5px;margin-top:3px;}
  .conversation-item b{min-width:20px;height:20px;font-size:10px;}
  .chat-panel{inset:58px 0 0!important;}
  .chat-header{height:56px;padding:8px 10px;}
  .chat-header .avatar{width:34px;height:34px;}
  .chat-actions{gap:4px;}
  .chat-actions select{max-width:112px;font-size:10.5px;padding:6px;}
  .messages{padding:12px 9px;}
  .bubble{max-width:86%;padding:7px 9px;font-size:12px;}
  .reply-box{padding:7px;gap:6px;}
  .reply-box textarea{min-height:40px;font-size:12px;}
  .send-button{width:40px;height:40px;}

  /* Modals and auth */
  .modal{padding:10px;}
  .modal-card{padding:15px;border-radius:9px;max-height:92vh;}
  .auth-body{padding:12px;}
  .auth-card{padding:20px 16px;border-radius:11px;}

  /* Buttons and utility controls should never overflow the viewport. */
  .btn{min-height:36px;padding:7px 10px;font-size:12px;}
  .btn.small{min-height:29px;font-size:11px;padding:5px 8px;}
  .page-businesses .business-table-actions{display:flex;flex-wrap:wrap;gap:6px;}
  .page-businesses .business-table-actions .btn,
  .page-businesses .business-table-actions .btn.danger{width:96px!important;min-width:96px!important;height:36px!important;min-height:36px!important;font-size:11px!important;padding:6px 8px!important;}
}

@media (max-width:360px){
  .page-content{padding-left:8px!important;padding-right:8px!important;}
  .metric-grid{gap:6px!important;}
  .metric-card{padding:9px!important;gap:7px;}
  .metric-card strong{font-size:16px!important;}
  .metric-card small{font-size:9px;}
  .heading-actions{grid-template-columns:1fr;}
  .page-agents .agent-list .agent-actions .btn,
  .page-agents .agent-list .agent-actions .btn.danger{font-size:10px!important;padding:6px 7px!important;}
  .table-wrap>table{min-width:580px;}
}

/* ================================================================
   FINAL SMALL-PHONE POLISH — Campaigns + Inbox unread indicators
   Desktop/tablet layout is intentionally untouched.
   ================================================================ */
@media (max-width: 480px){
  /* Campaigns: use the phone width efficiently instead of shrinking the
     desktop table into unreadable columns. */
  .page-campaigns .campaign-heading{
    margin-bottom:12px!important;
    gap:9px!important;
  }
  .page-campaigns .campaign-heading h1{font-size:20px!important;line-height:1.15!important;}
  .page-campaigns .campaign-heading p{font-size:11.5px!important;line-height:1.4!important;}
  .page-campaigns .campaign-heading .heading-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  .page-campaigns .campaign-heading .heading-actions>*{min-width:0!important;width:100%!important;}
  .page-campaigns .campaign-heading .heading-actions .btn{
    width:100%!important;
    min-height:35px!important;
    height:35px!important;
    padding:6px 8px!important;
    font-size:10.5px!important;
    white-space:nowrap!important;
  }
  .page-campaigns .campaign-stats{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    margin-bottom:10px!important;
  }
  .page-campaigns .campaign-stat{
    min-height:68px!important;
    height:68px!important;
    padding:9px!important;
    gap:8px!important;
    border-radius:9px!important;
  }
  .page-campaigns .campaign-stat-icon{
    width:30px!important;height:30px!important;border-radius:8px!important;font-size:11px!important;
  }
  .page-campaigns .campaign-stat span:first-child{font-size:9px!important;line-height:1.15!important;}
  .page-campaigns .campaign-stat strong{font-size:18px!important;line-height:1!important;}
  .page-campaigns .campaign-stat span:last-child{font-size:8px!important;line-height:1!important;}

  .page-campaigns .campaign-panel{border-radius:9px!important;}
  .page-campaigns .campaign-toolbar{
    min-height:0!important;
    padding:10px!important;
    gap:9px!important;
  }
  .page-campaigns .campaign-toolbar-title{min-width:0!important;gap:8px!important;}
  .page-campaigns .campaign-title-icon{width:30px!important;height:30px!important;border-radius:7px!important;font-size:11px!important;}
  .page-campaigns .campaign-toolbar-title h2{font-size:13px!important;}
  .page-campaigns .campaign-toolbar-title span{font-size:9.5px!important;}
  .page-campaigns .campaign-filters{gap:6px!important;}
  .page-campaigns .campaign-search input,
  .page-campaigns .campaign-filters select{height:35px!important;font-size:11px!important;}
  .page-campaigns .campaign-search input{padding-left:31px!important;}

  /* Keep the full campaign table readable via intentional horizontal scroll. */
  .page-campaigns .campaign-table-wrap{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .page-campaigns .campaign-table{
    min-width:760px!important;
    table-layout:fixed!important;
  }
  .page-campaigns .campaign-table th{font-size:9px!important;padding:8px 9px!important;height:36px!important;}
  .page-campaigns .campaign-table td{font-size:10.5px!important;padding:9px!important;vertical-align:middle!important;}
  .page-campaigns .campaign-table td:first-child strong{font-size:11px!important;}
  .page-campaigns .campaign-table td small{font-size:9px!important;}
  .page-campaigns .campaign-table .progress{min-width:75px!important;height:5px!important;}
  .page-campaigns .campaign-table [data-campaign-counts]{font-size:8.5px!important;}
  .page-campaigns .campaign-table .status{font-size:9px!important;min-width:0!important;padding:4px 7px!important;}
  .page-campaigns .campaign-table .row-actions{gap:4px!important;}
  .page-campaigns .campaign-table .row-actions .btn.small{
    min-height:27px!important;padding:5px 7px!important;font-size:9px!important;
  }
  .page-campaigns .campaign-table-footer{font-size:9px!important;padding:8px 10px!important;}
  .page-campaigns .campaign-notice{padding:10px!important;margin-top:9px!important;}
  .page-campaigns .campaign-notice strong{font-size:10px!important;}
  .page-campaigns .campaign-notice p{font-size:9.5px!important;}

  /* Inbox unread indicator: reserve a dedicated right rail so the badge
     never sits on top of the timestamp or message preview. */
  .page-inbox .conversation-item{
    padding-right:54px!important;
  }
  .page-inbox .conversation-copy{min-width:0!important;width:100%!important;}
  .page-inbox .conversation-title-row{min-width:0!important;width:100%!important;}
  .page-inbox .conversation-title-main{min-width:0!important;padding-right:0!important;}
  .page-inbox .conversation-title-main .conversation-unread{
    position:absolute!important;
    right:10px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:24px!important;
    min-width:24px!important;
    height:24px!important;
    padding:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#12a866!important;
    box-shadow:0 3px 9px rgba(10,150,79,.22)!important;
    font-size:10px!important;
    font-weight:800!important;
    z-index:4!important;
  }
  .page-inbox .conversation-item.has-unread .conversation-title-row time{
    padding-right:0!important;
  }
  .page-inbox .conversation-item.has-unread .conversation-last-message{
    padding-right:0!important;
    max-width:100%!important;
  }
}

@media (max-width:360px){
  .page-campaigns .campaign-heading .heading-actions{grid-template-columns:1fr!important;}
  .page-campaigns .campaign-stat{height:64px!important;min-height:64px!important;padding:8px!important;}
  .page-campaigns .campaign-stat-icon{width:28px!important;height:28px!important;}
  
  .page-inbox .conversation-item{padding-right:51px!important;}
  .page-inbox .conversation-title-main .conversation-unread{right:8px!important;width:22px!important;min-width:22px!important;height:22px!important;font-size:9.5px!important;}
}

/* ========================================================================
   CAMPAIGNS — SMALL PHONE TABLE
   Keep the same desktop table design on phones. The table itself remains
   wide and readable; only its wrapper scrolls horizontally.
   ======================================================================== */
@media (max-width: 600px){
  .page-campaigns .campaign-table-wrap{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:thin!important;
    border:0!important;
    background:transparent!important;
  }

  /* Preserve the desktop table instead of converting rows into cards. */
  .page-campaigns .campaign-table{
    display:table!important;
    width:max-content!important;
    min-width:900px!important;
    max-width:none!important;
    table-layout:auto!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
  }

  .page-campaigns .campaign-table thead{
    display:table-header-group!important;
  }

  .page-campaigns .campaign-table tbody{
    display:table-row-group!important;
  }

  .page-campaigns .campaign-table tr{
    display:table-row!important;
  }

  .page-campaigns .campaign-table th,
  .page-campaigns .campaign-table td{
    display:table-cell!important;
    position:static!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    white-space:nowrap!important;
    vertical-align:middle!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Keep the first column comfortably readable while scrolling. */
  .page-campaigns .campaign-table th:first-child,
  .page-campaigns .campaign-table td:first-child{
    min-width:185px!important;
    width:185px!important;
    white-space:normal!important;
  }

  .page-campaigns .campaign-table th:nth-child(2),
  .page-campaigns .campaign-table td:nth-child(2){min-width:135px!important;width:135px!important;}
  .page-campaigns .campaign-table th:nth-child(3),
  .page-campaigns .campaign-table td:nth-child(3){min-width:190px!important;width:190px!important;}
  .page-campaigns .campaign-table th:nth-child(4),
  .page-campaigns .campaign-table td:nth-child(4){min-width:105px!important;width:105px!important;}
  .page-campaigns .campaign-table th:nth-child(5),
  .page-campaigns .campaign-table td:nth-child(5){min-width:185px!important;width:185px!important;}
  .page-campaigns .campaign-table th:nth-child(6),
  .page-campaigns .campaign-table td:nth-child(6){min-width:145px!important;width:145px!important;}
  .page-campaigns .campaign-table th:nth-child(7),
  .page-campaigns .campaign-table td:nth-child(7){min-width:145px!important;width:145px!important;}

  .page-campaigns .campaign-table th{
    font-size:10px!important;
    padding:10px 11px!important;
    height:38px!important;
  }
  .page-campaigns .campaign-table td{
    font-size:11px!important;
    padding:10px 11px!important;
    line-height:1.35!important;
  }
  .page-campaigns .campaign-table td strong{
    font-size:11.5px!important;
    line-height:1.3!important;
  }
  .page-campaigns .campaign-table td small{
    font-size:9.5px!important;
    line-height:1.3!important;
  }
  .page-campaigns .campaign-table [data-campaign-counts]{
    font-size:9px!important;
  }
  .page-campaigns .campaign-table .progress{
    min-width:120px!important;
    width:150px!important;
    height:5px!important;
  }
  .page-campaigns .campaign-table .status{
    font-size:9.5px!important;
    padding:5px 8px!important;
  }
  .page-campaigns .campaign-table .row-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    width:max-content!important;
  }
  .page-campaigns .campaign-table .row-actions .btn.small{
    min-height:30px!important;
    height:30px!important;
    padding:6px 9px!important;
    font-size:9.5px!important;
    white-space:nowrap!important;
  }

  /* Make the scroll affordance obvious without changing the table itself. */
  .page-campaigns .campaign-table-wrap::after{
    content:"Swipe horizontally to view more";
    display:block!important;
    width:max-content!important;
    margin:7px 0 0 auto!important;
    padding:3px 7px!important;
    border-radius:999px!important;
    background:#f3f6f9!important;
    color:#7b8798!important;
    font-size:8.5px!important;
    font-weight:650!important;
    pointer-events:none!important;
  }

  .page-campaigns .campaign-table-footer{
    font-size:9px!important;
    padding:8px 10px!important;
  }
}

@media (max-width:360px){
  .page-campaigns .campaign-table{
    min-width:900px!important;
  }
  .page-campaigns .campaign-table th{
    font-size:9.5px!important;
    padding:9px 10px!important;
  }
  .page-campaigns .campaign-table td{
    font-size:10.5px!important;
    padding:9px 10px!important;
  }
  .page-campaigns .campaign-table td strong{font-size:11px!important;}
  .page-campaigns .campaign-table td small{font-size:9px!important;}
}

/* ========================================================================
   CAMPAIGNS — SMALL PHONE FILTER RELIABILITY
   Keep the desktop table untouched. On phones the table stays the same
   desktop-style table and scrolls horizontally; search/status filtering
   remains outside the scroll area and always controls the visible rows.
   ======================================================================== */
@media (max-width:760px){
  .page-campaigns .campaign-toolbar{
    width:100%;
    min-width:0;
  }
  .page-campaigns .campaign-toolbar-title,
  .page-campaigns .campaign-filters{
    min-width:0;
    max-width:100%;
  }
  .page-campaigns .campaign-filters{
    position:relative;
    z-index:3;
  }
  .page-campaigns .campaign-search input{
    min-width:0;
    width:100%;
  }
  .page-campaigns .campaign-table-wrap{
    position:relative;
    z-index:1;
  }
  .page-campaigns .campaign-table tbody tr.campaign-filter-hidden{
    display:none !important;
  }
}

/* ========================================================================
   FINAL CAMPAIGN RESPONSIVE FIX
   Desktop keeps the existing table layout. Small phones scroll the table
   horizontally instead of collapsing columns. Search/filter controls stay
   fully usable above the scroll area.
   ======================================================================== */
.page-campaigns .campaign-toolbar,
.page-campaigns .campaign-filters,
.page-campaigns .campaign-search {
  min-width: 0;
}

.page-campaigns .campaign-toolbar {
  overflow: visible;
}

.page-campaigns .campaign-search input,
.page-campaigns .campaign-filters select {
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .page-campaigns .campaign-heading .heading-actions {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  .page-campaigns .campaign-heading .heading-actions > * {
    flex: 1 1 180px;
    min-width: 0;
  }

  .page-campaigns .campaign-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    overflow: visible;
  }

  .page-campaigns .campaign-toolbar-title {
    width: 100%;
  }

  .page-campaigns .campaign-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
    flex: none;
  }

  .page-campaigns .campaign-search,
  .page-campaigns .campaign-filters select {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .page-campaigns .campaign-search input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding-left: 34px;
    font-size: 12px;
  }

  .page-campaigns .campaign-filters select {
    height: 38px;
    min-height: 38px;
  }

  .page-campaigns .campaign-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  .page-campaigns .campaign-table {
    display: table;
    width: 1180px;
    min-width: 1180px;
    max-width: none;
    table-layout: fixed;
    margin: 0;
  }

  .page-campaigns .campaign-table thead {
    display: table-header-group;
  }

  .page-campaigns .campaign-table tbody {
    display: table-row-group;
  }

  .page-campaigns .campaign-table tr {
    display: table-row;
  }

  .page-campaigns .campaign-table th,
  .page-campaigns .campaign-table td {
    display: table-cell;
    position: static;
    min-width: 0;
    max-width: none;
    white-space: normal;
    overflow: visible;
    word-break: normal;
    overflow-wrap: normal;
  }

  .page-campaigns .campaign-table th {
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 9.5px;
  }

  .page-campaigns .campaign-table td {
    padding: 12px;
    font-size: 11px;
  }

  .page-campaigns .campaign-table td:first-child strong {
    font-size: 12px;
  }

  .page-campaigns .campaign-table td small {
    font-size: 10px;
  }

  .page-campaigns .campaign-table [data-campaign-counts] {
    white-space: normal;
    font-size: 10px;
  }

  .page-campaigns .campaign-table .progress {
    width: 100%;
    min-width: 100px;
  }

  .page-campaigns .campaign-table .row-actions {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    white-space: nowrap;
  }

  .page-campaigns .campaign-table .row-actions .btn.small {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .page-campaigns .campaign-table-footer {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .page-campaigns .campaign-table-wrap::after {
    content: "Swipe horizontally to view more";
    display: block;
    width: max-content;
    margin: 7px 10px 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f3f6f9;
    color: #7b8798;
    font-size: 8.5px;
    font-weight: 650;
    pointer-events: none;
  }
}

@media (max-width: 380px) {
  .page-campaigns .campaign-heading h1 {
    font-size: 23px;
  }

  .page-campaigns .campaign-heading p {
    font-size: 11px;
  }

  .page-campaigns .campaign-stat {
    min-height: 68px;
    height: 68px;
    padding: 9px 11px;
  }

  .page-campaigns .campaign-stat-icon {
    width: 32px;
    height: 32px;
  }

  .page-campaigns .campaign-table {
    width: 1180px;
    min-width: 1180px;
  }
}

/* messaging-style quoted message inside a sent/received reply bubble */
.message-quoted{display:flex;align-items:stretch;gap:8px;min-width:0;margin:0 0 7px;padding:6px 7px;border-radius:6px;background:rgba(255,255,255,.58);overflow:hidden;}
.outbound .message-quoted{background:rgba(255,255,255,.52);}
.inbound .message-quoted{background:#f4f7f5;}
.message-quoted-accent{width:3px;flex:0 0 3px;border-radius:3px;background:#17b866;}
.message-quoted-copy{display:grid;gap:1px;min-width:0;line-height:1.25;}
.message-quoted-copy strong{font-size:10px;font-weight:750;color:#0b9850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.message-quoted-copy span{font-size:10px;color:#526071;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:460px;}
@media(max-width:720px){.message-quoted{padding:5px 6px;margin-bottom:6px;}.message-quoted-copy span{max-width:58vw;font-size:9.5px;}.message-quoted-copy strong{font-size:9.5px;}}

/* Reply action popup disabled: long-press now replies directly. */
.page-inbox .message-action-menu{display:none!important;}

/* messaging-style long-press message reply */

.message-action-menu{position:fixed;z-index:10050;min-width:142px;padding:5px;background:#fff;border:1px solid #dfe6ee;border-radius:10px;box-shadow:0 14px 35px rgba(16,35,58,.18);animation:messageActionIn .12s ease-out;}
.message-action-menu button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#26354a;padding:10px 12px;border-radius:7px;cursor:pointer;font-weight:650;text-align:left;}
.message-action-menu button:hover{background:#f1f7f4;color:#0b9850;}
.message-action-menu i{width:17px;text-align:center;}
.reply-to-preview{display:flex;align-items:stretch;gap:9px;margin:0 0 7px;padding:7px 8px;background:#eef8f2;border:1px solid #d5ebde;border-radius:8px;min-width:0;max-width:100%;overflow:hidden;}
.reply-to-preview-accent{width:3px;flex:0 0 3px;border-radius:4px;}
.reply-to-preview-copy{display:grid;gap:1px;min-width:0;flex:1;align-content:center;line-height:1.25;}
.reply-to-preview-copy strong{font-size:11px;color:#0b9850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reply-to-preview-copy strong i{margin-right:4px;}
.reply-to-preview-copy .reply-to-preview-name{font-size:11px;font-weight:700;color:#26354a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reply-to-preview-copy .reply-to-preview-body{font-size:10px;color:#657386;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reply-to-preview-close{width:30px;height:30px;flex:0 0 30px;border:0;background:transparent;color:#6d7890;border-radius:6px;cursor:pointer;display:grid;place-items:center;}
.reply-to-preview-close:hover{background:#dcefe4;color:#0b9850;}

@keyframes messageActionIn{from{opacity:0;transform:translateY(2px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:720px){

}

/* messaging-style message actions: compact trigger + friendly floating reply popover. */

.page-inbox .message-more-button{-webkit-tap-highlight-color:transparent;transition:background .14s ease,color .14s ease,transform .12s ease,opacity .14s ease;}

.page-inbox .message-more-button:active{background:rgba(224,232,239,.85);transform:scale(.91);}
.page-inbox .message-more-button:focus-visible{outline:2px solid rgba(23,184,102,.38);outline-offset:1px;}

.page-inbox .message-action-menu{transform-origin:var(--menu-origin-x,left) var(--menu-anchor-y,center);animation:messageActionIn .16s cubic-bezier(.22,1,.36,1);will-change:transform,opacity;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.page-inbox .message-action-menu.is-closing{animation:messageActionOut .1s ease-in forwards;}
.page-inbox .message-action-menu::after{content:"";position:absolute;top:calc(var(--menu-anchor-y, 50%) - 6px);width:11px;height:11px;background:#fff;border-left:1px solid rgba(214,222,230,.95);border-bottom:1px solid rgba(214,222,230,.95);transform:rotate(45deg);pointer-events:none;}
.page-inbox .message-action-menu[data-side="right"]::after{left:-6px;}
.page-inbox .message-action-menu[data-side="left"]::after{right:-6px;transform:rotate(225deg);}
.page-inbox .message-action-menu button{position:relative;z-index:1;cursor:pointer;transition:background .12s ease,color .12s ease,transform .1s ease;-webkit-tap-highlight-color:transparent;}
.page-inbox .message-action-menu button:hover,.page-inbox .message-action-menu button:focus-visible{background:#eef8f2;color:#0b9850;outline:none;}
.page-inbox .message-action-menu button:active{background:#e4f3ea;transform:scale(.98);}
.page-inbox .message-action-menu i{text-align:center;}

.page-inbox .message-action-menu button span::after{content:"Reply to message";margin-top:1px;color:#7a8796;font-size:9px;font-weight:450;line-height:11px;}

@keyframes messageActionIn{from{opacity:0;transform:translateY(2px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes messageActionOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(2px) scale(.96)}}
@media(max-width:650px){
  .page-inbox .message-more-button{width:30px;height:30px;flex-basis:30px;}
  .page-inbox .message-action-menu{min-width:126px;padding:4px;border-radius:11px;box-shadow:0 8px 22px rgba(24,43,64,.17),0 1px 4px rgba(24,43,64,.08);}
  .page-inbox .message-action-menu button{padding:7px 8px;font-size:13px;gap:8px;}
  .page-inbox .message-action-menu i{width:25px;height:25px;flex-basis:25px;font-size:11px;}
  .page-inbox .message-action-menu button span::after{font-size:8.5px;}
  .page-inbox .bubble{max-width:calc(100% - 36px);}
}
@media(prefers-reduced-motion:reduce){.page-inbox .message-action-menu{animation:none;}.page-inbox .message-action-menu.is-closing{animation:none;opacity:0;}}

/* Customer WhatsApp quick-reply response */
.customer-quick-reply-text {
  margin-top: 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Saved Quick Replies for the inbox composer */
.quick-reply-button{color:#0b9850!important;}
.quick-reply-menu{position:absolute;left:0;bottom:50px;width:min(390px,calc(100vw - 28px));background:#fff;border:1px solid #dfe6ee;border-radius:12px;box-shadow:0 18px 45px rgba(24,39,66,.20);z-index:70;overflow:hidden;}
.quick-reply-menu[hidden],.quick-reply-modal[hidden]{display:none!important;}
.quick-reply-menu-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid #edf0f3;color:#26354a;}
.quick-reply-menu-head strong{font-size:13px;}.quick-reply-menu-head button{border:0;background:transparent;color:#748196;width:30px;height:30px;border-radius:7px;cursor:pointer;}.quick-reply-menu-head button:hover{background:#f1f4f6;}
.quick-reply-search{display:flex;align-items:center;gap:8px;margin:9px 10px;padding:0 10px;border:1px solid #dfe5eb;border-radius:8px;height:37px;}.quick-reply-search i{color:#8190a2;font-size:12px;}.quick-reply-search input{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;width:100%;height:100%;font-size:12px;padding:0;}
.quick-reply-list{max-height:310px;overflow:auto;padding:3px 7px;}.quick-reply-empty{padding:24px 14px;text-align:center;color:#7b8798;font-size:12px;}
.quick-reply-item{display:flex;align-items:stretch;gap:4px;margin:3px 0;border-radius:9px;background:#fff;}.quick-reply-item-use{min-width:0;flex:1;border:0;background:transparent;padding:9px 9px;text-align:left;display:flex;align-items:center;gap:9px;cursor:pointer;color:#26354a;}.quick-reply-item-use>i{color:#9aa6b4;font-size:11px;}.quick-reply-item-main{display:grid;gap:2px;min-width:0;flex:1;}.quick-reply-item-main strong{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.quick-reply-item-main small{font-size:10px;color:#0b9850;font-weight:700;}.quick-reply-item-main span{font-size:10.5px;color:#687688;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.quick-reply-item-actions{display:flex;align-items:center;gap:1px;padding-right:5px;}.quick-reply-item-actions button{width:28px;height:28px;border:0;background:transparent;color:#8190a2;border-radius:6px;cursor:pointer;}.quick-reply-item-actions button:hover{background:#e7f5ed;color:#0b9850;}.quick-reply-item-actions button[data-quick-reply-delete]:hover{background:#fff0f0;color:#d33b45;}
.quick-reply-menu-foot{display:flex;justify-content:flex-end;gap:7px;padding:8px;border-top:1px solid #edf0f3;background:#fafbfc;}.quick-reply-menu-foot .btn{font-size:10.5px;padding:7px 9px;}
.quick-reply-modal{position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:18px;}.quick-reply-modal-backdrop{position:absolute;inset:0;background:rgba(18,30,44,.48);backdrop-filter:blur(2px);}.quick-reply-dialog{position:relative;width:min(520px,100%);background:#fff;border-radius:14px;box-shadow:0 25px 70px rgba(13,29,49,.28);overflow:hidden;}.quick-reply-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 17px;border-bottom:1px solid #e8edf1;}.quick-reply-dialog-head>div{display:grid;gap:3px;}.quick-reply-dialog-head strong{font-size:15px;color:#26354a;}.quick-reply-dialog-head small{font-size:10.5px;color:#7a8798;}.quick-reply-dialog form{display:grid;gap:13px;padding:16px;}.quick-reply-dialog label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#4d5c70;}.quick-reply-dialog input,.quick-reply-dialog textarea{width:100%;border:1px solid #d8e0e8;border-radius:8px;background:#fff;padding:10px 11px;font-size:12px;color:#26354a;outline:none;}.quick-reply-dialog input:focus,.quick-reply-dialog textarea:focus{border-color:#2bb875;box-shadow:0 0 0 3px rgba(43,184,117,.10);}.quick-reply-dialog label small{font-weight:500;color:#7a8798;font-size:9.5px;}.quick-reply-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:3px;}.quick-reply-dialog-actions .btn{font-size:11px;}
@media(max-width:650px){.quick-reply-menu{left:-2px;bottom:49px;width:min(350px,calc(100vw - 18px));}.quick-reply-list{max-height:270px;}.quick-reply-dialog{max-height:calc(100dvh - 30px);overflow:auto;}.quick-reply-modal{padding:10px;}.quick-reply-dialog form{padding:13px;}.quick-reply-item-main span{max-width:230px;}}

/* ========================================================================
   RESPONSIVE FINAL PASS — MOBILE + TABLET ONLY
   Desktop (above 1100px) is intentionally untouched.
   ======================================================================== */

/* Tablet / small laptop: keep every page usable without squeezing columns. */
@media (min-width:721px) and (max-width:1100px){
  .page-content{min-width:0;}
  .page-heading{align-items:flex-start;gap:16px;}
  .page-heading>div:first-child{min-width:0;}
  .heading-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0;}
  .heading-actions .btn{white-space:nowrap;}

  .metric-grid{gap:10px!important;}
  .metric-card{min-width:0;padding:14px!important;}
  .dashboard-grid,.two-column{grid-template-columns:minmax(0,1fr)!important;}
  .agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  .panel,.form-panel{min-width:0;}
  
  .table-wrap{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;}
  .table-wrap>table{min-width:680px;}

  /* Inbox: two usable columns; customer details move below/inside the chat
     instead of creating a cramped three-column layout. */
  .page-inbox .inbox-layout{
    height:calc(100dvh - 145px)!important;
    min-height:560px!important;
    grid-template-columns:minmax(250px,31%) minmax(0,1fr)!important;
  }
  .page-inbox .customer-panel{display:none!important;}
  .page-inbox .chat-panel{min-width:0!important;}
  
  .page-inbox .chat-person-copy strong{font-size:13px;}
  .page-inbox .chat-person-copy small{font-size:10.5px;}
  
  .page-inbox .chat-actions select{font-size:11px;}
  .page-inbox .messages{padding:16px 15px;}
  .page-inbox .bubble{max-width:min(76%,520px);}
  .page-inbox .reply-box{padding:8px;gap:7px;}
  .page-inbox .reply-tool-button{width:40px;height:40px;flex-basis:40px;}
  .page-inbox .send-button{width:42px;height:42px;flex-basis:42px;}
  .page-inbox .quick-reply-menu{width:min(390px,calc(100vw - 36px));}

  /* Campaign table keeps its desktop row design and scrolls only inside its
     own wrapper when the tablet is too narrow. */
  .page-campaigns .campaign-table-wrap{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;}
  
}

/* Phone: never allow page chrome or controls to create horizontal overflow. */
@media (max-width:720px){
  
  .app-shell,.main-area,.page-content{min-width:0;max-width:100%;}
  .topbar{min-width:0;}
  .page-content{padding-left:10px!important;padding-right:10px!important;}
  .page-heading,.heading-actions,.panel-header{min-width:0;}
  
  .heading-actions .btn{min-width:0;white-space:nowrap;}

  .metric-card{min-width:0;overflow:hidden;}
  .dashboard-grid,.two-column,.form-grid{min-width:0;}

  /* Tables scroll as tables, never collapse into unreadable cards. */
  .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;}
  .table-wrap>table{width:max-content;min-width:650px;}
  .table-wrap th,.table-wrap td{white-space:nowrap;}

  /* Inbox phone mode: the list is the first screen and the selected chat is
     promoted to the full viewport. Existing chat-open JS controls the view. */
  .page-inbox .inbox-layout{
    width:100%!important;
    height:calc(100dvh - 70px)!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  .page-inbox .conversation-list{min-width:0!important;width:100%!important;}
  .page-inbox .customer-panel{display:none!important;}
  .page-inbox .chat-panel{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    min-width:0!important;
    z-index:20!important;
    border-radius:0!important;
  }
  .page-inbox .inbox-layout:not(.chat-open) .chat-panel{display:none!important;}
  .page-inbox .inbox-layout.chat-open .conversation-list{display:none!important;}

  .page-inbox .chat-person .avatar{min-width:34px;}

  .page-inbox .chat-more-toggle{width:36px;height:36px;}

  .page-inbox .bubble{max-width:88%!important;font-size:12px;padding:7px 9px;}
  .page-inbox .reply-box{padding:6px!important;gap:5px!important;align-items:flex-end;}
  .page-inbox .reply-tool-wrap{flex:0 0 auto;}
  .page-inbox .reply-tool-button{width:38px!important;height:38px!important;flex-basis:38px!important;}
  .page-inbox .reply-compose-area{flex:1 1 auto;}
  .page-inbox .reply-box textarea{min-height:38px!important;max-height:120px;font-size:16px!important;padding:8px 9px!important;}
  .page-inbox .send-button{width:38px!important;height:38px!important;flex-basis:38px!important;}

  /* Quick replies: keep the picker inside the viewport and make the action
     row usable with thumbs. */
  .page-inbox .quick-reply-menu{
    left:0!important;
    right:auto!important;
    bottom:47px!important;
    width:min(360px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
  }
  .page-inbox .quick-reply-menu-foot{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .page-inbox .quick-reply-menu-foot .btn{width:100%;min-width:0;min-height:34px;}
  .page-inbox .quick-reply-item-main span{max-width:calc(100vw - 150px)!important;}
  .page-inbox .quick-reply-dialog{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 20px)!important;}
  .page-inbox .quick-reply-dialog-head{padding:13px 14px!important;}
  .page-inbox .quick-reply-dialog form{padding:13px!important;gap:11px!important;}
  .page-inbox .quick-reply-dialog textarea{min-height:120px;font-size:16px!important;}
  .page-inbox .quick-reply-dialog-actions{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .page-inbox .quick-reply-dialog-actions .btn{width:100%;min-width:0;}

  /* Campaign toolbar/filter controls stack cleanly instead of shrinking. */
  .page-campaigns .campaign-toolbar,.page-campaigns .campaign-filters{min-width:0!important;}
  .page-campaigns .campaign-search{min-width:0!important;width:100%!important;}
}

@media (max-width:390px){
  
  .topbar{padding-left:7px!important;padding-right:7px!important;}
  .mobile-page-title{max-width:35vw!important;}
  .page-inbox .chat-actions select{max-width:88px!important;}
  .page-inbox .chat-person-copy strong{max-width:34vw;}
  .page-inbox .quick-reply-menu{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;}
  .page-inbox .quick-reply-menu-foot{grid-template-columns:1fr!important;}
  .page-inbox .reply-tool-button{width:36px!important;height:36px!important;flex-basis:36px!important;}
  .page-inbox .send-button{width:36px!important;height:36px!important;flex-basis:36px!important;}
}

/* ========================================================================
   RESPONSIVE CORRECTION — INBOX CHAT HEADER + AUTO REPLY
   Mobile/tablet only. Desktop remains unchanged.
   ======================================================================== */

@media (min-width:721px) and (max-width:1100px){
  /* Prevent the chat identity/actions from squeezing into each other on
     portrait tablets. Actions get their own clean row when necessary. */
  .page-inbox .chat-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    height:auto!important;
    min-height:104px!important;
    padding:9px 12px!important;
    gap:7px!important;
  }
  .page-inbox .chat-person{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
  }
  .page-inbox .chat-actions{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px!important;
    gap:6px!important;
  }
  .page-inbox .chat-actions select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }

  .page-auto-reply .settings-grid{
    grid-template-columns:minmax(0,1fr) minmax(250px,.75fr)!important;
    gap:14px!important;
  }
  .page-auto-reply .settings-grid > .panel{
    min-width:0!important;
  }
}

@media (max-width:720px){
  /* ---------------- INBOX: mobile chat header ----------------
     Keep customer identity on the first row and assignment/status controls
     on a separate row. This prevents the exact overlap/clipping shown on
     small phones. */
  .page-inbox .chat-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;

    overflow:visible!important;
  }
  .page-inbox .chat-person{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
  }
  .page-inbox .chat-person-copy{
    min-width:0!important;
    max-width:calc(100vw - 105px)!important;
  }
  .page-inbox .chat-person-copy strong,
  .page-inbox .chat-person-copy small{
    max-width:100%!important;
  }
  .page-inbox .chat-actions{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    display:grid!important;

    align-items:center!important;
  }
  .page-inbox .chat-actions select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .page-inbox .chat-more,
  .page-inbox .chat-more-toggle{
    width:38px!important;
    min-width:38px!important;
    height:36px!important;
  }
  .page-inbox .service-window{
    position:relative!important;
    z-index:2!important;
    flex:0 0 auto!important;

  }

  /* ---------------- AUTO REPLY: phone ---------------- */
  .page-auto-reply .page-heading{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:7px!important;
    margin-bottom:13px!important;
  }
  .page-auto-reply .page-heading h1{
    font-size:22px!important;
  }
  .page-auto-reply .page-heading p{
    font-size:12px!important;
    line-height:1.5!important;
  }
  .page-auto-reply .settings-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
  }
  .page-auto-reply .settings-grid > .panel{
    width:100%!important;
    min-width:0!important;
  }
  .page-auto-reply .form-panel{
    padding:0!important;
    overflow:hidden!important;
  }
  .page-auto-reply .form-panel .panel-header{
    padding:12px 13px!important;
    min-height:52px!important;
  }
  .page-auto-reply .form-panel .panel-header h2{
    font-size:14px!important;
  }
  .page-auto-reply .form-panel > form{
    padding:14px!important;
  }
  .page-auto-reply .checkbox-row{
    margin-bottom:18px!important;
    gap:10px!important;
    align-items:flex-start!important;
  }
  .page-auto-reply .checkbox-row input{
    flex:0 0 18px!important;
  }
  .page-auto-reply label strong{
    font-size:12px!important;
    line-height:1.4!important;
  }
  .page-auto-reply label .muted,
  .page-auto-reply .form-panel form > .muted{
    font-size:11px!important;
    line-height:1.5!important;
  }
  .page-auto-reply select,
  .page-auto-reply textarea{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }
  .page-auto-reply select{
    min-height:42px!important;
    margin-bottom:14px!important;
  }
  .page-auto-reply textarea{
    min-height:150px!important;
    line-height:1.5!important;
  }
  .page-auto-reply .settings-grid > aside{
    padding:15px!important;
  }
  .page-auto-reply .settings-grid > aside > div:first-child{
    margin-bottom:13px!important;
  }
  .page-auto-reply .settings-grid > aside strong[style*="font-size:17px"]{
    font-size:15px!important;
  }
  .page-auto-reply .settings-grid > aside .notice{
    margin-top:14px!important;
    padding:12px!important;
  }
  .page-auto-reply .settings-grid > aside p{
    font-size:11px!important;
    line-height:1.55!important;
  }
  .page-auto-reply .form-panel form > div:last-child{
    justify-content:stretch!important;
    margin-top:16px!important;
  }
  .page-auto-reply .form-panel form > div:last-child .btn{
    width:100%!important;
    min-height:42px!important;
  }
}

@media (max-width:390px){
  .page-inbox .chat-header{

    padding-right:7px!important;
  }
  .page-inbox .chat-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;
    gap:4px!important;
  }
  .page-inbox .chat-actions select{
    height:35px!important;
    min-height:35px!important;
    font-size:10px!important;
    padding-left:6px!important;
    padding-right:21px!important;
  }
  .page-inbox .chat-more,
  .page-inbox .chat-more-toggle{
    width:36px!important;
    min-width:36px!important;
    height:35px!important;
  }
  .page-auto-reply .form-panel > form{
    padding:12px!important;
  }
  .page-auto-reply .settings-grid > aside{
    padding:13px!important;
  }
}

/* ========================================================================
   MOBILE KEYBOARD / REPLY COMPOSER CORRECTION
   Keeps the reply composer compact after opening the keyboard or replying
   to a message. Desktop and tablet layouts are intentionally untouched.
   ======================================================================== */
@media (max-width:720px){
  body:has(.inbox-layout.chat-open) .chat-panel,
  body:has(.inbox-layout.chat-open) .inbox-layout{
    height:var(--inbox-visual-height, 100dvh)!important;
    max-height:var(--inbox-visual-height, 100dvh)!important;
  }

  .page-inbox .reply-to-preview{

    border-radius:9px!important;
  }
  .page-inbox .reply-to-preview-copy{
    
    min-width:0!important;
    overflow:hidden!important;
  }
  .page-inbox .reply-to-preview-copy strong,
  .page-inbox .reply-to-preview-copy .reply-to-preview-name,
  .page-inbox .reply-to-preview-copy .reply-to-preview-body{
    line-height:1.18!important;
  }
  .page-inbox .reply-to-preview-copy .reply-to-preview-body{
    max-width:100%!important;
  }
  .page-inbox .reply-to-preview-close{

    flex:0 0 30px!important;
  }
  .page-inbox .rich-reply-box textarea,
  body:has(.inbox-layout.chat-open) .rich-reply-box textarea{
    min-height:46px!important;
    height:46px;
    max-height:110px!important;
    overflow-y:auto!important;
  }
}

@media (max-width:390px){

}

/* ================================================================
   Inbox final stable layout
   Keep the existing workspace sizing; only the active mobile chat
   becomes a fixed shell and the message history is the sole scroller.
   ================================================================ */
.page-inbox .chat-active{min-height:0;overflow:hidden;}

.page-inbox .chat-header,.page-inbox .service-window,.page-inbox .rich-reply-box{flex:0 0 auto;}

.page-inbox .message-audio audio{min-width:0;width:100%;max-width:280px;height:36px;}
.page-inbox .voice-cancel-button{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(24,39,66,.08);}

@media(max-width:720px){
  html:has(.inbox-layout.chat-open),body:has(.inbox-layout.chat-open){overflow:hidden!important;height:100%!important;overscroll-behavior:none!important;}
  body:has(.inbox-layout.chat-open) .page-content,
  body:has(.inbox-layout.chat-open) .main-area{overflow:hidden!important;}

  body:has(.inbox-layout.chat-open) .inbox-layout{
    position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;display:grid!important;grid-template-columns:1fr!important;
  }
  body:has(.inbox-layout.chat-open) .conversation-list{display:none!important;}
  body:has(.inbox-layout.chat-open) .chat-panel{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;border-radius:0!important;display:flex!important;flex-direction:column!important;
  }
  body:has(.inbox-layout.chat-open) .chat-active{
    display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;
  }

  /* Stable, non-collapsing header. */
  body:has(.inbox-layout.chat-open) .chat-header{
    box-sizing:border-box!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:48px 38px!important;height:92px!important;min-height:92px!important;max-height:92px!important;flex:0 0 92px!important;padding:5px 8px 6px!important;gap:3px!important;align-content:center!important;overflow:visible!important;
  }
  body:has(.inbox-layout.chat-open) .chat-person{grid-column:1!important;grid-row:1!important;width:100%!important;height:48px!important;min-height:48px!important;display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;}
  body:has(.inbox-layout.chat-open) .mobile-chat-back{width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;margin:0!important;border-radius:10px!important;}
  body:has(.inbox-layout.chat-open) .chat-person .avatar{width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;}
  body:has(.inbox-layout.chat-open) .chat-person-copy{min-width:0!important;overflow:hidden!important;}
  body:has(.inbox-layout.chat-open) .chat-person-copy strong{font-size:14px!important;line-height:1.2!important;}
  body:has(.inbox-layout.chat-open) .chat-person-copy small{font-size:11px!important;line-height:1.15!important;}

  body:has(.inbox-layout.chat-open) .chat-actions{grid-column:1!important;grid-row:2!important;width:100%!important;height:38px!important;min-height:38px!important;display:grid!important;align-items:center!important;gap:5px!important;margin:0!important;}
  body:has(.inbox-layout.chat-open) .chat-actions.has-agent-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px!important;}
  body:has(.inbox-layout.chat-open) .chat-actions.agent-view{grid-template-columns:minmax(0,1fr) 38px!important;}
  body:has(.inbox-layout.chat-open) .chat-actions select{box-sizing:border-box!important;width:100%!important;height:36px!important;min-height:36px!important;padding:5px 24px 5px 9px!important;border-radius:9px!important;font-size:12px!important;line-height:1.1!important;}
  body:has(.inbox-layout.chat-open) .chat-more,body:has(.inbox-layout.chat-open) .chat-more-toggle{width:38px!important;height:36px!important;min-width:38px!important;margin:0!important;border-radius:9px!important;}

  body:has(.inbox-layout.chat-open) .service-window{box-sizing:border-box!important;min-height:38px!important;height:auto!important;flex:0 0 auto!important;padding:5px 8px!important;font-size:10.5px!important;line-height:1.25!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:3px 6px!important;}
  body:has(.inbox-layout.chat-open) .service-window .window-source{min-height:23px!important;padding:2px 8px!important;border-radius:999px!important;}

  /* Messages own all remaining height. */
  body:has(.inbox-layout.chat-open) .messages{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;padding:9px 8px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;}
  body:has(.inbox-layout.chat-open) .messages-inner{min-height:100%!important;}
  body:has(.inbox-layout.chat-open) .message-row{margin-bottom:7px!important;}
  body:has(.inbox-layout.chat-open) .bubble{max-width:88%!important;padding:8px 10px!important;border-radius:10px!important;}
  body:has(.inbox-layout.chat-open) .bubble p{font-size:13px!important;line-height:1.38!important;}
  body:has(.inbox-layout.chat-open) .bubble span{font-size:9px!important;line-height:1.15!important;}
  body:has(.inbox-layout.chat-open) .message-audio{min-width:0!important;width:100%!important;max-width:100%!important;padding:2px 0 4px!important;gap:7px!important;}
  body:has(.inbox-layout.chat-open) .message-audio>i{width:30px!important;height:30px!important;flex:0 0 30px!important;font-size:13px!important;}
  body:has(.inbox-layout.chat-open) .message-audio audio{width:100%!important;min-width:0!important;max-width:230px!important;height:36px!important;}

  /* Composer stays compact. Reply preview is a small header above the input. */
  body:has(.inbox-layout.chat-open) .rich-reply-box{box-sizing:border-box!important;min-height:58px!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;gap:5px!important;align-items:flex-end!important;overflow:visible!important;}
  body:has(.inbox-layout.chat-open) .reply-compose-area{min-width:0!important;flex:1 1 auto!important;gap:3px!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box textarea{box-sizing:border-box!important;width:100%!important;height:42px!important;min-height:42px!important;max-height:110px!important;padding:9px 11px!important;border-radius:10px!important;font-size:16px!important;line-height:1.25!important;}
  body:has(.inbox-layout.chat-open) .reply-tool-button,body:has(.inbox-layout.chat-open) .voice-record-button,body:has(.inbox-layout.chat-open) .send-button{width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;}
  body:has(.inbox-layout.chat-open) .send-button{border-radius:11px!important;}
  body:has(.inbox-layout.chat-open) .reply-to-preview{height:36px!important;min-height:36px!important;margin:0 0 3px!important;padding:4px 7px!important;gap:5px!important;border-radius:8px!important;}
  body:has(.inbox-layout.chat-open) .reply-to-preview-copy{min-width:0!important;gap:0!important;line-height:1.05!important;}
  body:has(.inbox-layout.chat-open) .reply-to-preview-copy strong{font-size:10px!important;}
  body:has(.inbox-layout.chat-open) .reply-to-preview-copy .reply-to-preview-name{font-size:10px!important;}
  body:has(.inbox-layout.chat-open) .reply-to-preview-copy .reply-to-preview-body{display:none!important;}
  body:has(.inbox-layout.chat-open) .reply-to-preview-close{width:26px!important;height:26px!important;min-width:26px!important;flex:0 0 26px!important;}

  /* Recording mode: three deliberate zones, no squeezing. */
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .reply-tool-wrap,
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .reply-compose-area,
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .send-button{display:none!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .voice-cancel-button{display:inline-flex!important;width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .voice-record-button.recording{display:inline-flex!important;width:150px!important;height:42px!important;min-width:150px!important;flex:0 0 150px!important;border-radius:999px!important;background:#fff0f1!important;color:#c72d39!important;box-shadow:0 0 0 2px rgba(199,45,57,.10)!important;gap:8px!important;font-size:14px!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .voice-record-button.recording i{animation:inboxRecordingPulse 1.1s ease-in-out infinite!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .voice-record-button [data-voice-timer]{font-size:13px!important;font-weight:800!important;font-variant-numeric:tabular-nums!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording::after{content:"Tap to stop & send";font-size:10px;font-weight:700;color:#7b6570;white-space:nowrap;margin-left:auto;}
  @keyframes inboxRecordingPulse{0%,100%{opacity:1}50%{opacity:.5}}
}

@media(max-width:390px){
  body:has(.inbox-layout.chat-open) .chat-header{height:90px!important;min-height:90px!important;max-height:90px!important;flex-basis:90px!important;}
  body:has(.inbox-layout.chat-open) .mobile-chat-back{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}
  body:has(.inbox-layout.chat-open) .chat-person .avatar{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important;}
  body:has(.inbox-layout.chat-open) .chat-person-copy strong{font-size:13.5px!important;}
  body:has(.inbox-layout.chat-open) .chat-actions{gap:4px!important;}
  body:has(.inbox-layout.chat-open) .chat-actions select{height:35px!important;min-height:35px!important;font-size:11px!important;padding-left:8px!important;padding-right:20px!important;}
  body:has(.inbox-layout.chat-open) .chat-more,body:has(.inbox-layout.chat-open) .chat-more-toggle{width:36px!important;min-width:36px!important;height:35px!important;}
  body:has(.inbox-layout.chat-open) .service-window{font-size:10px!important;padding:4px 6px!important;}
  body:has(.inbox-layout.chat-open) .messages{padding:8px 6px!important;}
  body:has(.inbox-layout.chat-open) .bubble{max-width:91%!important;padding:7px 9px!important;}
  body:has(.inbox-layout.chat-open) .bubble p{font-size:12.5px!important;}
  body:has(.inbox-layout.chat-open) .reply-tool-button,body:has(.inbox-layout.chat-open) .voice-record-button,body:has(.inbox-layout.chat-open) .send-button{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}
  body:has(.inbox-layout.chat-open) .voice-cancel-button{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording .voice-record-button.recording{width:132px!important;min-width:132px!important;flex-basis:132px!important;}
  body:has(.inbox-layout.chat-open) .rich-reply-box.is-recording::after{font-size:9px!important;}
}

/* Inbox voice/chat final polish: keep the stable layout and make media behave like a modern messaging app. */

.page-inbox .message-row.inbound .bubble{order:1!important;}
.page-inbox .message-row.inbound .message-more-button{order:2!important;}
.page-inbox .message-row.outbound .bubble{order:1!important;}
.page-inbox .message-row.outbound .message-more-button{order:2!important;}

.page-inbox .message-audio{

  gap:9px!important;
  
}
.page-inbox .message-audio-play{

  background:#17b866!important;
  color:#fff!important;

  box-shadow:0 2px 6px rgba(15,150,80,.18)!important;
}

.page-inbox .message-audio-play i{margin-left:1px!important;}
.page-inbox .message-audio-play.is-playing i{margin-left:0!important;}
.page-inbox .message-audio-track-wrap{flex:1 1 auto!important;}
.page-inbox .message-audio-progress{border:0!important;box-shadow:none!important;}

.page-inbox .message-audio-mic{font-size:11px!important;}

.page-inbox .message-audio.audio-unavailable{opacity:.75!important;}
.page-inbox .message-audio.audio-unavailable::after{content:"Audio unavailable";font-size:9px;color:#9b4b4b;margin-left:2px;}

/* Keep voice bubbles large enough to retain an obvious play button. */

/* Cancel means cancel: use a neutral close icon rather than a delete/trash action. */
.page-inbox .voice-cancel-button{color:#6d7890!important;background:#fff!important;border:1px solid #e1e7ed!important;}
.page-inbox .voice-cancel-button:hover{color:#c72d39!important;background:#fff5f5!important;}

@media(max-width:720px){
  
  .page-inbox .message-audio{min-width:0!important;gap:8px!important;}
  .page-inbox .message-audio-play{flex-basis:36px!important;}
  
  .page-inbox .message-audio-mic{flex-basis:26px!important;}
  
}

/* ========================================================================
   INBOX CANONICAL UI — single final responsive layer
   Keep the stable inbox behavior and use one predictable sizing system.
   ======================================================================== */

/* Customer = left, our/agent messages = right. */

/* Minimal overflow action: plain dots outside the bubble, no circle and no layout squeeze. */

.page-inbox .message-more-button{

  cursor:pointer!important;
  touch-action:manipulation!important;
  
}
.page-inbox .message-more-button:hover,
.page-inbox .message-more-button[aria-expanded="true"]{

  opacity:1!important;
}

@media(max-width:480px){

}

/* Compact, anchored Reply popover. */
.page-inbox .message-action-menu{
  position:fixed!important;
  z-index:10050!important;
  width:auto!important;

  background:#fff!important;
  border:1px solid #dfe6ee!important;
  
  box-shadow:0 8px 24px rgba(24,43,64,.16),0 2px 5px rgba(24,43,64,.07)!important;
}
.page-inbox .message-action-menu button{
  width:100%!important;
  
  display:flex!important;
  align-items:center!important;

  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#26354a!important;
  
  line-height:16px!important;
  font-weight:650!important;
  text-align:left!important;
}
.page-inbox .message-action-menu button:hover,
.page-inbox .message-action-menu button:focus-visible{background:#eef8f2!important;color:#0b9850!important;outline:none!important;}
.page-inbox .message-action-menu i{
  flex:0 0 22px!important;
  display:grid!important;place-items:center!important;
  border-radius:50%!important;
  
}
.page-inbox .message-action-menu button span{white-space:nowrap!important;min-width:0!important;}

/* Voice note: one stable three-column geometry at every size. */

.page-inbox .message-audio-play{

  cursor:pointer!important;
}
.page-inbox .message-audio-play i{display:block!important;margin:0!important;}

/* Header: enough breathing room for the arrow, without wasting chat space. */
@media(max-width:720px){
  
  .page-inbox .mobile-chat-back{margin-top:1px!important;}

  .page-inbox .service-window{

    justify-content:center!important;
    flex-wrap:wrap!important;
    
    text-align:center!important;
    overflow:hidden!important;
  }
  .page-inbox .service-window .window-countdown{white-space:nowrap!important;}
  .page-inbox .service-window .window-source{white-space:nowrap!important;}
  .page-inbox .rich-reply-box{min-width:0!important;}
  .page-inbox .reply-compose-area{min-width:0!important;}
  .page-inbox .window-countdown{font-size:9.5px!important;}
  .page-inbox .window-source{font-size:9px!important;padding:2px 6px!important;}

  .page-inbox .message-action-menu{min-width:104px!important;max-width:132px!important;}
}

@media(max-width:390px){
  
  .page-inbox .service-window{padding-inline:5px!important;}
  .page-inbox .window-countdown{font-size:9px!important;}
  .page-inbox .message-row .bubble{padding-right:29px!important;}
  
  .page-inbox .message-audio{min-height:54px!important;}

}

/* Recording cancel/delete control exists only while recording. */

/* Voice recording discard: visible only in recording mode. */
.page-inbox .rich-reply-box .voice-cancel-button{
  color:#d13b45!important;
  background:#fff!important;
  border:1px solid #ead0d3!important;
}
.page-inbox .rich-reply-box .voice-cancel-button:hover{
  background:#fff2f3!important;
  border-color:#e4aeb3!important;
}

/* FINAL INBOX UI OVERRIDE — intentionally small and self-contained. */

.page-inbox .chat-person-copy small{margin-top:2px!important;}
.page-inbox .chat-actions{display:grid!important;grid-auto-flow:column!important;grid-template-columns:minmax(125px,1fr) minmax(100px,125px) 40px!important;gap:7px!important;align-items:center!important;min-width:0!important;margin:0!important;}

.page-inbox .chat-more,.page-inbox .chat-more-toggle{width:40px!important;height:38px!important;}

/* The history is the only scrolling surface. */
.page-inbox .messages{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;overflow-anchor:none!important;}

/* Media stability: keep image boxes inside the bubble and avoid layout
   overflow while the image-loading scroll anchor settles. The actual image
   ratio remains untouched; no artificial crop/aspect ratio is imposed. */
.page-inbox .message-image-link{display:block;max-width:100%;overflow:hidden;}
.page-inbox .message-image{display:block;width:min(320px,100%);height:auto;max-height:330px;object-fit:contain;background:#e4e9e6;}
@media(max-width:650px){.page-inbox .message-image{width:100%;max-height:280px;}}

.page-inbox .message-more-button:hover,.page-inbox .message-more-button[aria-expanded="true"]{background:rgba(255,255,255,.8)!important;color:#455466!important;opacity:1!important;}

/* Voice notes are wide enough to feel like a real chat voice message. */
.page-inbox .message-row:has(.message-audio) .bubble{padding-right:31px!important;}

.page-inbox .message-audio-play{visibility:visible!important;opacity:1!important;}
.page-inbox .message-audio-play i{font-size:15px!important;}

/* Compact status strip; never force its contents into a single overflowing line. */

/* Composer: balanced controls, compact reply context. */
.page-inbox .rich-reply-box{min-height:58px!important;padding:8px 10px!important;gap:7px!important;align-items:flex-end!important;}

.page-inbox .rich-reply-box textarea{min-height:42px!important;max-height:110px!important;font-size:14px!important;padding:10px 12px!important;}

.page-inbox .reply-to-preview-close{flex-basis:26px!important;}
.page-inbox .reply-tool-button,.page-inbox .voice-record-button,.page-inbox .send-button,.page-inbox .voice-cancel-button{width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;}
.page-inbox .voice-cancel-button[hidden]{display:none!important;}

/* Compact, attached action popup. */
.page-inbox .message-action-menu{min-width:100px!important;max-width:128px!important;padding:3px!important;border-radius:9px!important;}
.page-inbox .message-action-menu button{min-height:32px!important;padding:5px 7px!important;font-size:12px!important;gap:7px!important;}
.page-inbox .message-action-menu button span::after{display:none!important;}
.page-inbox .message-action-menu i{width:21px!important;height:21px!important;flex-basis:21px!important;font-size:10px!important;}

@media(max-width:1100px){
  .page-inbox .chat-header{grid-template-columns:1fr!important;grid-template-rows:auto auto!important;min-height:100px!important;padding:9px 11px!important;gap:7px!important;}
  .page-inbox .chat-person{width:100%!important;}
  .page-inbox .chat-actions{width:100%!important;grid-column:1!important;grid-template-columns:minmax(0,1fr) minmax(96px,120px) 40px!important;}
}

@media(max-width:720px){
  .page-inbox .chat-header{gap:6px!important;}
  
  .page-inbox .chat-person .avatar{width:40px!important;height:40px!important;flex-basis:40px!important;}
  .page-inbox .chat-person-copy strong{font-size:13px!important;}
  .page-inbox .chat-person-copy small{font-size:10px!important;}
  .page-inbox .chat-actions{grid-template-columns:minmax(0,1fr) minmax(88px,108px) 38px!important;gap:5px!important;}
  .page-inbox .chat-actions select{height:36px!important;min-height:36px!important;font-size:11px!important;padding:5px 24px 5px 8px!important;}
  .page-inbox .chat-more,.page-inbox .chat-more-toggle{width:38px!important;height:36px!important;}

  .page-inbox .message-row .bubble{padding:8px 30px 7px 9px!important;}

  .page-inbox .rich-reply-box{padding:7px 7px!important;gap:5px!important;}
  .page-inbox .reply-tool-button,.page-inbox .voice-record-button,.page-inbox .send-button,.page-inbox .voice-cancel-button{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}
  .page-inbox .rich-reply-box textarea{font-size:16px!important;min-height:40px!important;padding:8px 10px!important;}
}

@media(max-width:390px){
  
  .page-inbox .service-window{font-size:9px!important;}

  .page-inbox .message-audio-times{font-size:8.5px!important;}
}

/* FINAL MICRO-POLISH: mobile top inset + vertically centered voice progress line. */
@media (max-width:720px){

}

@media (max-width:390px){
  .page-inbox .chat-header{

    padding-bottom:8px!important;
  }
}

/* Keep the long voice progress line on the same visual center as the play button. */

.page-inbox .message-audio-progress{
  grid-row:2!important;
  align-self:center!important;

}
.page-inbox .message-audio-times{
  grid-row:3!important;
  align-self:end!important;

}

/* ========================================================================
   INBOX FINAL CLEAN MOBILE VOICE/UI OVERRIDE
   One final cascade layer for the chat viewport.  It intentionally avoids
   changing the working JS behavior and only normalizes the visual geometry.
   ======================================================================== */
.page-inbox .message-row{
  display:flex!important;
  width:100%!important;
  align-items:flex-start!important;
  margin:0 0 10px!important;
  gap:0!important;
}
.page-inbox .message-row.inbound{justify-content:flex-start!important;}
.page-inbox .message-row.outbound{justify-content:flex-end!important;}
.page-inbox .message-row .bubble{

  max-width:min(76%,620px)!important;
  padding:9px 30px 8px 10px!important;
  border-radius:11px!important;
}

.page-inbox .message-quick-menu{display:none!important;}

/* Compact, centered messaging-style voice bubble. */

.page-inbox .message-audio-play{

  padding:0!important;

  border:0!important;
  border-radius:50%!important;
}

.page-inbox .message-audio-mic{

  padding:0!important;

  border-radius:50%!important;
}
.page-inbox .message-audio-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Keep the conversation header balanced; add only a small top inset. */
.page-inbox .chat-header{

  gap:7px 10px!important;
}

@media(max-width:720px){
  .page-inbox .chat-header{
    
    height:94px!important;
    padding:12px 9px 8px!important;
  }

}

@media(max-width:430px){
  .page-inbox .chat-header{
    min-height:94px!important;
    height:94px!important;
    padding:13px 8px 8px!important;
  }
  .page-inbox .service-window{
    min-height:30px!important;
    
    font-size:9px!important;
  }
  .page-inbox .message-row:has(.message-audio) .bubble{
    width:min(300px,82%)!important;
    max-width:min(300px,82%)!important;
  }
  .page-inbox .message-audio{
    grid-template-columns:38px minmax(0,1fr) 26px!important;
    column-gap:7px!important;
    min-height:50px!important;
    height:50px!important;
  }
  .page-inbox .message-audio-play{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  .page-inbox .message-audio-mic{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
  }
  .page-inbox .message-audio-progress{top:14px!important;}
  .page-inbox .message-audio-times{font-size:8.5px!important;}
}

/* ================================================================
   TARGETED VOICE NOTE ALIGNMENT FIX
   Keep the working Inbox layout. Only correct the audio geometry.
   ================================================================ */

.page-inbox .message-audio-progress::-webkit-slider-runnable-track{
  width:100%!important;
  
  border-radius:999px!important;
  
}
.page-inbox .message-audio-progress::-webkit-slider-thumb{

  margin-top:-6.5px!important;
  
  border-radius:50%!important;
  
  box-shadow:none!important;
}
.page-inbox .message-audio-progress::-moz-range-track{
  width:100%!important;

  border-radius:999px!important;
  
}
.page-inbox .message-audio-progress::-moz-range-progress{
  height:5px!important;
  border-radius:999px!important;
  background:#17b866!important;
}
.page-inbox .message-audio-progress::-moz-range-thumb{

  border-radius:50%!important;
  
}

@media(max-width:720px){

}
@media(max-width:390px){

}

/* ================================================================
   FINAL VOICE PLAYER GEOMETRY
   One controlled visual track; native range is interaction-only.
   ================================================================ */
.page-inbox .message-row:has(.message-audio) .bubble{
  width:min(300px,calc(100vw - 42px))!important;
  max-width:min(300px,calc(100vw - 42px))!important;
}
.page-inbox .message-audio{

  height:52px!important;

}
.page-inbox .message-audio-play{

  display:grid!important;place-items:center!important;
}

.page-inbox .message-audio-track{

  pointer-events:none!important;
}

.page-inbox .message-audio-progress{

  -webkit-appearance:none!important;appearance:none!important;
  background:transparent!important;
}
.page-inbox .message-audio-progress::-webkit-slider-runnable-track{background:transparent!important;height:24px!important;}
.page-inbox .message-audio-progress::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:24px!important;height:24px!important;margin:0!important;background:transparent!important;border:0!important;}
.page-inbox .message-audio-progress::-moz-range-track{background:transparent!important;height:24px!important;border:0!important;}
.page-inbox .message-audio-progress::-moz-range-thumb{width:24px!important;height:24px!important;background:transparent!important;border:0!important;}
.page-inbox .message-audio-times{

  font-variant-numeric:tabular-nums!important;color:#68747b!important;
}
.page-inbox .message-audio-mic{
  width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;
  display:grid!important;place-items:center!important;
}
@media(max-width:390px){

}

/* ================================================================
   FINAL CHAT BUBBLE ALIGNMENT — MESSAGING-APP MOBILE BALANCE
   Customer/inbound stays left; agent/outbound stays right.  Keep a
   small, equal edge inset so bubbles never float in the middle or
   leave a large empty strip on either side.
   ================================================================ */
@media (max-width:720px){
  .page-inbox .messages{
    
    width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  .page-inbox .messages-inner{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .page-inbox .message-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex:0 0 auto!important;
    margin:0 0 8px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .page-inbox .message-row .bubble{
    width:auto!important;
    
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Voice bubbles follow exactly the same left/right rule and stay compact. */
  .page-inbox .message-row.inbound:has(.message-audio) .bubble{
    width:min(300px,86%)!important;
    max-width:min(300px,86%)!important;
    margin-left:0!important;
    margin-right:auto!important;
  }
  .page-inbox .message-row.outbound:has(.message-audio) .bubble{
    width:min(300px,86%)!important;
    max-width:min(300px,86%)!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
}

@media (max-width:430px){
  .page-inbox .message-row .bubble{max-width:88%!important;}
  .page-inbox .message-row.inbound:has(.message-audio) .bubble,
  .page-inbox .message-row.outbound:has(.message-audio) .bubble{
    width:min(292px,88%)!important;
    max-width:min(292px,88%)!important;
  }
}

@media (max-width:360px){
  .page-inbox .messages{padding-left:7px!important;padding-right:7px!important;}
  
  .page-inbox .message-row.inbound:has(.message-audio) .bubble,
  .page-inbox .message-row.outbound:has(.message-audio) .bubble{
    width:min(280px,90%)!important;
    max-width:min(280px,90%)!important;
  }
}

/* ================================================================
   FINAL INBOX MICRO-FIX
   Do not alter structure/behavior: only correct the requested spacing,
   alignment, and compact voice-player geometry.
   ================================================================ */
@media (max-width:720px){
  /* Small, balanced breathing room above the back button. */
  .page-inbox .chat-header{
    min-height:104px!important;
    
    padding-bottom:8px!important;
    box-sizing:border-box!important;
  }
  .page-inbox .chat-person .mobile-chat-back{
    
    margin-bottom:2px!important;
    
  }

  /* Keep the service strip compact. */
  .page-inbox .service-window{

    line-height:1.15!important;

  }

  /* No artificial blank area between the last message and composer. */
  .page-inbox .messages{
    padding:6px 7px 0!important;
  }
  .page-inbox .message-row{margin-bottom:7px!important;}

  /* Exact left/right chat alignment with a small equal edge inset. */
  .page-inbox .message-row.inbound{justify-content:flex-start!important;}
  .page-inbox .message-row.outbound{justify-content:flex-end!important;}
  .page-inbox .message-row.inbound .bubble{margin-left:0!important;margin-right:auto!important;}
  .page-inbox .message-row.outbound .bubble{margin-left:auto!important;margin-right:0!important;}
  .page-inbox .message-row .bubble{max-width:88%!important;}

  /* Voice note: one centered track. Green fill and dark track share exactly
     the same top/height; the play button is slightly smaller. */
  .page-inbox .message-row:has(.message-audio) .bubble{
    width:min(292px,88%)!important;
    
    padding:8px 28px 7px 9px!important;
  }
  .page-inbox .message-audio{
    
    height:48px!important;

    align-items:center!important;
    padding:0!important;
    margin:1px 0 0!important;
  }
  .page-inbox .message-audio-play{

    flex:0 0 38px!important;
    align-self:center!important;
  }
  .page-inbox .message-audio-play i{font-size:14px!important;}
  .page-inbox .message-audio-track-wrap{
    
    width:100%!important;
    
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }

  .page-inbox .message-audio-progress{

    cursor:pointer!important;
  }
  .page-inbox .message-audio-times{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:12px!important;
    margin:0!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    font-size:8.5px!important;
    line-height:1!important;
  }
  .page-inbox .message-audio-mic{

    flex:0 0 26px!important;
    align-self:center!important;
  }
}
@media (max-width:390px){
  .page-inbox .chat-header{min-height:102px!important;padding-top:17px!important;}
  .page-inbox .message-row:has(.message-audio) .bubble{
    width:min(282px,90%)!important;
    max-width:min(282px,90%)!important;
  }
  
  .page-inbox .message-audio-play{flex-basis:36px!important;}
  .page-inbox .message-audio-mic{flex-basis:25px!important;}
}

/* ================================================================
   FINAL USER-SPECIFIC MICRO FIX
   Keep the dark track and green fill on the exact same center line.
   Remove the extra top padding above the mobile back button.
   ================================================================ */
@media (max-width:720px){
  .page-inbox .chat-header{
    padding-top:0!important;
  }
  .page-inbox .chat-person .mobile-chat-back{
    margin-top:0!important;
  }

  .page-inbox .message-audio-track-wrap{
    position:relative!important;
    
  }
  .page-inbox .message-audio-track{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:50%!important;
    width:100%!important;
    height:5px!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    border-radius:999px!important;
    background:#555!important;
    overflow:visible!important;
  }
  .page-inbox .message-audio-track-fill{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:0!important;
    height:100%!important;
    margin:0!important;
    transform:none!important;
    border-radius:inherit!important;
    background:#16b866!important;
  }
  .page-inbox .message-audio-track-thumb{
    position:absolute!important;
    top:50%!important;
    left:0!important;
    width:16px!important;
    height:16px!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    background:#16b866!important;
  }
  .page-inbox .message-audio-progress{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    
    opacity:0!important;
    z-index:3!important;
    margin:0!important;
    padding:0!important;
  }
}

/* FINAL VOICE PLAYER FIX: keep play button and progress line separated on phones,
   and animate the visible green fill independently of the hidden range input. */

@media(max-width:720px){
  
}
@media(max-width:390px){
  
}

/* ================================================================
   FINAL VOICE PLAYER CORRECTION
   - Play button and track have a clear gap on narrow phones.
   - Dark track + green fill share the exact same center line.
   - Green fill follows the real audio currentTime via --audio-progress.
   - Thumb follows the same percentage.
   ================================================================ */

.page-inbox .message-audio-play{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  flex:0 0 42px!important;
}

.page-inbox .message-audio-progress{
  
  inset:0!important;

}

@media(max-width:720px){

}
@media(max-width:390px){

}

/* FINAL VOICE PLAYER GEOMETRY + LIVE PROGRESS FIX */
.page-inbox .message-audio-track-wrap{
  position:relative!important;
  height:42px!important;

}
.page-inbox .message-audio-track{
  position:absolute!important;
  left:8px!important;
  right:0!important;
  top:calc(50% - 2.5px)!important;
  width:auto!important;
  height:5px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  background:#555!important;
  border-radius:999px!important;
  overflow:visible!important;
}
.page-inbox .message-audio-track-fill{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:calc(var(--audio-progress, 0) * 100%)!important;
  height:5px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  transform-origin:left center!important;
  background:#16b866!important;
  border-radius:999px!important;
}
.page-inbox .message-audio-track-thumb{
  position:absolute!important;
  top:50%!important;
  left:calc(var(--audio-progress, 0) * 100%)!important;
  width:16px!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  background:#16b866!important;
  border-radius:50%!important;
  z-index:2!important;
}
.page-inbox .message-audio-progress{
  position:absolute!important;
  left:8px!important;
  right:0!important;
  top:0!important;
  bottom:0!important;

  opacity:0!important;
  z-index:3!important;
  
  padding:0!important;
  cursor:pointer!important;
}
.page-inbox .message-audio-times{
  position:absolute!important;
  left:8px!important;
  right:0!important;
  bottom:0!important;
  height:12px!important;

  font-size:9px!important;
  
}
@media(max-width:720px){
  .page-inbox .message-audio-track-wrap{height:40px!important;}
  .page-inbox .message-audio-progress{height:40px!important;}
}
@media(max-width:390px){
  .page-inbox .message-audio-track-wrap{height:38px!important;}
  .page-inbox .message-audio-progress{height:38px!important;}
}

/* FINAL MICRO FIX: align the mobile Inbox back button with the main
   topbar hamburger button.  Horizontal inset, size and vertical rhythm
   intentionally match the hamburger without touching chat behavior. */
@media (max-width:720px){
  .page-inbox .chat-person .mobile-chat-back{

    border-radius:11px!important;
  }
  
}

/* FINAL: make the mobile Inbox back control use the same anchor as the
   main topbar hamburger. CSS-only; no chat/navigation behavior changes. */
@media (max-width:720px){
  .page-inbox .chat-header{
    padding-left:7px!important;
  }
  .page-inbox .chat-person{
    gap:8px!important;
  }
  .page-inbox .chat-person .mobile-chat-back{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex:0 0 44px!important;
    margin:0!important;
    padding:0!important;
    align-self:center!important;
    transform:none!important;
  }
}
@media (max-width:390px){
  .page-inbox .chat-header{
    padding-left:7px!important;
  }
  .page-inbox .chat-person .mobile-chat-back{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex-basis:44px!important;
  }
}

/* FINAL PHONE-ONLY BACK ARROW POSITION
   Position the back control inside the chat identity row itself so the
   7px top inset is real layout positioning, not a transform/margin hack.
   The reserved left space keeps the avatar/name in their existing positions. */
@media (max-width:480px){
  .page-inbox .chat-person{
    position:relative!important;
    padding-left:52px!important;
    gap:8px!important;
    
  }
  .page-inbox .chat-person .mobile-chat-back{
    position:absolute!important;

    flex:0 0 44px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
}

/* FINAL PHONE-ONLY BACK ARROW BALANCE
   Keep the arrow exactly 44x44 like the hamburger, with an equal 7px
   breathing space above and below.  The parent row gets the required
   height so nothing collapses or changes outside the phone layout. */
@media (max-width:480px){
  .page-inbox .chat-person{

    max-height:58px!important;
    
  }
  .page-inbox .chat-person .mobile-chat-back{
    top:7px!important;
    bottom:7px!important;
    left:0!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }
}

/* FINAL PHONE-ONLY BACK BUTTON RHYTHM
   Real 7px inset above and below the 44px back button.
   The chat header's first row is explicitly 44px tall, with 7px
   header padding on both sides, so the control cannot collapse upward. */
@media (max-width:480px){
  body:has(.inbox-layout.chat-open) .chat-header{
    padding-top:7px!important;
    padding-bottom:7px!important;
    box-sizing:border-box!important;
  }
  body:has(.inbox-layout.chat-open) .chat-person{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    box-sizing:border-box!important;
    align-items:center!important;
    position:relative!important;
    padding-left:0!important;
  }
  body:has(.inbox-layout.chat-open) .chat-person .mobile-chat-back{
    position:static!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
    flex:0 0 44px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
}

/* FINAL PHONE CHAT HEADER HEIGHT
   Give the contact row a real 58px height: 44px back button + 7px top
   + 7px bottom. The second row stays separate so nothing collapses. */
@media (max-width:480px){
  .page-inbox .chat-header{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:58px 40px!important;
    height:104px!important;
    min-height:104px!important;
    max-height:104px!important;
    padding:0 8px!important;
    gap:6px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .page-inbox .chat-person{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  .page-inbox .mobile-chat-back{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex:0 0 44px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  .page-inbox .chat-person .avatar{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    flex:0 0 40px!important;
  }
  .page-inbox .chat-actions{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    align-self:center!important;
    box-sizing:border-box!important;
  }
}

/* FINAL CLEAN PHONE CHAT-HEADER SPACING
   One authoritative mobile rule: 7px top + 44px button + 7px bottom.
   The contact row is 58px tall; the controls row stays separate.
   Phone only. Desktop/tablet are intentionally untouched. */
@media screen and (max-width:480px){
  body:has(.inbox-layout.chat-open) .chat-header{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:58px 38px!important;
    height:99px!important;
    min-height:99px!important;
    max-height:99px!important;
    flex:0 0 99px!important;
    padding:0!important;
    gap:3px!important;
    align-content:start!important;
    overflow:visible!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    gap:9px!important;
    margin:0!important;
    padding:0!important;
  }

  body:has(.inbox-layout.chat-open) .mobile-chat-back{
    display:inline-grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
    flex:0 0 44px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:static!important;
    align-self:center!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person .avatar{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    flex:0 0 40px!important;
  }

  body:has(.inbox-layout.chat-open) .chat-actions{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
  }
}

/* ================================================================
   PREMIUM MOBILE INBOX CONTACT HEADER
   Final layout authority for the phone chat header.
   Matches the main mobile website header height (68px).
   Contact identity and controls are intentionally separate rows.
   ================================================================ */
@media screen and (max-width:720px){
  body:has(.inbox-layout.chat-open) .chat-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:68px 36px!important;
    width:100%!important;
    height:104px!important;
    min-height:104px!important;
    max-height:104px!important;
    flex:0 0 104px!important;
    padding:0!important;
    margin:0!important;
    gap:0!important;
    align-content:start!important;
    align-items:stretch!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border-bottom:1px solid #e4e9f1!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    flex:none!important;
  }

  body:has(.inbox-layout.chat-open) .mobile-chat-back{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
    flex:0 0 40px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    align-self:center!important;
    transform:none!important;
    border:0!important;
    border-radius:11px!important;
    background:#f5f7f9!important;
    color:#20252b!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }

  body:has(.inbox-layout.chat-open) .mobile-chat-back i{
    font-size:16px!important;
    line-height:1!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person .avatar{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
    flex:0 0 36px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person-copy{
    min-width:0!important;
    height:40px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:1px!important;
    margin:0!important;
    padding:0!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person-copy strong{
    max-width:180px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:14px!important;
    line-height:18px!important;
    font-weight:650!important;
    margin:0!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person-copy small{
    max-width:180px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:14px!important;
    color:#8a929b!important;
    margin:0!important;
  }

  body:has(.inbox-layout.chat-open) .chat-actions{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    display:grid!important;
    align-items:center!important;
    gap:6px!important;
    overflow:visible!important;
  }

  body:has(.inbox-layout.chat-open) .chat-actions.has-agent-select{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;
  }

  body:has(.inbox-layout.chat-open) .chat-actions.agent-view{
    grid-template-columns:minmax(0,1fr) 36px!important;
  }

  body:has(.inbox-layout.chat-open) .chat-actions select{
    width:100%!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    min-width:0!important;
    padding:4px 24px 4px 9px!important;
    border-radius:8px!important;
    font-size:11px!important;
    box-sizing:border-box!important;
  }

  body:has(.inbox-layout.chat-open) .chat-more,
  body:has(.inbox-layout.chat-open) .chat-more-toggle{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }
}

/* Small phones keep the exact same header geometry; only text width changes. */
@media screen and (max-width:390px){
  body:has(.inbox-layout.chat-open) .chat-person{
    padding-left:8px!important;
    padding-right:8px!important;
    gap:7px!important;
  }

  body:has(.inbox-layout.chat-open) .chat-person-copy strong,
  body:has(.inbox-layout.chat-open) .chat-person-copy small{
    max-width:145px!important;
  }
}

/* FINAL CLEAN SERVICE WINDOW — single aligned row */

.page-inbox .service-window-title{
  display:inline-block!important;

}
.page-inbox .service-window-status{
  display:inline-block!important;

}

.page-inbox .service-window-label{
  margin:0!important;
  font-size:9px!important;font-weight:600!important;
  text-transform:none!important;letter-spacing:0!important;
  opacity:.72!important;
}

@media(max-width:720px){
  .page-inbox .service-window{
    
    font-size:9px!important;
  }

  .page-inbox .service-window-label{display:none!important;}

}
@media(max-width:430px){
  
  .page-inbox .service-window-content{gap:4px!important;}
  
  .page-inbox .service-window-status{font-size:8.5px!important;}
  .page-inbox .service-window .window-source{padding:3px 5px!important;font-size:7.5px!important;}
}
@media(max-width:370px){
  .page-inbox .service-window-status{display:none!important;}
  .page-inbox .service-window .window-source{display:none!important;}
}

/* ================================================================
   CLEAN COMPACT SERVICE BAR — final alignment
   ================================================================ */
.page-inbox .service-window{

  flex-wrap:nowrap!important;

  white-space:nowrap!important;

}

.page-inbox .service-window-content{

  white-space:nowrap!important;
}
.page-inbox .service-window-title{

  padding:0!important;

}
.page-inbox .service-window-status{

  padding:0!important;
  border:0!important;

  line-height:1!important;
  
}
.page-inbox .service-window-status::before{
  content:"•";
  
  margin-right:7px;
  opacity:.55;
}
.page-inbox .service-window-time{

  margin:0 0 0 auto!important;
  padding:0!important;
  
}

.page-inbox .service-window .window-countdown{

  margin:0!important;

}

@media(max-width:720px){

  .page-inbox .service-window-status::before{margin-right:6px;}
  
}

@media(max-width:360px){
  .page-inbox .service-window{padding:0 7px!important;gap:6px!important;}
  .page-inbox .service-window-content{gap:5px!important;}
  .page-inbox .service-window-title{font-size:8.5px!important;}
  .page-inbox .service-window-status{font-size:7.5px!important;}
  .page-inbox .service-window .window-countdown{font-size:8.5px!important;}
}

/* SUBTLE SERVICE BAR POLISH */

@media(max-width:720px){
  
}

/* Mobile: keep the three-dot conversation menu fixed and out of the
   shrinking flex/grid content so it never collapses or wraps. */
@media (max-width: 720px){
  .chat-actions{
    position:relative!important;
    min-width:0!important;
    padding-right:46px!important;
    overflow:visible!important;
  }
  .chat-more,
  .chat-more-toggle{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
  /* Keep Assigned + Status completely unchanged. Move ONLY the 3-dot
     button left so it sits 3px after the Status control. */
  .chat-more{
    position:absolute!important;
    top:50%!important;
    right:16px!important;
    transform:translateY(-50%)!important;
    margin:0!important;
  }
  .chat-more-toggle{
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    white-space:nowrap!important;
  }
}

@media (max-width:390px){
  .chat-actions{padding-right:34px!important;}
  .chat-more,
  .chat-more-toggle{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
  }
}

/* FINAL MOBILE MESSAGE MENU FIX — keep the three-dot action anchored and never collapsed */

.page-inbox .message-row .message-more-button i{

  min-width:0!important;

}
@media (max-width:480px){
  
  .page-inbox .message-row .message-more-button{

    flex-basis:27px!important;
  }
}
@media (max-width:360px){
  
  .page-inbox .message-row .message-more-button{

    flex-basis:25px!important;
  }
}

/* FINAL: message action must never collapse on small screens. */

.page-inbox .message-row .message-more-button{
  
  inset:auto 6px auto auto!important;

  overflow:hidden!important;

  box-sizing:border-box!important;
  
}
.page-inbox .message-row .message-more-button i{

  flex:none!important;
}
.page-inbox .message-row .bubble > p,
.page-inbox .message-row .bubble > .customer-quick-reply-text,
.page-inbox .message-row .bubble > .message-location,
.page-inbox .message-row .bubble > .message-attachment,
.page-inbox .message-row .bubble > .message-video,
.page-inbox .message-row .bubble > .message-audio{
  max-width:100%!important;
  min-width:0!important;
}
@media(max-width:480px){
  
  .page-inbox .message-row .message-more-button{
    max-width:28px!important;
    max-height:28px!important;
    
  }
}
@media(max-width:360px){

}

/* CLEAN MESSAGE ACTION — final mobile alignment */
.page-inbox .message-row{
  position:relative!important;
  min-width:0!important;
}
.page-inbox .message-row .bubble{
  position:relative!important;
  min-width:0!important;
  padding-right:36px!important;
  overflow:hidden!important;
}
.page-inbox .message-row .message-more-button{
  position:absolute!important;

  max-width:24px!important;

  max-height:24px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  z-index:5!important;

  color:#64748b!important;
  opacity:1!important;
  
  transform:none!important;
  white-space:nowrap!important;
}

.page-inbox .message-row .message-more-button i{
  width:auto!important;
  height:auto!important;
  font-size:10px!important;
  line-height:1!important;
  display:block!important;
}
.page-inbox .message-row .bubble > p,
.page-inbox .message-row .bubble > .customer-quick-reply-text{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
@media (max-width:480px){
  .page-inbox .message-row .bubble{padding-right:34px!important;max-width:92%!important;}
  
}
@media (max-width:360px){
  .page-inbox .message-row .bubble{padding-right:32px!important;max-width:94%!important;}
  .page-inbox .message-row .message-more-button{width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;max-height:22px!important;top:5px!important;right:5px!important;}
}

/* Compact floating message action: intentionally sits outside the bubble
   so it never consumes message width on phones. */
.page-inbox .message-row{position:relative;overflow:visible;}
.page-inbox .message-row .bubble{position:relative;overflow:visible;}
.page-inbox .message-more-button{
  position:absolute!important;
  top:7px!important;
  right:-10px!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  padding:0!important;
  margin:0!important;
  flex:none!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(213,222,230,.95)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.96)!important;
  color:#687585!important;
  box-shadow:0 2px 7px rgba(26,45,65,.10)!important;
  z-index:8!important;
  opacity:1!important;
}
.page-inbox .message-more-button i{font-size:10px!important;line-height:1!important;}
.page-inbox .message-more-button:hover,
.page-inbox .message-more-button[aria-expanded="true"]{
  background:#f3faf6!important;
  color:#0b9850!important;
  border-color:#bfe6cf!important;
}

@media(max-width:480px){
  .page-inbox .message-more-button{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    top:6px!important;
    right:-9px!important;
  }
  
  .page-inbox .message-more-button i{font-size:9px!important;}
}

/* Long-press reply: compact, text-only popup. It never changes message width. */
.page-inbox .message-action-menu.long-press-reply{
  min-width:0!important;
  width:auto!important;
  max-width:140px!important;
  padding:3px!important;
  border-radius:8px!important;
  box-shadow:0 8px 22px rgba(24,43,64,.16)!important;
}
.page-inbox .message-action-menu.long-press-reply button{
  width:auto!important;
  min-width:72px!important;
  min-height:30px!important;
  padding:5px 9px!important;
  gap:6px!important;
  font-size:12px!important;
  line-height:16px!important;
  border-radius:6px!important;
}
.page-inbox .message-action-menu.long-press-reply button i{
  width:auto!important;
  height:auto!important;
  flex:0 0 auto!important;
  background:transparent!important;
  color:#0b9850!important;
  font-size:11px!important;
}
.page-inbox .message-action-menu.long-press-reply button span::after{display:none!important;}

/* Keep the three-dot trigger plain; long-press is the primary mobile action. */
.page-inbox .message-row .message-more-button{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  right:-8px!important;
  top:7px!important;
}
.page-inbox .message-row.outbound .message-more-button{left:-8px!important;right:auto!important;}
.page-inbox .message-row .message-more-button:hover,
.page-inbox .message-row .message-more-button[aria-expanded="true"]{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#0b9850!important;
}
@media(max-width:480px){
  .page-inbox .message-row .message-more-button{
    width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;
    right:-7px!important;top:7px!important;
  }
  .page-inbox .message-row.outbound .message-more-button{left:-7px!important;}
  .page-inbox .message-row .message-more-button i{font-size:9px!important;}
}

/* Message action redesign: remove the three-dot trigger entirely.
   Reply is available through long-press/right-click on the message bubble. */
.page-inbox .message-more-button,
.page-inbox [data-message-more]{
  display:none!important;
}

/* ========================================================================
   VOICE MESSAGE ALIGNMENT — no overflow / no message menu reservation
   ======================================================================== */

.page-inbox .message-audio{

  min-height:48px!important;
  margin-inline:auto!important;
  display:grid!important;
  
  align-items:center!important;
  
  row-gap:0!important;

}
.page-inbox .message-audio-play{
  align-self:center!important;
  margin:0!important;
}
.page-inbox .message-audio-track-wrap{
  
  justify-self:stretch!important;
  
  display:grid!important;
  grid-template-rows:5px auto!important;
  align-items:center!important;
  gap:5px!important;
  padding:0!important;
  margin:0!important;
}
.page-inbox .message-audio-progress{
  display:block!important;
  width:100%!important;
  height:5px!important;
  min-width:0!important;
  margin:0!important;
}
.page-inbox .message-audio-times{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  line-height:10px!important;
}
.page-inbox .message-audio-mic{
  align-self:center!important;
  
  margin:0!important;
}
.page-inbox .message-audio-native{display:none!important;}

@media(max-width:720px){
  .page-inbox .message-row:has(.message-audio) .bubble{min-width:0!important;max-width:calc(100vw - 56px)!important;}
  .page-inbox .message-audio{

    min-height:48px!important;
  }
  .page-inbox .message-audio-play{width:36px!important;height:36px!important;min-width:36px!important;}
  .page-inbox .message-audio-mic{width:26px!important;height:26px!important;min-width:26px!important;}
}

@media(max-width:390px){
  
  .page-inbox .message-audio-play{width:34px!important;height:34px!important;min-width:34px!important;}
  .page-inbox .message-audio-mic{width:24px!important;height:24px!important;min-width:24px!important;font-size:10px!important;}
}

/* FINAL AUDIO BUBBLE WIDTH FIX: use the full bubble width so the mic control
   sits close to the right edge instead of leaving a large empty area. */
.page-inbox .message-row:has(.message-audio) .bubble{
  min-width:0!important;
  overflow:visible!important;
}
.page-inbox .message-audio{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  grid-template-columns:40px minmax(0,1fr) 30px!important;
  column-gap:10px!important;
  padding:2px 2px 4px!important;
}
.page-inbox .message-audio-track-wrap{
  min-width:0!important;
  width:100%!important;
}
.page-inbox .message-audio-mic{
  justify-self:end!important;
  margin-right:0!important;
}
@media(max-width:720px){
  .page-inbox .message-audio{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:36px minmax(0,1fr) 26px!important;
    column-gap:8px!important;
  }
}
@media(max-width:390px){
  .page-inbox .message-audio{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:34px minmax(0,1fr) 24px!important;
    column-gap:7px!important;
  }
}

/* Customer service window — clear closed-state styling */
.service-window.closed {
  background: #fff8db !important;
  border-bottom: 1px solid #f1d37a !important;
  color: #8a5a00 !important;
}
.service-window.closed .service-window-icon {
  color: #b77900 !important;
  background: #ffefb0 !important;
}
.service-window.closed .service-window-title,
.service-window.closed .service-window-status {
  color: #8a5a00 !important;
}
.service-window.closed .window-countdown {
  background: #fff1b8 !important;
  border: 1px solid #e6c45c !important;
  color: #8a5a00 !important;
}

/* ========================================================================
   FINAL REPLY-TO PREVIEW FIX
   Keep the quoted reply target compact and on ONE horizontal row on
   desktop, tablet and phone. Long customer/message text truncates instead
   of wrapping or pushing the composer controls out of place.
   ======================================================================== */
.page-inbox .reply-to-preview{

  height:40px!important;
  min-height:40px!important;
  margin:0 0 4px!important;
  padding:4px 7px!important;
  gap:7px!important;
  
  border-radius:8px!important;
}
.page-inbox .reply-to-preview-accent{
  width:3px!important;
  min-width:3px!important;
  flex:0 0 3px!important;
  height:24px!important;
  align-self:center!important;
}
.page-inbox .reply-to-preview-copy{

  line-height:1!important;
}
.page-inbox .reply-to-preview-copy strong{

  max-width:none!important;
  
  font-size:10px!important;
  line-height:1!important;

  text-overflow:clip!important;
}

.page-inbox .reply-to-preview-copy .reply-to-preview-name{

  font-size:10px!important;
  line-height:1!important;
  font-weight:700!important;

}
.page-inbox .reply-to-preview-copy .reply-to-preview-body{

  max-width:none!important;
  
  font-size:10px!important;
  line-height:1!important;

}

.page-inbox .reply-to-preview-close{
  box-sizing:border-box!important;

  align-self:center!important;
  display:grid!important;
  place-items:center!important;
}

@media(max-width:720px){
  .page-inbox .reply-to-preview{

    margin-bottom:3px!important;

  }
  .page-inbox .reply-to-preview-accent{
    height:22px!important;
  }
  
  .page-inbox .reply-to-preview-copy strong,
  .page-inbox .reply-to-preview-copy .reply-to-preview-name{
    font-size:10px!important;
  }
  
  .page-inbox .reply-to-preview-close{

    min-height:28px!important;
    
  }
}

@media(max-width:390px){

  .page-inbox .reply-to-preview-copy strong,
  .page-inbox .reply-to-preview-copy .reply-to-preview-name{
    font-size:9px!important;
  }
  
  .page-inbox .reply-to-preview-close{

    min-height:26px!important;
    
  }
}

/* ================================================================
   FINAL REPLY-TO PREVIEW MICRO FIX — ALL SCREEN SIZES
   Keep the reply context readable and prevent the title/customer name
   from visually touching each other on narrow screens.
   ================================================================ */
.page-inbox .reply-to-preview{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.page-inbox .reply-to-preview-copy{
  
  flex:1 1 auto!important;

  justify-content:flex-start!important;
  
  max-width:none!important;
  width:auto!important;
  gap:6px!important;

}
.page-inbox .reply-to-preview-copy strong{

  overflow:visible!important;
}
.page-inbox .reply-to-preview-copy strong i{
  flex:0 0 auto!important;
  margin-right:4px!important;
}

.page-inbox .reply-to-preview-copy .reply-to-preview-body::before{
  content:"— "!important;
}
.page-inbox .reply-to-preview-close{
  flex:0 0 28px!important;
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  margin:0 0 0 4px!important;
  padding:0!important;
}

@media (max-width:720px){
  .page-inbox .reply-to-preview{
    height:38px!important;
    min-height:38px!important;
    padding:4px 6px!important;
    gap:5px!important;
  }
  .page-inbox .reply-to-preview-copy{
    gap:6px!important;
  }
  .page-inbox .reply-to-preview-copy strong{
    font-size:10px!important;
    line-height:1!important;
  }
  .page-inbox .reply-to-preview-copy .reply-to-preview-name{
    max-width:40%!important;
    font-size:10px!important;
    line-height:1!important;
  }
  .page-inbox .reply-to-preview-copy .reply-to-preview-body{
    font-size:9px!important;
    line-height:1!important;
  }
  .page-inbox .reply-to-preview-close{
    flex-basis:28px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    margin-left:3px!important;
  }
}

@media (max-width:390px){
  .page-inbox .reply-to-preview{
    height:36px!important;
    min-height:36px!important;
    padding:3px 5px!important;
    gap:4px!important;
  }
  .page-inbox .reply-to-preview-copy{
    gap:5px!important;
  }
  .page-inbox .reply-to-preview-copy strong{
    font-size:9px!important;
  }
  .page-inbox .reply-to-preview-copy .reply-to-preview-name{
    
    font-size:9px!important;
  }
  .page-inbox .reply-to-preview-copy .reply-to-preview-body{
    font-size:8px!important;
  }
  .page-inbox .reply-to-preview-close{
    flex-basis:26px!important;
    width:26px!important;
    min-width:26px!important;
    max-width:26px!important;
    height:26px!important;
    margin-left:2px!important;
  }
}

@media (max-width:340px){

}

/* FINAL V4 — reply-to label spacing on narrow screens.
   Keep "Replying to" visually separated from the customer name and
   prevent the context row from collapsing/touching at small widths. */
.page-inbox .reply-to-preview-copy{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  column-gap:0!important;
}
.page-inbox .reply-to-preview-copy strong{
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:max-content!important;
  margin:0 7px 0 0!important;
  padding:0!important;
  white-space:nowrap!important;
}
.page-inbox .reply-to-preview-copy .reply-to-preview-name{
  display:block!important;
  flex:0 1 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:42%!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.page-inbox .reply-to-preview-copy .reply-to-preview-body{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0 0 0 6px!important;
  padding:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:390px){
  .page-inbox .reply-to-preview-copy strong{margin-right:6px!important;}
  .page-inbox .reply-to-preview-copy .reply-to-preview-name{max-width:46%!important;}
  .page-inbox .reply-to-preview-copy .reply-to-preview-body{margin-left:5px!important;}
}
@media(max-width:340px){
  .page-inbox .reply-to-preview-copy .reply-to-preview-body{display:none!important;}
  .page-inbox .reply-to-preview-copy .reply-to-preview-name{max-width:none!important;flex:1 1 auto!important;}
}

/* FINAL INBOX FOCUS CLEANUP — remove the green focus border/ring from
   the message composer and conversation agent/status controls. */
.page-inbox .rich-reply-box textarea:focus,
.page-inbox .rich-reply-box textarea:focus-visible,
.page-inbox .chat-actions select:focus,
.page-inbox .chat-actions select:focus-visible,
.page-inbox [data-conversation-agent]:focus,
.page-inbox [data-conversation-agent]:focus-visible,
.page-inbox [data-conversation-status]:focus,
.page-inbox [data-conversation-status]:focus-visible{
  outline:none!important;
  outline-offset:0!important;
  border-color:#ccd6e1!important;
  box-shadow:inset 0 0 0 1px #d9e0e8!important;
}

/* Keep the controls neutral while focused; no green transition from the
   generic page-wide form focus rules. */
.page-inbox .chat-actions select,
.page-inbox .rich-reply-box textarea{
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease!important;
}

.page-inbox .chat-actions select:focus,
.page-inbox .chat-actions select:focus-visible{
  background-color:#fff!important;
}

/* MOBILE TAP FOCUS CLEANUP — do not show green focus borders/rings after tapping.
   Keyboard users still get the normal :focus-visible indication. */
.page-inbox button:focus:not(:focus-visible),
.page-inbox a:focus:not(:focus-visible),
.page-inbox input:focus:not(:focus-visible),
.page-inbox select:focus:not(:focus-visible),
.page-inbox textarea:focus:not(:focus-visible){
  outline:none!important;
  outline-offset:0!important;
  -webkit-tap-highlight-color:transparent!important;
}
.page-inbox input:focus:not(:focus-visible),
.page-inbox select:focus:not(:focus-visible),
.page-inbox textarea:focus:not(:focus-visible){
  border-color:#ccd6e1!important;
  box-shadow:inset 0 0 0 1px #d9e0e8!important;
}
.page-inbox button:focus:not(:focus-visible),
.page-inbox a:focus:not(:focus-visible){
  box-shadow:none!important;
}
.page-inbox .quick-reply-toggle:focus:not(:focus-visible),
.page-inbox [data-quick-reply-toggle]:focus:not(:focus-visible){
  border-color:#d6dfe8!important;
  box-shadow:none!important;
  outline:none!important;
}

/* ========================================================================
   MESSAGE LONG-PRESS — prevent native text selection / Copy UI
   Long-press on a chat message is reserved for Reply, so the browser must
   not enter text-selection/copy mode on message content.
   ======================================================================== */
.page-inbox .message-row,
.page-inbox .message-row .bubble,
.page-inbox .message-row .bubble *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* Keep normal selection/copy available everywhere outside chat messages. */
.page-inbox .reply-box textarea,
.page-inbox input,
.page-inbox select,
.page-inbox [contenteditable="true"]{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
}

/* ========================================================================
   CONTACT HEADER REDESIGN — CLEAN RESPONSIVE LAYOUT
   One authoritative layout for desktop, tablet and phone.
   ======================================================================== */
.page-inbox .chat-header{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:8px!important;
  min-height:72px!important;
  height:auto!important;
  padding:10px 14px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid #e7ebf0!important;
  overflow:visible!important;
}

.page-inbox .chat-person{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}

.page-inbox .chat-person .mobile-chat-back{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  flex:0 0 36px!important;
  margin:0!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  border:1px solid #e3e8ee!important;
  border-radius:10px!important;
  background:#f8fafb!important;
  color:#536170!important;
  box-shadow:none!important;
}

.page-inbox .chat-person .mobile-chat-back:hover{
  background:#f1f5f7!important;
  border-color:#d7dfe7!important;
}

.page-inbox .chat-person .avatar{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
}

.page-inbox .chat-person-copy{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:2px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

.page-inbox .chat-person-copy strong{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin:0!important;
  font-size:14px!important;
  line-height:18px!important;
  font-weight:650!important;
  color:#1f2933!important;
}

.page-inbox .chat-person-copy small{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin:0!important;
  font-size:11px!important;
  line-height:15px!important;
  color:#8a949f!important;
}

.page-inbox .chat-actions,
.page-inbox .chat-actions.has-agent-select,
.page-inbox .chat-actions.agent-view{
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:40px!important;
  min-height:40px!important;
  display:grid!important;
  align-items:center!important;
  gap:3px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

.page-inbox .chat-actions.has-agent-select{
  grid-template-columns:minmax(170px,220px) minmax(140px,180px) 40px!important;
}

.page-inbox .chat-actions.agent-view{
  grid-template-columns:minmax(140px,180px) 40px!important;
}

.page-inbox .chat-actions select{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:7px 30px 7px 11px!important;
  border:1px solid #d7dfe7!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#293541!important;
  font-size:12px!important;
  line-height:1.1!important;
  box-shadow:0 1px 2px rgba(20,35,50,.03)!important;
}

.page-inbox .chat-actions select:hover{
  border-color:#c8d2dc!important;
  background:#fbfcfd!important;
}

.page-inbox .chat-more,
.page-inbox .chat-more-toggle{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  border-radius:10px!important;
}

.page-inbox .chat-more-toggle{
  display:grid!important;
  place-items:center!important;
  border:1px solid #d7dfe7!important;
  background:#f8fafb!important;
  color:#5d6976!important;
  box-shadow:none!important;
}

.page-inbox .chat-more-toggle:hover,
.page-inbox .chat-more-toggle[aria-expanded="true"]{
  background:#f1f5f7!important;
  border-color:#cbd5df!important;
  color:#26323d!important;
}

/* Tablet: identity gets its own row so the controls never squeeze the name. */
@media screen and (max-width:1100px){
  .page-inbox .chat-header{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto 40px!important;
    min-height:122px!important;
    padding:10px 12px!important;
    row-gap:8px!important;
  }

  .page-inbox .chat-person{
    grid-column:1!important;
    grid-row:1!important;
    min-height:56px!important;
  }

  .page-inbox .chat-actions,
  .page-inbox .chat-actions.has-agent-select,
  .page-inbox .chat-actions.agent-view{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
  }

  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px!important;
  }

  .page-inbox .chat-actions.agent-view{
    grid-template-columns:minmax(0,1fr) 40px!important;
  }
}

/* Phone: spacious identity row + a clean full-width action row. */
@media screen and (max-width:720px){
  .page-inbox .chat-header{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:58px 36px!important;
    min-height:97px!important;
    height:97px!important;
    max-height:97px!important;
    flex:0 0 97px!important;
    padding:4px 8px 3px!important;
    row-gap:0!important;
  }

  .page-inbox .chat-person{
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    gap:8px!important;
  }

  .page-inbox .chat-person .mobile-chat-back{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    flex-basis:36px!important;
    border-radius:9px!important;
  }

  .page-inbox .chat-person .avatar{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    flex-basis:36px!important;
  }

  .page-inbox .chat-person-copy strong{
    font-size:13px!important;
    line-height:17px!important;
  }

  .page-inbox .chat-person-copy small{
    font-size:10px!important;
    line-height:14px!important;
  }

  .page-inbox .chat-actions,
  .page-inbox .chat-actions.has-agent-select,
  .page-inbox .chat-actions.agent-view{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    gap:3px!important;
  }

  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;
  }

  .page-inbox .chat-actions.agent-view{
    grid-template-columns:minmax(0,1fr) 36px!important;
  }

  .page-inbox .chat-actions select{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    padding:5px 25px 5px 9px!important;
    border-radius:9px!important;
    font-size:11px!important;
  }

  .page-inbox .chat-more,
  .page-inbox .chat-more-toggle{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    border-radius:9px!important;
  }
}

/* Small phones: keep proportions, never absolutely position the 3-dot. */
@media screen and (max-width:390px){
  .page-inbox .chat-header{
    padding-left:6px!important;
    padding-right:6px!important;
  }

  .page-inbox .chat-person{gap:7px!important;}
  .page-inbox .chat-person-copy strong{font-size:12px!important;}
  .page-inbox .chat-person-copy small{font-size:9px!important;}

  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px!important;
  }

  .page-inbox .chat-actions.agent-view{
    grid-template-columns:minmax(0,1fr) 34px!important;
  }

  .page-inbox .chat-more,
  .page-inbox .chat-more-toggle{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
  }
}

/* ========================================================================
   CUSTOMER SERVICE CHAT — CLEAN ALIGNED REDESIGN
   Visual-only refinement. Existing chat behaviour and markup are unchanged.
   ======================================================================== */

.chat-panel{
  
  min-width:0;
  overflow:hidden;
}
.chat-active{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  background:#f4f7f9;
}
.chat-header{

  box-shadow:0 1px 0 rgba(16,38,61,.025)!important;
  
}
.chat-person{min-width:0;}
.chat-person .avatar{width:42px;height:42px;border:1px solid #dcefe4;background:#eef9f3;}
.chat-person-copy{gap:2px!important;}
.chat-person-copy strong{line-height:18px!important;}
.chat-person-copy small{line-height:15px!important;}
.chat-actions{
  margin-left:auto!important;
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(0,1fr)!important;
  align-items:center!important;
  
  min-width:0!important;
}
.chat-actions.has-agent-select{grid-template-columns:minmax(118px,1fr) minmax(92px,1fr) 38px!important;}
.chat-actions.agent-view{grid-template-columns:minmax(92px,1fr) 38px!important;}
.chat-actions select{
  width:100%!important;

  border:1px solid #d7e0e8!important;

  font-weight:650!important;
  box-shadow:none!important;
}
.chat-actions select:focus{border-color:#b9c9d7!important;box-shadow:none!important;}
.chat-more{width:38px!important;min-width:38px!important;height:36px!important;position:relative!important;left:auto!important;right:auto!important;margin:0!important;}
.chat-more-toggle{border:1px solid #d7e0e8!important;background:#f8fafc!important;color:#59697c!important;}
.chat-more-toggle:hover{background:#f0f4f7!important;}
.chat-more-menu{top:calc(100% + 6px)!important;right:0!important;border-radius:10px!important;}
.service-window{

  display:flex!important;
  align-items:center!important;
  gap:8px!important;

  line-height:16px!important;
  font-weight:650!important;
}
.messages{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;

  background-repeat:repeat!important;
  background-position:center top!important;
  scroll-behavior:auto;
}

.bubble{

  border:1px solid #e0e7ed!important;
  
}
.inbound .bubble{background:#fff!important;}
.outbound .bubble{border-color:#c9ecd9!important;}
.bubble p{margin:0!important;color:#253349!important;}
.bubble span{color:#7b8797!important;}
.rich-reply-box{

  align-items:end!important;

}
.reply-compose-area{min-width:0!important;flex:1 1 auto!important;}
.rich-reply-box textarea{
  width:100%!important;
  
  max-height:130px!important;

  color:#1e2d41!important;
  
  resize:none!important;
}
.rich-reply-box textarea:focus{border-color:#b9c8d6!important;box-shadow:0 0 0 2px rgba(64,108,142,.06)!important;background:#fff!important;}
.reply-tool-button,.voice-record-button,.send-button{
  flex:0 0 42px!important;

}
.reply-tool-button{border:1px solid #d6dfe8!important;background:#fff!important;color:#5b6b7e!important;box-shadow:none!important;}
.voice-record-button{box-shadow:none!important;}

.template-reply{
  min-height:48px!important;
  padding:8px 12px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;

}
.template-reply select{height:36px!important;min-width:0!important;}
.template-reply>.btn{height:36px!important;min-height:36px!important;}

.customer-active{text-align:left;}
.customer-active>.avatar.xl{display:grid!important;margin:0 auto 12px!important;width:68px!important;height:68px!important;}
.customer-active h3{text-align:center;margin:0!important;font-size:16px!important;}
.customer-active>p{text-align:center;margin:4px 0 18px!important;color:#7b8798!important;font-size:11px!important;}
.customer-details{display:grid!important;gap:8px!important;}
.customer-details span{display:grid!important;gap:3px!important;box-shadow:none!important;}
.customer-details small{font-size:10px!important;color:#8a95a4!important;}
.customer-details strong{font-size:12px!important;}

@media(max-width:1100px){

  .messages{padding:16px!important;}
  .bubble{max-width:min(78%,620px)!important;}
}

@media(max-width:720px){
  .chat-panel{background:#f4f7f9!important;}
  .chat-active{grid-template-rows:auto auto minmax(0,1fr) auto auto!important;}
  .chat-header{
    height:auto!important;
    min-height:0!important;
    padding:10px 10px 8px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .chat-person{width:100%!important;}
  .chat-person .avatar{width:40px!important;height:40px!important;}
  .chat-actions{
    width:100%!important;
    margin:0!important;
    gap:3px!important;
  }
  .chat-actions.has-agent-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px!important;}
  .chat-actions.agent-view{grid-template-columns:minmax(0,1fr) 38px!important;}
  .chat-actions select{height:36px!important;min-height:36px!important;}
  .chat-more,.chat-more-toggle{width:38px!important;min-width:38px!important;height:36px!important;}
  .service-window{min-height:36px!important;padding:7px 10px!important;}
  .messages{padding:14px 10px 16px!important;}
  .bubble{max-width:86%!important;border-radius:11px!important;}
  .rich-reply-box{padding:8px 9px calc(8px + env(safe-area-inset-bottom))!important;gap:6px!important;}
  .reply-tool-button,.voice-record-button,.send-button{flex-basis:42px!important;width:42px!important;height:42px!important;}
  .template-reply{padding:7px 9px!important;grid-template-columns:minmax(0,1fr) auto!important;}
}

@media(max-width:390px){
  .chat-header{padding-left:8px!important;padding-right:8px!important;}
  .chat-actions{gap:3px!important;}
  .chat-actions.has-agent-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;}
  .chat-actions.agent-view{grid-template-columns:minmax(0,1fr) 36px!important;}
  .chat-more,.chat-more-toggle{width:36px!important;min-width:36px!important;}
  .chat-actions select{font-size:10.5px!important;padding-left:8px!important;padding-right:22px!important;}
  .messages{padding-left:8px!important;padding-right:8px!important;}
  .bubble{max-width:90%!important;}
}

/* ================================================================
   CUSTOMER SERVICE WINDOW — POLISHED FINAL PASS
   Cleaner hierarchy + clear state indicator colors
   ================================================================ */
.page-inbox .service-window{

  justify-content:flex-start!important;

  box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)!important;
  
}

.page-inbox .service-window-title{
  flex:0 1 auto!important;

  letter-spacing:.01em!important;

}
.page-inbox .service-window-status{
  flex:0 1 auto!important;
  
  padding-left:7px!important;
  border-left:1px solid currentColor!important;
  
  opacity:.72!important;

}
.page-inbox .service-window-status::before{display:none!important;}
.page-inbox .service-window-time{

  white-space:nowrap!important;
}

/* Open = green */
.page-inbox .service-window.open{
  background:#f2fbf6!important;
  color:#18784b!important;
  border-bottom-color:#d8eee1!important;
}
.page-inbox .service-window.open .service-window-icon{
  background:#18b968!important;
  color:#fff!important;
}
.page-inbox .service-window.open .window-countdown{
  background:#e2f7eb!important;
  color:#087740!important;
}
.page-inbox .service-window.open .window-source{
  background:#e8f8ef!important;
  color:#16824f!important;
}

/* Closing soon = amber */

.page-inbox .service-window.closing-soon .service-window-icon{
  
  color:#fff!important;
}

.page-inbox .service-window.closing-soon .window-source{
  background:#fff1d3!important;
  
}

/* Closed = red */

@media(max-width:720px){
  .page-inbox .service-window{
    
    height:32px!important;
    
    gap:7px!important;
  }
  .page-inbox .service-window-icon{
    flex-basis:16px!important;font-size:7.5px!important;
  }

  .page-inbox .service-window-status{padding-left:5px!important;}

}
@media(max-width:430px){
  .page-inbox .service-window{padding:0 7px!important;gap:6px!important;}
  .page-inbox .service-window-status{display:none!important;}
  .page-inbox .service-window .window-source{display:none!important;}
  .page-inbox .service-window-title{font-size:9px!important;}
  .page-inbox .service-window .window-countdown{font-size:8px!important;}
}

/* PHONE: prevent browser pinch/double-tap zoom while preserving normal scrolling. */
@media (max-width: 720px){
  html, body {
    -webkit-text-size-adjust: 100% !important;
    touch-action: pan-x pan-y !important;
  }
  input, textarea, select, button {
    touch-action: manipulation !important;
  }
}

/* Inbox approved-template actions: clear cancel/send choices without affecting the chat scroll area. */
.page-inbox .template-form-actions{

  margin-top:2px!important;
}

.page-inbox .template-form-actions button[data-template-cancel][hidden]{display:none!important;}
@media (max-width:720px){
  
  .page-inbox .template-form-actions .btn{flex:1 1 0;}
}

/* Touch-focus cleanup: tapping controls must not leave a green focus ring.
   Keyboard/accessibility focus (:focus-visible) remains unchanged. */
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible){
  outline:none!important;
}
.rich-reply-box textarea:focus:not(:focus-visible){
  box-shadow:inset 0 0 0 1px #d9e0e8!important;
}
.chat-actions select:focus:not(:focus-visible),
.chat-more:focus:not(:focus-visible),
.chat-more-toggle:focus:not(:focus-visible),
.reply-tool-button:focus:not(:focus-visible),
.quick-reply-button:focus:not(:focus-visible){
  outline:none!important;
  box-shadow:none!important;
}

/* Final touch-focus cleanup for Inbox: mouse/pen/touch taps should never show the green focus ring.
   Keyboard focus remains available on devices using a keyboard. */
@media (pointer: coarse){
  .page-inbox button:focus,
  .page-inbox a:focus,
  .page-inbox input:focus,
  .page-inbox select:focus,
  .page-inbox textarea:focus{
    outline:none!important;
    box-shadow:none!important;
  }
  .page-inbox .rich-reply-box textarea:focus{
    box-shadow:inset 0 0 0 1px #d9e0e8!important;
  }
}

/* GLOBAL BUTTON STANDARD — match the Add Business mobile CTA everywhere.
   Applies to normal .btn controls across all pages; compact .btn.small and icon-only
   controls keep their purpose-specific sizing. */
.btn:not(.small){
  min-height:42px!important;
  height:42px!important;
  padding:9px 15px!important;
  border-radius:10px!important;
  line-height:1.2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  box-sizing:border-box!important;
}
.btn.primary:not(.small){
  border-radius:10px!important;
}
.btn.full:not(.small){
  min-height:42px!important;
  height:42px!important;
}
@media(max-width:650px){
  .btn:not(.small){
    min-height:42px!important;
    height:42px!important;
    border-radius:10px!important;
    padding:9px 14px!important;
  }
}

/* ========================================================================
   FINAL — UNIFIED PAGE HEADER SYSTEM
   One exact Page Header treatment across Dashboard, Contacts, Businesses,
   Templates, Campaigns, Agent Inbox, Agents, API Settings and System.
   This intentionally overrides older page-specific heading rules.
   ======================================================================== */
.page-dashboard .page-heading,
.page-contacts .page-heading,
.page-businesses .page-heading,
.page-templates .page-heading,
.page-campaigns .page-heading,
.page-inbox .page-heading,
.page-agents .page-heading,
.page-settings .page-heading,
.page-system .page-heading{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:58px!important;
  height:58px!important;
  margin:0 0 20px!important;
  padding:0 2px!important;
  gap:22px!important;
  font-family:var(--ui-font,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif)!important;
}

.page-dashboard .page-heading > div:first-child,
.page-contacts .page-heading > div:first-child,
.page-businesses .page-heading > div:first-child,
.page-templates .page-heading > div:first-child,
.page-campaigns .page-heading > div:first-child,
.page-inbox .page-heading > div:first-child,
.page-agents .page-heading > div:first-child,
.page-settings .page-heading > div:first-child,
.page-system .page-heading > div:first-child{
  min-width:0!important;
  flex:1 1 auto!important;
}

.page-dashboard .page-heading h1,
.page-contacts .page-heading h1,
.page-businesses .page-heading h1,
.page-templates .page-heading h1,
.page-campaigns .page-heading h1,
.page-inbox .page-heading h1,
.page-agents .page-heading h1,
.page-settings .page-heading h1,
.page-system .page-heading h1{
  margin:0 0 5px!important;
  padding:0!important;
  font-family:var(--ui-font,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif)!important;
  font-size:27px!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-.035em!important;
  color:var(--ui-heading,#1b2a40)!important;
}

.page-dashboard .page-heading p,
.page-contacts .page-heading p,
.page-businesses .page-heading p,
.page-templates .page-heading p,
.page-campaigns .page-heading p,
.page-inbox .page-heading p,
.page-agents .page-heading p,
.page-settings .page-heading p,
.page-system .page-heading p{
  margin:0!important;
  padding:0!important;
  max-width:800px!important;
  font-family:var(--ui-font,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  color:var(--ui-muted,#7b8799)!important;
}

.page-dashboard .page-heading .heading-actions,
.page-contacts .page-heading .heading-actions,
.page-businesses .page-heading .heading-actions,
.page-templates .page-heading .heading-actions,
.page-campaigns .page-heading .heading-actions,
.page-inbox .page-heading .heading-actions,
.page-agents .page-heading .heading-actions,
.page-settings .page-heading .heading-actions,
.page-system .page-heading .heading-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
  gap:9px!important;
  margin:0!important;
  padding:0!important;
}

.page-dashboard .page-heading .heading-actions form,
.page-contacts .page-heading .heading-actions form,
.page-businesses .page-heading .heading-actions form,
.page-templates .page-heading .heading-actions form,
.page-campaigns .page-heading .heading-actions form,
.page-inbox .page-heading .heading-actions form,
.page-agents .page-heading .heading-actions form,
.page-settings .page-heading .heading-actions form,
.page-system .page-heading .heading-actions form{
  margin:0!important;
}

.page-dashboard .page-heading .heading-actions .btn,
.page-contacts .page-heading .heading-actions .btn,
.page-businesses .page-heading .heading-actions .btn,
.page-templates .page-heading .heading-actions .btn,
.page-campaigns .page-heading .heading-actions .btn,
.page-inbox .page-heading .heading-actions .btn,
.page-agents .page-heading .heading-actions .btn,
.page-settings .page-heading .heading-actions .btn,
.page-system .page-heading .heading-actions .btn{
  min-height:41px!important;
  height:41px!important;
  padding:9px 15px!important;
  border-radius:10px!important;
  font-family:var(--ui-font,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}

@media(max-width:820px){
  .page-dashboard .page-heading,
  .page-contacts .page-heading,
  .page-businesses .page-heading,
  .page-templates .page-heading,
  .page-campaigns .page-heading,
  .page-inbox .page-heading,
  .page-agents .page-heading,
  .page-settings .page-heading,
  .page-system .page-heading{
    height:auto!important;
    min-height:58px!important;
    align-items:flex-start!important;
    gap:13px!important;
  }

  .page-dashboard .page-heading .heading-actions,
  .page-contacts .page-heading .heading-actions,
  .page-businesses .page-heading .heading-actions,
  .page-templates .page-heading .heading-actions,
  .page-campaigns .page-heading .heading-actions,
  .page-inbox .page-heading .heading-actions,
  .page-agents .page-heading .heading-actions,
  .page-settings .page-heading .heading-actions,
  .page-system .page-heading .heading-actions{
    flex-wrap:wrap!important;
  }
}

@media(max-width:720px){
  .page-dashboard .page-heading,
  .page-contacts .page-heading,
  .page-businesses .page-heading,
  .page-templates .page-heading,
  .page-campaigns .page-heading,
  .page-inbox .page-heading,
  .page-agents .page-heading,
  .page-settings .page-heading,
  .page-system .page-heading{
    min-height:0!important;
    margin-bottom:14px!important;
    padding:0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:11px!important;
  }

  .page-dashboard .page-heading h1,
  .page-contacts .page-heading h1,
  .page-businesses .page-heading h1,
  .page-templates .page-heading h1,
  .page-campaigns .page-heading h1,
  .page-inbox .page-heading h1,
  .page-agents .page-heading h1,
  .page-settings .page-heading h1,
  .page-system .page-heading h1{
    font-size:24px!important;
    line-height:1.18!important;
  }

  .page-dashboard .page-heading p,
  .page-contacts .page-heading p,
  .page-businesses .page-heading p,
  .page-templates .page-heading p,
  .page-campaigns .page-heading p,
  .page-inbox .page-heading p,
  .page-agents .page-heading p,
  .page-settings .page-heading p,
  .page-system .page-heading p{
    font-size:11.5px!important;
    line-height:1.5!important;
  }

  .page-dashboard .page-heading .heading-actions,
  .page-contacts .page-heading .heading-actions,
  .page-businesses .page-heading .heading-actions,
  .page-templates .page-heading .heading-actions,
  .page-campaigns .page-heading .heading-actions,
  .page-inbox .page-heading .heading-actions,
  .page-agents .page-heading .heading-actions,
  .page-settings .page-heading .heading-actions,
  .page-system .page-heading .heading-actions{
    width:100%!important;
    justify-content:flex-start!important;
    gap:7px!important;
  }

  .page-dashboard .page-heading .heading-actions .btn,
  .page-contacts .page-heading .heading-actions .btn,
  .page-businesses .page-heading .heading-actions .btn,
  .page-templates .page-heading .heading-actions .btn,
  .page-campaigns .page-heading .heading-actions .btn,
  .page-inbox .page-heading .heading-actions .btn,
  .page-agents .page-heading .heading-actions .btn,
  .page-settings .page-heading .heading-actions .btn,
  .page-system .page-heading .heading-actions .btn{
    min-height:38px!important;
    height:38px!important;
    border-radius:9px!important;
  }
}

/* CONTACTS + TEMPLATES HEADER CTAs — match the Add Business mobile CTA.
   Primary action buttons use the same green, 42px, rounded treatment and
   become full-width with consistent side margins on phones. */
@media(max-width:720px){
  .page-contacts .page-heading .heading-actions,
  .page-templates .page-heading .heading-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    gap:7px!important;
  }
  .page-contacts .page-heading .heading-actions > *,
  .page-templates .page-heading .heading-actions > *{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .page-contacts .page-heading .heading-actions form,
  .page-templates .page-heading .heading-actions form{
    display:block!important;
  }
  .page-contacts .page-heading .heading-actions .btn,
  .page-templates .page-heading .heading-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    border-radius:10px!important;
    padding:9px 14px!important;
    justify-content:center!important;
  }
}

/* HEADER CTA COLORS — keep Add Business green style separate from Contacts/Templates actions.
   These buttons share the same shape/size, but retain non-green purpose styling. */
.page-contacts .page-heading .heading-actions .btn.danger{
  background:#fff0f1!important;
  color:#c92e39!important;
  border-color:#efb8bd!important;
  box-shadow:none!important;
}
.page-contacts .page-heading .heading-actions .btn.danger:hover{
  background:#ffe4e6!important;
  border-color:#e79098!important;
}
.page-templates .page-heading .heading-actions .btn:not(.primary){
  background:#fff!important;
  color:#26334a!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.page-templates .page-heading .heading-actions .btn:not(.primary):hover{
  background:#fff!important;
  border-color:#bac5d4!important;
}

/* ========================================================================
   CUSTOMER SERVICE WINDOW — CLEAN RESPONSIVE REFRESH
   Visual-only: does not change the Contact Header or its controls.
   ======================================================================== */
.page-inbox .service-window{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  height:auto!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  text-align:left!important;
  background:linear-gradient(90deg,#f2fbf6 0%,#f8fcfa 100%)!important;
  border-top:1px solid #dff1e7!important;
  border-bottom:1px solid #dcefe5!important;
  color:#24364b!important;
  font-size:12px!important;
  line-height:1.2!important;
}

.page-inbox .service-window-icon{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  flex:0 0 30px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  background:#16a467!important;
  color:#fff!important;
  box-shadow:0 2px 6px rgba(22,164,103,.16)!important;
  font-size:12px!important;
}

.page-inbox .service-window-content{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  overflow:hidden!important;
}

.page-inbox .service-window-title{
  min-width:0!important;
  margin:0!important;
  color:#1f3449!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.page-inbox .service-window-status{
  min-width:0!important;
  margin:0!important;
  color:#6b7d91!important;
  font-size:10.5px!important;
  font-weight:600!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.page-inbox .service-window-time{
  flex:0 0 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin-left:auto!important;
}

.page-inbox .service-window-label{
  display:none!important;
}

.page-inbox .service-window .window-countdown{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  padding:4px 10px!important;
  box-sizing:border-box!important;
  border:1px solid #c9edd9!important;
  border-radius:999px!important;
  background:#e5f8ee!important;
  color:#118456!important;
  font-size:11px!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.page-inbox .service-window .window-source{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-height:26px!important;
  margin:0!important;
  padding:4px 9px!important;
  box-sizing:border-box!important;
  border:1px solid #9fd9bd!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#16885a!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  opacity:1!important;
  white-space:nowrap!important;
}

/* Closing-soon state keeps the same geometry, only changes the accent. */
.page-inbox .service-window.closing-soon{
  background:linear-gradient(90deg,#fffaf0 0%,#fffdf8 100%)!important;
  border-top-color:#f4e4bf!important;
  border-bottom-color:#f0dfb9!important;
  color:#684d20!important;
}
.page-inbox .service-window.closing-soon .service-window-icon{
  background:#d58a18!important;
  box-shadow:0 2px 6px rgba(213,138,24,.16)!important;
}
.page-inbox .service-window.closing-soon .window-countdown{
  background:#fff3d7!important;
  border-color:#f0d79d!important;
  color:#9a650b!important;
}
.page-inbox .service-window.closing-soon .window-source{
  border-color:#e6c77f!important;
  color:#9a650b!important;
}

/* Closed state remains visually clear without changing its behavior. */
.page-inbox .service-window.closed{
  min-height:50px!important;
  background:linear-gradient(90deg,#fff8e7 0%,#fffdf7 100%)!important;
  border-top-color:#f2dfb4!important;
  border-bottom-color:#eeddb4!important;
  color:#6f5524!important;
}
.page-inbox .service-window.closed .service-window-icon{
  background:#d18a16!important;
  color:#fff!important;
  box-shadow:none!important;
}
.page-inbox .service-window.closed .service-window-title,
.page-inbox .service-window.closed .service-window-status{
  color:#7b5b22!important;
}
.page-inbox .service-window.closed .window-countdown{
  background:#fff2cf!important;
  border-color:#e9ce8f!important;
  color:#8a5a00!important;
}

/* Tablet: keep it compact and balanced. */
@media (min-width:721px) and (max-width:1100px){
  .page-inbox .service-window{min-height:48px!important;padding:7px 11px!important;gap:9px!important;}
  .page-inbox .service-window-icon{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important;}
  .page-inbox .service-window-title{font-size:11.5px!important;}
  .page-inbox .service-window-status{font-size:10px!important;}
  .page-inbox .service-window .window-countdown,
  .page-inbox .service-window .window-source{min-height:24px!important;padding:3px 8px!important;font-size:9.5px!important;}
}

/* Phones: two clean rows, while the countdown remains beside the title.
   This avoids squeezing the header and never changes the Contact Header. */
@media (max-width:720px){
  .page-inbox .service-window{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    min-height:56px!important;
    padding:8px 10px!important;
    column-gap:9px!important;
    row-gap:3px!important;
    align-items:center!important;
  }
  .page-inbox .service-window-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex:none!important;
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    margin:0!important;
  }
  .page-inbox .service-window-content{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .page-inbox .service-window-title{
    font-size:12px!important;
    line-height:1.15!important;
  }
  .page-inbox .service-window-status{
    display:block!important;
    max-width:100%!important;
    font-size:10px!important;
    line-height:1.15!important;
  }
  .page-inbox .service-window-time{
    grid-column:3!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    justify-self:end!important;
    margin-left:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:max-content!important;
    grid-template-rows:auto auto!important;
    justify-items:end!important;
    align-items:center!important;
    gap:3px!important;
    min-width:max-content!important;
  }
  .page-inbox .service-window .window-countdown{
    min-height:26px!important;
    padding:5px 9px!important;
    font-size:10.5px!important;
  }
  .page-inbox .service-window .window-source{
    position:static!important;
    grid-column:1!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:center!important;
    min-height:19px!important;
    padding:2px 7px!important;
    font-size:9px!important;
  }
  .page-inbox .service-window .window-source i{font-size:8px!important;}
}

@media (max-width:390px){
  .page-inbox .service-window{
    grid-template-columns:28px minmax(0,1fr) auto!important;
    min-height:54px!important;
    padding:7px 8px!important;
    column-gap:8px!important;
  }
  .page-inbox .service-window-icon{
    width:28px!important;height:28px!important;min-width:28px!important;
  }
  .page-inbox .service-window-title{font-size:11.5px!important;}
  .page-inbox .service-window-status{font-size:9.5px!important;}
  .page-inbox .service-window .window-countdown{font-size:10px!important;padding:4px 8px!important;}
  .page-inbox .service-window .window-source{font-size:8.5px!important;padding:2px 6px!important;}
}

/* Final mobile rule: hide Meta synced in the Customer Service Window on phones only. */
@media (max-width:720px){
  .page-inbox .service-window .window-source{display:none!important;}
}

/* FINAL HIGH-QUALITY MESSAGING-STYLE CHAT WALLPAPER */
.page-inbox .messages,
body:has(.inbox-layout.chat-open) .messages{
  position:relative!important;

  overflow-anchor:none!important;
}

/* Keep the conversation itself scrollable without moving the chat shell. */
.page-inbox .chat-active,
body:has(.inbox-layout.chat-open) .chat-active{
  min-height:0!important;
  overflow:hidden!important;
}

/* ================================================================
   FINAL INBOX MOBILE POLISH
   - Simple messaging-style dotted chat background (no wallpaper image)
   - Wallpaper remains fixed; only .messages scrolls
   - Clean, aligned phone conversation list
   ================================================================ */
.page-inbox .messages,
body:has(.inbox-layout.chat-open) .messages{
  background-color:#efeae2!important;
  background-image:radial-gradient(circle at 2px 2px, rgba(122,108,91,.16) 1.25px, transparent 1.5px)!important;
  background-size:24px 24px!important;
  background-repeat:repeat!important;
  background-position:0 0!important;
  background-attachment:fixed!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Phone conversation list: three clean visual zones — avatar, copy, right rail. */
@media(max-width:720px){
  .page-inbox .conversation-list{
    background:#fff!important;
    overflow:hidden!important;
  }
  .page-inbox .conversation-scroll{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
  }
  .page-inbox .conversation-filter-bar{
    padding:9px 10px!important;
    background:#fff!important;
    border-bottom:1px solid #edf0f3!important;
  }
  .page-inbox .conversation-search{margin:0!important;}
  .page-inbox .conversation-search input{
    height:40px!important;
    min-height:40px!important;
    padding:9px 12px 9px 34px!important;
    border-radius:10px!important;
    border-color:#dce3ea!important;
    background:#f8fafb!important;
    font-size:13px!important;
  }
  .page-inbox .conversation-search i{left:12px!important;top:12px!important;}

  .page-inbox .conversation-item{
    min-height:68px!important;
    height:68px!important;
    width:100%!important;
    padding:10px 52px 10px 12px!important;
    gap:10px!important;
    align-items:center!important;
    border-top:1px solid #eef1f4!important;
    background:#fff!important;
    position:relative!important;
  }
  .page-inbox .conversation-item:first-child{border-top:0!important;}
  .page-inbox .conversation-item.active{
    background:#f2fbf6!important;
    box-shadow:inset 3px 0 0 #18b867!important;
  }
  .page-inbox .conversation-item .avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    font-size:13px!important;
    border:1px solid #e0e8e4!important;
  }
  .page-inbox .conversation-copy{
    display:grid!important;
    grid-template-rows:20px 18px!important;
    gap:3px!important;
    min-width:0!important;
    width:100%!important;
    align-content:center!important;
  }
  .page-inbox .conversation-title-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    line-height:1!important;
  }
  .page-inbox .conversation-title-main{
    min-width:0!important;
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .page-inbox .conversation-title-main strong{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:700!important;
    color:#182438!important;
  }
  .page-inbox .conversation-title-row time{
    display:block!important;
    width:auto!important;
    max-width:92px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:right!important;
    color:#7a8798!important;
    font-size:9.5px!important;
    line-height:18px!important;
    font-weight:600!important;
  }
  .page-inbox .conversation-last-message{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    min-width:0!important;
    width:100%!important;
    height:18px!important;
    overflow:hidden!important;
    color:#718097!important;
    font-size:11px!important;
    line-height:18px!important;
    font-weight:400!important;
  }
  .page-inbox .conversation-item.has-unread .conversation-last-message{
    color:#43536a!important;
    font-weight:600!important;
  }
  .page-inbox .conversation-last-message-text{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .page-inbox .conversation-outgoing-mark{
    width:15px!important;
    min-width:15px!important;
    height:11px!important;
  }
  .page-inbox .conversation-outgoing-mark::before,
  .page-inbox .conversation-outgoing-mark::after{font-size:10px!important;}
  .page-inbox .conversation-unread,
  .page-inbox .conversation-title-main .conversation-unread{
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:22px!important;
    min-width:22px!important;
    height:22px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:50%!important;
    background:#16ae63!important;
    color:#fff!important;
    box-shadow:none!important;
    font-size:9.5px!important;
    line-height:1!important;
    z-index:4!important;
  }
}

@media(max-width:380px){
  .page-inbox .conversation-item{height:64px!important;min-height:64px!important;padding-left:10px!important;padding-right:48px!important;}
  .page-inbox .conversation-item .avatar{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important;}
  .page-inbox .conversation-copy{grid-template-rows:19px 17px!important;}
  .page-inbox .conversation-title-main strong{font-size:12.5px!important;}
  .page-inbox .conversation-title-row time{font-size:9px!important;max-width:82px!important;}
  .page-inbox .conversation-last-message{font-size:10.5px!important;}
  .page-inbox .conversation-unread,
  .page-inbox .conversation-title-main .conversation-unread{right:10px!important;width:21px!important;min-width:21px!important;height:21px!important;font-size:9px!important;}
}

/* ========================================================================
   RESPONSIVE AUDIT v22 — GLOBAL CLEAN / PREMIUM HARDENING
   Visual-only. No application logic, data flow or behavior is changed.
   Breakpoints: desktop >1100, tablet 721–1100, phone <=720.
   ======================================================================== */

/* Global containment: long labels, API values and dynamic controls must never
   make the application shell wider than the viewport. */

.main-area,.page-content,.page-content>*{min-width:0;}
.page-content{margin-left:auto;margin-right:auto;}
.page-content img,.page-content video,.page-content canvas,.page-content svg{max-width:100%;}
.page-content input,.page-content select,.page-content textarea,.page-content button{min-width:0;max-width:100%;}
.page-content .panel,.page-content .form-panel,.page-content .panel-header,.page-content .notice,.page-content .consent-box{min-width:0;}
.page-content .panel-header>*,.page-content .page-heading>*,.page-content label>*,.page-content .notice>*{min-width:0;}
.page-content .panel-header p,.page-content .page-heading p,.page-content .help,.page-content .muted{overflow-wrap:anywhere;}
.page-content .table-wrap,.page-content .followup-table-wrap{scrollbar-width:thin;scrollbar-color:#c8d1dc transparent;}
.page-content .table-wrap::-webkit-scrollbar,.page-content .followup-table-wrap::-webkit-scrollbar{height:8px;width:8px;}
.page-content .table-wrap::-webkit-scrollbar-thumb,.page-content .followup-table-wrap::-webkit-scrollbar-thumb{background:#c8d1dc;border-radius:999px;}

/* Complete the unified heading system for pages added after the original
   header pass. */
.page-auto-reply .page-heading,
.page-auto-followup .page-heading,
.page-campaign-create .page-heading{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:58px!important;
  margin:0 0 20px!important;
  padding:0 2px!important;
  gap:22px!important;
}
.page-auto-reply .page-heading>div:first-child,
.page-auto-followup .page-heading>div:first-child,
.page-campaign-create .page-heading>div:first-child{min-width:0;flex:1 1 auto;}
.page-auto-reply .page-heading h1,
.page-auto-followup .page-heading h1,
.page-campaign-create .page-heading h1{
  margin:0 0 5px!important;
  font-size:27px!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-.035em!important;
  color:#1b2a40!important;
}
.page-auto-reply .page-heading p,
.page-auto-followup .page-heading p,
.page-campaign-create .page-heading p{
  margin:0!important;
  max-width:820px;
  font-size:13px!important;
  line-height:1.55!important;
  color:#7b8799!important;
}

/* Auto Follow-Up was the only major page still using a hard-coded inline
   two-column layout. Keep it spacious on desktop and explicitly responsive. */
.page-auto-followup .followup-layout-grid{

  width:100%;
  min-width:0;
}
.page-auto-followup .followup-layout-grid>.panel{min-width:0;}

.page-auto-followup .followup-steps{min-width:0;}
.page-auto-followup .followup-step-card{

  margin-bottom:12px;

  overflow:visible;
}
.page-auto-followup .followup-step-card input,
.page-auto-followup .followup-step-card select,
.page-auto-followup .followup-step-card textarea{width:100%;min-width:0;}
.page-auto-followup .followup-step-card [data-template-fields]>*{max-width:100%;min-width:0;}
.page-auto-followup .followup-scheduled-panel{overflow:hidden;}
.page-auto-followup .followup-table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}

/* Cleaner desktop containment for the pages that contain dense data. */
@media (min-width:1101px){
  .page-content{padding-left:24px;padding-right:24px;}
  .page-content .panel{border-radius:12px;}
  .page-content .form-panel{border-radius:12px;}
  .page-content .table-wrap,.page-auto-followup .followup-table-wrap{border-radius:0 0 12px 12px;}
  .page-campaign-create .form-panel{max-width:1120px;}
  .page-settings .api-rd-layout,.page-system .two-column,.page-contacts .two-column{align-items:start;}
}

/* Tablet / small-laptop hardening. Complex configuration pages stack instead
   of becoming two narrow, visually cramped columns. */
@media (min-width:721px) and (max-width:1100px){
  
  .page-auto-reply .page-heading,
  .page-auto-followup .page-heading,
  .page-campaign-create .page-heading{height:auto!important;min-height:58px!important;align-items:flex-start!important;gap:14px!important;}

  .page-auto-followup .followup-layout-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;}
  .page-auto-followup .followup-help-panel{padding:18px!important;}
  .page-auto-followup .followup-step-card{padding:15px!important;}

  .page-contacts .two-column,
  .page-system .two-column,
  .page-settings .api-rd-layout{grid-template-columns:minmax(0,1fr)!important;}

  .page-campaign-create .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-campaign-create .template-field,.page-campaign-create .variable-group{min-width:0;}

  .page-businesses .table-wrap,
  .page-contacts .table-wrap,
  .page-templates .table-wrap,
  .page-system .table-wrap,
  .page-dashboard .table-wrap{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}

  .modal{padding:18px;}
  .modal-card{width:min(620px,100%);max-width:100%;}
}

/* Portrait tablet: forms with long Meta/API fields are more comfortable as a
   single column and avoid label/input collisions. */
@media (min-width:721px) and (max-width:860px){
  .page-campaign-create .form-grid{grid-template-columns:minmax(0,1fr)!important;}
  .page-settings .api-rd-form{grid-template-columns:minmax(0,1fr)!important;}
  .page-settings .api-rd-span-2{grid-column:auto!important;}
  .page-agents .agent-list{min-width:0;}
}

/* Phone — premium single-column rhythm. Data tables remain real tables and
   scroll inside their own cards; they never force the whole page sideways. */
@media (max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important;}
  .main-area,.page-content{width:100%;max-width:100%;overflow-x:clip;}

  .page-auto-reply .page-heading,
  .page-auto-followup .page-heading,
  .page-campaign-create .page-heading{
    min-height:0!important;
    height:auto!important;
    margin-bottom:14px!important;
    padding:0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .page-auto-reply .page-heading h1,
  .page-auto-followup .page-heading h1,
  .page-campaign-create .page-heading h1{font-size:24px!important;line-height:1.18!important;}
  .page-auto-reply .page-heading p,
  .page-auto-followup .page-heading p,
  .page-campaign-create .page-heading p{font-size:11.5px!important;line-height:1.5!important;}

  .page-content .panel,.page-content .form-panel{max-width:100%;border-radius:12px;}
  .page-content .panel-header{padding:12px 13px;gap:8px;}
  .page-content .panel-header>div{min-width:0;}
  .page-content .panel-header h2{font-size:14px;line-height:1.3;}
  .page-content .panel-header p{font-size:10.5px;line-height:1.45;margin-top:3px;}
  .page-content .form-panel{padding:14px!important;}
  .page-content .form-grid,.page-content .settings-grid,.page-content .two-column{grid-template-columns:minmax(0,1fr)!important;}

  /* Prevent mobile Safari/Chrome zooming form controls and give touch targets
     a consistent premium rhythm. */
  .page-content input:not([type="checkbox"]):not([type="radio"]),
  .page-content select,
  .page-content textarea{font-size:16px!important;max-width:100%;}
  .page-content input[type="file"]{padding:8px;font-size:13px!important;}
  .page-content textarea{line-height:1.45;}

  .page-content .table-wrap,.page-content .followup-table-wrap{
    width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  }
  .page-content .table-wrap>table{width:max-content;min-width:640px;}
  .page-content .table-wrap th,.page-content .table-wrap td{white-space:nowrap;}

  .page-auto-followup .followup-layout-grid{grid-template-columns:minmax(0,1fr)!important;}
  
  .page-auto-followup .followup-help-panel ol{margin-bottom:0;}
  .page-auto-followup .followup-step-card{margin-bottom:10px!important;}
  .page-auto-followup .followup-step-card>div:first-child{gap:8px!important;margin-bottom:10px!important;}
  .page-auto-followup .followup-step-card>div:first-child .btn{flex:0 0 auto;min-width:82px!important;}
  .page-auto-followup #add-followup-step{width:100%;justify-content:center;}
  .page-auto-followup .followup-scheduled-panel{margin-top:12px!important;}
  
  .page-auto-followup .followup-sequence-table td:nth-child(3){max-width:280px;white-space:normal!important;}

  /* Heading action areas are full-width and cannot collide with titles. */
  .page-heading .heading-actions{width:100%!important;min-width:0!important;flex-wrap:wrap!important;}
  .page-heading .heading-actions>*{min-width:0;}
  .page-heading .heading-actions .btn{max-width:100%;}

  /* Notices and consent cards remain readable on very narrow screens. */
  .notice,.consent-box{align-items:flex-start;}
  .notice i,.consent-box i{flex:0 0 auto;}

  .modal-card{max-width:100%!important;max-height:calc(100dvh - 20px)!important;padding:15px!important;border-radius:13px!important;}
  .modal-head{gap:10px;}

  .page-dashboard .support-number{font-size:clamp(34px,12vw,48px);overflow-wrap:anywhere;}
  .page-system .system-check-card{min-width:0;}
  .page-system .system-backup-form{padding:12px;}
}

/* Small phones: reduce padding rather than squeezing typography/components. */
@media (max-width:390px){
  .page-content{padding-left:8px!important;padding-right:8px!important;}
  .page-content .form-panel{padding:12px!important;}
  .page-content .panel-header{padding-left:11px;padding-right:11px;}
  .page-auto-followup .followup-help-panel{padding:13px!important;}
  
  .page-auto-followup .followup-step-card>div:first-child strong{font-size:13px;}
  .page-auto-followup .followup-step-card>div:first-child .btn{min-width:76px!important;padding-left:10px!important;padding-right:10px!important;}
  .page-content .notice,.page-content .consent-box{padding:10px!important;}
}

/* v22 cleanup: remove the last hard-coded responsive grid from Auto Reply. */
.page-auto-reply .auto-reply-layout-grid{
  display:grid;

  width:100%;
  min-width:0;
}
.page-auto-reply .auto-reply-layout-grid>.panel{min-width:0;}
@media (min-width:721px) and (max-width:900px){
  .page-auto-reply .auto-reply-layout-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;}
}
@media (max-width:720px){
  .page-auto-reply .auto-reply-layout-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
}

/* ========================================================================
   v23 — AUTO FOLLOW-UP MOBILE POLISH + NON-SCROLLING NAVIGATION
   Presentation only. Follow-up scheduling/sending behavior is unchanged.
   ======================================================================== */

/* Follow-Up: give the creation panel one clear spacing system instead of
   nested form-panel + inline padding. */
.page-auto-followup .followup-create-panel{
  padding:0!important;
  
}

.page-auto-followup .followup-customer-grid{

  align-items:end;
}

.page-auto-followup .followup-step-head>strong{
  display:flex;
  align-items:center;
  min-width:0;
  
  line-height:1.25;
  
}
.page-auto-followup .followup-step-head>strong::before{
  content:"";
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#1fbb6c;
  box-shadow:0 0 0 4px rgba(31,187,108,.10);
  flex:0 0 auto;
}
.page-auto-followup .followup-step-remove{
  min-height:32px!important;
  color:#b42318;
  background:#fff;
  border-color:#f0c7c4;
}
.page-auto-followup .followup-step-card label{
  font-size:12.5px;
  line-height:1.35;
}
.page-auto-followup .followup-step-card [data-template-fields]{
  display:grid;
  gap:9px;
  min-width:0;
}
.page-auto-followup .followup-step-card [data-template-fields] input,
.page-auto-followup .followup-step-card [data-template-fields] textarea,
.page-auto-followup .followup-step-card [data-template-fields] select{
  margin-top:0!important;
}

.page-auto-followup .followup-help-panel ol{
  margin-top:12px;
  
}

/* Navigation: menu itself never scrolls. Use screen-height-aware density so
   every role's visible menu label remains on screen at once. */

.sidebar .brand{flex:0 0 auto;}
.sidebar .side-nav{
  flex:0 0 auto!important;
  min-height:0;
  overflow:visible!important;
}
.sidebar .side-nav a{
  flex:0 0 auto;
  min-width:0;
  white-space:nowrap;
  overflow:visible;
}
.sidebar .side-nav .nav-label{
  display:block;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}
.sidebar .sidebar-user,
.sidebar .sidebar-developer{flex:0 0 auto;}
.sidebar .sidebar-user{margin-top:auto!important;}

@media (max-width:900px){
  .sidebar{
    width:min(292px,calc(100vw - 28px))!important;
    max-width:min(292px,calc(100vw - 28px))!important;
  }
}

/* Standard phone Follow-Up layout. */
@media (max-width:720px){
  .page-auto-followup{padding-top:10px!important;}
  .page-auto-followup .page-heading{
    margin-bottom:12px!important;
  }
  .page-auto-followup .page-heading h1{
    font-size:22px!important;
    letter-spacing:-.025em!important;
  }
  .page-auto-followup .page-heading p{
    max-width:38rem;
    font-size:11.5px!important;
    line-height:1.48!important;
  }
  .page-auto-followup .followup-layout-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .page-auto-followup .followup-create-panel{
    width:100%;
    border-radius:13px!important;
  }
  .page-auto-followup .followup-create-panel>.panel-header{
    padding:13px 14px!important;
    min-height:0!important;
  }
  .page-auto-followup .followup-create-panel>.panel-header h2{
    font-size:14.5px!important;
  }
  .page-auto-followup .followup-create-panel>.panel-header p{
    font-size:10.5px!important;
  }
  
  .page-auto-followup .followup-customer-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .page-auto-followup .followup-customer-grid label{
    font-size:12px;
  }
  .page-auto-followup .followup-steps{
    margin-top:15px!important;
  }
  .page-auto-followup .followup-step-card{
    
    margin:0 0 11px!important;
    border:1px solid #e1e8ef!important;
    border-radius:12px!important;
    background:#fbfcfd!important;
  }
  .page-auto-followup .followup-step-head{
    margin-bottom:11px!important;
  }
  .page-auto-followup .followup-step-head>strong{
    font-size:13.5px!important;
  }
  .page-auto-followup .followup-step-remove{
    min-width:0!important;
    padding:5px 9px!important;
    font-size:11px!important;
  }
  .page-auto-followup .followup-step-card label{
    margin-top:11px!important;
    font-size:11.5px!important;
    color:#344359;
  }
  .page-auto-followup .followup-step-card label:first-of-type{
    margin-top:0!important;
  }
  .page-auto-followup .followup-step-card input:not([type="file"]),
  .page-auto-followup .followup-step-card select,
  .page-auto-followup .followup-step-card textarea{
    min-height:44px;
    border-radius:9px!important;
    border-color:#d7e0e9!important;
    background:#fff;
  }
  .page-auto-followup .followup-step-card textarea{
    min-height:88px;
  }
  .page-auto-followup .followup-step-card input[type="file"]{
    min-height:44px;
    border-radius:9px!important;
    background:#fff;
  }
  .page-auto-followup .followup-step-card [data-template-fields]{
    margin-top:11px!important;
    padding-top:11px;
    border-top:1px solid #e7edf3;
    gap:8px;
  }
  .page-auto-followup .followup-step-card [data-template-fields] strong{
    font-size:11.5px;
    line-height:1.35;
    color:#26384f;
  }
  .page-auto-followup .followup-step-card [data-template-fields] small{
    font-size:10px!important;
    line-height:1.4!important;
  }
  .page-auto-followup .followup-form-actions{

    margin-top:14px!important;
  }
  .page-auto-followup .followup-form-actions .btn{
    
    min-height:44px!important;
    justify-content:center!important;
    border-radius:10px!important;
  }

  /* Help belongs below the form and reads like a compact information card. */
  .page-auto-followup .followup-help-panel{
    width:100%;
    
    border-radius:13px!important;
  }
  .page-auto-followup .followup-help-panel h2{
    font-size:14px!important;
  }
  .page-auto-followup .followup-help-panel ol{
    margin:10px 0 0!important;
    padding-left:20px!important;
    font-size:11px!important;
    line-height:1.58!important;
  }
  .page-auto-followup .followup-help-panel li+li{margin-top:4px;}
  .page-auto-followup .followup-help-panel .notice{
    display:block!important;
    margin-top:12px!important;
    padding:11px!important;
    border-radius:10px!important;
  }
  .page-auto-followup .followup-help-panel .notice strong{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11.5px;
  }
  .page-auto-followup .followup-help-panel .notice p{
    font-size:10.5px!important;
    line-height:1.45!important;
  }

  /* Scheduled sequences become proper mobile cards; no sideways table scroll. */
  .page-auto-followup .followup-scheduled-panel{
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .page-auto-followup .followup-scheduled-panel>.panel-header{
    margin-bottom:8px;
    padding:0 2px 7px!important;
    border-bottom:0!important;
    background:transparent!important;
  }
  .page-auto-followup .followup-scheduled-panel>.panel-header h2{
    font-size:14.5px!important;
  }
  .page-auto-followup .followup-scheduled-panel>.panel-header p{
    font-size:10.5px!important;
  }
  .page-auto-followup .followup-table-wrap{
    overflow:visible!important;
    width:100%!important;
  }
  .page-auto-followup .followup-sequence-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
  }
  .page-auto-followup .followup-sequence-table thead{display:none!important;}
  .page-auto-followup .followup-sequence-table tbody{
    display:grid!important;
    width:100%!important;
    gap:10px!important;
  }
  .page-auto-followup .followup-sequence-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    overflow:hidden;
    background:#fff;
    border:1px solid #e1e8ef;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(17,32,51,.035);
  }
  .page-auto-followup .followup-sequence-table td{
    display:grid!important;
    grid-template-columns:94px minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:9px 12px!important;
    border-bottom:1px solid #edf1f5!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:11.5px!important;
    line-height:1.4!important;
  }
  .page-auto-followup .followup-sequence-table td:last-child{
    border-bottom:0!important;
  }
  .page-auto-followup .followup-sequence-table td::before{
    content:attr(data-label);
    color:#79879a;
    font-size:9.5px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.035em;
    text-transform:uppercase;
  }
  .page-auto-followup .followup-sequence-table td>strong{
    font-size:12.5px!important;
    line-height:1.25!important;
    color:#17283d;
  }
  .page-auto-followup .followup-sequence-table td small{
    margin-top:2px!important;
    font-size:10px!important;
    line-height:1.42!important;
    white-space:normal!important;
  }
  .page-auto-followup .followup-sequence-table td form,
  .page-auto-followup .followup-sequence-table td form .btn{
    width:100%!important;
  }
  .page-auto-followup .followup-sequence-table td form .btn{
    min-height:38px!important;
    border-radius:9px!important;
  }
  .page-auto-followup .followup-sequence-table td[colspan]{
    display:block!important;
    padding:0!important;
    border:0!important;
  }
  .page-auto-followup .followup-sequence-table td[colspan]::before{display:none!important;}
  .page-auto-followup .followup-sequence-table .empty-state{
    padding:20px 14px!important;
    background:#fff;
    border-radius:12px;
  }
}

@media (max-width:390px){
  .page-auto-followup .followup-create-form{padding:12px!important;}
  .page-auto-followup .followup-step-card{padding:11px!important;}
  .page-auto-followup .followup-sequence-table td{
    grid-template-columns:82px minmax(0,1fr)!important;
    padding:8px 10px!important;
    gap:8px!important;
  }
}

/* Compact drawer by height, not by scroll. All navigation remains visible. */
@media (max-height:760px){
  .sidebar .brand{
    height:56px!important;
    min-height:56px!important;
    padding:0 15px!important;
    font-size:15px!important;
    gap:9px!important;
  }
  .sidebar .brand-icon{font-size:25px!important;}
  .sidebar .side-nav{
    padding:8px 9px!important;
    gap:3px!important;
  }
  .sidebar .side-nav a{
    min-height:36px!important;
    padding:7px 10px!important;
    border-radius:9px!important;
    font-size:11.5px!important;
    gap:10px!important;
  }
  .sidebar .side-nav a i{
    width:18px!important;
    font-size:12.5px!important;
  }
  .sidebar .sidebar-user{
    margin:0 10px 6px!important;
    padding:7px 5px 0!important;
    gap:7px!important;
  }
  .sidebar .sidebar-user .avatar{
    width:30px!important;
    height:30px!important;
    font-size:11px!important;
  }
  .sidebar .sidebar-user strong{font-size:11px!important;}
  .sidebar .sidebar-user small{font-size:9px!important;}
  .sidebar .sidebar-developer{
    margin:2px 10px 7px!important;
    padding:6px!important;
    border-radius:9px!important;
  }
  .sidebar .sidebar-developer .developer-card-row{
    grid-template-columns:28px minmax(0,1fr) auto!important;
    gap:6px!important;
  }
  .sidebar .sidebar-developer .developer-card-top{
    grid-template-columns:28px minmax(0,1fr)!important;
  }
  .sidebar .sidebar-developer .developer-icon{
    width:28px!important;
    height:28px!important;
    border-radius:8px!important;
  }
  .sidebar .sidebar-developer .developer-icon i{font-size:12px!important;}
  .sidebar .sidebar-developer .developer-label{font-size:8px!important;}
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{font-size:9.5px!important;}
  .sidebar .sidebar-developer .developer-divider{margin:4px 0!important;}
}

@media (max-height:620px){
  .sidebar .brand{
    height:48px!important;
    min-height:48px!important;
  }
  .sidebar .side-nav{
    padding-top:5px!important;
    padding-bottom:5px!important;
    gap:2px!important;
  }
  .sidebar .side-nav a{
    min-height:31px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
    font-size:10.5px!important;
  }
  .sidebar .sidebar-user{
    padding-top:4px!important;
    margin-bottom:4px!important;
  }
  .sidebar .sidebar-developer{
    margin-top:1px!important;
    margin-bottom:4px!important;
    padding:4px 6px!important;
  }
  .sidebar .sidebar-developer .developer-card-row{min-height:24px!important;}
  .sidebar .sidebar-developer .developer-icon{width:24px!important;height:24px!important;}
  .sidebar .sidebar-developer .developer-divider{margin:2px 0!important;}
}

/* ========================================================================
   V25 DESKTOP SIDEBAR — PREMIUM COMPACT NAVIGATION (SLIGHTLY LARGER)
   Desktop only. Keeps every menu item visible without an internal scrollbar,
   improves vertical rhythm/alignment, and leaves tablet/mobile behavior intact.
   ======================================================================== */
@media (min-width:901px){
  .sidebar{
    width:262px!important;
    padding:0 0 10px!important;
    background:
      radial-gradient(circle at 18% 4%,rgba(38,205,125,.12),transparent 16rem),
      linear-gradient(180deg,#0d2b46 0%,#081d31 57%,#071827 100%)!important;
    border-right:1px solid rgba(255,255,255,.055)!important;
    box-shadow:10px 0 34px rgba(4,18,32,.10)!important;
  }
  .main-area{margin-left:262px!important;}

  .sidebar .brand{
    height:74px!important;
    min-height:74px!important;
    padding:0 17px!important;
    gap:12px!important;
    border-bottom:1px solid rgba(255,255,255,.085)!important;
    font-size:18px!important;
    font-weight:820!important;
    letter-spacing:-.028em!important;
  }
  .sidebar .brand-icon{
    width:41px!important;
    height:41px!important;
    border-radius:12px!important;
    font-size:24px!important;
    border:1px solid rgba(78,226,151,.18)!important;
    background:linear-gradient(145deg,rgba(42,211,126,.17),rgba(42,211,126,.065))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(0,0,0,.08)!important;
  }

  .sidebar .side-nav{
    padding:13px 11px 10px!important;
    gap:4px!important;
  }
  .sidebar .side-nav a{
    min-height:42px!important;
    padding:8px 11px!important;
    gap:11px!important;
    border-radius:10px!important;
    border:1px solid transparent!important;
    font-size:13.2px!important;
    font-weight:690!important;
    letter-spacing:-.006em!important;
    color:#c8d7e5!important;
    transform:none!important;
    box-shadow:none!important;
  }
  .sidebar .side-nav a i{
    width:21px!important;
    min-width:21px!important;
    font-size:14.5px!important;
    color:#9fb5c8!important;
    text-align:center!important;
  }
  .sidebar .side-nav a:hover{
    background:rgba(255,255,255,.052)!important;
    border-color:rgba(255,255,255,.055)!important;
    color:#f5f9fc!important;
    transform:none!important;
  }
  .sidebar .side-nav a:hover i{color:#d8e5ef!important;}
  .sidebar .side-nav a.active,
  .sidebar .side-nav a[aria-current="page"]{
    background:linear-gradient(90deg,rgba(34,198,112,.20),rgba(34,198,112,.085))!important;
    border-color:rgba(67,220,143,.16)!important;
    color:#52df95!important;
    box-shadow:inset 3px 0 0 #31d27f,0 4px 14px rgba(0,0,0,.075)!important;
  }
  .sidebar .side-nav a.active i,
  .sidebar .side-nav a[aria-current="page"] i{color:#52df95!important;}
  .sidebar .nav-unread-badge{
    min-width:20px!important;
    height:20px!important;
    padding:0 6px!important;
    font-size:9.5px!important;
    box-shadow:none!important;
  }

  .sidebar .sidebar-user{
    margin:0 12px 8px!important;
    padding:11px 6px 0!important;
    min-height:53px!important;
    gap:10px!important;
    border-top:1px solid rgba(255,255,255,.09)!important;
  }
  .sidebar .sidebar-user .avatar{
    width:36px!important;
    height:36px!important;
    font-size:12px!important;
    box-shadow:0 4px 12px rgba(0,0,0,.12)!important;
  }
  .sidebar .sidebar-user strong{
    font-size:12.6px!important;
    line-height:1.18!important;
    color:#f3f7fb!important;
  }
  .sidebar .sidebar-user small{
    margin-top:2px!important;
    font-size:10px!important;
    line-height:1.15!important;
    color:#91a8bb!important;
  }
  .sidebar .online-dot{
    width:7px!important;
    height:7px!important;
    box-shadow:0 0 0 4px rgba(38,217,120,.08)!important;
  }

  .sidebar .sidebar-developer{
    margin:2px 11px 0!important;
    padding:9px 10px!important;
    border-radius:12px!important;
    border:1px solid rgba(73,220,151,.14)!important;
    background:linear-gradient(180deg,rgba(18,47,75,.92),rgba(10,32,54,.94))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(3,13,27,.13)!important;
  }
  .sidebar .sidebar-developer .developer-card-row{
    grid-template-columns:33px minmax(0,1fr) auto!important;
    min-height:33px!important;
    gap:7px!important;
  }
  .sidebar .sidebar-developer .developer-card-top{
    grid-template-columns:33px minmax(0,1fr)!important;
  }
  .sidebar .sidebar-developer .developer-icon{
    width:33px!important;
    height:33px!important;
    border-radius:9px!important;
    background:rgba(9,57,81,.82)!important;
  }
  .sidebar .sidebar-developer .developer-icon i{font-size:13.2px!important;}
  .sidebar .sidebar-developer .developer-copy{gap:1px!important;}
  .sidebar .sidebar-developer .developer-label{
    font-size:9px!important;
    line-height:1.1!important;
    color:#9fb1c2!important;
  }
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{
    font-size:11px!important;
    line-height:1.15!important;
  }
  .sidebar .sidebar-developer .developer-divider{
    margin:5px 0!important;
    border-top-color:rgba(173,192,210,.16)!important;
  }
  .sidebar .sidebar-developer .developer-arrow{font-size:12px!important;}
}

/* Desktop-height safety: keep every menu label + footer visible on shorter PCs
   without adding a sidebar scrollbar. */
@media (min-width:901px) and (max-height:820px){
  .sidebar .brand{
    height:64px!important;
    min-height:64px!important;
  }
  .sidebar .brand-icon{width:36px!important;height:36px!important;font-size:21.5px!important;}
  .sidebar .side-nav{
    padding-top:8px!important;
    padding-bottom:7px!important;
    gap:2px!important;
  }
  .sidebar .side-nav a{
    min-height:37px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
    font-size:12px!important;
  }
  .sidebar .sidebar-user{
    min-height:44px!important;
    padding-top:7px!important;
    margin-bottom:5px!important;
  }
  .sidebar .sidebar-user .avatar{width:32px!important;height:32px!important;}
  .sidebar .sidebar-developer{padding:6px 8px!important;margin-bottom:0!important;}
  .sidebar .sidebar-developer .developer-card-row{grid-template-columns:28px minmax(0,1fr) auto!important;min-height:28px!important;}
  .sidebar .sidebar-developer .developer-card-top{grid-template-columns:28px minmax(0,1fr)!important;}
  .sidebar .sidebar-developer .developer-icon{width:28px!important;height:28px!important;}
  .sidebar .sidebar-developer .developer-divider{margin:3px 0!important;}
}

@media (min-width:901px) and (max-height:700px){
  .sidebar .brand{height:54px!important;min-height:54px!important;font-size:15px!important;}
  .sidebar .brand-icon{width:31px!important;height:31px!important;font-size:18px!important;}
  .sidebar .side-nav{padding:5px 9px!important;gap:1px!important;}
  .sidebar .side-nav a{min-height:31px!important;padding:5px 9px!important;font-size:10.8px!important;}
  .sidebar .side-nav a i{font-size:12px!important;}
  .sidebar .sidebar-user{min-height:39px!important;padding-top:5px!important;margin-bottom:3px!important;}
  .sidebar .sidebar-user .avatar{width:28px!important;height:28px!important;font-size:10px!important;}
  .sidebar .sidebar-user strong{font-size:10.5px!important;}
  .sidebar .sidebar-user small{font-size:8.5px!important;}
  .sidebar .sidebar-developer{padding:4px 7px!important;}
  .sidebar .sidebar-developer .developer-card-row{grid-template-columns:24px minmax(0,1fr) auto!important;min-height:24px!important;}
  .sidebar .sidebar-developer .developer-card-top{grid-template-columns:24px minmax(0,1fr)!important;}
  .sidebar .sidebar-developer .developer-icon{width:24px!important;height:24px!important;border-radius:7px!important;}
  .sidebar .sidebar-developer .developer-icon i{font-size:10px!important;}
  .sidebar .sidebar-developer .developer-label{font-size:7px!important;}
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{font-size:8.7px!important;}
  .sidebar .sidebar-developer .developer-divider{margin:2px 0!important;}
}

/* ========================================================================
   V26 DESKTOP SIDEBAR — LIGHTER TYPE + BETTER HEIGHT USE
   Keeps the v25 premium structure, but removes the overly-bold feel and
   uses the available desktop height with slightly larger/taller controls.
   Tablet/mobile remain untouched.
   ======================================================================== */
@media (min-width:901px) and (min-height:821px){
  .sidebar .brand{
    height:78px!important;
    min-height:78px!important;
    padding:0 18px!important;
    gap:12px!important;
    font-size:18.5px!important;
    font-weight:700!important;
    letter-spacing:-.018em!important;
  }
  .sidebar .brand-icon{
    width:42px!important;
    height:42px!important;
    font-size:24px!important;
  }

  .sidebar .side-nav{
    padding:15px 11px 12px!important;
    gap:clamp(5px,.72vh,7px)!important;
  }
  .sidebar .side-nav a{
    min-height:clamp(44px,5.15vh,48px)!important;
    padding:9px 11px!important;
    gap:11px!important;
    font-size:13.7px!important;
    font-weight:600!important;
    line-height:1.2!important;
    letter-spacing:-.003em!important;
  }
  .sidebar .side-nav a i{
    width:22px!important;
    min-width:22px!important;
    font-size:15.2px!important;
  }

  .sidebar .sidebar-user{
    margin:0 12px 9px!important;
    padding:12px 6px 0!important;
    min-height:57px!important;
    gap:10px!important;
  }
  .sidebar .sidebar-user .avatar{
    width:38px!important;
    height:38px!important;
    font-size:12.5px!important;
  }
  .sidebar .sidebar-user strong{
    font-size:12.9px!important;
    font-weight:600!important;
  }
  .sidebar .sidebar-user small{
    font-size:10.3px!important;
    font-weight:400!important;
  }

  .sidebar .sidebar-developer{
    margin:2px 11px 0!important;
    padding:10px 10px!important;
  }
  .sidebar .sidebar-developer .developer-card-row{
    grid-template-columns:34px minmax(0,1fr) auto!important;
    min-height:35px!important;
  }
  .sidebar .sidebar-developer .developer-card-top{
    grid-template-columns:34px minmax(0,1fr)!important;
  }
  .sidebar .sidebar-developer .developer-icon{
    width:34px!important;
    height:34px!important;
  }
  .sidebar .sidebar-developer .developer-label{
    font-size:9.2px!important;
    font-weight:400!important;
  }
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{
    font-size:11.2px!important;
    font-weight:600!important;
  }
  .sidebar .sidebar-developer .developer-divider{margin:6px 0!important;}
}

/* On medium-height desktop screens, keep the same lighter typography while
   preserving the no-scroll guarantee from the compact safety layer. */
@media (min-width:901px) and (min-height:701px) and (max-height:820px){
  .sidebar .side-nav a{font-weight:600!important;}
  .sidebar .sidebar-user strong{font-weight:600!important;}
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{font-weight:600!important;}
}

/* ========================================================================
   V28 PAGE-ONLY DESKTOP CONSISTENCY
   IMPORTANT: Every rule is scoped to .page-content. The approved v26
   sidebar/navigation/topbar are intentionally untouched.
   ======================================================================== */
@media (min-width:901px){
  .page-content{
    --v28-title:24px;
    --v28-subtitle:12.5px;
    --v28-section:14.5px;
    --v28-body:13px;
    --v28-meta:10.5px;
    --v28-label:12.5px;
    --v28-control:12.5px;
    --v28-th:10.5px;
    padding:21px 24px 25px!important;
    font-size:var(--v28-body)!important;
  }

  /* Page headings */
  .page-content .page-heading,
  .page-content .campaign-heading,
  .page-content .api-rd-page-heading{
    gap:14px!important;
    margin-bottom:17px!important;
  }
  .page-content .page-heading h1,
  .page-content .campaign-heading h1,
  .page-content .api-rd-page-heading h1,
  .page-content>h1{
    margin-bottom:4px!important;
    font-size:var(--v28-title)!important;
    line-height:1.18!important;
    font-weight:700!important;
    letter-spacing:-.022em!important;
  }
  .page-content .page-heading p,
  .page-content .campaign-heading p,
  .page-content .api-rd-page-heading p{
    font-size:var(--v28-subtitle)!important;
    line-height:1.48!important;
  }
  .page-content .heading-actions{gap:9px!important;}

  /* Cards and panels */
  .page-content .panel,
  .page-content .campaign-panel,
  .page-content .agent-card,
  .page-content .api-rd-card{
    border-radius:11px!important;
    box-shadow:0 2px 8px rgba(27,46,80,.035)!important;
  }
  .page-content .panel-header{
    min-height:50px!important;
    padding:11px 15px!important;
    gap:10px!important;
  }
  .page-content .panel-header h2,
  .page-content .panel h2,
  .page-content .campaign-toolbar-title h2,
  .page-content .api-rd-card h2{
    font-size:var(--v28-section)!important;
    line-height:1.25!important;
    font-weight:680!important;
    letter-spacing:-.01em!important;
  }
  .page-content .panel-header a{font-size:11.5px!important;}
  .page-content .form-panel{padding:18px!important;}
  .page-content .stack-form{gap:13px!important;}
  .page-content .form-grid{gap:12px 13px!important;}
  .page-content .two-column,
  .page-content .dashboard-grid{gap:15px!important;}

  /* Forms */
  .page-content label{
    gap:6px!important;
    font-size:var(--v28-label)!important;
    line-height:1.35!important;
    font-weight:620!important;
  }
  .page-content input:not([type="checkbox"]):not([type="radio"]),
  .page-content select,
  .page-content textarea{
    min-height:40px!important;
    padding:9px 11px!important;
    border-radius:8px!important;
    font-size:var(--v28-control)!important;
    line-height:1.4!important;
  }
  .page-content textarea{min-height:84px!important;}
  .page-content input[type="file"]{padding:7px 9px!important;}
  .page-content .help,
  .page-content .muted{
    font-size:var(--v28-meta)!important;
    line-height:1.45!important;
  }
  .page-content .checkbox{gap:8px!important;font-size:12.5px!important;}

  /* Buttons and badges */
  .page-content .btn{
    min-height:38px!important;
    padding:8px 13px!important;
    border-radius:8px!important;
    gap:7px!important;
    font-size:12px!important;
    line-height:1.18!important;
    font-weight:620!important;
  }
  .page-content .btn.small{
    min-height:30px!important;
    padding:6px 9px!important;
    font-size:11px!important;
  }
  .page-content .status{
    padding:4px 8px!important;
    border-radius:6px!important;
    font-size:10px!important;
    font-weight:650!important;
  }
  .page-content .alert{
    padding:10px 13px!important;
    margin-bottom:13px!important;
    border-radius:8px!important;
    font-size:12px!important;
  }
  .page-content .notice,
  .page-content .consent-box{
    gap:10px!important;
    padding:12px 14px!important;
    border-radius:9px!important;
  }
  .page-content .notice i,
  .page-content .consent-box i{font-size:17px!important;}
  .page-content .notice p,
  .page-content .consent-box p{font-size:11px!important;line-height:1.48!important;}

  /* Tables */
  .page-content .table-wrap th,
  .page-content table th{
    padding:10px 13px!important;
    font-size:var(--v28-th)!important;
    line-height:1.2!important;
    font-weight:680!important;
    letter-spacing:.04em!important;
  }
  .page-content .table-wrap td,
  .page-content table td{
    padding:11px 13px!important;
    font-size:var(--v28-body)!important;
    line-height:1.35!important;
  }
  .page-content .table-wrap td strong,
  .page-content table td strong{
    font-size:13px!important;
    line-height:1.25!important;
    font-weight:650!important;
  }
  .page-content .table-wrap td small,
  .page-content table td small,
  .page-content .table-subtext{
    margin-top:2px!important;
    font-size:var(--v28-meta)!important;
    line-height:1.3!important;
  }
  .page-content .empty,
  .page-content .empty-state{padding:28px 17px!important;font-size:12px!important;}

  /* Dashboard */
  .page-content .metric-grid{gap:12px!important;margin-bottom:15px!important;}
  .page-content .metric-card{
    min-height:80px!important;
    padding:14px 15px!important;
    gap:11px!important;
    border-radius:10px!important;
  }
  .page-content .metric-icon{width:38px!important;height:38px!important;font-size:14px!important;}
  .page-content .metric-card small,
  .page-content .campaign-stat span:first-child{font-size:11px!important;font-weight:580!important;}
  .page-content .metric-card strong,
  .page-content .campaign-stat strong{font-size:21px!important;font-weight:700!important;letter-spacing:-.025em!important;}
  .page-content .metric-card span:last-child,
  .page-content .campaign-stat span:last-child{font-size:9.5px!important;font-weight:560!important;}
  .page-content .support-number{font-size:44px!important;margin-top:20px!important;}
  .page-content .support-card>p{margin-bottom:18px!important;font-size:12px!important;}

  /* Campaigns */
  .page-content .campaign-heading{margin-bottom:16px!important;}
  .page-content .campaign-stats{gap:11px!important;margin-bottom:14px!important;}
  .page-content .campaign-stat{
    min-height:76px!important;
    height:auto!important;
    padding:12px 14px!important;
    gap:11px!important;
    border-radius:10px!important;
  }
  .page-content .campaign-stat-icon{width:36px!important;height:36px!important;border-radius:9px!important;}
  .page-content .campaign-toolbar{min-height:61px!important;padding:11px 14px!important;gap:12px!important;}
  .page-content .campaign-title-icon{width:33px!important;height:33px!important;border-radius:8px!important;}
  .page-content .campaign-toolbar-title span{font-size:10.5px!important;}
  .page-content .campaign-search{width:235px!important;}
  .page-content .campaign-search input,
  .page-content .campaign-filters select{height:38px!important;min-height:38px!important;font-size:11.5px!important;}
  .page-content .campaign-table th{height:39px!important;}
  .page-content .campaign-table td{font-size:12px!important;}
  .page-content .campaign-table .row-actions .btn{min-height:29px!important;padding:5px 8px!important;font-size:10.5px!important;}
  .page-content .campaign-table-footer{min-height:40px!important;padding:8px 13px!important;font-size:10.5px!important;}

  /* Businesses / Contacts / Templates / Agents */
  .page-content .agent-list{gap:11px!important;}
  .page-content.page-agents .agent-card{border-radius:10px!important;}
  .page-content.page-agents .agent-identity-copy h3{font-size:13px!important;font-weight:650!important;}
  .page-content.page-agents .agent-list .agent-metric strong{font-size:13.5px!important;font-weight:680!important;}
  .page-content.page-agents .agent-list .agent-actions .btn{font-size:11px!important;}
  .page-content .template-simple-note{padding:11px 14px!important;font-size:11.5px!important;}
  .page-content .template-empty-card{padding:28px!important;}
  .page-content .template-empty-icon{width:46px!important;height:46px!important;font-size:21px!important;}

  /* Auto Reply / Auto Follow-Up */
  .page-content.page-auto-reply .auto-reply-layout-grid,
  .page-content.page-auto-followup .followup-layout-grid{gap:15px!important;}
  .page-content.page-auto-followup .followup-create-form{padding:17px!important;}
  .page-content.page-auto-followup .followup-customer-grid{gap:12px!important;}
  .page-content.page-auto-followup .followup-step-card{
    padding:13px!important;
    margin-bottom:10px!important;
    border-radius:10px!important;
  }
  .page-content.page-auto-followup .followup-step-head{margin-bottom:10px!important;}
  .page-content.page-auto-followup .followup-step-head>strong{font-size:13px!important;font-weight:650!important;}
  .page-content.page-auto-followup .followup-step-card label{font-size:12px!important;}
  .page-content.page-auto-followup .followup-form-actions{margin-top:14px!important;}
  .page-content.page-auto-followup .followup-help-panel{padding:15px!important;}
  .page-content.page-auto-followup .followup-help-panel h2{font-size:14px!important;}
  .page-content.page-auto-followup .followup-help-panel ol{font-size:12px!important;line-height:1.48!important;}

  /* API Settings */
  .page-content.page-settings .api-rd-page-heading{margin-bottom:16px!important;}
  .page-content.page-settings .api-rd-layout{gap:15px!important;grid-template-columns:minmax(0,1.45fr) minmax(360px,.9fr)!important;}
  .page-content.page-settings .api-rd-card{border-radius:11px!important;}
  .page-content.page-settings .api-rd-card-head{padding:15px 17px 13px!important;gap:12px!important;}
  .page-content.page-settings .api-rd-card-title{gap:10px!important;}
  .page-content.page-settings .api-rd-title-icon{width:37px!important;height:37px!important;flex-basis:37px!important;border-radius:9px!important;font-size:16px!important;}
  .page-content.page-settings .api-rd-eyebrow{font-size:9px!important;font-weight:680!important;}
  .page-content.page-settings .api-rd-card-title p{margin-top:3px!important;font-size:10.5px!important;}
  .page-content.page-settings .api-rd-form{gap:12px 13px!important;padding:15px 17px 17px!important;}
  .page-content.page-settings .api-rd-field{grid-template-rows:auto 40px auto!important;gap:5px!important;}
  .page-content.page-settings .api-rd-label{font-size:11.5px!important;font-weight:620!important;}
  .page-content.page-settings .api-rd-field input{height:40px!important;min-height:40px!important;padding:9px 11px!important;font-size:12px!important;font-weight:550!important;}
  .page-content.page-settings .api-rd-field small{min-height:14px!important;font-size:9.5px!important;}
  .page-content.page-settings .api-rd-note{padding:11px 12px!important;gap:9px!important;border-radius:9px!important;}
  .page-content.page-settings .api-rd-note-icon{width:27px!important;height:27px!important;flex-basis:27px!important;}
  .page-content.page-settings .api-rd-note strong{font-size:11px!important;}
  .page-content.page-settings .api-rd-note p{font-size:10px!important;}
  .page-content.page-settings .api-rd-actions .btn,
  .page-content.page-settings .api-rd-platform-save .btn{min-height:38px!important;font-size:11.5px!important;border-radius:8px!important;}
  .page-content.page-settings .api-rd-overview-card{padding:14px 14px 0!important;}
  .page-content.page-settings .api-rd-overview-grid{gap:8px!important;}
  .page-content.page-settings .api-rd-stat{min-height:61px!important;grid-template-columns:33px minmax(0,1fr)!important;gap:9px!important;padding:9px 10px!important;border-radius:9px!important;}
  .page-content.page-settings .api-rd-stat-icon{width:33px!important;height:33px!important;border-radius:8px!important;font-size:12px!important;}
  .page-content.page-settings .api-rd-stat small{font-size:9.5px!important;}
  .page-content.page-settings .api-rd-stat strong{font-size:11px!important;font-weight:680!important;}

  /* System */
  .page-content.page-system .system-check-grid{gap:11px!important;margin-bottom:15px!important;}
  .page-content.page-system .system-check-card{padding:12px!important;border-radius:10px!important;}
  .page-content.page-system .system-check-card strong{font-size:11.5px!important;font-weight:650!important;}
  .page-content.page-system .system-check-card small{font-size:10px!important;}
  .page-content.page-system .system-backup-form,
  .page-content.page-system .system-recovery-steps{padding:14px!important;border-radius:10px!important;}

  /* Page-contained dialogs */
  .page-content .modal{padding:17px!important;}
  .page-content .modal-card{padding:17px!important;border-radius:11px!important;}
  .page-content .modal-head{margin-bottom:12px!important;}
  .page-content .modal-head h2,
  .page-content .app-dialog-copy h2{font-size:15.5px!important;font-weight:680!important;}
  .page-content .template-guide-step strong{font-size:13px!important;font-weight:650!important;}
  .page-content .template-guide-step p{font-size:11px!important;}

  /* Inbox: match outer page chrome only; do not shrink chat messages. */
  .page-content.page-inbox{padding:16px 18px 18px!important;}
  .page-content.page-inbox .inbox-heading{margin-bottom:10px!important;}
  .page-content.page-inbox .inbox-heading h1{font-size:23px!important;font-weight:700!important;}
  .page-content.page-inbox .inbox-heading p{font-size:12px!important;}
  .page-content.page-inbox .inbox-layout{border-radius:11px!important;}
}

/* ========================================================================
   V29 — COMPLETE PREMIUM UI REDESIGN (VISUAL / RESPONSIVE ONLY)
   No application behavior, IDs, form names, JS hooks, or routes are changed.
   ======================================================================== */
:root{
  --v29-brand:#12a867;
  --v29-brand-strong:#07834f;
  --v29-brand-soft:#eaf8f1;
  --v29-brand-glow:rgba(18,168,103,.14);
  --v29-navy:#081a2a;
  --v29-navy-2:#0b2237;
  --v29-navy-3:#102d46;
  --v29-canvas:#f4f7fa;
  --v29-surface:#ffffff;
  --v29-surface-soft:#f8fafc;
  --v29-surface-tint:#f2f7f5;
  --v29-ink:#182333;
  --v29-ink-2:#344256;
  --v29-muted:#748196;
  --v29-line:#e2e8ef;
  --v29-line-strong:#d4dde7;
  --v29-danger:#dc4651;
  --v29-warning:#d88a19;
  --v29-info:#3679d4;
  --v29-shadow-xs:0 1px 2px rgba(15,31,50,.035);
  --v29-shadow-sm:0 5px 18px rgba(15,31,50,.055);
  --v29-shadow-md:0 16px 42px rgba(15,31,50,.095);
  --v29-r-sm:9px;
  --v29-r-md:13px;
  --v29-r-lg:17px;
  --v29-sidebar:254px;
  --v29-topbar:66px;
  font-family:"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;
  color:var(--v29-ink);
}
html{scroll-behavior:smooth;}
body{

  letter-spacing:-.004em;

}

/* ---------- Global shell / navigation ---------- */
.sidebar{

  border-right:1px solid rgba(255,255,255,.055)!important;

}
.brand{
  
  min-height:74px!important;

  border-bottom:1px solid rgba(255,255,255,.07)!important;

  font-weight:690!important;
  letter-spacing:-.025em!important;
}
.brand-icon{

  min-width:40px!important;

  border:1px solid rgba(74,230,151,.22)!important;

}
.side-nav{

  justify-content:flex-start!important;

}
.side-nav a{

  line-height:1.15!important;
  
  box-shadow:none!important;
  transform:none!important;
}
.side-nav a i{
  
  min-width:21px!important;
  color:#91a8ba!important;
  font-size:14px!important;
  transition:color .18s ease!important;
}
.side-nav a:hover{
  
  border-color:rgba(255,255,255,.035)!important;

}
.side-nav a:hover i{color:#c9dae8!important;}
.side-nav a.active,.side-nav a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(20,174,105,.19),rgba(20,174,105,.08))!important;
  border-color:rgba(45,220,137,.16)!important;
  color:#49df93!important;
  box-shadow:inset 3px 0 0 #2bd27e!important;
}
.side-nav a.active i,.side-nav a[aria-current="page"] i{color:#49df93!important;}

.sidebar-user{
  flex:0 0 auto!important;

  border-top:1px solid rgba(255,255,255,.075)!important;
}
.sidebar-user .avatar{
  min-width:37px!important;
  
  font-weight:720!important;
  box-shadow:none!important;
}
.sidebar-user strong{line-height:1.18!important;}
.sidebar-user small{margin-top:2px!important;font-weight:400!important;line-height:1.2!important;}

.sidebar-developer{
  flex:0 0 auto!important;
  
  padding:8px 9px!important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.sidebar-developer .developer-card-row{min-height:31px!important;grid-template-columns:31px minmax(0,1fr) auto!important;gap:7px!important;}
.sidebar-developer .developer-card-top{grid-template-columns:31px minmax(0,1fr)!important;}
.sidebar-developer .developer-icon{width:31px!important;height:31px!important;border-radius:9px!important;}
.sidebar-developer .developer-icon i{font-size:11.5px!important;}
.sidebar-developer .developer-label{font-size:8.5px!important;font-weight:430!important;line-height:1.1!important;}
.sidebar-developer .developer-value,.sidebar-developer .developer-phone{font-size:10.4px!important;font-weight:590!important;line-height:1.2!important;}
.sidebar-developer .developer-value{color:#3fe39a!important;}
.sidebar-developer .developer-divider{margin:4px 0!important;border-top-color:rgba(255,255,255,.09)!important;}
.sidebar-developer .developer-arrow{color:#9ab0c0!important;font-size:11px!important;}

.main-area{min-width:0!important;}
.topbar{

  border-bottom:1px solid var(--v29-line)!important;

}
.header-company-logo{max-width:160px!important;}
.header-company-logo img{display:block!important;}

.top-user{color:#344256!important;font-size:12px!important;font-weight:620!important;}
.account-menu-dropdown{

  overflow:hidden!important;
}
.account-menu-profile{background:#f8fafc!important;}

/* ---------- Page canvas ---------- */
.page-content{

  font-size:13px!important;
}

.muted{color:var(--v29-muted)!important;}

.panel,.metric-card,.agent-card,.auth-card,.api-rd-card,.campaign-panel{
  border:1px solid var(--v29-line)!important;
  border-radius:var(--v29-r-md)!important;
  background:var(--v29-surface)!important;
  box-shadow:var(--v29-shadow-xs)!important;
}

.two-column,.settings-grid,.dashboard-grid{gap:15px!important;}

/* ---------- Controls ---------- */
label{line-height:1.25!important;}

input[type="checkbox"],input[type="radio"]{width:auto!important;min-height:auto!important;box-shadow:none!important;accent-color:var(--v29-brand)!important;}

.help{color:#8793a4!important;}

.btn{

  transform:none!important;
}

.alert{
  margin-bottom:13px!important;

  border-width:1px!important;
  
  font-weight:530!important;
  
}

.status,.meta-status-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:23px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  font-size:9.5px!important;
  font-weight:680!important;
  line-height:1!important;
  letter-spacing:.005em!important;
}
.status.success,.status.sent,.status.delivered,.status.read,.status.completed,.status.active{background:#eaf8f1!important;color:#08794a!important;}
.status.failed,.status.error{background:#fff0f1!important;color:#bf3642!important;}
.status.pending,.status.processing,.status.partial{background:#fff6e9!important;color:#a56a13!important;}
.status.muted,.status.stopped,.status.cancelled{background:#eef2f6!important;color:#64748b!important;}

/* ---------- Tables ---------- */
.table-wrap,.campaign-table-wrap,.followup-table-wrap{
  width:100%!important;

}
table{min-width:700px!important;}

td strong{font-size:12px!important;}
td small,.table-subtext{display:block!important;margin-top:2px!important;color:#8491a3!important;font-size:9.8px!important;line-height:1.3!important;}
.empty,.empty-state{padding:28px 16px!important;font-size:11.5px!important;text-align:center!important;}
.progress{overflow:hidden!important;}

/* ---------- Dashboard ---------- */

.metric-card{
  min-width:0!important;

}
.metric-icon{min-width:38px!important;box-shadow:none!important;}

.metric-card strong{margin-top:1px!important;line-height:1.05!important;}

.support-number{margin-top:18px!important;}

/* ---------- Campaigns ---------- */

/* ---------- Agents / cards ---------- */
.agent-list,.agent-grid{gap:12px!important;}
.agent-card{background:linear-gradient(180deg,#fff,#fdfefe)!important;}
.agent-identity{gap:10px!important;}
.agent-identity-copy h3{margin:0!important;color:#223146!important;font-size:13px!important;font-weight:640!important;}
.agent-subline{color:#8793a4!important;font-size:10px!important;}
.agent-actions{gap:7px!important;}
.agent-metric{padding:9px 10px!important;border:1px solid #edf1f5!important;border-radius:9px!important;background:#fafcfd!important;}

/* ---------- Auto Reply ---------- */
.page-auto-reply .auto-reply-layout-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr)!important;gap:15px!important;align-items:start!important;}

.page-auto-reply .checkbox-row{padding:10px 11px!important;border-radius:9px!important;background:#f8fafc!important;border:1px solid #e8edf2!important;}

/* ---------- Auto Follow-Up ---------- */
.page-auto-followup .followup-layout-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(285px,.7fr)!important;
  
  align-items:start!important;
}
.page-auto-followup .followup-create-panel{overflow:visible!important;}

.page-auto-followup .followup-step-card{
  margin:0!important;

}
.page-auto-followup .followup-step-head{margin-bottom:10px!important;padding-bottom:9px!important;}

.page-auto-followup [data-template-fields]{padding:0!important;}

.page-auto-followup [data-template-fields] input,.page-auto-followup [data-template-fields] textarea{margin-top:6px!important;}

/* ---------- API Settings ---------- */

.page-settings .api-rd-card-title p{margin-top:2px!important;}

.page-settings .api-rd-field small{min-height:13px!important;}

.page-settings .api-rd-stat{grid-template-columns:31px minmax(0,1fr)!important;gap:8px!important;}

/* ---------- System ---------- */

.page-system .system-check-card{border:1px solid var(--v29-line)!important;border-radius:10px!important;}

.page-system .system-backup-form,.page-system .system-recovery-steps{padding:13px!important;border-radius:10px!important;}

/* ---------- Templates / contacts / businesses ---------- */
.template-simple-note{padding:10px 12px!important;border-radius:9px!important;font-size:10.8px!important;}
.template-empty-icon{width:44px!important;height:44px!important;border-radius:12px!important;font-size:19px!important;}
.template-data-summary{border-radius:9px!important;background:#f8fafc!important;border:1px solid #e9eef3!important;}
.business-table-actions,.row-actions{gap:6px!important;flex-wrap:wrap!important;}
.import-contacts-panel,.table-panel{border-radius:var(--v29-r-md)!important;}

/* ---------- Modals ---------- */

.modal-head h2,.app-dialog-copy h2{font-size:15px!important;font-weight:650!important;color:#223146!important;}

/* ---------- Inbox — visual polish only; scrolling/send logic untouched ---------- */
.page-inbox{padding:15px 17px 17px!important;max-width:none!important;}
.inbox-heading{margin-bottom:10px!important;}
.inbox-heading h1{font-size:23px!important;}

.conversation-search input{font-size:11.5px!important;}
.conversation-item{border-top-color:#edf1f4!important;}

.conversation-item .avatar{min-width:39px!important;}

.chat-header{gap:10px!important;}
.chat-person{gap:9px!important;}
.chat-actions{gap:6px!important;}.chat-actions select{padding:6px 27px 6px 9px!important;border-radius:8px!important;}
.chat-more-toggle{border-radius:8px!important;}

.outbound .bubble{background:#dcf8e7!important;}

.rich-reply-box textarea{border:1px solid #d7e0e7!important;border-radius:10px!important;font-size:12.5px!important;box-shadow:none!important;}
.reply-tool-button,.voice-record-button,.send-button{width:40px!important;height:40px!important;min-width:40px!important;border-radius:10px!important;}

.customer-details span{border:1px solid #e7edf2!important;}
.quick-reply-menu,.reply-attachment-menu,.chat-more-menu{border:1px solid #dde5ec!important;border-radius:11px!important;background:#fff!important;box-shadow:0 16px 42px rgba(14,32,48,.16)!important;}

/* ---------- Public legal pages ---------- */

.public-site-header{height:68px!important;}

.legal-hero{padding:0 4px!important;}
.legal-card{padding:clamp(22px,4vw,38px)!important;border:1px solid var(--v29-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--v29-shadow-sm)!important;}.legal-card h2{font-size:15px!important;font-weight:650!important;}.legal-card p{color:#566579!important;font-size:12.5px!important;line-height:1.7!important;}
.public-footer{border-top:1px solid var(--v29-line)!important;background:#fff!important;}

/* ---------- Desktop height safety: all nav content stays visible, no sidebar scroll ---------- */
@media (min-width:1101px) and (max-height:820px){
  :root{--v29-topbar:62px;}
  .brand{height:61px!important;min-height:61px!important;font-size:15.5px!important;}.brand-icon{width:35px!important;height:35px!important;min-width:35px!important;font-size:19px!important;}
  .side-nav{padding:7px 9px 5px!important;}.side-nav a{padding:6px 10px!important;}.side-nav a i{font-size:12.5px!important;}
  .sidebar-user{margin-bottom:4px!important;padding-top:7px!important;}.sidebar-user .avatar{min-width:31px!important;}.sidebar-user strong{font-size:10.8px!important;}.sidebar-user small{font-size:8.6px!important;}
  .sidebar-developer{padding:5px 7px!important;margin-bottom:5px!important;}.sidebar-developer .developer-card-row{min-height:25px!important;grid-template-columns:25px minmax(0,1fr) auto!important;}.sidebar-developer .developer-card-top{grid-template-columns:25px minmax(0,1fr)!important;}.sidebar-developer .developer-icon{width:25px!important;height:25px!important;}.sidebar-developer .developer-label{font-size:7.4px!important;}.sidebar-developer .developer-value,.sidebar-developer .developer-phone{font-size:8.8px!important;}.sidebar-developer .developer-divider{margin:2px 0!important;}
}
@media (min-width:1101px) and (max-height:680px){
  .brand{height:52px!important;min-height:52px!important;}.side-nav{padding-top:4px!important;gap:1px!important;}.side-nav a{min-height:31px!important;padding:4px 8px!important;font-size:10.5px!important;}.side-nav a i{font-size:11px!important;}
  .sidebar-user{min-height:39px!important;padding-top:4px!important;}.sidebar-user .avatar{width:27px!important;height:27px!important;min-width:27px!important;}.sidebar-developer{padding:3px 6px!important;}.sidebar-developer .developer-card-row{min-height:22px!important;}.sidebar-developer .developer-icon{width:22px!important;height:22px!important;}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  :root{--v29-topbar:62px;}
  .sidebar{z-index:60!important;box-shadow:22px 0 55px rgba(3,17,29,.22)!important;}

  .mobile-page-title{margin-left:4px!important;max-width:38vw!important;color:#2a394d!important;font-size:13px!important;font-weight:650!important;}

}

/* ---------- Phone / small tablet ---------- */
@media (max-width:760px){
  :root{--v29-topbar:58px;}
  body{font-size:13px!important;}
  .topbar{height:58px!important;min-height:58px!important;padding:0 9px!important;}
  .mobile-page-title{max-width:42vw!important;font-size:12.5px!important;}
  .top-user,.business-context-pill,.connection-label-full{display:none!important;}
  .connection-label-mobile{display:inline!important;}
  .connection-pill{min-height:31px!important;padding:6px 9px!important;font-size:9.5px!important;}
  .account-menu-button,.menu-button{width:36px!important;height:36px!important;}
  .page-content{padding:13px!important;}
  .page-heading,.campaign-heading,.api-rd-page-heading{flex-direction:column!important;align-items:stretch!important;gap:11px!important;margin-bottom:14px!important;}
  .page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{font-size:22px!important;}
  .page-heading p,.campaign-heading p,.api-rd-page-heading p{font-size:11px!important;}
  .heading-actions{width:100%!important;justify-content:flex-start!important;gap:7px!important;}
  .heading-actions .btn{flex:1 1 auto!important;}
  .panel,.metric-card,.agent-card,.campaign-panel,.api-rd-card{border-radius:12px!important;}
  .panel-header{min-height:48px!important;padding:10px 12px!important;}.panel-header h2,.panel h2{font-size:13px!important;}
  .form-panel{padding:13px!important;}
  input,select,textarea{min-height:41px!important;font-size:16px!important;border-radius:9px!important;}
  textarea{min-height:82px!important;}
  .btn{min-height:39px!important;font-size:11.5px!important;padding:8px 11px!important;}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .metric-card{min-height:78px!important;padding:11px!important;gap:9px!important;}.metric-icon{width:35px!important;height:35px!important;min-width:35px!important;}.metric-card strong{font-size:18px!important;}
  .agent-grid{grid-template-columns:1fr!important;}
  .form-grid,.page-auto-followup .followup-customer-grid{grid-template-columns:1fr!important;}
  .campaign-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}.campaign-stat{min-height:70px!important;padding:10px!important;}
  .campaign-toolbar{align-items:stretch!important;flex-direction:column!important;}.campaign-filters{width:100%!important;display:grid!important;grid-template-columns:1fr!important;}.campaign-search{width:100%!important;}
  .table-wrap,.campaign-table-wrap{border-radius:0!important;}
  table:not(.followup-sequence-table){min-width:680px!important;}

  /* Auto Follow-Up becomes a clean mobile form + card history. */
  .page-auto-followup .followup-layout-grid{gap:11px!important;}
  .page-auto-followup .followup-help-panel{order:0!important;padding:12px!important;}
  .page-auto-followup .followup-create-form{padding:12px!important;}
  .page-auto-followup .followup-step-card{padding:11px!important;border-radius:10px!important;}
  .page-auto-followup .followup-step-head{margin-bottom:9px!important;padding-bottom:8px!important;}
  .page-auto-followup .followup-form-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;}.page-auto-followup .followup-form-actions .btn{width:100%!important;}
  .page-auto-followup .followup-table-wrap{overflow:visible!important;}
  .page-auto-followup .followup-sequence-table{display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important;}
  .page-auto-followup .followup-sequence-table thead{display:none!important;}
  .page-auto-followup .followup-sequence-table tbody{display:grid!important;gap:9px!important;padding:10px!important;}
  .page-auto-followup .followup-sequence-table tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;border:1px solid var(--v29-line)!important;border-radius:11px!important;background:#fff!important;overflow:hidden!important;box-shadow:var(--v29-shadow-xs)!important;}
  .page-auto-followup .followup-sequence-table td{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;align-items:start!important;gap:8px!important;min-width:0!important;max-width:none!important;padding:9px 10px!important;border:0!important;border-bottom:1px solid #edf1f4!important;background:transparent!important;font-size:11px!important;overflow-wrap:anywhere!important;}
  .page-auto-followup .followup-sequence-table td:nth-child(1),.page-auto-followup .followup-sequence-table td:nth-child(3),.page-auto-followup .followup-sequence-table td:nth-child(5){grid-column:1/-1!important;}
  .page-auto-followup .followup-sequence-table td:last-child{border-bottom:0!important;}
  .page-auto-followup .followup-sequence-table td::before{content:attr(data-label)!important;color:#8a96a7!important;font-size:8.5px!important;font-weight:700!important;letter-spacing:.045em!important;text-transform:uppercase!important;}
  .page-auto-followup .followup-sequence-table td form,.page-auto-followup .followup-sequence-table td form .btn{width:100%!important;}.page-auto-followup .followup-sequence-table td form .btn{justify-content:center!important;}
  .page-auto-followup .followup-sequence-table td[colspan]{display:block!important;grid-column:1/-1!important;}.page-auto-followup .followup-sequence-table td[colspan]::before{display:none!important;}

  /* Mobile inbox keeps the existing chat-open behavior, only reskinned. */
  .page-inbox{padding:7px!important;}
  .inbox-heading{display:none!important;}
  .inbox-layout{height:calc(100dvh - 72px)!important;min-height:0!important;grid-template-columns:1fr!important;border-radius:11px!important;}
  .inbox-layout:not(.chat-open) .chat-panel{display:none!important;}
  .inbox-layout.chat-open .conversation-list{display:none!important;}
  .conversation-list{border-right:0!important;}.conversation-filter-bar{padding:9px!important;}.conversation-item{min-height:64px!important;}
  body:has(.inbox-layout.chat-open) .chat-panel{display:flex!important;width:100%!important;min-width:0!important;}
  body:has(.inbox-layout.chat-open) .chat-header{background:#fff!important;border-bottom-color:#e4e9ee!important;}
  body:has(.inbox-layout.chat-open) .messages{padding:9px 7px!important;}
  body:has(.inbox-layout.chat-open) .bubble{max-width:88%!important;}
}

/* ---------- Very small phones ---------- */
@media (max-width:430px){
  .page-content{padding:10px!important;}
  .page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{font-size:20px!important;}
  .heading-actions{display:grid!important;grid-template-columns:1fr!important;}.heading-actions .btn{width:100%!important;}
  .metric-grid{grid-template-columns:1fr 1fr!important;gap:7px!important;}.metric-card{padding:9px!important;}.metric-icon{width:32px!important;height:32px!important;min-width:32px!important;}.metric-card strong{font-size:17px!important;}
  .campaign-stats{grid-template-columns:1fr 1fr!important;}.campaign-stat{padding:9px!important;}
  .panel-header{padding:9px 10px!important;}.form-panel{padding:11px!important;}
  .modal{padding:8px!important;}.modal-card,.quick-reply-dialog{width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:13px!important;}.modal-card{padding:13px!important;}
  .page-auto-followup .followup-sequence-table tr{grid-template-columns:1fr!important;}.page-auto-followup .followup-sequence-table td{grid-column:1!important;grid-template-columns:88px minmax(0,1fr)!important;}.page-auto-followup .followup-sequence-table td:nth-child(1),.page-auto-followup .followup-sequence-table td:nth-child(3),.page-auto-followup .followup-sequence-table td:nth-child(5){grid-column:1!important;}
  .sidebar{width:min(268px,90vw)!important;}.brand{height:62px!important;min-height:62px!important;}.side-nav{padding-top:8px!important;gap:2px!important;}.side-nav a{min-height:38px!important;font-size:11.7px!important;}.sidebar-user{min-height:48px!important;}.sidebar-developer{margin-bottom:6px!important;}
}

/* ======================================================================
   V30 — GENUINE INTERFACE REDESIGN
   Presentation only. No application logic, form names, routes or JS hooks.
   ====================================================================== */
:root{
  --v30-font:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --v30-bg:#f4f7f6;
  --v30-surface:#ffffff;
  --v30-surface-soft:#f8faf9;
  --v30-surface-green:#eef8f3;
  --v30-text:#14221d;
  --v30-text-2:#42534c;
  --v30-muted:#7b8983;
  --v30-line:#e2e9e5;
  --v30-line-strong:#d2dcd7;
  --v30-green:#14965f;
  --v30-green-2:#18aa6d;
  --v30-green-dark:#0c7046;
  --v30-ink:#101c17;
  --v30-sidebar:#10221b;
  --v30-sidebar-2:#0b1914;
  --v30-danger:#d7484d;
  --v30-warning:#b87616;
  --v30-blue:#3478d4;
  --v30-violet:#377d72;
  --v30-shadow:0 10px 34px rgba(18,42,31,.065);
  --v30-shadow-hover:0 16px 40px rgba(18,42,31,.10);
  --v30-radius-xl:22px;
  --v30-radius-lg:18px;
  --v30-radius-md:13px;
  --v30-radius-sm:10px;
}

body{

  min-height:100dvh;
}
button,input,select,textarea{font-family:var(--v30-font)!important;}

/* ----- New application shell ----- */
.app-shell{min-height:100dvh!important;}
.sidebar{
  position:fixed!important;
  inset:14px auto 14px 14px!important;
  width:252px!important;
  height:auto!important;
  border-radius:24px!important;
  padding:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;

  z-index:40!important;
}
.sidebar-brand-row{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 14px 11px;
  flex:0 0 auto;
}
.brand{
  min-width:0!important;
  height:auto!important;
  padding:7px 8px!important;
  border:0!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  color:#fff!important;
  font-size:inherit!important;
  background:transparent!important;
}
.brand-icon{
  width:39px!important;height:39px!important;flex:0 0 39px!important;
  display:grid!important;place-items:center!important;
  border-radius:12px!important;
  font-size:22px!important;
  color:#eafff3!important;
  background:linear-gradient(145deg,#27bf78,#138d58)!important;
  box-shadow:0 8px 20px rgba(24,170,109,.28)!important;
}
.brand-copy{display:grid;gap:1px;min-width:0;}
.brand-copy strong{font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.1;color:#fff;}
.brand-copy small{font-size:9.5px;font-weight:500;color:#91aa9f;letter-spacing:.015em;}
.sidebar-close{display:none!important;margin-left:auto!important;color:#c6d7cf!important;}

.side-nav{
  flex:1 1 auto!important;
  min-height:0!important;
  padding:4px 12px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  overflow:visible!important;
}
.nav-section-label{
  display:block;
  padding:11px 11px 5px;
  color:#6f8b7e;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1;
}
.side-nav a{
  position:relative!important;
  min-height:39px!important;
  padding:6px 9px!important;
  border-radius:11px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  border:1px solid transparent!important;
  color:#afc3ba!important;
  background:transparent!important;
  font-size:11.8px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
}
.side-nav a:hover{
  color:#eef8f3!important;
  background:rgba(255,255,255,.055)!important;
  transform:translateX(1px)!important;
}
.side-nav a.active{
  color:#f7fffb!important;
  background:linear-gradient(90deg,rgba(34,183,112,.23),rgba(34,183,112,.10))!important;
  border-color:rgba(80,218,151,.12)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)!important;
}
.side-nav a.active::before{
  content:"";
  position:absolute;
  left:-12px;
  width:3px;height:21px;border-radius:0 4px 4px 0;
  background:#38d58d;
  box-shadow:0 0 12px rgba(56,213,141,.45);
}
.nav-icon{
  width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;
  border-radius:8px;
  color:#8da99c;
  background:rgba(255,255,255,.035);
  font-size:11.5px;
}
.side-nav a.active .nav-icon{color:#42dc94;background:rgba(54,213,144,.10);}
.side-nav a i{width:auto!important;text-align:initial!important;}
.nav-label{min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip;}
.nav-unread-badge{
  margin-left:auto!important;
  min-width:20px!important;height:20px!important;padding:0 6px!important;
  display:grid!important;place-items:center!important;
  border-radius:999px!important;
  
  font-size:8.5px!important;font-weight:700!important;
}
.sidebar-footer{padding:7px 12px 12px;flex:0 0 auto;}
.sidebar-user{
  margin:0!important;
  padding:10px!important;
  min-height:54px!important;

  gap:9px!important;
}
.sidebar-user .avatar{width:34px!important;height:34px!important;flex-basis:34px!important;background:#1e6f4e!important;color:#e9fff5!important;font-size:11px!important;}

.sidebar-user strong{font-size:10.8px!important;font-weight:600!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user small{font-size:8.6px!important;}
.online-dot{width:7px!important;height:7px!important;}
.sidebar-developer{
  margin:8px 0 0!important;

  overflow:hidden!important;
}
.developer-card-row{min-height:37px!important;padding:7px 9px!important;gap:8px!important;}
.developer-divider{height:1px!important;margin:0 9px!important;background:rgba(255,255,255,.055)!important;}
.developer-icon{width:25px!important;height:25px!important;flex-basis:25px!important;border-radius:7px!important;background:rgba(53,207,136,.08)!important;color:#51cf93!important;font-size:9px!important;}
.developer-label{font-size:7.6px!important;color:#6f8b7e!important;}
.developer-value,.developer-phone{font-size:8.8px!important;font-weight:600!important;color:#c9d9d1!important;}
.developer-arrow{font-size:8px!important;color:#637f72!important;}

.main-area{
  margin-left:280px!important;
  min-height:100dvh!important;
  padding:14px 14px 0 0!important;
  
}
.topbar{
  position:sticky!important;
  top:14px!important;
  z-index:30!important;
  height:64px!important;
  min-height:64px!important;
  margin:0!important;
  padding:0 14px 0 17px!important;
  
  border-radius:18px!important;

  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

.topbar-title-wrap{display:grid;gap:1px;}
.topbar-eyebrow{font-size:8.5px;line-height:1;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:#93a19b;}
.mobile-page-title{display:block!important;font-size:13.5px!important;line-height:1.2;font-weight:650!important;color:#1b2d25!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.menu-button{display:none!important;}

.header-company-logo{
  
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:4px 8px!important;border:1px solid #e7ece9!important;border-radius:9px!important;background:#fff!important;
}
.header-company-logo img{max-width:100%!important;object-fit:contain!important;}
.business-context-pill,.connection-pill{
  min-height:34px!important;
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  padding:6px 10px!important;
  border:1px solid #e2e8e5!important;border-radius:10px!important;
  background:#fff!important;
  color:#50625a!important;
  font-size:9.8px!important;font-weight:600!important;
  box-shadow:none!important;
}
.business-context-pill i{font-size:9.5px!important;}

.connection-dot{width:7px;height:7px;border-radius:50%;background:#e0a142;box-shadow:0 0 0 3px rgba(224,161,66,.10);}
.connection-pill.ok .connection-dot{box-shadow:0 0 0 3px rgba(36,182,117,.10);}
.connection-pill>i{display:none!important;}
.connection-label-mobile{display:none!important;}
.top-account{position:relative!important;margin:0!important;}
.account-profile{
  min-height:40px!important;
  max-width:190px!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  
  background:#fff!important;
  padding:4px 8px 4px 5px!important;
  cursor:pointer!important;
}
.account-profile:hover{background:#f9fbfa!important;border-color:#d8e3dd!important;}
.account-profile .avatar{width:30px!important;height:30px!important;flex-basis:30px!important;font-size:10px!important;background:#eaf7f0!important;color:#128451!important;}
.top-account-copy{display:grid;min-width:0;text-align:left;gap:0;line-height:1.15;}
.top-account-copy strong{font-size:9.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-account-copy small{font-size:7.8px;}
.account-chevron{font-size:8px;color:#8c9a93;margin-left:auto;}
.account-menu-dropdown{
  top:calc(100% + 9px)!important;right:0!important;
  width:220px!important;
  padding:7px!important;

}
.account-menu-profile{padding:9px!important;border-bottom:1px solid #edf1ef!important;gap:9px!important;}
.account-menu-item{border-radius:9px!important;min-height:38px!important;font-size:10.5px!important;}

/* ----- Workspace ----- */
.page-content{
  max-width:1780px!important;
  margin:0 auto!important;
  padding:28px 10px 38px!important;
  background:transparent!important;
}
.page-heading,.campaign-heading,.api-rd-page-heading{

  margin:0 0 20px!important;
}

.page-heading p,.campaign-heading p,.api-rd-page-heading p{

  font-weight:500!important;
  
}

/* ----- Cards and typography ----- */
.panel,.metric-card,.agent-card,.campaign-panel,.api-rd-card,.system-check-card,.auth-card{
  border:1px solid var(--v30-line)!important;
  border-radius:var(--v30-radius-lg)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--v30-shadow)!important;
}
.panel{overflow:hidden!important;}
.panel-header{
  min-height:58px!important;
  padding:13px 16px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  border-bottom:1px solid #e9efec!important;
  background:linear-gradient(180deg,#fff,#fbfdfc)!important;
}
.panel-header h2,.panel h2{
  margin:0!important;
  color:#21322a!important;
  font-size:13px!important;
  font-weight:650!important;
  letter-spacing:-.015em!important;
}
.panel-header p{font-size:9.5px!important;margin:3px 0 0!important;line-height:1.45!important;color:var(--v30-muted)!important;}
.panel-header>a{color:var(--v30-green)!important;font-size:9.7px!important;font-weight:650!important;}

.two-column{gap:16px!important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr)!important;}

/* ----- Controls ----- */

input,select,textarea{
  width:100%;

  font-weight:500!important;
  outline:none!important;

}
textarea{resize:vertical!important;line-height:1.55!important;}
input::placeholder,textarea::placeholder{font-weight:400!important;}

.help,.muted{color:#82908a!important;font-size:9.4px!important;line-height:1.5!important;}
code{border-radius:6px!important;background:#eef3f0!important;color:#2f6550!important;padding:2px 5px!important;font-size:.9em!important;}
.btn{

  display:inline-flex!important;align-items:center!important;justify-content:center!important;

}

.btn.danger{color:#bd3940!important;border-color:#efd1d4!important;background:#fff8f8!important;}

.btn.full{width:100%!important;}
.icon-button{
  width:36px!important;height:36px!important;min-width:36px!important;
  
  background:transparent!important;
}

/* ----- Status, alerts and notices ----- */
.status{
  
  display:inline-flex!important;justify-content:center!important;

}
.status.approved,.status.sent,.status.delivered,.status.read,.status.active{background:#ecf8f2!important;color:#16764d!important;border-color:#d5eee1!important;}
.status.failed,.status.cancelled,.status.suspended{background:#fff1f2!important;color:#b63840!important;border-color:#f3d8da!important;}
.status.pending,.status.queued,.status.processing{background:#fff7e9!important;color:#9c681a!important;border-color:#f2e2c4!important;}
.alert,.notice,.consent-box{
  border-radius:12px!important;
  border-width:1px!important;
  box-shadow:none!important;
}

.notice,.consent-box{padding:13px!important;border-color:#e2e9e5!important;}
.notice strong,.consent-box strong{font-size:10.5px!important;}
.notice p,.consent-box p{line-height:1.55!important;}

/* ----- Dashboard ----- */
.metric-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;

}
.metric-card{

  display:flex!important;
  
  position:relative!important;
  overflow:hidden!important;
}
.metric-card::after{content:"";position:absolute;inset:auto -22px -27px auto;width:72px;height:72px;border-radius:50%;background:rgba(31,164,102,.035);}
.metric-card:hover{background:#fff!important;}
.metric-icon{
  width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:12px!important;
  display:grid!important;place-items:center!important;
  font-size:14px!important;
  background:#edf8f2!important;color:#15915a!important;
}

.metric-card small{display:block!important;margin-bottom:3px!important;}

.dashboard-grid{grid-template-columns:minmax(0,1.7fr) minmax(240px,.55fr)!important;}
.support-card{padding-bottom:14px!important;}
.support-number{line-height:1!important;font-weight:650!important;margin:20px 16px 5px!important;}
.support-card>p{margin:0 16px 17px!important;}
.support-card>.btn{margin:0 16px!important;width:calc(100% - 32px)!important;}

/* ----- Tables ----- */
.table-panel{overflow:hidden!important;}
.table-wrap,.campaign-table-wrap,.followup-table-wrap{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  background:#fff!important;
}
table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  
  font-size:10.5px!important;
}
th{

  white-space:nowrap!important;
}
td{

  background:#fff!important;

  vertical-align:middle!important;
}

tbody tr:hover td{background:#fbfdfc!important;}

.table-subtext{display:block!important;margin-top:2px!important;color:#91a099!important;font-size:8.7px!important;}
.truncate{max-width:310px!important;}
.empty{padding:28px 15px!important;color:#92a099!important;text-align:center!important;}
.row-actions,.business-table-actions{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important;}

/* ----- Contacts / business / agents / templates ----- */
.agent-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:13px!important;}
.agent-card{padding:16px!important;box-shadow:none!important;}
.agent-card h3{font-size:12px!important;font-weight:650!important;color:#273930!important;}
.agent-stats{gap:7px!important;}
.agent-stats span{background:#f8faf9!important;border-color:#e9efec!important;border-radius:10px!important;padding:8px!important;}
.import-contacts-panel{align-self:start!important;}

.import-or span{color:#99a69f!important;}
.import-columns-help,.import-samples{border-color:#e6ece9!important;}

/* ----- Campaigns ----- */

.campaign-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.campaign-stat{
  height:auto!important;

}
.campaign-stat-icon{width:38px!important;height:38px!important;border-radius:11px!important;background:#eff4f1!important;color:#63766c!important;}

.campaign-stat span:first-child{font-size:8.5px!important;font-weight:600!important;color:#89978f!important;}
.campaign-stat strong{letter-spacing:-.035em!important;}
.campaign-stat span:last-child{font-size:8px!important;color:#99a59f!important;}
.campaign-panel{overflow:hidden!important;box-shadow:var(--v30-shadow)!important;}
.campaign-toolbar{
  min-height:62px!important;
  
  display:flex!important;justify-content:space-between!important;gap:12px!important;

}

.campaign-title-icon{width:34px!important;height:34px!important;border-radius:10px!important;}
.campaign-toolbar-title strong{font-size:11px!important;font-weight:650!important;}
.campaign-toolbar-title span{font-size:8.4px!important;color:#8e9c95!important;}

.campaign-search{width:235px!important;}
.campaign-search input,.campaign-filters select{min-height:36px!important;height:36px!important;font-size:10px!important;background:#fff!important;}
.campaign-table-footer{min-height:42px!important;padding:9px 13px!important;font-size:9px!important;}
.campaign-notice{margin-top:14px!important;}

/* ----- Auto Reply / Follow Up ----- */
.page-auto-reply .auto-reply-layout-grid,
.page-auto-followup .followup-layout-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.6fr) minmax(250px,.62fr)!important;
  gap:16px!important;
  align-items:start!important;
}
.page-auto-followup .followup-create-panel,.page-auto-reply .panel{box-shadow:var(--v30-shadow)!important;}
.page-auto-followup .followup-create-form{padding:0!important;}
.page-auto-followup .followup-customer-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-bottom:12px!important;}
.page-auto-followup .followup-steps{display:grid!important;gap:11px!important;margin-top:12px!important;}
.page-auto-followup .followup-step-card{
  position:relative!important;
  padding:14px!important;
  border:1px solid #dde7e2!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff,#fbfdfc)!important;
  box-shadow:none!important;
}
.page-auto-followup .followup-step-card::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 4px 4px 0;background:#52bd89;}
.page-auto-followup .followup-step-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 11px!important;padding:0 0 10px 4px!important;border-bottom:1px dashed #e3eae6!important;}
.page-auto-followup .followup-step-head>strong{font-size:11.5px!important;font-weight:650!important;color:#263b31!important;}
.page-auto-followup [data-template-fields]>div{padding:11px!important;border:1px solid #e3eae6!important;border-radius:11px!important;background:#f8faf9!important;}
.page-auto-followup .followup-form-actions{margin-top:14px!important;}

.page-auto-followup .followup-scheduled-panel{margin-top:16px!important;}
.page-auto-followup .followup-sequence-table td:nth-child(3){max-width:450px!important;white-space:normal!important;overflow-wrap:anywhere!important;}

/* ----- API settings ----- */
.page-settings .api-rd-layout{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(310px,.68fr)!important;align-items:start!important;}
.page-settings .api-rd-card{box-shadow:var(--v30-shadow)!important;}
.page-settings .api-rd-card-head{
  padding:14px 16px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  border-bottom:1px solid #e8eeeb!important;background:#fbfdfc!important;
}
.page-settings .api-rd-card-title{display:flex!important;align-items:center!important;gap:10px!important;}
.page-settings .api-rd-title-icon{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:11px!important;font-size:13px!important;}
.page-settings .api-rd-title-icon.platform{background:#eff3f9!important;color:#5276a8!important;}
.page-settings .api-rd-eyebrow{display:block!important;letter-spacing:.11em!important;text-transform:uppercase!important;}
.page-settings .api-rd-card-title h2{margin:2px 0 0!important;font-size:12px!important;font-weight:650!important;color:#25372e!important;}
.page-settings .api-rd-card-title p{font-size:8.8px!important;}
.page-settings .api-rd-state{min-height:25px!important;padding:4px 8px!important;border-radius:999px!important;font-size:8.2px!important;}
.page-settings .api-rd-form{padding:15px 16px 17px!important;}
.page-settings .api-rd-field{gap:5px!important;}
.page-settings .api-rd-label{font-size:10.2px!important;}
.page-settings .api-rd-field small{font-size:8.5px!important;}
.page-settings .api-rd-note{padding:11px!important;border:1px solid #e1e9e5!important;border-radius:11px!important;background:#f7faf8!important;}
.page-settings .api-rd-overview-card{padding:13px!important;}
.page-settings .api-rd-overview-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.page-settings .api-rd-stat{min-height:60px!important;padding:9px!important;border:1px solid #e5ebe8!important;box-shadow:none!important;}
.page-settings .api-rd-stat-icon{width:31px!important;height:31px!important;border-radius:9px!important;font-size:10.5px!important;}
.page-settings .api-rd-stat strong{font-size:10px!important;font-weight:650!important;}
.page-settings .api-rd-platform-card{margin-top:16px!important;}

/* ----- System ----- */
.page-system .system-check-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-bottom:16px!important;}
.page-system .system-check-card{padding:12px!important;display:flex!important;gap:10px!important;box-shadow:none!important;}
.page-system .system-check-icon{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:10px!important;}
.page-system .system-check-card strong{display:block!important;font-size:10.2px!important;font-weight:650!important;}
.page-system .system-check-card small{display:block!important;margin-top:2px!important;font-size:8.7px!important;line-height:1.45!important;}
.page-system .system-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;}

/* ----- Modal ----- */
.modal{padding:18px!important;}
.modal-card{
  
  max-height:calc(100dvh - 36px)!important;
  overflow:auto!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:20px!important;
  padding:20px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(9,29,19,.22)!important;
}
.modal-head{padding-bottom:11px!important;border-bottom:1px solid #e9eeec!important;}

/* ----- Inbox: new workspace look, functional behavior retained ----- */
.page-inbox .inbox-heading{margin-bottom:14px!important;}
.inbox-layout{
  height:calc(100dvh - 150px)!important;
  min-height:545px!important;
  grid-template-columns:300px minmax(440px,1fr) 265px!important;

  overflow:hidden!important;
}

.conversation-filter-bar{padding:12px!important;}
.conversation-search input{height:39px!important;min-height:39px!important;padding-left:36px!important;border-radius:10px!important;}
.conversation-item{min-height:68px!important;padding:10px 12px!important;gap:10px!important;border-top:0!important;}

.conversation-item .avatar{width:39px!important;height:39px!important;font-size:10px!important;}
.conversation-copy strong{font-size:10.8px!important;font-weight:650!important;color:#2a3c33!important;}
.conversation-copy small{font-size:8.8px!important;color:#899790!important;}
.conversation-title-row time{font-size:7.8px!important;color:#99a59f!important;}

.chat-header{height:62px!important;min-height:62px!important;padding:9px 11px!important;}
.chat-person-copy strong{font-size:11.5px!important;font-weight:650!important;}.chat-person-copy small{font-size:8.5px!important;}
.chat-actions select{height:36px!important;min-height:36px!important;max-width:158px!important;font-size:9.5px!important;}
.chat-more-toggle{height:36px!important;width:38px!important;}
.service-window{min-height:31px!important;padding:7px 10px!important;font-size:8.8px!important;}
.messages{padding:18px 19px!important;}
.message-row{margin-bottom:9px!important;}
.bubble{max-width:min(75%,650px)!important;border-radius:11px!important;padding:8px 10px!important;box-shadow:0 1px 2px rgba(0,0,0,.10)!important;}
.bubble p{font-size:11px!important;line-height:1.48!important;}.bubble span{font-size:8px!important;}
.rich-reply-box{min-height:58px!important;padding:8px 9px!important;gap:6px!important;background:#fff!important;border-top:1px solid #e1e8e4!important;}
.rich-reply-box textarea{min-height:40px!important;height:40px!important;padding:9px 11px!important;background:#f7faf8!important;}
.reply-tool-button,.send-button,.voice-record-button{width:40px!important;height:40px!important;flex-basis:40px!important;}
.customer-panel{padding:18px 15px!important;}
.customer-panel h3{font-size:11px!important;font-weight:650!important;}
.customer-details span{border-color:#e5ebe8!important;background:#fff!important;border-radius:10px!important;padding:9px!important;font-size:9px!important;}

/* ----- Login: separate premium composition ----- */
.auth-body-premium{
  min-height:100dvh!important;
  display:grid!important;
  place-items:center!important;
  padding:22px!important;
  background:
    radial-gradient(circle at 15% 15%,rgba(27,168,104,.17),transparent 25rem),
    radial-gradient(circle at 90% 80%,rgba(58,107,158,.10),transparent 26rem),
    #eef4f1!important;
}
.login-shell{
  width:min(100%,1000px)!important;
  min-height:590px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.75fr)!important;
  overflow:hidden!important;
  border:1px solid rgba(210,222,216,.9)!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 28px 85px rgba(18,51,35,.14)!important;
}
.login-welcome{
  padding:42px!important;
  display:flex!important;flex-direction:column!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(48,202,133,.18),transparent 19rem),
    linear-gradient(150deg,#102a20,#0d1c17)!important;
  color:#fff!important;
}
.login-brand-icon{background:#1eaa69!important;border-radius:13px!important;}.login-brand-lockup strong{font-size:14px!important;}.login-brand-lockup small{font-size:9px!important;color:#8ca99b!important;}
.login-eyebrow{font-size:8.5px!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#80c5a5!important;}
.login-welcome-copy h2{font-size:34px!important;line-height:1.12!important;letter-spacing:-.045em!important;font-weight:600!important;max-width:500px!important;}
.login-welcome-copy>p{font-size:11px!important;line-height:1.65!important;color:#a9bbb2!important;max-width:500px!important;}
.login-feature-list{gap:9px!important;}.login-feature-list span{min-height:38px!important;border-radius:11px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.065)!important;font-size:9.5px!important;}
.login-welcome-footer{font-size:8.5px!important;color:#7d988b!important;}
.login-form-panel{padding:48px 44px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:#fff!important;}
.login-company-logo{margin-bottom:28px!important;}.login-company-logo img{max-width:165px!important;height:auto!important;}
.login-title-wrap h1{font-size:28px!important;font-weight:650!important;letter-spacing:-.04em!important;color:#1a2c23!important;}.login-title-wrap p{font-size:10px!important;color:#88968f!important;}
.login-form{gap:14px!important;}.login-form label{font-size:10px!important;}.login-input-wrap input{height:43px!important;min-height:43px!important;padding-left:36px!important;}.login-submit{min-height:43px!important;}
.login-help{font-size:9px!important;color:#86948d!important;}.login-legal-links{font-size:8.5px!important;}.login-copyright{font-size:8px!important;}

/* ----- Responsive: tablet ----- */
@media(max-width:1100px){
  .sidebar{
    inset:10px auto 10px 10px!important;
    
    transform:translateX(calc(-100% - 20px))!important;
    transition:transform .22s ease!important;
    border-radius:22px!important;
  }
  .sidebar-open .sidebar{transform:translateX(0)!important;}
  .sidebar-overlay{display:block!important;position:fixed!important;inset:0!important;background:rgba(8,25,17,.48)!important;z-index:35!important;opacity:0!important;visibility:hidden!important;transition:.2s ease!important;backdrop-filter:blur(2px)!important;}
  .sidebar-open .sidebar-overlay{opacity:1!important;visibility:visible!important;}
  .sidebar-close{display:grid!important;}
  body.sidebar-open{overflow:hidden!important;}
  .main-area{padding:10px 10px 0!important;}
  .topbar{top:10px!important;padding-left:10px!important;}

  .dashboard-grid,.two-column,.page-auto-reply .auto-reply-layout-grid,.page-auto-followup .followup-layout-grid,.page-settings .api-rd-layout,.page-system .system-columns{grid-template-columns:1fr!important;}
  .page-settings .api-rd-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}

  .chat-header{flex-wrap:wrap!important;}
  .chat-person{flex:1 1 100%!important;}.chat-actions{width:100%!important;flex:1 1 100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(105px,.7fr) 38px!important;gap:6px!important;margin-left:0!important;}
  
}

@media(max-width:860px){
  .page-heading,.campaign-heading,.api-rd-page-heading{align-items:flex-start!important;flex-direction:column!important;gap:11px!important;}
  .heading-actions{justify-content:flex-start!important;width:100%!important;}
  .campaign-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .page-system .system-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .page-settings .api-rd-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .inbox-layout{grid-template-columns:245px minmax(0,1fr)!important;}
  .header-company-logo{display:none!important;}
}

/* ----- Phone ----- */
@media(max-width:700px){
  body{font-size:13px!important;}
  .main-area{padding:7px 7px 0!important;}
  .topbar{height:58px!important;min-height:58px!important;top:7px!important;padding:0 8px!important;border-radius:14px!important;}
  .topbar-eyebrow{display:none!important;}
  .mobile-page-title{font-size:12px!important;}
  
  .business-context-pill{display:none!important;}
  .connection-pill{min-width:34px!important;min-height:32px!important;padding:5px 7px!important;font-size:8px!important;}
  .connection-label-full{display:none!important;}.connection-label-mobile{display:inline!important;}
  .account-profile{min-height:34px!important;padding:2px!important;border:0!important;background:transparent!important;}
  .account-profile .avatar{width:30px!important;height:30px!important;}.top-account-copy,.account-chevron{display:none!important;}
  .page-content{padding:19px 4px 25px!important;}
  .page-heading,.campaign-heading,.api-rd-page-heading{margin-bottom:14px!important;}
  .page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{font-size:22px!important;}
  .page-heading p,.campaign-heading p,.api-rd-page-heading p{font-size:9.5px!important;margin-top:4px!important;}
  .heading-actions{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;}
  .heading-actions>.btn,.heading-actions>form,.heading-actions>form .btn{width:100%!important;}
  .panel,.metric-card,.agent-card,.campaign-panel,.api-rd-card,.system-check-card{border-radius:14px!important;box-shadow:0 6px 20px rgba(18,42,31,.045)!important;}
  .panel-header{min-height:50px!important;padding:11px 12px!important;}
  .panel-header h2,.panel h2{font-size:11.5px!important;}
  .form-panel{padding:13px!important;}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:11px!important;}
  .metric-card{min-height:83px!important;padding:11px!important;gap:8px!important;}
  .metric-icon{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:10px!important;font-size:11px!important;}
  .metric-card strong{font-size:17px!important;}.metric-card small{font-size:7.7px!important;}
  .form-grid,.page-auto-followup .followup-customer-grid{grid-template-columns:1fr!important;gap:10px!important;}
  input,select,textarea{min-height:41px!important;font-size:11px!important;}
  .btn{min-height:40px!important;font-size:10.2px!important;}
  .campaign-stats{gap:8px!important;}.campaign-stat{min-height:72px!important;padding:10px!important;}.campaign-stat-icon{width:32px!important;height:32px!important;}.campaign-stat strong{font-size:16px!important;}
  .campaign-toolbar{align-items:stretch!important;flex-direction:column!important;padding:10px!important;}.campaign-filters{width:100%!important;display:grid!important;grid-template-columns:1fr!important;}.campaign-search{width:100%!important;}.campaign-search input,.campaign-filters select{height:40px!important;min-height:40px!important;}
  .table-wrap,.campaign-table-wrap{overflow:auto!important;border-radius:0!important;}
  table:not(.followup-sequence-table){min-width:670px!important;}
  th{height:38px!important;}td{padding:10px 11px!important;}
  .page-auto-followup .followup-layout-grid{gap:11px!important;}
  .page-auto-followup .followup-create-panel{order:1!important;}.page-auto-followup .followup-help-panel{order:0!important;padding:12px!important;}
  .page-auto-followup .followup-step-card{padding:11px!important;border-radius:12px!important;}.page-auto-followup .followup-form-actions{display:grid!important;grid-template-columns:1fr!important;}.page-auto-followup .followup-form-actions .btn{width:100%!important;}
  .page-auto-followup .followup-table-wrap{overflow:visible!important;}

  .page-auto-followup .followup-sequence-table tbody{gap:8px!important;}
  .page-auto-followup .followup-sequence-table tr{grid-template-columns:1fr 1fr!important;}
  .page-auto-followup .followup-sequence-table td{display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;align-items:start!important;gap:7px!important;min-width:0!important;max-width:none!important;padding:8px 9px!important;border:0!important;border-bottom:1px solid #edf1ef!important;font-size:9.5px!important;overflow-wrap:anywhere!important;}
  .page-auto-followup .followup-sequence-table td:nth-child(1),.page-auto-followup .followup-sequence-table td:nth-child(3),.page-auto-followup .followup-sequence-table td:nth-child(5){grid-column:1/-1!important;}
  .page-auto-followup .followup-sequence-table td::before{font-size:7.5px!important;font-weight:700!important;letter-spacing:.055em!important;text-transform:uppercase!important;color:#94a19b!important;}
  .page-auto-followup .followup-sequence-table td:last-child{border-bottom:0!important;}.page-auto-followup .followup-sequence-table td form,.page-auto-followup .followup-sequence-table td form .btn{width:100%!important;}
  .page-settings .api-rd-overview-grid{grid-template-columns:1fr 1fr!important;}.page-settings .api-rd-form{grid-template-columns:1fr!important;padding:12px!important;}.page-settings .api-rd-span-2{grid-column:1!important;}.page-settings .api-rd-card-head{padding:11px 12px!important;align-items:flex-start!important;}.page-settings .api-rd-state{flex:0 0 auto!important;}
  .page-system .system-check-grid{grid-template-columns:1fr!important;}
  .page-inbox .inbox-heading{display:none!important;}.page-content:has(.inbox-layout){padding:8px 0 0!important;}
  .inbox-layout{height:calc(100dvh - 80px)!important;min-height:0!important;display:grid!important;grid-template-columns:1fr!important;border-radius:14px!important;}
  .conversation-list{width:100%!important;border-right:0!important;}.conversation-filter-bar{padding:9px!important;}.conversation-item{min-height:65px!important;padding:9px 10px!important;}
  .chat-panel{position:fixed!important;inset:0!important;z-index:60!important;display:none!important;background:#efeae2!important;}.inbox-layout.chat-open .chat-panel{display:flex!important;}
  .chat-header{min-height:104px!important;padding:8px!important;border-radius:0!important;}.mobile-chat-back{display:grid!important;}.chat-actions{grid-template-columns:minmax(0,1fr) minmax(90px,.72fr) 38px!important;}
  .messages{padding:12px 9px!important;}.bubble{max-width:90%!important;}
  .rich-reply-box{padding:7px 6px!important;gap:4px!important;}.reply-tool-button,.send-button,.voice-record-button{width:39px!important;height:40px!important;flex-basis:39px!important;}
  .modal{padding:9px!important;}.modal-card{max-height:calc(100dvh - 18px)!important;border-radius:16px!important;padding:15px!important;}
  .auth-body-premium{padding:0!important;}.login-shell{width:100%!important;min-height:100dvh!important;grid-template-columns:1fr!important;border:0!important;border-radius:0!important;}.login-welcome{display:none!important;}.login-form-panel{padding:32px 22px!important;}.login-company-logo img{max-width:150px!important;}.login-title-wrap h1{font-size:25px!important;}
}

@media(max-width:420px){
  .main-area{padding:5px 5px 0!important;}.topbar{top:5px!important;height:56px!important;min-height:56px!important;}.page-content{padding:16px 2px 22px!important;}
  .metric-grid{grid-template-columns:1fr 1fr!important;}.metric-card{padding:9px!important;}.metric-icon{width:31px!important;height:31px!important;flex-basis:31px!important;}.metric-card strong{font-size:15px!important;}
  .campaign-stats{grid-template-columns:1fr 1fr!important;}.campaign-stat{padding:9px!important;}
  .page-auto-followup .followup-sequence-table tr{grid-template-columns:1fr!important;}.page-auto-followup .followup-sequence-table td,.page-auto-followup .followup-sequence-table td:nth-child(1),.page-auto-followup .followup-sequence-table td:nth-child(3),.page-auto-followup .followup-sequence-table td:nth-child(5){grid-column:1!important;grid-template-columns:76px minmax(0,1fr)!important;}
}

/* Height-aware nav density: keep every menu item visible without sidebar scrolling. */
@media(min-width:1101px) and (max-height:820px){

  .sidebar-user{min-height:48px!important;padding:7px!important;}.sidebar-user .avatar{width:30px!important;height:30px!important;flex-basis:30px!important;}
  .developer-card-row{min-height:31px!important;padding-top:5px!important;padding-bottom:5px!important;}
}
@media(max-width:1100px) and (max-height:720px){
  .sidebar-brand-row{min-height:62px!important;padding-top:8px!important;padding-bottom:6px!important;}
  .nav-section-label{padding-top:5px!important;padding-bottom:2px!important;font-size:7px!important;}
  .side-nav{gap:0!important;}
  .side-nav a{min-height:32px!important;padding-top:2px!important;padding-bottom:2px!important;}
  .nav-icon{width:24px!important;height:24px!important;flex-basis:24px!important;}
  .sidebar-developer{display:none!important;}
  .sidebar-user{min-height:44px!important;padding:6px!important;}
}

/* V30 finishing pass: compact-height navigation and public pages */
@media(min-width:1101px) and (max-height:940px){
  .sidebar-brand-row{min-height:68px!important;padding:9px 13px 6px!important;}

  .side-nav{gap:1px!important;padding-top:1px!important;padding-bottom:4px!important;}
  .nav-section-label{padding:6px 10px 3px!important;font-size:7.2px!important;}
  .side-nav a{min-height:33px!important;padding:3px 8px!important;font-size:10.5px!important;}
  .nav-icon{width:24px!important;height:24px!important;flex-basis:24px!important;font-size:9.8px!important;}
  .sidebar-footer{padding-top:4px!important;padding-bottom:9px!important;}
  .sidebar-user{min-height:45px!important;padding:6px 8px!important;}.sidebar-user .avatar{width:29px!important;height:29px!important;flex-basis:29px!important;}
  .sidebar-user strong{font-size:9.8px!important;}.sidebar-user small{font-size:7.8px!important;}
  .sidebar-developer{margin-top:6px!important;}
  .developer-card-row{min-height:29px!important;padding:4px 8px!important;}.developer-icon{width:22px!important;height:22px!important;flex-basis:22px!important;}
  .developer-label{font-size:6.8px!important;}.developer-value,.developer-phone{font-size:8px!important;}
}

@media(max-width:1100px) and (min-width:701px){
  .support-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-items:center!important;padding-bottom:0!important;}
  .support-card .panel-header{grid-column:1/-1!important;}
  .support-card .support-number{grid-column:1!important;margin:14px 0 14px 16px!important;font-size:34px!important;}
  .support-card>p{grid-column:2!important;margin:0 15px!important;text-align:left!important;}
  .support-card>.btn{grid-column:3!important;width:auto!important;min-width:175px!important;margin:0 16px 0 0!important;}
}
@media(max-width:700px){
  .support-card{display:block!important;padding-bottom:12px!important;}
  .support-card .support-number{margin:16px 14px 4px!important;font-size:36px!important;}
  .support-card>p{margin:0 14px 14px!important;text-align:left!important;}
  .support-card>.btn{margin:0 14px!important;width:calc(100% - 28px)!important;}
}

.public-legal-body{
  min-height:100dvh!important;
  margin:0!important;
  padding:0 18px 30px!important;

}
.public-site-header{
  width:min(1040px,100%)!important;
  min-height:70px!important;
  margin:14px auto 0!important;
  padding:10px 14px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  border:1px solid var(--v30-line)!important;border-radius:17px!important;
  
}
.public-brand{display:flex!important;align-items:center!important;gap:10px!important;}.public-brand-icon{width:36px!important;height:36px!important;border-radius:11px!important;display:grid!important;place-items:center!important;font-size:18px!important;}.public-brand span:last-child{display:grid!important;}.public-brand strong{font-weight:650!important;}.public-signin-link{min-height:35px!important;padding:7px 10px!important;border:1px solid #dce5e0!important;border-radius:9px!important;font-weight:600!important;}
.legal-shell{width:min(880px,100%)!important;margin:48px auto 0!important;}.legal-hero{text-align:center!important;margin-bottom:22px!important;}.legal-eyebrow{display:inline-flex!important;align-items:center!important;gap:6px!important;font-weight:700!important;letter-spacing:.11em!important;text-transform:uppercase!important;}.legal-hero h1{margin:10px 0 8px!important;font-size:38px!important;font-weight:620!important;}.legal-hero p{max-width:680px!important;margin:0 auto!important;}.legal-updated{display:block!important;margin-top:10px!important;}.legal-card,.deletion-card{padding:30px!important;border:1px solid var(--v30-line)!important;}.legal-card h2,.deletion-card h2{font-weight:650!important;}.legal-card p,.legal-card li,.deletion-card p,.deletion-card li{color:#66776f!important;}.public-footer{width:min(880px,100%)!important;margin:18px auto 0!important;padding:12px 4px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}.public-footer nav{display:flex!important;gap:14px!important;}.deletion-icon{width:48px!important;height:48px!important;border-radius:14px!important;}.deletion-steps{gap:10px!important;}.deletion-note{border-radius:12px!important;}.legal-primary-button,.legal-secondary-button{min-height:39px!important;border-radius:10px!important;padding:8px 12px!important;font-weight:600!important;}
@media(max-width:640px){.public-legal-body{padding:0 9px 20px!important;}.public-site-header{margin-top:8px!important;border-radius:14px!important;}.legal-shell{margin-top:30px!important;}.legal-hero h1{font-size:30px!important;}.legal-card,.deletion-card{padding:18px!important;border-radius:16px!important;}.public-footer{align-items:flex-start!important;flex-direction:column!important;}.public-footer nav{flex-wrap:wrap!important;}}

/* ======================================================================
   V31 — ALIGNMENT + ZOOM/RESPONSIVE HARDENING
   Presentation only. Keeps all application logic and JS hooks intact.
   ====================================================================== */
html,body{max-width:100%;overflow-x:hidden;}

/* Header: stable two-sided alignment even at browser zoom / narrower desktop. */
.topbar{
  justify-content:flex-start!important;
  overflow:visible!important;
}
.topbar-left{
  flex:0 1 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  max-width:min(68%,760px)!important;
}
.topbar-left>*{order:0!important;}
.topbar-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
  margin-left:0!important;
}
.topbar-actions>*{order:0!important;}
.topbar-spacer{
  display:block!important;
  flex:1 1 auto!important;
  min-width:14px!important;
  order:0!important;
}
.topbar-title-wrap{flex:0 1 auto!important;min-width:72px!important;}
.business-context-pill{
  flex:0 1 180px!important;
  max-width:180px!important;
  min-width:0!important;
}
.business-context-pill>span{
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.header-company-logo{
  order:0!important;
  flex:0 0 106px!important;
  width:106px!important;
  height:34px!important;
  min-width:106px!important;
  margin:0!important;
}
.header-company-logo img{max-height:24px!important;object-position:center!important;}
.connection-pill{order:0!important;flex:0 0 auto!important;margin:0!important;}
.top-account{order:0!important;flex:0 0 auto!important;}

/* Workspace aligns to the topbar edges; internal wrappers handle overflow. */
.page-content{
  width:100%!important;
  min-width:0!important;

}
.page-content>*,.campaign-page,.dashboard-page{min-width:0!important;max-width:100%!important;}

/* Campaign table: prevent long template names/progress copy from crossing columns. */
.page-campaigns .campaign-table-wrap{

  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
}

.page-campaigns .campaign-table th:nth-child(1),.page-campaigns .campaign-table td:nth-child(1){width:17%!important;}
.page-campaigns .campaign-table th:nth-child(2),.page-campaigns .campaign-table td:nth-child(2){width:18%!important;}
.page-campaigns .campaign-table th:nth-child(3),.page-campaigns .campaign-table td:nth-child(3){width:20%!important;}
.page-campaigns .campaign-table th:nth-child(4),.page-campaigns .campaign-table td:nth-child(4){width:12%!important;}
.page-campaigns .campaign-table th:nth-child(5),.page-campaigns .campaign-table td:nth-child(5){width:17%!important;}
.page-campaigns .campaign-table th:nth-child(6),.page-campaigns .campaign-table td:nth-child(6){width:9%!important;}
.page-campaigns .campaign-table th:nth-child(7),.page-campaigns .campaign-table td:nth-child(7){width:11%!important;}
.page-campaigns .campaign-table th,
.page-campaigns .campaign-table td{
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
}
.page-campaigns .campaign-table td:nth-child(1) strong,
.page-campaigns .campaign-table td:nth-child(1) small,
.page-campaigns .campaign-table td:nth-child(2),
.page-campaigns .campaign-table td:nth-child(2) small,
.page-campaigns .campaign-table td:nth-child(5){
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.page-campaigns .campaign-table td:nth-child(2){line-height:1.35!important;}
.page-campaigns .campaign-table .progress{

  max-width:none!important;
  min-width:0!important;

}
.page-campaigns .campaign-table [data-campaign-counts]{

  overflow-wrap:anywhere!important;
}

.page-campaigns .campaign-table .row-actions form,
.page-campaigns .campaign-table .row-actions .btn{width:100%!important;min-width:0!important;}

/* Keep the floating sidebar fully usable on short/zoomed desktop viewports. */
@media(min-width:1101px) and (max-height:780px){
  .sidebar{inset:8px auto 8px 8px!important;width:244px!important;border-radius:20px!important;}
  .main-area{margin-left:264px!important;padding-top:8px!important;padding-right:8px!important;}
  .sidebar-brand-row{min-height:58px!important;padding:7px 11px 4px!important;}
  .brand{padding:4px 6px!important;gap:9px!important;}
  .side-nav{padding:0 9px 3px!important;gap:0!important;}
  .nav-section-label{padding:4px 9px 2px!important;font-size:6.7px!important;line-height:1!important;}
  .side-nav a{min-height:31px!important;padding:2px 7px!important;gap:7px!important;font-size:10px!important;border-radius:9px!important;}
  .nav-icon{width:23px!important;height:23px!important;flex-basis:23px!important;font-size:9.2px!important;}
  .sidebar-footer{padding:3px 9px 7px!important;}
  .sidebar-user{min-height:40px!important;padding:5px 7px!important;border-radius:10px!important;}.sidebar-user .avatar{width:27px!important;height:27px!important;flex-basis:27px!important;font-size:9px!important;}.sidebar-user strong{font-size:9.2px!important;}.sidebar-user small{font-size:7.2px!important;}
  .sidebar-developer{margin-top:4px!important;border-radius:10px!important;}.developer-card-row{min-height:25px!important;padding:3px 7px!important;gap:6px!important;}.developer-icon{width:19px!important;height:19px!important;flex-basis:19px!important;font-size:7.5px!important;}.developer-label{font-size:6.2px!important;}.developer-value,.developer-phone{font-size:7.4px!important;}.developer-divider{margin:0 7px!important;}
  .topbar{top:8px!important;}
}

/* Mid-size desktop/tablet: shed nonessential header context before anything collides. */
@media(max-width:1280px) and (min-width:1101px){
  .topbar-left{max-width:60%!important;}
  .business-context-pill{max-width:145px!important;flex-basis:145px!important;}
  .header-company-logo{flex-basis:94px!important;width:94px!important;min-width:94px!important;}
  .account-profile{max-width:158px!important;}
}
@media(max-width:1180px) and (min-width:861px){
  .header-company-logo{display:none!important;}
  .business-context-pill{max-width:150px!important;}
}

/* Tablet/mobile header is intentionally minimal and collision-proof. */
@media(max-width:1100px){
  .topbar-left{max-width:none!important;}
  .topbar-spacer{min-width:6px!important;flex:0 1 8px!important;}
  .business-context-pill{display:none!important;}
  .header-company-logo{display:none!important;}
  .mobile-page-title{display:block!important;}
}
@media(max-width:700px){
  .topbar-left{gap:7px!important;min-width:0!important;}
  .topbar-title-wrap{min-width:0!important;flex:1 1 auto!important;}
  .mobile-page-title{display:block!important;max-width:38vw!important;}
  .topbar-spacer{display:none!important;}
  .topbar-actions{margin-left:auto!important;gap:4px!important;}
}

/* Phone campaign table remains a horizontal desktop-style table, but never overlaps. */
@media(max-width:760px){
  .page-campaigns .campaign-table{width:1040px!important;min-width:1040px!important;table-layout:fixed!important;}
  .page-campaigns .campaign-table th,.page-campaigns .campaign-table td{white-space:normal!important;overflow:hidden!important;}
  .page-campaigns .campaign-table .row-actions{width:100%!important;}
}

/* V31 cascade lock: neutralize legacy header ordering with matching specificity. */
.topbar .topbar-spacer{display:block!important;flex:1 1 auto!important;min-width:14px!important;order:0!important;}
.topbar .topbar-left .header-company-logo{order:0!important;margin:0!important;flex:0 0 106px!important;width:106px!important;min-width:106px!important;height:34px!important;}
.topbar .topbar-left .business-context-pill{order:0!important;margin:0!important;}
.topbar .topbar-actions .connection-pill{order:0!important;margin:0!important;}
.topbar .topbar-actions .top-account{order:0!important;margin:0!important;}
.page-content{padding-left:12px!important;padding-right:12px!important;}
@media(max-width:1280px) and (min-width:1101px){
  
}
@media(max-width:1180px) and (min-width:861px){
  .topbar .topbar-left .header-company-logo{display:none!important;}
}
@media(max-width:1100px){
  .topbar .topbar-left .business-context-pill,
  .topbar .topbar-left .header-company-logo{display:none!important;}
  .topbar .topbar-spacer{min-width:6px!important;flex:0 1 8px!important;}
  .page-content{padding-left:8px!important;padding-right:8px!important;}
}
@media(max-width:700px){
  .topbar .topbar-spacer{display:none!important;}
  .page-content{padding-left:4px!important;padding-right:4px!important;}
}
@media(max-width:420px){.page-content{padding-left:2px!important;padding-right:2px!important;}}

/* ========================================================================
   V32 SIDEBAR DEVELOPER CARD COLOR MATCH
   Visual-only: align the developer/contact card with the dark green sidebar
   navigation palette. No layout, navigation, or application logic changes.
   ======================================================================== */
.sidebar .sidebar-developer{
  background:linear-gradient(180deg,rgba(20,48,38,.96),rgba(12,34,27,.98))!important;
  border-color:rgba(71,211,143,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 5px 14px rgba(3,18,12,.14)!important;
}
.sidebar .sidebar-developer .developer-icon{
  
  border-color:rgba(71,211,143,.10)!important;
  box-shadow:none!important;
}
.sidebar .sidebar-developer .developer-label{
  color:#7f9b8e!important;
}

.sidebar .sidebar-developer .developer-phone{
  color:#d4e3dc!important;
}
.sidebar .sidebar-developer .developer-divider{
  border-top-color:rgba(181,214,198,.10)!important;
  background:rgba(181,214,198,.08)!important;
}
.sidebar .sidebar-developer .developer-arrow{
  color:#7f9b8e!important;
}

/* V33 — precise Administrator card alignment only */
.sidebar-user{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:9px!important;
}
.sidebar-user .avatar{
  align-self:center!important;
  justify-self:start!important;
}
.sidebar-user-copy{
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:0!important;
}
.sidebar-user-copy strong,
.sidebar-user-copy small{
  margin:0!important;
  padding:0!important;
}
.sidebar-user-copy strong{line-height:1.12!important;}
.sidebar-user-copy small{line-height:1.12!important;}
.sidebar-user .online-dot{
  margin:0!important;
  align-self:center!important;
  justify-self:end!important;
}

/* ========================================================================
   V34 INBOX HEADER + SEARCH ALIGNMENT FIX
   Visual-only. Protects contact identity width, removes the desktop-only
   back-button width penalty, and reserves real space for the search icon.
   ======================================================================== */
.page-inbox .conversation-search{
  position:relative!important;
  display:block!important;
  min-width:0!important;
}
.page-inbox .conversation-search i{
  position:absolute!important;
  left:14px!important;
  top:50%!important;
  width:15px!important;
  height:15px!important;
  line-height:15px!important;
  display:grid!important;
  place-items:center!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  padding:0!important;
  color:#84928b!important;
  pointer-events:none!important;
  z-index:2!important;
}
.page-inbox .conversation-search input{
  box-sizing:border-box!important;
  width:100%!important;
  padding-left:42px!important;
  padding-right:13px!important;
  text-indent:0!important;
}

/* Back is a phone-only control. Keeping it off desktop/tablet returns useful
   horizontal space to the customer name and complete phone number. */
@media (min-width:701px){
  .page-inbox .mobile-chat-back,
  .page-inbox .chat-person .mobile-chat-back{
    display:none!important;
  }
}

@media (min-width:1101px){
  .page-inbox .chat-header{
    grid-template-columns:minmax(205px,1fr) auto!important;
    column-gap:14px!important;
    align-items:center!important;
  }
  .page-inbox .chat-person{
    
    width:100%!important;
  }
  .page-inbox .chat-person-copy{
    
    overflow:visible!important;
  }
  .page-inbox .chat-person-copy strong,
  .page-inbox .chat-person-copy small{
    max-width:100%!important;
  }
  .page-inbox .chat-person-copy small{
    font-size:10.5px!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .page-inbox .chat-actions,
  .page-inbox .chat-actions.has-agent-select,
  .page-inbox .chat-actions.agent-view{
    width:auto!important;
    max-width:none!important;
    justify-self:end!important;
  }
  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns:170px 160px 40px!important;
  }
  .page-inbox .chat-actions.agent-view{
    grid-template-columns:160px 40px!important;
  }
}

/* Compact desktop widths: preserve identity before shrinking controls. */
@media (min-width:1101px) and (max-width:1320px){
  .page-inbox .chat-header{grid-template-columns:minmax(190px,1fr) auto!important;column-gap:10px!important;}
  .page-inbox .chat-person{min-width:190px!important;}
  .page-inbox .chat-actions.has-agent-select{grid-template-columns:150px 145px 38px!important;}
  .page-inbox .chat-actions.agent-view{grid-template-columns:145px 38px!important;}
  .page-inbox .chat-more,.page-inbox .chat-more-toggle{width:38px!important;min-width:38px!important;max-width:38px!important;}
}

/* Tablet: two-row header remains, but identity gets the full first row. */
@media (min-width:701px) and (max-width:1100px){
  .page-inbox .chat-header{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto 40px!important;
  }
  .page-inbox .chat-person{min-width:0!important;width:100%!important;}
  .page-inbox .chat-person-copy{overflow:visible!important;}
  .page-inbox .chat-person-copy small{overflow:visible!important;text-overflow:clip!important;}
}

/* Phone: keep the back button, but make both identity lines readable. */
@media (max-width:700px){
  .page-inbox .mobile-chat-back,
  .page-inbox .chat-person .mobile-chat-back{display:grid!important;}
  .page-inbox .conversation-search i{left:14px!important;top:50%!important;transform:translateY(-50%)!important;}
  .page-inbox .conversation-search input{padding-left:42px!important;}
  .page-inbox .chat-person-copy{overflow:hidden!important;}
  .page-inbox .chat-person-copy small{font-size:10px!important;max-width:100%!important;}
}

/* ========================================================================
   V35 INBOX SEARCH + CONTACT HEADER HARD FIX
   Uses real Inbox DOM selectors instead of the non-existent .page-inbox body
   class. The icon gets its own wrapper so Font Awesome's <i> -> <svg>
   replacement can never overlap the placeholder text.
   ======================================================================== */
.inbox-layout .conversation-search{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.inbox-layout .conversation-search-icon{
  position:absolute!important;
  left:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:18px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  color:#84928b!important;
  pointer-events:none!important;
  z-index:3!important;
}
.inbox-layout .conversation-search-icon i,
.inbox-layout .conversation-search-icon svg{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  width:14px!important;
  height:14px!important;
  line-height:1!important;
  display:block!important;
  color:inherit!important;
}
.inbox-layout .conversation-search input{
  box-sizing:border-box!important;
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 14px 0 46px!important;
  text-indent:0!important;
  line-height:42px!important;
  border-radius:11px!important;
}
.inbox-layout .conversation-search input::placeholder{
  opacity:1!important;
  color:#9aa6a0!important;
}

/* The contact identity must win space before desktop action controls shrink. */
@media (min-width:1101px){
  .inbox-layout .chat-header{
    display:grid!important;
    grid-template-columns:minmax(220px,1fr) auto!important;
    
    column-gap:14px!important;
  }
  .inbox-layout .mobile-chat-back{display:none!important;}
  .inbox-layout .chat-person{

    overflow:visible!important;
  }
  .inbox-layout .chat-person-copy{

    overflow:visible!important;
  }
  .inbox-layout .chat-person-copy strong,
  .inbox-layout .chat-person-copy small{
    display:block!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .inbox-layout .chat-person-copy small{font-size:10px!important;}
  .inbox-layout .chat-actions,
  .inbox-layout .chat-actions.has-agent-select,
  .inbox-layout .chat-actions.agent-view{
    width:auto!important;
    max-width:none!important;
    margin-left:0!important;
    justify-self:end!important;
  }
  .inbox-layout .chat-actions.has-agent-select{
    grid-template-columns:160px 150px 38px!important;
  }
  .inbox-layout .chat-actions.agent-view{
    grid-template-columns:150px 38px!important;
  }
}

@media (min-width:701px) and (max-width:1100px){
  .inbox-layout .mobile-chat-back{display:none!important;}
  .inbox-layout .chat-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto 40px!important;
    row-gap:7px!important;
    height:auto!important;
    min-height:96px!important;
  }
  .inbox-layout .chat-person{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
  }
  .inbox-layout .chat-person-copy{min-width:0!important;overflow:visible!important;}
  .inbox-layout .chat-person-copy small{
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:10px!important;
  }
  .inbox-layout .chat-actions{width:100%!important;margin-left:0!important;}
}

@media (max-width:700px){
  .inbox-layout .conversation-search input{
    height:42px!important;
    min-height:42px!important;
    padding-left:46px!important;
  }
  .inbox-layout .conversation-search-icon{left:14px!important;}
  .inbox-layout .mobile-chat-back{display:grid!important;}
}

/* ========================================================================
   V36 INBOX SEARCH STRUCTURAL FIX
   Search icon participates in layout instead of being absolutely overlaid.
   This makes icon/placeholder overlap impossible across Font Awesome SVG
   replacement, browser zoom, Windows scaling, tablet and phone widths.
   ======================================================================== */
.page-inbox .conversation-filter-bar{
  padding:12px!important;
}
.page-inbox .conversation-search,
.inbox-layout .conversation-search{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  padding:0 13px!important;
  margin:0!important;
  border:1px solid #d6e0da!important;
  border-radius:11px!important;
  background:#f8fbf9!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.page-inbox .conversation-search:focus-within,
.inbox-layout .conversation-search:focus-within{
  border-color:#67c894!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(31,184,101,.10)!important;
}
.page-inbox .conversation-search-icon,
.inbox-layout .conversation-search-icon{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 17px!important;
  width:17px!important;
  height:17px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  color:#7f9087!important;
  pointer-events:none!important;
  z-index:auto!important;
}
.page-inbox .conversation-search-icon i,
.page-inbox .conversation-search-icon svg,
.inbox-layout .conversation-search-icon i,
.inbox-layout .conversation-search-icon svg{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  color:inherit!important;
}
.page-inbox .conversation-search input,
.inbox-layout .conversation-search input{
  flex:1 1 auto!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-indent:0!important;
  line-height:normal!important;
  font-size:12px!important;
}
.page-inbox .conversation-search input:focus,
.inbox-layout .conversation-search input:focus{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.page-inbox .conversation-search input::placeholder,
.inbox-layout .conversation-search input::placeholder{
  color:#96a39c!important;
  opacity:1!important;
}
@media (max-width:700px){
  .page-inbox .conversation-search,
  .inbox-layout .conversation-search{
    height:43px!important;
    padding:0 12px!important;
    gap:9px!important;
  }
}

/* ========================================================================
   V37 SIDEBAR FOOTER RHYTHM FIX
   Visual-only. Aligns the signed-in account card and developer/contact card
   to one shared grid, spacing rhythm and green navigation palette.
   ======================================================================== */
@media (min-width:1101px){

  .sidebar .sidebar-user,
  .sidebar .sidebar-developer{
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    border-radius:13px!important;
    border:1px solid rgba(71,211,143,.11)!important;
    background:linear-gradient(180deg,rgba(20,48,38,.94),rgba(12,34,27,.96))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .sidebar .sidebar-user .avatar{

    justify-self:center!important;
  }
  .sidebar .sidebar-user-copy{
    
    justify-self:stretch!important;
  }

  .sidebar .sidebar-user .online-dot{
    justify-self:center!important;
    align-self:center!important;
  }

  .sidebar .sidebar-developer{
    
    overflow:hidden!important;
  }
  .sidebar .sidebar-developer .developer-card-row{
    display:grid!important;
    
    align-items:center!important;
    gap:8px!important;
    min-height:32px!important;
    padding:4px 5px!important;
    box-sizing:border-box!important;
  }
  
  .sidebar .sidebar-developer .developer-card-bottom{
    border-top:1px solid rgba(181,214,198,.075)!important;
  }
  .sidebar .sidebar-developer .developer-icon{

    justify-self:center!important;
    
  }
  
  .sidebar .sidebar-developer .developer-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;

    align-self:center!important;
  }

  .sidebar .sidebar-developer .developer-arrow{

    display:grid!important;
    place-items:center!important;
    justify-self:center!important;
    align-self:center!important;
    
  }
  .sidebar .sidebar-developer .developer-arrow i,
  .sidebar .sidebar-developer .developer-arrow svg{
    width:9px!important;
    height:9px!important;
  }
}

/* Keep the same geometry on normal laptop-height screens, just denser. */
@media (min-width:1101px) and (max-height:940px){

  .sidebar .sidebar-developer .developer-icon{border-radius:7px!important;}

}

/* Very short desktop: preserve the no-scroll navigation promise. */
@media (min-width:1101px) and (max-height:780px){
  .sidebar .sidebar-footer{gap:4px!important;padding:3px 9px 7px!important;}
  .sidebar .sidebar-user{min-height:39px!important;padding:4px 7px!important;grid-template-columns:27px minmax(0,1fr) 11px!important;column-gap:6px!important;border-radius:10px!important;}
  .sidebar .sidebar-user .avatar{width:27px!important;height:27px!important;min-width:27px!important;flex-basis:27px!important;}
  
  .sidebar .sidebar-developer{padding:2px!important;border-radius:10px!important;}
  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{grid-template-columns:27px minmax(0,1fr) 11px!important;gap:6px!important;min-height:24px!important;padding:2px 4px!important;}
  .sidebar .sidebar-developer .developer-icon{width:19px!important;height:19px!important;min-width:19px!important;flex-basis:19px!important;border-radius:6px!important;}
  .sidebar .sidebar-developer .developer-icon i,.sidebar .sidebar-developer .developer-icon svg{width:8px!important;height:8px!important;font-size:8px!important;}
  
  .sidebar .sidebar-developer .developer-arrow{width:11px!important;height:11px!important;font-size:7px!important;}
}

/* ========================================================================
   V38 SIDEBAR FOOTER TYPOGRAPHY MATCH
   Visual-only. Keep V37 alignment, but scale the account/developer section
   so it matches the navigation typography instead of looking undersized.
   ======================================================================== */
@media (min-width:1101px){

}

/* Laptop-height screens: compact geometry, but keep readable typography. */
@media (min-width:1101px) and (max-height:940px){
  .sidebar .sidebar-user{
    
    column-gap:8px!important;
  }

  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{
    grid-template-columns:32px minmax(0,1fr) 13px!important;
  }
  
  .sidebar .sidebar-developer .developer-icon i,.sidebar .sidebar-developer .developer-icon svg{width:10px!important;height:10px!important;font-size:10px!important;}
  
  .sidebar .sidebar-developer .developer-value,.sidebar .sidebar-developer .developer-phone{font-size:9.2px!important;}
}

/* Very short desktop: still readable, while preserving the no-scroll menu. */
@media (min-width:1101px) and (max-height:780px){

  .sidebar .sidebar-developer .developer-value,.sidebar .sidebar-developer .developer-phone{font-size:8.2px!important;}
}

/* ========================================================================
   V39 SIDEBAR FOOTER TYPOGRAPHY SCALE ONLY
   Visual-only. Preserve V38 card geometry/positioning exactly; increase only
   text and glyph scale so the footer matches the navigation typography.
   ======================================================================== */
@media (min-width:1101px){

}

/* Keep the same V38 geometry on laptop-height desktops; only protect readability. */
@media (min-width:1101px) and (max-height:940px){

}

/* Very short desktop: match the compact nav without changing card geometry. */
@media (min-width:1101px) and (max-height:780px){

}

/* ========================================================================
   V40 SIDEBAR FOOTER — VISIBLE TYPOGRAPHY MATCH
   Visual-only. Preserve the exact V39 footer card geometry and positioning.
   Increase only text/glyph scale so the footer reads at the same visual size
   as the navigation labels, including laptop and short desktop heights.
   ======================================================================== */
@media (min-width:1101px){

}

/* Keep the exact compact geometry on laptop-height screens; do not shrink the
   typography back to the tiny V37/V38 scale. */
@media (min-width:1101px) and (max-height:940px){

}

/* Even on very short desktop windows, keep the footer typography visibly
   matched to the compact navigation. Geometry remains untouched. */
@media (min-width:1101px) and (max-height:780px){
  .sidebar .sidebar-user .avatar{font-size:12px!important;}
  .sidebar .sidebar-user-copy strong{font-size:12.1px!important;line-height:1.04!important;}
  .sidebar .sidebar-user-copy small{font-size:9.6px!important;line-height:1.04!important;}
  .sidebar .sidebar-developer .developer-icon i,
  .sidebar .sidebar-developer .developer-icon svg{width:12px!important;height:12px!important;font-size:12px!important;}
  .sidebar .sidebar-developer .developer-label{font-size:8.7px!important;line-height:1!important;}
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{font-size:10.5px!important;line-height:1.03!important;}
  .sidebar .sidebar-developer .developer-arrow,
  .sidebar .sidebar-developer .developer-arrow i,
  .sidebar .sidebar-developer .developer-arrow svg{font-size:10px!important;}
}

/* ========================================================================
   V42 SIDEBAR FOOTER TYPOGRAPHY — MATCH NAVIGATION LABELS
   Navigation labels (Businesses / Dashboard / Contacts) resolve to 13px.
   Keep V41 footer geometry/positioning unchanged; only match primary text.
   ======================================================================== */
@media (min-width:1101px){

}

/* ========================================================================
   V43 SIDEBAR FOOTER TYPOGRAPHY — VISUAL MATCH, NOT NUMERIC MATCH
   Keep V42/V41 geometry and alignment exactly unchanged. The previous 13px
   primary text looked oversized in the compact footer cards, so use a
   slightly smaller visual scale while preserving hierarchy.
   ======================================================================== */
@media (min-width:1101px){

  .sidebar .sidebar-user-copy small,
  .sidebar .sidebar-developer .developer-label{
    font-size:9.5px!important;
    line-height:1.08!important;
  }

}

/* ========================================================================
   V44 INBOX CONTACT HEADER — ALIGNMENT ONLY
   Desktop-only alignment refinement. Preserve current sizing and behavior;
   lock the identity block to a predictable avatar | name+phone grid so it
   aligns cleanly with the assignment/status controls.
   ======================================================================== */
@media (min-width:1101px){
  .inbox-layout .chat-header{
    align-items:center!important;
    align-content:center!important;
  }
  .inbox-layout .chat-person{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:start!important;
    column-gap:12px!important;
    row-gap:0!important;
    min-width:0!important;
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
  }
  .inbox-layout .chat-person .mobile-chat-back{
    display:none!important;
  }
  .inbox-layout .chat-person > .avatar{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
  }
  .inbox-layout .chat-person-copy{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    row-gap:2px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .inbox-layout .chat-name-line{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .inbox-layout .chat-person-copy strong,
  .inbox-layout .chat-person-copy small{
    margin:0!important;
    padding:0!important;
  }
  .inbox-layout .chat-actions,
  .inbox-layout .chat-actions.has-agent-select,
  .inbox-layout .chat-actions.agent-view{
    align-self:center!important;
    align-items:center!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
  .inbox-layout .chat-actions select,
  .inbox-layout .chat-more,
  .inbox-layout .chat-more-toggle{
    align-self:center!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

/* ============================================================
   V45 — INBOX ACTION CONTROL SPACING
   Keep existing control sizes; make Assignment | Status | Menu
   use one consistent horizontal gap on tablet/desktop.
   ============================================================ */
@media (min-width:701px){
  .inbox-layout .chat-actions,
  .inbox-layout .chat-actions.has-agent-select,
  .inbox-layout .chat-actions.agent-view{
    gap:8px!important;
    column-gap:8px!important;
  }
  .inbox-layout .chat-actions > select,
  .inbox-layout .chat-actions > .chat-more{
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ========================================================================
   V46 AGENTS ROW — DESKTOP GRID ALIGNMENT
   Alignment-only refinement for the wide Agents row. Keep typography,
   control heights and application behavior unchanged; make the two metrics
   equal-width columns and use one consistent gap across every section.
   ======================================================================== */
@media (min-width:1101px){
  .page-agents .agent-list .agent-card{
    display:grid!important;
    grid-template-columns:minmax(280px,1.8fr) minmax(145px,.75fr) minmax(145px,.75fr) minmax(105px,.55fr) minmax(225px,1.1fr)!important;
    column-gap:10px!important;
    align-items:center!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .page-agents .agent-list .agent-card > .agent-identity,
  .page-agents .agent-list .agent-card > .agent-metric,
  .page-agents .agent-list .agent-card > .agent-status-slot,
  .page-agents .agent-list .agent-card > .agent-actions{
    min-width:0!important;
    margin:0!important;
    align-self:center!important;
  }
  .page-agents .agent-list .agent-card > .agent-identity{
    width:100%!important;
    padding-right:4px!important;
  }
  .page-agents .agent-list .agent-card > .agent-metric{
    width:100%!important;
    margin:0!important;
    border-left:1px solid #edf1f5!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot{
    width:100%!important;
    padding:0!important;
    border-left:0!important;
    border-right:0!important;
    justify-content:center!important;
  }
  .page-agents .agent-list .agent-card > .agent-actions{
    width:100%!important;
    padding-left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }
  .page-agents .agent-list .agent-card > .agent-actions form{
    margin:0!important;
    flex:0 0 auto!important;
  }
}

/* ========================================================================
   V47 DASHBOARD METRICS — ONE DESKTOP ROW
   Keep all six dashboard summary cards on a single row on desktop while
   preserving the existing tablet and phone breakpoints below 1101px.
   ======================================================================== */
@media (min-width:1101px){
  .metric-grid{
    
    gap:10px!important;
  }
  .metric-card{
    min-width:0!important;
  }
}

/* ========================================================================
   V48 — SUPPORT INBOX CARD ALIGNMENT
   Final scoped correction: keep the metric, caption and CTA on one clean
   vertical axis. This intentionally wins over older global support-card rules.
   ======================================================================== */
.page-dashboard .dashboard-grid > .support-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  padding-bottom:14px!important;
}
.page-dashboard .dashboard-grid > .support-card > .panel-header{
  flex:0 0 auto!important;
  width:100%!important;
}
.page-dashboard .dashboard-grid > .support-card > .support-number{
  display:grid!important;
  place-items:center!important;
  flex:0 0 72px!important;
  width:72px!important;
  height:72px!important;
  margin:20px auto 8px!important;
  padding:0!important;
  text-align:center!important;
  font-size:39px!important;
  line-height:1!important;
}
.page-dashboard .dashboard-grid > .support-card > p{
  width:100%!important;
  margin:0 auto 18px!important;
  padding:0 16px!important;
  text-align:center!important;
  line-height:1.4!important;
}
.page-dashboard .dashboard-grid > .support-card > .btn.full{
  align-self:stretch!important;
  width:calc(100% - 32px)!important;
  min-height:40px!important;
  margin:auto 16px 0!important;
  justify-content:center!important;
}

@media (min-width:721px) and (max-width:1100px){
  .page-dashboard .dashboard-grid > .support-card{
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:14px!important;
  }
  .page-dashboard .dashboard-grid > .support-card > .support-number{
    flex-basis:68px!important;
    width:68px!important;
    height:68px!important;
    margin:18px auto 7px!important;
    font-size:37px!important;
  }
  .page-dashboard .dashboard-grid > .support-card > p{
    margin:0 auto 16px!important;
    text-align:center!important;
  }
  .page-dashboard .dashboard-grid > .support-card > .btn.full{
    width:calc(100% - 28px)!important;
    margin:0 14px!important;
  }
}

@media (max-width:720px){
  .page-dashboard .dashboard-grid > .support-card{
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:12px!important;
  }
  .page-dashboard .dashboard-grid > .support-card > .support-number{
    flex-basis:64px!important;
    width:64px!important;
    height:64px!important;
    margin:16px auto 7px!important;
    font-size:35px!important;
  }
  .page-dashboard .dashboard-grid > .support-card > p{
    margin:0 auto 15px!important;
    padding:0 14px!important;
    text-align:center!important;
  }
  .page-dashboard .dashboard-grid > .support-card > .btn.full{
    width:calc(100% - 28px)!important;
    margin:0 14px!important;
  }
}

/* V50 — enlarge only the visible messaging brand lockup; preserve row geometry. */
@media(min-width:1101px){
  .brand-icon{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
    font-size:24px!important;
    border-radius:14px!important;
  }
  .brand-copy strong{
    font-size:16px!important;
    line-height:1.08!important;
  }
  .brand-copy small{
    font-size:10.4px!important;
    line-height:1.18!important;
  }
}

/* Common laptop-height desktops: keep the brand visibly larger without changing its container. */
@media(min-width:1101px) and (max-height:940px){
  .brand-icon{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
    font-size:22px!important;
  }
  .brand-copy strong{font-size:15.2px!important;}
  .brand-copy small{font-size:9.7px!important;}
}

/* Short/zoomed desktops: only the lockup scales; row/menu geometry remains untouched. */
@media(min-width:1101px) and (max-height:780px){
  .brand-icon{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    font-size:19px!important;
  }
  .brand-copy strong{font-size:13.8px!important;}
  .brand-copy small{font-size:8.7px!important;}
}

/* ========================================================================
   V51 — PREMIUM HEADER REFINEMENT
   Visual-only. Keeps header content, links, account menu and API logic intact.
   ======================================================================== */
@media (min-width:1101px){
  .topbar{

    gap:12px!important;
    border-color:#dce7e1!important;
    
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,252,250,.96))!important;
    box-shadow:0 10px 30px rgba(17,52,34,.055),inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  .topbar-left,.topbar-actions{
    min-height:100%!important;
    align-items:center!important;
  }
  .topbar-left{gap:8px!important;}
  .topbar-actions{gap:8px!important;}

  .topbar .business-context-pill{
    min-height:40px!important;
    height:40px!important;
    padding:0 12px!important;
    border-radius:11px!important;
    border-color:#dfe8e3!important;
    background:#fbfdfc!important;
    color:#40564b!important;
    font-size:10.5px!important;
    font-weight:650!important;
    box-shadow:0 1px 2px rgba(24,55,39,.025)!important;
  }
  .topbar .business-context-pill i{
    font-size:10px!important;
    color:#81958b!important;
  }

  .topbar .topbar-left .header-company-logo{
    flex-basis:126px!important;
    width:126px!important;
    min-width:126px!important;
    height:40px!important;
    padding:5px 10px!important;
    border-radius:11px!important;
    border-color:#dfe8e3!important;
    background:#fff!important;
    box-shadow:0 1px 2px rgba(24,55,39,.025)!important;
  }
  .topbar .header-company-logo img{
    max-height:27px!important;
  }

  .topbar .connection-pill{
    min-height:40px!important;
    height:40px!important;
    padding:0 12px!important;
    border-radius:11px!important;
    font-size:10.5px!important;
    font-weight:650!important;
    letter-spacing:0!important;
  }
  .topbar .connection-dot{
    width:7px!important;
    height:7px!important;
    flex:0 0 7px!important;
  }

  .topbar .account-profile{
    min-height:44px!important;
    height:44px!important;
    max-width:196px!important;
    padding:5px 9px 5px 6px!important;
    gap:9px!important;
    border-radius:12px!important;
    border-color:#dfe8e3!important;
    background:#fbfdfc!important;
    box-shadow:0 1px 2px rgba(24,55,39,.025)!important;
  }
  .topbar .account-profile .avatar{
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
    font-size:10.5px!important;
  }
  .topbar .top-account-copy{gap:1px!important;}
  .topbar .top-account-copy strong{
    font-size:10.5px!important;
    line-height:1.15!important;
    font-weight:680!important;
  }
  .topbar .top-account-copy small{
    font-size:8.4px!important;
    line-height:1.15!important;
  }
  .topbar .account-chevron{
    font-size:8.5px!important;
    margin-left:3px!important;
  }
}

/* Keep the refined desktop proportions from squeezing on shorter laptops. */
@media (min-width:1101px) and (max-height:780px){
  .topbar{height:60px!important;min-height:60px!important;}
  .topbar .business-context-pill,.topbar .connection-pill{height:36px!important;min-height:36px!important;}
  .topbar .topbar-left .header-company-logo{height:36px!important;}
  .topbar .account-profile{height:40px!important;min-height:40px!important;}
  .topbar .account-profile .avatar{width:30px!important;height:30px!important;flex-basis:30px!important;}
}

@media (max-width:1280px) and (min-width:1101px){
  .topbar .topbar-left .header-company-logo{
    flex-basis:108px!important;
    width:108px!important;
    min-width:108px!important;
  }
  .topbar .business-context-pill{max-width:150px!important;flex-basis:150px!important;}
  .topbar .account-profile{max-width:168px!important;}
}

/* v52 — page flash alert alignment fix */
.page-content > .alert{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  padding:11px 15px 11px 42px!important;
  margin-bottom:14px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
  line-height:1.4!important;
  font-weight:560!important;
}
.page-content > .alert::before{
  left:15px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:16px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  font-size:11px!important;
}
@media (max-width:767px){
  .page-content > .alert{
    min-height:44px!important;
    padding:10px 13px 10px 38px!important;
    font-size:11px!important;
  }
  .page-content > .alert::before{left:13px!important;}
}

/* ========================================================================
   V53 — SUPPORT INBOX VERTICAL RHYTHM
   Keep the existing geometry/sizes. On desktop the support card is height-
   matched to Recent Campaigns; remove the flex auto-gap above the CTA and
   distribute the available space evenly through the card body.
   ======================================================================== */
@media (min-width:1101px){
  .page-dashboard .dashboard-grid > .support-card > .support-number{
    margin:30px auto 9px!important;
  }
  .page-dashboard .dashboard-grid > .support-card > p{
    margin:0 auto 24px!important;
  }
  .page-dashboard .dashboard-grid > .support-card > .btn.full{
    margin:0 16px!important;
  }
}

/* ========================================================================
   CAMPAIGNS SEARCH ICON — OLD DESIGN PRESERVED
   Keeps the existing campaign table design and fixes only the search field
   icon/input alignment.
   ======================================================================== */
.page-campaigns .campaign-filters{
  align-items:center !important;
}
.page-campaigns .campaign-search{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:235px !important;
  min-width:235px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 11px !important;
  border:1px solid #d7e0e6 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.page-campaigns .campaign-search > i,
.page-campaigns .campaign-search > svg,
.page-campaigns .campaign-search .fa-magnifying-glass{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  width:13px !important;
  height:13px !important;
  color:#8d9aaa !important;
  font-size:12px !important;
  line-height:1 !important;
  pointer-events:none !important;
}
.page-campaigns .campaign-search input,
.page-campaigns .campaign-search input[type="search"]{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  color:#233347 !important;
  font-size:10.75px !important;
  line-height:1.2 !important;
}
.page-campaigns .campaign-search input::placeholder{
  color:#98a4b3 !important;
  opacity:1 !important;
}
.page-campaigns .campaign-search input[type="search"]::-webkit-search-decoration,
.page-campaigns .campaign-search input[type="search"]::-webkit-search-cancel-button,
.page-campaigns .campaign-search input[type="search"]::-webkit-search-results-button,
.page-campaigns .campaign-search input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none !important;
  appearance:none !important;
}
@media(max-width:760px){
  .page-campaigns .campaign-search{
    width:100% !important;
    min-width:0 !important;
  }
}

/* ========================================================================
   V57 — FINAL TABLET / PHONE / SMALL-SCREEN RESPONSIVE LAYER
   Presentation only. Desktop (>=1101px) is intentionally untouched.
   This block is last so it resolves conflicts from older responsive layers.
   ======================================================================== */

/* ---------- Shared containment ---------- */
@media (max-width:1100px){
  html,body,.app-shell,.main-area,.page-content{max-width:100%!important;overflow-x:hidden!important;}
  .main-area{width:100%!important;min-width:0!important;margin-left:0!important;padding-left:0!important;padding-right:0!important;}
  .page-content{width:100%!important;min-width:0!important;padding:18px!important;}
  .page-content>*{max-width:100%!important;min-width:0;}

  /* Header / navigation drawer */
  .topbar{
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
    min-width:0!important;
    height:62px!important;
    min-height:62px!important;
    margin:8px 8px 0!important;
    padding:0 11px!important;
    gap:8px!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
  }
  .topbar-left{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;flex:1 1 auto!important;}
  .topbar-spacer{display:none!important;}
  .topbar-actions{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;margin-left:auto!important;flex:0 0 auto!important;}
  .menu-button{display:grid!important;flex:0 0 38px!important;width:38px!important;height:38px!important;}
  .topbar .header-company-logo{display:none!important;}
  .business-context-pill{max-width:180px!important;min-width:0!important;margin:0!important;overflow:hidden!important;}
  .business-context-pill>span{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .connection-pill{flex:0 0 auto!important;white-space:nowrap!important;}
  .account-profile{max-width:170px!important;min-width:0!important;}
  .top-account-copy{min-width:0!important;}
  .top-account-copy strong,.top-account-copy small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .account-menu-dropdown{max-width:min(300px,calc(100vw - 24px))!important;right:0!important;}

  .sidebar{
    width:min(286px,88vw)!important;
    max-width:88vw!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .sidebar .side-nav{min-height:0!important;overflow:hidden!important;}

  /* Generic page header */
  .page-heading,.campaign-heading,.api-rd-page-heading{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:12px!important;
  }
  .page-heading>div:first-child,.campaign-heading>div:first-child,.api-rd-page-heading>div:first-child{min-width:0!important;flex:1 1 260px!important;}
  .heading-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important;}
  .heading-actions form{margin:0!important;min-width:0!important;}

  /* Containers / cards / forms */
  .panel,.campaign-panel,.agent-card,.api-rd-card,.notice,.consent-box{max-width:100%!important;min-width:0!important;}
  .panel-header{gap:10px!important;min-width:0!important;}
  .panel-header>*{min-width:0!important;}
  .two-column,
  .dashboard-grid,
  .page-auto-reply .auto-reply-layout-grid,
  .page-auto-followup .followup-layout-grid,
  .page-settings .api-rd-layout,
  .page-system .system-columns{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  input,select,textarea{max-width:100%!important;min-width:0!important;}
  label{min-width:0!important;}
  .help,.muted,.notice p,.consent-box p{overflow-wrap:anywhere!important;}

  /* Tables must never push the whole page sideways. */
  .table-wrap,.campaign-table-wrap,.followup-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .table-wrap table:not(.followup-sequence-table),
  .campaign-table-wrap table:not(.followup-sequence-table){min-width:760px!important;}
  td,th{overflow-wrap:normal!important;}

  /* Dashboard */
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
  .metric-card{min-width:0!important;}
  .dashboard-grid{gap:12px!important;}
  .page-dashboard .dashboard-grid>.recent-campaigns-panel,
  .page-dashboard .dashboard-grid>.support-card{height:auto!important;min-height:0!important;}
  .page-dashboard .recent-campaigns-panel .table-wrap{max-height:none!important;}
  .page-dashboard .support-card>.btn.full{margin-top:0!important;}

  /* Contacts */
  .page-contacts .two-column{gap:14px!important;}
  .page-contacts .search-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;min-width:0!important;}
  .page-contacts .search-form input{min-width:0!important;width:100%!important;}
  .page-contacts .import-samples{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}

  /* Templates */
  .page-templates .template-empty-actions{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px!important;}
  .page-templates .template-simple-note{overflow-wrap:anywhere!important;}

  /* Campaigns */
  .page-campaigns .campaign-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .page-campaigns .campaign-toolbar{align-items:stretch!important;gap:10px!important;}
  .page-campaigns .campaign-toolbar-title{min-width:0!important;}
  .page-campaigns .campaign-filters{min-width:0!important;flex-wrap:wrap!important;}
  .page-campaigns .campaign-search{flex:1 1 240px!important;min-width:0!important;width:auto!important;}
  .page-campaigns .campaign-filters select{flex:0 1 190px!important;min-width:150px!important;max-width:100%!important;}
  .page-campaign-create .template-message-preview,
  .page-campaign-create .template-requirements,
  .page-campaign-create .variable-group{max-width:100%!important;overflow-wrap:anywhere!important;}

  /* Agents */
  .page-agents .agent-list{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .page-agents .agent-list .agent-card{
    display:grid!important;
    grid-template-columns:minmax(210px,1.35fr) minmax(100px,.65fr) minmax(100px,.65fr)!important;
    align-items:center!important;
    gap:9px!important;
    padding:12px!important;
  }
  .page-agents .agent-list .agent-card>.agent-identity{grid-column:1!important;min-width:0!important;}
  .page-agents .agent-list .agent-card>.agent-metric{min-width:0!important;width:100%!important;margin:0!important;padding:9px 10px!important;}
  .page-agents .agent-list .agent-card>.agent-status-slot{grid-column:1!important;grid-row:2!important;justify-content:flex-start!important;width:auto!important;padding:0!important;}
  .page-agents .agent-list .agent-card>.agent-actions{grid-column:2/-1!important;grid-row:2!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;min-width:0!important;}
  .page-agents .agent-list .agent-card>.agent-actions form{margin:0!important;}

  /* Auto Reply / Auto Follow-Up */
  .page-auto-reply .auto-reply-layout-grid,
  .page-auto-followup .followup-layout-grid{gap:13px!important;}
  .page-auto-followup .followup-customer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .page-auto-followup .followup-step-card,
  .page-auto-followup .followup-help-panel,
  .page-auto-reply .panel{max-width:100%!important;min-width:0!important;}
  .page-auto-followup .followup-step-card input,
  .page-auto-followup .followup-step-card select,
  .page-auto-followup .followup-step-card textarea{max-width:100%!important;min-width:0!important;}

  /* API Settings / System */
  .page-settings .api-rd-layout{gap:14px!important;}
  .page-settings .api-rd-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .page-settings .api-rd-span-2{grid-column:1/-1!important;}
  .page-settings .api-rd-actions,.page-settings .api-rd-platform-save{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
  .page-system .system-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* Inbox: stable split layout on tablet. */
  .page-inbox{min-width:0!important;}
  .inbox-layout{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(235px,30%) minmax(0,1fr)!important;
    height:calc(100dvh - 136px)!important;
    min-height:520px!important;
  }
  .conversation-list,.chat-panel,.chat-active,.messages{min-width:0!important;}
  .customer-panel{display:none!important;}
  .chat-header{height:auto!important;min-height:100px!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:center!important;gap:8px!important;padding:9px 10px!important;}
  .chat-person{width:100%!important;min-width:0!important;}
  .chat-person-copy{min-width:0!important;}
  .chat-actions,.chat-actions.has-agent-select,.chat-actions.agent-view{width:100%!important;min-width:0!important;margin:0!important;gap:8px!important;}
  .chat-actions.has-agent-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px!important;}
  .chat-actions.agent-view{grid-template-columns:minmax(0,1fr) 38px!important;}
  .chat-actions select{width:100%!important;max-width:none!important;min-width:0!important;}
  .reply-box,.template-reply{max-width:100%!important;min-width:0!important;}

  /* Modals */
  .modal{padding:12px!important;overflow:hidden!important;}
  .modal-card,.quick-reply-dialog{
    width:min(620px,100%)!important;
    max-width:100%!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;
  }
}

/* ---------- Phone ---------- */
@media (max-width:720px){
  .page-content{padding:12px!important;}

  /* Compact topbar that cannot collide. */

  .business-context-pill,.topbar .header-company-logo{display:none!important;}

  .account-profile .avatar{flex-basis:32px!important;}

  /* Drawer is usable on narrow devices without making page scroll sideways. */

  /* Headings / buttons */
  .page-heading,.campaign-heading,.api-rd-page-heading{flex-direction:column!important;}
  .page-heading>div:first-child,.campaign-heading>div:first-child,.api-rd-page-heading>div:first-child{flex:0 0 auto!important;}

  .heading-actions>*{width:100%!important;}
  .heading-actions form .btn,.heading-actions>.btn,.heading-actions>a.btn{width:100%!important;}
  .btn{white-space:normal!important;text-align:center!important;}

  /* Panels */
  .panel-header{min-height:48px!important;padding:10px 11px!important;flex-wrap:wrap!important;align-items:center!important;}
  .panel-header h2{font-size:13px!important;}
  
  .form-grid,.page-auto-followup .followup-customer-grid,.page-settings .api-rd-form{grid-template-columns:minmax(0,1fr)!important;}
  .page-settings .api-rd-span-2{grid-column:1!important;}

  .notice,.consent-box{gap:9px!important;}

  /* Dashboard */

  .dashboard-grid{gap:10px!important;}
  .page-dashboard .dashboard-grid>.support-card>.support-number{margin-top:15px!important;}
  .page-dashboard .dashboard-grid>.support-card>.btn.full{width:calc(100% - 24px)!important;margin:0 12px 12px!important;}

  /* Tables: retain desktop columns and scroll only inside card. */
  .table-wrap,.campaign-table-wrap{margin:0!important;max-width:100%!important;}
  .table-wrap table:not(.followup-sequence-table),
  .campaign-table-wrap table:not(.followup-sequence-table){min-width:680px!important;}
  th{white-space:nowrap!important;}

  /* Contacts */
  
  .page-contacts .panel-header .search-form{width:100%!important;}
  .page-contacts .import-samples{display:grid!important;grid-template-columns:1fr!important;}
  .page-contacts .import-samples .btn{width:100%!important;}

  /* Campaigns */
  .page-campaigns .campaign-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .page-campaigns .campaign-toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:10px!important;}
  .page-campaigns .campaign-filters{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:8px!important;}
  .page-campaigns .campaign-search,.page-campaigns .campaign-filters select{width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;}
  .page-campaign-create .form-grid{grid-template-columns:1fr!important;}
  .page-campaign-create .parameter-tip{overflow-wrap:anywhere!important;}

  /* Agents become clean stacked cards. */
  
  .page-agents .agent-list .agent-card>.agent-identity{grid-column:1/-1!important;grid-row:auto!important;padding-bottom:3px!important;}
  .page-agents .agent-list .agent-card>.agent-metric{grid-column:auto!important;grid-row:auto!important;border:1px solid #edf2ef!important;border-radius:9px!important;padding:9px!important;}
  .page-agents .agent-list .agent-card>.agent-status-slot{grid-column:1!important;grid-row:auto!important;justify-content:flex-start!important;}
  .page-agents .agent-list .agent-card>.agent-actions{grid-column:1/-1!important;grid-row:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:stretch!important;width:100%!important;}
  .page-agents .agent-list .agent-card>.agent-actions form,.page-agents .agent-list .agent-card>.agent-actions .btn{width:100%!important;}

  /* Follow-up mobile card history rules already exist; reinforce containment only. */
  .page-auto-followup .followup-create-form,.page-auto-followup .followup-help-panel{padding:11px!important;}
  .page-auto-followup .followup-step-card{padding:10px!important;}
  .page-auto-followup .followup-form-actions{gap:7px!important;}

  /* Settings / System */
  .page-settings .api-rd-card-head{align-items:flex-start!important;gap:9px!important;}
  .page-settings .api-rd-state{flex:0 0 auto!important;max-width:100%!important;}

  .page-system .system-check-grid{grid-template-columns:minmax(0,1fr)!important;}

  /* Inbox = list or chat, never both squeezed together. */

  .inbox-layout{
    height:calc(100dvh - 68px)!important;
    min-height:0!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    
  }
  .inbox-layout:not(.chat-open) .chat-panel{display:none!important;}
  .inbox-layout.chat-open .conversation-list{display:none!important;}
  .inbox-layout.chat-open .chat-panel{display:flex!important;position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;z-index:70!important;}
  .inbox-layout.chat-open .chat-active{height:100dvh!important;}
  .inbox-layout .chat-header{min-height:104px!important;padding:8px!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important;border-radius:0!important;}
  .inbox-layout .mobile-chat-back{display:grid!important;}
  .inbox-layout .chat-person{display:grid!important;grid-template-columns:36px 40px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;width:100%!important;}
  .inbox-layout .chat-person>.avatar{width:40px!important;height:40px!important;}
  .inbox-layout .chat-person-copy{min-width:0!important;overflow:hidden!important;}
  .inbox-layout .chat-person-copy strong,.inbox-layout .chat-person-copy small{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .inbox-layout .chat-actions,.inbox-layout .chat-actions.has-agent-select,.inbox-layout .chat-actions.agent-view{display:grid!important;width:100%!important;gap:6px!important;}
  .inbox-layout .chat-actions.has-agent-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px!important;}
  .inbox-layout .chat-actions.agent-view{grid-template-columns:minmax(0,1fr) 38px!important;}
  .inbox-layout .chat-actions select{height:38px!important;min-height:38px!important;font-size:12px!important;padding-left:9px!important;padding-right:26px!important;}
  .inbox-layout .messages{padding:9px 7px!important;}
  .inbox-layout .bubble{max-width:88%!important;overflow-wrap:anywhere!important;}
  .inbox-layout .reply-box{gap:6px!important;align-items:flex-end!important;}
  .inbox-layout .reply-box textarea{min-height:40px!important;max-height:96px!important;font-size:16px!important;}
  .quick-reply-menu,.reply-attachment-menu,.chat-more-menu{max-width:calc(100vw - 16px)!important;}

  /* Modals */
  .modal{align-items:flex-end!important;}
  .modal-card,.quick-reply-dialog{width:100%!important;max-height:calc(100dvh - 14px)!important;padding:14px!important;}
  .modal-head{position:sticky!important;top:-14px!important;z-index:2!important;background:#fff!important;padding-top:3px!important;}
}

/* ---------- Very small phones ---------- */
@media (max-width:390px){
  .page-content{padding:10px 8px!important;}

  .page-campaigns .campaign-stat{min-height:64px!important;}
  .page-agents .agent-list .agent-card{grid-template-columns:1fr!important;}
  .page-agents .agent-list .agent-card>.agent-metric,
  .page-agents .agent-list .agent-card>.agent-status-slot,
  .page-agents .agent-list .agent-card>.agent-actions{grid-column:1!important;}
  .page-agents .agent-list .agent-card>.agent-actions{grid-template-columns:1fr!important;}
  .inbox-layout .chat-actions.has-agent-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;gap:4px!important;}
  .inbox-layout .chat-actions.agent-view{grid-template-columns:minmax(0,1fr) 36px!important;}
  .inbox-layout .chat-actions select{font-size:11px!important;padding-left:7px!important;padding-right:22px!important;}
  .inbox-layout .bubble{max-width:92%!important;}
  .page-content>.alert{font-size:10.5px!important;}
}

/* ---------- Short-height tablet/phone: content remains reachable ---------- */
@media (max-width:1100px) and (max-height:620px){
  .page-content:not(.page-inbox){padding-top:12px!important;padding-bottom:18px!important;}
  .sidebar-brand-row{min-height:54px!important;padding-top:5px!important;padding-bottom:4px!important;}
  .side-nav{gap:0!important;padding-top:2px!important;padding-bottom:2px!important;}
  .nav-section-label{padding-top:4px!important;padding-bottom:1px!important;}
  .side-nav a{min-height:30px!important;padding-top:2px!important;padding-bottom:2px!important;}
  .sidebar-user{min-height:39px!important;padding:4px 7px!important;}
  .sidebar-developer{display:none!important;}
}

/* ========================================================================
   V58 — PHONE HEADER + NAVIGATION POLISH
   Phone-only visual refinement. Desktop/tablet application logic untouched.
   ======================================================================== */
.mobile-header-context{display:none;}

@media (max-width:720px){
  /* Header: compact version of the desktop visual language. */
  
  .topbar{

    gap:7px!important;
    border:1px solid rgba(210,223,216,.95)!important;
    
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 7px 22px rgba(18,49,34,.07)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
  }
  .topbar-left{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex:1 1 auto!important;
    min-width:0!important;
  }
  .menu-button{
    display:grid!important;
    place-items:center!important;

    flex:0 0 38px!important;
    min-height:38px!important;
    padding:0!important;
    border:1px solid #dde7e2!important;
    border-radius:11px!important;
    background:#f8fbf9!important;
    color:#315248!important;
    box-shadow:none!important;
  }
  .menu-button i,.menu-button svg{font-size:14px!important;}
  .mobile-header-context{
    display:flex!important;
    align-items:center!important;
    
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .mobile-header-mark{
    display:grid!important;
    place-items:center!important;

    flex:0 0 31px!important;
    
    background:linear-gradient(145deg,#27bf78,#138d58)!important;
    color:#fff!important;
    box-shadow:0 5px 13px rgba(20,154,94,.18)!important;
  }
  .mobile-header-mark i,.mobile-header-mark svg{font-size:16px!important;}
  .mobile-header-copy{
    display:grid!important;
    gap:1px!important;
    min-width:0!important;
    line-height:1.1!important;
  }
  .mobile-header-copy strong{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#193126!important;
    
    font-weight:680!important;
    letter-spacing:-.01em!important;
  }
  .mobile-header-copy small{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#829289!important;
    
    font-weight:500!important;
  }
  .topbar .business-context-pill,.topbar .header-company-logo{display:none!important;}
  .topbar-spacer{display:none!important;}
  .topbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    margin-left:auto!important;
    flex:0 0 auto!important;
  }
  .connection-pill{
    height:34px!important;

    gap:6px!important;
    border-radius:10px!important;
    
    font-weight:650!important;
  }
  .connection-dot{width:7px!important;height:7px!important;}
  .connection-label-full{display:none!important;}
  .connection-label-mobile{display:inline!important;}
  .account-profile{
    width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:3px!important;
    border:1px solid #dde7e2!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .account-profile .avatar{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    font-size:10px!important;
  }
  .top-account-copy,.account-chevron{display:none!important;}
  .account-menu-dropdown{
    position:fixed!important;
    top:72px!important;
    right:8px!important;
    left:auto!important;
    width:min(280px,calc(100vw - 16px))!important;
  }

  /* Drawer: same visual system as desktop, simply denser for phone. */
  .sidebar{
    inset:6px auto 6px 6px!important;
    width:min(300px,calc(100vw - 26px))!important;
    max-width:calc(100vw - 26px)!important;
    height:calc(100dvh - 12px)!important;
    min-height:0!important;
    border-radius:21px!important;
    
    background:
      radial-gradient(circle at 20% -5%,rgba(41,188,119,.20),transparent 14rem),
      linear-gradient(180deg,var(--v30-sidebar),var(--v30-sidebar-2))!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:20px 0 52px rgba(5,27,17,.26)!important;
  }
  .sidebar-brand-row{

    display:flex!important;
    align-items:center!important;
  }

  .sidebar .brand-copy strong{
    
    font-weight:680!important;
    
  }
  
  .sidebar .side-nav{

    overflow:hidden!important;

  }
  
  .sidebar .side-nav a{

    gap:8px!important;

  }
  
  .sidebar .side-nav a.active::before{
    left:-10px!important;
    width:3px!important;
    height:19px!important;
  }

  .sidebar .sidebar-developer{
    
    margin-top:5px!important;
    
  }

  .sidebar-overlay{
    background:rgba(5,22,14,.50)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    backdrop-filter:blur(3px)!important;
  }
}

@media (max-width:390px){
  .topbar{gap:5px!important;}
  .menu-button{width:36px!important;height:36px!important;flex-basis:36px!important;}
  .mobile-header-context{gap:6px!important;}
  .mobile-header-mark{flex-basis:28px!important;border-radius:9px!important;}
  .mobile-header-mark i,.mobile-header-mark svg{font-size:14px!important;}

  .connection-pill{padding:0 7px!important;font-size:8.5px!important;}
  .account-profile{width:36px!important;height:36px!important;min-height:36px!important;}
  .account-profile .avatar{width:28px!important;height:28px!important;flex-basis:28px!important;}
  .sidebar{width:min(292px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;}
}

/* Short phones: retain the same design while compressing vertical density. */
@media (max-width:720px) and (max-height:640px){
  .sidebar-brand-row{min-height:53px!important;padding:5px 10px 3px!important;}
  .sidebar .brand-icon{width:31px!important;height:31px!important;flex-basis:31px!important;font-size:16px!important;}
  .sidebar .brand-copy strong{font-size:12px!important;}.sidebar .brand-copy small{font-size:7.7px!important;}
  .sidebar .side-nav{padding-top:0!important;padding-bottom:2px!important;gap:0!important;}
  .sidebar .nav-section-label{display:block!important;padding:3px 8px 1px!important;font-size:6.1px!important;}
  .sidebar .side-nav a{min-height:28px!important;padding:1px 6px!important;font-size:9.6px!important;}
  .sidebar .nav-icon{width:22px!important;height:22px!important;flex-basis:22px!important;font-size:8.8px!important;}
  .sidebar .sidebar-footer{padding:2px 9px 6px!important;}
  .sidebar .sidebar-user{min-height:38px!important;padding:4px 7px!important;}
  .sidebar .sidebar-user .avatar{width:26px!important;height:26px!important;min-width:26px!important;flex-basis:26px!important;font-size:9.5px!important;}
  .sidebar .sidebar-user-copy strong{font-size:9.8px!important;}.sidebar .sidebar-user-copy small{font-size:7.6px!important;}
  .sidebar .sidebar-developer{display:block!important;margin-top:3px!important;}
  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{min-height:23px!important;padding:2px 6px!important;}
  .sidebar .sidebar-developer .developer-icon{width:18px!important;height:18px!important;min-width:18px!important;flex-basis:18px!important;}
  .sidebar .sidebar-developer .developer-icon i,.sidebar .sidebar-developer .developer-icon svg{width:8px!important;height:8px!important;font-size:8px!important;}
  .sidebar .sidebar-developer .developer-label{font-size:6.3px!important;}
  .sidebar .sidebar-developer .developer-value,.sidebar .sidebar-developer .developer-phone{font-size:7.8px!important;}
}

/* ========================================================================
   MOBILE ACTION BUTTON HEIGHT CONSISTENCY
   Keeps desktop unchanged. Normalizes page-heading action buttons on phone.
   ======================================================================== */
@media (max-width: 720px){
  .page-heading .heading-actions{
    align-items:stretch !important;
    gap:8px !important;
  }
  .page-heading .heading-actions > form,
  .page-heading .heading-actions > a,
  .page-heading .heading-actions > button,
  .page-heading .heading-actions > .btn{
    min-width:0 !important;
  }
  .page-heading .heading-actions > form{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }
  .page-heading .heading-actions .btn,
  .page-heading .heading-actions > form .btn{
    width:100% !important;
    min-height:40px !important;
    height:40px !important;
    padding:8px 14px !important;
    border-radius:12px !important;
    font-size:13px !important;
    line-height:1.15 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }
  .page-heading .heading-actions .btn i,
  .page-heading .heading-actions .btn svg{
    font-size:12px !important;
    line-height:1 !important;
  }
}

/* ========================================================================
   V60 — PHONE ACTION BUTTONS + AGENTS ALIGNMENT
   Phone-only visual correction. Desktop/tablet and application logic stay unchanged.
   ======================================================================== */
@media (max-width:720px){
  /* Visibly compact and consistent page-heading action buttons. */
  .page-heading > .btn,
  .page-heading > button.btn,
  .page-heading .heading-actions .btn,
  .page-heading .heading-actions > form .btn,
  .campaign-heading .heading-actions .btn,
  .campaign-heading .heading-actions > form .btn{
    width:100% !important;
    height:38px !important;
    min-height:38px !important;
    padding:6px 12px !important;
    border-radius:11px !important;
    font-size:12.5px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
  }
  .page-heading > .btn i,
  .page-heading > .btn svg,
  .page-heading .heading-actions .btn i,
  .page-heading .heading-actions .btn svg,
  .campaign-heading .heading-actions .btn i,
  .campaign-heading .heading-actions .btn svg{
    font-size:11.5px !important;
    line-height:1 !important;
  }
  .page-heading .heading-actions > form,
  .campaign-heading .heading-actions > form{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }

  /* Agents page heading: Add agent lines up with all other mobile page actions. */
  .page-agents .page-heading > .btn{
    align-self:stretch !important;
    margin:0 !important;
  }

  /* Agents: one intentional mobile card grid. */
  .page-agents .agent-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .page-agents .agent-list .agent-card{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "identity identity"
      "active maximum"
      "status status"
      "actions actions" !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    padding:13px !important;
    border-radius:13px !important;
  }
  .page-agents .agent-list .agent-card > .agent-identity{
    grid-area:identity !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
    padding:0 0 2px !important;
  }
  .page-agents .agent-list .agent-card > .agent-identity .avatar{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    font-size:14px !important;
  }
  .page-agents .agent-list .agent-card .agent-identity-copy{
    min-width:0 !important;
    display:grid !important;
    align-content:center !important;
    gap:2px !important;
  }
  .page-agents .agent-list .agent-card .agent-identity-copy h3{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }
  .page-agents .agent-list .agent-card .agent-subline,
  .page-agents .agent-list .agent-card .agent-subline p{
    min-width:0 !important;
    margin:0 !important;
    font-size:10.5px !important;
    line-height:1.3 !important;
    color:#7d8998 !important;
    overflow-wrap:anywhere !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric:nth-child(2){grid-area:active !important;}
  .page-agents .agent-list .agent-card > .agent-metric:nth-child(3){grid-area:maximum !important;}
  .page-agents .agent-list .agent-card > .agent-metric{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;
    margin:0 !important;
    padding:9px 11px !important;
    border:1px solid #e7eeeb !important;
    border-radius:10px !important;
    background:#fafcfb !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric strong{
    margin:0 !important;
    font-size:15px !important;
    line-height:1.1 !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric span{
    margin-top:3px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    color:#7d8998 !important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot{
    grid-area:status !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:1px 0 0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions{
    grid-area:actions !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions form{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions .btn,
  .page-agents .agent-list .agent-card > .agent-actions .btn.danger{
    width:100% !important;
    height:38px !important;
    min-height:38px !important;
    padding:6px 8px !important;
    border-radius:10px !important;
    font-size:11.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .page-agents .agent-list .agent-card > .agent-account-note{
    grid-area:actions !important;
    width:100% !important;
    margin:0 !important;
    padding:7px 0 0 !important;
    text-align:left !important;
  }
}

@media (max-width:340px){
  
}

/* ========================================================================
   V62 — SMALL PHONE ALIGNMENT ONLY
   Keeps the existing Agents mobile structure exactly the same.
   No stacking/reordering. Only spacing, sizing and alignment are refined.
   ======================================================================== */
@media (max-width:480px){
  /* Page action buttons: visibly shorter, same structure. */
  .page-heading > .btn,
  .page-heading > button.btn,
  .page-heading .heading-actions .btn,
  .page-heading .heading-actions > form .btn,
  .campaign-heading .heading-actions .btn,
  .campaign-heading .heading-actions > form .btn{
    height:34px !important;
    min-height:34px !important;
    padding:5px 11px !important;
    border-radius:10px !important;
    font-size:11.8px !important;
    line-height:1 !important;
    gap:6px !important;
  }
  .page-heading > .btn i,
  .page-heading > .btn svg,
  .page-heading .heading-actions .btn i,
  .page-heading .heading-actions .btn svg,
  .campaign-heading .heading-actions .btn i,
  .campaign-heading .heading-actions .btn svg{
    font-size:10.8px !important;
  }

  /* Agents card: preserve identity / 2 metrics / status / 2 actions structure. */
  .page-agents .agent-list{
    gap:10px !important;
  }
  .page-agents .agent-list .agent-card{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "identity identity"
      "active maximum"
      "status status"
      "actions actions" !important;
    gap:9px !important;
    padding:12px !important;
    border-radius:13px !important;
    align-items:center !important;
  }
  .page-agents .agent-list .agent-card > .agent-identity{
    grid-area:identity !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    padding:0 !important;
    min-width:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-identity .avatar{
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
    font-size:13px !important;
  }
  .page-agents .agent-list .agent-card .agent-identity-copy{
    display:grid !important;
    align-content:center !important;
    gap:1px !important;
    min-width:0 !important;
  }
  .page-agents .agent-list .agent-card .agent-identity-copy h3{
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
  }
  .page-agents .agent-list .agent-card .agent-subline,
  .page-agents .agent-list .agent-card .agent-subline p{
    margin:0 !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric{
    min-height:50px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric strong{
    font-size:13.5px !important;
    line-height:1.05 !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric span{
    margin-top:2px !important;
    font-size:9.6px !important;
    line-height:1.15 !important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot{
    grid-area:status !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:34px !important;
    padding:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot .status{
    min-height:30px !important;
    padding:5px 10px !important;
    font-size:10.5px !important;
    gap:5px !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions{
    grid-area:actions !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions form{
    width:100% !important;
    margin:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions .btn,
  .page-agents .agent-list .agent-card > .agent-actions .btn.danger{
    width:100% !important;
    height:34px !important;
    min-height:34px !important;
    padding:5px 7px !important;
    border-radius:10px !important;
    font-size:10.8px !important;
    line-height:1 !important;
    gap:5px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:340px){
  /* Still keep the same two-column structure; just tighten it slightly. */
  .page-agents .agent-list .agent-card{
    padding:10px !important;
    gap:8px !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric{
    padding:7px 8px !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .page-agents .agent-list .agent-card > .agent-actions .btn,
  .page-agents .agent-list .agent-card > .agent-actions .btn.danger{
    padding:4px 5px !important;
    font-size:10.2px !important;
  }
}

/* ========================================================================
   V63 — SMALL PHONE AGENT METRIC CONTENT ALIGNMENT ONLY
   Keeps the existing structure and fixes only the inner alignment of the
   active chats / maximum metric boxes.
   ======================================================================== */
@media (max-width: 480px){
  .page-agents .agent-list .agent-card > .agent-metric{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:56px !important;
    padding:9px 12px !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric strong,
  .page-agents .agent-list .agent-card > .agent-metric span{
    margin:0 !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric strong{
    font-size:13.5px !important;
    line-height:1 !important;
  }
  .page-agents .agent-list .agent-card > .agent-metric span{
    font-size:9.7px !important;
    line-height:1.15 !important;
  }
}

/* ========================================================================
   V64 — SMALL PHONE AGENT STATUS ALIGNMENT ONLY
   Keeps the existing structure and fixes only the Active badge row alignment.
   ======================================================================== */
@media (max-width: 480px){
  
  .page-agents .agent-list .agent-card > .agent-status-slot .status,
  .page-agents .agent-list .agent-card > .agent-status-slot [data-agent-status]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    
    gap:6px !important;
    
    line-height:1 !important;
  }
}

/* ========================================================================
   V65 — PHONE ALIGNMENT CLEANUP PASS
   Focused on small-screen alignment only:
   - Agents status row spacing
   - Auto Reply status card
   - Auto Follow-Up help panel
   - Auto Follow-Up scheduled cards
   ======================================================================== */
@media (max-width: 480px){
  /* Agents: keep the same structure, just center the status row better */
  .page-agents .agent-list .agent-card{
    row-gap:10px !important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:auto !important;
    height:auto !important;
    padding:2px 0 0 !important;
    margin:-2px 0 2px !important;
  }
  .page-agents .agent-list .agent-card > .agent-status-slot .status,
  .page-agents .agent-list .agent-card > .agent-status-slot [data-agent-status]{
    min-height:30px !important;
    height:30px !important;
    padding:0 12px !important;
    font-size:11px !important;
  }

  /* Auto Reply status card */
  .page-auto-reply .auto-reply-layout-grid > aside{
    padding:16px !important;
    display:grid !important;
    gap:14px !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside > div:first-child{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside > div:first-child .metric-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside strong[style*="font-size:17px"]{
    display:block !important;
    font-size:15px !important;
    line-height:1.2 !important;
    margin:0 !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside > div:first-child > div > div{
    margin-top:6px !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside > p{
    margin:0 !important;
    font-size:12px !important;
    line-height:1.58 !important;
    color:#657287 !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside .notice{
    margin-top:0 !important;
    padding:14px !important;
    border-radius:12px !important;
    display:grid !important;
    gap:8px !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside .notice > strong{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    line-height:1.2 !important;
    margin:0 !important;
  }
  .page-auto-reply .auto-reply-layout-grid > aside .notice > p{
    margin:0 !important;
    font-size:11.5px !important;
    line-height:1.55 !important;
  }

  /* Auto Follow-Up help panel */
  .page-auto-followup .followup-help-panel{
    
    display:grid !important;
    
  }
  .page-auto-followup .followup-help-panel h2{
    margin:0 !important;
    
    line-height:1.2 !important;
  }
  .page-auto-followup .followup-help-panel ol{
    margin:0 !important;

  }
  
  .page-auto-followup .followup-help-panel .notice{
    margin-top:0 !important;

    display:grid !important;
    
  }
  .page-auto-followup .followup-help-panel .notice > strong{
    display:flex !important;
    align-items:center !important;
    
    line-height:1.2 !important;
    margin:0 !important;
  }
  .page-auto-followup .followup-help-panel .notice > p{
    margin:0 !important;

  }

  /* Auto Follow-Up scheduled cards */
  .page-auto-followup .followup-scheduled-panel .panel-header{
    padding-bottom:10px !important;
  }
  .page-auto-followup .followup-scheduled-panel .panel-header h2{
    font-size:15px !important;
    line-height:1.2 !important;
  }
  .page-auto-followup .followup-scheduled-panel .panel-header .muted{
    margin-top:5px !important;
    font-size:12px !important;
    line-height:1.5 !important;
  }
  .page-auto-followup .followup-sequence-table tbody{
    gap:10px !important;
    padding:8px !important;
  }
  .page-auto-followup .followup-sequence-table tr{
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 6px 18px rgba(15,23,42,.05) !important;
  }
  .page-auto-followup .followup-sequence-table td{
    grid-template-columns:78px minmax(0,1fr) !important;
    padding:10px 12px !important;
    gap:10px !important;
    font-size:11.5px !important;
    line-height:1.45 !important;
  }
  .page-auto-followup .followup-sequence-table td::before{
    font-size:8.75px !important;
    letter-spacing:.06em !important;
  }
  .page-auto-followup .followup-sequence-table td > strong{
    font-size:13px !important;
    line-height:1.28 !important;
  }
  .page-auto-followup .followup-sequence-table td small{
    margin-top:3px !important;
    font-size:10.8px !important;
    line-height:1.45 !important;
  }
  .page-auto-followup .followup-sequence-table td .status{
    min-width:0 !important;
    min-height:30px !important;
    padding:6px 12px !important;
    border-radius:999px !important;
    font-size:11px !important;
  }
  .page-auto-followup .followup-sequence-table td form .btn{
    min-height:36px !important;
    height:36px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }
}

/* ========================================================================
   V66 — SMALL PHONE NORMAL BUTTON HEIGHT CONSISTENCY
   Small phones only. Standardizes normal action buttons across pages while
   leaving .btn.small and icon-only controls at their intentional sizes.
   ======================================================================== */
@media (max-width: 480px){
  .page-content .btn:not(.small){
    height:34px !important;
    min-height:34px !important;
    padding:5px 11px !important;
    border-radius:10px !important;
    font-size:11.8px !important;
    line-height:1 !important;
    gap:6px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .page-content .btn:not(.small) i,
  .page-content .btn:not(.small) svg{
    font-size:10.8px !important;
    line-height:1 !important;
  }
  .page-content form > .btn:not(.small),
  .page-content .heading-actions .btn:not(.small),
  .page-content .form-actions .btn:not(.small),
  .page-content .followup-form-actions .btn:not(.small),
  .page-content .agent-actions .btn:not(.small){
    min-height:34px !important;
    height:34px !important;
  }

  /* Preserve intentionally compact/shape-specific controls. */
  .page-content .btn.small{
    height:auto !important;
  }
  .page-content .icon-button,
  .page-content .reply-tool-button,
  .page-content .send-button,
  .page-content .voice-record-button{
    height:auto;
  }
}

/* ========================================================================
   V67 — SMALL-SCREEN NAVIGATION ALIGNMENT CLEANUP
   Phone-only polish for the sidebar drawer. Keeps structure and logic the
   same, but gives the mobile navigation a cleaner baseline, steadier spacing,
   better footer alignment, and a more consistent visual rhythm.
   ======================================================================== */
@media (max-width:720px){
  .sidebar{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  .sidebar-brand-row{
    min-height:68px!important;
    padding:10px 14px 8px!important;
    flex:0 0 auto!important;
  }
  .sidebar .brand{
    width:100%!important;
    min-height:0!important;
    padding:6px 8px!important;
    gap:11px!important;
    align-items:center!important;
  }
  .sidebar .brand-icon{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    border-radius:12px!important;
    font-size:19px!important;
  }
  .sidebar .brand-copy{
    gap:2px!important;
  }
  .sidebar .brand-copy strong{
    font-size:14px!important;
    line-height:1.08!important;
  }
  .sidebar .brand-copy small{
    font-size:8.9px!important;
    line-height:1.15!important;
  }

  .sidebar .side-nav{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
    min-height:0!important;
    padding:4px 10px 6px!important;
    gap:2px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
  }
  .sidebar .side-nav::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
  .sidebar .nav-section-label{
    display:block!important;
    padding:8px 10px 4px!important;
    margin:2px 0 0!important;
    font-size:7.4px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.12em!important;
    color:#6c897d!important;
  }
  .sidebar .side-nav a{
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:9px!important;
    min-height:36px!important;
    padding:4px 9px!important;
    border-radius:11px!important;
    font-size:11.2px!important;
    font-weight:560!important;
    line-height:1.15!important;
  }
  .sidebar .nav-icon{
    width:26px!important;
    height:26px!important;
    flex:0 0 26px!important;
    border-radius:8px!important;
    display:grid!important;
    place-items:center!important;
    font-size:10.3px!important;
  }
  .sidebar .nav-label{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .sidebar .nav-unread-badge{
    align-self:center!important;
    justify-self:end!important;
    min-width:19px!important;
    height:19px!important;
    padding:0 5px!important;
    font-size:8.3px!important;
    line-height:1!important;
  }

  .sidebar .sidebar-footer{
    margin-top:auto!important;

    flex:0 0 auto!important;
  }
  .sidebar .sidebar-user{
    display:grid!important;

    margin:0!important;

  }

  .sidebar .online-dot{
    margin-left:0!important;
    justify-self:end!important;
  }

  .sidebar .sidebar-developer{
    display:grid!important;
    gap:0!important;
    margin:0!important;

  }
  .sidebar .sidebar-developer .developer-card-top,
  .sidebar .sidebar-developer .developer-card-row{
    display:grid!important;
    align-items:center!important;
    column-gap:8px!important;
    min-height:31px!important;
    padding:5px 7px!important;
  }

  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  
}

@media (max-width:390px){
  .sidebar-brand-row{
    min-height:64px!important;
    padding:8px 12px 7px!important;
  }
  .sidebar .brand-icon{
    width:35px!important;
    height:35px!important;
    flex-basis:35px!important;
  }
  .sidebar .brand-copy strong{font-size:13px!important;}
  .sidebar .brand-copy small{font-size:8.3px!important;}
  .sidebar .side-nav{
    padding:3px 9px 5px!important;
  }
  .sidebar .nav-section-label{
    padding:7px 9px 3px!important;
    font-size:6.9px!important;
  }
  .sidebar .side-nav a{
    min-height:34px!important;
    padding:3px 8px!important;
    column-gap:8px!important;
    font-size:10.6px!important;
  }
  .sidebar .nav-icon{
    width:24px!important;
    height:24px!important;
    flex-basis:24px!important;
    font-size:9.8px!important;
  }
  
}

/* ========================================================================
   V69 — PHONE SIDEBAR FOOTER: MATCH PC VERSION
   Reverts the V68 enlargement. Small-screen footer uses the same PC card
   proportions, typography hierarchy, colors and alignment, fitted to drawer.
   ======================================================================== */
@media (max-width:720px){
  .sidebar .sidebar-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;

  }
  .sidebar .sidebar-user,
  .sidebar .sidebar-developer{
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    border-radius:13px!important;
    border:1px solid rgba(71,211,143,.11)!important;
    background:linear-gradient(180deg,rgba(20,48,38,.94),rgba(12,34,27,.96))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .sidebar .sidebar-user{

    align-items:center!important;
  }
  .sidebar .sidebar-user .avatar{

    justify-self:center!important;
    
    font-weight:650!important;
  }
  .sidebar .sidebar-user-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    
    min-width:0!important;
  }
  .sidebar .sidebar-user-copy strong{
    margin:0!important;
    padding:0!important;

    font-weight:620!important;
    color:#f2faf6!important;
  }
  .sidebar .sidebar-user-copy small{
    margin:0!important;
    padding:0!important;

    color:#8fa59a!important;
  }
  .sidebar .sidebar-user .online-dot{
    margin:0!important;
    align-self:center!important;
    
  }

  .sidebar .sidebar-developer{
    
    overflow:hidden!important;
  }
  .sidebar .sidebar-developer .developer-card-row{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) 14px!important;
    align-items:center!important;
    gap:9px!important;
    min-height:36px!important;
    padding:5px 6px!important;
    box-sizing:border-box!important;
  }
  
  .sidebar .sidebar-developer .developer-card-bottom{
    border-top:1px solid rgba(181,214,198,.075)!important;
  }
  .sidebar .sidebar-developer .developer-icon{

    justify-self:center!important;
    
    background:rgba(53,207,136,.08)!important;
    border-color:rgba(71,211,143,.10)!important;
    color:#43dc92!important;
  }
  
  .sidebar .sidebar-developer .developer-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    
    min-width:0!important;
    align-self:center!important;
  }
  .sidebar .sidebar-developer .developer-label{

    font-weight:450!important;
    color:#7f9b8e!important;
  }
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{

    font-weight:620!important;
  }
  .sidebar .sidebar-developer .developer-value{color:#43dc92!important;}
  .sidebar .sidebar-developer .developer-phone{color:#d4e3dc!important;}
  .sidebar .sidebar-developer .developer-arrow{
    width:14px!important;
    height:14px!important;
    display:grid!important;
    place-items:center!important;
    justify-self:center!important;
    align-self:center!important;
    color:#7f9b8e!important;
    font-size:9px!important;
  }
  .sidebar .sidebar-developer .developer-arrow i,
  .sidebar .sidebar-developer .developer-arrow svg{
    width:9px!important;
    height:9px!important;
  }
}

@media (max-width:390px){
  /* Preserve the PC look; only trim outer padding to fit narrow drawer. */
  
}

/* ========================================================================
   V70 — PHONE FOOTER: EXACT V67 SIZE + PC VISUAL STYLE
   Uses the exact small-screen dimensions from the user-provided V67 ZIP,
   while preserving the PC-style footer card colors/borders/alignment.
   ======================================================================== */
@media (max-width:720px){
  .sidebar .sidebar-footer{
    gap:8px!important;
    padding:8px 10px 10px!important;
  }
  .sidebar .sidebar-user{
    grid-template-columns:30px minmax(0,1fr) auto!important;
    column-gap:8px!important;
    min-height:46px!important;
    padding:7px 8px!important;
    border-radius:12px!important;
  }
  .sidebar .sidebar-user .avatar{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex-basis:30px!important;
    font-size:11px!important;
  }
  .sidebar .sidebar-user-copy{
    gap:2px!important;
  }
  .sidebar .sidebar-user-copy strong{
    font-size:11px!important;
    line-height:1.08!important;
  }
  .sidebar .sidebar-user-copy small{
    font-size:8.6px!important;
    line-height:1.1!important;
  }
  .sidebar .sidebar-user .online-dot{
    justify-self:end!important;
  }

  .sidebar .sidebar-developer{
    padding:8px!important;
    border-radius:12px!important;
  }
  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{
    min-height:31px!important;
    padding:5px 7px!important;
    gap:8px!important;
  }
  .sidebar .sidebar-developer .developer-card-top{
    grid-template-columns:24px minmax(0,1fr)!important;
  }
  .sidebar .sidebar-developer .developer-card-bottom{
    grid-template-columns:24px minmax(0,1fr) auto!important;
  }
  .sidebar .sidebar-developer .developer-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    flex-basis:24px!important;
    border-radius:8px!important;
  }
  .sidebar .sidebar-developer .developer-icon i,
  .sidebar .sidebar-developer .developer-icon svg{
    width:10px!important;
    height:10px!important;
    font-size:10px!important;
  }
  .sidebar .sidebar-developer .developer-copy{
    gap:2px!important;
  }
  .sidebar .sidebar-developer .developer-label{
    font-size:7.5px!important;
    line-height:1!important;
  }
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{
    font-size:9.5px!important;
    line-height:1.08!important;
  }
  .sidebar .sidebar-developer .developer-arrow,
  .sidebar .sidebar-developer .developer-arrow i,
  .sidebar .sidebar-developer .developer-arrow svg{
    font-size:9px!important;
  }
}
@media (max-width:390px){
  .sidebar .sidebar-footer{
    gap:7px!important;
    padding:7px 9px 9px!important;
  }
}

/* ========================================================================
   V73 — INBOX APPROVED TEMPLATE COMPOSER ALIGNMENT
   Scoped to Inbox only. Handles every approved-template field type without
   changing template data, validation, or send logic.
   ======================================================================== */
.page-inbox .template-reply{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  max-height:min(54dvh,560px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  display:grid!important;

  gap:9px!important;
  padding:10px 11px calc(10px + env(safe-area-inset-bottom))!important;
  border-top:1px solid #dde5e1!important;
  background:#f7faf8!important;
  box-sizing:border-box!important;
  scrollbar-width:thin!important;
}
.page-inbox .template-reply > *,
.page-inbox .template-reply label,
.page-inbox .template-reply div,
.page-inbox .template-reply span{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.page-inbox .template-reply > select,
.page-inbox .template-reply > input:not([type="hidden"]),
.page-inbox .template-reply input:not([type="hidden"]),
.page-inbox .template-reply textarea,
.page-inbox .template-reply select{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.page-inbox .template-reply > select,
.page-inbox .template-reply > input:not([type="hidden"]),
.page-inbox .template-reply .inbox-button-fields > input{
  min-height:39px!important;
  height:39px!important;
  padding:8px 10px!important;
  border:1px solid #d7e0dc!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#26364a!important;
  font-size:12px!important;
  line-height:1.2!important;
  box-shadow:none!important;
}
.page-inbox .template-reply textarea{
  min-height:76px!important;
  padding:9px 10px!important;
  border:1px solid #d7e0dc!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#26364a!important;
  font-size:12px!important;
  line-height:1.45!important;
  resize:vertical!important;
  overflow-wrap:anywhere!important;
}
.page-inbox .template-reply select{
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.page-inbox .template-requirements.compact{
  grid-column:1/-1!important;
  width:100%!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid #d9e8e0!important;
  border-radius:10px!important;
  background:#f1f8f4!important;
  color:#547063!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.page-inbox .template-requirements.compact.error-state{
  border-color:#efd0d3!important;
  background:#fff6f7!important;
  color:#a33a43!important;
}
.page-inbox .inbox-button-fields,
.page-inbox .inbox-media-field,
.page-inbox .template-special-fields{
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
}
.page-inbox .inbox-button-fields{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
}
.page-inbox .inbox-media-field{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  padding:10px!important;
  border:1px solid #e0e8e4!important;
  border-radius:11px!important;
  background:#fbfdfc!important;
}
.page-inbox .inbox-media-field input[type="file"],
.page-inbox .template-special-fields input[type="file"]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:7px!important;
  border:1px solid #d7e0dc!important;
  border-radius:9px!important;
  background:#fff!important;
  font-size:11px!important;
}
.page-inbox .inbox-media-field small,
.page-inbox .template-special-fields .help,
.page-inbox .template-special-fields small{
  display:block!important;
  max-width:100%!important;
  color:#77867f!important;
  font-size:10px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.page-inbox .template-special-fields{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:9px!important;
}
.page-inbox .template-special-fields .button-variable-group,
.page-inbox .template-special-fields .variable-input-list{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:10px!important;
  border:1px solid #e0e8e4!important;
  border-radius:11px!important;
  background:#fbfdfc!important;
  overflow:hidden!important;
}
.page-inbox .template-special-fields .variable-group-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:5px 9px!important;
  width:100%!important;
  min-width:0!important;
  padding-bottom:7px!important;
  border-bottom:1px solid #edf1ef!important;
}
.page-inbox .template-special-fields .variable-group-head strong{
  color:#263a31!important;
  font-size:11.5px!important;
  line-height:1.25!important;
  overflow-wrap:anywhere!important;
}
.page-inbox .template-special-fields .variable-group-head .help{
  margin:0!important;
  font-size:9.5px!important;
}
.page-inbox .template-special-fields .form-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
}
.page-inbox .template-special-fields label,
.page-inbox .template-special-fields .variable-input-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  color:#405146!important;
  font-size:10.5px!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}
.page-inbox .template-special-fields .variable-label-line{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:5px 7px!important;
  min-width:0!important;
}
.page-inbox .template-special-fields .variable-label-line strong,
.page-inbox .template-special-fields .variable-label-line span{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
.page-inbox .template-special-fields code{
  display:inline-block!important;
  max-width:100%!important;
  padding:2px 5px!important;
  border-radius:5px!important;
  background:#edf3f0!important;
  color:#4d6659!important;
  font-size:9px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.page-inbox .template-special-fields input:not([type="file"]),
.page-inbox .template-special-fields select{
  min-height:39px!important;
  height:39px!important;
  padding:8px 10px!important;
  border:1px solid #d7e0dc!important;
  border-radius:9px!important;
  background:#fff!important;
  font-size:12px!important;
  box-shadow:none!important;
}
.page-inbox .template-special-fields textarea{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.page-inbox .template-form-actions .btn{
  
  height:36px!important;
  min-height:36px!important;
  padding:6px 11px!important;
  border-radius:9px!important;
  font-size:11.5px!important;
  line-height:1!important;
}

@media (max-width:720px){
  .page-inbox .template-reply{
    max-height:min(58dvh,520px)!important;
    gap:8px!important;
    padding:9px 9px calc(9px + env(safe-area-inset-bottom))!important;
  }
  .page-inbox .template-reply > select,
  .page-inbox .template-reply > input:not([type="hidden"]),
  .page-inbox .template-reply .inbox-button-fields > input,
  .page-inbox .template-special-fields input:not([type="file"]),
  .page-inbox .template-special-fields select{
    height:38px!important;
    min-height:38px!important;
    font-size:16px!important; /* prevents iOS zoom */
  }
  .page-inbox .template-special-fields textarea{
    font-size:16px!important; /* prevents iOS zoom */
  }
  .page-inbox .template-special-fields .form-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .page-inbox .template-form-actions{
    bottom:calc(-9px - env(safe-area-inset-bottom))!important;

    gap:6px!important;
  }
  .page-inbox .template-form-actions .btn{

    height:36px!important;
    min-height:36px!important;
    font-size:11.5px!important;
  }
  .page-inbox .template-form-actions .btn:only-child{
    grid-column:1/-1!important;
  }
}

@media (max-width:390px){
  .page-inbox .template-reply{
    max-height:min(60dvh,500px)!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .page-inbox .template-special-fields .button-variable-group,
  .page-inbox .template-special-fields .variable-input-list,
  .page-inbox .inbox-media-field{
    padding:9px!important;
  }
  .page-inbox .template-form-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* ========================================================================
   V74 — INBOX TEMPLATE HIDDEN-FIELD VISIBILITY FIX
   V73's layout rules intentionally use display:grid for template field
   containers, but that must never override the native hidden attribute.
   Template-specific controls remain invisible until JS reveals them for the
   selected approved template.
   ======================================================================== */
.page-inbox .template-reply [hidden],
.page-inbox .template-reply .inbox-button-fields[hidden],
.page-inbox .template-reply .inbox-media-field[hidden],
.page-inbox .template-reply .template-special-fields[hidden],
.page-inbox .template-reply .template-requirements[hidden],
.page-inbox .template-reply [data-template-cancel][hidden]{
  display:none!important;
}

/* ========================================================================
   V75 — INBOX TEMPLATE SELECT + SEND SAME LINE
   Keeps template fields below, but puts the template selector and Send button
   on one line. If Cancel becomes visible, actions automatically drop to their
   own full-width row so nothing overflows.
   ======================================================================== */
.page-inbox .template-reply{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
}
.page-inbox .template-reply > select[data-template-id]{
  grid-column:1!important;
  grid-row:1!important;
}
.page-inbox .template-form-actions{
  position:static!important;
  bottom:auto!important;
  z-index:auto!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
.page-inbox .template-form-actions .btn{
  min-width:112px!important;
  white-space:nowrap!important;
}
.page-inbox .template-requirements.compact,
.page-inbox .template-reply > input:not([type="hidden"]),
.page-inbox .inbox-button-fields,
.page-inbox .inbox-media-field,
.page-inbox .template-special-fields{
  grid-column:1/-1!important;
}
.page-inbox .template-form-actions:has(button[data-template-cancel]:not([hidden])){
  grid-column:1/-1!important;
  grid-row:auto!important;
  width:100%!important;
  justify-self:stretch!important;
  padding-top:4px!important;
}
@media (max-width:720px){
  .page-inbox .template-reply{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .page-inbox .template-form-actions{
    display:flex!important;
    grid-template-columns:none!important;
  }
  .page-inbox .template-form-actions .btn{
    width:auto!important;
    min-width:108px!important;
  }
  .page-inbox .template-form-actions:has(button[data-template-cancel]:not([hidden])){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .page-inbox .template-form-actions:has(button[data-template-cancel]:not([hidden])) .btn{
    width:100%!important;
    min-width:0!important;
  }
}
@media (max-width:390px){
  .page-inbox .template-reply{
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:8px!important;
  }
  .page-inbox .template-form-actions .btn{
    min-width:102px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* ========================================================================
   V76 — PHONE SCHEDULED FOLLOW-UPS AS SCROLLABLE PC TABLE
   On phones, keep the same row/table structure used on desktop and allow
   horizontal scrolling inside the table wrapper instead of converting rows
   into stacked mobile cards.
   ======================================================================== */
@media (max-width:700px){
  .page-auto-followup .followup-scheduled-panel{
    overflow:hidden!important;
  }
  .page-auto-followup .followup-table-wrap{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:thin!important;
    background:#fff!important;
  }
  .page-auto-followup .followup-table-wrap::-webkit-scrollbar{
    height:7px!important;
  }
  .page-auto-followup .followup-table-wrap::-webkit-scrollbar-thumb{
    background:#c7d2cc!important;
    border-radius:999px!important;
  }
  .page-auto-followup .followup-sequence-table{
    display:table!important;
    table-layout:auto!important;
    width:760px!important;
    min-width:760px!important;
    max-width:none!important;
    border-collapse:collapse!important;
    background:#fff!important;
  }
  .page-auto-followup .followup-sequence-table thead{
    display:table-header-group!important;
  }
  .page-auto-followup .followup-sequence-table tbody{
    display:table-row-group!important;
    padding:0!important;
  }
  .page-auto-followup .followup-sequence-table tr{
    display:table-row!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .page-auto-followup .followup-sequence-table th,
  .page-auto-followup .followup-sequence-table td,
  .page-auto-followup .followup-sequence-table td:nth-child(1),
  .page-auto-followup .followup-sequence-table td:nth-child(3),
  .page-auto-followup .followup-sequence-table td:nth-child(5){
    display:table-cell!important;
    grid-column:auto!important;
    grid-template-columns:none!important;
    vertical-align:middle!important;
    min-width:0!important;
    max-width:none!important;
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid #e7ece9!important;
    background:transparent!important;
    font-size:10.5px!important;
    line-height:1.4!important;
    overflow-wrap:normal!important;
  }
  .page-auto-followup .followup-sequence-table th{
    height:38px!important;
    background:#f8faf9!important;
    color:#728078!important;
    font-size:9px!important;
    font-weight:750!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }
  .page-auto-followup .followup-sequence-table td::before{
    content:none!important;
    display:none!important;
  }
  .page-auto-followup .followup-sequence-table td:nth-child(1){width:155px!important;}
  .page-auto-followup .followup-sequence-table td:nth-child(2){width:95px!important;}
  .page-auto-followup .followup-sequence-table td:nth-child(3){
    width:240px!important;
    max-width:240px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .page-auto-followup .followup-sequence-table td:nth-child(4){width:165px!important;white-space:nowrap!important;}
  .page-auto-followup .followup-sequence-table td:nth-child(5){width:105px!important;}
  .page-auto-followup .followup-sequence-table td > strong{
    display:block!important;
    font-size:11.5px!important;
    line-height:1.3!important;
  }
  .page-auto-followup .followup-sequence-table td small{
    display:block!important;
    margin-top:3px!important;
    font-size:9.5px!important;
    line-height:1.4!important;
  }
  .page-auto-followup .followup-sequence-table td .status{
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:4px 8px!important;
    border-radius:999px!important;
    font-size:9.5px!important;
    white-space:nowrap!important;
  }
  .page-auto-followup .followup-sequence-table td form{
    display:inline-block!important;
    width:auto!important;
    margin:0!important;
  }
  .page-auto-followup .followup-sequence-table td form .btn{
    width:auto!important;
    min-width:76px!important;
    height:32px!important;
    min-height:32px!important;
    padding:5px 10px!important;
    border-radius:8px!important;
    font-size:9.8px!important;
    white-space:nowrap!important;
  }
  .page-auto-followup .followup-sequence-table td[colspan]{
    display:table-cell!important;
    text-align:center!important;
  }
}

/* ========================================================================
   V77 — AUTO FOLLOW-UP "HOW IT WORKS" READABILITY + ALIGNMENT
   Clean, premium alignment across desktop, tablet, and small screens.
   ======================================================================== */
.page-auto-followup .followup-help-panel{
  padding:24px !important;
  border:1px solid #dbe7e2 !important;
  border-radius:18px !important;
  
  box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
  display:grid !important;
  
}
.page-auto-followup .followup-help-panel h2{
  margin:0 !important;
  
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
.page-auto-followup .followup-help-panel ol{
  margin:0 !important;
  padding-left:22px !important;
  
  font-size:13px !important;
  line-height:1.75 !important;
}
.page-auto-followup .followup-help-panel li{
  padding-left:4px !important;
}
.page-auto-followup .followup-help-panel li + li{
  margin-top:4px !important;
}
.page-auto-followup .followup-help-panel li::marker{
  
  font-weight:800 !important;
}
.page-auto-followup .followup-help-panel strong{
  color:#143047 !important;
}
.page-auto-followup .followup-help-panel .notice{
  margin-top:0 !important;
  padding:16px 18px !important;
  border:1px solid #d9e5df !important;
  border-radius:14px !important;
  
  display:grid !important;
  grid-template-columns:minmax(120px,max-content) 1fr !important;
  column-gap:18px !important;
  row-gap:8px !important;
  align-items:start !important;
}
.page-auto-followup .followup-help-panel .notice > strong{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  line-height:1.2 !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:#173046 !important;
}
.page-auto-followup .followup-help-panel .notice > strong i,
.page-auto-followup .followup-help-panel .notice > strong svg{
  color:#129a60 !important;
  font-size:16px !important;
  flex:0 0 auto !important;
}
.page-auto-followup .followup-help-panel .notice > p{
  margin:0 !important;
  color:#617184 !important;
  font-size:12.5px !important;
  line-height:1.62 !important;
}

@media (max-width: 980px){
  .page-auto-followup .followup-help-panel{
    padding:20px !important;
    
  }
  .page-auto-followup .followup-help-panel h2{
    font-size:16px !important;
  }
  .page-auto-followup .followup-help-panel ol{
    font-size:12.5px !important;
    line-height:1.68 !important;
  }
  .page-auto-followup .followup-help-panel .notice{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:15px 16px !important;
  }
  .page-auto-followup .followup-help-panel .notice > strong{
    font-size:13.5px !important;
  }
  .page-auto-followup .followup-help-panel .notice > p{
    font-size:12px !important;
  }
}

@media (max-width: 480px){
  .page-auto-followup .followup-help-panel{
    
    border-radius:16px !important;
    
  }
  .page-auto-followup .followup-help-panel h2{
    font-size:15px !important;
  }
  .page-auto-followup .followup-help-panel ol{
    padding-left:18px !important;
    font-size:12px !important;
    line-height:1.65 !important;
  }
  .page-auto-followup .followup-help-panel li + li{
    margin-top:3px !important;
  }
  .page-auto-followup .followup-help-panel .notice{
    padding:14px !important;
    border-radius:13px !important;
    gap:9px !important;
  }
  .page-auto-followup .followup-help-panel .notice > strong{
    font-size:13px !important;
    gap:8px !important;
  }
  .page-auto-followup .followup-help-panel .notice > strong i,
  .page-auto-followup .followup-help-panel .notice > strong svg{
    font-size:15px !important;
  }
  .page-auto-followup .followup-help-panel .notice > p{
    font-size:11.5px !important;
    line-height:1.58 !important;
  }
}

/* ========================================================================
   V79 — AUTO REPLY EXAMPLE CARD READABILITY
   Clean, consistent Example layout on desktop, tablet and phone.
   ======================================================================== */
.page-auto-reply .auto-reply-layout-grid > aside .auto-reply-example{
  margin-top:0 !important;
  padding:15px 16px !important;
  border:1px solid #dbe6e1 !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,#fbfdfc 0%,#f7faf8 100%) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
}
.page-auto-reply .auto-reply-layout-grid > aside .auto-reply-example-title{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  color:#173046 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.page-auto-reply .auto-reply-layout-grid > aside .auto-reply-example-title i,
.page-auto-reply .auto-reply-layout-grid > aside .auto-reply-example-title svg{
  flex:0 0 auto !important;
  color:#129a60 !important;
  font-size:16px !important;
}
.page-auto-reply .auto-reply-example-copy{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  border:1px solid #e3ebe7 !important;
  
  background:#fff !important;
}
.page-auto-reply .auto-reply-example-row{
  display:grid !important;

  min-width:0 !important;
  
}
.page-auto-reply .auto-reply-example-row + .auto-reply-example-row{
  border-top:1px solid #edf1ef !important;
}
.page-auto-reply .auto-reply-example-row > span{
  color:#6e7e75 !important;
  
  font-weight:700 !important;
  
}
.page-auto-reply .auto-reply-example-row > p{
  margin:0 !important;
  min-width:0 !important;
  color:#45594e !important;
  
  font-weight:500 !important;
  
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

@media (max-width:980px){
  .page-auto-reply .auto-reply-example-row{
    grid-template-columns:108px minmax(0,1fr) !important;
    gap:10px !important;
  }
}

@media (max-width:480px){
  .page-auto-reply .auto-reply-layout-grid > aside .auto-reply-example{
    padding:13px !important;
    gap:10px !important;
    border-radius:12px !important;
  }
  .page-auto-reply .auto-reply-example-title{
    font-size:12.5px !important;
  }
  .page-auto-reply .auto-reply-example-row{
    grid-template-columns:94px minmax(0,1fr) !important;
    gap:9px !important;
    padding:9px 10px !important;
  }
  .page-auto-reply .auto-reply-example-row > span{
    font-size:9.8px !important;
  }
  .page-auto-reply .auto-reply-example-row > p{
    font-size:11px !important;
  }
}

/* ========================================================================
   V80 — AUTO REPLY + FOLLOW-UP SIDEPANEL CLEAN ALIGNMENT
   Refines the Auto Reply status panel and the Follow-Up "How it works"
   help card so they read cleanly on desktop, tablet, and small screens.
   ======================================================================== */
.page-auto-reply .auto-reply-status-panel{
  
  display:grid !important;
  gap:18px !important;
  border:1px solid #dbe7e2 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fbfdfc 0%,#ffffff 100%) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
}
.page-auto-reply .auto-reply-status-head{
  
  grid-template-columns:54px minmax(0,1fr) !important;

}
.page-auto-reply .auto-reply-status-head .metric-icon{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
}
.page-auto-reply .auto-reply-status-head-copy{
  display:grid !important;
  gap:7px !important;
  
}
.page-auto-reply .auto-reply-status-head-copy > strong{
  margin:0 !important;
  color:#173046 !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.18 !important;
}
.page-auto-reply .auto-reply-status-badge{
  display:flex !important;
  align-items:center !important;
}
.page-auto-reply .auto-reply-status-copy{
  margin:0 !important;
  max-width:56ch !important;
  color:#627387 !important;
  font-size:12.75px !important;
  line-height:1.7 !important;
}
.page-auto-reply .auto-reply-example{
  margin-top:0 !important;
}
.page-auto-reply .auto-reply-example-title{
  white-space:normal !important;
}
.page-auto-reply .auto-reply-example-copy{
  border-radius:12px !important;
}
.page-auto-reply .auto-reply-example-row{
  grid-template-columns:132px minmax(0,1fr) !important;
  gap:14px !important;
  padding:12px 14px !important;
}
.page-auto-reply .auto-reply-example-row > span{
  font-size:11px !important;
  line-height:1.35 !important;
}
.page-auto-reply .auto-reply-example-row > p{
  font-size:12px !important;
  line-height:1.55 !important;
}

.page-auto-followup .followup-help-panel{
  gap:20px !important;
}
.page-auto-followup .followup-help-panel ol{
  display:grid !important;
  gap:6px !important;
}
.page-auto-followup .followup-help-note{
  margin-top:0 !important;
  padding:16px 18px !important;
  display:grid !important;
  gap:10px !important;
  border:1px solid #d9e5df !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#f9fcfb 0%,#f5faf7 100%) !important;
}
.page-auto-followup .followup-help-note .followup-help-note-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}
.page-auto-followup .followup-help-note .followup-help-note-head i,
.page-auto-followup .followup-help-note .followup-help-note-head svg{
  color:#129a60 !important;
  font-size:16px !important;
  flex:0 0 auto !important;
}
.page-auto-followup .followup-help-note .followup-help-note-head strong{
  margin:0 !important;
  color:#173046 !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}
.page-auto-followup .followup-help-note > p{
  margin:0 !important;
  color:#617184 !important;
  font-size:12.5px !important;
  line-height:1.62 !important;
}

@media (max-width: 980px){
  .page-auto-reply .auto-reply-status-panel{
    padding:20px !important;
    gap:16px !important;
  }
  .page-auto-reply .auto-reply-status-head{
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:12px !important;
  }
  .page-auto-reply .auto-reply-status-head .metric-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }
  .page-auto-reply .auto-reply-status-head-copy > strong{
    font-size:16px !important;
  }
  .page-auto-reply .auto-reply-status-copy{
    font-size:12.25px !important;
    line-height:1.66 !important;
    max-width:none !important;
  }
  .page-auto-reply .auto-reply-example-row{
    grid-template-columns:114px minmax(0,1fr) !important;
    gap:12px !important;
  }
  .page-auto-followup .followup-help-panel{
    gap:16px !important;
  }
  .page-auto-followup .followup-help-note{
    padding:15px 16px !important;
  }
  .page-auto-followup .followup-help-note .followup-help-note-head strong{
    font-size:13.5px !important;
  }
  .page-auto-followup .followup-help-note > p{
    font-size:12px !important;
  }
}

@media (max-width: 480px){
  .page-auto-reply .auto-reply-status-panel{
    padding:16px !important;
    gap:14px !important;
    border-radius:16px !important;
  }
  .page-auto-reply .auto-reply-status-head{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:11px !important;
  }
  .page-auto-reply .auto-reply-status-head .metric-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  .page-auto-reply .auto-reply-status-head-copy > strong{
    font-size:15px !important;
  }
  .page-auto-reply .auto-reply-status-copy{
    font-size:11.75px !important;
    line-height:1.6 !important;
  }
  .page-auto-reply .auto-reply-example{
    padding:13px !important;
    gap:10px !important;
    border-radius:12px !important;
  }
  .page-auto-reply .auto-reply-example-title{
    font-size:12.5px !important;
    gap:8px !important;
  }
  .page-auto-reply .auto-reply-example-row{
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:10px 11px !important;
  }
  .page-auto-reply .auto-reply-example-row > span{
    font-size:9.8px !important;
  }
  .page-auto-reply .auto-reply-example-row > p{
    font-size:11px !important;
  }

  .page-auto-followup .followup-help-panel{
    padding:16px !important;
    gap:14px !important;
  }
  .page-auto-followup .followup-help-panel ol{
    gap:5px !important;
  }
  .page-auto-followup .followup-help-note{
    padding:14px !important;
    border-radius:13px !important;
    gap:9px !important;
  }
  .page-auto-followup .followup-help-note .followup-help-note-head strong{
    font-size:13px !important;
  }
  .page-auto-followup .followup-help-note > p{
    font-size:11.5px !important;
    line-height:1.58 !important;
  }
}

/* ========================================================================
   V81 — SMALL-PHONE HEADER-TO-PAGE GAP
   Adds a little breathing room below the floating mobile header so page
   titles do not sit too close to it. Inbox is excluded because its phone
   layout uses a dedicated full-height chat structure.
   ======================================================================== */
@media (max-width:480px){
  .page-content:not(.page-inbox){
    padding-top:18px !important;
  }
}

/* ========================================================================
   V83 — CUSTOMER-INITIATED SERVICE STATUS
   This is an automatic Inbox-only status derived from inbound message history.
   It is intentionally separate from the existing marketing opt-in flag.
   ======================================================================== */
.page-inbox .customer-details [data-customer-initiated]{
  color:#0b8f54 !important;
}
.page-inbox .customer-optin-actions > small{
  display:block !important;
  margin-top:3px !important;
  
}

/* ========================================================================
   V84 — SCHEDULED FOLLOW-UP SEARCH
   Phone/name search integrated into the live Scheduled Follow-Ups table.
   ======================================================================== */
.page-auto-followup .followup-scheduled-head{
  align-items:center!important;
  gap:16px!important;
}

.page-auto-followup .followup-search{

  font-weight:500!important;
}
.page-auto-followup .followup-search>i,
.page-auto-followup .followup-search>svg{
  position:absolute!important;
  left:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  color:#839188!important;
  font-size:12px!important;
  pointer-events:none!important;
}

.page-auto-followup .followup-search input:focus{
  border-color:#71c89d!important;
  
}
.page-auto-followup .followup-search input::-webkit-search-cancel-button{
  display:none!important;
}
.page-auto-followup .followup-search-clear{
  
  right:7px!important;
  top:50%!important;
  
  z-index:3!important;

  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  display:grid!important;
  place-items:center!important;
  background:#f1f5f3!important;
  color:#6f7e76!important;
  cursor:pointer!important;
}
.page-auto-followup .followup-search-clear[hidden]{display:none!important;}
.page-auto-followup .followup-search-clear i,
.page-auto-followup .followup-search-clear svg{font-size:10px!important;}
.page-auto-followup .followup-search-empty{
  margin:12px 14px 0!important;
  padding:13px 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  border:1px solid #e2e9e5!important;
  border-radius:10px!important;
  background:#f8faf9!important;
  color:#6c7c73!important;
  font-size:11.5px!important;
  line-height:1.45!important;
}
.page-auto-followup .followup-search-empty[hidden]{display:none!important;}
.page-auto-followup .followup-search-empty i,
.page-auto-followup .followup-search-empty svg{color:#169b61!important;font-size:12px!important;flex:0 0 auto!important;}

@media(max-width:900px){
  .page-auto-followup .followup-scheduled-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:11px!important;
  }
  
}
@media(max-width:480px){
  .page-auto-followup .followup-scheduled-head{
    gap:10px!important;
  }
  
  .page-auto-followup .followup-search input{
    height:36px!important;
    min-height:36px!important;
     /* avoid iOS input zoom */
  }
  .page-auto-followup .followup-search-empty{
    margin:9px 10px 0!important;
    padding:11px 12px!important;
    font-size:10.8px!important;
  }
}

/* ========================================================================
   V85 — FOLLOW-UP SEARCH ICON HARD ALIGNMENT FIX
   Removes native search-field decorations on small screens/browsers and keeps
   a single clean custom search icon perfectly aligned.
   ======================================================================== */
.page-auto-followup .followup-search input{

  background-image:none!important;
}
.page-auto-followup .followup-search input::-webkit-search-decoration,
.page-auto-followup .followup-search input::-webkit-search-results-button,
.page-auto-followup .followup-search input::-webkit-search-results-decoration,
.page-auto-followup .followup-search input::-ms-clear,
.page-auto-followup .followup-search input::-ms-reveal{
  display:none!important;
  appearance:none!important;
}
.page-auto-followup .followup-search > i,
.page-auto-followup .followup-search > svg{
  left:14px!important;
}
.page-auto-followup .followup-search input{
  padding-left:36px!important;
}
@media (max-width:480px){
  .page-auto-followup .followup-search > i,
  .page-auto-followup .followup-search > svg{
    left:13px!important;
    
  }
  .page-auto-followup .followup-search input{
    padding-left:35px!important;
  }
}

/* ========================================================================
   V86 — FOLLOW-UP SEARCH STRUCTURAL ALIGNMENT FIX
   Uses the same robust structure as the polished campaign search: the label
   owns the border and layout, while the icon/input/clear control are normal
   flex children. This prevents icon/text overlap on desktop and mobile.
   ======================================================================== */
.page-auto-followup .followup-search{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:min(310px,32vw)!important;
  
  height:38px!important;
  padding:0 9px 0 12px!important;
  border:1px solid #d9e3de!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(15,23,42,.02)!important;
  color:#75837c!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.page-auto-followup .followup-search:focus-within{
  border-color:#71c89d!important;
  box-shadow:0 0 0 3px rgba(26,171,99,.10)!important;
}
.page-auto-followup .followup-search > i,
.page-auto-followup .followup-search > svg{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:14px!important;
  min-width:14px!important;
  text-align:center!important;
  color:#839188!important;
  font-size:12px!important;
  line-height:1!important;
  pointer-events:none!important;
}
.page-auto-followup .followup-search input{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#26364a!important;
  font-size:12px!important;
  line-height:normal!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.page-auto-followup .followup-search input:focus{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.page-auto-followup .followup-search input::placeholder{
  color:#9aa7a1!important;
  opacity:1!important;
}
.page-auto-followup .followup-search-clear{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 27px!important;
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  margin-left:auto!important;
}
@media(max-width:900px){
  .page-auto-followup .followup-search{
    width:100%!important;
    min-width:0!important;
    max-width:420px!important;
  }
}
@media(max-width:480px){
  .page-auto-followup .followup-search{
    width:100%!important;
    max-width:none!important;
    height:36px!important;
    padding-left:11px!important;
    gap:8px!important;
  }
  .page-auto-followup .followup-search input{
    font-size:16px!important;
  }
  .page-auto-followup .followup-search > i,
  .page-auto-followup .followup-search > svg{
    font-size:11px!important;
  }
}

/* ========================================================================
   V87 — STABLE IMAGE ATTACHMENT CARDS
   Images render as fixed-height attachment rows instead of inline previews so
   image decoding/loading cannot resize a chat bubble and move the scroll.
   ======================================================================== */
.page-inbox .message-attachment-image{
  width:100%!important;
  min-height:54px!important;
  height:54px!important;
  margin-bottom:7px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  border-radius:10px!important;
  overflow:hidden!important;
}
.page-inbox .message-attachment-image > i,
.page-inbox .message-attachment-image > svg{
  width:22px!important;
  min-width:22px!important;
  flex:0 0 22px!important;
  font-size:20px!important;
  text-align:center!important;
}
.page-inbox .message-attachment-image > span{
  min-width:0!important;
  font-size:11px!important;
  font-weight:500!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:480px){
  .page-inbox .message-attachment-image{
    min-height:52px!important;
    height:52px!important;
    padding:0 12px!important;
  }
}

/* ========================================================================
   V90 — DESKTOP INBOX HEADER WIDTH FIX
   Prevents the contact identity block from colliding with the agent/status
   controls on narrower desktop widths. Keeps one-row desktop layout, gives the
   controls fixed comfortable widths, and ellipsizes long names/numbers.
   ======================================================================== */
@media (min-width: 1024px){
  .inbox-layout .chat-header,
  .page-inbox .chat-header{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    min-width:0 !important;
    height:72px !important;
    min-height:72px !important;
    padding:10px 14px !important;
    flex-wrap:nowrap !important;
  }
  .inbox-layout .chat-person,
  .page-inbox .chat-person{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .inbox-layout .chat-person-copy,
  .page-inbox .chat-person-copy{
    min-width:0 !important;
    overflow:hidden !important;
    display:grid !important;
    gap:2px !important;
  }
  .inbox-layout .chat-name-line,
  .page-inbox .chat-name-line{
    min-width:0 !important;
  }
  .inbox-layout .chat-person-copy strong,
  .page-inbox .chat-person-copy strong,
  .inbox-layout .chat-person-copy small,
  .page-inbox .chat-person-copy small{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .inbox-layout .chat-person-copy strong,
  .page-inbox .chat-person-copy strong{
    font-size:17px !important;
    line-height:1.15 !important;
  }
  .inbox-layout .chat-person-copy small,
  .page-inbox .chat-person-copy small{
    font-size:11px !important;
    line-height:1.2 !important;
  }
  .inbox-layout .chat-actions,
  .page-inbox .chat-actions,
  .inbox-layout .chat-actions.has-agent-select,
  .page-inbox .chat-actions.has-agent-select,
  .inbox-layout .chat-actions.agent-view,
  .page-inbox .chat-actions.agent-view{
    flex:0 0 auto !important;
    margin-left:0 !important;
    width:auto !important;
    max-width:none !important;
    display:grid !important;
    align-items:center !important;
    gap:10px !important;
  }
  .inbox-layout .chat-actions.has-agent-select,
  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns: minmax(150px, 170px) minmax(130px, 150px) 44px !important;
  }
  .inbox-layout .chat-actions.agent-view,
  .page-inbox .chat-actions.agent-view{
    grid-template-columns: minmax(130px, 150px) 44px !important;
  }
  .inbox-layout .chat-actions select,
  .page-inbox .chat-actions select{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
  }
  .inbox-layout .chat-more,
  .page-inbox .chat-more,
  .inbox-layout .chat-more-toggle,
  .page-inbox .chat-more-toggle{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1210px){
  .inbox-layout .chat-header,
  .page-inbox .chat-header{
    gap:12px !important;
    padding:9px 12px !important;
  }
  .inbox-layout .chat-actions.has-agent-select,
  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns: minmax(138px, 156px) minmax(120px, 136px) 42px !important;
    gap:8px !important;
  }
  .inbox-layout .chat-actions.agent-view,
  .page-inbox .chat-actions.agent-view{
    grid-template-columns: minmax(120px, 136px) 42px !important;
    gap:8px !important;
  }
  .inbox-layout .chat-actions select,
  .page-inbox .chat-actions select{
    height:42px !important;
    min-height:42px !important;
  }
  .inbox-layout .chat-more,
  .page-inbox .chat-more,
  .inbox-layout .chat-more-toggle,
  .page-inbox .chat-more-toggle{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
  }
}

/* ========================================================================
   V91 — DESKTOP INBOX CUSTOMER IDENTITY PRIORITY
   Keep the customer's full name and phone visible. On narrower desktop
   widths, compact the action controls instead of truncating identity text.
   ======================================================================== */
@media (min-width:1024px){
  .inbox-layout .chat-person,
  .page-inbox .chat-person{
    flex:1 1 260px !important;
    min-width:210px !important;
    overflow:visible !important;
  }
  .inbox-layout .chat-person-copy,
  .page-inbox .chat-person-copy{
    overflow:visible !important;
    min-width:0 !important;
  }
  .inbox-layout .chat-person-copy strong,
  .page-inbox .chat-person-copy strong{
    max-width:none !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
  }
  .inbox-layout .chat-person-copy small,
  .page-inbox .chat-person-copy small{
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

@media (min-width:1024px) and (max-width:1210px){
  .inbox-layout .chat-person,
  .page-inbox .chat-person{
    min-width:205px !important;
    flex-basis:225px !important;
  }
  .inbox-layout .chat-person-copy strong,
  .page-inbox .chat-person-copy strong{
    font-size:15px !important;
    line-height:1.15 !important;
  }
  .inbox-layout .chat-person-copy small,
  .page-inbox .chat-person-copy small{
    font-size:10.5px !important;
  }
  .inbox-layout .chat-actions.has-agent-select,
  .page-inbox .chat-actions.has-agent-select{
    grid-template-columns:128px 116px 40px !important;
    gap:7px !important;
  }
  .inbox-layout .chat-actions.agent-view,
  .page-inbox .chat-actions.agent-view{
    grid-template-columns:116px 40px !important;
    gap:7px !important;
  }
  .inbox-layout .chat-actions select,
  .page-inbox .chat-actions select{
    padding-left:10px !important;
    padding-right:28px !important;
    font-size:12px !important;
    height:40px !important;
    min-height:40px !important;
  }
  .inbox-layout .chat-more,
  .page-inbox .chat-more,
  .inbox-layout .chat-more-toggle,
  .page-inbox .chat-more-toggle{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
  }
}

/* USER-REFERENCE PC NAVIGATION COPIED FROM _public_html_23_pc_nav_and_send_flicker_fixed */
/* ========================================================================
   V74 — DESKTOP NAVIGATION STABILITY
   One final authoritative PC layout. Earlier V29–V43 experiments contain
   competing height-specific sidebar rules; this block neutralizes those on
   desktop only so the navigation cannot overlap, clip or jump between PCs.
   Mobile/tablet drawer rules are intentionally untouched.
   ======================================================================== */
@media (min-width:1101px){
  .sidebar{
    position:fixed!important;
    
    right:auto!important;

    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;

  }
  .sidebar-brand-row{
    flex:0 0 68px!important;
    min-height:68px!important;
    height:68px!important;
    padding:9px 14px 7px!important;
    display:flex!important;
    align-items:center!important;
  }
  .sidebar .brand{
    min-height:0!important;
    height:auto!important;
    padding:5px 8px!important;
  }
  .sidebar .brand-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    flex:0 0 36px!important;
    font-size:20px!important;
  }
  .sidebar .brand-copy strong{font-size:14px!important;line-height:1.08!important;}
  .sidebar .brand-copy small{font-size:9px!important;line-height:1.08!important;}

  .sidebar .side-nav{

    height:auto!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;

  }
  
  .sidebar .nav-section-label{
    flex:0 0 auto!important;
    display:block!important;
    
    margin:0!important;

  }
  .sidebar .side-nav a{

    transform:none!important;
  }
  .sidebar .side-nav a:hover{transform:none!important;}
  .sidebar .nav-icon{

    flex:0 0 25px!important;
    
  }
  .sidebar .nav-label{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .sidebar .nav-unread-badge{
    flex:0 0 auto!important;
    min-width:19px!important;
    height:19px!important;
    padding:0 5px!important;
    font-size:8px!important;
  }

}

/* Desktop navigation keeps one consistent size across PC viewport heights.
   Short screens use the side-nav scrollbar instead of shrinking the menu. */

/* ========================================================================
   DESKTOP SIDEBAR — RESTORE THE SMALL NAVIGATION SCROLLBAR
   Visual-only. Keeps the copied PC navigation dimensions and behavior intact;
   only makes the existing side-nav overflow indicator visible on desktop.
   ======================================================================== */
@media (min-width:1101px){

}

/* FINAL CUSTOMER LIST VIEWPORT SAFETY — keep the full list pane usable while JS preserves scrollTop. */
.page-inbox .conversation-list{min-height:0!important;overflow:hidden!important;}
.page-inbox .conversation-scroll{flex:1 1 auto!important;min-height:0!important;width:100%!important;overflow-y:auto!important;overflow-x:hidden!important;overflow-anchor:none!important;}

/* Inbox customer total counter */
.conversation-list-count{margin-top:7px;padding:0 2px;font-size:11px;font-weight:650;line-height:1.25;text-align:right;white-space:nowrap;}
@media(max-width:650px){.conversation-list-count{margin-top:6px;font-size:10.5px;}}

/* Inbox unread-only conversation filter */
.page-inbox .conversation-filter-meta{margin-top:8px;}
.page-inbox .conversation-unread-filter{white-space:nowrap;}

.page-inbox .conversation-unread-filter.active,.page-inbox .conversation-unread-filter[aria-pressed="true"]{background:#e6f7ee;border-color:#95d4b3;color:#087a45;box-shadow:inset 0 0 0 1px rgba(23,184,102,.05);}
.page-inbox .conversation-unread-filter i{font-size:10px;}
.page-inbox .conversation-filter-meta .conversation-list-count{margin-top:0!important;}
@media(max-width:650px){.page-inbox .conversation-filter-meta{margin-top:6px;}.page-inbox .conversation-unread-filter{height:28px;padding:0 9px;font-size:10px;}.page-inbox .conversation-filter-meta .conversation-list-count{font-size:10px;}}

/* ========================================================================
   V80 — PREMIUM UNIFIED UI SYSTEM
   Presentation-only final layer. No application logic or interaction rules.
   Goals: consistent alignment, typography, spacing, colors and responsive UI.
   ======================================================================== */
:root{
  --green:#1d8c68;
  --green-dark:#12634a;
  --navy:#0b1d18;
  --navy-2:#123026;
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#182033;
  --muted:#6f7a90;
  --line:#e4e8f0;
  --danger:#dc4150;
  --orange:#ef8e36;
  --premium-primary:#1d8c68;
  --premium-primary-strong:#12634a;
  --premium-primary-soft:#eaf6f1;
  --premium-cyan:#0ea5b7;
  --premium-cyan-soft:#eaf9fb;

  --premium-warning:#c77a19;
  --premium-warning-soft:#fff6e7;
  --premium-danger:#d54250;
  --premium-danger-soft:#fff0f2;
  --premium-ink:#182033;
  --premium-ink-2:#344057;
  --premium-muted:#748096;
  --premium-muted-2:#95a0b2;
  --premium-surface:#ffffff;
  --premium-surface-2:#f8f9fc;
  --premium-surface-3:#f2f4f8;
  --premium-border:#e2e7ef;
  --premium-border-strong:#d3dae5;
  --premium-sidebar:#0a1814;
  --premium-sidebar-2:#102820;
  --premium-radius-xs:8px;
  --premium-radius-sm:10px;
  --premium-radius:14px;
  --premium-radius-lg:18px;
  --premium-radius-xl:24px;
  --premium-shadow-xs:0 1px 2px rgba(18,27,45,.035);
  --premium-shadow-sm:0 5px 16px rgba(21,31,50,.055);
  --premium-shadow:0 12px 32px rgba(21,31,50,.075);
  --premium-shadow-lg:0 24px 70px rgba(15,23,42,.14);
  --shadow:var(--premium-shadow);
  font-family:"Manrope","Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
}

html{background:var(--premium-surface-2)!important;color-scheme:light;}
body{
  background:
    radial-gradient(circle at 100% 0,rgba(29,140,104,.045),transparent 28rem),
    var(--premium-surface-2)!important;
  color:var(--premium-ink)!important;
  font-family:"Manrope","Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;
  font-size:13px!important;
  line-height:1.5!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,select,textarea{font-family:"Manrope","Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;}
::selection{background:rgba(29,140,104,.18);color:#0d2a20;}

/* ---------- App chrome ---------- */
.sidebar{
  background:
    radial-gradient(circle at 18% 0,rgba(39,157,119,.15),transparent 14rem),
    linear-gradient(180deg,var(--premium-sidebar-2) 0%,var(--premium-sidebar) 68%,#08130f 100%)!important;
  border:1px solid rgba(255,255,255,.065)!important;
  box-shadow:0 18px 48px rgba(15,23,42,.16)!important;
  color:#dfe5ef!important;
}
.sidebar-brand-row{border-bottom:1px solid rgba(255,255,255,.06)!important;}
.sidebar .brand{color:#f8faff!important;}
.sidebar .brand-icon{
  background:linear-gradient(145deg,#31b88b,#167658)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(18,99,74,.32)!important;
}
.sidebar .brand-copy strong{color:#f7f9ff!important;font-weight:800!important;letter-spacing:-.02em!important;}
.sidebar .brand-copy small{color:#909cb0!important;font-weight:650!important;letter-spacing:.035em!important;}
.sidebar .nav-section-label{color:#738096!important;font-weight:800!important;letter-spacing:.13em!important;}
.sidebar .side-nav a{
  color:#b9c3d2!important;
  border:1px solid transparent!important;
  font-weight:650!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.sidebar .side-nav a:hover{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.055)!important;
  color:#f4f7fb!important;
}
.sidebar .side-nav a.active{
  background:linear-gradient(90deg,rgba(43,177,135,.19),rgba(43,177,135,.09))!important;
  border-color:rgba(83,199,160,.18)!important;
  color:#ffffff!important;
  box-shadow:inset 3px 0 0 #3ac89a!important;
}
.sidebar .nav-icon{
  background:rgba(255,255,255,.05)!important;
  color:#9ca9bc!important;
  border:1px solid rgba(255,255,255,.035)!important;
}
.sidebar .side-nav a.active .nav-icon{
  background:rgba(43,177,135,.18)!important;
  border-color:rgba(83,199,160,.17)!important;
  color:#a8dec9!important;
}
.nav-unread-badge{
  background:#f05465!important;
  color:#fff!important;
  border:2px solid var(--premium-sidebar-2)!important;
  box-shadow:0 2px 8px rgba(240,84,101,.28)!important;
}
.sidebar-user{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:12px!important;
}
.sidebar-user strong{color:#eef2f8!important;}.sidebar-user small{color:#8795aa!important;}
.sidebar .avatar{background:linear-gradient(145deg,#eaf6f1,#d5ebe2)!important;color:#187658!important;border:1px solid rgba(83,199,160,.20)!important;}
.online-dot{background:#35c892!important;box-shadow:0 0 0 3px rgba(53,200,146,.12)!important;}
.sidebar-developer{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:12px!important;
}
.sidebar-developer .developer-icon{background:rgba(43,177,135,.13)!important;color:#a8dec9!important;}
.sidebar-developer .developer-label{color:#748398!important;}.sidebar-developer .developer-value,.sidebar-developer .developer-phone{color:#d5dde9!important;}
.sidebar .side-nav{scrollbar-color:rgba(137,145,173,.52) transparent!important;}
.sidebar .side-nav::-webkit-scrollbar-thumb{background:rgba(137,145,173,.48)!important;}

.main-area{background:transparent!important;}
.topbar{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(221,226,236,.88)!important;
  box-shadow:0 7px 24px rgba(25,35,55,.055)!important;
  backdrop-filter:blur(14px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(150%)!important;
}
.topbar-left,.topbar-actions{align-items:center!important;}
.business-context-pill{
  background:#f6f7fb!important;
  border:1px solid var(--premium-border)!important;
  color:#4c5870!important;
  border-radius:999px!important;
  font-weight:700!important;
}
.business-context-pill i{color:var(--premium-primary)!important;}
.connection-pill{
  min-height:34px!important;
  border-radius:999px!important;
  border:1px solid var(--premium-border)!important;
  font-weight:750!important;
  letter-spacing:.005em!important;
}

.connection-pill.warn{background:var(--premium-warning-soft)!important;border-color:#f2dfbd!important;color:#9e681f!important;}
.connection-pill .connection-dot{box-shadow:0 0 0 3px currentColor!important;opacity:.84!important;}
.account-profile{
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:var(--premium-ink)!important;
}
.account-profile:hover,.account-profile[aria-expanded="true"]{background:#f6f7fb!important;border-color:var(--premium-border)!important;}
.top-account-copy strong{font-weight:750!important;color:#273047!important;}.top-account-copy small{color:#8b96a8!important;}
.topbar .avatar{background:#eaf6f1!important;color:#187658!important;border:1px solid #d3e8df!important;}
.account-menu-dropdown{
  border:1px solid var(--premium-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 18px 45px rgba(15,23,42,.14)!important;
}
.account-menu-item:hover{background:#f6f7fb!important;}.account-menu-item.logout{color:#c33a48!important;}
.mobile-header-mark{background:#eaf6f1!important;color:#1a7f5f!important;border:1px solid #d7ebe3!important;}
.mobile-header-copy strong{color:#222b40!important;}.mobile-header-copy small{color:#8c96a7!important;}
.sidebar-overlay{background:rgba(10,16,28,.48)!important;backdrop-filter:blur(2px)!important;}

/* ---------- Page rhythm / type ---------- */
.page-content{color:var(--premium-ink)!important;}
.page-heading,.campaign-heading,.api-rd-page-heading{margin-bottom:20px!important;}
.page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{
  margin:0!important;
  color:#172036!important;
  font-size:25px!important;
  line-height:1.14!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
.page-heading p,.campaign-heading p,.api-rd-page-heading p{
  margin:5px 0 0!important;
  max-width:850px!important;
  color:var(--premium-muted)!important;
  font-size:12.2px!important;
  line-height:1.55!important;
}

.muted,.help{color:var(--premium-muted)!important;}
.help{font-size:11px!important;line-height:1.55!important;}

/* ---------- Shared controls ---------- */
.btn{
  min-height:38px!important;
  padding:8px 13px!important;
  gap:7px!important;
  border:1px solid var(--premium-border-strong)!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#fff 0%,#fafbfc 100%)!important;
  color:#344057!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  font-weight:750!important;
  box-shadow:0 1px 2px rgba(18,27,45,.025)!important;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
.btn:hover{
  border-color:#bdc6d5!important;
  background:#fff!important;
  color:#202a40!important;
  box-shadow:0 7px 17px rgba(20,31,50,.075)!important;
  transform:translateY(-1px)!important;
}
.btn:active{transform:translateY(0)!important;box-shadow:0 2px 6px rgba(20,31,50,.055)!important;}
.btn.primary{
  border-color:#176e53!important;
  background:linear-gradient(180deg,#2aa97f 0%,#1b805f 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(18,99,74,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.btn.primary:hover{border-color:#464acb!important;background:linear-gradient(180deg,#249a74,#176e53)!important;color:#fff!important;box-shadow:0 9px 22px rgba(18,99,74,.26)!important;}
.btn.danger,.btn.danger-outline{
  background:#fff6f7!important;
  color:#bc3341!important;
  border-color:#f0c4c9!important;
  box-shadow:none!important;
}
.btn.danger:hover,.btn.danger-outline:hover{background:#ffedef!important;border-color:#e9aeb6!important;color:#a82f3c!important;}
.btn.small{min-height:31px!important;padding:6px 9px!important;border-radius:8px!important;font-size:10px!important;}
.icon-button{
  border:1px solid transparent!important;
  border-radius:9px!important;
  color:#68758a!important;
}
.icon-button:hover{background:#f1f3f8!important;border-color:#e4e8ef!important;color:#333e54!important;}
.icon-button.danger{color:#c43a48!important;}.icon-button.danger:hover{background:#fff0f2!important;border-color:#f5d4d7!important;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(29,140,104,.16)!important;outline-offset:2px!important;}

input,select,textarea{
  min-height:40px!important;
  padding:9px 11px!important;
  border:1px solid var(--premium-border-strong)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#202a40!important;
  font-size:12px!important;
  line-height:1.45!important;
  box-shadow:inset 0 1px 2px rgba(20,31,50,.018)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease!important;
}
input::placeholder,textarea::placeholder{color:#9ba5b5!important;}
input:hover,select:hover,textarea:hover{border-color:#c4ccd9!important;}
input:focus,select:focus,textarea:focus{
  border-color:#7c80ef!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(29,140,104,.105)!important;
}
textarea{min-height:94px!important;}
label{gap:6px!important;color:#3b465c!important;font-size:11.5px!important;font-weight:720!important;}
.checkbox input,.checkbox-row input,input[type="checkbox"],input[type="radio"]{accent-color:var(--premium-primary)!important;}
.checkbox input,.checkbox-row input{min-height:0!important;}

/* ---------- Cards / panels ---------- */
.panel,.api-rd-card,.campaign-panel,.agent-card,.system-check-card{
  background:var(--premium-surface)!important;
  border:1px solid var(--premium-border)!important;
  border-radius:14px!important;
  box-shadow:var(--premium-shadow-xs)!important;
}
.panel-header,.api-rd-card-head{
  min-height:54px!important;
  padding:13px 16px!important;
  border-bottom:1px solid #e9edf3!important;
  background:linear-gradient(180deg,#fff,#fdfdfe)!important;
  border-radius:14px 14px 0 0!important;
}
.panel-header h2,.panel h2,.api-rd-card-title h2{
  color:#253047!important;
  font-size:13.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
}
.panel-header a{color:#1a7f5f!important;font-size:10.5px!important;font-weight:750!important;}
.panel-header a:hover{color:#4044c9!important;}
.form-panel{padding:18px!important;}
.form-grid{gap:13px!important;}.stack-form{gap:14px!important;}
.notice,.consent-box{
  border:1px solid #dfe5ee!important;
  border-radius:11px!important;
  background:#f8f9fc!important;
  color:#3c485f!important;
  box-shadow:none!important;
}
.notice i,.consent-box i{color:var(--premium-primary)!important;}
.notice strong,.consent-box strong{color:#263148!important;font-weight:800!important;}
.notice p,.consent-box p{color:#738096!important;font-size:10.8px!important;}
.alert{
  padding:10px 13px!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1.5!important;
  box-shadow:none!important;
}
.alert.success{background:var(--premium-success-soft)!important;border-color:#c9eadc!important;color:#117356!important;}
.alert.error{background:var(--premium-danger-soft)!important;border-color:#f1c9cf!important;color:#a82d3a!important;}
.alert.warning{background:var(--premium-warning-soft)!important;border-color:#f0d8b1!important;color:#96601d!important;}

/* ---------- Data tables ---------- */
.table-wrap,.campaign-table-wrap,.followup-table-wrap{scrollbar-color:#c9d0dc transparent!important;}
.table-wrap::-webkit-scrollbar,.campaign-table-wrap::-webkit-scrollbar,.followup-table-wrap::-webkit-scrollbar{height:7px!important;width:7px!important;}
.table-wrap::-webkit-scrollbar-thumb,.campaign-table-wrap::-webkit-scrollbar-thumb,.followup-table-wrap::-webkit-scrollbar-thumb{background:#cbd2de!important;border-radius:999px!important;}
table{color:#354056!important;}
th{
  height:42px!important;
  padding:10px 13px!important;
  background:#f8f9fc!important;
  color:#788397!important;
  border-bottom:1px solid #e6eaf1!important;
  font-size:9.2px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}
td{
  padding:11px 13px!important;
  border-bottom:1px solid #edf0f4!important;
  color:#475369!important;
  font-size:10.8px!important;
  line-height:1.45!important;
}
tbody tr{transition:background-color .13s ease!important;}
tbody tr:hover{background:#fafbfe!important;}
tbody tr:last-child td{border-bottom:0!important;}
td strong{color:#2d384e!important;font-weight:760!important;}td small{color:#8b96a8!important;font-size:9.4px!important;}
.empty,.empty-state{color:#8b95a6!important;}
.status{
  min-height:24px!important;
  padding:4px 8px!important;
  align-items:center!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:.005em!important;
  white-space:nowrap!important;
}
.status.approved,.status.completed,.status.delivered,.status.read,.status.success{background:var(--premium-success-soft)!important;border-color:#d3eee4!important;color:#117355!important;}
.status.queued,.status.processing,.status.pending,.status.sent{background:#edf4ff!important;border-color:#d8e5f9!important;color:#3f68a9!important;}
.status.failed,.status.rejected,.status.cancelled{background:var(--premium-danger-soft)!important;border-color:#f1d2d6!important;color:#b23644!important;}
.status.paused,.status.marketing{background:var(--premium-warning-soft)!important;border-color:#f0dfbe!important;color:#a06b23!important;}
.progress{height:6px!important;background:#edf0f5!important;border-radius:999px!important;}
.progress span{background:linear-gradient(90deg,#1d8c68,#43c69c)!important;border-radius:inherit!important;}

/* ---------- Dashboard ---------- */
.metric-grid{gap:12px!important;margin-bottom:16px!important;}
.metric-card{
  min-height:94px!important;
  padding:15px!important;
  align-items:center!important;
  gap:12px!important;
  background:linear-gradient(180deg,#fff 0%,#fdfdff 100%)!important;
  border-color:var(--premium-border)!important;
  border-radius:14px!important;
  box-shadow:var(--premium-shadow-xs)!important;
}
.metric-card:hover{border-color:#d7dcee!important;box-shadow:var(--premium-shadow-sm)!important;}
.metric-icon,.campaign-stat-icon,.api-rd-stat-icon,.system-check-icon{
  background:#eaf6f1!important;
  color:#1a7f5f!important;
  border:1px solid #d8ece4!important;
  box-shadow:none!important;
}
.metric-icon.green,.metric-icon.purple{background:var(--premium-success-soft)!important;color:#158461!important;border-color:#d7eee5!important;}
.metric-icon.blue{background:#edf4ff!important;color:#4c72b4!important;border-color:#dce8fa!important;}
.metric-icon.violet{background:#eaf6f3!important;color:#377d72!important;border-color:#d3e9e2!important;}
.metric-icon.orange{background:var(--premium-warning-soft)!important;color:#b36c1f!important;border-color:#f3e0bc!important;}
.metric-icon.red{background:var(--premium-danger-soft)!important;color:#c4414e!important;border-color:#f4d7da!important;}
.metric-card small{color:#7f8a9d!important;font-size:9.5px!important;font-weight:700!important;}.metric-card strong{color:#212b41!important;font-size:20px!important;font-weight:800!important;letter-spacing:-.025em!important;}.metric-card span:last-child{font-size:9px!important;color:#929cad!important;}
.dashboard-grid{gap:14px!important;margin-bottom:14px!important;}.support-number{color:#166e53!important;font-size:46px!important;letter-spacing:-.04em!important;}.support-card>p{color:#7d889a!important;font-size:10.5px!important;}
.dashboard-status-cell{align-items:center!important;}

/* ---------- Businesses ---------- */
.page-businesses .table-panel{overflow:hidden!important;}
.page-businesses .business-table-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex-wrap:nowrap!important;}
.page-businesses .business-table-actions .btn{min-width:84px!important;}
.page-businesses .table-subtext{color:#8b95a7!important;font-size:9px!important;}

/* ---------- Contacts ---------- */
.page-contacts .two-column{gap:14px!important;}
.page-contacts .panel-header{align-items:center!important;}

.page-contacts .search-form input{height:38px!important;min-height:38px!important;}
.import-contacts-body{padding:17px!important;}
.import-or{color:#9aa4b4!important;}.import-or:before,.import-or:after{background:#e6eaf0!important;}
.import-columns-help{background:#f7f8fb!important;border-color:#e5e9ef!important;color:#69758a!important;border-radius:10px!important;}
.import-samples{gap:8px!important;}

/* ---------- Templates ---------- */
.template-empty-card{padding:34px 22px!important;text-align:center!important;}
.template-empty-icon{background:#eaf6f1!important;color:#1a7f5f!important;border:1px solid #d7ebe3!important;box-shadow:none!important;}
.template-empty-card h2{font-size:16px!important;}.template-empty-card p{color:#778398!important;font-size:11px!important;}
.template-simple-note{background:#f7f8fc!important;border-color:#e4e8f1!important;color:#67748a!important;}
.template-simple-note i{color:#1d8c68!important;}
.template-guide-number{background:#1d8c68!important;color:#fff!important;box-shadow:0 5px 12px rgba(29,140,104,.20)!important;}
.template-guide-step{border-color:#e7eaf1!important;background:#fafbfc!important;}
.template-help-warning{background:var(--premium-warning-soft)!important;border-color:#f2dfbd!important;color:#93611f!important;}

/* ---------- Campaigns ---------- */
.campaign-page{max-width:none!important;}
.campaign-stats{gap:11px!important;margin-bottom:14px!important;}
.campaign-stat{
  min-height:86px!important;
  padding:14px!important;
  border:1px solid var(--premium-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:var(--premium-shadow-xs)!important;
}
.campaign-stat-icon.is-blue{background:#edf4ff!important;color:#4a73b8!important;border-color:#dbe7f8!important;}.campaign-stat-icon.is-green{background:var(--premium-success-soft)!important;color:#168460!important;border-color:#d3ece3!important;}.campaign-stat-icon.is-red{background:var(--premium-danger-soft)!important;color:#c43e4c!important;border-color:#f2d3d6!important;}
.campaign-stat strong{color:#202a40!important;font-size:19px!important;font-weight:800!important;}.campaign-stat small{color:#8490a3!important;font-size:9px!important;font-weight:700!important;}
.campaign-toolbar{padding:13px 14px!important;border-bottom:1px solid #e8ebf1!important;background:#fff!important;align-items:center!important;}
.campaign-title-icon{background:#eaf6f1!important;color:#1a7f5f!important;border:1px solid #d8ece4!important;}
.campaign-toolbar-title h2{color:#273249!important;font-size:13.5px!important;}.campaign-toolbar-title p{color:#8893a5!important;font-size:9.5px!important;}
.campaign-search i{color:#98a2b2!important;}.campaign-search input{background:#f9fafc!important;}
.campaign-table-footer{border-top:1px solid #e8ebf1!important;background:#fafbfc!important;color:#808b9c!important;}
.campaign-notice{background:#f8f9fc!important;}
.row-actions{align-items:center!important;gap:6px!important;}
.campaign-empty-icon{background:#eaf6f1!important;color:#1a7f5f!important;}

/* Campaign builder */
.page-campaign-create .form-panel{max-width:1040px!important;margin:0 auto!important;}
.page-campaign-create .template-message-preview,.page-campaign-create .template-requirements,.page-campaign-create .template-field.variable-group{
  border:1px solid #e0e5ed!important;
  border-radius:11px!important;
  background:#f8f9fc!important;
}
.page-campaign-create .variable-group-head{align-items:center!important;}
.page-campaign-create .parameter-tip{color:#788397!important;background:#f4f6f9!important;border-color:#e4e8ef!important;}

/* ---------- Agents ---------- */
.page-agents .agent-list{gap:10px!important;}
.page-agents .agent-list .agent-card{
  border-color:var(--premium-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:var(--premium-shadow-xs)!important;
}
.page-agents .agent-list .agent-card:hover{border-color:#d7dcea!important;box-shadow:var(--premium-shadow-sm)!important;}
.page-agents .agent-identity{align-items:center!important;}.page-agents .agent-identity-copy h3{color:#263148!important;font-weight:800!important;}.page-agents .agent-subline{color:#818c9f!important;}
.page-agents .agent-metric{background:#f8f9fc!important;border-color:#e8ebf1!important;}.page-agents .agent-metric strong{color:#29354c!important;}.page-agents .agent-metric span{color:#8590a2!important;}
.page-agents .agent-account-note{color:#8792a3!important;border-color:#e6eaf0!important;background:#fafbfc!important;}

/* ---------- Auto Reply ---------- */
.settings-grid{gap:14px!important;}
.page-auto-reply .auto-reply-status-panel{padding:18px!important;}
.auto-reply-status-head{align-items:center!important;}.auto-reply-status-head-copy h2{color:#263148!important;}.auto-reply-status-copy{color:#778397!important;}
.auto-reply-example{background:#f8f9fc!important;border-color:#e3e7ee!important;}
.auto-reply-example-title{color:#5761d6!important;}.auto-reply-example-row span{color:#8b95a6!important;}.auto-reply-example-row p{background:#fff!important;border-color:#e3e7ef!important;color:#48546a!important;}

/* ---------- Auto Follow-Up ---------- */
.page-auto-followup .followup-layout-grid{gap:14px!important;}
.page-auto-followup .followup-create-panel,.page-auto-followup .followup-scheduled-panel,.page-auto-followup .followup-help-panel{border-color:var(--premium-border)!important;border-radius:14px!important;box-shadow:var(--premium-shadow-xs)!important;}
.page-auto-followup .followup-help-panel{background:#fff!important;}
.page-auto-followup .followup-help-panel h2{color:#263148!important;}.page-auto-followup .followup-help-panel ol{color:#748095!important;}.page-auto-followup .followup-help-panel li::marker{color:#1d8c68!important;}
.page-auto-followup .followup-help-panel .notice{background:#f8f9fc!important;border-color:#e2e6ed!important;}.page-auto-followup .followup-help-panel .notice>strong,.page-auto-followup .followup-help-panel .notice>strong i{color:#4f54d9!important;}
.followup-step-card{border-color:#e2e6ed!important;background:#fafbfc!important;border-radius:12px!important;box-shadow:none!important;}
.followup-step-head strong{color:#313c52!important;}.followup-search{background:#f9fafc!important;border-color:#e0e5ed!important;}.followup-search i{color:#909aac!important;}
.followup-search-clear{color:#7f899b!important;}.followup-search-clear:hover{background:#eef0f5!important;color:#3e495f!important;}

/* ---------- API Settings ---------- */
.page-settings .api-rd-layout{gap:14px!important;margin-bottom:14px!important;}
.page-settings .api-rd-card{overflow:hidden!important;}
.page-settings .api-rd-title-icon{background:#eaf6f1!important;color:#1a7f5f!important;border:1px solid #d8ece4!important;}
.page-settings .api-rd-eyebrow{color:#7a8498!important;font-weight:800!important;}.page-settings .api-rd-card-title p{color:#8994a5!important;}
.page-settings .api-rd-state{background:#f1f3f8!important;color:#657188!important;border:1px solid #e1e5ec!important;}

.page-settings .api-rd-form{gap:13px!important;}.page-settings .api-rd-label{color:#3e495e!important;font-weight:750!important;}.page-settings .api-rd-field small{color:#8b95a6!important;}
.page-settings .api-rd-note,.page-settings .api-rd-security,.page-settings .api-rd-platform-status{background:#f8f9fc!important;border-color:#e3e7ee!important;color:#657187!important;}
.page-settings .api-rd-note-icon{background:#eaf6f1!important;color:#1a7f5f!important;}
.page-settings .api-rd-overview-card{background:linear-gradient(180deg,#fff,#fdfdff)!important;}
.page-settings .api-rd-stat{background:#f8f9fc!important;border-color:#e5e9f0!important;border-radius:11px!important;}
.page-settings .api-rd-stat small{color:#8791a2!important;}.page-settings .api-rd-stat strong{color:#313c52!important;}
.page-settings .api-rd-stat-icon.blue{background:#edf4ff!important;color:#4b70ad!important;}.page-settings .api-rd-stat-icon.green{background:var(--premium-success-soft)!important;color:#177e5f!important;}.page-settings .api-rd-stat-icon.violet{background:#eaf6f3!important;color:#377d72!important;}
.page-settings .api-rd-quality-note{color:#7a8598!important;background:#f8f9fc!important;border-color:#e3e7ee!important;}.page-settings .api-rd-error{background:var(--premium-danger-soft)!important;border-color:#efcbd0!important;color:#a93340!important;}
.meta-status-badge{border-radius:999px!important;}

/* ---------- System ---------- */
.page-system .system-check-grid{gap:11px!important;}
.page-system .system-check-card{background:#fff!important;border-color:var(--premium-border)!important;align-items:center!important;}
.page-system .system-check-card.is-ok .system-check-icon{background:var(--premium-success-soft)!important;color:#168260!important;border-color:#d4ece3!important;}.page-system .system-check-card.is-warning .system-check-icon{background:var(--premium-warning-soft)!important;color:#a96a1f!important;border-color:#f0dfc0!important;}
.page-system .system-check-card strong{color:#2c374e!important;}.page-system .system-check-card small{color:#8691a3!important;}
.system-recovery-steps{border-color:#e4e8ef!important;background:#f8f9fc!important;color:#657187!important;}

/* ---------- Modals ---------- */
.modal{background:rgba(10,16,29,.52)!important;backdrop-filter:blur(3px)!important;}
.modal-card,.quick-reply-dialog{
  background:#fff!important;
  border:1px solid rgba(226,231,239,.96)!important;
  border-radius:16px!important;
  box-shadow:var(--premium-shadow-lg)!important;
}
.modal-head{border-bottom-color:#e8ebf1!important;}.modal-head h2{color:#253047!important;font-size:16px!important;font-weight:800!important;letter-spacing:-.02em!important;}
.modal-subtitle{color:#7b8699!important;}

/* ---------- Inbox visual system ---------- */
.page-inbox .inbox-heading{align-items:center!important;}
.live-inbox-pill{border:1px solid #d1ebdf!important;border-radius:999px!important;font-weight:750!important;}
.inbox-layout{
  border:1px solid #dfe4ec!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(20,30,49,.055)!important;
}
.conversation-list{border-right:1px solid #e6eaf0!important;background:#fbfcfe!important;}
.conversation-filter-bar{background:#fff!important;border-bottom:1px solid #e7ebf1!important;}
.conversation-search{margin:11px 11px 0!important;}.conversation-search input{background:#f7f8fb!important;border-color:#e1e5ec!important;}.conversation-search i,.conversation-search-icon{color:#96a0b0!important;}
.conversation-filter-meta{padding:0 11px 9px!important;}.conversation-unread-filter{background:#fff!important;border-color:#dde3eb!important;color:#68748a!important;}.conversation-unread-filter:hover{background:#f1f8f5!important;border-color:#c5e2d7!important;color:#176e53!important;}.conversation-unread-filter.active,.conversation-unread-filter[aria-pressed="true"]{background:#eaf6f1!important;border-color:#bde0d3!important;color:#176e53!important;}
.conversation-list-count{color:#8c96a7!important;}
.conversation-item{border-bottom:1px solid #edf0f4!important;background:transparent!important;}
.conversation-item:hover{background:#f5f6fb!important;}.conversation-item.active{background:linear-gradient(90deg,#eaf6f1,#f4faf7)!important;box-shadow:inset 3px 0 0 #2db187!important;}
.conversation-item .avatar{background:#eaf6f1!important;color:#1a7f5f!important;border:1px solid #d8ece4!important;}
.conversation-item strong{color:#29354a!important;}.conversation-item small,.conversation-item .conversation-preview{color:#8893a4!important;}.conversation-item.active strong{color:#155b45!important;}
.unread-badge{background:#1d8c68!important;color:#fff!important;box-shadow:0 2px 7px rgba(29,140,104,.20)!important;}
.chat-panel{background:#f7f8fb!important;}.chat-placeholder{color:#8a94a5!important;}.chat-placeholder i{color:#2db187!important;background:#eaf6f1!important;}
.chat-header{background:#fff!important;border-bottom:1px solid #e3e7ee!important;}.chat-person>.avatar{background:#eaf6f1!important;color:#1a7f5f!important;border-color:#d7ebe3!important;}.chat-person-copy strong{color:#273249!important;}.chat-person-copy small{color:#8490a2!important;}
.chat-name-line{align-items:center!important;}
.chat-actions select{background:#fafbfc!important;border-color:#dfe4eb!important;color:#4b566c!important;}
.chat-more-menu,.quick-reply-menu,.reply-attachment-menu{background:#fff!important;border:1px solid #dfe4ec!important;box-shadow:0 18px 45px rgba(15,23,42,.15)!important;}.chat-menu-delete{color:#b93643!important;}.chat-menu-delete:hover{background:#fff0f2!important;}
.service-window{background:#f4f6fa!important;border-bottom:1px solid #e3e7ed!important;color:#6f7b90!important;}
.messages{
  background-color:#f3f5f8!important;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(77,86,109,.055) 1px,transparent 0)!important;
  background-size:18px 18px!important;
}
.message-row .bubble{border:1px solid #e0e5ec!important;box-shadow:0 1px 2px rgba(22,31,49,.035)!important;color:#354057!important;}
.message-row.incoming .bubble,.message-row.customer .bubble{background:#fff!important;border-color:#e1e5ec!important;}
.message-row.outgoing .bubble,.message-row.me .bubble{background:#eaf6f1!important;border-color:#cce6dc!important;color:#155b45!important;}
.bubble .message-meta,.bubble small{color:#7f899a!important;}.message-row.outgoing .bubble .message-meta,.message-row.outgoing .bubble small{color:#4f806e!important;}
.reply-box{background:#fff!important;border-top:1px solid #dfe4eb!important;box-shadow:0 -5px 20px rgba(22,31,49,.035)!important;}
.reply-compose-area{background:#f7f8fb!important;border:1px solid #dfe4ec!important;border-radius:12px!important;}.reply-compose-area:focus-within{border-color:#a9d7c6!important;box-shadow:0 0 0 3px rgba(29,140,104,.09)!important;}
.reply-box textarea{border:0!important;background:transparent!important;box-shadow:none!important;color:#303b51!important;}
.reply-tool-button,.voice-record-button,.voice-cancel-button{color:#6e7a8f!important;}.reply-tool-button:hover,.voice-record-button:hover,.voice-cancel-button:hover{background:#eff1f6!important;color:#176e53!important;}
.send-button{background:linear-gradient(180deg,#29a67d,#1b805f)!important;color:#fff!important;border:1px solid #176e53!important;box-shadow:0 6px 14px rgba(18,99,74,.24)!important;}.send-button:hover{background:linear-gradient(180deg,#239a74,#176e53)!important;}
.reply-preview,.reply-to-preview{background:#fff!important;border-color:#e1e5ec!important;}.reply-to-preview-accent{background:#239b75!important;}.reply-to-preview-name{color:#176e53!important;}.reply-preview-copy strong,.reply-to-preview-copy strong{color:#333e54!important;}.reply-preview-copy small,.reply-to-preview-body{color:#7f899b!important;}
.quick-reply-menu-head,.quick-reply-dialog-head{border-bottom-color:#e6eaf0!important;}.quick-reply-menu-head strong,.quick-reply-dialog-head strong{color:#2c374d!important;}.quick-reply-search{background:#f7f8fb!important;}.quick-reply-item:hover{background:#f4f5fc!important;}.quick-reply-item strong{color:#303b52!important;}.quick-reply-item small{color:#8993a4!important;}
.customer-panel{background:#fbfcfe!important;border-left:1px solid #e4e8ef!important;}.customer-active>.avatar{background:#eaf6f1!important;color:#1a7f5f!important;}.customer-active h3{color:#2a354c!important;}.customer-details{color:#69758b!important;}.customer-details strong{color:#333e55!important;}
.template-reply{background:#fff!important;border-top:1px solid #e0e4eb!important;}
.inbox-media-field,.inbox-button-fields,.template-special-fields,.template-requirements.compact{background:#f8f9fc!important;border-color:#e3e7ef!important;}

/* ========================================================================
   Responsive alignment — preserve existing interaction behavior
   ======================================================================== */
@media (min-width:1101px){
  .sidebar{top:12px!important;bottom:12px!important;left:12px!important;width:254px!important;height:calc(100dvh - 24px)!important;border-radius:22px!important;}
  .main-area{min-width:0!important;}
  .topbar{height:64px!important;min-height:64px!important;padding:0 20px!important;border-radius:16px!important;}

  .metric-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
  .dashboard-grid{grid-template-columns:minmax(0,2.15fr) minmax(260px,.85fr)!important;}
  .two-column{grid-template-columns:minmax(0,2.05fr) minmax(300px,.95fr)!important;}
  .page-contacts .two-column{grid-template-columns:minmax(0,2.15fr) minmax(310px,.85fr)!important;}
  .page-auto-reply .auto-reply-layout-grid{grid-template-columns:minmax(0,1.4fr) minmax(310px,.6fr)!important;}
  .page-auto-followup .followup-layout-grid{grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr)!important;}
  .page-settings .api-rd-layout{grid-template-columns:minmax(0,1.35fr) minmax(380px,.65fr)!important;}
  .page-system .system-columns{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;}
  .page-agents .agent-list .agent-card{min-height:86px!important;}
  .campaign-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .page-system .system-check-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}

@media (min-width:721px) and (max-width:1100px){
  body{font-size:12.5px!important;}
  .main-area{padding:0 8px!important;}
  .topbar{height:60px!important;min-height:60px!important;margin:8px 0 0!important;width:100%!important;max-width:100%!important;padding:0 12px!important;border-radius:14px!important;}
  .page-content{padding:18px 4px 24px!important;}
  .page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{font-size:23px!important;}
  .page-heading p,.campaign-heading p,.api-rd-page-heading p{font-size:11.5px!important;}
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .metric-card{min-height:88px!important;}
  .campaign-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .two-column,.dashboard-grid,.page-auto-reply .auto-reply-layout-grid,.page-auto-followup .followup-layout-grid,.page-settings .api-rd-layout,.page-system .system-columns{grid-template-columns:1fr!important;}
  .page-settings .api-rd-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .page-system .system-check-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .panel-header{padding:12px 14px!important;}.form-panel{padding:16px!important;}
  .sidebar{background:linear-gradient(180deg,var(--premium-sidebar-2),var(--premium-sidebar))!important;}
}

@media (max-width:720px){
  body{font-size:12px!important;background:#f6f7fa!important;}
  .main-area{padding:6px 6px 0!important;}
  .topbar{
    height:56px!important;
    min-height:56px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    top:6px!important;
    padding:0 9px!important;
    border-radius:13px!important;
  }
  .menu-button{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important;}
  .mobile-header-context{gap:7px!important;}.mobile-header-mark{width:34px!important;height:34px!important;border-radius:9px!important;}.mobile-header-copy strong{font-size:11.5px!important;}.mobile-header-copy small{font-size:8.5px!important;}
  .connection-pill{min-height:31px!important;padding:6px 9px!important;font-size:9px!important;}.topbar .account-profile{padding:2px!important;}.topbar .account-profile .avatar{width:33px!important;height:33px!important;font-size:11px!important;}
  .page-content:not(.page-inbox){padding:16px 8px 24px!important;}
  .page-heading,.campaign-heading,.api-rd-page-heading{margin-bottom:14px!important;align-items:stretch!important;}
  .page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{font-size:21px!important;line-height:1.13!important;}
  .page-heading p,.campaign-heading p,.api-rd-page-heading p{margin-top:4px!important;font-size:10.5px!important;line-height:1.5!important;}
  
  .heading-actions>.btn,.heading-actions>form,.heading-actions>form>.btn{min-width:0!important;}
  .heading-actions>:only-child{grid-column:1/-1!important;}
  .btn{min-height:39px!important;font-size:10.5px!important;padding:8px 10px!important;}
  .panel,.api-rd-card,.campaign-panel,.agent-card,.system-check-card{border-radius:12px!important;}
  .panel-header,.api-rd-card-head{min-height:50px!important;padding:11px 12px!important;border-radius:12px 12px 0 0!important;}
  .panel-header h2,.panel h2,.api-rd-card-title h2{font-size:12.5px!important;}
  .form-panel{padding:13px!important;}.stack-form{gap:12px!important;}.form-grid{gap:10px!important;}
  label{font-size:10.5px!important;}
  input,select,textarea{min-height:42px!important;font-size:16px!important;border-radius:9px!important;}
  textarea{min-height:88px!important;}
  .notice,.consent-box{padding:11px!important;border-radius:10px!important;}.notice p,.consent-box p{font-size:10px!important;}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .metric-card{min-height:78px!important;padding:10px!important;gap:8px!important;border-radius:11px!important;}.metric-card strong{font-size:16px!important;}.metric-card small{font-size:8.5px!important;}.metric-icon{width:34px!important;height:34px!important;min-width:34px!important;}
  .dashboard-grid,.two-column,.settings-grid,.page-auto-reply .auto-reply-layout-grid,.page-auto-followup .followup-layout-grid,.page-settings .api-rd-layout,.page-system .system-columns{gap:10px!important;}
  th{font-size:8.5px!important;padding:9px 11px!important;}td{font-size:10px!important;padding:10px 11px!important;}
  .campaign-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}.campaign-stat{min-height:72px!important;padding:10px!important;}.campaign-stat strong{font-size:16px!important;}.campaign-stat-icon{width:32px!important;height:32px!important;}
  .campaign-toolbar{padding:10px!important;}.campaign-toolbar-title h2{font-size:12px!important;}.campaign-toolbar-title p{font-size:8.8px!important;}
  .page-contacts .panel-header{align-items:stretch!important;}.page-contacts .search-form{width:100%!important;}
  .template-empty-card{padding:27px 15px!important;}.template-empty-card h2{font-size:15px!important;}
  .page-auto-reply .auto-reply-status-panel{padding:13px!important;}
  .page-auto-followup .followup-help-panel{padding:14px!important;}.page-auto-followup .followup-create-form{padding:13px!important;}
  .page-settings .api-rd-overview-grid{gap:7px!important;}.page-settings .api-rd-stat{min-height:62px!important;padding:9px!important;}
  .page-system .system-check-card{padding:11px!important;}
  .modal{padding:7px!important;}.modal-card,.quick-reply-dialog{border-radius:15px 15px 10px 10px!important;}

  /* Inbox keeps prior mobile list/chat switching; only visual dimensions here. */
  .page-content.page-inbox{padding:6px 0 0!important;}
  .page-inbox .inbox-heading{padding:0 7px!important;margin-bottom:7px!important;}
  .page-inbox .inbox-heading .heading-actions{display:flex!important;width:auto!important;}
  .inbox-layout{border-radius:12px 12px 0 0!important;box-shadow:none!important;}
  .conversation-filter-bar{padding-top:2px!important;}.conversation-search{margin:9px 9px 0!important;}.conversation-filter-meta{padding:0 9px 8px!important;}.conversation-item{padding:10px!important;}
  .inbox-layout .chat-header{background:#fff!important;border-bottom:1px solid #e3e7ee!important;}
  .inbox-layout .messages{background-size:16px 16px!important;}
  .inbox-layout .reply-box{padding:7px!important;background:#fff!important;}
  .inbox-layout .reply-compose-area{border-radius:11px!important;}
  .inbox-layout .send-button{width:39px!important;height:39px!important;min-width:39px!important;}
}

@media (max-width:390px){
  .main-area{padding:5px 5px 0!important;}
  .topbar{top:5px!important;height:54px!important;min-height:54px!important;padding:0 7px!important;}
  .mobile-header-mark{width:32px!important;height:32px!important;}.mobile-header-copy strong{font-size:10.8px!important;}.mobile-header-copy small{font-size:8px!important;}
  .page-content:not(.page-inbox){padding:14px 6px 20px!important;}
  .page-heading h1,.campaign-heading h1,.api-rd-page-heading h1,.page-content>h1{font-size:19px!important;}
  .page-heading p,.campaign-heading p,.api-rd-page-heading p{font-size:10px!important;}
  
  .metric-grid{gap:7px!important;}.metric-card{padding:9px!important;gap:7px!important;}.metric-icon{width:31px!important;height:31px!important;min-width:31px!important;}.metric-card strong{font-size:15px!important;}
  .campaign-stats{grid-template-columns:1fr 1fr!important;}.campaign-stat{min-height:66px!important;padding:9px!important;}.campaign-stat strong{font-size:15px!important;}
  .panel-header,.api-rd-card-head{padding:10px 11px!important;}.form-panel{padding:11px!important;}
  .page-agents .agent-list .agent-card{border-radius:11px!important;}
  .page-settings .api-rd-overview-grid{grid-template-columns:1fr 1fr!important;}
  .page-system .system-check-grid{grid-template-columns:1fr!important;}
  .page-inbox .inbox-heading{padding:0 6px!important;}.conversation-item{padding:9px!important;}
}

@media (max-width:340px){
  .metric-grid,.campaign-stats{grid-template-columns:1fr!important;}
  .page-settings .api-rd-overview-grid{grid-template-columns:1fr!important;}
  .mobile-header-copy small{display:none!important;}
  .connection-pill{padding-inline:7px!important;}
}

/* Short screens: preserve access without shrinking text into illegibility. */
@media (min-width:1101px) and (max-height:780px){
  .sidebar .side-nav{overflow-y:auto!important;}
  .sidebar .sidebar-developer{display:none!important;}
  .sidebar .sidebar-footer{padding-bottom:7px!important;}
}

/* V80.1 — final accent normalization for high-specificity legacy rules. */
.page-inbox .quick-reply-button,
.page-inbox .quick-reply-item-main small,
.page-inbox .reply-attachment-menu button i,
.page-inbox .message-quoted-copy strong,
.page-inbox .reply-to-preview-copy strong{
  color:#176e53!important;
}
.page-inbox .message-quoted-accent{background:#239b75!important;}
.page-inbox .message-action-menu button:hover,
.page-inbox .message-action-menu button:focus-visible,
.page-inbox .quick-reply-item-actions button:hover{
  background:#edf8f4!important;
  color:#176e53!important;
}
.page-inbox .message-action-menu i{
  background:#eaf6f1!important;
  color:#1a7f5f!important;
}
.page-inbox .quick-reply-focus{border-color:#2db187!important;box-shadow:0 0 0 3px rgba(29,140,104,.12)!important;}
.page-inbox .reply-preview-thumb{background:#eaf6f1!important;color:#1a7f5f!important;}
.page-inbox .reply-to-preview-close:hover{background:#e2f2ec!important;color:#176e53!important;}
.page-inbox .message-audio-progress{accent-color:#1d8c68!important;}
.page-inbox .message-audio-mic{background:rgba(29,140,104,.10)!important;color:#1a7f5f!important;}
.page-inbox .outbound .message-audio-play{background:#1a7f5f!important;}
.page-inbox .message-location-icon{background:#eaf6f1!important;color:#1a7f5f!important;}

/* Public legal / deletion pages — same premium visual language. */
.public-legal-body{
  background:radial-gradient(circle at 100% 0,rgba(29,140,104,.06),transparent 26rem),#f6f7fb!important;
  color:#273248!important;
  font-family:"Manrope","Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;
}
.public-site-header{
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid #e4e8f0!important;
  box-shadow:0 5px 20px rgba(20,30,49,.035)!important;
  backdrop-filter:blur(12px) saturate(150%)!important;
}
.public-brand-icon{background:#eaf6f1!important;color:#1a7f5f!important;border:1px solid #d7ebe3!important;}
.public-brand strong{color:#263148!important;}.public-brand small{color:#8993a4!important;}
.public-signin-link{border-color:#dfe4ec!important;background:#fff!important;color:#59657b!important;}.public-signin-link:hover{border-color:#c5e2d7!important;background:#f3faf6!important;color:#176e53!important;}
.legal-hero{color:#2b364c!important;}.legal-eyebrow{background:#eaf6f1!important;border-color:#d7ebe3!important;color:#176e53!important;}.legal-hero h1{color:#172036!important;letter-spacing:-.04em!important;}.legal-hero p{color:#748096!important;}.legal-updated{color:#8d97a7!important;}
.legal-card,.deletion-card{background:#fff!important;border-color:#e1e6ee!important;border-radius:18px!important;box-shadow:0 14px 36px rgba(20,30,49,.065)!important;}.legal-card h2,.deletion-card h2{color:#273248!important;}.legal-card p,.deletion-card p{color:#657188!important;}.legal-card a,.deletion-card a{color:#176e53!important;}
.deletion-icon{background:#fff0f2!important;color:#c23c49!important;border-color:#f1d0d4!important;}.deletion-steps>li>span{background:#eaf6f1!important;color:#176e53!important;border-color:#d7ebe3!important;}.deletion-steps strong{color:#2f3a50!important;}.deletion-note{background:#f8f9fc!important;border-color:#e2e7ef!important;}.deletion-note i{color:#1a7f5f!important;}
.legal-primary-button{background:linear-gradient(180deg,#2aa97f,#1b805f)!important;border-color:#176e53!important;color:#fff!important;box-shadow:0 8px 18px rgba(18,99,74,.20)!important;}.legal-primary-button:hover{background:linear-gradient(180deg,#239a74,#176e53)!important;color:#fff!important;}.legal-secondary-button{background:#fff!important;border-color:#dce2ea!important;color:#4f5b71!important;}.legal-secondary-button:hover{background:#f6f7fb!important;border-color:#cfd6e1!important;color:#343f55!important;}
.public-footer{border-top-color:#e2e7ef!important;color:#8590a2!important;}.public-footer a{color:#657188!important;}.public-footer a:hover{color:#176e53!important;}
@media(max-width:700px){.public-site-header{padding-inline:14px!important;}.legal-shell{padding-inline:12px!important;}.legal-card,.deletion-card{border-radius:14px!important;}.public-footer{padding-inline:14px!important;}}

/* ========================================================================
   V81 — PRO CSS QA / ALIGNMENT HARDENING
   Presentation only. Keeps all PHP/JS/business logic untouched.
   Fixes short-PC sidebar footer visibility, chrome alignment, readable type,
   component geometry and responsive edge cases found in the final visual QA.
   ======================================================================== */

/* Universal geometry safety for every application page. */
.app-shell,.main-area,.page-content,.page-content>*,.panel,.panel>*,.table-wrap,
.dashboard-grid>*,.two-column>*,.settings-grid>*,.api-rd-layout>*,
.campaign-page,.campaign-panel,.agent-list,.agent-card{min-width:0;}
.page-heading,.campaign-heading,.api-rd-page-heading{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
  flex-wrap:wrap!important;
}
.page-heading>div:first-child,.campaign-heading>div:first-child,.api-rd-page-heading>div:first-child{
  min-width:0!important;
  flex:1 1 420px!important;
}
.heading-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex:0 0 auto!important;
  flex-wrap:wrap!important;
}
.page-heading>.btn,.page-heading>button.btn{flex:0 0 auto!important;}
.panel-header,.api-rd-card-head,.campaign-toolbar,.modal-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.panel-header>div,.api-rd-card-title,.campaign-toolbar-title{min-width:0!important;}
.panel-header p,.api-rd-card-title p,.campaign-toolbar-title p{overflow-wrap:anywhere;}

/* Readability: still compact, but no micro-text on normal desktop/tablet. */
@media (min-width:721px){
  .btn{font-size:11.8px!important;}
  .btn.small{font-size:10.4px!important;}
  label{font-size:11.8px!important;}
  input,select,textarea{font-size:12.4px!important;}
  .help,.muted{font-size:11.2px!important;}
  .panel-header a{font-size:11px!important;}
  th{font-size:9.7px!important;}
  td{font-size:11.2px!important;}
  td small{font-size:9.7px!important;}
  .status{font-size:9.5px!important;}
  .notice p,.consent-box p{font-size:11px!important;}
}

/* Desktop shell: align topbar exactly with the floating sidebar and viewport. */
@media (min-width:1101px){
  .sidebar{inset:12px auto 12px 12px!important;}
  .main-area{
    margin-left:278px!important;
    padding:0 12px 0 0!important;
  }
  .topbar{
    top:12px!important;
    margin:12px 0 0!important;
    width:100%!important;
    max-width:none!important;
  }
  .page-content{
    width:100%!important;
    max-width:1780px!important;
    padding:20px 0 30px!important;
    margin:0 auto!important;
  }
  .page-heading,.campaign-heading,.api-rd-page-heading{min-height:50px!important;}
}

/* Sidebar footer must never disappear on a PC. Navigation scrolls if height is tight. */
@media (min-width:1101px){

}
@media (min-width:1101px) and (max-height:820px){
  .sidebar-brand-row{min-height:64px!important;padding-top:7px!important;padding-bottom:5px!important;}
  .side-nav{padding-top:1px!important;padding-bottom:4px!important;gap:0!important;}
  .nav-section-label{padding-top:5px!important;padding-bottom:2px!important;font-size:7.3px!important;}
  .side-nav a{min-height:32px!important;padding-top:2px!important;padding-bottom:2px!important;font-size:10.5px!important;}
  .nav-icon{width:23px!important;height:23px!important;flex-basis:23px!important;font-size:9.5px!important;}
  .sidebar .sidebar-footer{gap:4px!important;padding:3px 9px 7px!important;}
  .sidebar .sidebar-user{min-height:40px!important;padding:4px 7px!important;grid-template-columns:27px minmax(0,1fr) 10px!important;}
  .sidebar .sidebar-user .avatar{width:27px!important;height:27px!important;min-width:27px!important;flex-basis:27px!important;}
  .sidebar .sidebar-user-copy strong{font-size:9px!important;}.sidebar .sidebar-user-copy small{font-size:7.4px!important;}
  .sidebar .sidebar-developer{display:block!important;padding:2px!important;}
  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{min-height:26px!important;grid-template-columns:26px minmax(0,1fr) 10px!important;gap:5px!important;padding:2px 4px!important;}
  .sidebar .sidebar-developer .developer-icon{width:19px!important;height:19px!important;min-width:19px!important;flex-basis:19px!important;}

}

/* Shared cards and forms: edge alignment and predictable internal rhythm. */
.panel,.api-rd-card,.campaign-panel,.agent-card,.system-check-card{overflow:clip;}
.panel-header,.api-rd-card-head{width:100%!important;}
.stack-form>*{min-width:0;}
.form-grid>*{min-width:0;}
.form-grid input,.form-grid select,.form-grid textarea{min-width:0!important;}
.notice,.consent-box{align-items:flex-start!important;}
.notice>div,.consent-box>div{min-width:0!important;}
.notice p,.consent-box p{overflow-wrap:anywhere!important;}
.modal-card{width:min(580px,100%)!important;}
.modal-card .stack-form{width:100%!important;}
.modal-head{margin-bottom:14px!important;}

/* Tables: keep rows aligned and use horizontal scrolling rather than squeezing columns. */
th,td{vertical-align:middle!important;}
td .btn,td .status{vertical-align:middle!important;}
.table-wrap,.campaign-table-wrap,.followup-table-wrap{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;}
.page-businesses .table-wrap>table{min-width:900px!important;}
.page-contacts .table-wrap>table{min-width:700px!important;}
.page-templates .table-wrap>table{min-width:880px!important;}

.page-system .table-wrap>table{min-width:680px!important;}
.page-auto-followup .followup-sequence-table{min-width:860px!important;}
.page-businesses .business-table-actions,.row-actions{min-width:max-content!important;}
.page-businesses .business-table-actions .btn{min-height:33px!important;}

/* Dashboard: consistent card baselines and table content. */
.page-dashboard .metric-card>div{min-width:0!important;}
.page-dashboard .metric-card small,.page-dashboard .metric-card span:last-child{line-height:1.2!important;}
.page-dashboard .dashboard-grid>section{min-width:0!important;}
.page-dashboard .support-card{display:flex!important;flex-direction:column!important;}
.page-dashboard .support-card>.btn{margin-top:auto!important;}

/* Contacts. */
.page-contacts .panel-header{flex-wrap:wrap!important;}
.page-contacts .search-form{display:flex!important;align-items:center!important;gap:7px!important;min-width:min(100%,280px)!important;}
.page-contacts .search-form input{min-width:0!important;flex:1 1 190px!important;}
.page-contacts .import-contacts-body{display:grid!important;gap:14px!important;}
.page-contacts .import-samples{display:flex!important;align-items:center!important;flex-wrap:wrap!important;}

/* Templates. */
.page-templates td,.page-templates th{vertical-align:middle!important;}
.page-templates .template-empty-actions{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
.template-guide-step{min-width:0!important;}
.template-guide-step p{overflow-wrap:anywhere!important;}

/* Campaign list / filters. */
.campaign-toolbar{flex-wrap:wrap!important;}
.campaign-toolbar-title{display:flex!important;align-items:center!important;gap:10px!important;flex:1 1 280px!important;}
.campaign-filters{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:1 1 360px!important;min-width:0!important;flex-wrap:wrap!important;}
.campaign-search{min-width:220px!important;flex:1 1 240px!important;}
.campaign-search input{min-width:0!important;}
.campaign-filters select{width:auto!important;min-width:140px!important;flex:0 1 180px!important;}
.campaign-table-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important;}

/* Campaign builder. */
.page-campaign-create .form-panel{width:min(100%,1040px)!important;}
.page-campaign-create .template-field,.page-campaign-create .variable-group,
.page-campaign-create .template-message-preview,.page-campaign-create .template-requirements{min-width:0!important;overflow-wrap:anywhere!important;}
.page-campaign-create .variable-group-head{display:flex!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important;}

/* Agents: keep every row on a clean common grid on PC/tablet. */
@media (min-width:721px){
  .page-agents .agent-list .agent-card{
    display:grid!important;
    grid-template-columns:minmax(220px,1.45fr) minmax(105px,.55fr) minmax(105px,.55fr) minmax(92px,.48fr) minmax(205px,.95fr)!important;
    align-items:center!important;
    gap:12px!important;
    padding:13px 14px!important;
  }
  .page-agents .agent-identity,.page-agents .agent-metric,.page-agents .agent-status-slot,.page-agents .agent-actions{min-width:0!important;margin:0!important;}
  .page-agents .agent-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important;}
  .page-agents .agent-actions form,.page-agents .agent-actions .btn{width:100%!important;min-width:0!important;}
  .page-agents .agent-account-note{grid-column:5!important;margin:0!important;text-align:center!important;}
}

/* Auto Reply: remove the accidental double inset around its header. */
.page-auto-reply .panel.form-panel{padding:0!important;}
.page-auto-reply .panel.form-panel>.panel-header{margin:0!important;}
.page-auto-reply .panel.form-panel>form{padding:18px!important;}
.page-auto-reply .auto-reply-status-head{display:flex!important;align-items:center!important;gap:12px!important;}
.page-auto-reply .auto-reply-status-head-copy{min-width:0!important;flex:1 1 auto!important;}
.page-auto-reply .auto-reply-status-badge{margin-left:auto!important;}
.page-auto-reply .auto-reply-example-row{align-items:start!important;}

/* Auto Follow-Up. */
.page-auto-followup .followup-customer-grid>*{min-width:0!important;}
.page-auto-followup .followup-form-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
.page-auto-followup .followup-scheduled-head{flex-wrap:wrap!important;}
.page-auto-followup .followup-scheduled-title{min-width:0!important;flex:1 1 420px!important;}
.page-auto-followup .followup-search{flex:0 1 310px!important;min-width:220px!important;max-width:100%!important;}
.page-auto-followup .followup-step-card{min-width:0!important;}

/* API settings / System. */
.page-settings .api-rd-card-head{flex-wrap:wrap!important;}
.page-settings .api-rd-card-title{flex:1 1 300px!important;}
.page-settings .api-rd-state{flex:0 0 auto!important;}
.page-settings .api-rd-actions,.page-settings .api-rd-platform-save{align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
.page-settings .api-rd-field{min-width:0!important;}
.page-settings .api-rd-field small,.page-settings .api-rd-note,.page-settings .api-rd-security{overflow-wrap:anywhere!important;}
.page-system .system-check-card>div{min-width:0!important;}
.page-system .system-backup-form{gap:8px!important;flex-wrap:wrap!important;}

/* Inbox: tighten alignment without touching any chat/inbox behavior. */
@media (min-width:1101px){
  .page-inbox .inbox-layout{grid-template-columns:minmax(285px,310px) minmax(450px,1fr) minmax(245px,270px)!important;}
  .page-inbox .chat-header{min-height:64px!important;height:auto!important;}
  .page-inbox .chat-person{min-width:0!important;flex:1 1 auto!important;}
  .page-inbox .chat-person-copy{min-width:0!important;}
  .page-inbox .chat-actions{flex:0 1 auto!important;min-width:0!important;}
  .page-inbox .customer-panel{min-width:0!important;}
}

.page-inbox .conversation-list-count{max-width:48%!important;}
.page-inbox .chat-name-line{min-width:0!important;}
.page-inbox .chat-name-line strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.page-inbox .reply-compose-area{min-width:0!important;flex:1 1 auto!important;}
.page-inbox .reply-box{align-items:flex-end!important;}

/* Tablet: clean stacking and preserve useful table geometry. */
@media (min-width:721px) and (max-width:1100px){
  .page-heading,.campaign-heading,.api-rd-page-heading{gap:12px!important;}
  .heading-actions{margin-left:auto!important;}
  .panel-header,.api-rd-card-head{gap:10px!important;}
  .page-agents .agent-list .agent-card{
    grid-template-columns:minmax(210px,1.35fr) minmax(95px,.5fr) minmax(95px,.5fr) minmax(86px,.45fr) minmax(190px,.9fr)!important;
    gap:9px!important;
    padding:12px!important;
  }
  
  .page-businesses .table-wrap>table{min-width:840px!important;}
  .page-templates .table-wrap>table{min-width:820px!important;}
}

/* Phones: one spacing system, full-width actions, no clipping. */
@media (max-width:720px){
  .page-heading,.campaign-heading,.api-rd-page-heading{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  .page-heading>div:first-child,.campaign-heading>div:first-child,.api-rd-page-heading>div:first-child{width:100%!important;}
  .page-heading>.btn,.page-heading>button.btn{width:100%!important;}
  .heading-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .heading-actions>*{min-width:0!important;}
  .heading-actions>.btn,.heading-actions>form,.heading-actions>form>.btn{width:100%!important;}
  .panel-header,.api-rd-card-head{align-items:flex-start!important;flex-wrap:wrap!important;}
  .panel-header>a{margin-left:auto!important;}
  .campaign-toolbar{align-items:stretch!important;}
  .campaign-toolbar-title{flex-basis:100%!important;}
  .campaign-filters{justify-content:stretch!important;flex-basis:100%!important;display:grid!important;grid-template-columns:1fr!important;}
  .campaign-search,.campaign-filters select{width:100%!important;min-width:0!important;max-width:none!important;}
  .campaign-table-footer{align-items:flex-start!important;flex-direction:column!important;}
  .page-auto-reply .panel.form-panel>form{padding:13px!important;}
  .page-auto-reply .auto-reply-status-head{align-items:flex-start!important;}
  .page-auto-followup .followup-form-actions{display:grid!important;grid-template-columns:1fr!important;}
  .page-auto-followup .followup-form-actions .btn{width:100%!important;}
  .page-auto-followup .followup-search{width:100%!important;min-width:0!important;flex-basis:100%!important;}
  .page-settings .api-rd-actions,.page-settings .api-rd-platform-save{display:grid!important;grid-template-columns:1fr!important;}
  .page-settings .api-rd-actions .btn,.page-settings .api-rd-platform-save .btn{width:100%!important;}
  .page-system .system-backup-form{display:grid!important;grid-template-columns:1fr!important;}
  .page-system .system-backup-form .btn{width:100%!important;}
  .modal-head{align-items:center!important;}
  .modal-card{width:100%!important;}
}

@media (max-width:390px){
  .heading-actions{grid-template-columns:1fr!important;}
  .page-heading p,.campaign-heading p,.api-rd-page-heading p{max-width:100%!important;overflow-wrap:anywhere!important;}
  .business-context-pill{max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .connection-pill{flex:0 0 auto!important;}
  .page-inbox .conversation-filter-meta{gap:5px!important;}
  .page-inbox .conversation-unread-filter{padding-inline:8px!important;}
  .page-inbox .conversation-list-count{max-width:46%!important;}
}

/* V81.1 — small typography cleanup found by multi-page viewport audit. */
.import-or span{font-size:9px!important;}
.page-campaigns .campaign-stat span:first-child{font-size:9.4px!important;line-height:1.2!important;}
.page-campaigns .campaign-stat span:last-child{font-size:8.8px!important;line-height:1.15!important;}
.page-settings .api-rd-eyebrow{font-size:8.8px!important;line-height:1.2!important;}
.page-settings .api-rd-stat small{font-size:9px!important;line-height:1.25!important;}
@media (max-width:720px){
  .page-campaigns .campaign-stat span:first-child{font-size:9px!important;}
  .page-campaigns .campaign-stat span:last-child{font-size:8.7px!important;}
  .page-settings .api-rd-eyebrow{font-size:8.7px!important;}
  .page-settings .api-rd-stat small{font-size:8.8px!important;}
}
@media (min-width:1101px) and (max-height:820px){
  
  .sidebar .sidebar-developer .developer-value,.sidebar .sidebar-developer .developer-phone{font-size:8.7px!important;}
}

/* V81.2 — phone heading flex-basis correction.
   The desktop 420px flex-basis is width-oriented; explicitly clear it when
   legacy page rules switch headings to a column so it can never become height. */
@media (max-width:720px){
  .page-content .page-heading,
  .page-content .campaign-heading,
  .page-content .api-rd-page-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
  }
  .page-content .page-heading>div:first-child,
  .page-content .campaign-heading>div:first-child,
  .page-content .api-rd-page-heading>div:first-child{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
}

/* V81.3 — compact-desktop footer remains fully readable instead of disappearing. */
@media (min-width:1101px) and (max-height:820px){
  .sidebar .sidebar-developer .developer-label{font-size:7.8px!important;line-height:1.12!important;}
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{font-size:9.2px!important;line-height:1.18!important;}
}

/* V81.4 — public/legal micro-typography readability pass. */
.public-brand strong{font-size:13px!important;line-height:1.2!important;}
.public-brand small{font-size:9.5px!important;line-height:1.2!important;}
.public-signin-link{font-size:10.5px!important;}
.legal-eyebrow{font-size:9.5px!important;line-height:1.2!important;}
.legal-hero p{font-size:12.5px!important;line-height:1.65!important;}
.legal-updated{font-size:9.5px!important;line-height:1.3!important;}
.legal-card h2,.deletion-card h2{font-size:15.5px!important;line-height:1.3!important;}
.legal-card p,.legal-card li,.deletion-card p,.deletion-card li{font-size:12.2px!important;line-height:1.72!important;}
.public-footer{font-size:9.5px!important;line-height:1.3!important;}
.legal-primary-button,.legal-secondary-button{font-size:10.5px!important;}
@media (max-width:520px){
  .public-brand strong{font-size:12px!important;}
  .public-brand small{font-size:9px!important;}
  .public-signin-link{font-size:10px!important;}
  .legal-hero p{font-size:11.8px!important;}
  .legal-card p,.legal-card li,.deletion-card p,.deletion-card li{font-size:11.7px!important;}
  .public-footer{font-size:9px!important;}
}

/* ========================================================================
   V82 DESKTOP SIDEBAR FOOTER — FULL-SIZE + SCROLLABLE NAV
   Visual-only. Keep account/developer cards comfortably readable on every
   desktop height. The navigation owns the vertical scrollbar, so the footer
   no longer needs to be compressed on laptops or short PC viewports.
   ======================================================================== */
@media (min-width:1101px){

  .sidebar .side-nav{

    padding-bottom:10px!important;
  }

  .sidebar .sidebar-user{
    display:grid!important;

    align-items:center!important;
    
  }
  .sidebar .sidebar-user .avatar{

    font-weight:700!important;
  }
  .sidebar .sidebar-user-copy{
    min-width:0!important;
    
  }
  .sidebar .sidebar-user-copy strong{

    letter-spacing:-.01em!important;
  }

  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{
    
    grid-template-columns:34px minmax(0,1fr) 14px!important;

  }
  
  .sidebar .sidebar-developer .developer-icon{

    font-size:11px!important;
  }
  
  .sidebar .sidebar-developer .developer-copy{
    min-width:0!important;
    
  }
  
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{

    letter-spacing:-.005em!important;
  }
  .sidebar .sidebar-developer .developer-arrow{
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    font-size:9px!important;
  }
}

/* Short desktop/laptop heights: scroll the menu; NEVER shrink the footer cards. */
@media (min-width:1101px) and (max-height:940px){

  .sidebar .sidebar-developer .developer-arrow{width:14px!important;height:14px!important;font-size:9px!important;}
}

/* ========================================================================
   V83 DESKTOP SIDEBAR — RESTORE FULL FOOTER SCALE; MENU SCROLLS INSTEAD
   Final visual override requested from the original PC behavior. Do not
   compress account/developer cards at any desktop height. If vertical room is
   tight, only the navigation list scrolls.
   ======================================================================== */
@media (min-width:1101px){

  /* Keep the normal PC navigation scale even on shorter laptop screens. */
  
  .sidebar .nav-section-label{
    
    font-size:7.4px!important;
    line-height:1!important;
    letter-spacing:.12em!important;
  }
  .sidebar .side-nav a{
    flex:0 0 34px!important;
    min-height:34px!important;
    height:34px!important;
    padding:3px 8px!important;
    gap:8px!important;
    border-radius:10px!important;
    font-size:10.8px!important;
    line-height:1!important;
  }
  .sidebar .nav-icon{
    width:25px!important;height:25px!important;min-width:25px!important;flex-basis:25px!important;
    font-size:10px!important;
  }

}

@media (min-width:1101px) and (max-height:940px){
  /* Explicitly neutralize every earlier short-height footer shrink rule. */
  .sidebar .sidebar-footer{gap:7px!important;padding:7px 11px 10px!important;}
  .sidebar .sidebar-user{min-height:56px!important;padding:8px 10px!important;grid-template-columns:36px minmax(0,1fr) 12px!important;}
  .sidebar .sidebar-user .avatar{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important;font-size:12.5px!important;}
  .sidebar .sidebar-user-copy strong{font-size:12px!important;line-height:1.10!important;}
  .sidebar .sidebar-user-copy small{font-size:9.5px!important;line-height:1.10!important;}
  .sidebar .sidebar-developer{display:block!important;padding:4px!important;}
  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{min-height:38px!important;padding:5px 6px!important;gap:9px!important;}
  .sidebar .sidebar-developer .developer-card-row{grid-template-columns:36px minmax(0,1fr) 14px!important;}
  .sidebar .sidebar-developer .developer-card-top{grid-template-columns:36px minmax(0,1fr)!important;}
  .sidebar .sidebar-developer .developer-icon{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important;}
  .sidebar .sidebar-developer .developer-icon i,
  .sidebar .sidebar-developer .developer-icon svg{width:11.5px!important;height:11.5px!important;font-size:11.5px!important;}
  .sidebar .sidebar-developer .developer-label{font-size:9.5px!important;line-height:1.08!important;}
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{font-size:11.8px!important;line-height:1.10!important;}
  .sidebar .sidebar-developer .developer-arrow,
  .sidebar .sidebar-developer .developer-arrow i,
  .sidebar .sidebar-developer .developer-arrow svg{width:14px!important;height:14px!important;font-size:10px!important;}

  .sidebar .side-nav{padding:2px 12px 8px!important;gap:2px!important;overflow-y:auto!important;}
  .sidebar .nav-section-label{padding:7px 10px 3px!important;font-size:7.4px!important;}
  .sidebar .side-nav a{flex-basis:34px!important;min-height:34px!important;height:34px!important;padding:3px 8px!important;font-size:10.8px!important;}
  .sidebar .nav-icon{width:25px!important;height:25px!important;min-width:25px!important;flex-basis:25px!important;font-size:10px!important;}
}

/* Inbox performance pass: keep the scroll track stable while rows are patched
   in place instead of rebuilding the full customer list. */
.page-inbox .conversation-scroll{
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

/* ================================================================
   INBOX FILTER META — RESPONSIVE TOGGLE + CUSTOMER COUNT
   Keeps the existing unread-only filter behaviour; presentation only.
   ================================================================ */
.page-inbox .conversation-filter-meta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0!important;
  margin:8px 0 0!important;
  padding:0!important;
}

.page-inbox .conversation-unread-filter{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  min-width:0!important;
  height:34px!important;
  padding:0 9px 0 11px!important;
  border:1px solid #dfe5ef!important;
  border-radius:10px!important;
  background:#ffffff!important;
  color:#637086!important;
  font-size:11.5px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease!important;
}

.page-inbox .conversation-unread-filter:hover{
  border-color:#c4e2d7!important;
  background:#f8fcfa!important;
  color:#176e53!important;
  box-shadow:0 2px 7px rgba(29,140,104,.07)!important;
}

.page-inbox .conversation-unread-filter:focus-visible{
  outline:0!important;
  border-color:#58c7a3!important;
  box-shadow:0 0 0 3px rgba(29,140,104,.13)!important;
}

.page-inbox .conversation-unread-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  white-space:nowrap!important;
}

.page-inbox .conversation-unread-label i{
  font-size:10.5px!important;
  width:12px!important;
  text-align:center!important;
  color:#8290a5!important;
  transition:color .16s ease!important;
}

.page-inbox .conversation-unread-switch{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:30px!important;
  height:18px!important;
  padding:2px!important;
  border:1px solid #cfd7e4!important;
  border-radius:999px!important;
  background:#e8edf4!important;
  box-sizing:border-box!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

.page-inbox .conversation-unread-switch-thumb{
  display:block!important;
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  background:#ffffff!important;
  box-shadow:0 1px 3px rgba(15,23,42,.22)!important;
  transform:translateX(0)!important;
  transition:transform .18s ease!important;
}

.page-inbox .conversation-unread-filter.active,
.page-inbox .conversation-unread-filter[aria-pressed="true"]{
  border-color:#c5e4d8!important;
  background:#f3faf6!important;
  color:#176e53!important;
  box-shadow:0 1px 3px rgba(29,140,104,.07)!important;
}

.page-inbox .conversation-unread-filter.active .conversation-unread-label i,
.page-inbox .conversation-unread-filter[aria-pressed="true"] .conversation-unread-label i{
  color:#1a7f5f!important;
}

.page-inbox .conversation-unread-filter.active .conversation-unread-switch,
.page-inbox .conversation-unread-filter[aria-pressed="true"] .conversation-unread-switch{
  border-color:#208d69!important;
  background:#208d69!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
}

.page-inbox .conversation-unread-filter.active .conversation-unread-switch-thumb,
.page-inbox .conversation-unread-filter[aria-pressed="true"] .conversation-unread-switch-thumb{
  transform:translateX(12px)!important;
}

.page-inbox .conversation-filter-meta .conversation-list-count{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0 1px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#7d899e!important;
  font-size:11.25px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
  text-align:right!important;
  font-variant-numeric:tabular-nums!important;
}

@media (max-width: 900px){
  .page-inbox .conversation-filter-meta{
    gap:8px!important;
  }
  .page-inbox .conversation-unread-filter{
    height:33px!important;
    padding-left:10px!important;
    padding-right:8px!important;
    gap:8px!important;
  }
  .page-inbox .conversation-filter-meta .conversation-list-count{
    font-size:11px!important;
  }
}

@media (max-width: 650px){
  .page-inbox .conversation-filter-meta{
    margin-top:7px!important;
    gap:7px!important;
  }
  .page-inbox .conversation-unread-filter{
    height:32px!important;
    border-radius:9px!important;
    padding:0 8px 0 9px!important;
    gap:7px!important;
    font-size:11px!important;
  }
  .page-inbox .conversation-unread-label{
    gap:5px!important;
  }
  .page-inbox .conversation-unread-label i{
    font-size:10px!important;
  }
  .page-inbox .conversation-unread-switch{
    width:28px!important;
    height:17px!important;
  }
  .page-inbox .conversation-unread-switch-thumb{
    width:11px!important;
    height:11px!important;
  }
  .page-inbox .conversation-unread-filter.active .conversation-unread-switch-thumb,
  .page-inbox .conversation-unread-filter[aria-pressed="true"] .conversation-unread-switch-thumb{
    transform:translateX(11px)!important;
  }
  .page-inbox .conversation-filter-meta .conversation-list-count{
    font-size:10.75px!important;
  }
}

@media (max-width: 365px){
  .page-inbox .conversation-filter-meta{
    gap:6px!important;
  }
  .page-inbox .conversation-unread-filter{
    height:31px!important;
    padding-left:8px!important;
    padding-right:7px!important;
    gap:6px!important;
    font-size:10.5px!important;
  }
  .page-inbox .conversation-unread-label{
    gap:4px!important;
  }
  .page-inbox .conversation-unread-switch{
    width:26px!important;
    height:16px!important;
  }
  .page-inbox .conversation-unread-switch-thumb{
    width:10px!important;
    height:10px!important;
  }
  .page-inbox .conversation-unread-filter.active .conversation-unread-switch-thumb,
  .page-inbox .conversation-unread-filter[aria-pressed="true"] .conversation-unread-switch-thumb{
    transform:translateX(10px)!important;
  }
  .page-inbox .conversation-filter-meta .conversation-list-count{
    font-size:10.25px!important;
  }
}

/* ========================================================================
   V85 — FOREST EMERALD + JADE PALETTE
   Visual-only harmony pass. Primary actions use deep emerald; semantic success,
   online and healthy states use one cooler jade family that complements it.
   ======================================================================== */
:root{
  --premium-success:#269b7c;
  --premium-success-strong:#1b745f;
  --premium-success-bright:#39bf98;
  --premium-success-soft:#edf8f5;
  --premium-success-soft-2:#f6fbf9;
  --premium-success-border:#cde8df;
  --premium-success-border-strong:#b8ddd1;
  --premium-success-glow:rgba(38,155,124,.14);
}

/* Online / connected indicators */
.online-dot,
.sidebar .online-dot{
  background:var(--premium-success-bright)!important;
  box-shadow:0 0 0 4px var(--premium-success-glow)!important;
}
.connection-pill.ok{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
}
.connection-pill.ok .connection-dot{
  color:var(--premium-success)!important;
  background:var(--premium-success)!important;
}
.live-inbox-pill{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
}
.live-inbox-pill span{
  background:var(--premium-success-bright)!important;
  box-shadow:0 0 0 4px var(--premium-success-glow)!important;
}

/* Success feedback */
.alert.success,
.inbox-toast.success{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
}
.status.approved,
.status.completed,
.status.delivered,
.status.read,
.status.success,
.status.active{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
}
.meta-status-badge.quality-green,
.meta-status-badge.meta-success{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
}

/* Agent status has higher-specificity legacy rules, so normalize it here. */
.page-agents .agent-top [data-agent-status].approved,
.page-agents .agent-status-slot [data-agent-status].approved,
.page-agents .agent-subline .status.approved{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
  box-shadow:none!important;
}
.page-agents .agent-top [data-agent-status].approved::before,
.page-agents .agent-status-slot [data-agent-status].approved::before,
.page-agents .agent-subline .status.approved::before{
  background:var(--premium-success-bright)!important;
  box-shadow:0 0 0 3px var(--premium-success-glow)!important;
}

/* Success/healthy icon surfaces */
.metric-icon.green{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success)!important;
}
/* Purple is a theme accent, not a success state. Keep it in the forest/teal family. */
.metric-icon.purple{
  background:#edf7f3!important;
  border-color:#d7ebe3!important;
  color:#2a8769!important;
}
.campaign-stat-icon.is-green,
.page-settings .api-rd-stat-icon.green,
.page-system .system-check-card.is-ok .system-check-icon{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success)!important;
}
.page-settings .api-rd-state.is-ready{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success-strong)!important;
}

/* Success confirmation dialogs */
.app-dialog-overlay.type-success .app-dialog::before{
  background:linear-gradient(90deg,var(--premium-success),var(--premium-success-bright))!important;
}
.app-dialog-overlay.type-success .app-dialog-icon{
  background:var(--premium-success-soft)!important;
  border-color:var(--premium-success-border)!important;
  color:var(--premium-success)!important;
}
.app-dialog-overlay.type-success .app-dialog-kicker{
  color:var(--premium-success-strong)!important;
}
.app-dialog-button.confirm.type-success{
  background:linear-gradient(180deg,#31a987,var(--premium-success))!important;
  border-color:#218b70!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(38,155,124,.18)!important;
}

/* Unread is a primary Inbox state, not a success state: keep it in the primary emerald family. */
.page-inbox .conversation-unread,
.page-inbox .conversation-item.active .conversation-unread{
  background:var(--premium-primary)!important;
  color:#fff!important;
  box-shadow:0 2px 7px rgba(29,140,104,.18)!important;
}

/* Sidebar developer details stay part of the forest chrome, not success green. */
.sidebar .sidebar-developer .developer-value{
  color:#bde9d9!important;
}
.sidebar .sidebar-developer .developer-icon{
  background:rgba(43,177,135,.14)!important;
  color:#a8dec9!important;
}

/* ========================================================================
   V86 — DESKTOP SIDEBAR FOOTER COMPACT SCALE
   Match the compact phone/drawer sizing for the Administrator and developer
   cards on PC. Navigation remains the only scrollable region.
   ======================================================================== */
@media (min-width:1101px){

  .sidebar .online-dot{

    box-shadow:0 0 0 4px var(--premium-success-glow)!important;
  }

  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{
    display:grid!important;
    align-items:center!important;

  }

  /* Do not let any old short-height rule enlarge/shrink these cards again. */
  
}

/* ========================================================================
   V87 — DESKTOP SIDEBAR FOOTER FLOW + BALANCED COMPACT SCALE
   Keep the lower navigation and footer in one natural vertical flow on PC.
   This prevents a nav row (e.g. System) from being half-clipped above the
   account cards. On short desktops the whole sidebar scrolls instead.
   Presentation only; no navigation or application logic is changed.
   ======================================================================== */
@media (min-width:1101px){
  .sidebar{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    
    scrollbar-width:thin!important;
    scrollbar-color:rgba(112,170,149,.52) transparent!important;
  }
  .sidebar::-webkit-scrollbar{display:block!important;width:4px!important;height:4px!important;}
  .sidebar::-webkit-scrollbar-track{background:transparent!important;}
  .sidebar::-webkit-scrollbar-thumb{background:rgba(112,170,149,.50)!important;border-radius:999px!important;}
  .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(143,196,177,.72)!important;}

  /* The nav no longer owns a clipped viewport. It takes its natural height,
     so its final item is always complete before the footer begins. */
  .sidebar .side-nav{

    overflow:visible!important;

    gap:1px!important;
  }
  
  .sidebar .nav-section-label{
    padding:6px 10px 2px!important;
  }

  /* Slightly larger than the previous compact pass, but intentionally below
     the older oversized desktop cards. */
  .sidebar .sidebar-user{
    min-height:49px!important;
    padding:6px 9px!important;
    grid-template-columns:33px minmax(0,1fr) 10px!important;
    column-gap:8px!important;
    border-radius:12px!important;
  }
  .sidebar .sidebar-user .avatar{
    width:33px!important;
    height:33px!important;
    min-width:33px!important;
    flex-basis:33px!important;
    font-size:11.6px!important;
  }
  .sidebar .sidebar-user-copy{gap:1.5px!important;}
  .sidebar .sidebar-user-copy strong{
    font-size:11.5px!important;
    line-height:1.08!important;
    font-weight:650!important;
  }
  .sidebar .sidebar-user-copy small{
    font-size:8.9px!important;
    line-height:1.08!important;
    font-weight:500!important;
  }
  .sidebar .online-dot{
    width:7.5px!important;
    height:7.5px!important;
    min-width:7.5px!important;
  }

  .sidebar .sidebar-developer{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    margin:0!important;
    padding:3px!important;
    border-radius:12px!important;
  }
  .sidebar .sidebar-developer .developer-card-row,
  .sidebar .sidebar-developer .developer-card-top{
    min-height:31px!important;
    padding:4px 6px!important;
    gap:7px!important;
  }
  .sidebar .sidebar-developer .developer-card-row{
    grid-template-columns:32px minmax(0,1fr) 12px!important;
  }
  .sidebar .sidebar-developer .developer-card-top{
    grid-template-columns:32px minmax(0,1fr)!important;
  }
  .sidebar .sidebar-developer .developer-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    flex-basis:24px!important;
    border-radius:7px!important;
  }
  .sidebar .sidebar-developer .developer-icon i,
  .sidebar .sidebar-developer .developer-icon svg{
    width:10.5px!important;
    height:10.5px!important;
    font-size:10.5px!important;
  }
  .sidebar .sidebar-developer .developer-copy{gap:1px!important;}
  .sidebar .sidebar-developer .developer-label{
    font-size:8.1px!important;
    line-height:1.02!important;
    font-weight:500!important;
  }
  .sidebar .sidebar-developer .developer-value,
  .sidebar .sidebar-developer .developer-phone{
    font-size:10.1px!important;
    line-height:1.07!important;
    font-weight:650!important;
  }
  .sidebar .sidebar-developer .developer-divider{margin:0 6px!important;}
  .sidebar .sidebar-developer .developer-arrow,
  .sidebar .sidebar-developer .developer-arrow i,
  .sidebar .sidebar-developer .developer-arrow svg{
    width:11px!important;
    height:11px!important;
    font-size:8.5px!important;
  }
}

/* ========================================================================
   V88 — DESKTOP SIDEBAR: FIXED ACCOUNT/DEVELOPER FOOTER
   Only the navigation list may scroll. Administrator + Developed by remain
   permanently fixed at the bottom of the desktop sidebar.
   ======================================================================== */
@media (min-width:1101px){
  .sidebar{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  .sidebar .sidebar-brand-row{
    flex:0 0 auto!important;
  }

  .sidebar .side-nav{
    flex:1 1 0!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(112,170,149,.52) transparent!important;
    padding:2px 12px 7px!important;
  }
  .sidebar .side-nav::-webkit-scrollbar{
    display:block!important;
    width:4px!important;
    height:4px!important;
  }
  .sidebar .side-nav::-webkit-scrollbar-track{
    background:transparent!important;
  }
  .sidebar .side-nav::-webkit-scrollbar-thumb{
    background:rgba(112,170,149,.50)!important;
    border-radius:999px!important;
  }
  .sidebar .side-nav::-webkit-scrollbar-thumb:hover{
    background:rgba(143,196,177,.72)!important;
  }

  .sidebar .sidebar-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    flex:0 0 auto!important;
    width:100%!important;
    gap:5px!important;
    margin:0!important;
    padding:5px 10px 10px!important;
    position:relative!important;
    inset:auto!important;
    overflow:visible!important;
    z-index:3!important;
    background:linear-gradient(180deg,rgba(8,28,20,0),rgba(8,28,20,.94) 22%,rgba(8,28,20,.98) 100%)!important;
  }

  .sidebar .sidebar-user,
  .sidebar .sidebar-developer{
    flex:0 0 auto!important;
  }
}

/* ========================================================================
   V89 — DASHBOARD RECENT CAMPAIGNS: PREMIUM COLUMN + STATUS ALIGNMENT
   Presentation-only fix. Keep the four-column table geometry stable and
   prevent status details from forcing Progress / Recipients out of alignment.
   ======================================================================== */
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table{
  width:100%!important;
  table-layout:fixed!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(1),
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(1){width:27%!important;}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(2),
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){width:13%!important;}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(3),
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(3){width:30%!important;}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(4),
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(4){width:30%!important;}

.page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{
  height:42px!important;
  padding:0 14px!important;
  text-align:left!important;
  vertical-align:middle!important;
  color:#748096!important;
  background:#f7f9f8!important;
  border-bottom:1px solid #e2e9e6!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody tr{
  height:auto!important;
  transition:background-color .16s ease!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody tr:hover{
  background:#fbfdfc!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody td{
  height:62px!important;
  padding:9px 14px!important;
  vertical-align:middle!important;
  border-bottom-color:#e8edeb!important;
}

/* Campaign identity: clean two-line baseline. */
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:first-child strong{
  font-size:13.5px!important;
  line-height:1.18!important;
  font-weight:780!important;
  color:#263648!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:first-child small{
  margin-top:3px!important;
  font-size:10.5px!important;
  line-height:1.18!important;
  color:#8995a7!important;
}

/* Recipients aligns directly under its heading instead of looking detached. */
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){
  text-align:left!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:720!important;
  color:#526077!important;
  font-variant-numeric:tabular-nums!important;
}

/* Progress starts on the same column baseline as its heading. */
.page-dashboard .recent-campaigns-panel .dashboard-progress-cell{
  padding-left:14px!important;
  padding-right:24px!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-progress-cell .dashboard-progress{
  width:100%!important;
  max-width:300px!important;
  min-width:0!important;
  height:7px!important;
  margin:0!important;
  border-radius:999px!important;
  background:#e5ece9!important;
  box-shadow:inset 0 1px 2px rgba(18,55,42,.05)!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-progress-cell .dashboard-progress > span{
  border-radius:inherit!important;
  background:linear-gradient(90deg,#177758 0%,#2dac7e 58%,#49c699 100%)!important;
  box-shadow:none!important;
}

/* Status is intentionally two levels:
   row 1 = status badge
   row 2 = completed/total + sent count
   This removes the width collision that caused the original misalignment. */
.page-dashboard .recent-campaigns-panel .dashboard-status-cell{
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  grid-template-areas:
    "badge badge"
    "count sent"!important;
  justify-content:start!important;
  align-content:center!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  gap:5px 8px!important;
  white-space:normal!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-status]{
  grid-area:badge!important;
  justify-self:start!important;
  max-width:100%!important;
  min-height:25px!important;
  padding:5px 9px!important;
  border-radius:8px!important;
  font-size:10px!important;
  line-height:1.05!important;
  font-weight:760!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 1px 2px rgba(31,47,42,.05)!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-progress-label]{
  grid-area:count!important;
  margin:0!important;
  font-size:12px!important;
  line-height:1.1!important;
  font-weight:780!important;
  color:#304054!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-sent]{
  grid-area:sent!important;
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  font-size:10px!important;
  line-height:1.1!important;
  font-weight:620!important;
  color:#8793a4!important;
  white-space:nowrap!important;
}
.page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-sent]::before{
  content:"•"!important;
  margin-right:7px!important;
  color:#b6c0ca!important;
  font-size:8px!important;
}

/* A completed campaign with failures is a warning, but stays visually soft. */
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table .status.completed-with-failures,
.page-dashboard .recent-campaigns-panel .dashboard-campaign-table .status.partial{
  background:#fff6df!important;
  color:#a46608!important;
  border:1px solid #f0ddb0!important;
}

/* Tablet keeps the same four-column structure and scrolls only if needed. */
@media (min-width:721px) and (max-width:1100px){
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table{
    width:720px!important;
    min-width:720px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(1),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(1){width:194px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(2),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){width:94px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(3),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(3){width:216px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(4),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(4){width:216px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th,
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody td{
    padding-left:11px!important;
    padding-right:11px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-progress-cell{
    padding-right:19px!important;
  }
}

/* Phones retain the horizontal desktop-style table, but status no longer
   overflows off the right edge when the user swipes to that column. */
@media (max-width:720px){
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table{
    width:700px!important;
    min-width:700px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(1),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(1){width:210px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(2),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){width:85px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(3),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(3){width:200px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(4),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(4){width:205px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table thead th{
    height:38px!important;
    padding:0 9px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table tbody td{
    height:60px!important;
    padding:8px 9px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-progress-cell{
    padding-right:17px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell{
    gap:4px 7px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-status]{
    min-height:24px!important;
    padding:5px 8px!important;
    font-size:9.5px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-progress-label]{
    font-size:11px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-status-cell > [data-dashboard-sent]{
    font-size:9px!important;
  }
}

@media (max-width:380px){
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table{
    width:690px!important;
    min-width:690px!important;
  }
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(1),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(1){width:205px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(2),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(2){width:82px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(3),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(3){width:196px!important;}
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table th:nth-child(4),
  .page-dashboard .recent-campaigns-panel .dashboard-campaign-table td:nth-child(4){width:207px!important;}
}

/* ========================================================================
   CAMPAIGNS PAGE — FINAL 7-COLUMN ALIGNMENT / PREMIUM ROW POLISH
   Presentation only. Keeps campaign data/actions and live-update selectors intact.
   ======================================================================== */
.page-campaigns .campaign-table-wrap{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  background:#fff!important;
  scrollbar-gutter:stable!important;
}
.page-campaigns .campaign-table{
  width:100%!important;
  min-width:1220px!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
/* Exactly 100%: Campaign 16 + Template 15 + Progress 20 + Status 12 + API 18 + Created 9 + Actions 10 */
.page-campaigns .campaign-table th:nth-child(1),
.page-campaigns .campaign-table td:nth-child(1){width:16%!important;}
.page-campaigns .campaign-table th:nth-child(2),
.page-campaigns .campaign-table td:nth-child(2){width:15%!important;}
.page-campaigns .campaign-table th:nth-child(3),
.page-campaigns .campaign-table td:nth-child(3){width:20%!important;}
.page-campaigns .campaign-table th:nth-child(4),
.page-campaigns .campaign-table td:nth-child(4){width:12%!important;}
.page-campaigns .campaign-table th:nth-child(5),
.page-campaigns .campaign-table td:nth-child(5){width:18%!important;}
.page-campaigns .campaign-table th:nth-child(6),
.page-campaigns .campaign-table td:nth-child(6){width:9%!important;}
.page-campaigns .campaign-table th:nth-child(7),
.page-campaigns .campaign-table td:nth-child(7){width:10%!important;}

.page-campaigns .campaign-table thead th{
  height:44px!important;
  padding:10px 14px!important;
  vertical-align:middle!important;
  background:#f7f9f8!important;
  border-bottom:1px solid #e2e9e6!important;
  color:#738096!important;
  font-size:9.5px!important;
  font-weight:820!important;
  letter-spacing:.055em!important;
  line-height:1.15!important;
}
.page-campaigns .campaign-table thead th:nth-child(4),
.page-campaigns .campaign-table thead th:nth-child(7){text-align:center!important;}

.page-campaigns .campaign-table tbody tr{
  background:#fff!important;
  transition:background-color .14s ease,box-shadow .14s ease!important;
}
.page-campaigns .campaign-table tbody tr:not(.campaign-no-results):hover{
  background:#fbfdfc!important;
  box-shadow:inset 3px 0 0 rgba(29,140,104,.18)!important;
}
.page-campaigns .campaign-table tbody td{
  height:82px!important;
  min-width:0!important;
  max-width:none!important;
  padding:12px 14px!important;
  vertical-align:middle!important;
  overflow:hidden!important;
  border-bottom:1px solid #edf1ef!important;
  color:#48566c!important;
  font-size:11px!important;
  line-height:1.38!important;
}

/* Campaign + template hierarchy. */
.page-campaigns .campaign-table td:nth-child(1) strong{
  display:block!important;
  margin:0 0 3px!important;
  overflow:hidden!important;
  color:#28364a!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.page-campaigns .campaign-table td:nth-child(1) small,
.page-campaigns .campaign-table td:nth-child(2) small{
  display:block!important;
  margin-top:3px!important;
  overflow:hidden!important;
  color:#8a97aa!important;
  font-size:9.4px!important;
  line-height:1.25!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.page-campaigns .campaign-table td:nth-child(2){
  color:#435169!important;
  font-size:11.2px!important;
  font-weight:620!important;
  overflow-wrap:anywhere!important;
}

/* Progress: one stable bar + one compact metrics line. */
.page-campaigns .campaign-table .progress{
  display:block!important;
  width:100%!important;
  height:7px!important;
  margin:0 0 8px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:999px!important;
  background:#e8efec!important;
  box-shadow:inset 0 1px 1px rgba(15,78,58,.035)!important;
}
.page-campaigns .campaign-table .progress span{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#18805f 0%,#31b98d 100%)!important;
}
.page-campaigns .campaign-table [data-campaign-counts]{
  display:block!important;
  width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  color:#8491a4!important;
  font-size:9.5px!important;
  font-weight:570!important;
  line-height:1.25!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Status gets its own centered lane and never pushes adjacent columns. */
.page-campaigns .campaign-table td:nth-child(4){text-align:center!important;}
.page-campaigns .campaign-table .status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:30px!important;
  margin:0 auto!important;
  padding:6px 10px!important;
  border-radius:9px!important;
  font-size:9.7px!important;
  font-weight:820!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.page-campaigns .campaign-table .status.completed-with-failures{
  background:#fff5df!important;
  border-color:#f0d6a4!important;
  color:#9a6208!important;
  box-shadow:0 2px 7px rgba(154,98,8,.06)!important;
}

/* API response is constrained inside its lane instead of crushing Created/Actions. */
.page-campaigns .campaign-table .campaign-error{
  position:relative!important;
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
}
.page-campaigns .campaign-table .campaign-error>span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  max-height:2.9em!important;
  overflow:hidden!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  font-size:9.8px!important;
  line-height:1.4!important;
}
.page-campaigns .campaign-table .campaign-error>span i{
  display:inline-flex!important;
  width:13px!important;
  min-width:13px!important;
  margin-right:5px!important;
  align-items:center!important;
  justify-content:center!important;
  vertical-align:-1px!important;
}
.page-campaigns .campaign-table .api-error{color:#c33b46!important;}
.page-campaigns .campaign-table .api-ok{color:#167659!important;}
.page-campaigns .campaign-table .api-processing{color:#3f6ea9!important;}

/* Created date stays compact and optically centered vertically. */
.page-campaigns .campaign-table td:nth-child(6){
  color:#5c6a80!important;
  font-size:10.2px!important;
  font-weight:590!important;
  line-height:1.5!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
}

/* Dedicated action lane: predictable width and equal buttons. */
.page-campaigns .campaign-table td:nth-child(7){text-align:center!important;}
.page-campaigns .campaign-table .row-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  gap:6px!important;
  margin:0!important;
}
.page-campaigns .campaign-table .row-actions form{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.page-campaigns .campaign-table .row-actions .btn,
.page-campaigns .campaign-table .row-actions .btn.small{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:32px!important;
  padding:6px 8px!important;
  border-radius:9px!important;
  font-size:9.8px!important;
  font-weight:720!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Tablet: preserve the same geometry through a clean horizontal table scroll. */
@media (min-width:721px) and (max-width:1100px){
  .page-campaigns .campaign-table{min-width:1120px!important;}
  .page-campaigns .campaign-table thead th{padding-inline:12px!important;}
  .page-campaigns .campaign-table tbody td{height:78px!important;padding:10px 12px!important;}
}

/* Phones: keep a proper desktop-style data table; scroll instead of collapsing cells. */
@media (max-width:720px){
  .page-campaigns .campaign-table{width:1060px!important;min-width:1060px!important;}
  .page-campaigns .campaign-table thead th{height:40px!important;padding:8px 10px!important;font-size:8.8px!important;}
  .page-campaigns .campaign-table tbody td{height:72px!important;padding:9px 10px!important;font-size:10.2px!important;}
  .page-campaigns .campaign-table td:nth-child(1) strong{font-size:11.5px!important;}
  .page-campaigns .campaign-table .status{min-height:28px!important;padding:5px 8px!important;font-size:9px!important;}
  .page-campaigns .campaign-table .row-actions .btn,
  .page-campaigns .campaign-table .row-actions .btn.small{min-height:30px!important;font-size:9.2px!important;}
}

/* ========================================================================
   V89 — BRAND COPY + DESCENDER-SAFE PAGE TITLES
   Presentation-only hardening. Keeps the existing layout/logic intact while
   ensuring letters with descenders (g, j, p, q, y) can never be visually cut.
   ======================================================================== */
.sidebar .brand-copy strong{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.page-content .page-heading h1,
.page-content .campaign-heading h1,
.page-content .api-rd-page-heading h1,
.page-content>h1{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding-top:.02em!important;
  padding-bottom:.10em!important;
  line-height:1.20!important;
}

@media (min-width:721px){
  .page-content .page-heading,
  .page-content .campaign-heading,
  .page-content .api-rd-page-heading{
    height:auto!important;
    min-height:58px!important;
    overflow:visible!important;
  }
}

@media (max-width:720px){
  .page-content .page-heading h1,
  .page-content .campaign-heading h1,
  .page-content .api-rd-page-heading h1,
  .page-content>h1{
    padding-bottom:.11em!important;
    line-height:1.20!important;
  }
}

/* ========================================================================
   SYSTEM — BACKUP & RECOVERY FINAL ALIGNMENT
   Keep backup logic untouched. This final layer removes the older flex
   override and gives both backup rows one stable, responsive geometry.
   ======================================================================== */
.page-system .system-backup-body{
  gap:14px!important;
}
.page-system .system-backup-body>.notice.compact{
  margin:0!important;
}
.page-system .system-backup-form{
  display:grid!important;
  grid-template-columns:minmax(190px,220px) minmax(250px,300px) minmax(150px,1fr)!important;
  align-items:end!important;
  column-gap:14px!important;
  row-gap:8px!important;
  padding:16px 18px!important;
  border:1px solid #dbe5df!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%)!important;
  box-shadow:0 4px 16px rgba(11,56,42,.035)!important;
}
.page-system .system-backup-form>label{
  min-width:0!important;
  margin:0!important;
  align-self:stretch!important;
  display:grid!important;
  grid-template-rows:auto 44px!important;
  gap:7px!important;
  color:#3c4d47!important;
  font-size:11.5px!important;
  font-weight:650!important;
  line-height:1.25!important;
}
.page-system .system-backup-form>label>input{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:9px 12px!important;
  border-radius:10px!important;
  border-color:#ccdcd4!important;
  background:#fff!important;
}
.page-system .system-backup-form>label>input:focus{
  border-color:#2b9a77!important;
  box-shadow:0 0 0 3px rgba(43,154,119,.12)!important;
}
.page-system .system-backup-form>.btn{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  height:44px!important;
  margin:0!important;
  padding:9px 15px!important;
  justify-self:stretch!important;
  align-self:end!important;
  white-space:nowrap!important;
  border-radius:10px!important;
}
.page-system .system-backup-form>.help{
  min-width:0!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 0 0 0!important;
  align-self:end!important;
  display:flex!important;
  align-items:center!important;
  color:#75857f!important;
  font-size:10.5px!important;
  line-height:1.4!important;
  overflow-wrap:anywhere!important;
}
.page-system .system-recovery-steps{
  margin:0!important;
  padding:16px 18px!important;
  border-radius:12px!important;
}

/* Full-width tablet System panel: retain a strong two-control row while the
   timestamp becomes a clean secondary line instead of forcing wrapping. */
@media (max-width:900px){
  .page-system .system-backup-form{
    grid-template-columns:minmax(0,1fr) minmax(230px,.85fr)!important;
    align-items:end!important;
  }
  .page-system .system-backup-form>.help{
    grid-column:1/-1!important;
    min-height:0!important;
    padding-top:2px!important;
  }
}

/* Phones: one deliberate vertical rhythm, no competing flex items. */
@media (max-width:640px){
  .page-system .system-backup-body{gap:11px!important;}
  .page-system .system-backup-form{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px!important;
  }
  .page-system .system-backup-form>label{
    grid-template-rows:auto 44px!important;
  }
  .page-system .system-backup-form>.btn{
    grid-column:1!important;
    width:100%!important;
  }
  .page-system .system-backup-form>.help{
    grid-column:1!important;
    min-height:0!important;
    padding-top:0!important;
  }
  .page-system .system-recovery-steps{
    padding:14px!important;
  }
}

/* ========================================================================
   V95 — INBOX CUSTOMER OPT-IN ACTION ALIGNMENT
   Keep marketing opt-in controls visually stable without changing behavior.
   ======================================================================== */
.page-inbox .customer-optin-actions{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
  margin-top:2px !important;
}
.page-inbox .customer-optin-actions[hidden]{
  display:none !important;
}
.page-inbox .customer-optin-actions .btn{
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  padding:8px 10px !important;
  margin:0 !important;
  border-radius:10px !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
  font-size:12px !important;
  font-weight:730 !important;
  box-shadow:0 1px 2px rgba(17,34,56,.025) !important;
}
.page-inbox .customer-optin-actions .btn[hidden]{
  display:none !important;
}
.page-inbox .customer-optin-actions .btn:not([hidden]):only-of-type{
  grid-column:1 / -1 !important;
}
/* In normal app state one action is hidden; let the visible action fill the row. */
.page-inbox .customer-optin-actions .btn:first-of-type:not([hidden]):has(+ .btn[hidden]),
.page-inbox .customer-optin-actions .btn[hidden] + .btn:not([hidden]){
  grid-column:1 / -1 !important;
}
.page-inbox .customer-optin-actions > small{
  grid-column:1 / -1 !important;
  width:100% !important;
  margin:1px 0 0 !important;
  line-height:1.45 !important;
}

@media (max-width:480px){
  .page-inbox .customer-optin-actions{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  .page-inbox .customer-optin-actions .btn,
  .page-inbox .customer-optin-actions > small{
    grid-column:1 !important;
  }
}

/* DMWMSG REBRAND — unified navy, indigo and cyan workspace */
:root{--green:#6366f1;--green-dark:#4338ca;--bg:#f4f6fb;--text:#172033;--muted:#667085;--line:#e3e7f0;--dmw-navy:#111827;--dmw-indigo:#6366f1;--dmw-cyan:#06b6d4;--dmw-soft:#eef2ff}
body{background:var(--bg)!important;color:var(--text)!important}
.sidebar{background:linear-gradient(180deg,#111827 0%,#172033 58%,#101827 100%)!important;border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:12px 0 40px rgba(15,23,42,.12)!important}
.brand-icon,.mobile-header-mark,.auth-logo{background:linear-gradient(135deg,var(--dmw-indigo),var(--dmw-cyan))!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px rgba(99,102,241,.28)!important}
.brand-copy strong{color:#fff!important;letter-spacing:.08em!important}.brand-copy small{color:#94a3b8!important;letter-spacing:.04em!important}
.side-nav .nav-section-label{color:#64748b!important}.side-nav a{color:#aeb8ca!important;border:1px solid transparent!important}.side-nav a:hover{background:rgba(99,102,241,.12)!important;color:#fff!important}.side-nav a.active{background:linear-gradient(90deg,rgba(99,102,241,.25),rgba(6,182,212,.09))!important;border-color:rgba(129,140,248,.16)!important;color:#fff!important;box-shadow:inset 3px 0 #818cf8!important}.side-nav a.active .nav-icon{color:#a5b4fc!important}
.sidebar-user,.sidebar-developer{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.08)!important}.sidebar-developer .developer-icon{background:rgba(99,102,241,.18)!important;color:#a5b4fc!important}.sidebar-developer .developer-value,.sidebar-developer .developer-phone{color:#f8fafc!important;letter-spacing:.045em!important}.sidebar-developer .developer-label{color:#7f8da3!important}
.topbar{background:rgba(255,255,255,.9)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(18px)!important}
.dmw-header-brand{display:flex!important;align-items:center!important;gap:0!important;width:auto!important;height:38px!important;padding:0 12px!important;border-radius:10px!important;background:#111827!important;color:#fff!important;font-size:14px!important;letter-spacing:.08em!important}.dmw-header-brand span{font-weight:800!important}.dmw-header-brand strong{color:#67e8f9!important;font-weight:900!important}
.page-content{background:radial-gradient(circle at 100% 0,rgba(99,102,241,.055),transparent 28rem),var(--bg)!important}
.panel,.metric-card,.agent-card,.business-card,.template-card{border-color:var(--line)!important;border-radius:16px!important;box-shadow:0 8px 28px rgba(15,23,42,.055)!important}.metric-card{background:linear-gradient(145deg,#fff,#fbfcff)!important}.metric-card:hover,.agent-card:hover,.business-card:hover{transform:translateY(-2px)!important;box-shadow:0 14px 34px rgba(15,23,42,.09)!important}
.btn.primary,.login-submit{background:linear-gradient(135deg,#6366f1,#4f46e5 58%,#0891b2)!important;border-color:#4f46e5!important;color:#fff!important;box-shadow:0 9px 22px rgba(79,70,229,.24)!important}.btn.primary:hover,.login-submit:hover{background:linear-gradient(135deg,#5558e8,#4338ca 58%,#0e7490)!important;box-shadow:0 12px 28px rgba(79,70,229,.32)!important}
input:focus,select:focus,textarea:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,.12)!important}.connection-pill.ok{background:#ecfdf5!important;color:#047857!important;border-color:#a7f3d0!important}.connection-pill.warn{background:#fff7ed!important;color:#c2410c!important;border-color:#fed7aa!important}.avatar{background:linear-gradient(135deg,#eef2ff,#cffafe)!important;color:#4338ca!important}.progress span{background:linear-gradient(90deg,#6366f1,#06b6d4)!important}
.auth-body-premium{background:radial-gradient(circle at 5% 5%,rgba(99,102,241,.16),transparent 28rem),radial-gradient(circle at 95% 95%,rgba(6,182,212,.13),transparent 25rem),#f4f6fb!important}.login-welcome{background:radial-gradient(circle at 88% 10%,rgba(6,182,212,.18),transparent 18rem),linear-gradient(145deg,#0f172a,#252461 58%,#164e63)!important}.login-brand-icon{background:linear-gradient(135deg,#818cf8,#22d3ee)!important;color:#fff!important}.login-eyebrow{color:#a5f3fc!important}.login-feature-list i{color:#a5f3fc!important;background:rgba(255,255,255,.09)!important}
.dmw-login-brand{width:auto!important;max-width:100%!important;height:auto!important;display:flex!important;align-items:baseline!important;gap:0!important;overflow:visible!important;color:#111827!important}.dmw-login-brand>span,.dmw-login-brand>strong{font-size:29px!important;line-height:1!important;letter-spacing:.08em!important}.dmw-login-brand>span{font-weight:850!important}.dmw-login-brand>strong{color:#4f46e5!important;font-weight:900!important}.dmw-login-brand>small{margin-left:12px!important;color:#98a2b3!important;font-size:9px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.login-mobile-product{background:#eef2ff!important;border-color:#c7d2fe!important;color:#4338ca!important}.login-input-wrap input:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,.12)!important}.public-brand-icon{background:linear-gradient(135deg,#6366f1,#06b6d4)!important;color:#fff!important}.legal-hero{background:linear-gradient(135deg,#111827,#312e81)!important}
@media(max-width:720px){.dmw-header-brand{height:34px!important;padding:0 9px!important;font-size:12px!important}.dmw-login-brand>small{display:none!important}}

/* DMWMSG COLOR REFRESH — midnight purple, electric violet and coral */
:root{
  --green:#8b5cf6;
  --green-dark:#6d28d9;
  --bg:#f8f7fc;
  --text:#211a2f;
  --muted:#736b80;
  --line:#e9e4f0;
  --dmw-navy:#1b1029;
  --dmw-indigo:#8b5cf6;
  --dmw-cyan:#fb7185;
  --dmw-soft:#f3e8ff;
}
body{background:#f8f7fc!important;color:#211a2f!important}
.sidebar{
  background:linear-gradient(180deg,#1b1029 0%,#26143c 54%,#160d22 100%)!important;
  border-right-color:rgba(255,255,255,.07)!important;
  box-shadow:14px 0 42px rgba(39,18,58,.16)!important;
}
.brand-icon,.mobile-header-mark,.auth-logo{
  background:linear-gradient(135deg,#8b5cf6,#fb7185)!important;
  box-shadow:0 8px 24px rgba(139,92,246,.3)!important;
}
.side-nav a:hover{background:rgba(168,85,247,.13)!important}
.side-nav a.active{
  background:linear-gradient(90deg,rgba(139,92,246,.3),rgba(251,113,133,.1))!important;
  border-color:rgba(196,181,253,.18)!important;
  box-shadow:inset 3px 0 #c084fc!important;
}
.side-nav a.active .nav-icon{color:#d8b4fe!important}
.sidebar-developer .developer-icon{background:rgba(168,85,247,.18)!important;color:#d8b4fe!important}
.topbar{background:rgba(255,253,255,.92)!important;border-bottom-color:#e9e4f0!important}
.dmw-header-brand{background:#21142f!important;box-shadow:0 7px 18px rgba(39,18,58,.14)!important}
.dmw-header-brand strong{color:#fda4af!important}
.page-content{background:radial-gradient(circle at 100% 0,rgba(168,85,247,.07),transparent 29rem),radial-gradient(circle at 0 100%,rgba(251,113,133,.04),transparent 24rem),#f8f7fc!important}
.panel,.metric-card,.agent-card,.business-card,.template-card{border-color:#e9e4f0!important;box-shadow:0 8px 28px rgba(50,30,70,.06)!important}
.metric-card{background:linear-gradient(145deg,#fff,#fdfaff)!important}
.btn.primary,.login-submit{
  background:linear-gradient(135deg,#9333ea,#7c3aed 58%,#e11d48)!important;
  border-color:#7c3aed!important;
  box-shadow:0 9px 23px rgba(124,58,237,.26)!important;
}
.btn.primary:hover,.login-submit:hover{
  background:linear-gradient(135deg,#7e22ce,#6d28d9 58%,#be123c)!important;
  border-color:#6d28d9!important;
  box-shadow:0 12px 29px rgba(124,58,237,.34)!important;
}
input:focus,select:focus,textarea:focus,.login-input-wrap input:focus{border-color:#8b5cf6!important;box-shadow:0 0 0 3px rgba(139,92,246,.13)!important}
.avatar{background:linear-gradient(135deg,#f3e8ff,#ffe4e6)!important;color:#7e22ce!important}
.progress span{background:linear-gradient(90deg,#8b5cf6,#fb7185)!important}
.auth-body-premium{background:radial-gradient(circle at 4% 4%,rgba(168,85,247,.18),transparent 29rem),radial-gradient(circle at 96% 96%,rgba(251,113,133,.14),transparent 26rem),#f8f7fc!important}
.login-welcome{background:radial-gradient(circle at 88% 10%,rgba(251,113,133,.2),transparent 18rem),linear-gradient(145deg,#1b1029,#3b1762 58%,#711c46)!important}
.login-brand-icon{background:linear-gradient(135deg,#a855f7,#fb7185)!important}
.login-eyebrow,.login-feature-list i{color:#fbcfe8!important}
.dmw-login-brand>strong{color:#7c3aed!important}
.login-mobile-product{background:#f3e8ff!important;border-color:#ddd6fe!important;color:#6d28d9!important}
.public-brand-icon{background:linear-gradient(135deg,#8b5cf6,#fb7185)!important}
.public-brand-icon img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:inherit!important}
.legal-hero{background:linear-gradient(135deg,#1b1029,#581c87 66%,#881337)!important}

/* DMWMSG FLAT TEAL — remove legacy green/gradient styling and improve type */
:root{
  --green:#0f766e;
  --green-dark:#115e59;
  --ui-green:#0f766e;
  --ui-green-dark:#115e59;
  --workspace-green:#0f766e;
  --dash-green:#0f766e;
  --premium-primary:#0f766e;
  --premium-primary-strong:#115e59;
  --bg:#f7faf9;
  --text:#162321;
  --muted:#60706d;
  --line:#dce8e5;
}
body{background:#f7faf9!important;color:#162321!important;font-size:14.5px!important;line-height:1.5!important}
.sidebar{background:#123b38!important;border-right-color:#24524e!important;box-shadow:8px 0 28px rgba(18,59,56,.12)!important}
.brand-icon,.mobile-header-mark,.auth-logo,.login-brand-icon,.public-brand-icon{background:#0f766e!important;background-image:none!important;color:#fff!important;box-shadow:none!important}
.brand-copy strong{font-size:15px!important}.brand-copy small{font-size:11px!important;color:#b9d2cf!important}
.side-nav a{font-size:13.5px!important;color:#d5e5e3!important}.side-nav .nav-section-label{font-size:10px!important;color:#91b5b1!important}
.side-nav a:hover{background:#1b4a46!important;color:#fff!important}.side-nav a.active{background:#fff!important;background-image:none!important;border-color:#fff!important;color:#115e59!important;box-shadow:none!important}.side-nav a.active .nav-icon{color:#0f766e!important}
.sidebar-user,.sidebar-developer{background:#194642!important;background-image:none!important;border-color:#2b5a56!important}.sidebar-developer .developer-icon{background:#245752!important;color:#fff!important}.sidebar-developer .developer-label{color:#a8c8c5!important}
.topbar{background:#fff!important;background-image:none!important;border-color:#dce8e5!important;backdrop-filter:none!important}
.dmw-header-brand{background:#0f766e!important;background-image:none!important;color:#fff!important;box-shadow:none!important}.dmw-header-brand strong{color:#fff!important}
.page-content,.auth-body-premium{background:#f7faf9!important;background-image:none!important}
.panel,.metric-card,.agent-card,.business-card,.template-card{background:#fff!important;background-image:none!important;border-color:#dce8e5!important;box-shadow:0 4px 15px rgba(16,65,60,.055)!important}
.metric-card:hover,.agent-card:hover,.business-card:hover{box-shadow:0 7px 20px rgba(16,65,60,.09)!important}
.btn.primary,.login-submit,.legal-primary-button,.send-button{background:#0f766e!important;background-image:none!important;border-color:#0f766e!important;color:#fff!important;box-shadow:none!important}.btn.primary:hover,.login-submit:hover,.legal-primary-button:hover,.send-button:hover{background:#115e59!important;background-image:none!important;border-color:#115e59!important;box-shadow:none!important}
input,select,textarea{font-size:14px!important;color:#162321!important;background:#fff!important;border-color:#cddedb!important}input,select{min-height:42px!important}textarea{line-height:1.55!important}input::placeholder,textarea::placeholder{color:#8a9a97!important}
input:focus,select:focus,textarea:focus,.login-input-wrap input:focus{border-color:#0f766e!important;box-shadow:0 0 0 3px rgba(15,118,110,.11)!important}
label{font-size:13px!important}.page-heading h1{font-size:27px!important}.page-heading p{font-size:13.5px!important}.panel-header h2{font-size:15px!important}th{font-size:11.5px!important}td{font-size:13px!important}
.avatar{background:#e7f5f3!important;background-image:none!important;color:#0f766e!important}.progress span,.campaign-table .progress span{background:#0f766e!important;background-image:none!important}
.metric-icon.green,.metric-icon.purple,.campaign-stat-icon.is-green,.page-settings .api-rd-stat-icon.green,.template-guide-number,.unread-badge,.conversation-item b,.conversation-item.active b{background:#e7f5f3!important;background-image:none!important;color:#0f766e!important;border-color:#bfe1dc!important;box-shadow:none!important}
.unread-badge,.conversation-item b,.conversation-item.active b{background:#0f766e!important;color:#fff!important}
.conversation-item:hover,.conversation-item.active,.reply-attachment-menu button:hover,.message-action-menu button:hover,.quick-reply-item-actions button:hover{background:#edf7f5!important;color:#0f766e!important}
.service-window.open,.notice,.consent-box,.template-requirements,.meta-status-badge.quality-green{background:#edf7f5!important;color:#115e59!important;border-color:#bfe1dc!important}
.notice i,.consent-box i,.api-ok,.campaign-eyebrow,.quick-reply-button,.quick-reply-item-main small,.message-quoted-copy strong,.reply-to-preview-copy strong,.voice-record-button,.message-location-icon,.message-attachment{color:#0f766e!important}
.message-quoted-accent,.message-audio-progress{background:#0f766e!important;accent-color:#0f766e!important}
.login-welcome{background:#123b38!important;background-image:none!important}.login-eyebrow,.login-feature-list i{color:#99f6e4!important}.dmw-login-brand>strong{color:#0f766e!important}.login-mobile-product{background:#edf7f5!important;border-color:#bfe1dc!important;color:#0f766e!important}
.legal-hero{background:#123b38!important;background-image:none!important}

/* Sidebar teal unification and larger navigation/account typography */
.sidebar{color:#fff!important}
.sidebar .brand-copy strong{font-size:17px!important;line-height:1.2!important;color:#fff!important}
.sidebar .brand-copy small{font-size:12px!important;line-height:1.35!important;color:#c7dedb!important}
.sidebar .nav-section-label{font-size:11px!important;line-height:1.3!important;letter-spacing:.09em!important;color:#a9cac6!important}
.sidebar .side-nav a{min-height:44px!important;font-size:14.5px!important;font-weight:650!important;line-height:1.3!important}
.sidebar .side-nav .nav-icon{font-size:15px!important}
.sidebar .side-nav a:not(.active){color:#e0eeec!important}
.sidebar .side-nav a:hover{background:#0f766e!important;color:#fff!important}
.sidebar .side-nav a.active{background:#0f766e!important;border-color:#2dd4bf!important;color:#fff!important;box-shadow:inset 3px 0 #5eead4!important}
.sidebar .side-nav a.active .nav-icon{color:#ccfbf1!important}
.sidebar .sidebar-user{background:#0f766e!important;border-color:#2d9289!important;color:#fff!important}
.sidebar .sidebar-user .avatar{background:#fff!important;background-image:none!important;color:#0f766e!important;border:1px solid #ccfbf1!important;box-shadow:none!important}
.sidebar .sidebar-user-copy strong{font-size:14px!important;line-height:1.3!important;color:#fff!important}
.sidebar .sidebar-user-copy small{font-size:11.5px!important;line-height:1.35!important;color:#ccfbf1!important}
.sidebar .online-dot{background:#5eead4!important;border-color:#0f766e!important;box-shadow:0 0 0 2px rgba(94,234,212,.14)!important}
.sidebar .sidebar-developer{background:#0f766e!important;border-color:#2d9289!important;color:#fff!important}
.sidebar .sidebar-developer .developer-card-row{background:#0f766e!important;background-image:none!important}
.sidebar .sidebar-developer .developer-card-top{border-bottom-color:#2d9289!important}
.sidebar .sidebar-developer .developer-icon{background:#115e59!important;color:#fff!important;border-color:#2d9289!important}
.sidebar .sidebar-developer .developer-label{font-size:11.5px!important;line-height:1.3!important;color:#ccfbf1!important}
.sidebar .sidebar-developer .developer-value,.sidebar .sidebar-developer .developer-phone{font-size:14px!important;line-height:1.35!important;color:#fff!important;font-weight:800!important;letter-spacing:.02em!important}

/* API Settings — clear card hierarchy, readable fields, stable responsive grid */
.page-settings{max-width:1480px!important;margin:0 auto!important;padding-bottom:34px!important}
.page-settings .api-rd-page-heading{margin:4px 0 24px!important;padding:0!important}
.page-settings .api-rd-page-heading h1{font-size:29px!important;line-height:1.15!important;color:#162321!important;letter-spacing:-.02em!important}
.page-settings .api-rd-page-heading p{font-size:14px!important;color:#60706d!important;margin-top:7px!important}
.page-settings .api-rd-layout{display:grid!important;grid-template-columns:minmax(0,1.42fr) minmax(330px,.78fr)!important;align-items:start!important;gap:20px!important;margin-bottom:20px!important}
.page-settings .api-rd-card{background:#fff!important;border:1px solid #d8e7e4!important;border-radius:14px!important;box-shadow:0 5px 18px rgba(15,70,65,.06)!important;overflow:hidden!important}
.page-settings .api-rd-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;padding:20px 21px 18px!important;border-bottom:1px solid #e5efed!important;background:#fff!important}
.page-settings .api-rd-card-title{display:flex!important;align-items:flex-start!important;gap:13px!important;min-width:0!important}
.page-settings .api-rd-title-icon{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:10px!important;background:#e7f5f3!important;color:#0f766e!important;border:1px solid #bfe1dc!important;font-size:17px!important}
.page-settings .api-rd-eyebrow{display:block!important;margin:0 0 3px!important;color:#0f766e!important;font-size:11px!important;line-height:1.25!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.page-settings .api-rd-card-title h2{margin:0!important;color:#162321!important;font-size:18px!important;line-height:1.25!important;font-weight:800!important}
.page-settings .api-rd-card-title p{margin:5px 0 0!important;color:#60706d!important;font-size:12.5px!important;line-height:1.5!important}
.page-settings .api-rd-state{display:inline-flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important;min-height:32px!important;padding:6px 10px!important;border-radius:999px!important;font-size:12px!important;font-weight:750!important}
.page-settings .api-rd-state.is-ready{background:#e7f5f3!important;color:#0f766e!important;border:1px solid #bfe1dc!important}.page-settings .api-rd-state.is-pending{background:#fff7ed!important;color:#b45309!important;border:1px solid #fed7aa!important}
.page-settings .api-rd-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;padding:21px!important}
.page-settings .api-rd-span-2{grid-column:1 / -1!important}
.page-settings .api-rd-field{display:grid!important;grid-template-rows:auto auto auto!important;gap:7px!important;min-width:0!important;margin:0!important}
.page-settings .api-rd-label{color:#263b38!important;font-size:13px!important;line-height:1.35!important;font-weight:750!important}
.page-settings .api-rd-field input{width:100%!important;height:45px!important;min-height:45px!important;padding:10px 12px!important;border:1px solid #cbdedb!important;border-radius:9px!important;background:#fff!important;color:#162321!important;font-size:14px!important;line-height:1.35!important}
.page-settings .api-rd-field input:focus{border-color:#0f766e!important;box-shadow:0 0 0 3px rgba(15,118,110,.12)!important}
.page-settings .api-rd-field small{display:block!important;min-height:18px!important;color:#70807d!important;font-size:11.5px!important;line-height:1.45!important}
.page-settings .api-rd-note,.page-settings .api-rd-security{display:flex!important;align-items:flex-start!important;gap:11px!important;padding:13px 14px!important;border:1px solid #bfe1dc!important;border-radius:10px!important;background:#edf7f5!important;color:#24524e!important}
.page-settings .api-rd-note-icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:50%!important;background:#0f766e!important;color:#fff!important}
.page-settings .api-rd-note strong{display:block!important;font-size:13px!important;color:#115e59!important}.page-settings .api-rd-note p{margin:3px 0 0!important;font-size:12px!important;line-height:1.45!important}.page-settings .api-rd-security{font-size:12px!important;line-height:1.5!important}.page-settings .api-rd-security>i{color:#0f766e!important;font-size:17px!important;margin-top:1px!important}
.page-settings .api-rd-actions,.page-settings .api-rd-platform-save{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important}.page-settings .api-rd-actions .btn,.page-settings .api-rd-platform-save .btn{min-height:43px!important;padding:10px 15px!important;border-radius:9px!important;font-size:13px!important;font-weight:750!important}
.page-settings .api-rd-overview-card{padding:18px!important}.page-settings .api-rd-overview-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.page-settings .api-rd-stat{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;min-height:73px!important;padding:11px!important;border:1px solid #dce9e7!important;border-radius:10px!important;background:#fbfefd!important;box-shadow:none!important}.page-settings .api-rd-stat-wide{grid-column:1 / -1!important}.page-settings .api-rd-stat-icon,.page-settings .api-rd-stat-icon.blue,.page-settings .api-rd-stat-icon.green,.page-settings .api-rd-stat-icon.violet{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:9px!important;background:#e7f5f3!important;color:#0f766e!important;border:1px solid #bfe1dc!important;font-size:14px!important}.page-settings .api-rd-stat small{display:block!important;color:#70807d!important;font-size:11px!important;line-height:1.3!important}.page-settings .api-rd-stat strong{display:block!important;margin-top:2px!important;color:#162321!important;font-size:12.5px!important;line-height:1.35!important;overflow-wrap:anywhere!important}.page-settings .api-rd-count{font-size:19px!important;color:#0f766e!important}.page-settings .api-rd-quality-note{display:flex!important;gap:8px!important;align-items:flex-start!important;margin-top:13px!important;padding:11px!important;border:1px solid #dce9e7!important;border-radius:9px!important;background:#fbfefd!important;color:#60706d!important;font-size:11.5px!important}.page-settings .api-rd-quality-note i{color:#0f766e!important}
.page-settings .api-rd-platform-card{margin:0 0 20px!important}.page-settings .api-rd-platform-status{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:13px!important;border:1px solid #dce9e7!important;border-radius:10px!important;background:#fbfefd!important}.page-settings .api-rd-platform-status>div{display:grid!important;gap:4px!important}.page-settings .api-rd-platform-status span{font-size:11px!important;color:#70807d!important}.page-settings .api-rd-platform-status strong{font-size:12.5px!important}.page-settings .api-rd-platform-status .is-good{color:#0f766e!important}.page-settings .api-rd-platform-status .is-bad{color:#b45309!important}
@media(max-width:1100px){.page-settings .api-rd-layout{grid-template-columns:1fr!important}.page-settings .api-rd-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.page-settings .api-rd-stat{grid-template-columns:35px minmax(0,1fr)!important}.page-settings .api-rd-stat-wide{grid-column:auto!important}}
@media(max-width:760px){.page-settings .api-rd-page-heading h1{font-size:24px!important}.page-settings .api-rd-page-heading p{font-size:13px!important}.page-settings .api-rd-card-head{padding:16px!important;flex-wrap:wrap!important}.page-settings .api-rd-card-title h2{font-size:16px!important}.page-settings .api-rd-form{grid-template-columns:1fr!important;padding:16px!important;gap:15px!important}.page-settings .api-rd-span-2{grid-column:auto!important}.page-settings .api-rd-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.page-settings .api-rd-platform-status{grid-template-columns:1fr!important}}
@media(max-width:430px){.page-settings .api-rd-page-heading h1{font-size:22px!important}.page-settings .api-rd-card-head{gap:12px!important;padding:14px!important}.page-settings .api-rd-title-icon{width:38px!important;height:38px!important;flex-basis:38px!important}.page-settings .api-rd-card-title p{font-size:12px!important}.page-settings .api-rd-form{padding:14px!important}.page-settings .api-rd-overview-card{padding:14px!important}.page-settings .api-rd-overview-grid{grid-template-columns:1fr!important}.page-settings .api-rd-stat-wide{grid-column:auto!important}.page-settings .api-rd-actions,.page-settings .api-rd-platform-save{display:grid!important;grid-template-columns:1fr!important}.page-settings .api-rd-actions .btn,.page-settings .api-rd-platform-save .btn{width:100%!important}}