:root {
    color-scheme:dark;
    --bg:#0b1220;
    --panel:#101b2d;
    --sidebar:#0e1828;
    --raised:#162238;
    --input:#0b1526;
    --text:#edf2ff;
    --muted:#95a5c0;
    --subtle:#8293b0;
    --line:#24324a;
    --accent:#7498ff;
    --accent-solid:#466ad6;
    --accent-soft:#263c69;
    --incoming:#18263d;
    --outgoing:#29437a;
    --error:#ff9fa9;
    --online:#61dca6;
    --shadow:0 22px 70px #02071350;
    --app-height:100dvh
}

:root[data-theme="light"] {
    color-scheme:light;
    --bg:#edf2fa;
    --panel:#fff;
    --sidebar:#f8faff;
    --raised:#e8eef8;
    --input:#f1f5fb;
    --text:#172a46;
    --muted:#526683;
    --subtle:#526985;
    --line:#d9e2f0;
    --accent:#365fd3;
    --accent-solid:#466ad6;
    --accent-soft:#e2eaff;
    --incoming:#fff;
    --outgoing:#dbe6ff;
    --error:#b62944;
    --online:#158757;
    --shadow:0 22px 70px #193b6320
}

* {
    box-sizing:border-box
}

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

body {
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.5
}

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

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

button {
    cursor:pointer;
    color:inherit
}

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

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

a:hover {
    text-decoration:underline
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:3px
}

svg {
    display:block
}

.icon-definitions {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}

.icon {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}

.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 {
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--accent);
    margin:0 0 18px
}

.brand {
    display:flex;
    align-items:center;
    gap:0;
    font-size:22px;
    font-weight:750;
    letter-spacing:-.045em;
    color:var(--text);
    white-space:nowrap
}

.brand:hover {
    text-decoration:none
}

.brand-accent {
    color:var(--accent)
}

.brand-mark {
    display:inline-grid;
    place-items:center;
    width:35px;
    height:35px;
    border-radius:12px;
    background:linear-gradient(140deg,#91adff,#5a80ed);
    color:#0b1731;
    font-weight:850;
    font-size:28px;
    line-height:1;
    margin-right:10px;
    letter-spacing:-.07em;
    box-shadow:inset 0 1px 0 #ffffff40
}

.brand-mark-large {
    width:64px;
    height:64px;
    border-radius:22px;
    font-size:50px;
    margin:0 auto 24px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    width:100%;
    padding:12px 18px;
    border-radius:13px;
    border:1px solid transparent;
    font-size:14px;
    font-weight:650;
    transition:background .15s,transform .15s
}

.button.primary {
    background:var(--accent-solid);
    color:#fff;
    box-shadow:0 5px 20px #486ee924
}

.button.primary:hover:not(:disabled) {
    background:#486edc
}

.button.secondary {
    background:var(--raised);
    border-color:var(--line);
    color:var(--text)
}

.button.secondary:hover {
    background:var(--accent-soft)
}

.button.compact {
    width:auto
}

.button.danger {
    color:var(--error);
    border-color:var(--line);
    background:var(--raised)
}

.icon-button {
    display:inline-grid;
    place-items:center;
    width:38px;
    height:38px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--muted);
    flex-shrink:0
}

.icon-button:hover {
    color:var(--text);
    background:var(--raised)
}

.icon-button.accent {
    color:var(--accent);
    background:var(--accent-soft)
}

/* Loading is the only visible screen before session restoration. */
.auth-shell {
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:100px 28px 72px;
    background:radial-gradient(ellipse at 12% 0%,#4063aa26,transparent 50%),var(--bg);
    position:relative
}

.auth-home {
    position:absolute;
    top:30px;
    left:40px
}

.auth-footer {
    position:absolute;
    bottom:20px;
    left:20px;
    right:20px;
    text-align:center;
    color:var(--subtle);
    font-size:12px
}

.auth-card {
    width:100%;
    max-width:420px;
    padding:38px;
    border:1px solid var(--line);
    border-radius:24px;
    background:var(--panel);
    box-shadow:var(--shadow)
}

.auth-card h1 {
    font-size:27px;
    line-height:1.2;
    letter-spacing:-.035em;
    margin:0 0 12px
}

.auth-card>.muted {
    margin:0 0 26px;
    line-height:1.7
}

.loading-box {
    text-align:center
}

.loading-box .eyebrow {
    margin-bottom:14px
}

.loading-box h1 {
    font-size:24px
}

.loading-box .button {
    margin-top:22px
}

.loading-spinner {
    width:34px;
    height:34px;
    margin:25px auto;
    border:3px solid var(--line);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:loading-spin .9s linear infinite
}

.login-layout {
    display:grid;
    grid-template-columns:1fr 420px;
    gap:100px;
    align-items:center;
    width:min(100%,1020px)
}

.login-story h2 {
    font-size:clamp(42px,5vw,62px);
    line-height:1.04;
    letter-spacing:-.065em;
    margin:0 0 24px
}

.login-story>p {
    color:var(--muted);
    max-width:350px;
    font-size:16px;
    line-height:1.8
}

.platform-chips {
    display:flex;
    gap:9px;
    margin-top:26px
}

.platform-chips span {
    padding:7px 13px;
    border:1px solid var(--line);
    border-radius:9px;
    color:var(--muted);
    font-size:12px
}

.story-orbit {
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    width:250px;
    height:110px;
    margin-top:25px;
    color:var(--accent)
}

.story-orbit>.icon {
    width:70px;
    height:70px;
    stroke-width:.9;
    transform:rotate(-10deg)
}

.orbit-dot {
    position:absolute;
    width:12px;
    height:12px;
    left:65px;
    top:12px;
    border-radius:50%;
    background:var(--online);
    box-shadow:0 0 0 7px var(--bg)
}

.orbit-caption {
    font-size:13px;
    color:var(--muted)
}

.field {
    display:block;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    margin:23px 0
}

.field input {
    display:block;
    width:100%;
    height:47px;
    margin-top:8px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--input);
    color:var(--text);
    font-size:16px
}

.field input:focus {
    border-color:var(--accent)
}

.form-error {
    margin:12px 0;
    color:var(--error);
    font-size:13px;
    overflow-wrap:anywhere
}

.form-error:empty {
    display:none
}

.service-state {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:22px;
    color:var(--subtle);
    font-size:12px
}

.status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--subtle);
    flex-shrink:0
}

.account-help {
    font-size:12px;
    line-height:1.7;
    color:var(--subtle);
    text-align:center;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin:20px 0 0
}

/* Persistent conversation panes keep drafts and keyboard access stable. */
#appView {
    height:var(--app-height);
    min-height:0;
    overflow:hidden
}

.messenger {
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    width:100%;
    height:100%;
    max-width:1920px;
    margin:auto;
    background:var(--panel);
    border-inline:1px solid var(--line)
}

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

.sidebar-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:77px;
    padding:0 23px;
    flex-shrink:0
}

.web-badge {
    font-size:9px;
    letter-spacing:.12em;
    padding:3px 7px;
    border-radius:5px;
    color:var(--subtle);
    background:var(--raised)
}

.profile {
    display:flex;
    align-items:center;
    gap:11px;
    padding:5px 18px 20px;
    min-width:0
}

.avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:15px;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:700;
    font-size:17px;
    position:relative;
    flex-shrink:0
}

.self-avatar {
    background:var(--raised);
    color:var(--text)
}

.avatar.online::after {
    content:"";
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--online);
    border:2px solid var(--sidebar)
}

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

.profile-copy strong {
    display:block;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.profile-copy>span {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:3px
}

.profile-copy>span[data-state="connected"] {
    color:var(--online)
}

.connection-retry {
    margin:0 18px 14px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--accent);
    background:var(--raised);
    font-size:12px
}

.chat-tools {
    padding:0 18px
}

.search-field {
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--input);
    border:1px solid var(--line);
    border-radius:11px;
    padding:0 12px;
    color:var(--subtle);
    min-height:43px
}

.search-field .icon {
    width:17px;
    height:17px
}

.search-field input {
    width:100%;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--text);
    outline:none;
    font-size:13px;
    padding:10px 0
}

.search-field:focus-within {
    border-color:var(--accent)
}

.search-field input:focus-visible {
    outline:0
}

.search-field input::placeholder {
    color:var(--subtle)
}

.list-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 18px 11px
}

.list-heading h1 {
    font-size:13px;
    letter-spacing:-.01em;
    margin:0
}

.list-heading h1 span {
    font-size:10px;
    color:var(--subtle);
    font-weight:500;
    margin-left:5px
}

.list-heading .icon-button {
    width:29px;
    height:29px;
    border-radius:8px
}

.list-heading .icon {
    width:18px;
    height:18px
}

.chats {
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:0 10px 15px;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent
}

.chat-item {
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;
    text-align:left;
    padding:13px 10px;
    margin-bottom:4px;
    border:1px solid transparent;
    border-radius:13px;
    background:transparent;
    transition:background .15s
}

.chat-item:hover {
    background:var(--raised)
}

.chat-item.active {
    background:var(--accent-soft);
    border-color:color-mix(in srgb,var(--accent) 20%,transparent)
}

.chat-item .avatar {
    width:45px;
    height:45px;
    background:var(--raised);
    color:var(--muted)
}

.chat-item.active .avatar {
    background:var(--panel);
    color:var(--accent)
}

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

.chat-top,.chat-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.chat-name {
    font-weight:650;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.chat-time {
    font-size:10px;
    color:var(--subtle);
    white-space:nowrap;
    flex-shrink:0
}

.chat-preview {
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.5;
    margin-top:5px
}

.unread-badge {
    background:var(--accent-solid);
    color:#fff;
    font-size:10px;
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:6px;
    padding:0 4px
}

.sidebar-footer {
    min-height:62px;
    padding:12px 18px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:5px;
    justify-content:space-between;
    flex-shrink:0
}

.sidebar-caption {
    font-size:10px;
    color:var(--subtle)
}

.list-empty {
    text-align:center;
    color:var(--muted);
    padding:32px 14px;
    font-size:13px;
    line-height:1.7
}

.list-empty strong {
    display:block;
    color:var(--text);
    font-size:14px;
    font-weight:600;
    margin-bottom:7px
}

.inline-error {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 12px;
    color:var(--error);
    font-size:12px;
    margin:0 14px 10px;
    border:1px solid color-mix(in srgb,var(--error) 30%,transparent);
    border-radius:9px;
    background:color-mix(in srgb,var(--error) 4%,var(--panel))
}

.inline-error button {
    background:transparent;
    border:0;
    color:var(--accent);
    padding:5px;
    font-size:12px
}

.chat-area {
    min-width:0;
    min-height:0;
    position:relative;
    background:radial-gradient(ellipse at 80% 0%,#678dff05,transparent 70%),var(--bg)
}

.welcome-pane {
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:32px
}

.welcome-illustration {
    position:relative;
    width:120px;
    height:120px;
    display:grid;
    place-items:center;
    color:var(--accent);
    margin-bottom:34px
}

.welcome-illustration .icon {
    width:85px;
    height:85px;
    stroke-width:.7;
    transform:rotate(-9deg)
}

.welcome-orbit {
    position:absolute;
    inset:0;
    border:1px solid var(--line);
    border-radius:36px;
    transform:rotate(12deg)
}

.welcome-orbit::after {
    content:"";
    width:9px;
    height:9px;
    background:var(--online);
    border-radius:50%;
    position:absolute;
    right:5px;
    top:3px;
    box-shadow:0 0 0 6px var(--bg)
}

.welcome-pane .eyebrow {
    font-size:9px;
    margin-bottom:14px
}

.welcome-pane h2 {
    font-size:clamp(24px,3vw,35px);
    letter-spacing:-.045em;
    margin:0 0 13px
}

.welcome-pane p:not(.eyebrow) {
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
    margin:0 0 27px
}

.active-chat-pane {
    height:100%;
    display:flex;
    flex-direction:column;
    min-height:0
}

.chat-header {
    height:78px;
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:13px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    flex-shrink:0
}

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

.header-copy h2 {
    margin:0;
    font-size:14px;
    letter-spacing:-.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

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

.header-copy p.online {
    color:var(--online)
}

.header-avatar {
    width:39px;
    height:39px;
    border-radius:13px
}

.conversation-label {
    font-size:9px;
    letter-spacing:.12em;
    color:var(--subtle)
}

.mobile-back {
    display:none
}

.message-history {
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0
}

.messages {
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:25px max(28px,calc((100% - 850px)/2));
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent
}

.messages-loading {
    text-align:center;
    color:var(--muted);
    padding:35px 18px;
    font-size:13px
}

.history-more {
    margin:10px auto 0;
    background:var(--raised);
    color:var(--muted);
    font-size:11px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 14px;
    flex-shrink:0
}

.history-error {
    margin:10px 20px 0;
    flex-shrink:0
}

.day-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    color:var(--subtle);
    font-size:10px;
    margin:10px 0 24px
}

.day-divider::before,.day-divider::after {
    content:"";
    width:45px;
    height:1px;
    background:var(--line)
}

.message-row {
    display:flex;
    margin:0 0 13px;
    gap:8px
}

.message-row.mine {
    justify-content:flex-end
}

.message-bubble {
    max-width:min(78%,590px);
    background:var(--incoming);
    border:1px solid var(--line);
    border-radius:16px 16px 16px 5px;
    padding:11px 14px;
    min-width:65px
}

.mine .message-bubble {
    background:var(--outgoing);
    border-color:color-mix(in srgb,var(--accent) 15%,transparent);
    border-radius:16px 16px 5px 16px
}

.message-text {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-size:14px;
    line-height:1.65
}

.message-meta {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:5px;
    color:var(--muted);
    font-size:9px
}

.message-status {
    font-size:10px;
    white-space:nowrap;
    color:var(--muted)
}

.message-status.read {
    color:var(--accent)
}

.scroll-bottom {
    position:absolute;
    bottom:14px;
    right:22px;
    border:1px solid var(--line);
    background:var(--panel);
    box-shadow:0 4px 16px #0002
}

.composer-area {
    padding:14px max(25px,calc((100% - 850px)/2)) 10px;
    border-top:1px solid var(--line);
    background:var(--panel);
    flex-shrink:0;
    padding-bottom:max(10px,env(safe-area-inset-bottom))
}

.message-form {
    display:flex;
    align-items:flex-end;
    gap:13px;
    padding:9px 10px 9px 16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--input)
}

.message-form:focus-within {
    border-color:var(--accent)
}

.message-form textarea {
    display:block;
    flex:1;
    min-width:0;
    resize:none;
    border:0;
    background:transparent;
    color:var(--text);
    font-size:14px;
    line-height:1.65;
    padding:8px 0;
    max-height:160px;
    min-height:39px;
    outline:none;
    scrollbar-width:thin
}

.message-form textarea:focus-visible {
    outline:0
}

.message-form textarea::placeholder {
    color:var(--subtle)
}

.send-button {
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    border:0;
    border-radius:12px;
    background:var(--accent-solid);
    color:#fff;
    flex-shrink:0
}

.send-button .icon {
    width:20px;
    height:20px
}

.send-button:hover {
    background:#486edc
}

.composer-hint {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:9px 3px 0;
    font-size:9px;
    color:var(--subtle)
}

.composer-brand {
    letter-spacing:.02em
}

.compose-error {
    color:var(--error);
    margin:0 2px 10px;
    font-size:12px
}

/* Real dialogs; future media controls can be added without dummy buttons. */
.app-dialog {
    width:min(480px,calc(100% - 32px));
    max-height:min(720px,calc(100dvh - 40px));
    padding:26px;
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--panel);
    color:var(--text);
    box-shadow:var(--shadow);
    overflow-y:auto
}

.app-dialog::backdrop {
    background:#030812b0;
    backdrop-filter:blur(5px)
}

.dialog-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:22px
}

.dialog-heading .eyebrow {
    margin:0 0 6px;
    font-size:9px
}

.dialog-heading h2 {
    margin:0;
    font-size:24px;
    letter-spacing:-.04em
}

.dialog-search {
    min-height:47px
}

.dialog-search input {
    font-size:16px
}

.dialog-caption {
    color:var(--subtle);
    font-size:12px;
    line-height:1.8;
    margin:15px 0
}

.user-results {
    margin:12px -8px 0;
    max-height:340px;
    overflow-y:auto;
    scrollbar-width:thin
}

.user-result {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    border:0;
    border-radius:12px;
    background:transparent;
    padding:12px 9px;
    text-align:left
}

.user-result:hover {
    background:var(--raised)
}

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

.user-result strong {
    display:block;
    font-size:14px;
    font-weight:650;
    overflow-wrap:anywhere
}

.user-result small {
    font-size:11px;
    color:var(--muted)
}

.user-result .icon {
    width:18px;
    height:18px;
    color:var(--subtle);
    transform:rotate(180deg)
}

.settings-account {
    display:flex;
    align-items:center;
    gap:13px;
    padding:17px;
    background:var(--input);
    border:1px solid var(--line);
    border-radius:14px
}

.settings-account>div {
    min-width:0;
    flex:1
}

.settings-account strong {
    display:block;
    overflow-wrap:anywhere;
    font-size:15px
}

.settings-account p {
    margin:3px 0 0;
    font-size:11px
}

.account-badge {
    font-size:8px;
    color:var(--subtle);
    letter-spacing:.1em
}

.settings-group {
    margin:25px 0
}

.settings-group h3 {
    margin:0 0 8px;
    color:var(--subtle);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase
}

.settings-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid var(--line);
    padding:15px 0;
    font-size:13px
}

.settings-row small {
    display:block;
    font-size:10px;
    color:var(--subtle);
    margin-top:4px
}

.settings-row select {
    padding:8px;
    max-width:130px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--raised);
    color:var(--text)
}

.toggle {
    width:19px;
    height:19px;
    accent-color:var(--accent-solid)
}

.ui-notice {
    position:fixed;
    left:50%;
    bottom:max(24px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    z-index:20;
    max-width:calc(100% - 30px);
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--raised);
    box-shadow:var(--shadow);
    padding:12px 20px;
    font-size:13px;
    text-align:center;
    overflow-wrap:anywhere
}

@keyframes loading-spin {
    to {
        transform:rotate(360deg)
    }
}

@media(min-width:1920px) {
    .messenger {
        grid-template-columns:360px minmax(0,1fr)
    }
}

@media(max-width:1000px) {
    .login-layout {
        gap:40px;
        grid-template-columns:1fr 390px
    }
    .auth-card {
        padding:31px
    }
    .messenger {
        grid-template-columns:290px minmax(0,1fr)
    }
    .conversation-label {
        display:none
    }
    .chat-header {
        padding-inline:22px
    }
    .messages {
        padding-inline:22px
    }
    .composer-area {
        padding-inline:20px
    }
}

@media(max-width:767px) {
    .icon-button,.list-heading .icon-button {
        width:44px;
        height:44px
    }
    .messenger {
        display:flex;
        border:0
    }
    .sidebar {
        width:100%;
        border:0
    }
    .chat-area {
        display:none;
        width:100%;
        height:100%
    }
    .messenger.show-chat .sidebar {
        display:none
    }
    .messenger.show-chat .chat-area {
        display:block
    }
    .mobile-back {
        display:inline-grid;
        margin-left:-7px
    }
    .chat-header {
        height:68px;
        padding-inline:16px;
        gap:10px
    }
    .messages {
        padding:18px 15px
    }
    .message-bubble {
        max-width:88%;
        font-size:14px
    }
    .composer-area {
        padding:10px 12px max(12px,env(safe-area-inset-bottom))
    }
    .message-form {
        gap:8px;
        padding-left:12px
    }
    .composer-hint span:first-child {
        display:none
    }
    .composer-hint {
        justify-content:flex-end;
        font-size:8px;
        margin-top:6px
    }
    .message-form textarea {
        font-size:16px
    }
    .sidebar-header {
        height:76px;
        padding-inline:23px
    }
    .sidebar .profile {
        padding-bottom:22px
    }
    .sidebar-footer {
        padding-bottom:max(12px,env(safe-area-inset-bottom))
    }
    .search-field input {
        font-size:16px
    }
    .auth-shell {
        padding:96px 20px 65px
    }
    .auth-home {
        left:24px;
        top:26px
    }
    .login-layout {
        display:block;
        max-width:420px
    }
    .login-story {
        display:none
    }
    .auth-card {
        padding:29px 25px;
        border-radius:20px
    }
    .auth-footer {
        font-size:10px
    }
    .app-dialog {
        padding:21px;
        max-height:calc(var(--app-height) - 30px)
    }
    .welcome-pane {
        padding:22px
    }
    .ui-notice {
        bottom:max(18px,env(safe-area-inset-bottom))
    }
    .message-text {
        font-size:14px
    }
}

@media(max-width:380px) {
    .profile-copy strong {
        font-size:12px
    }
    .auth-card {
        padding:25px 22px
    }
    .loading-box h1 {
        font-size:22px
    }
    .account-badge {
        display:none
    }
    .settings-row {
        gap:10px
    }
    .brand {
        font-size:21px
    }
    .message-bubble {
        max-width:90%
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}