/* =========================================================
   SBIG CONNECT V5.0 — PORTAL REDESIGN
   UI-only portal layer. Does not replace chat.js or style.css.
   ========================================================= */

:root{
  --portal-bg:#f4f7f9;
  --portal-card:#ffffff;
  --portal-text:#172433;
  --portal-muted:#6f7e8b;
  --portal-line:#e5ebef;
  --portal-teal:#0b7f8d;
  --portal-teal-2:#129aa4;
  --portal-soft:#eaf6f7;
  --portal-navy:#243746;
  --portal-gold:#b48b2b;
  --portal-shadow:0 10px 35px rgba(31,47,61,.07);
}

body.portal-body{
  min-height:100%;
  margin:0;
  background:var(--portal-bg);
  color:var(--portal-text);
  overflow:auto;
}

.portal-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
}

.portal-sidebar{
  background:#fff;
  border-right:1px solid var(--portal-line);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:22px;
  position:sticky;
  top:0;
  height:100vh;
}

.portal-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 10px;
}
.portal-brand img{
  width:58px;
  height:42px;
  object-fit:contain;
}
.portal-brand-copy strong{
  display:block;
  font-size:14px;
  letter-spacing:.06em;
  color:#1f303c;
}
.portal-brand-copy span{
  display:block;
  margin-top:1px;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--portal-teal);
  font-weight:800;
}

.portal-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.portal-nav-label{
  padding:7px 12px 5px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  color:#99a4ac;
  text-transform:uppercase;
}
.portal-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:10px;
  color:#52636f;
  font-size:13px;
  font-weight:750;
}
.portal-nav a:hover{
  background:#f3f7f8;
  color:var(--portal-teal);
}
.portal-nav a.active{
  background:var(--portal-soft);
  color:var(--portal-teal);
}
.portal-nav .nav-icon{
  width:22px;
  text-align:center;
  font-size:15px;
}

.portal-sidebar-bottom{
  margin-top:auto;
  padding:12px;
  border:1px solid var(--portal-line);
  border-radius:12px;
  background:#fafcfc;
}
.portal-sidebar-bottom strong{
  display:block;
  font-size:12px;
}
.portal-sidebar-bottom span{
  display:block;
  margin-top:2px;
  color:var(--portal-muted);
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-sidebar-bottom a{
  display:inline-block;
  margin-top:9px;
  font-size:11px;
  font-weight:800;
}

.portal-main{
  min-width:0;
}
.portal-topbar{
  min-height:70px;
  padding:12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border-bottom:1px solid var(--portal-line);
  position:sticky;
  top:0;
  z-index:40;
}
.portal-page-title strong{
  display:block;
  font-size:15px;
}
.portal-page-title span{
  display:block;
  margin-top:2px;
  color:var(--portal-muted);
  font-size:11px;
}
.portal-account{
  display:flex;
  align-items:center;
  gap:9px;
}
.portal-account-badge{
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:19px;
  background:var(--portal-soft);
  color:var(--portal-teal);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
}
.portal-account-name strong{
  display:block;
  font-size:12px;
}
.portal-account-name span{
  display:block;
  color:var(--portal-muted);
  font-size:10px;
}
.portal-mobile-menu{
  display:none;
  border:0;
  background:#edf5f6;
  color:var(--portal-teal);
  width:38px;
  height:38px;
  border-radius:10px;
  padding:0;
}

.portal-content{
  width:min(1280px,100%);
  margin:0 auto;
  padding:28px;
}

.portal-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}
.portal-hero h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.02em;
}
.portal-hero p{
  margin:7px 0 0;
  max-width:720px;
  color:var(--portal-muted);
  font-size:13px;
  line-height:1.55;
}
.portal-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  border-radius:10px;
  padding:0 14px;
  background:var(--portal-teal);
  color:#fff;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}
.portal-primary:hover{background:#086d79;color:#fff}
.portal-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  border-radius:10px;
  padding:0 14px;
  background:#fff;
  color:#4f626e;
  border:1px solid var(--portal-line);
  font-size:12px;
  font-weight:800;
}

.portal-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}
.portal-kpi{
  min-width:0;
  padding:18px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--portal-line);
  box-shadow:0 2px 12px rgba(31,47,61,.025);
}
.portal-kpi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.portal-kpi-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--portal-soft);
  color:var(--portal-teal);
  font-size:16px;
}
.portal-kpi strong{
  display:block;
  margin-top:12px;
  font-size:25px;
  line-height:1;
}
.portal-kpi span{
  display:block;
  margin-top:5px;
  color:var(--portal-muted);
  font-size:11px;
}

.portal-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);
  gap:18px;
}
.portal-card{
  background:#fff;
  border:1px solid var(--portal-line);
  border-radius:15px;
  box-shadow:0 2px 12px rgba(31,47,61,.025);
  overflow:hidden;
}
.portal-card-head{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--portal-line);
}
.portal-card-head h2,
.portal-card-head h3{
  margin:0;
  font-size:14px;
}
.portal-card-head a{
  font-size:11px;
  font-weight:850;
}
.portal-card-body{
  padding:15px;
}

.portal-conversation-list{
  display:flex;
  flex-direction:column;
}
.portal-conversation{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #f0f3f5;
  color:inherit;
}
.portal-conversation:last-child{border-bottom:0}
.portal-conversation:hover{background:#fbfdfd}
.portal-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e7f3f4;
  color:var(--portal-teal);
  font-size:11px;
  font-weight:900;
}
.portal-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  border-radius:50%;
}
.portal-conversation-copy{
  min-width:0;
}
.portal-conversation-copy strong,
.portal-conversation-copy span,
.portal-conversation-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-conversation-copy strong{font-size:12px}
.portal-conversation-copy span{
  margin-top:2px;
  color:var(--portal-muted);
  font-size:11px;
}
.portal-conversation-copy small{
  margin-top:3px;
  color:#9aa4ab;
  font-size:9px;
}
.portal-conversation-meta{
  text-align:right;
}
.portal-conversation-meta time{
  display:block;
  color:#9aa4ab;
  font-size:9px;
}
.portal-unread{
  display:inline-flex;
  min-width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  margin-top:5px;
  padding:0 6px;
  border-radius:10px;
  background:var(--portal-teal);
  color:#fff;
  font-size:9px;
  font-weight:900;
}

.portal-company-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.portal-company{
  min-height:150px;
  padding:17px;
  border:1px solid var(--portal-line);
  border-radius:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.portal-company-logo{
  width:88px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:14px;
}
.portal-company-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.portal-company-initial{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--portal-soft);
  color:var(--portal-teal);
  font-weight:900;
}
.portal-company h3{
  margin:0;
  font-size:13px;
}
.portal-company p{
  margin:5px 0 12px;
  color:var(--portal-muted);
  font-size:10px;
  line-height:1.45;
}
.portal-company a{
  margin-top:auto;
  font-size:10px;
  font-weight:850;
}

.portal-file-list{
  display:flex;
  flex-direction:column;
}
.portal-file{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:11px 13px;
  border-bottom:1px solid #f0f3f5;
}
.portal-file:last-child{border-bottom:0}
.portal-file-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#eef5f6;
  color:var(--portal-teal);
  font-size:11px;
  font-weight:900;
}
.portal-file-copy{
  min-width:0;
}
.portal-file-copy strong,
.portal-file-copy span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-file-copy strong{font-size:11px}
.portal-file-copy span{
  margin-top:2px;
  font-size:9px;
  color:var(--portal-muted);
}
.portal-file-actions{
  display:flex;
  gap:5px;
}
.portal-file-actions a{
  padding:6px 8px;
  border-radius:7px;
  background:#f1f5f6;
  color:#566a75;
  font-size:9px;
  font-weight:850;
}

.portal-empty{
  padding:28px;
  text-align:center;
  color:var(--portal-muted);
  font-size:12px;
}

.portal-form-card{
  max-width:760px;
}
.portal-form{
  padding:18px;
}
.portal-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.portal-form label{
  margin:0;
}
.portal-form label span{
  display:block;
  margin-bottom:6px;
  font-size:10px;
  font-weight:850;
  color:#596c78;
}
.portal-form input,
.portal-form select{
  width:100%;
  min-height:40px;
  border:1px solid #dce4e8;
  border-radius:9px;
  padding:8px 10px;
}
.portal-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

.portal-notice{
  margin-bottom:14px;
  padding:11px 13px;
  border-radius:10px;
  font-size:11px;
  border:1px solid #bfe4c9;
  background:#edf9f1;
  color:#39734a;
}
.portal-error{
  border-color:#f0c9c9;
  background:#fff2f2;
  color:#9f4848;
}

/* Login */
body.portal-login{
  min-height:100vh;
  margin:0;
  display:grid;
  grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr);
  background:#fff;
}
.login-panel{
  padding:46px clamp(32px,6vw,76px);
  display:flex;
  flex-direction:column;
}
.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.login-brand img{
  width:72px;
  height:48px;
  object-fit:contain;
}
.login-brand strong{
  display:block;
  font-size:14px;
  letter-spacing:.06em;
}
.login-brand span{
  display:block;
  font-size:10px;
  color:var(--portal-teal);
  font-weight:900;
  letter-spacing:.12em;
}
.login-box{
  width:min(410px,100%);
  margin:auto 0;
}
.login-box h1{
  margin:0;
  font-size:31px;
  letter-spacing:-.025em;
}
.login-box>p{
  margin:8px 0 25px;
  color:var(--portal-muted);
  font-size:12px;
  line-height:1.55;
}
.login-box label{
  display:block;
  margin:12px 0 6px;
  font-size:10px;
  color:#596c78;
  font-weight:850;
}
.login-box input{
  width:100%;
  min-height:43px;
  padding:10px 12px;
  border:1px solid #dce4e8;
  border-radius:10px;
}
.login-box button{
  width:100%;
  min-height:44px;
  margin-top:18px;
  border-radius:10px;
  background:var(--portal-teal);
}
.login-side{
  margin:16px;
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(8,94,105,.94),rgba(12,127,141,.86)),
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.25),transparent 28%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px;
}
.login-side-inner{
  max-width:600px;
}
.login-side-badge{
  display:inline-flex;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.login-side h2{
  margin:18px 0 10px;
  max-width:550px;
  font-size:36px;
  line-height:1.08;
  letter-spacing:-.03em;
}
.login-side p{
  max-width:520px;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
.login-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:28px;
}
.login-feature{
  padding:13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  background:rgba(255,255,255,.07);
  font-size:11px;
  font-weight:700;
}

/* Admin table */
.portal-table-wrap{
  overflow:auto;
}
.portal-table{
  width:100%;
  border-collapse:collapse;
}
.portal-table th,
.portal-table td{
  padding:11px 12px;
  border-bottom:1px solid #edf1f3;
  text-align:left;
  font-size:10px;
  white-space:nowrap;
}
.portal-table th{
  color:#7d8b94;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.portal-table td strong{
  font-size:11px;
}
.portal-status{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  background:#edf8f1;
  color:#438156;
  font-size:9px;
  font-weight:850;
}

/* Make existing Chat feel integrated into portal without touching JS */
body.app .topbar{
  height:64px;
  padding:0 18px;
  box-shadow:none;
}
body.app .topbar .brand-wrap:after{
  content:"Communication";
  margin-left:8px;
  padding-left:12px;
  border-left:1px solid #dfe7ea;
  color:#788791;
  font-size:10px;
  font-weight:700;
}
body.app .topbar .portal-chat-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:16px;
}
body.app .topbar .portal-chat-nav a{
  padding:7px 9px;
  border-radius:8px;
  color:#697984;
  font-size:10px;
  font-weight:800;
}
body.app .topbar .portal-chat-nav a:hover,
body.app .topbar .portal-chat-nav a.active{
  background:#edf6f7;
  color:#087f8c;
}
body.app .chat-layout{
  height:calc(100vh - 64px);
}

/* responsive */
@media(max-width:1050px){
  .portal-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .portal-shell{display:block}
  .portal-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:260px;
    z-index:100;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:18px 0 50px rgba(20,35,45,.16);
  }
  body.portal-menu-open .portal-sidebar{transform:translateX(0)}
  .portal-mobile-menu{display:grid;place-items:center}
  .portal-content{padding:18px 14px}
  .portal-topbar{padding:10px 14px}
  .portal-grid{grid-template-columns:1fr}
  .portal-company-grid{grid-template-columns:1fr 1fr}
  body.portal-login{grid-template-columns:1fr}
  .login-side{display:none}
  .login-panel{min-height:100vh;padding:30px 24px}
  body.app .topbar .portal-chat-nav{display:none}
}
@media(max-width:560px){
  .portal-hero{flex-direction:column}
  .portal-hero h1{font-size:23px}
  .portal-kpis{grid-template-columns:1fr 1fr;gap:9px}
  .portal-kpi{padding:14px}
  .portal-kpi strong{font-size:22px}
  .portal-company-grid{grid-template-columns:1fr}
  .portal-form-grid{grid-template-columns:1fr}
  .portal-account-name{display:none}
  .portal-content{padding:14px 10px}
  .portal-topbar{min-height:60px}
  body.app .topbar .account-name{display:none}
}


/* =========================================================
   SBIG CONNECT V6.0 — PORTAL OPERATIONS SUITE
   Portal/business UI layer. No messaging API changes.
   ========================================================= */

.portal-nav-badge{
  margin-left:auto;
  min-width:19px;
  height:19px;
  padding:0 6px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0b7f8d;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.portal-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.portal-filter{
  min-height:37px;
  border:1px solid var(--portal-line);
  border-radius:9px;
  padding:0 10px;
  background:#fff;
  color:#536670;
  font-size:11px;
  font-weight:750;
}
.portal-filter.active{
  border-color:#b9dfe3;
  background:var(--portal-soft);
  color:var(--portal-teal);
}
.portal-search-box{
  flex:1;
  min-width:220px;
  position:relative;
}
.portal-search-box input{
  width:100%;
  min-height:39px;
  padding:8px 12px 8px 34px;
  border:1px solid var(--portal-line);
  border-radius:10px;
  background:#fff;
}
.portal-search-box:before{
  content:"⌕";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#89979f;
}
.portal-section-title{
  margin:24px 0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.portal-section-title h2{
  margin:0;
  font-size:17px;
}
.portal-section-title span{
  color:var(--portal-muted);
  font-size:10px;
}
.portal-company-stats{
  width:100%;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:3px 0 12px;
}
.portal-company-stat{
  padding:5px 7px;
  border-radius:7px;
  background:#f3f7f8;
  color:#667982;
  font-size:9px;
  font-weight:800;
}
.portal-company-actions{
  width:100%;
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.portal-company-actions .portal-primary,
.portal-company-actions .portal-secondary{
  min-height:34px;
  padding:0 10px;
  font-size:9px;
}
.portal-alert-list{
  display:flex;
  flex-direction:column;
}
.portal-alert{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #edf1f3;
}
.portal-alert:last-child{border-bottom:0}
.portal-alert.unread{background:#fbfefe}
.portal-alert-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e9f5f6;
  color:#087f8c;
  font-weight:900;
}
.portal-alert-main{
  min-width:0;
}
.portal-alert-main strong,
.portal-alert-main span,
.portal-alert-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-alert-main strong{font-size:11px}
.portal-alert-main span{margin-top:2px;color:#5d7079;font-size:10px}
.portal-alert-main small{margin-top:3px;color:#96a1a7;font-size:9px}
.portal-alert-action{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
}
.portal-alert-action a{
  padding:6px 8px;
  border-radius:7px;
  background:#edf6f7;
  color:#087f8c;
  font-size:9px;
  font-weight:850;
}
.portal-inbox-row{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 150px 110px;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #edf1f3;
  color:inherit;
}
.portal-inbox-row:hover{background:#fbfdfd}
.portal-inbox-customer strong,
.portal-inbox-customer span,
.portal-inbox-customer small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-inbox-customer strong{font-size:11px}
.portal-inbox-customer span{margin-top:2px;font-size:10px;color:#667982}
.portal-inbox-customer small{margin-top:3px;font-size:9px;color:#98a3aa}
.portal-inbox-company{
  font-size:10px;
  color:#5c7079;
  font-weight:750;
}
.portal-inbox-state{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.portal-inbox-state time{font-size:9px;color:#98a3aa}
.portal-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:850;
}
.portal-pill.open{background:#eaf7ef;color:#3d7b50}
.portal-pill.unread{background:#e7f4f6;color:#087f8c}
.portal-pill.inactive{background:#f3f4f5;color:#7b858b}
.portal-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.portal-action-btn{
  border:0;
  border-radius:7px;
  padding:6px 8px;
  background:#f0f4f5;
  color:#52666f;
  text-decoration:none;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}
.portal-action-btn.primary{background:#e9f5f6;color:#087f8c}
.portal-action-btn.danger{background:#fff0f0;color:#a34848}
.portal-admin-form{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:8px;
  padding:12px;
  border-bottom:1px solid var(--portal-line);
}
.portal-admin-form input,
.portal-admin-form select{
  min-width:0;
  min-height:38px;
  border:1px solid #dce4e8;
  border-radius:8px;
  padding:7px 9px;
}
.portal-admin-form button{
  border:0;
  border-radius:8px;
  padding:0 12px;
  background:#0b7f8d;
  color:#fff;
  font-size:10px;
  font-weight:850;
}
.portal-chat-filterbar{
  display:flex;
  gap:6px;
  padding:7px 10px;
  border-bottom:1px solid #e8edef;
  background:#fff;
  overflow:auto;
}
.portal-chat-filterbar a{
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:999px;
  background:#f0f4f5;
  color:#61747e;
  font-size:9px;
  font-weight:850;
}
.portal-chat-filterbar a.active{
  background:#e3f3f5;
  color:#087f8c;
}
.portal-company-context{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:9px;
  background:#eef7f8;
  color:#087f8c;
  font-size:10px;
  font-weight:800;
}

@media(max-width:900px){
  .portal-inbox-row{
    grid-template-columns:42px minmax(0,1fr) auto;
  }
  .portal-inbox-company{display:none}
  .portal-admin-form{grid-template-columns:1fr 1fr}
  .portal-admin-form button{min-height:38px}
}
@media(max-width:620px){
  .portal-inbox-row{grid-template-columns:38px minmax(0,1fr)}
  .portal-inbox-state{
    grid-column:2;
    align-items:flex-start;
    flex-direction:row;
  }
  .portal-admin-form{grid-template-columns:1fr}
}

/* SBIG Connect V7.0 — Customer Experience Suite */
.portal-detail-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:18px;padding:22px;border:1px solid var(--portal-line);border-radius:16px;background:#fff}
.portal-detail-company{display:flex;align-items:center;gap:16px}.portal-detail-logo{width:100px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f7fafb;border:1px solid #edf1f3;padding:8px}.portal-detail-logo img{max-width:100%;max-height:100%;object-fit:contain}.portal-detail-logo span{font-weight:900;color:var(--portal-teal)}
.portal-detail-copy h1{margin:0;font-size:23px}.portal-detail-copy p{margin:6px 0 0;max-width:700px;color:var(--portal-muted);font-size:11px;line-height:1.55}.portal-detail-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.portal-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.portal-summary-item{padding:12px 14px;border:1px solid var(--portal-line);border-radius:11px;background:#fff}.portal-summary-item span{display:block;color:#7a8991;font-size:9px}.portal-summary-item strong{display:block;margin-top:4px;font-size:17px}
.portal-breadcrumb{display:flex;align-items:center;gap:7px;margin-bottom:12px;color:#8c989f;font-size:9px}.portal-breadcrumb a{color:#627680;font-weight:800}
.portal-activity-list{display:flex;flex-direction:column}.portal-activity{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 14px;border-bottom:1px solid #edf1f3}.portal-activity:last-child{border-bottom:0}.portal-activity-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eaf6f7;color:#087f8c;font-size:12px;font-weight:900}.portal-activity-main strong,.portal-activity-main span,.portal-activity-main small{display:block}.portal-activity-main strong{font-size:11px}.portal-activity-main span{margin-top:2px;color:#60727b;font-size:10px;line-height:1.4}.portal-activity-main small{margin-top:4px;color:#98a3aa;font-size:9px}.portal-activity time{color:#98a3aa;font-size:9px;white-space:nowrap}
.portal-customer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.portal-customer-card{padding:15px;border:1px solid var(--portal-line);border-radius:13px;background:#fff}.portal-customer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.portal-customer-head strong{display:block;font-size:12px}.portal-customer-head span{display:block;margin-top:2px;color:var(--portal-muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-customer-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.portal-customer-metric{padding:8px 6px;border-radius:8px;background:#f5f8f9;text-align:center}.portal-customer-metric strong{display:block;font-size:14px}.portal-customer-metric span{display:block;margin-top:2px;font-size:8px;color:#7c8990}.portal-customer-card .portal-primary{width:100%;min-height:34px;font-size:9px}
@media(max-width:1000px){.portal-customer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.portal-detail-hero{grid-template-columns:1fr}.portal-detail-actions{justify-content:flex-start}.portal-summary-strip{grid-template-columns:1fr 1fr}.portal-customer-grid{grid-template-columns:1fr}}

/* V8 PORTAL SUITE */
.portal-quicknav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.portal-quicknav a,.portal-report-card{padding:14px;border:1px solid var(--portal-line);border-radius:12px;background:#fff;color:#51646e;font-size:10px;font-weight:850}
.portal-search-page{max-width:980px;margin:auto}.portal-search-box-large{display:flex;gap:8px;padding:18px;background:#fff;border:1px solid var(--portal-line);border-radius:14px;margin-bottom:16px}.portal-search-box-large input{flex:1;min-height:44px;border:1px solid #dce4e8;border-radius:10px;padding:9px 12px}
.portal-result{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid #edf1f3}.portal-result:last-child{border-bottom:0}.portal-result-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eaf6f7;color:#087f8c;font-size:10px;font-weight:900}.portal-result strong,.portal-result span,.portal-result small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-result strong{font-size:11px}.portal-result span{font-size:10px;color:#61747d}.portal-result small{font-size:9px;color:#98a3aa}
.portal-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.portal-contact-card{padding:15px;border:1px solid var(--portal-line);border-radius:13px;background:#fff}.portal-contact-card h3{margin:10px 0 3px;font-size:12px}.portal-contact-card p{margin:0 0 10px;color:#78868e;font-size:9px}.portal-contact-card a{font-size:9px;font-weight:850}
.portal-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.portal-report-card span{display:block;font-size:9px;color:#7a8991}.portal-report-card strong{display:block;margin-top:5px;font-size:23px}
.portal-bar-list{padding:15px}.portal-bar-row{display:grid;grid-template-columns:150px 1fr 40px;gap:8px;align-items:center;margin-bottom:10px}.portal-bar-row span,.portal-bar-row b{font-size:9px}.portal-bar{height:8px;background:#edf1f3;border-radius:999px;overflow:hidden}.portal-bar i{display:block;height:100%;background:#0b7f8d}
@media(max-width:900px){.portal-contact-grid{grid-template-columns:repeat(2,1fr)}.portal-report-grid,.portal-quicknav{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.portal-contact-grid{grid-template-columns:1fr}.portal-search-box-large{flex-direction:column}.portal-result{grid-template-columns:34px 1fr}.portal-result>a{grid-column:2}.portal-bar-row{grid-template-columns:95px 1fr 35px}}

/* =========================================================
   SBIG CONNECT V9.0 — PORTAL ORGANIZATION SUITE
   Portal/business UI only. No messaging/API/database changes.
   ========================================================= */

.portal-directory-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) 190px 160px auto;
  gap:8px;
  margin-bottom:14px;
}
.portal-directory-toolbar input,
.portal-directory-toolbar select{
  min-height:39px;
  border:1px solid var(--portal-line);
  border-radius:9px;
  padding:8px 10px;
  background:#fff;
  color:#536670;
  font-size:10px;
}
.portal-directory-toolbar button{
  border:0;
  border-radius:9px;
  padding:0 13px;
  background:#0b7f8d;
  color:#fff;
  font-size:10px;
  font-weight:850;
}
.portal-conversation-directory{
  display:flex;
  flex-direction:column;
}
.portal-conversation-dir-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 170px 95px 95px;
  gap:11px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #edf1f3;
  color:inherit;
}
.portal-conversation-dir-row:last-child{border-bottom:0}
.portal-conversation-dir-row:hover{background:#fbfdfd}
.portal-conversation-dir-main{
  min-width:0;
}
.portal-conversation-dir-main strong,
.portal-conversation-dir-main span,
.portal-conversation-dir-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-conversation-dir-main strong{font-size:11px}
.portal-conversation-dir-main span{
  margin-top:2px;
  color:#62757e;
  font-size:10px;
}
.portal-conversation-dir-main small{
  margin-top:3px;
  color:#98a3aa;
  font-size:9px;
}
.portal-conversation-dir-company{
  font-size:9px;
  color:#5c7079;
  font-weight:800;
}
.portal-conversation-dir-time{
  font-size:9px;
  color:#98a3aa;
  text-align:right;
}
.portal-workspace-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}
.portal-workspace-card{
  padding:16px;
  border:1px solid var(--portal-line);
  border-radius:14px;
  background:#fff;
  min-width:0;
}
.portal-workspace-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.portal-workspace-card h3{
  margin:0;
  font-size:12px;
}
.portal-workspace-card>p{
  margin:5px 0 12px;
  color:#7a8991;
  font-size:9px;
  line-height:1.45;
}
.portal-workspace-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:12px 0;
}
.portal-workspace-metric{
  padding:8px 5px;
  border-radius:8px;
  background:#f5f8f9;
  text-align:center;
}
.portal-workspace-metric strong{
  display:block;
  font-size:14px;
}
.portal-workspace-metric span{
  display:block;
  margin-top:2px;
  color:#89969d;
  font-size:8px;
}
.portal-workspace-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.portal-help-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.portal-help-card{
  padding:16px;
  border:1px solid var(--portal-line);
  border-radius:13px;
  background:#fff;
}
.portal-help-card-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#eaf6f7;
  color:#087f8c;
  font-weight:900;
}
.portal-help-card h3{
  margin:11px 0 5px;
  font-size:12px;
}
.portal-help-card p{
  margin:0;
  color:#718189;
  font-size:9px;
  line-height:1.5;
}
.portal-help-card a{
  display:inline-block;
  margin-top:10px;
  font-size:9px;
  font-weight:850;
}
.portal-help-steps{
  counter-reset:step;
  display:flex;
  flex-direction:column;
}
.portal-help-step{
  counter-increment:step;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid #edf1f3;
}
.portal-help-step:last-child{border-bottom:0}
.portal-help-step:before{
  content:counter(step);
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf6f7;
  color:#087f8c;
  font-size:10px;
  font-weight:900;
}
.portal-help-step strong{display:block;font-size:10px}
.portal-help-step span{
  display:block;
  margin-top:3px;
  color:#77858d;
  font-size:9px;
  line-height:1.45;
}
.portal-file-toolbar{
  display:grid;
  grid-template-columns:minmax(230px,1fr) 190px 160px auto;
  gap:8px;
  padding:12px;
  border-bottom:1px solid #edf1f3;
}
.portal-file-toolbar input,
.portal-file-toolbar select{
  min-height:38px;
  border:1px solid #dce4e8;
  border-radius:8px;
  padding:7px 9px;
  font-size:10px;
}
.portal-company-contact-list{
  display:flex;
  flex-direction:column;
}
.portal-company-contact{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid #edf1f3;
}
.portal-company-contact:last-child{border-bottom:0}
.portal-company-contact strong,
.portal-company-contact span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-company-contact strong{font-size:10px}
.portal-company-contact span{
  margin-top:2px;
  color:#7a8991;
  font-size:9px;
}
.portal-company-contact a{
  font-size:9px;
  font-weight:850;
}
.portal-nav-section-count{
  margin-left:auto;
  color:#90a0a6;
  font-size:8px;
  font-weight:850;
}

@media(max-width:1000px){
  .portal-workspace-grid,.portal-help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-conversation-dir-row{grid-template-columns:42px minmax(0,1fr) 120px 80px}
  .portal-conversation-dir-time{display:none}
}
@media(max-width:760px){
  .portal-directory-toolbar,.portal-file-toolbar{grid-template-columns:1fr 1fr}
  .portal-conversation-dir-row{grid-template-columns:38px minmax(0,1fr) auto}
  .portal-conversation-dir-company{display:none}
  .portal-workspace-grid,.portal-help-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .portal-directory-toolbar,.portal-file-toolbar{grid-template-columns:1fr}
}

/* =========================================================
   SBIG CONNECT V10.0 — COMMUNICATION WORKFLOW PORTAL
   Portal UX release. No DB schema or messaging API changes.
   ========================================================= */

.portal-start-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.portal-start-card{
  padding:18px;
  border:1px solid var(--portal-line);
  border-radius:14px;
  background:#fff;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.portal-start-card:hover{
  transform:translateY(-1px);
  border-color:#cde4e7;
  box-shadow:0 8px 25px rgba(25,55,65,.06);
}
.portal-start-card-top{
  display:flex;
  align-items:center;
  gap:12px;
}
.portal-start-logo{
  width:74px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f6fafb;
  border:1px solid #edf1f3;
  overflow:hidden;
}
.portal-start-logo img{max-width:100%;max-height:100%;object-fit:contain;padding:6px}
.portal-start-logo span{font-size:11px;font-weight:900;color:#087f8c}
.portal-start-card h3{margin:0;font-size:13px}
.portal-start-card p{margin:4px 0 0;color:#77868e;font-size:9px}
.portal-topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}
.portal-topic-link{
  padding:9px 10px;
  border:1px solid #e5ecef;
  border-radius:9px;
  background:#fafcfc;
  color:#536872;
  font-size:9px;
  font-weight:820;
}
.portal-topic-link:hover{
  background:#edf7f8;
  color:#087f8c;
  border-color:#cce5e8;
}
.portal-request-list{
  display:flex;
  flex-direction:column;
}
.portal-request{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 120px 105px;
  gap:11px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid #edf1f3;
  color:inherit;
}
.portal-request:last-child{border-bottom:0}
.portal-request:hover{background:#fbfdfd}
.portal-request-main{min-width:0}
.portal-request-main strong,
.portal-request-main span,
.portal-request-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-request-main strong{font-size:11px}
.portal-request-main span{margin-top:2px;color:#62757e;font-size:10px}
.portal-request-main small{margin-top:3px;color:#98a3aa;font-size:9px}
.portal-request-company{font-size:9px;font-weight:800;color:#5e717a}
.portal-request-state{text-align:right}
.portal-request-state time{display:block;margin-top:4px;color:#98a3aa;font-size:8px}
.portal-queue-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.portal-queue-kpi{
  padding:13px;
  border:1px solid var(--portal-line);
  border-radius:11px;
  background:#fff;
}
.portal-queue-kpi span{display:block;color:#7c8990;font-size:8px}
.portal-queue-kpi strong{display:block;margin-top:4px;font-size:20px}
.portal-attention{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 7px;
  border-radius:999px;
  background:#fff2dc;
  color:#916a15;
  font-size:8px;
  font-weight:900;
}
.portal-attention.urgent{
  background:#fdeaea;
  color:#a23f3f;
}
.portal-request-filter{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:13px;
}
.portal-request-filter a{
  padding:7px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--portal-line);
  color:#61747d;
  font-size:9px;
  font-weight:850;
}
.portal-request-filter a.active{
  background:#e9f5f6;
  color:#087f8c;
  border-color:#cce5e8;
}
.portal-new-communication-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px;
  margin-bottom:18px;
  border-radius:14px;
  background:linear-gradient(135deg,#087f8c,#0a929d);
  color:#fff;
}
.portal-new-communication-banner h2{margin:0;font-size:18px}
.portal-new-communication-banner p{margin:5px 0 0;font-size:10px;line-height:1.5;color:rgba(255,255,255,.82)}
.portal-new-communication-banner a{background:#fff;color:#087f8c}
.portal-new-communication-banner a:hover{background:#f2fbfb;color:#086f79}
.portal-route-note{
  margin-top:12px;
  padding:10px 11px;
  border-radius:9px;
  background:#f7fafb;
  color:#75848c;
  font-size:9px;
  line-height:1.45;
}
@media(max-width:900px){
  .portal-start-grid{grid-template-columns:1fr}
  .portal-queue-kpis{grid-template-columns:repeat(2,1fr)}
  .portal-request{grid-template-columns:40px minmax(0,1fr) 95px}
  .portal-request-state time{display:none}
}
@media(max-width:620px){
  .portal-topic-grid{grid-template-columns:1fr}
  .portal-request{grid-template-columns:38px minmax(0,1fr)}
  .portal-request-company,.portal-request-state{grid-column:2}
  .portal-request-state{text-align:left}
  .portal-new-communication-banner{grid-template-columns:1fr}
}


/* SBIG Connect V10.1 — Full Company Logo Integration */
.portal-company-logo,
.portal-detail-logo,
.portal-start-logo{
  background:#fff;
}
.portal-company-logo img,
.portal-detail-logo img,
.portal-start-logo img,
.portal-avatar img{
  object-fit:contain!important;
}
.portal-company-logo img{
  width:auto!important;
  max-width:118px!important;
  max-height:56px!important;
}
.portal-detail-logo img{
  width:auto!important;
  max-width:125px!important;
  max-height:70px!important;
}
.portal-start-logo img{
  width:auto!important;
  max-width:82px!important;
  max-height:54px!important;
}


/* SBIG Connect V10.2 — Public Registration Portal */
.registration-box{
  margin-top:42px;
  margin-bottom:30px;
}
.registration-box form{
  position:relative;
}
.registration-help{
  margin-top:5px;
  color:#8b989f;
  font-size:9px;
}
.registration-check{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin-top:15px!important;
  cursor:pointer;
}
.registration-check input{
  width:16px!important;
  height:16px!important;
  min-height:0!important;
  margin:1px 0 0!important;
}
.registration-check span{
  color:#62757e;
  font-size:9px;
  font-weight:600;
  line-height:1.45;
}
.registration-login-link,
.login-register-panel{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e7edef;
  text-align:center;
  color:#77858d;
  font-size:10px;
}
.registration-login-link a,
.login-register-panel a{
  margin-left:4px;
  color:#087f8c;
  font-weight:900;
}
.login-register-panel{
  display:flex;
  justify-content:center;
  gap:4px;
}
.registration-security-note{
  max-width:410px;
  margin-top:auto;
  color:#8d999f;
  font-size:9px;
  line-height:1.45;
}
.registration-honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
@media(max-width:820px){
  .registration-box{
    margin-top:auto;
  }
}

/* SBIG Connect V10.3 — Registration Contact Fields */
.registration-box select,
.portal-form select{
  width:100%;
  min-height:43px;
  padding:9px 11px;
  border:1px solid #dce4e8;
  border-radius:10px;
  background:#fff;
  color:#31464c;
  font:inherit;
}

/* SBIG Connect V11.0 — Automated Admin Replies */
.auto-reply-card{border-top:3px solid #0b8f9a}
.auto-reply-form{display:grid;gap:14px;margin-top:14px}
.auto-reply-form label>span:first-child{display:block;font-size:10px;font-weight:800;color:#586c75;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.auto-reply-form textarea,.auto-reply-form select{width:100%;border:1px solid #dbe4e8;border-radius:10px;background:#fff;padding:11px 12px;color:#263b43;font:inherit;box-sizing:border-box}
.auto-reply-form textarea{resize:vertical;line-height:1.5;min-height:130px}
.auto-toggle{display:flex!important;align-items:center;gap:9px;padding:11px 12px;border:1px solid #dfe7ea;border-radius:10px;background:#f8fbfc}
.auto-toggle input{width:17px;height:17px}
.auto-toggle span{margin:0!important;text-transform:none!important;letter-spacing:0!important;font-size:11px!important}
.auto-token-help{font-size:10px;color:#76868d}
.auto-token-help code{background:#edf3f5;padding:3px 5px;border-radius:5px}
.auto-company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.auto-company-card{border:1px solid #e0e7ea;border-radius:14px;padding:15px;background:#fff}
.auto-company-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px solid #edf1f3}
.auto-company-head strong{display:block;font-size:13px;color:#17343e}
.auto-company-head small{display:block;color:#8a989e;margin-top:3px;font-size:9px}
.auto-status{font-size:8px;font-weight:900;padding:5px 7px;border-radius:999px;letter-spacing:.08em}
.auto-status.on{background:#e8f7ef;color:#278154}.auto-status.off{background:#f0f2f3;color:#8a959a}
.auto-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.auto-flow>div{border:1px solid #e2e9ec;border-radius:12px;padding:14px;background:#fafcfd}
.auto-flow b{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#0a8c98;color:#fff;font-size:10px;margin-bottom:9px}
.auto-flow strong,.auto-flow span{display:block}.auto-flow strong{font-size:11px}.auto-flow span{font-size:9px;color:#74838a;margin-top:4px;line-height:1.45}
.admin-auto-reply-callout{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}
.admin-auto-reply-callout p{max-width:650px;color:#75848b;font-size:10px}
.admin-auto-badge{font-size:8px;font-weight:900;color:#087e89;letter-spacing:.1em}
@media(max-width:900px){.auto-company-grid{grid-template-columns:1fr}.auto-flow{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.auto-flow{grid-template-columns:1fr}.admin-auto-reply-callout{display:block}.admin-auto-reply-callout .portal-primary{display:inline-block;margin-top:12px}}

/* SBIG Connect V11.0.1 — Automatic Replies UI repair */
.auto-reply-card .portal-card-head,
.auto-company-card .auto-company-head{align-items:center}
.auto-reply-form select{
  min-height:44px;
}
.auto-reply-form textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.auto-company-card .portal-action-btn{
  width:100%;
  justify-content:center;
}
@media(max-width:760px){
  .auto-company-grid{grid-template-columns:1fr!important}
}


/* SBIG Connect V11.0.2 — Android / mobile chat scrolling repair */
html, body.app {
  width:100%;
  max-width:100%;
}

body.app {
  min-height:100dvh;
  overscroll-behavior:none;
}

body.app .chat-layout {
  height:calc(100dvh - 64px);
  min-height:0;
}

body.app .chat-panel,
body.app .sidebar {
  min-height:0;
}

body.app #messages {
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
}

body.app #messages .message-row,
body.app #messages .msg,
body.app #messages .message-body {
  -webkit-user-select:text;
  user-select:text;
}

@media(max-width:800px){
  body.app .topbar{
    height:58px;
    min-height:58px;
  }

  body.app .chat-layout{
    height:calc(100dvh - 58px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.app .sidebar,
  body.app .chat-panel{
    top:0;
    right:0;
    bottom:0;
    left:0;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
  }

  body.app .chat-panel{
    display:flex !important;
    flex-direction:column !important;
  }

  body.app .chat-head{
    flex:0 0 66px;
  }

  body.app .chat-message-search{
    flex:0 0 auto;
  }

  body.app #messages{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    padding:18px 10px 22px !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    overscroll-behavior-y:contain;
  }

  body.app #sendForm{
    flex:0 0 auto !important;
    position:relative !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:25;
    padding-bottom:env(safe-area-inset-bottom);
  }

  body.app .typing-line{
    flex:0 0 auto;
  }

  body.app .msg{
    max-width:87% !important;
  }
}

@supports not (height:100dvh){
  @media(max-width:800px){
    body.app .chat-layout{
      height:calc(100vh - 58px) !important;
    }
  }
}

/* =========================================================
   SBIG Connect V11.0.3 — subtle darker app background
   Keeps the clean look, but makes the app background a bit darker.
   ========================================================= */
:root{
  --portal-bg:#e8edf1;
  --portal-soft:#deedf0;
  --portal-line:#d7e0e6;
}

body.portal-body,
body.app{
  background:var(--portal-bg);
}

.portal-main,
.portal-content,
body.app .chat-layout,
body.app .chat-panel,
body.app .sidebar,
body.app #messages{
  background:#e6edf1 !important;
}

.portal-sidebar,
.portal-topbar,
body.app .topbar,
body.app .chat-head,
body.app .chat-message-search,
body.app #sendForm{
  background:#f7fafb !important;
}

.portal-sidebar-bottom,
.portal-kpi,
.portal-panel,
.portal-card,
.portal-company,
.portal-summary-item,
.portal-customer-card,
.portal-contact-card,
.portal-report-card,
.portal-search-box-large,
.portal-detail-hero,
.portal-login-card,
.auto-reply-form,
.auto-company-card,
.auto-flow > div{
  background:#ffffff;
}