/* Panwar Chats 3.6 — one palette for the inbox, conversations and settings. */
:root {
  --bg:#edf3f5; --panel:#fff; --panel2:#f4f8f9; --text:#182f3b; --muted:#627a86;
  --border:#deeaee; --brand:#126b83; --brand2:#087f8c; --brand-soft:#e4f3f5;
  --success:#188275; --shadow:0 24px 70px #19384714; --sidebar-w:352px;
  --message-size:15px; --panwar-ui-scale:1;
}
body.dark {--bg:#0d1b24;--panel:#132530;--panel2:#192f3b;--text:#e4f1f5;--muted:#9bb3bf;--border:#28424f;--brand:#52bed2;--brand2:#1d7284;--brand-soft:#1b3c49;--success:#70d3b5;--shadow:0 24px 70px #0004}
body[data-accent="teal"] {--brand:#087d70;--brand2:#116c85;--brand-soft:#e0f2ed}
body[data-accent="indigo"] {--brand:#4c59ad;--brand2:#6369c8;--brand-soft:#ededfb}
body.dark[data-accent="teal"] {--brand:#59c9b6;--brand2:#176f65;--brand-soft:#193f3a}
body.dark[data-accent="indigo"] {--brand:#a2aaff;--brand2:#515ca8;--brand-soft:#2c3156}
html,body {font-family:'Segoe UI',Inter,system-ui,sans-serif;font-size:calc(14px * var(--panwar-ui-scale));overflow:hidden}
body {height:100dvh;line-height:1.5}
button,input,textarea,select {font:inherit}
button {transition:background .18s,color .18s,box-shadow .18s;touch-action:manipulation}
button:hover {transform:none}
button:disabled {cursor:wait;opacity:.6}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid color-mix(in srgb,var(--brand) 50%,transparent);outline-offset:3px}
input,textarea,select {border-radius:12px;accent-color:var(--brand)}
.eyebrow {font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--brand)}
.ui-icon {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.primary,.send-btn,.pro-save-btn,.profile-v5-save {background:var(--brand);color:#fff;box-shadow:none}
body.dark .primary,body.dark .send-btn,body.dark .pro-save-btn,body.dark .profile-v5-save {background:var(--brand2);color:#fff}
.primary:hover,.send-btn:hover {filter:brightness(1.08)}
.primary {display:inline-flex;gap:18px;justify-content:center;align-items:center;padding:13px 20px;border-radius:13px}
.icon-btn {width:38px;height:38px;flex:0 0 38px;background:transparent;border-color:transparent;border-radius:11px}
.icon-btn:hover {background:var(--brand-soft);color:var(--brand)}
.primary-soft {background:var(--brand-soft);color:var(--brand)}
.avatar {border-radius:15px;background:#dceef2;color:#246477;font-weight:650;box-shadow:none}
body.dark .avatar {background:#244956;color:#b9e5ed}
.avatar img {border-radius:inherit}
.logo {box-shadow:none}

/* Sign in */
.auth-shell {height:100dvh;overflow:auto;grid-template-columns:1.05fr 1fr;background:var(--panel);padding:28px;gap:30px}
.auth-hero {border-radius:30px;background:#e5f1f2;padding:clamp(35px,5vw,84px);position:relative;overflow:hidden;justify-content:center;align-items:flex-start}
body.dark .auth-hero {background:#19313c}
.auth-hero>.logo {margin-bottom:42px}
.auth-hero>.eyebrow {margin-bottom:14px}
.auth-hero h1 {font-size:clamp(36px,4.5vw,64px);font-weight:650;letter-spacing:-.055em;line-height:1.08;margin:0}
.auth-hero>p {font-size:16px;line-height:1.8;max-width:380px;margin:22px 0}
.auth-points {gap:16px;margin-top:28px}
.auth-points span {padding:0;border:0;background:none;font-size:11px}
.auth-points span::before {content:'\2713';margin-right:5px;color:var(--brand)}
.auth-conversation {align-self:stretch;max-width:370px;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.sample-message {align-self:flex-start;padding:13px 20px;border-radius:17px 17px 17px 4px;background:var(--panel);box-shadow:0 7px 18px #24444a08;font-size:13px}
.sample-message.mine {align-self:flex-end;background:var(--brand);color:white;border-radius:17px 17px 4px 17px}
body.dark .sample-message.mine {background:var(--brand2)}
.auth-conversation>span {text-align:right;color:var(--muted);font-size:10px;margin-top:0}
.auth-card {width:min(420px,92%);border:0;box-shadow:none;padding:24px 14px;border-radius:0}
.auth-tabs {background:var(--panel2);margin-bottom:30px}
.auth-tabs button {padding:10px}
.auth-tabs button.active {box-shadow:0 2px 7px #1b35490b;color:var(--brand);font-weight:650}
.stack {gap:19px}.stack h2 {font-size:27px;letter-spacing:-.035em}.stack label {color:var(--text);font-size:12px;font-weight:600}
.stack input {height:46px;font-weight:400}.stack .primary {margin-top:4px;height:46px}
.google-btn {border-radius:12px;height:46px;font-weight:550}.google-g {border:0;background:transparent}
.auth-divider {margin:24px 0;color:var(--muted);font-size:11px}

/* Inbox */
.app-shell {height:100dvh;grid-template-columns:var(--sidebar-w) minmax(0,1fr);padding:12px;gap:0;max-width:1920px;margin:auto}
.sidebar {border:1px solid var(--border);border-radius:22px 0 0 22px;overflow:hidden}
.side-top {padding:22px 22px 18px}.brand {gap:10px}.brand b {font-size:14px;letter-spacing:-.02em}.brand small {font-size:10px;margin-top:2px}
.brand .panwar-new-logo {width:35px!important;height:35px!important;min-width:35px!important;border-radius:11px!important}
.top-actions {gap:0}.top-actions .icon-btn {width:32px;height:34px;flex-basis:32px}
.me-card {order:10;margin:0;padding:16px 22px;border:0;border-top:1px solid var(--border);border-radius:0;background:var(--panel2);gap:10px}
.me-card .avatar {width:34px;height:34px;border-radius:11px;font-size:12px}.me-card b {font-size:12px}.me-card small {font-size:11px}
.inbox-heading {display:flex;align-items:center;justify-content:space-between;padding:12px 22px 16px}
.inbox-heading h1 {font-size:26px;letter-spacing:-.04em;line-height:1.2;font-weight:650;margin:7px 0 0;display:flex;align-items:center;gap:10px}
#inboxCount {font-size:11px;background:var(--brand-soft);color:var(--brand);padding:3px 7px;border-radius:8px;letter-spacing:0}
.search-row {padding:0 20px 16px;align-items:center;gap:4px}.search-row input {font-size:12px;background:var(--panel2);border:1px solid var(--border);height:41px;padding:10px 12px;min-width:0}
.search-row .icon-btn {flex-basis:34px;width:34px;height:36px}
.filters {padding:0 20px 17px;gap:4px;scrollbar-width:none;flex-shrink:0}
.filters button {border-radius:8px;background:none;padding:6px 9px;font-size:11px;font-weight:550}
.filters button.active {background:var(--brand-soft);font-weight:700}
.search-panel {margin:0 20px 12px;flex-shrink:0}.search-item {cursor:pointer}.search-item small {display:block}
.chat-list {padding:0 10px 16px;min-height:0;scrollbar-width:thin}
.chat-row {padding:14px 11px;gap:11px;margin-bottom:4px;border-radius:13px;outline:0;cursor:pointer;min-width:0}
.chat-row.active {background:var(--brand-soft);outline:0}.chat-row:hover {background:var(--panel2)}.chat-row.active:hover {background:var(--brand-soft)}
.chat-row .avatar {width:43px;height:43px}.chat-row .line1 b {font-size:13px;font-weight:650}.chat-row time {font-size:10px}.chat-row p {font-size:12px;line-height:1.5;margin-top:3px}
.chat-row .row-meta {display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.chat-row .draft-label {color:var(--brand);font-weight:600}.row-menu {width:25px;height:25px;border:0;background:transparent;color:var(--muted);border-radius:7px;font-size:20px;line-height:1}
.row-menu:hover {background:var(--panel)}.badge {font-size:10px;min-width:18px;height:18px;background:var(--brand)}
.side-bottom {order:11;padding:7px 14px 10px;grid-template-columns:repeat(3,1fr);border-top:0;background:var(--panel2);gap:3px}
.side-bottom button {font-size:11px;padding:7px;text-align:center}.side-bottom:has(#adminBtn:not(.hidden)) {grid-template-columns:repeat(4,1fr)}
.list-empty {padding:45px 22px;text-align:center;color:var(--muted);font-size:12px}.list-empty strong {display:block;color:var(--text);font-size:15px;margin:10px 0 5px}
.list-empty .ui-icon {height:30px;width:30px;color:var(--brand)}

/* Conversation */
.main-pane {border:1px solid var(--border);border-left:0;border-radius:0 22px 22px 0;overflow:hidden;background:var(--panel2)}
.empty-state {padding:40px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 65%)}
.welcome-orbit {padding:28px;border:1px solid var(--border);border-radius:50%;margin-bottom:28px;box-shadow:0 0 0 22px color-mix(in srgb,var(--border) 30%,transparent)}
.welcome-orbit .hero-logo {width:68px!important;height:68px!important;border-radius:21px!important}
.empty-state h2 {font-size:clamp(29px,3vw,43px);font-weight:600;letter-spacing:-.045em;line-height:1.2;margin:15px 0}
.empty-state p {font-size:13px;max-width:340px;margin:0 0 28px;line-height:1.8}.welcome-footnote {font-size:10px;margin-top:26px;color:var(--muted)}
.chat-view {display:flex;flex-direction:column;min-height:0;height:100%;position:relative;background:var(--panel2)}
.chat-header {height:78px;min-height:78px;padding:0 28px;background:var(--panel);backdrop-filter:none;flex-shrink:0;gap:12px}
.chat-header .avatar {height:40px;width:40px;border-radius:13px}.chat-head-copy b {font-size:14px;font-weight:650}.chat-head-copy small {font-size:11px;margin-top:2px}.chat-tools {gap:3px}
.messages {flex:1 1 0;min-height:0;padding:20px clamp(20px,4vw,65px);scrollbar-width:thin;scroll-behavior:auto;background-color:var(--panel2)}
body[data-wallpaper="dots"] .messages {background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:22px 22px}
body[data-wallpaper="grid"] .messages {background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:36px 36px}
.date-sep {margin:14px 0 25px;font-size:10px}.date-sep span {padding:5px 12px;background:var(--panel);border:1px solid var(--border)}
.message {max-width:min(560px,82%);margin:12px 0;flex-shrink:0}.bubble {max-width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:16px 16px 16px 4px;box-shadow:0 2px 4px #132f3b03;background:var(--panel)}
.message.mine .bubble {background:var(--brand);color:white;border:0;border-radius:16px 16px 4px 16px}
body.dark .message.mine .bubble {background:#1e657a}
.bubble .text {font-size:var(--message-size);line-height:1.6;overflow-wrap:anywhere}.bubble .meta {font-size:9px;margin-top:7px;opacity:.75}
.reply-mini {max-width:100%;font-size:11px}.sender-name {font-size:11px}
.attachment-image {max-width:100%;width:auto;height:auto;max-height:320px}.file-card,.voice-card {min-width:0;max-width:100%;overflow-wrap:anywhere}.voice-card audio {max-width:100%;width:240px;height:40px}
.file-card .file-icon {font-size:22px}.file-card a {min-width:0;font-size:12px}.file-card small {font-size:10px}
.typing-bar {height:22px;min-height:22px;flex-shrink:0;padding:0 28px;font-size:11px}
.composer {flex-shrink:0;margin:0 24px 22px;padding:9px;border-radius:16px;border:1px solid var(--border);box-shadow:0 4px 18px #1c354206;gap:5px}
.composer textarea {font-size:var(--message-size);min-width:0;line-height:1.5;padding:9px 7px}.composer .icon-btn {height:38px;width:34px;flex-basis:34px;color:var(--muted);cursor:pointer}
.send-btn {flex:0 0 40px;height:40px;width:40px;border-radius:12px;display:grid;place-items:center}
.reply-bar {flex-shrink:0;margin:0 24px;background:var(--panel);font-size:12px}.reply-bar span {max-width:60vw}
.message-search {flex-shrink:0;align-items:center;padding:10px 24px}.message-search input {min-width:0;font-size:12px}.message-search>span {font-size:10px;white-space:nowrap;color:var(--muted)}
.load-older {align-self:center;flex-shrink:0;padding:7px 16px;margin:8px;border-radius:9px;background:var(--panel);border:1px solid var(--border);color:var(--brand);font-size:11px}
.scroll-down {bottom:100px;right:30px;font-size:11px;border:1px solid var(--border)}
.recording-bar {bottom:22px;left:24px;right:24px}.emoji-panel {bottom:92px;left:24px}.chat-view.drag-active::after {content:'Drop a file to preview';position:absolute;inset:12px;border:2px dashed var(--brand);border-radius:18px;background:color-mix(in srgb,var(--panel) 95%,transparent);display:grid;place-items:center;color:var(--brand);font-size:20px;z-index:15;pointer-events:none}

/* Dialogs and settings */
.modal {z-index:150;background:#081d3066;padding:24px;backdrop-filter:blur(6px)}
.modal-card {border-radius:22px;padding:30px;box-shadow:var(--shadow);max-height:90dvh}.modal h2 {font-size:24px;letter-spacing:-.035em}.modal h3 {letter-spacing:-.02em}
.modal-close {z-index:20;top:14px;right:14px;background:var(--panel2);border:1px solid var(--border);font-size:20px}
.modal-card.professional-settings-modal {width:min(1020px,96vw)!important;height:min(780px,90dvh)!important;max-height:90dvh!important;border-radius:22px!important}
.settings-toolbar {display:flex;align-items:center;gap:20px;padding:22px 65px 22px 26px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--panel)}
.settings-toolbar h2 {font-size:19px;margin:0;white-space:nowrap}.settings-toolbar input {height:37px;font-size:12px;max-width:310px;margin-left:auto}
.professional-settings-modal #modalBody {display:flex;flex-direction:column}
.pro-settings {display:grid;grid-template-columns:220px minmax(0,1fr);flex:1;min-height:0!important;height:auto!important;max-height:none!important;overflow:hidden}
.pro-settings-nav {background:var(--panel2);border-right:1px solid var(--border);padding:22px 14px;overflow:auto}
.pro-settings-profile {padding:0 8px 22px;margin-bottom:15px;border-bottom:1px solid var(--border);gap:9px}.pro-settings-profile .avatar {height:37px;width:37px;font-size:12px;border-radius:12px}.pro-settings-profile b {font-size:12px}.pro-settings-profile small {font-size:10px}
.pro-settings-tab {border-radius:10px;padding:11px 13px;margin-bottom:5px;font-size:12px;gap:10px}.pro-settings-tab.active {background:var(--brand-soft);color:var(--brand)}
.pro-settings-main {padding:28px 35px 35px;scrollbar-gutter:stable;scrollbar-width:thin;height:auto!important}
.pro-settings-head h2 {font-size:25px;letter-spacing:-.04em}.pro-settings-head p {font-size:12px;line-height:1.7}.pro-settings-head {margin-bottom:22px}
.pro-settings-card {border-radius:15px;border:1px solid var(--border);box-shadow:none;overflow:hidden;background:var(--panel);margin-bottom:16px}
.pro-setting-control,.pro-switch-row,.pro-info-row {padding:17px 19px;gap:20px}.pro-setting-control b,.pro-switch-row b,.pro-row-copy b,.pro-info-row b {font-size:12px;font-weight:600}
.pro-setting-control small,.pro-switch-row small,.pro-row-copy small,.pro-info-row small {font-size:11px;line-height:1.6;margin-top:3px}
.pro-setting-control select {font-size:12px;min-width:150px;max-width:185px;padding:9px 11px;height:auto;background:var(--panel2)}
.pro-settings-row {padding:17px 19px;gap:12px}.pro-row-icon {background:var(--brand-soft);color:var(--brand);width:35px;height:35px;border-radius:10px}
.pro-switch-row i {background:var(--border)}.pro-switch-row input:checked+i {background:var(--brand)}.pro-switch-row input:focus-visible+i {outline:3px solid var(--brand);outline-offset:4px}
.pro-save-btn {font-size:12px;border-radius:11px;padding:12px 18px}.pro-settings-note {font-size:11px;border-radius:12px;background:var(--panel2);padding:15px;line-height:1.7;color:var(--muted)}
.danger-card {border-color:color-mix(in srgb,var(--danger) 24%,var(--border))}.danger-row .pro-row-icon {background:color-mix(in srgb,var(--danger) 8%,var(--panel));color:var(--danger)}
.settings-preview {padding:18px;background:var(--panel2);display:flex;flex-direction:column;gap:10px;border-radius:14px;margin-bottom:18px;font-size:12px}.settings-preview>span {font-size:9px;letter-spacing:.1em;color:var(--muted)}.settings-preview .sample-message {font-size:var(--message-size);padding:9px 14px}
.settings-search-empty {padding:36px 24px;text-align:center;color:var(--muted)}
.profile-v5-header {background:var(--panel2)}.profile-v5-header h2 {letter-spacing:-.04em}.profile-v5-hero {border-color:var(--border)}
.profile-v5-camera,.profile-v5-save {background:var(--brand);color:#fff}
.media-tabs {display:flex;gap:8px;margin:20px 0}.media-tabs button {border:1px solid var(--border);background:var(--panel2);color:var(--muted);padding:7px 14px;border-radius:9px;font-size:12px}.media-tabs button.active {color:var(--brand);background:var(--brand-soft);border-color:var(--brand)}
.media-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.media-grid a {display:block;aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--panel2)}.media-grid img {width:100%;height:100%;object-fit:cover}
.media-files {display:grid;gap:10px}.media-files .file-card,.media-files .voice-card {padding:14px;border:1px solid var(--border);border-radius:13px;color:var(--text)}
.upload-preview {border:1px solid var(--border);background:var(--panel2);border-radius:16px;margin:20px 0;padding:16px;text-align:center;overflow-wrap:anywhere}.upload-preview img {max-width:100%;max-height:300px;border-radius:10px;object-fit:contain}.upload-preview b,.upload-preview small {display:block;margin-top:8px}.upload-preview small {color:var(--muted)}
.legal-document {font-size:13px;line-height:1.8;overflow-wrap:anywhere}.legal-document h1 {font-size:23px;padding-right:28px}.legal-document h2 {font-size:17px;margin-top:25px}.legal-document small {color:var(--muted)}
.network-banner {z-index:200;font-size:12px}.toast {font-size:12px;border-radius:12px}
body.panwar-reduced-motion *,body.panwar-reduced-motion *::before,body.panwar-reduced-motion *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media(min-width:821px) and (max-width:1100px) {.app-shell {--sidebar-w:315px;padding:8px}.side-top {padding:18px 16px}.chat-header {padding:0 18px}.messages {padding:18px 24px}.inbox-heading {padding-left:18px}}
@media(max-width:820px) {
  .auth-shell {display:flex;align-items:center;justify-content:center;padding:20px;min-height:100dvh}.auth-hero {display:none}.auth-card {width:min(430px,100%);margin:auto;padding:24px 4px}
  .app-shell {padding:0;display:block;height:100dvh}.sidebar {position:absolute;inset:0 0 calc(64px + env(safe-area-inset-bottom)) 0;border:0;border-radius:0}.main-pane {position:absolute;inset:0;border:0;border-radius:0}
  .side-top {padding:19px 20px 10px}.inbox-heading {padding:13px 22px 18px}.inbox-heading h1 {font-size:27px}.search-row {padding-bottom:14px}.filters {padding-bottom:16px}
  .me-card {display:none}.side-bottom {padding:9px 16px;border-top:1px solid var(--border);background:var(--panel)}.side-bottom button {font-size:11px}
  .chat-row {padding:15px 12px}.chat-row .line1 b {font-size:14px}.chat-row p {font-size:12px}.chat-row .avatar {height:45px;width:45px}
  .mobile-nav {position:fixed;z-index:20;inset:auto 0 0;height:calc(64px + env(safe-area-inset-bottom));padding:5px 12px calc(5px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border-top:1px solid var(--border);backdrop-filter:none}
  .mobile-nav button {background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:10px;border-radius:12px}.mobile-nav button.active {background:var(--brand-soft);color:var(--brand)}.mobile-nav .ui-icon {height:20px;width:20px}
  .app-shell.chat-open .mobile-nav {display:none}.mobile-only {display:grid}
  .chat-header {height:70px;min-height:70px;padding:0 9px;gap:8px}.chat-header .avatar {height:35px;width:35px;border-radius:12px}.chat-tools {gap:0}.chat-tools .icon-btn {width:31px;flex-basis:31px;height:36px}.chat-head-copy b {font-size:13px}.chat-head-copy small {font-size:10px}
  .messages {padding:15px 14px}.message {max-width:87%;margin:10px 0}.bubble {max-width:100%;padding:10px 13px}.bubble .text {font-size:var(--message-size)}
  .composer {margin:0 9px calc(10px + env(safe-area-inset-bottom));padding:7px;gap:2px;border-radius:15px}.composer .icon-btn {width:30px;flex-basis:30px}.composer textarea {padding:9px 4px;font-size:max(16px,var(--message-size))}.send-btn {width:37px;flex-basis:37px;height:39px}.typing-bar {padding-left:18px}
  .reply-bar {margin:0 9px}.reply-bar span {max-width:70vw}.message-search {padding:9px 13px}.recording-bar {left:9px;right:9px;bottom:calc(10px + env(safe-area-inset-bottom))}.emoji-panel {left:9px;bottom:85px;width:calc(100% - 18px)}
  .modal {padding:12px}.modal-card {padding:24px 18px;max-height:92dvh}.modal-card h2 {padding-right:25px}
  .modal-card.professional-settings-modal {width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;max-width:none!important}
  .modal:has(.professional-settings-modal) {padding:0}.settings-toolbar {padding:18px 59px 14px 18px;gap:12px;flex-wrap:wrap}.settings-toolbar h2 {font-size:19px;padding-right:0}.settings-toolbar input {width:100%;max-width:none;margin:0;flex:1;min-width:130px}
  .pro-settings {display:flex;flex-direction:column;min-height:0!important}.pro-settings-nav {display:flex;overflow-x:auto;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--border);padding:9px;gap:5px}.pro-settings-profile {display:none}.pro-settings-tab {width:auto;flex-shrink:0;padding:9px 12px;margin:0;font-size:11px}.pro-settings-tab .panwar-svg {width:17px}
  .pro-settings-main {flex:1;min-height:0!important;height:auto!important;max-height:none!important;padding:24px 16px calc(25px + env(safe-area-inset-bottom))!important}.pro-settings-page {padding-bottom:20px}.pro-settings-head h2 {font-size:24px}
  .pro-setting-control {flex-direction:column;align-items:stretch;gap:11px;padding:16px}.pro-setting-control select {max-width:none;width:100%;font-size:16px;min-height:44px}.pro-switch-row {padding:16px}.pro-switch-row small {max-width:225px}.pro-switch-row input {right:16px!important}
  .media-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:365px) {.chat-header {gap:5px}.chat-header .avatar {display:none}.inbox-heading h1 {font-size:24px}.filters {padding-left:12px;padding-right:12px}.filters button {padding:6px 8px}.composer .icon-btn {width:28px;flex-basis:28px}.chat-tools .icon-btn {width:30px;flex-basis:30px}}
@media(max-width:820px) {
  .side-top {padding-top:calc(19px + env(safe-area-inset-top))}
  .chat-header {height:calc(70px + env(safe-area-inset-top));min-height:calc(70px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .settings-toolbar {padding-top:calc(18px + env(safe-area-inset-top))}
  .professional-settings-modal .modal-close,.professional-profile-modal .modal-close {top:calc(14px + env(safe-area-inset-top))}
  .auth-shell {padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .professional-profile-modal .profile-v5-header {padding-top:calc(28px + env(safe-area-inset-top))}
}