@charset "UTF-8";
:root {
  --ink:#263534;
  --muted:#7d8a88;
  --green:#167d6b;
  --green-dark:#0c6354;
  --pale:#eef7f2;
  --line:#e5eae7;
  --surface:#fff;
  --canvas:#f5f7f5;
  --font:"Segoe UI",Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
}

a {
  color:var(--green);
  text-decoration:none;
}

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

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

button {
  cursor:pointer;
}

button:disabled {
  opacity:.5;
  cursor:default;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #86bfb0;
  outline-offset:2px;
}

h1,h2,h3,p {
  margin:0;
}

label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:600;
}

input,select,textarea {
  width:100%;
  border:1px solid #dce4df;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  padding:11px 12px;
  min-width:0;
}

input::placeholder,textarea::placeholder {
  color:#9aa49e;
}

input[type=checkbox] {
  accent-color:var(--green);
  width:15px;
  height:15px;
  margin:0;
}

textarea {
  resize:vertical;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

[hidden] {
  display:none!important;
}

.muted {
  color:var(--muted);
}

.eyebrow,.field-caption {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--muted);
}

.eyebrow {
  font-size:11px;
}

.button-primary,.button-secondary,.button-quiet {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  white-space:nowrap;
  border-radius:8px;
  padding:10px 15px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  transition:background .15s;
}

.button-primary {
  background:var(--green);
  color:#fff;
}

.button-primary:hover {
  background:var(--green-dark);
}

.button-secondary {
  background:#fff;
  border-color:#dce5df;
  color:var(--ink);
}

.button-secondary:hover {
  background:#f4f8f5;
}

.button-quiet {
  background:transparent;
  color:var(--muted);
  padding:7px;
}

.button-quiet:hover {
  color:var(--green);
  background:var(--pale);
}

.full-width {
  width:100%;
}

.checkbox-label {
  flex-direction:row;
  align-items:center;
  font-weight:400;
  font-size:12px;
  gap:8px;
}

.count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  min-width:24px;
  height:23px;
  padding:0 6px;
  background:#edf1ed;
  color:#6e7d74;
  font-size:11px;
  vertical-align:middle;
  margin-left:6px;
}

.alert {
  padding:13px 16px;
  border:1px solid #efcbc1;
  background:#fff4ef;
  color:#a94e39;
  border-radius:8px;
  margin-bottom:20px;
}

.status-pill {
  padding:5px 10px;
  background:#edf7f0;
  color:#46825d;
  border:1px solid #dfede3;
  border-radius:6px;
  font-size:10px;
  white-space:nowrap;
}

.status-pill.inactive {
  color:#8c776c;
  background:#f6f1ed;
  border-color:#ece0d8;
}

.avatar {
  display:inline-flex;
  position:relative;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:14px;
  background:#e9efdf;
  color:#77865b;
  font-size:17px;
  font-weight:600;
}

.avatar-small {
  width:32px;
  height:32px;
  border-radius:10px;
  font-size:13px;
}

.avatar-large {
  width:70px;
  height:70px;
  border-radius:23px;
  font-size:28px;
}

.avatar-vk {
  background:#e8effa;
  color:#5d81b8;
}

.avatar-max {
  background:#eee8fa;
  color:#9271bc;
}

.avatar-telegram {
  background:#e3f1f9;
  color:#569ac1;
}

.avatar-avito {
  background:#f8ebe1;
  color:#bd946b;
}

.avatar-ok {
  background:#fcebdc;
  color:#bb8d58;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  font-size:20px;
  font-weight:750;
  letter-spacing:-.8px;
  white-space:nowrap;
}

.brand-product {
  font-size:15px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:-.25px;
  margin-left:7px;
}

.brand-mark {
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:29px;
  line-height:1;
  position:relative;
  font-weight:650;
  padding-bottom:4px;
}

.brand-mark span {
  width:6px;
  height:6px;
  background:#c9eb9d;
  border-radius:50%;
  position:absolute;
  bottom:7px;
  right:5px;
}

.app-header {
  height:72px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 27px;
  gap:48px;
}

.main-nav {
  align-self:stretch;
  display:flex;
  gap:26px;
}

.main-nav a {
  display:flex;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  border-bottom:2px solid transparent;
  padding-top:2px;
}

.main-nav a.active {
  color:var(--green);
  border-bottom-color:var(--green);
  font-weight:600;
}

.user-menu {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.user-name {
  font-size:12px;
  font-weight:600;
  line-height:1.4;
}

.user-name small {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:400;
}

.user-menu form {
  margin-left:18px;
}

.inbox {
  height:calc(100dvh - 72px);
  min-height:580px;
  display:grid;
  grid-template-columns:320px minmax(340px,1fr) 280px;
  background:#fff;
  max-width:1920px;
  margin:auto;
}

.conversation-panel {
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 22px 20px;
}

.panel-heading h1,.panel-heading h2 {
  font-size:19px;
  letter-spacing:-.5px;
  font-weight:650;
}

.live-label {
  font-size:10px;
  color:#9da8a0;
  display:flex;
  align-items:center;
  gap:5px;
}

.live-label.connected {
  color:#6c967a;
}

.live-label.connected:before,.status-dot {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  background:#78a083;
  border-radius:50%;
}

.filters {
  padding:0 20px 22px;
}

.search-label {
  position:relative;
}

.search-label input {
  background:#f6f8f5;
  border:1px solid #edf0ea;
  padding-left:37px;
  font-size:12px;
  font-weight:400;
}

.search-label svg {
  position:absolute;
  left:13px;
  top:13px;
  width:16px;
  height:16px;
  stroke:#93a092;
  stroke-width:1.6;
  fill:none;
}

.filter-row {
  display:flex;
  gap:8px;
  margin:10px 0 14px;
}

.filter-row label {
  flex:1;
}

.filter-row select {
  padding:8px 10px;
  font-size:11px;
}

.filter-row button {
  padding:8px 13px;
  font-size:11px;
}

.list-caption {
  padding:12px 21px;
  color:#98a296;
  font-size:9px;
  font-weight:650;
  letter-spacing:1.3px;
  border-top:1px solid var(--line);
}

.conversation-list {
  overflow:auto;
  flex:1;
}

.conversation-item {
  display:flex;
  gap:12px;
  padding:18px 18px;
  position:relative;
  color:var(--ink);
  border-left:3px solid transparent;
  border-bottom:1px solid #f3f5f1;
  transition:background .15s;
}

.conversation-item:hover {
  background:#f7faf6;
}

.conversation-item.selected {
  background:var(--pale);
  border-left-color:var(--green);
}

.conversation-summary {
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}

.conversation-title {
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.conversation-preview {
  color:#839085;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:4px 0 6px;
}

.conversation-channel {
  font-size:9px;
  color:#97a194;
}

.channel-dot {
  position:absolute;
  bottom:-2px;
  right:-2px;
  border:2px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  color:#fff;
  background:currentColor;
  width:16px;
  height:16px;
  border-radius:6px;
}

.avatar-vk .channel-dot {
  background:#6a95ce;
}

.avatar-max .channel-dot {
  background:#9c77d2;
}

.avatar-telegram .channel-dot {
  background:#62a9d3;
}

.avatar-avito .channel-dot {
  background:#b99b75;
}

.avatar-ok .channel-dot {
  background:#de9a52;
}

.conversation-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  font-size:9px;
  color:#9da79c;
  white-space:nowrap;
  padding-top:1px;
}

.unread-badge {
  min-width:18px;
  height:18px;
  padding:1px 5px;
  border-radius:6px;
  background:var(--green);
  color:#fff;
  font-size:9px;
  text-align:center;
}

.sidebar-footer {
  border-top:1px solid var(--line);
  padding:16px 22px;
  color:#99a494;
  font-size:10px;
  display:flex;
  gap:7px;
  align-items:center;
}

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

.list-empty span {
  display:block;
  font-size:11px;
  margin:8px 0 16px;
}

.pagination {
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:12px;
  font-size:11px;
  border-top:1px solid var(--line);
}

.thread-panel {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:#f5f7f4;
}

.thread-heading {
  height:85px;
  min-height:85px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border-bottom:1px solid var(--line);
  gap:15px;
}

.thread-person {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.thread-person>div {
  min-width:0;
}

.thread-heading h2 {
  font-size:14px;
  font-weight:650;
  overflow-wrap:anywhere;
}

.thread-heading p {
  font-size:10px;
  color:var(--muted);
  margin-top:3px;
}

.separator {
  color:#c6cfc2;
  padding:0 4px;
}

.demo-notice {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#faf9f3;
  border-bottom:1px solid #eeecdf;
  padding:9px 12px;
  font-size:10px;
  color:#a29b7b;
}

.demo-label {
  font-size:8px;
  letter-spacing:.7px;
  background:#ede9d9;
  color:#9a8b57;
  padding:2px 5px;
  border-radius:3px;
  font-weight:650;
  white-space:nowrap;
}

.message-list {
  overflow:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:15px 34px 22px;
}

.day-divider {
  text-align:center;
  margin:7px 0 14px;
  color:#9fa89a;
  font-size:9px;
}

.day-divider time {
  padding:5px 11px;
  background:#eaf0e7;
  border-radius:6px;
}

.message {
  max-width:82%;
  padding:13px 16px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e8ece3;
  align-self:flex-start;
  box-shadow:0 2px 2px #27362102;
  min-width:170px;
  overflow-wrap:anywhere;
}

.message-incoming {
  border-bottom-left-radius:3px;
}

.message-outgoing {
  align-self:flex-end;
  background:#e8f1e6;
  border-color:#dce8d9;
  border-bottom-right-radius:3px;
}

.message-system {
  align-self:center;
  color:var(--muted);
  background:transparent;
  border:0;
  text-align:center;
}

.message-author {
  display:block;
  font-size:10px;
  font-weight:600;
  color:#62785b;
  margin-bottom:5px;
}

.message-text {
  font-size:12px;
  line-height:1.7;
  white-space:pre-wrap;
}

.message-footer {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  color:#9ca591;
  font-size:8px;
  margin-top:9px;
}

.message-demo {
  font-size:8px;
}

.attachment {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #e5e9df;
  padding:10px;
  border-radius:8px;
  margin-top:10px;
}

.file-icon {
  display:flex;
  width:30px;
  height:35px;
  border-radius:6px;
  align-items:center;
  justify-content:center;
  background:#f1f4ec;
  font-size:20px;
  color:#9ba68c;
}

.attachment strong,.attachment span,.attachment small {
  display:block;
}

.attachment strong {
  font-size:11px;
  font-weight:500;
}

.attachment span,.attachment small {
  font-size:9px;
  color:var(--muted);
}

.composer {
  background:#fff;
  margin:0 24px 20px;
  border:1px solid #dfe6da;
  border-radius:11px;
  box-shadow:0 3px 8px #20312203;
}

.composer textarea {
  border:0;
  background:transparent;
  border-radius:10px;
  padding:15px 17px;
  font-size:12px;
  resize:none;
  display:block;
  min-height:77px;
}

.composer-footer {
  padding:7px 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.composer-footer>span {
  font-size:9px;
  color:#a3aa97;
  display:flex;
  gap:6px;
  align-items:center;
}

.composer-footer button {
  font-size:10px;
  padding:9px 12px;
}

.read-form {
  padding:2px 24px 6px;
  text-align:right;
}

.read-form .button-quiet {
  font-size:9px;
  padding:3px;
}

.older-link {
  align-self:center;
  font-size:10px;
  padding:6px 12px;
}

.update-notice {
  border:0;
  background:#d9eee5;
  color:var(--green);
  font-size:11px;
  padding:8px;
}

.thread-empty {
  margin:auto;
  font-size:12px;
  color:var(--muted);
}

.contact-panel {
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  overflow:auto;
  padding-bottom:16px;
}

.contact-panel .panel-heading {
  padding:26px 23px;
}

.contact-panel .panel-heading h2 {
  font-size:14px;
}

.contact-symbol {
  color:#a0ac9a;
  font-size:18px;
}

.contact-card {
  text-align:center;
  padding:15px 20px 24px;
}

.contact-card .avatar {
  margin-bottom:13px;
}

.contact-card h3 {
  font-size:15px;
  font-weight:650;
  overflow-wrap:anywhere;
}

.contact-card>.muted {
  font-size:10px;
  display:block;
  margin-top:4px;
}

.contact-section {
  padding:18px 24px;
  border-top:1px solid #eff2ec;
}

.contact-section p {
  font-size:12px;
  margin-top:9px;
  overflow-wrap:anywhere;
}

.field-caption {
  font-size:8px;
  letter-spacing:1.2px;
}

.identity {
  display:flex;
  gap:9px;
  align-items:center;
  margin-top:13px;
}

.identity-icon {
  display:flex;
  width:27px;
  height:27px;
  flex-shrink:0;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  font-size:11px;
  background:#edf0e8;
  color:#78806c;
}

.identity-icon.channel-vk {
  background:#edf1fa;
  color:#7899ce;
}

.identity-icon.channel-max {
  background:#f1eafa;
  color:#a083bd;
}

.identity-icon.channel-telegram {
  background:#e8f3f9;
  color:#64a2c2;
}

.identity>div {
  min-width:0;
}

.identity strong {
  display:block;
  font-size:10px;
  font-weight:500;
}

.identity div span {
  display:block;
  color:#9ba48f;
  font-size:10px;
  margin-top:2px;
  overflow-wrap:anywhere;
}

.contact-note {
  color:#99a28e;
  white-space:pre-wrap;
  line-height:1.7;
}

.assignee {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  margin:13px 0;
}

.assignee small {
  display:block;
  color:var(--muted);
  font-size:9px;
}

.assign-form {
  margin-top:12px;
}

.assign-form select {
  font-size:10px;
  padding:8px;
}

.assign-form button {
  font-size:10px;
  margin-top:3px;
}

.contact-bottom {
  margin-top:auto;
  padding:25px 24px 0;
  font-size:9px;
  color:#a5ad9b;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.empty-inbox {
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#f6f8f3;
}

.empty-symbol {
  font-size:68px;
  color:#b1c8b0;
  line-height:1.4;
}

.empty-inbox h2 {
  font-size:22px;
  letter-spacing:-.5px;
}

.empty-inbox p {
  text-align:center;
  font-size:13px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.8;
}

.login-layout {
  min-height:100dvh;
  display:grid;
  grid-template-columns:1fr 1fr;
}

.login-story {
  background:#edf3e9;
  padding:50px 65px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}

.login-story:after {
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  right:-210px;
  bottom:-160px;
  border:1px solid #d9e4d2;
  border-radius:50%;
  box-shadow:0 0 0 60px #e4ecdf,0 0 0 61px #dae4d3,0 0 0 120px #e9efe3;
  pointer-events:none;
}

.login-story>div {
  position:relative;
  z-index:1;
}

.login-story .eyebrow {
  color:#84947b;
  font-size:9px;
}

.login-story h1 {
  font-size:clamp(32px,3.8vw,56px);
  line-height:1.18;
  font-weight:550;
  letter-spacing:-2px;
  color:#3a5036;
  margin:23px 0;
}

.login-story p {
  font-size:13px;
  color:#88977d;
  line-height:1.8;
}

.login-story .login-footnote {
  font-size:10px;
  position:relative;
  z-index:1;
}

.login-form-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:48px;
}

.login-form {
  max-width:350px;
  width:100%;
}

.login-form h2 {
  font-size:29px;
  font-weight:600;
  letter-spacing:-.9px;
  margin:10px 0;
}

.login-form>.muted {
  font-size:12px;
  margin-bottom:34px;
}

.login-form label {
  margin-bottom:20px;
  font-size:11px;
}

.login-form input {
  padding:13px;
  font-size:12px;
}

.login-form>.button-primary {
  width:100%;
  margin:5px 0 0;
  justify-content:space-between;
  padding:13px 16px;
}

.login-help {
  font-size:10px;
  color:#a0a999;
  line-height:1.8;
  margin-top:24px;
}

.error-page {
  max-width:650px;
  margin:15vh auto;
  padding:35px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
}

.error-page h1 {
  font-size:26px;
  margin:12px 0;
}

.error-page p {
  margin-bottom:25px;
  color:var(--muted);
}

.admin-page {
  max-width:1200px;
  margin:0 auto;
  padding:38px 35px;
}

.admin-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px;
}

.admin-heading h1 {
  font-size:28px;
  letter-spacing:-.7px;
  margin:8px 0;
}

.admin-heading p {
  font-size:12px;
}

.admin-layout {
  display:grid;
  grid-template-columns:1fr 310px;
  gap:25px;
  align-items:start;
}

.user-list {
  display:flex;
  flex-direction:column;
  gap:18px;
}

.user-card,.create-user {
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:23px;
}

.user-card-heading {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:20px;
}

.user-card-heading h2 {
  font-size:14px;
  font-weight:600;
}

.user-card-heading .muted {
  font-size:11px;
}

.user-card-heading>.status-pill {
  margin-left:auto;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.form-grid label,.create-user label {
  font-size:10px;
  color:#819079;
}

.form-grid input,.form-grid select,.create-user input,.create-user select {
  font-size:11px;
  padding:10px;
}

.user-form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:20px;
}

.create-user h2 {
  font-size:18px;
  margin:8px 0 22px;
  letter-spacing:-.4px;
}

.create-user label {
  margin-bottom:15px;
}

.create-user .checkbox-label {
  margin:18px 0;
}

.create-user {
  position:sticky;
  top:25px;
}

.create-user .eyebrow {
  font-size:9px;
}

@media(min-width:1600px) {
  .inbox {
    grid-template-columns:350px minmax(500px,1fr) 310px;
  }
  .message-list {
    padding-left:60px;
    padding-right:60px;
  }
  .conversation-item {
    padding-top:22px;
    padding-bottom:22px;
  }
  .message-text {
    font-size:13px;
  }
}

@media(max-width:1120px) {
  .app-header {
    padding:0 20px;
    gap:30px;
  }
  .brand-product {
    display:none;
  }
  .inbox {
    grid-template-columns:280px minmax(340px,1fr) 240px;
  }
  .conversation-item {
    padding-left:12px;
    padding-right:12px;
    gap:8px;
  }
  .thread-heading {
    padding:0 20px;
  }
  .message-list {
    padding:15px 20px;
  }
  .contact-section {
    padding:16px 18px;
  }
  .composer-footer>span {
    max-width:190px;
    font-size:8px;
  }
  .composer-footer button {
    padding:8px;
  }
  .login-story {
    padding:40px;
  }
}

@media(max-width:940px) {
  .inbox {
    grid-template-columns:280px minmax(340px,1fr);
  }
  .contact-panel {
    grid-column:2;
    border-top:1px solid var(--line);
    border-left:0;
    display:block;
    max-height:350px;
  }
  .inbox {
    height:auto;
    min-height:calc(100dvh - 72px);
  }
  .conversation-panel {
    grid-row:span 2;
    max-height:calc(100dvh - 72px);
    position:sticky;
    top:0;
  }
  .thread-panel {
    height:calc(100dvh - 72px);
    min-height:580px;
  }
  .contact-panel .contact-card {
    padding-top:0;
  }
  .contact-panel .avatar-large {
    width:45px;
    height:45px;
    font-size:18px;
    border-radius:15px;
  }
  .admin-layout {
    grid-template-columns:1fr 280px;
  }
  .admin-page {
    padding:25px 20px;
  }
  .user-form-footer {
    flex-wrap:wrap;
  }
  .login-layout {
    grid-template-columns:.9fr 1.1fr;
  }
  .login-story {
    padding:35px 28px;
  }
  .login-story h1 {
    font-size:34px;
    letter-spacing:-1.3px;
  }
  .login-form-wrap {
    padding:30px;
  }
}

@media(max-width:680px) {
  .app-header {
    height:62px;
    padding:0 13px;
    gap:18px;
  }
  .brand {
    font-size:16px;
    gap:7px;
  }
  .brand-mark {
    width:27px;
    height:27px;
    font-size:25px;
  }
  .main-nav {
    gap:13px;
  }
  .main-nav a {
    font-size:10px;
  }
  .user-name {
    display:none;
  }
  .user-menu {
    gap:2px;
  }
  .user-menu form {
    margin-left:3px;
  }
  .user-menu .avatar {
    display:none;
  }
  .user-menu .button-quiet {
    font-size:10px;
  }
  .inbox {
    display:block;
    min-height:calc(100dvh - 62px);
  }
  .conversation-panel {
    position:static;
    max-height:390px;
  }
  .conversation-list {
    min-height:120px;
    max-height:220px;
  }
  .panel-heading {
    padding:16px 20px;
  }
  .filters {
    padding-bottom:12px;
  }
  .sidebar-footer {
    display:none;
  }
  .thread-panel {
    height:730px;
    min-height:0;
    border-top:1px solid var(--line);
  }
  .thread-heading {
    min-height:75px;
    height:75px;
    padding:0 18px;
  }
  .message {
    max-width:90%;
  }
  .message-list {
    padding:15px;
  }
  .composer {
    margin:0 12px 12px;
  }
  .composer-footer>span {
    max-width:145px;
  }
  .contact-panel {
    max-height:none;
  }
  .contact-panel .contact-card {
    padding:10px 20px 20px;
  }
  .empty-inbox {
    padding:65px 20px;
  }
  .empty-inbox h2 {
    font-size:20px;
  }
  .login-layout {
    display:block;
  }
  .login-story {
    min-height:220px;
    padding:25px;
  }
  .login-story>div {
    margin-top:30px;
  }
  .login-story h1 {
    font-size:32px;
    margin:10px 0 0;
  }
  .login-story>div>p,.login-footnote,.login-story .eyebrow {
    display:none;
  }
  .login-form-wrap {
    padding:40px 25px;
  }
  .admin-layout {
    display:flex;
    flex-direction:column-reverse;
  }
  .create-user {
    position:static;
    width:100%;
  }
  .user-list {
    width:100%;
  }
  .admin-heading>.status-pill {
    display:none;
  }
  .form-grid {
    grid-template-columns:1fr;
  }
  .admin-page {
    padding:25px 15px;
  }
  .user-card {
    padding:18px;
  }
  .user-card-heading .status-pill {
    font-size:8px;
  }
  .user-form-footer {
    gap:10px;
  }
  .error-page {
    margin:50px 15px;
    padding:25px;
  }
}
/* Account setup shares the existing admin forms, with wrapping commands on mobile. */
/* Compact inbox; the new-dialog window never takes space from the list. */
.new-dialog-launch { padding:16px 16px 10px; flex:none; }
.conversation-panel > .filters { padding:0 16px 12px; flex:none; }
.conversation-panel .filter-row { margin:8px 0; }
.conversation-panel .conversation-list { min-height:0; flex:1 1 0; overscroll-behavior:contain; }
.conversation-panel .pagination { flex:none; }
.new-max-dialog { width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); }
.new-max-dialog::backdrop { background:rgba(0,0,0,.45); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dialog-heading h2 { font-size:19px; }
.new-max-dialog label { display:block; margin:12px 0 8px; font-size:13px; }
.new-max-dialog input,.new-max-dialog select { width:100%; min-width:0; }
.new-max-dialog p { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
#max-search-result strong { display:block; margin-bottom:10px; overflow-wrap:anywhere; }
#max-search-status { color:var(--muted); }
.account-list-sync { border-top:1px solid var(--line); margin-top:16px; padding-top:12px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
@media (max-width:680px) {
  .conversation-panel { height:min(460px,calc(100dvh - 110px)); max-height:none; }
  .conversation-panel .conversation-list { max-height:none; }
}
.connection-notice { padding:16px 20px; background:#edf4f1; border-radius:12px; line-height:1.6; }
.connection-create { margin:24px 0; }
.connection-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.connection-card { min-width:0; }
.connection-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.connection-heading h2 { margin:8px 0; }
.connection-heading .eyebrow,.connection-binding,.connection-capabilities { overflow-wrap:anywhere; }
.connection-binding { font-size:13px; color:var(--muted); }
.connection-capabilities,.connection-settings,.telegram-control { font-size:13px; line-height:1.65; }
.connection-states { display:grid; gap:10px; padding:15px; background:#f6f8f7; border-radius:10px; }
.connection-states div { display:grid; grid-template-columns:110px 1fr; gap:10px; }
.connection-states dt { color:var(--muted); }.connection-states dd { margin:0; }
.connection-settings summary { cursor:pointer; font-weight:600; }
.connection-settings ol { padding-left:22px; }
.variable-list { padding:0; list-style:none; }
.variable-list li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid #e6eae8; }
.connection-settings code { overflow-wrap:anywhere; }
.connection-command { white-space:pre-wrap; overflow-wrap:anywhere; background:#f2f5f3; padding:12px; border-radius:8px; }
.telegram-control,.max-control { border-top:1px solid #e6eae8; margin-top:18px; padding-top:8px; font-size:13px; line-height:1.65; }
.qr-actions { display:flex; flex-wrap:wrap; gap:10px; }.qr-image { max-width:100%; height:auto; }
.connections-page .connection-edit .form-grid { grid-template-columns:1fr; }
@media (max-width:1000px) { .connection-list { grid-template-columns:1fr; } }
@media (max-width:700px) {
  .app-header { flex-wrap:wrap; height:auto; min-height:72px; gap:10px; }
  .main-nav { order:3; width:100%; justify-content:center; }
  .connection-states div { grid-template-columns:1fr; gap:2px; }
  .connection-heading { flex-wrap:wrap; }
  .connection-create .user-form-footer { flex-wrap:wrap; }
}
/* Managed MAX reads: controls stay within the inbox on narrow screens. */
.max-sync-controls { padding: 0 16px 10px; font-size: 12px; }
.max-sync-controls select { width: 100%; min-width: 0; margin-bottom: 6px; }
.max-sync-controls p { margin: 6px 0 0; overflow-wrap: anywhere; }
.max-history-controls { padding: 8px 16px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.max-history-controls span { flex: 1 1 180px; }
/* Private media stays inside the existing conversation bubble on all widths. */
.attachment { max-width:100%; flex-wrap:wrap; }
.attachment-details { min-width:0; overflow-wrap:anywhere; }
.attachment-photo { border:0; padding:0; background:transparent; cursor:zoom-in; max-width:100%; }
.attachment-photo img { display:block; width:200px; max-width:100%; max-height:180px; object-fit:contain; border-radius:8px; }
.attachment-actions { display:flex; flex-wrap:wrap; gap:10px; }
.attachment-actions button { font-size:12px; }
.attachment-viewer { max-width:94vw; max-height:94vh; border:0; border-radius:12px; padding:12px; }
.attachment-viewer::backdrop { background:rgba(0,0,0,.65); }
.attachment-viewer img { display:block; max-width:88vw; max-height:80vh; object-fit:contain; }
.composer-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.composer-media small { width: 100%; overflow-wrap: anywhere; }
.composer-media [data-upload-selected] { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.composer-media [data-upload-selected][hidden] { display: none; }
.composer-media [data-upload-selected] img { width: 90px; height: 70px; object-fit: contain; }
.composer-media [data-upload-selected] span { overflow-wrap: anywhere; min-width: 0; }
.composer-footer { flex-wrap: wrap; gap: 8px; }
.composer-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; max-width: 100%; }
.composer-actions button { white-space: nowrap; }
.composer > [data-upload-status] { display: block; overflow-wrap: anywhere; }
.composer > [data-upload-status]:empty { display: none; }