:root{
 --orange:#f58220;
 --orange-dark:#db6810;
 --ink:#111317;
 --ink2:#1b1e24;
 --bg:#eef1f4;
 --panel:#ffffff;
 --soft:#f7f8fa;
 --border:#e3e7ec;
 --text:#20242a;
 --muted:#737b86;
 --green:#20a86b;
 --red:#dc3545;
 --blue:#3274d9;
 --purple:#7c3aed;
 --shadow:0 12px 30px rgba(18,24,33,.08);
}

*{
 box-sizing:border-box;
}

html,body{
 margin:0;
 min-height:100%;
}

body{
 font-family:
 -apple-system,
 BlinkMacSystemFont,
 "Segoe UI",
 Arial,
 sans-serif;
 color:var(--text);
 background:var(--bg);
}

button,input,select,textarea{
 font:inherit;
}

button,
a,
select{
 -webkit-tap-highlight-color:transparent;
}

a{
 color:inherit;
}

.app-body{
 height:100vh;
 overflow:hidden;
}

.app-shell{
 height:100%;
 display:grid;
 grid-template-columns:78px minmax(0,1fr);
}

.rail{
 background:
 linear-gradient(
   180deg,
   #101216,
   #191c22
 );
 color:#fff;
 padding:12px 8px;
 display:flex;
 flex-direction:column;
 align-items:center;
 border-right:1px solid #272a31;
}

.rail-logo{
 width:54px;
 height:54px;
 display:grid;
 place-items:center;
 background:#fff;
 border-radius:15px;
 margin-bottom:14px;
 overflow:hidden;
}

.rail-logo img{
 width:100%;
 height:100%;
 object-fit:contain;
 padding:4px;
}

.rail-nav{
 width:100%;
 display:flex;
 flex-direction:column;
 gap:5px;
}

.rail-nav a{
 min-height:61px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:3px;
 border-radius:13px;
 text-decoration:none;
 color:#a8adb7;
 transition:.15s ease;
}

.rail-nav a span{
 font-size:21px;
 line-height:1;
}

.rail-nav a small{
 font-size:9px;
 font-weight:700;
}

.rail-nav a:hover,
.rail-nav a.active{
 color:#fff;
 background:#272a31;
}

.rail-nav a.active{
 box-shadow:
 inset 3px 0 0 var(--orange);
}

.rail-bottom{
 margin-top:auto;
 padding-bottom:4px;
}

.mini-avatar,
.avatar{
 background:
 linear-gradient(
   145deg,
   var(--orange),
   #ffab59
 );
 color:#111;
 font-weight:800;
 display:grid;
 place-items:center;
 border-radius:50%;
 flex:none;
}

.mini-avatar{
 width:42px;
 height:42px;
}

.main-area{
 min-width:0;
 height:100%;
 display:grid;
 grid-template-rows:64px minmax(0,1fr);
}

.topbar{
 background:#fff;
 border-bottom:1px solid var(--border);
 display:flex;
 align-items:center;
 padding:0 18px;
 gap:20px;
}

.company-switcher{
 display:flex;
 align-items:center;
 gap:8px;
 min-width:220px;
}

.company-dot{
 width:9px;
 height:9px;
 border-radius:50%;
}

.company-switcher select{
 border:0;
 background:transparent;
 font-weight:800;
 outline:0;
 max-width:240px;
}

.topbar-status{
 flex:1;
 text-align:center;
 color:var(--muted);
 font-size:13px;
}

.status-dot{
 width:8px;
 height:8px;
 display:inline-block;
 border-radius:50%;
 margin-right:5px;
}

.status-dot.online{
 background:var(--green);
 box-shadow:
 0 0 0 4px rgba(32,168,107,.12);
}

.status-dot.offline{
 background:#a4aab3;
}

.user-area{
 display:flex;
 align-items:center;
 gap:12px;
}

.user-area div{
 text-align:right;
}

.user-area strong,
.user-area small{
 display:block;
}

.user-area small{
 color:var(--muted);
 font-size:11px;
 margin-top:2px;
}

.logout{
 padding:8px 11px;
 border-radius:9px;
 background:var(--soft);
 text-decoration:none;
 font-size:12px;
 font-weight:700;
}

.inbox-grid{
 min-height:0;
 display:grid;
 grid-template-columns:
 360px minmax(420px,1fr) 330px;
 background:#fff;
}

.conversation-pane{
 min-width:0;
 display:flex;
 flex-direction:column;
 border-right:1px solid var(--border);
 background:#fff;
}

.conversation-head{
 display:flex;
 align-items:end;
 justify-content:space-between;
 padding:18px 16px 12px;
}

.eyebrow{
 display:block;
 color:var(--orange-dark);
 font-size:10px;
 font-weight:900;
 letter-spacing:1.2px;
 margin-bottom:4px;
}

.conversation-head h2,
.page-title h1{
 margin:0;
}

.count-badge{
 min-width:28px;
 height:28px;
 padding:0 8px;
 border-radius:999px;
 display:grid;
 place-items:center;
 background:#f1f3f6;
 font-size:12px;
 font-weight:800;
}

.scope-tabs{
 display:flex;
 gap:3px;
 padding:0 12px 10px;
 overflow:auto;
}

.scope-tabs a{
 padding:7px 9px;
 white-space:nowrap;
 border-radius:8px;
 text-decoration:none;
 font-size:11px;
 font-weight:700;
 color:var(--muted);
}

.scope-tabs a.active{
 background:#fff1e6;
 color:#b4540a;
}

.conversation-search{
 padding:0 12px 12px;
}

.conversation-search input{
 width:100%;
 border:1px solid var(--border);
 border-radius:11px;
 background:var(--soft);
 padding:11px 12px;
 outline:none;
}

.conversation-search input:focus{
 border-color:#f4ae73;
 box-shadow:
 0 0 0 3px rgba(245,130,32,.10);
}

.conversation-list{
 min-height:0;
 overflow:auto;
 border-top:1px solid var(--border);
}

.conversation-card{
 min-height:78px;
 display:flex;
 gap:11px;
 padding:12px 13px;
 text-decoration:none;
 border-bottom:1px solid #eef0f3;
 transition:.12s;
}

.conversation-card:hover{
 background:#fafbfc;
}

.conversation-card.active{
 background:#fff4ea;
 box-shadow:
 inset 3px 0 0 var(--orange);
}

.avatar{
 width:46px;
 height:46px;
 font-size:14px;
}

.avatar.large{
 width:44px;
 height:44px;
}

.avatar.xlarge{
 width:76px;
 height:76px;
 font-size:22px;
}

.conversation-copy{
 min-width:0;
 flex:1;
}

.conversation-line{
 display:flex;
 justify-content:space-between;
 gap:8px;
 align-items:center;
}

.conversation-line strong{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:14px;
}

.conversation-line time{
 color:#959ca6;
 font-size:10px;
}

.conversation-line.secondary{
 margin-top:5px;
 font-size:11px;
 color:var(--muted);
}

.unread{
 min-width:19px;
 height:19px;
 padding:0 5px;
 border-radius:10px;
 display:grid;
 place-items:center;
 background:var(--orange);
 color:#111;
 font-size:10px;
}

.conversation-meta{
 display:flex;
 gap:5px;
 margin-top:6px;
}

.conversation-meta span{
 border-radius:999px;
 background:#eef1f5;
 padding:3px 6px;
 font-size:9px;
}

.conversation-meta .priority.high{
 background:#fff1cf;
 color:#8a5a00;
}

.conversation-meta .priority.urgent{
 background:#ffe3e5;
 color:#a5202c;
}

.empty-list{
 padding:54px 25px;
 text-align:center;
 color:var(--muted);
}

.empty-list strong{
 display:block;
 color:var(--text);
}

.empty-list p{
 line-height:1.5;
 font-size:13px;
}

.empty-icon{
 font-size:34px;
 margin-bottom:12px;
}

.chat-pane{
 min-width:0;
 min-height:0;
 display:grid;
 grid-template-rows:
 auto auto minmax(0,1fr) auto;
 background:#f4f1ec;
 position:relative;
}

.chat-pane:before{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 opacity:.18;
 background-image:
 radial-gradient(
  circle at 20% 20%,
  #cfd5dc 1px,
  transparent 1px
 );
 background-size:23px 23px;
}

.chat-header,
.chat-toolbar,
.messages,
.composer-shell,
.chat-empty{
 position:relative;
 z-index:1;
}

.chat-header{
 min-height:67px;
 padding:10px 15px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:15px;
 background:#fff;
 border-bottom:1px solid var(--border);
}

.chat-contact{
 min-width:0;
 display:flex;
 align-items:center;
 gap:10px;
}

.chat-contact h2{
 margin:0;
 font-size:15px;
}

.chat-contact p{
 margin:3px 0 0;
 color:var(--muted);
 font-size:11px;
}

.chat-actions{
 display:flex;
 align-items:center;
 gap:7px;
}

.chat-toolbar{
 min-height:34px;
 background:#fbfbfc;
 border-bottom:1px solid var(--border);
 display:flex;
 align-items:center;
 gap:18px;
 padding:0 15px;
 font-size:10px;
 color:var(--muted);
 overflow:auto;
 white-space:nowrap;
}

.chat-toolbar strong{
 color:#454b53;
}

.messages{
 min-height:0;
 overflow:auto;
 padding:20px 5%;
}

.message-row{
 display:flex;
 margin:5px 0;
}

.message-row.inbound{
 justify-content:flex-start;
}

.message-row.outbound{
 justify-content:flex-end;
}

.message-row.note{
 justify-content:center;
}

.bubble{
 max-width:min(72%,700px);
 background:#fff;
 border-radius:9px;
 padding:8px 10px 6px;
 box-shadow:
 0 1px 2px rgba(20,25,32,.12);
 line-height:1.45;
 font-size:13px;
}

.outbound .bubble{
 background:#dcf8c6;
}

.note-bubble{
 width:min(80%,750px);
 background:#fff4c9;
 border:1px solid #eedb8c;
}

.bubble-author{
 font-size:10px;
 font-weight:800;
 margin-bottom:4px;
 color:#666d76;
}

.bubble time{
 display:block;
 text-align:right;
 color:#9198a1;
 font-size:9px;
 margin-top:5px;
}

.system-event{
 margin:12px auto;
 width:max-content;
 max-width:90%;
 background:#e8edf2;
 color:#68717c;
 padding:5px 10px;
 border-radius:999px;
 font-size:9px;
 text-align:center;
}

.timeline-empty{
 color:#8a929c;
 text-align:center;
 padding:50px 0;
}

.composer-shell{
 background:#fff;
 border-top:1px solid var(--border);
}

.composer-tabs{
 padding:6px 12px 0;
 display:flex;
 gap:5px;
}

.composer-mode{
 border:0;
 background:transparent;
 padding:6px 8px;
 font-size:10px;
 font-weight:800;
 color:var(--muted);
 border-radius:7px;
 cursor:pointer;
}

.composer-mode.active{
 color:#b65309;
 background:#fff0e4;
}

.composer{
 padding:8px 11px 12px;
 display:flex;
 align-items:flex-end;
 gap:7px;
}

.composer.note-mode{
 background:#fff9df;
}

.composer textarea{
 min-width:0;
 flex:1;
 resize:none;
 max-height:150px;
 border:1px solid var(--border);
 border-radius:13px;
 padding:11px 12px;
 outline:0;
 background:#f9fafb;
 line-height:1.4;
}

.composer textarea:focus{
 border-color:#f2ab71;
 background:#fff;
}

.composer-tool{
 width:42px;
 height:42px;
 border:0;
 border-radius:11px;
 background:#f0f2f5;
 cursor:pointer;
 font-size:17px;
}

.composer-tool:disabled{
 opacity:.45;
 cursor:not-allowed;
}

.send-button{
 min-height:42px;
 border:0;
 border-radius:11px;
 padding:0 16px;
 background:var(--orange);
 color:#111;
 font-weight:900;
 cursor:pointer;
}

.send-button:disabled{
 background:#d9dde2;
 color:#8e949c;
 cursor:not-allowed;
}

.quick-panel{
 position:absolute;
 left:12px;
 right:12px;
 bottom:84px;
 max-height:350px;
 overflow:auto;
 background:#fff;
 border:1px solid var(--border);
 border-radius:15px;
 box-shadow:var(--shadow);
 padding:10px;
 z-index:20;
}

.quick-panel-head{
 display:flex;
 justify-content:space-between;
 gap:10px;
 padding:4px 6px 9px;
}

.quick-panel-head span{
 color:var(--muted);
 font-size:10px;
}

.quick-item{
 width:100%;
 display:block;
 border:0;
 background:transparent;
 text-align:left;
 padding:9px;
 border-radius:9px;
 cursor:pointer;
}

.quick-item:hover{
 background:#f5f6f8;
}

.quick-item div{
 display:flex;
 align-items:center;
 gap:7px;
}

.quick-item code{
 color:#b4540a;
 font-weight:800;
}

.quick-item span{
 display:block;
 color:var(--muted);
 font-size:11px;
 margin-top:4px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

.contact-pane{
 min-width:0;
 min-height:0;
 overflow:auto;
 background:#fff;
 border-left:1px solid var(--border);
 padding:20px;
}

.contact-profile{
 text-align:center;
 padding:8px 0 22px;
 border-bottom:1px solid var(--border);
}

.contact-profile .avatar{
 margin:0 auto 10px;
}

.contact-profile h3{
 margin:0;
}

.contact-profile p{
 margin:5px 0 0;
 color:var(--muted);
 font-size:12px;
}

.detail-section{
 padding:17px 0;
 border-bottom:1px solid var(--border);
}

.detail-section h4{
 margin:0 0 12px;
 font-size:11px;
 text-transform:uppercase;
 letter-spacing:.8px;
 color:#707883;
}

.detail-row{
 min-height:35px;
 display:flex;
 justify-content:space-between;
 gap:14px;
 align-items:center;
 font-size:12px;
}

.detail-row span{
 color:var(--muted);
}

.integration-box{
 padding:10px;
 border:1px solid var(--border);
 border-radius:10px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-top:8px;
}

.integration-box strong,
.integration-box span{
 display:block;
}

.integration-box span{
 margin-top:2px;
 color:var(--muted);
 font-size:9px;
}

.integration-box b{
 color:#9198a1;
 font-size:9px;
}

.full-select{
 width:100%;
 padding:9px;
 border:1px solid var(--border);
 border-radius:9px;
 background:#fff;
}

.chat-empty{
 align-self:stretch;
 justify-self:stretch;
 grid-row:1/-1;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding:40px;
}

.chat-empty img{
 width:170px;
 max-height:80px;
 object-fit:contain;
}

.chat-empty h2{
 margin:18px 0 5px;
}

.chat-empty p{
 color:var(--muted);
}

.contact-empty{
 min-height:100%;
 display:grid;
 place-items:center;
 text-align:center;
 color:var(--muted);
 line-height:1.5;
 font-size:12px;
}

.btn{
 border:0;
 border-radius:9px;
 padding:9px 12px;
 font-weight:800;
 cursor:pointer;
 text-decoration:none;
 display:inline-flex;
 justify-content:center;
 align-items:center;
}

.btn.primary{
 background:var(--orange);
 color:#111;
}

.btn.primary:hover{
 background:#ff922f;
}

.btn.soft{
 background:#eef1f5;
 color:#353a42;
}

.btn.big{
 min-height:46px;
 padding-left:18px;
 padding-right:18px;
}

.icon-btn{
 width:38px;
 height:38px;
 display:grid;
 place-items:center;
 border:0;
 border-radius:9px;
 background:#f0f2f5;
 cursor:pointer;
 list-style:none;
}

.icon-btn.danger{
 color:#b4232d;
}

.action-menu{
 position:relative;
}

.action-menu summary::-webkit-details-marker{
 display:none;
}

.action-popover{
 position:absolute;
 right:0;
 top:44px;
 width:250px;
 background:#fff;
 border:1px solid var(--border);
 border-radius:13px;
 box-shadow:var(--shadow);
 padding:12px;
 z-index:50;
}

.action-popover strong{
 display:block;
 font-size:10px;
 margin-bottom:5px;
 text-transform:uppercase;
 color:var(--muted);
}

.action-popover select{
 width:100%;
 padding:8px;
 border:1px solid var(--border);
 border-radius:8px;
 margin-bottom:6px;
}

.action-popover .btn{
 width:100%;
}

.action-popover hr{
 border:0;
 border-top:1px solid var(--border);
 margin:12px 0;
}

.toast{
 position:absolute;
 top:74px;
 left:50%;
 transform:translateX(-50%);
 z-index:100;
 padding:10px 14px;
 border-radius:10px;
 box-shadow:var(--shadow);
 font-size:12px;
 font-weight:700;
}

.toast.success{
 background:#e4f7ec;
 color:#156640;
}

.toast.error{
 background:#ffe8e9;
 color:#9b2028;
}

.content-page{
 min-height:0;
 overflow:auto;
 padding:28px;
}

.page-title{
 display:flex;
 justify-content:space-between;
 margin-bottom:22px;
}

.page-title h1{
 font-size:28px;
}

.page-title p{
 margin:6px 0 0;
 color:var(--muted);
}

.metric-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:13px;
}

.metric-card{
 background:#fff;
 border:1px solid var(--border);
 border-radius:15px;
 padding:18px;
}

.metric-card span,
.metric-card small{
 display:block;
 color:var(--muted);
}

.metric-card strong{
 display:block;
 font-size:29px;
 margin:8px 0 4px;
}

.dashboard-grid,
.two-column-page{
 margin-top:16px;
 display:grid;
 grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);
 gap:16px;
 align-items:start;
}

.surface{
 background:#fff;
 border:1px solid var(--border);
 border-radius:16px;
 padding:18px;
}

.surface.narrow{
 max-width:680px;
}

.surface-title{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 margin-bottom:14px;
}

.surface-title h2{
 margin:0;
 font-size:16px;
}

.pill{
 padding:5px 8px;
 border-radius:999px;
 background:#eef1f5;
 color:#656d77;
 font-size:10px;
}

.operation-row{
 min-height:43px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 border-bottom:1px solid #eef0f3;
 font-size:12px;
}

.operation-row:last-child{
 border-bottom:0;
}

.operation-row span{
 color:var(--muted);
}

.integration-mini{
 border:1px solid var(--border);
 border-radius:11px;
 padding:11px;
 margin:8px 0;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.integration-mini strong,
.integration-mini span{
 font-size:11px;
}

.integration-mini span{
 color:var(--muted);
}

.reply-row{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 gap:12px;
 padding:14px 0;
 border-bottom:1px solid var(--border);
}

.reply-row:last-child{
 border-bottom:0;
}

.reply-title{
 display:flex;
 align-items:center;
 gap:8px;
}

.reply-title code{
 color:#b4540a;
 font-weight:900;
}

.reply-row small{
 display:block;
 color:var(--muted);
 margin-top:4px;
}

.reply-row p{
 margin:7px 0 0;
 font-size:12px;
 color:#505761;
 line-height:1.5;
}

.stack-form{
 display:grid;
 gap:12px;
}

.stack-form label{
 display:grid;
 gap:5px;
 font-size:11px;
 font-weight:800;
}

.stack-form input,
.stack-form textarea,
.stack-form select{
 width:100%;
 border:1px solid var(--border);
 border-radius:9px;
 padding:10px;
 outline:none;
}

.stack-form fieldset{
 border:1px solid var(--border);
 border-radius:10px;
 padding:12px;
}

.check-row{
 display:flex!important;
 grid-template-columns:none!important;
 align-items:center;
 gap:8px!important;
 margin:7px 0;
}

.check-row input{
 width:auto;
}

.hint{
 color:var(--muted);
 font-size:10px;
 line-height:1.7;
}

.hint code{
 background:#f1f3f5;
 padding:2px 4px;
 border-radius:4px;
}

.team-grid,
.integration-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:14px;
 margin-bottom:18px;
}

.team-card,
.integration-card{
 background:#fff;
 border:1px solid var(--border);
 border-radius:15px;
 padding:17px;
}

.team-card{
 display:flex;
 gap:12px;
}

.team-icon,
.integration-logo{
 width:44px;
 height:44px;
 border-radius:12px;
 background:#171a1f;
 color:#fff;
 display:grid;
 place-items:center;
 font-weight:900;
 flex:none;
}

.team-card h3,
.integration-card h3{
 margin:2px 0 4px;
}

.team-card p,
.integration-card p{
 color:var(--muted);
 line-height:1.45;
 font-size:11px;
}

.team-card span,
.integration-card span{
 font-size:10px;
 font-weight:800;
 color:#59616b;
}

.integration-card.enabled{
 border-color:#afd9bf;
 background:#fbfffc;
}

.whatsapp-layout{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(300px,.6fr);
 gap:16px;
 align-items:start;
}

.connection-head{
 display:flex;
 align-items:center;
 gap:12px;
}

.connection-head>div:nth-child(2){
 flex:1;
}

.connection-head h2{
 margin:0;
}

.connection-head p{
 margin:4px 0 0;
 color:var(--muted);
 font-size:11px;
}

.whatsapp-symbol{
 width:52px;
 height:52px;
 display:grid;
 place-items:center;
 border-radius:15px;
 background:#1fbd6b;
 color:#fff;
 font-weight:900;
}

.connection-status{
 padding:6px 9px;
 border-radius:999px;
 font-size:10px;
 font-weight:900;
}

.connection-status.connected{
 background:#e1f7ea;
 color:#14663c;
}

.connection-status.disconnected{
 background:#eef0f3;
 color:#68707a;
}

.connection-help{
 margin:18px 0;
 color:var(--muted);
 line-height:1.55;
 font-size:12px;
}

.qr-card{
 text-align:center;
}

.qr-image{
 width:min(280px,100%);
 aspect-ratio:1;
 object-fit:contain;
 background:#fff;
}

.qr-card p{
 color:var(--muted);
 font-size:11px;
 line-height:1.5;
}

.pairing-code{
 margin:15px auto 0;
 width:max-content;
 padding:10px 16px;
 border-radius:9px;
 background:#171a1f;
 color:#fff;
 font-family:monospace;
 font-size:20px;
 letter-spacing:3px;
}

.login-page{
 min-height:100vh;
 display:grid;
 grid-template-columns:1.15fr .85fr;
 background:#111317;
}

.login-brand{
 padding:8vw;
 display:flex;
 flex-direction:column;
 justify-content:center;
 color:#fff;
}

.login-brand img{
 width:230px;
 max-height:105px;
 object-fit:contain;
 object-position:left;
 margin-bottom:35px;
}

.login-brand h1{
 max-width:680px;
 margin:8px 0 18px;
 font-size:clamp(42px,5.5vw,76px);
 line-height:.98;
 letter-spacing:-2px;
}

.login-brand h1 span{
 color:var(--orange);
}

.login-brand p{
 color:#aeb3bb;
}

.login-panel{
 background:#f3f5f7;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:25px;
}

.login-card{
 width:min(430px,100%);
 background:#fff;
 border-radius:22px;
 padding:32px;
 box-shadow:
 0 30px 80px rgba(0,0,0,.25);
}

.login-logo{
 width:170px;
 max-height:75px;
 object-fit:contain;
 object-position:left;
}

.login-card h2{
 margin:24px 0 4px;
}

.login-card>p{
 margin:0 0 20px;
 color:var(--muted);
 font-size:12px;
}

.login-card label{
 display:grid;
 gap:6px;
 margin:13px 0;
 font-size:11px;
 font-weight:800;
}

.login-card input{
 width:100%;
 border:1px solid var(--border);
 border-radius:10px;
 padding:12px;
 outline:none;
}

.login-card .btn{
 width:100%;
 margin-top:8px;
}

.alert{
 padding:10px;
 border-radius:9px;
 font-size:12px;
}

.alert.error{
 background:#ffe8e9;
 color:#99252d;
}

@media(max-width:1250px){

 .inbox-grid{
  grid-template-columns:
   330px minmax(420px,1fr);
 }

 .contact-pane{
  display:none;
 }

}

@media(max-width:850px){

 .app-body{
  overflow:auto;
 }

 .app-shell{
  min-height:100vh;
  grid-template-columns:1fr;
  padding-bottom:67px;
 }

 .rail{
  position:fixed;
  z-index:200;
  left:0;
  right:0;
  bottom:0;
  height:67px;
  width:100%;
  padding:4px 6px;
  flex-direction:row;
  border-right:0;
  border-top:1px solid #282b31;
 }

 .rail-logo,
 .rail-bottom{
  display:none;
 }

 .rail-nav{
  flex-direction:row;
  justify-content:space-around;
  gap:1px;
 }

 .rail-nav a{
  min-height:57px;
  flex:1;
 }

 .rail-nav a:nth-child(4),
 .rail-nav a:nth-child(6),
 .rail-nav a:nth-child(7){
  display:none;
 }

 .main-area{
  min-height:calc(100vh - 67px);
  height:auto;
 }

 .topbar{
  min-height:60px;
  padding:0 11px;
 }

 .topbar-status{
  display:none;
 }

 .user-area div{
  display:none;
 }

 .inbox-grid{
  min-height:calc(100vh - 127px);
  grid-template-columns:1fr;
 }

 .conversation-pane{
  min-height:calc(100vh - 127px);
 }

 .chat-pane{
  display:none;
 }

 .conversation-card.active{
  background:#fff;
 }

 .content-page{
  padding:18px 13px;
 }

 .metric-grid,
 .team-grid,
 .integration-grid,
 .dashboard-grid,
 .two-column-page,
 .whatsapp-layout{
  grid-template-columns:1fr;
 }

 .login-page{
  display:block;
  background:#f3f5f7;
 }

 .login-brand{
  display:none;
 }

 .login-panel{
  min-height:100vh;
 }

}

@media(max-width:520px){

 .company-switcher{
  min-width:0;
 }

 .company-switcher select{
  max-width:180px;
 }

 .page-title h1{
  font-size:24px;
 }

 .metric-grid{
  grid-template-columns:1fr 1fr;
 }

}

/* ISP Messaging - conta e administração */

.account-shortcuts{
 position:fixed;
 right:18px;
 bottom:18px;
 z-index:80;
 display:flex;
 flex-direction:column;
 gap:7px;
}

.account-shortcut{
 display:none;
}

/*
 * Os atalhos ficam disponíveis pelas
 * URLs e pelo botão Conta do topo.
 * Mantemos esta estrutura pronta para
 * futura tela de configurações.
 */