@charset "UTF-8";
:root{--ink:#202726;--muted:#73807c;--line:#e3e8e4;--bg:#f5f7f4;--paper:#fff;--accent:#f1c14c;--dark:#202a28;--green:#34725c;--radius:6px;--sidebar-width:188px;--panel-padding:10px;--control-height:28px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;font-size:12px;line-height:1.4}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b38a28;outline-offset:4px}
svg.icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.svg-defs{width:0;height:0;position:absolute;overflow:hidden}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);background:var(--dark);color:#c9d3ce;display:flex;flex-direction:column;padding:10px 8px;z-index:30}
.brand{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:750;letter-spacing:1px;padding:0 8px;line-height:1.25}
.brand:hover{text-decoration:none}
.brand small{display:block;font-size:10px;font-weight:400;color:#a8b8b0;letter-spacing:.5px;margin-top:3px}
.brand-mark{display:grid;place-items:center;background:var(--accent);color:#28312e;height:28px;width:28px;font-size:22px;position:relative;flex-shrink:0;border-radius:7px;font-weight:900;font-style:italic}
.brand-mark span{position:absolute;right:-3px;top:-3px;width:9px;height:9px;border:2px solid var(--dark);background:var(--accent);border-radius:50%}
.workspace-label{font-size:8px;letter-spacing:1.1px;color:#80968b;margin:12px 8px 5px}
.sidebar nav{display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
.nav-item{display:flex;align-items:center;gap:7px;color:#b4c1ba;padding:3px 8px;border-radius:5px;font-size:12px;min-height:26px}
.nav-item:hover{background:#2c3732;color:#fff;text-decoration:none}
.nav-item.active{background:#3b453b;color:#f6d479}
.nav-item.active .icon{color:#f3c956}
.nav-count{margin-left:auto;border-radius:5px;padding:0 6px;background:#4c5646;color:#f5d784;font-size:11px;font-variant-numeric:tabular-nums}
.sidebar-bottom{margin-top:auto;padding:10px 8px 0;font-size:11px;color:#bcc9c2}
.sidebar-bottom p{font-size:10px;color:#7c9386;margin:4px 0 0}
.sidebar-clock{margin-top:8px;padding-top:8px;border-top:1px solid #3b4843}
.sidebar-clock span{display:block;margin-top:2px;font-size:10px;color:#a8b8b0}
.sidebar-clock time{font-variant-numeric:tabular-nums;white-space:nowrap}
.version{float:right;font-size:10px;color:#829a8b}
.app{margin-left:var(--sidebar-width);min-height:100dvh}
.topbar{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 12px;border-bottom:1px solid var(--line);background:#ffffffb8}
.topbar-title{min-width:0;overflow-wrap:anywhere}
.topbar-right{display:flex;align-items:center;gap:10px;font-size:12px;margin-left:auto}
.mode{font-size:11px;color:#847140;background:#f8f1dc;border:1px solid #e7debb;border-radius:20px;padding:3px 9px;white-space:nowrap}
.mode i{display:inline-block;background:#ad975c;width:5px;height:5px;border-radius:50%;margin-right:7px}
.mode.live{color:var(--green);background:#edf5ee;border-color:#d2e4d5}
.mode.live i{background:var(--green)}
.user-name{font-weight:600}
.text-button{padding:0;border:0;background:none;color:#63756a;text-decoration:none;font-size:12px}
.text-button:hover{text-decoration:underline}
.menu-toggle{display:none}
.skip-link{position:fixed;top:-80px;left:calc(var(--sidebar-width) + 12px);z-index:100;background:#fff;padding:12px}
.skip-link:focus{top:10px}
main{padding:10px 12px 0;max-width:1640px;margin:auto}
.page-heading{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:6px}
.page-heading:empty{display:none}
.eyebrow{font-size:8px;letter-spacing:1.3px;font-weight:600;color:#87978b;margin-bottom:4px}
h1{font-size:20px;letter-spacing:-.5px;font-weight:650;margin:0;line-height:1.2}
h2{font-size:14px;font-weight:650;letter-spacing:-.3px;margin:0 0 8px}
h3{font-size:13px;font-weight:650;margin:0 0 6px}
p{margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 8px;font-size:12px}
.muted,.help{color:var(--muted)}
.help{font-size:11px;line-height:1.5}
.button{display:inline-flex;gap:6px;align-items:center;justify-content:center;border:1px solid #d7dfd8;border-radius:5px;background:#fff;padding:3px 9px;min-height:var(--control-height);font-weight:600;font-size:12px;color:#3c4c41;white-space:nowrap}
.button:hover{background:#f4f6f1;text-decoration:none}
.button.primary{border-color:var(--accent);background:var(--accent);color:#303524}
.button.primary:hover{background:#e7b743}
.button.small{padding:3px 7px;min-height:26px;font-size:11px}
.button.full{width:100%}
.notice{padding:6px 9px;background:#f8f2de;border:1px solid #e6dfc1;border-radius:6px;margin-bottom:8px;font-size:12px}
.notice p:last-child{margin-bottom:0}
.notice.error{background:#fbefeb;border-color:#ebccc2;color:#964b3f}
.notice.success{background:#eaf4ed;border-color:#cadfcf;color:#326f4e}
.notice.sandbox{display:flex;align-items:center;gap:8px;background:#f4f3e9;border:1px solid #e7e6d6}
.notice.sandbox strong{font-size:12px}
.notice.sandbox p{font-size:11px;color:#838773;margin:2px 0 0}
.notice.sandbox>a{margin-left:auto;font-size:11px;white-space:nowrap}
.badge{display:inline-block;font-size:10px;line-height:1.4;padding:2px 5px;border-radius:4px;background:#edf0eb;color:#71806e;font-weight:600;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:8px}
.stat{background:var(--paper);padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;align-content:center}
.stat>div{font-size:11px;color:#758276}
.stat>strong{display:block;font-size:24px;font-weight:600;letter-spacing:-.8px;line-height:1.2;margin:0;font-variant-numeric:tabular-nums;grid-column:2;grid-row:1 / 3;align-self:center}
.stat small{font-size:11px;color:#73816b;display:block;grid-column:1}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:8px;min-width:0}
.padded{padding:var(--panel-padding)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px var(--panel-padding)}
.panel-heading h2{margin:0;font-size:14px}
.panel-heading>a{font-size:11px}
.padded .panel-heading{padding:0 0 6px}
.overview-row{display:grid;grid-template-columns:1.7fr 1fr;gap:10px}
.rhythm{display:flex;justify-content:space-between;align-items:center;padding:0 var(--panel-padding) 8px;gap:10px}
.rhythm strong{display:block;font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.rhythm span{font-size:11px;color:#8a988b}
.rhythm-line{display:flex;align-items:center;flex:1;max-width:160px;gap:6px}
.rhythm-line i{width:8px;height:8px;border-radius:50%;background:#bacbb5}
.rhythm-line i:first-child{background:var(--green)}
.rhythm-line>span{height:1px;flex:1;background:#d8e2d2}
.split-meta{display:flex;justify-content:space-between;background:#f9faf7;border-top:1px solid #eff2ea;padding:6px var(--panel-padding);font-size:11px;gap:8px}
.green{color:var(--green)}
.auth-summary{padding:var(--panel-padding);background:#eff4ed}
.auth-summary>.icon{float:right;color:#75956f;width:20px;height:20px}
.auth-summary h2{font-size:14px}
.auth-summary p{max-width:none;font-size:12px;color:#7f8f7b;margin-bottom:5px}
.auth-summary>a{font-size:11px;font-weight:600}
.mini-stats{display:flex;gap:12px;font-size:11px;color:#8d9b87;margin-top:6px}
.mini-stats b{font-size:13px;font-weight:600;color:#476445;margin-right:4px}
.table-wrap{width:100%;overflow:auto}
table{border-collapse:collapse;width:100%;text-align:left;font-size:12px;font-variant-numeric:tabular-nums}
th{font-weight:500;color:#73816b;font-size:11px;padding:4px 8px;background:#fafbf8;white-space:nowrap;border-block:1px solid #edf1e8}
td{border-bottom:1px solid #edf1e8;padding:4px 8px;vertical-align:middle}
tr:last-child td{border-bottom:0}
td small{display:block;color:#73816b;font-size:11px;margin-top:1px}
td .phone{color:#45523f;font-weight:600;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.message-cell{min-width:200px;max-width:380px;color:#6f7c67}
.message-cell>span{display:block;overflow-wrap:anywhere}
.date{white-space:nowrap;color:#71816c;font-size:11px}
.status-queued{background:#f8efdc;color:#a38645}
.status-sending,.status-accepted{background:#e8f0f6;color:#5688a5}
.status-delivered,.status-received{background:#e9f2e7;color:#638c58}
.status-failed,.status-unknown{background:#f9ece6;color:#b07d62}
.status-simulated{background:#eff0f6;color:#8b89a3}
.status-cancelled{background:#eef0eb;color:#9aa294}
.error-code{max-width:170px;overflow-wrap:anywhere}
.empty{text-align:center;padding:16px 10px;color:var(--muted)}
.empty>.icon{width:24px;height:24px;color:#a9b9a2;margin-bottom:5px}
.empty h3{color:#71806a;font-size:14px}
.empty p{font-size:12px}
.empty .button{margin-top:4px}
.empty-cell{text-align:center;padding:14px 10px;color:var(--muted)}
.footer{padding:8px 0;display:flex;justify-content:space-between;color:#73816b;font-size:10px}
.form-layout,.docs-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:10px;align-items:start}
.field{margin-bottom:7px}
.field>label,label{font-size:12px;font-weight:600;color:#61705b;display:block;margin-bottom:3px}
.required{color:#a8b49e}
input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%;border:1px solid #dce3d7;background:#fff;color:#3c4937;border-radius:5px;padding:4px 8px;outline:none;min-height:var(--control-height)}
input:focus,textarea:focus,select:focus{border-color:#8ca879;box-shadow:0 0 0 3px #e9f0e4}
textarea{resize:vertical;line-height:1.45}
input[type=checkbox]{accent-color:#597948;width:16px;height:16px;flex-shrink:0}
input[type=password]{font-family:monospace}
.checkbox-field{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.checkbox-field>label{flex:1;margin:1px 0;font-weight:400}
.checkbox-field .errorlist{flex-basis:100%}
.field>div[id]>div{margin:3px 0}
.field>div[id] label{font-weight:400;display:flex;align-items:center;gap:8px}
.errorlist{list-style:none;color:#a75f4c;background:#fcf1ec;padding:7px 10px;border-radius:5px;margin:6px 0;font-size:12px}
.submit-row{display:flex;gap:10px;align-items:center}
.submit-row>.muted{font-size:11px}
.sms-preview{margin:6px 0;background:#edf2e8;padding:8px;border-radius:8px 8px 8px 3px;min-height:44px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.counter{font-size:11px;color:#75856b}
.facts{font-size:12px;margin:6px 0}
.facts>div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #edf1e8;padding:3px 0;gap:10px}
.facts dt{color:#8c9a82;flex-shrink:0}
.facts dd{margin:0;text-align:right;overflow-wrap:anywhere;min-width:0}
.template-link{display:block;border-top:1px solid var(--line);padding:4px 0;font-size:12px}
.filters{display:flex;gap:6px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.filters input{flex:1;min-width:220px}
.filters select{width:auto;max-width:230px;font-size:12px}
.filters .text-button{padding:8px}
.pagination{display:flex;justify-content:center;gap:12px;align-items:center;font-size:12px;padding:6px}
.history-controls{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:6px 10px;font-size:12px}
.history-controls-bottom{justify-content:center;border-top:1px solid var(--line)}
.history-pagination{flex-wrap:wrap;gap:4px;padding:0}
.history-pagination a,.history-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:32px;padding:4px 7px}
.history-current{background:var(--line);border-radius:5px;font-weight:600}
@media(max-width:600px){form[data-history-filters] select{flex:1 1 130px;min-width:0;max-width:none}}
.queue-banner{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 0 6px}
.queue-banner p{font-size:12px;margin:6px 0 0}
.queue-banner>.muted{font-size:11px;text-align:right}
.queue-banner strong{font-weight:600}
.batch-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:5px 0;font-size:12px}
.batch-row form{display:flex;gap:8px}
.danger{color:#a76452}
.message-body{white-space:pre-wrap;overflow-wrap:anywhere;padding:9px;background:#f5f7f1;border-radius:6px}
.timeline{list-style:none;padding:0 0 0 14px;border-left:1px solid var(--line);margin:6px 0}
.timeline li{margin-bottom:6px}
.timeline strong{font-size:12px;font-weight:500}
.timeline small{display:block;color:var(--muted);font-size:11px}
.dialog-layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:240px}
.dialog-list{border-right:1px solid var(--line);max-height:640px;overflow:auto}
.dialog-search{padding:6px;display:flex;gap:5px}
.dialog-search input{min-width:0;font-size:12px}
.dialog-item{display:block;border-top:1px solid #eef1e9;padding:5px 8px;color:#5b6f52}
.dialog-item:hover,.dialog-item.selected{background:#f0f4ea;text-decoration:none}
.dialog-item>div{display:flex;align-items:center}
.dialog-item strong{font-size:12px}
.dialog-item small{display:block;color:#73816b;font-size:11px;margin-top:1px}
.dialog-content{display:flex;flex-direction:column;min-width:0}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
.dialog-header h2{margin:0;font-size:14px}
.dialog-header small{color:var(--muted);font-size:11px}
.bubbles{padding:10px;display:flex;flex-direction:column;gap:5px;flex:1}
.bubble{border:1px solid var(--line);padding:5px 8px;max-width:82%;align-self:flex-start;border-radius:8px 8px 8px 3px}
.bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:3px;font-size:12px}
.bubble small{color:#73816b;font-size:11px}
.bubble.outgoing{background:#edf3e6;border-color:#e2ebd9;align-self:flex-end;border-radius:8px 8px 3px 8px}
.reply-bar{border-top:1px solid var(--line);padding:6px 10px;display:flex;gap:8px;align-items:center}
.reply-bar small{color:var(--muted);font-size:11px}
.reply-bar.reply-form{display:block}
.reply-form .reply-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reply-form .counter{margin:4px 0 7px}
.reply-form [data-reply-status]:not(:empty){margin-top:7px;font-size:12px;color:var(--green)}
.reply-form button:disabled{opacity:.65;cursor:wait}
.narrow{max-width:690px}
.template-item{padding:6px 0;border-top:1px solid var(--line)}
.template-item p{font-size:12px;white-space:pre-wrap;color:var(--muted)}
.inline-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}
.new-integration{margin-top:10px}
summary{cursor:pointer;font-weight:600;font-size:13px;list-style-position:inside}
.new-integration[open]>summary,.batch-controls[open]>summary{margin-bottom:10px}
.secret-display{display:block;background:#f4f7ef;border:1px solid #e0e7d6;border-radius:6px;padding:8px;margin:6px 0;overflow-wrap:anywhere;user-select:all;font-size:12px}
.settings-heading{display:flex;gap:16px;justify-content:space-between;margin-bottom:4px}
.settings-heading>div{min-width:240px}
.settings-heading>p{color:var(--muted);font-size:12px;max-width:430px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.settings-form>.button{margin-bottom:10px}
.settings-form .inline-actions{margin-bottom:10px}
.checkbox-line{display:flex;gap:8px;font-weight:400;align-items:flex-start}
.docs-layout{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}
.docs-layout h3{margin-top:12px}
.docs-layout p{font-size:12px;color:#758368}
.docs-layout code{font-size:12px;overflow-wrap:anywhere}
.docs-layout pre{background:#263126;color:#d4dec8;border-radius:6px;white-space:pre-wrap;overflow-wrap:anywhere;padding:10px;line-height:1.4;font-size:12px}
.api-methods{list-style:none;padding:0;font-size:11px;font-family:monospace;color:#738069;overflow-wrap:anywhere}
.api-methods li{padding:5px 0;border-bottom:1px solid var(--line)}
.login-page{min-height:100dvh;padding:0;display:grid;grid-template-columns:1fr 1fr;max-width:none;align-items:stretch}
.login-intro{background:var(--dark);padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#a7baaa}
.login-intro .brand{padding:0}
.login-intro h1{color:#fff;font-size:30px;letter-spacing:-1px;line-height:1.15;margin:12px 0}
.login-intro p{color:#98ad9a;line-height:1.6;font-size:13px}
.login-intro>small{color:#7e997f;font-size:11px}
.login-panel{max-width:400px;padding:24px 20px;width:100%;margin:auto}
.login-panel h2{font-size:20px}
.login-panel>p{margin-bottom:14px;font-size:12px}


/* Account security */
.sidebar nav{min-height:0;overflow-y:auto;gap:1px;scrollbar-width:thin}

.mfa-panel{max-width:880px;padding:var(--panel-padding)}

.mfa-panel>p{max-width:70ch;line-height:1.5}

.mfa-panel h3{margin:12px 0 6px}

.mfa-panel .field{max-width:460px}

.mfa-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

.mfa-actions .button{white-space:normal;text-align:center}

.mfa-facts{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0}

.mfa-facts dt{color:var(--muted);font-size:12px}

.mfa-facts dd{margin:4px 0 0;font-weight:600}

.mfa-setup-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;margin-top:10px}

.mfa-qr{display:block;width:256px;max-width:100%;height:auto;background:#fff;border:1px solid var(--line)}

.mfa-manual{margin-top:8px;max-width:280px}

.mfa-manual summary{cursor:pointer}

.mfa-manual p{font-size:13px;line-height:1.6}

.mfa-secret{display:block;overflow-wrap:anywhere;user-select:all;font-size:14px;line-height:1.6}

.mfa-cancel{margin-top:8px}

.mfa-recovery-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:8px 0;padding:0;gap:6px}

.mfa-recovery-list li{padding:6px;background:var(--bg);border:1px solid var(--line);text-align:center}

.mfa-recovery-list code{font-size:14px;user-select:all;white-space:nowrap}

.mfa-panel .panel-heading{padding:0 0 6px}
.mfa-panel .badge.success{background:#e9f2e7;color:#527549}

[data-conversation-timeline]{display:flex;flex-direction:column;flex:1}
[data-sync-status]{max-width:300px;text-align:right;font-size:11px}


/* Compact spacing is shared by every view; touch controls retain a larger target. */
.panel > :last-child{margin-bottom:0}
.page-heading > div,.page-heading > form{min-width:0}
.nav-item{flex-shrink:0;gap:7px;padding:3px 8px;min-height:26px}
.page-heading .button{white-space:normal;text-align:center}
.split-meta{flex-wrap:wrap;padding:6px var(--panel-padding);gap:8px}
.form-grid > *{min-width:0}
input[type=hidden]{display:none!important}
.mfa-setup-grid h3:first-child{margin-top:0}

.page-heading .eyebrow{display:none}
[data-compose]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
[data-compose] > *{grid-column:1 / -1;min-width:0}
[data-compose] > .field:has(#id_purpose),[data-compose] > .field:has(#id_name){grid-column:auto}
.settings-form .field:has(input[type=number]){display:flex;flex-direction:column}
.settings-form .field:has(input[type=number]) > label{flex:1}
@media(min-width:1100px){
  .settings-form .form-grid:has(input[type=number]){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1150px){
  main,.topbar{padding-inline:14px}
  .stats{gap:8px}
  .stat{padding:5px 8px}
  .notice.sandbox{flex-wrap:wrap}
  .form-layout,.docs-layout{grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr)}
  .dialog-layout{grid-template-columns:230px minmax(0,1fr)}
  .topbar-right{gap:10px}
  .user-name{display:none}
}
@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-row,.form-layout,.docs-layout{grid-template-columns:1fr}
  .overview-row{gap:0}
  .compose-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .settings-heading{display:block}
  .settings-heading>p{max-width:none}
  .dialog-layout{grid-template-columns:210px minmax(0,1fr)}
  .dialog-header,.reply-bar{flex-wrap:wrap}
  .login-intro{padding:28px}
  .login-intro h1{font-size:30px}
  .form-grid{gap:0 14px}
  .mfa-setup-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  :root{--panel-padding:10px;--control-height:44px}
  .sidebar{transform:translateX(-100%);width:238px}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vw #15231366}
  .sidebar .nav-item{min-height:40px}
  .app{margin-left:0}
  .menu-toggle{display:block;position:relative;z-index:31;border:0;background:#f1f4eb;color:#596e4b;border-radius:5px;padding:7px 12px;min-width:44px;min-height:44px}
  .topbar{display:grid;grid-template-columns:44px minmax(0,1fr);min-height:56px;padding:6px 14px;gap:6px 10px}
  .menu-toggle{grid-column:1;grid-row:1}
  .topbar-title{grid-column:2;grid-row:1}
  .topbar>.topbar-right{grid-column:1 / -1;grid-row:2;justify-self:end;max-width:100%}
  .topbar-right{gap:12px}
  .topbar .text-button{min-height:44px}
  .skip-link{left:14px}
  main{padding:10px 12px 0}
  .page-heading{align-items:flex-start;gap:10px}
  h1{font-size:20px}
  .page-heading .button{padding:7px 10px;font-size:11px}
  .page-heading .button .icon{display:none}
  .eyebrow{font-size:8px;letter-spacing:1px}
  .lead{margin-bottom:10px}
  .notice.sandbox{padding:10px 12px;gap:8px}
  .notice.sandbox>a{margin-left:0;white-space:normal}
  .stats{gap:8px}
  .stat{padding:6px}
  .stat>strong{font-size:22px}
  .panel-heading{gap:10px}
  .panel-heading>a{flex-shrink:0}
  .rhythm-line{max-width:110px}
  .compose-side{display:block}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .dialog-layout{display:block;min-height:0}
  .dialog-list{max-height:210px;border-bottom:1px solid var(--line);border-right:0}
  .dialog-item{padding:7px 10px}
  .dialog-header,.reply-bar{padding:8px 10px}
  .bubbles{padding:10px}
  .bubble{max-width:90%}
  .queue-banner{align-items:flex-start;flex-wrap:wrap;gap:8px}
  .queue-banner>.muted{text-align:left}
  .batch-row{align-items:flex-start;flex-direction:column}
  .batch-row form{flex-wrap:wrap}
  .filters input{min-width:100%}
  .filters select{flex:1;min-width:0;max-width:none}
  input:not([type=checkbox]):not([type=radio]),select,textarea,.filters select,.dialog-search input{font-size:16px}
  .button.small{min-height:40px}
  .checkbox-field>label{min-height:24px}
  .footer{font-size:10px;gap:12px;flex-wrap:wrap}
  .settings-heading>div{min-width:0}
  .login-page{display:block}
  .login-intro{min-height:auto;padding:14px 18px}
  .login-intro>div:not(.brand),.login-intro>small{display:none}
  .login-panel{padding:20px 18px}
  .facts>div{gap:10px}
  .facts dt{max-width:43%;white-space:normal}
  .submit-row{flex-wrap:wrap}
  th,td{padding:5px 8px}
  .mode{font-size:10px}
  .table-wrap table{min-width:660px}
  .mfa-recovery-list{grid-template-columns:minmax(0,1fr)}
  .mfa-actions .button{width:100%}
  .mfa-facts{gap:16px}
  [data-sync-status]{max-width:45%}
}
@media(prefers-reduced-motion:no-preference){
  .button,.nav-item{transition:background .15s}
  .sidebar{transition:transform .2s}
}

/* Unified message origins and Bitrix24 settings. */
.source-bitrix24{background:#e9e7f8;color:#5b4d93}.source-api{background:#e1edf6;color:#356986}.source-panel{background:#e9eee9;color:#48614f}.source-provider{background:#f2ebde;color:#79613c}
.endpoint{display:block;overflow-wrap:anywhere;padding:10px 0;font-size:12px}
.bitrix-steps{padding-left:22px}.bitrix-steps li{margin-bottom:10px}
.bitrix-portal-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.bitrix-portal-row>div{flex:1;min-width:220px}.bitrix-portal-row small{display:block;color:var(--muted)}
@media(min-width:360px) and (max-width:720px){
  .settings-form .form-grid:has(input[type=number]){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  [data-compose] > .field:has(#id_purpose),[data-compose] > .field:has(#id_name){grid-column:1 / -1}
  .stat{grid-template-columns:minmax(0,1fr) auto;gap:3px 5px}
  .stat>strong{grid-row:1;align-self:start}
  .stat small{grid-column:1 / -1}
}


/* Dense information rows retain all values and the existing text size. */
.overview-services{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.overview-service{padding:8px 10px;min-width:0}
.overview-service+.overview-service{border-left:1px solid var(--line)}
.overview-service-heading,.overview-service-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.overview-service-heading>a{font-weight:650}
.overview-service-heading>span{color:var(--muted);font-size:11px}
.overview-service-heading strong{font-size:12px;font-weight:600;color:var(--ink)}
.overview-service-meta{margin-top:4px;font-size:11px;color:var(--muted)}
.overview-service-meta b{font-weight:600;color:var(--ink)}
.message-table .date small{display:inline;margin:0 0 0 5px}
.message-table .source-cell{overflow-wrap:anywhere}
.message-table .bitrix-entity-links{display:block}
.message-table .bitrix-entity-links a{font-weight:600}
@media(min-width:1100px){
  .message-table .recipient-cell small,.message-table .source-cell small{display:inline;margin:0 0 0 6px}
  .message-table .recipient-cell{white-space:nowrap}
  .panel form:not([data-compose])>.field:not(.checkbox-field):is(:has(>input),:has(>select)){
    display:grid;grid-template-columns:minmax(120px,30%) minmax(0,1fr);gap:3px 10px;align-items:center;
  }
  .panel form:not([data-compose])>.field:not(.checkbox-field):is(:has(>input),:has(>select))>label{margin:0}
  .panel form:not([data-compose])>.field:not(.checkbox-field)>.help,
  .panel form:not([data-compose])>.field:not(.checkbox-field)>.errorlist{grid-column:2}
  .panel form:not([data-compose])>.field input,.panel form:not([data-compose])>.field select{min-width:0}
}
@media(max-width:720px){
  .overview-services{grid-template-columns:minmax(0,1fr)}
  .overview-service+.overview-service{border-left:0;border-top:1px solid var(--line)}
  .overview-service{padding:7px 9px}
}

/* Page actions share the content row instead of reserving a separate strip. */
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:8px}
.page-intro>:first-child{flex:1;min-width:0}
.page-intro>.button{flex-shrink:0;max-width:100%;white-space:normal;text-align:center}
.page-intro>.lead,.page-intro>p{margin:0}
.page-intro-copy>.lead{margin-bottom:4px}
.page-intro-copy>:last-child{margin-bottom:0}
.page-intro>[role=status]{flex:0 1 300px;min-width:0;text-align:right;font-size:11px}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px}
.page-toolbar>p{margin:0;flex:1;min-width:0}
.page-toolbar>.button{margin-left:auto}
.empty-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:4px}
.queue-list-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:8px 10px;border-top:1px solid var(--line)}
.queue-list-controls>.pagination{margin-left:auto}
.queue-list-controls .button,.empty-actions .button{max-width:100%;white-space:normal}
@media(max-width:720px){
  .page-intro{flex-wrap:wrap;align-items:flex-start;gap:6px 10px}
  .page-intro>:first-child{flex-basis:100%}
  .page-intro>.button{margin-left:auto}
  .page-intro>[role=status]{flex-basis:100%;max-width:none;text-align:left}
  .page-intro>.button,.page-toolbar>.button{min-height:40px}
}


.route-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px; align-items:start; }
.route-member { display:grid; grid-template-columns:minmax(0,1fr) 90px max-content; gap:8px 12px; align-items:end; border-top:1px solid var(--line); padding:10px 0; }
.route-member > .errorlist { grid-column:1 / -1; }
.route-member .field { margin-bottom:0; min-width:0; }
.route-member-options { display:flex; flex-wrap:wrap; gap:0 16px; }
.route-member-check { display:flex; align-items:center; gap:6px; min-height:var(--control-height); margin:0; font-weight:400; cursor:pointer; }
.route-member-check input { margin:0; }
.route-actions .danger { margin-inline-start:auto; }
.route-delete { overflow-wrap:anywhere; }
.route-usages { padding-inline-start:20px; }
.route-usages li + li { margin-top:6px; }
@media(max-width:1000px) { .route-layout { grid-template-columns:1fr; } }
@media(max-width:650px) {
  .route-member { grid-template-columns:minmax(0,1fr) 90px; }
  .route-member-options { grid-column:1 / -1; }
  .route-actions .danger { margin-inline-start:0; }
}

.message-preview{display:block;color:inherit;text-decoration:none;border-radius:3px}
.message-preview:hover{text-decoration:underline;color:#45523f}
.message-preview:focus-visible{outline:2px solid #b68c26;outline-offset:3px}