@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750&display=swap');

:root {
  color-scheme: dark;
  --ink: #f2f7f7; --muted: #a6bcbd; --line: #254345; --base: #030607;
  --nav: #071112; --pale: #122b2d; --accent: #46f2ee; --control: #102122;
  font: 14px Inter, system-ui, sans-serif; color: var(--ink); background: var(--base);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, select, summary { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(24px, 3vw, 39px); letter-spacing: -.05em; font-weight: 750; line-height: 1.12; }
h2 { font-size: 19px; letter-spacing: -.035em; }
h3 { font-size: 14px; }
small, .muted { color: var(--muted); }
.nav a { display: flex; align-items: center; text-decoration: none; border-radius: 9px; font-weight: 600; }
.icon { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.side-foot { margin-top: auto; display: grid; gap: 8px; }
.main { min-width: 0; padding: 15px clamp(8px, 1.55vw, 22px); width: 100%; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.header p { margin-top: 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.button, input, select, textarea { min-height: 36px; border-radius: 7px; border: 1px solid #305153; background: var(--control); padding: 7px 10px; color: var(--ink); min-width: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.button:hover { border-color: #5caaa9; }
.primary { color: #031515; background: linear-gradient(#61fff8, #16c9cd); border-color: #63efed; box-shadow: 0 0 13px #10cdc52c; }
.primary:hover { background: linear-gradient(#99fffa, #32dcdb); }
.quiet { background: transparent; }
.card { border: 1px solid var(--line); background: linear-gradient(154deg, #0d2122, #071112 64%); border-radius: 12px; min-width: 0; }
.block { padding: 12px; }
.section-title { margin-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.stat { display: grid; gap: 9px; }
.stat b { font-size: clamp(23px, 3vw, 38px); letter-spacing: -.06em; font-variant-numeric: tabular-nums; line-height: 1; }
.stat span { color: var(--muted); font-weight: 600; }
.funnel-dashboard { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.funnel-sidebar { display: grid; gap: 8px; min-width: 0; }
.funnel-dashboard .card { border-radius: 15px; }
.funnel {
  display: grid; grid-template-columns: minmax(80px, 1.05fr) minmax(0, 2fr) max-content max-content;
  gap: 4px 10px; margin: 10px 0 8px; padding: 0 10px; list-style: none;
}
.funnel-step {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center;
  min-height: 35px; margin-inline: -10px; padding: 5px 10px; border: 1px solid #234345;
  border-radius: 10px; background: #112729; font-variant-numeric: tabular-nums;
}
.funnel-label { font-size: 13px; font-weight: 600; }
.funnel-track {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; height: 12px;
  background: #09191a; border-radius: 999px; overflow: hidden;
}
.funnel-fill { width: var(--share); max-width: 100%; border-radius: inherit; background: linear-gradient(105deg, #20bfc1, #6af1e6); }
.funnel-count, .funnel-percent { text-align: right; white-space: nowrap; }
.funnel-percent { color: #85d7d2; font-size: 12px; }
.deck { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.deck .card + .card { margin-top: 8px; }
.app-grid { min-height: 100dvh; display: grid; grid-template-columns: 164px minmax(0, 1fr); }
.app-grid[data-compact="true"] { grid-template-columns: 54px minmax(0, 1fr); }
.side { height: 100dvh; display: flex; flex-direction: column; position: sticky; top: 0; gap: 8px; padding: 9px 7px; min-width: 0; border-right: 1px solid #163032; background: linear-gradient(165deg, #081a1b, #060c0d 65%); }
.crm-brand { display: flex; align-items: center; gap: 8px; min-height: 37px; padding-inline: 5px; white-space: nowrap; font-size: 16px; font-weight: 650; letter-spacing: -.03em; }
.crm-brand img { width: 28px; height: 28px; flex: none; }
.nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.nav a, .crm-nav-toggle, .crm-signout {
  min-height: 38px; justify-content: flex-start; gap: 8px; padding: 6px 8px; font-size: 13px; color: var(--muted); white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: #122829; }
.nav a[aria-current="page"] { color: var(--accent); background: linear-gradient(110deg, #134044, #10282a); box-shadow: inset 0 0 0 1px #235354; }
.side-foot { min-width: 0; font-size: 12px; }
.side-foot > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-grid[data-compact="true"] :is(.crm-brand, .nav a, .crm-nav-toggle, .crm-signout) { justify-content: center; padding-inline: 0; }
.app-grid[data-compact="true"] :is(.crm-brand, .nav a, .crm-nav-toggle, .crm-signout) > span,
.app-grid[data-compact="true"] .side-foot > :not(button) { display: none; }
.main, body:has(.login) {
  background:
    radial-gradient(ellipse at 53% 0%, transparent, #030607 66%),
    repeating-linear-gradient(0deg, #39ded710 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, #39ded710 0 1px, transparent 1px 36px),
    radial-gradient(ellipse at 50% 0%, #103e40 1%, #07191b 42%, #030607 68%);
}
.main.messenger-main { container-type: inline-size; padding: 8px; }
.inbox {
  position: relative; display: grid; grid-template-columns: clamp(196px, 21vw, 296px) minmax(0, 1fr) clamp(232px, 21vw, 310px);
  gap: 8px; height: calc(100dvh - 16px); min-height: 340px;
}
.inbox > .card { background: linear-gradient(154deg, #0d2122, #071112 52%, #060e0f); border-color: #244648; border-radius: 12px; min-height: 0; }
.inbox-list { display: flex; flex-direction: column; overflow: hidden; }
.search { display: grid; gap: 6px; padding: 9px 9px 8px; border-bottom: 1px solid var(--line); }
.search :is(input, select) { width: 100%; min-height: 33px; }
.search input::placeholder, .composer input::placeholder { color: #91abad; opacity: 1; }
.search-field { position: relative; }
.search-field .icon { color: var(--muted); pointer-events: none; position: absolute; top: 9px; left: 8px; width: 15px; height: 15px; }
.search-field input { padding-left: 30px; }
.inbox-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inbox-title h1 { font-size: clamp(18px, 1.65vw, 23px); font-weight: 600; letter-spacing: -.04em; }
.inbox-tools { gap: 4px; flex-wrap: nowrap; }
#threads { overflow: auto; overscroll-behavior: contain; padding: 3px 5px 6px; }
#threads > .button { margin: 8px; width: calc(100% - 16px); }
.thread-group { color: var(--muted); font-size: 12px; margin: 8px 7px 3px; font-weight: 600; }
.list-link { display: block; width: 100%; border: 0; background: transparent; text-align: left; text-decoration: none; color: var(--ink); border-radius: 7px; padding: 10px; }
.list-link:hover { background: var(--pale); }
.thread-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 51px; padding: 5px 6px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13px; }
.thread-row:hover { background: #102a2c; }
.thread-row[aria-current] { background: linear-gradient(110deg, #164449, #102d2f); box-shadow: inset 2px 0 #53dedb; }
.thread-row b, .thread-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row small { margin-top: 2px; font-size: 12px; }
.thread-meta { display: grid; justify-items: end; align-self: start; gap: 3px; padding-top: 3px; }
.thread-meta time { font-size: 10px; color: var(--muted); white-space: nowrap; }
.unread-badge { display: grid; place-items: center; background: #54f3ef; color: #092020; font-size: 10px; font-weight: 750; min-width: 17px; height: 17px; border-radius: 20px; padding: 0 3px; }
.avatar { position: relative; flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; font-weight: 750; color: #a6ecea; background: #234b4d; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-1 { color: #d6e0fc; background: #303f60; }
.avatar-2 { color: #c2efd4; background: #25493c; }
.avatar-3 { color: #f5d2be; background: #513b34; }
.avatar-4 { color: #d5e2e5; background: #354749; }
.thread { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.inbox > .thread { border-top-color: #46c7c6; box-shadow: 0 -3px 19px #38e5df13; }
.thread-head { display: flex; align-items: center; gap: 6px; min-height: 54px; border-bottom: 1px solid var(--line); padding: 7px 10px; background: radial-gradient(ellipse at 50% 0%, #1b4a4d, #0b1b1c 70%); }
.thread-head .actions { margin-left: auto; flex: none; gap: 5px; }
.thread-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.thread-person-label { min-width: 0; }
.thread-person h2, .thread-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-person h2 { font-size: 17px; font-weight: 650; }
.thread-person small { display: block; margin-top: 1px; }
.contact-handle { text-decoration: none; }
.contact-handle:hover { text-decoration: underline; }
.icon-button { width: 33px; min-height: 33px; padding: 0; flex: none; }
.alias-edit { border-color: transparent; background: transparent; color: var(--muted); }
.thread-head .mobile-back, .thread-head .mobile-lead { display: none; }
.history { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; overscroll-behavior: contain; padding: 8px clamp(8px, 1.2vw, 16px); scrollbar-gutter: stable; background: radial-gradient(ellipse at 48% 0%, #0b272a, transparent 64%); container-type: inline-size; }
.history > * { flex-shrink: 0; }
.history > .button { align-self: center; }
.chat-day { display: flex; align-items: center; align-self: center; width: min(70%, 390px); gap: 9px; margin: 4px 0 3px; color: var(--muted); font-size: 11px; text-align: center; }
.chat-day:first-child { margin-top: auto; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bubble { max-width: min(88%, 600px); align-self: flex-start; background: linear-gradient(150deg, #172e30, #102021); border: 1px solid #284348; padding: 6px 8px; border-radius: 10px 10px 10px 4px; overflow-wrap: anywhere; }
.bubble p { display: inline; white-space: pre-wrap; line-height: 1.42; }
.bubble .message-time { display: inline-block; margin-left: 7px; white-space: nowrap; font-size: 10px; opacity: .92; }
.bubble.with-media { padding: 4px; }
.bubble.with-media p { display: block; margin: 2px 4px 5px; }
.bubble.with-media .message-time { display: block; text-align: right; margin: 3px 3px 0; }
.message-pending .icon { margin-left: 4px; width: 12px; height: 12px; }
.message-retry { margin-left: 5px; padding: 0; border: 0; color: #ffd0be; background: transparent; font-size: 10px; text-decoration: underline; }
.lead-stage > div { display: grid; gap: 3px; }
.qualification { display: inline-flex; align-items: center; gap: 4px; }
#lead-qualification:empty { display: none; }
.qualification button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 5px; }
.qualification button:hover { background: #204d4e; }
.qualification button .icon { width: 14px; height: 14px; }
.payment-history small { display: block; margin-top: 4px; }
.bubble.out { align-self: flex-end; background: linear-gradient(155deg, #135456, #0c3336); border-color: #277276; border-radius: 10px 10px 4px 10px; }
.bubble.out small { color: #bde1e2; }
.message-visual { position: relative; width: fit-content; }
.message-visual + .message-visual { margin-top: 4px; }
.message-media { display: block; border-radius: 7px; }
.message-visual .message-media { max-width: min(390px, calc(88cqi - 10px)); max-height: min(320px, 47dvh); object-fit: contain; }
.message-video video { background: #030607; }
audio.message-media { width: min(300px, calc(88cqi - 10px)); max-width: 100%; }
.media-icon { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; border-radius: 50%; border: 1px solid #ffffff70; background: #071012de; color: #fff; }
.media-icon:hover { background: #163f43; border-color: #a8f7f4; }
.media-expand { position: absolute; right: 6px; bottom: 6px; }
/* Leave room for the video player's native controls. */
.message-video .media-expand { bottom: 42px; }
a.media-file { color: #fff; background: var(--control); border-color: var(--line); }
.composer { border-top: 1px solid var(--line); display: grid; padding: 7px; gap: 6px; }
.composer form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.composer-tools { display: flex; align-items: center; gap: 5px; }
.composer .attachment-picker { width: 35px; height: 35px; min-height: 35px; border-radius: 50%; padding: 0; background: var(--pale); color: var(--accent); }
.attachment-picker .icon { width: 19px; height: 19px; }
.attachment-preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-width: 0; gap: 8px; }
.attachment-thumb { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: var(--pale); color: var(--accent); }
.attachment-thumb img, .attachment-thumb video { width: 100%; height: 100%; object-fit: cover; }
.attachment-thumb .icon { width: 22px; height: 22px; }
.attachment-info { min-width: 0; }
.attachment-info b, .attachment-info small { display: block; }
.attachment-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.attachment-info small { margin-top: 3px; }
.composer .attachment-remove { border-color: transparent; min-height: 32px; width: 32px; padding: 0; color: var(--muted); }
.composer .attachment-remove:hover { background: var(--base); }
@media (max-width: 400px) {
  .composer form, .attachment-preview { gap: 5px; }
  .attachment-thumb { width: 40px; height: 40px; }
  .composer .button.primary { padding-inline: 7px; }
}
.profile { overflow: auto; min-height: 0; padding: 10px; overscroll-behavior: contain; }
.lead-heading, .lead-stage, .lead-reminders { display: flex; align-items: center; gap: 6px; justify-content: space-between; flex-wrap: wrap; }
.lead-heading { margin-bottom: 8px; }
.lead-heading h2 { font-size: 17px; }
.lead-stage { margin-bottom: 6px; }
.lead-stage .pill { color: #a4e7e5; background: #143b3c; }
.profile .button { min-height: 30px; padding: 3px 6px; font-size: 12px; }
.profile :is(input:not([type="range"]), select, textarea) { min-height: 32px; padding-block: 5px; }
.profile label { font-size: 12px; gap: 3px; }
.profile .row { padding-block: 6px; }
.lead-reminders { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 7px; }
.lead-first { display: block; margin-top: 8px; }
.ai-button { color: #b5f6f4; background: #122a2b; }
.ai-button .icon { width: 13px; height: 13px; }
.warmth { margin: 4px 0 3px; }
.warmth > span { display: flex; justify-content: space-between; gap: 8px; }
.warmth output { color: #a4e7e5; font-size: 12px; }
.warmth input { appearance: none; cursor: pointer; margin: 7px 0; min-height: 10px; height: 10px; border: 0; padding: 0; border-radius: 20px; background: linear-gradient(90deg, #245bfa, #58caff 33%, #f9dc57 58%, #ff933e 77%, #df344d); }
.warmth input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border: 2px solid #243c70; border-radius: 50%; background: white; }
.warmth input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #243c70; border-radius: 50%; background: white; }
.profile form { display: grid; gap: 6px; }
.stack { display: grid; gap: 9px; }
.review-changes { display: grid; gap: 8px; }
.review-change { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-change input { min-height: 0; margin-top: 3px; }
.review-change b, .review-change small, .review-change span span { display: block; margin-bottom: 3px; }
.profile .split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
textarea { width: 100%; resize: vertical; }
label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.pill { display: inline-block; width: fit-content; padding: 4px 8px; border-radius: 6px; color: #a4e7e5; background: var(--pale); font-size: 12px; font-weight: 650; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; }
td, th { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 12px; color: var(--muted); font-weight: 700; }
td:not(:first-child), th:not(:first-child) { text-align: right; }
.rows { display: grid; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 9px 0; }
.row small { display: block; margin-top: 4px; }
.field-row { gap: 8px; align-items: end; }
.field-row input { max-width: 155px; }
.empty { padding: 16px 11px; color: var(--muted); }
.login { width: min(420px, calc(100% - 20px)); margin: 12vh auto; padding: 22px; }
.login h1 { margin-bottom: 20px; }
dialog { width: min(94vw, 550px); border: 1px solid var(--line); border-radius: 12px; padding: 13px; color: var(--ink); background: #0c191a; max-height: 90dvh; }
dialog::backdrop { background: #11182999; }
dialog .header { margin-bottom: 12px; }
#media-viewer { width: fit-content; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 4px; overflow: hidden; background: #071012; color: #f2f7f7; }
#media-viewer::backdrop { background: #020606e8; }
#media-viewer > button { position: absolute; top: 9px; right: 9px; z-index: 1; }
.media-viewer-content :is(img, video) { display: block; max-width: min(1100px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); object-fit: contain; border-radius: 8px; }
.media-viewer-content p { padding: 40px 48px; }
#toast { position: fixed; bottom: 16px; right: 16px; max-width: min(440px, calc(100vw - 32px)); z-index: 5; background: var(--nav); color: white; padding: 11px 14px; border-radius: 8px; box-shadow: 0 6px 24px #10172520; }
#toast:empty { display: none; }
.booking-calendar { display: grid; gap: 10px; }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; text-transform: capitalize; }
.calendar-next .icon { transform: rotate(180deg); }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 5px 2px; }
.calendar-day { width: min(100%, 38px); aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); }
.calendar-day.available { border-color: #57c990; color: var(--ink); }
.calendar-day.available:hover, .calendar-day[aria-pressed="true"] { background: #1c674b; }
.calendar-slots { display: flex; flex-wrap: wrap; gap: 5px; }
.calendar-slots label { position: relative; cursor: pointer; }
.calendar-slots input { position: absolute; opacity: 0; }
.calendar-slots span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.calendar-slots input:checked + span { background: #174b41; border-color: #57c990; }
.calendar-slots input:focus-visible + span { outline: 2px solid var(--accent); }
.calendar-booking { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 7px; }
.telegram-access { margin-top: 8px; }
.telegram-access td small { display: block; margin-top: 3px; white-space: nowrap; }
.telegram-request-actions { justify-content: flex-end; flex-wrap: nowrap; }
.telegram-topics { margin-bottom: 8px; }
.lead-quick { gap: 5px; margin-bottom: 6px; }
.lead-linked { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--control); text-decoration: none; overflow-wrap: anywhere; }
.lead-linked:hover { border-color: var(--accent); }
.telegram-qr { display: block; width: min(230px, 100%); margin: 10px auto 0; border-radius: 10px; background: white; }
.plan-filters { align-items: end; }
.plan-filters .button { min-width: 32px; }
.plan-progress { display: grid; gap: 5px; margin: 12px 0; }
.plan-progress > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-progress strong { color: var(--accent); }
.plan-progress progress { width: 100%; height: 8px; accent-color: var(--accent); }
.plan-task label { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.plan-task input { accent-color: var(--accent); width: 18px; min-height: 18px; margin: 0; flex: 0 0 18px; cursor: pointer; }
.plan-task input:checked + span { color: var(--muted); text-decoration: line-through; }
.plan-task .actions { justify-content: flex-end; }
@media (max-width: 1080px) { .team-deck { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 750px) {
  .deck, .funnel-dashboard { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 5px; }
  .stat, .block { padding: 10px; }
  .stat span { font-size: 12px; }
}
@media (max-width: 570px) {
  .field-row { row-gap: 6px; }
  .funnel { grid-template-columns: minmax(68px, 1.15fr) minmax(0, 1fr) max-content max-content; column-gap: 6px; }
  .funnel-label, .funnel-count { font-size: 12px; }
}
@container (max-width: 920px) {
  .inbox { grid-template-columns: minmax(176px, 30%) minmax(0, 1fr); }
  .inbox .profile { display: none; }
  .inbox .profile.lead-open {
    display: block; position: absolute; inset: 56px 0 50px auto; width: min(100%, 300px);
    z-index: 1; box-shadow: -10px 8px 24px #020606aa;
  }
  .thread-head .mobile-lead { display: inline-flex; }
  .mobile-lead[aria-expanded="true"] { color: var(--accent); border-color: #56c9c8; }
}
@container (max-width: 625px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox:not(.chat-open) :is(.thread, .profile), .inbox.chat-open .inbox-list { display: none; }
  .thread-head .mobile-back { display: inline-flex; }
  .thread-head { padding: 6px; }
  .export-button span { display: none; }
  .export-button { width: 33px; padding: 0; }
}
@media (max-width: 820px) {
  .app-grid[data-compact] { grid-template-columns: 48px minmax(0, 1fr); }
  .side { z-index: 2; padding-inline: 5px; }
  .app-grid[data-compact="false"] .side { width: 164px; box-shadow: 12px 0 26px #0009; }
  .main.messenger-main { padding: 5px; }
  .inbox { height: calc(100dvh - 10px); }
}