/* ========== GOOGLE FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inter+Tight:wght@700;900&display=swap');

/* ========== RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== DESIGN TOKENS ========== */
:root {
    --m-yellow:  #FFE135;
    --m-pink:    #FF5FA0;
    --m-teal:    #00C2C7;
    --m-orange:  #FF6B35;
    --m-purple:  #8B5CF6;
    --m-lime:    #AAED3B;
    --m-dark:    #1A1A1A;
    --m-surface: #FFFFFF;
    --m-surface2:#F5F0E8;
    --m-shadow:  rgba(0,0,0,0.22);

    /* User-configurable font size for chat & news body text (12–20px) */
    --content-font-size: 15px;
}

/* ========== COLOR SCHEMES ========== */
[data-scheme="1"] {
    --m-yellow:  #F0FF00;
    --m-pink:    #FF00CC;
    --m-teal:    #00FFEA;
    --m-orange:  #FF6600;
    --m-purple:  #CC00FF;
    --m-lime:    #00FF66;
    --m-dark:    #0A0A0A;
    --m-surface: #1E1E2E;
    --m-surface2:#2A2A40;
}

[data-scheme="2"] {
    --m-yellow:  #FFD6A5;
    --m-pink:    #FFADBC;
    --m-teal:    #A0E7E5;
    --m-orange:  #FFB347;
    --m-purple:  #C9B1FF;
    --m-lime:    #B5EAD7;
    --m-dark:    #3D3D3D;
    --m-surface: #FFFDF7;
    --m-surface2:#FFF0F5;
}

[data-scheme="3"] {
    --m-yellow:  #FFD166;
    --m-pink:    #EF476F;
    --m-teal:    #06D6A0;
    --m-orange:  #F77F00;
    --m-purple:  #7B2D8B;
    --m-lime:    #80ED99;
    --m-dark:    #073B4C;
    --m-surface: #E8F4F8;
    --m-surface2:#D0EAF0;
}

[data-scheme="4"] {
    --m-yellow:  #FFCF00;
    --m-pink:    #FF4040;
    --m-teal:    #FF8C00;
    --m-orange:  #FF5500;
    --m-purple:  #CC2200;
    --m-lime:    #FFE566;
    --m-dark:    #1C0A00;
    --m-surface: #FFF8F0;
    --m-surface2:#FFE8D0;
}

[data-scheme="5"] {
    --m-yellow:  #D4FF00;
    --m-pink:    #FF61A6;
    --m-teal:    #00C896;
    --m-orange:  #FF9500;
    --m-purple:  #5C4033;
    --m-lime:    #7FFF00;
    --m-dark:    #1A2E1A;
    --m-surface: #F0FAF0;
    --m-surface2:#E0F0E0;
}

[data-scheme="6"] {
    --m-yellow:  #FFE066;
    --m-pink:    #FF6EC7;
    --m-teal:    #4FC3F7;
    --m-orange:  #FF8A65;
    --m-purple:  #7986CB;
    --m-lime:    #AED581;
    --m-dark:    #1A237E;
    --m-surface: #F8FBFF;
    --m-surface2:#E8F0FE;
}

[data-scheme="7"] {
    --m-yellow:  #FFB700;
    --m-pink:    #FF6B6B;
    --m-teal:    #C77DFF;
    --m-orange:  #FF9F1C;
    --m-purple:  #7B2FBE;
    --m-lime:    #FFD460;
    --m-dark:    #2D1B00;
    --m-surface: #FFF9F0;
    --m-surface2:#FFEEDD;
}

[data-scheme="8"] {
    --m-yellow:  #FFFFFF;
    --m-pink:    #BBBBBB;
    --m-teal:    #888888;
    --m-orange:  #CCCCCC;
    --m-purple:  #555555;
    --m-lime:    #EEEEEE;
    --m-dark:    #000000;
    --m-surface: #F5F5F5;
    --m-surface2:#E8E8E8;
}

[data-scheme="9"] {
    --m-yellow:  #FFE600;
    --m-pink:    #FF2079;
    --m-teal:    #00F5FF;
    --m-orange:  #FF6B00;
    --m-purple:  #BD00FF;
    --m-lime:    #39FF14;
    --m-dark:    #0D0221;
    --m-surface: #0D0221;
    --m-surface2:#160535;
    --m-shadow:  rgba(0,0,0,0.5);
}

/* ========== BASE ========== */
body {
    font-family: 'Inter', 'Arial', sans-serif;
    background: var(--m-surface2);
    color: var(--m-dark);
    overflow: hidden;
    /* Pin to the layout viewport so iOS Safari has nothing to pan/rubber-
       band, even in the brief moment before initMobileKeyboardFix() (ui.js)
       reacts to the keyboard opening — see #app below for the full fix. */
    position: fixed;
    inset: 0;
    width: 100%;
}

#app {
    width: 100%;
    /* Baseline height. On mobile this gets overridden in real time by
       initMobileKeyboardFix() in ui.js (VisualViewport API) — dvh alone
       isn't reliably keyboard-aware across all mobile/webview browsers,
       so the JS keeps this in sync with what's actually visible.
       Fallback first: old browsers that don't understand `dvh` (Chrome
       <108 — includes old Android WebView, e.g. Nexus 7-class devices)
       just ignore that declaration and keep this one instead of ending
       up with no height at all. */
    height: 100vh;
    height: 100dvh;
    position: relative;
    background-image:
        radial-gradient(circle, var(--m-dark) 1.5px, transparent 1.5px),
        radial-gradient(circle, var(--m-dark) 1.5px, transparent 1.5px);
    background-size: 24px 24px, 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* ========== LOGIN ========== */
.form-container {
    max-width: 380px;
    width: 92%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--m-surface);
    border: 2px solid var(--m-dark);
    border-radius: 28px;
    padding: 32px;
    text-align: center;
}

.form-container h2 {
    font-size: 22px;
    font-weight: 900;
    font-family: 'Inter Tight', 'Arial Black', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: var(--m-dark);
    background: var(--m-yellow);
    display: inline-block;
    padding: 4px 14px;
    transform: rotate(-1deg);
}

.form-container input,
.form-container button {
    width: 100%;
    padding: 12px 14px;
    margin-top: 10px;
    border: 3px solid var(--m-dark);
    border-radius: 50px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
}

.form-container input {
    background: var(--m-surface2);
    color: var(--m-dark);
}

.form-container input:focus {
    outline: none;
    background: #fffbe0;
    border-color: var(--m-pink);
}

.form-container button {
    background: var(--m-yellow);
    color: var(--m-dark);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform .1s, background .15s;
    margin-top: 14px;
}

.form-container button:hover  { background: var(--m-pink); color: #fff; }
.form-container button:active { transform: translate(3px, 3px); }

.form-container hr {
    margin: 20px 0;
    border: none;
    border-top: 3px dashed var(--m-dark);
}

.error {
    margin-top: 12px;
    color: var(--m-orange);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ========== AUTH TABS ========== */
.auth-tabs {
    display: flex;
    margin-bottom: 22px;
    border-bottom: 3px solid var(--m-dark);
}

.form-container button.auth-tab {
    flex: 1;
    width: auto;
    margin: 0 0 -3px 0;
    padding: 10px 6px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--m-dark);
    opacity: .5;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: opacity .15s, border-color .15s;
}

.form-container button.auth-tab.active {
    opacity: 1;
    border-bottom-color: var(--m-pink);
}

.form-container button.auth-tab:not(.active):hover {
    opacity: .8;
}

/* ========== AUTH PANELS ========== */
.auth-panel { display: none; }
.auth-panel.active { display: block; animation: authFadeIn .18s ease; }

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-field { margin-top: 12px; text-align: left; }
.auth-field:first-child { margin-top: 0; }

.auth-password-wrap { position: relative; }
.auth-password-wrap input { padding-right: 46px; }

.form-container button.auth-eye-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .6;
}

.form-container button.auth-eye-btn:hover  { background: rgba(0,0,0,0.08); opacity: 1; }
.form-container button.auth-eye-btn:active { transform: translateY(-50%); }

.auth-field-error {
    min-height: 15px;
    margin-top: 4px;
    padding-left: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--m-orange);
    text-align: left;
}

.auth-field-hint {
    min-height: 15px;
    margin-top: 4px;
    padding-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--m-dark);
    opacity: .5;
    text-align: left;
    transition: color .15s, opacity .15s;
}
.auth-field-hint.error { color: var(--m-orange); opacity: 1; font-weight: 800; }
.auth-field-hint.ok    { color: var(--m-teal);   opacity: 1; font-weight: 800; }

.form-container input.invalid { border-color: var(--m-orange) !important; }
.form-container input.valid   { border-color: var(--m-teal)   !important; }

/* ========== SUBMIT BUTTON: DISABLED WHILE SENDING ========== */
.form-container button.auth-submit-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* ========== MAIN UI ========== */
#mainUI {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* ========== HEADER (shared) ========== */
/* .header and .chat-header share height / stripe pattern */
.header,
.chat-header {
    padding: 0 20px;
    height: 60px;
    min-height: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.header::after,
.chat-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
}

/* Left panel header */
.header {
    background: var(--m-dark);
}

.header::after {
    background: repeating-linear-gradient(
        90deg,
        var(--m-yellow) 0, var(--m-yellow) 12px,
        var(--m-pink)   12px, var(--m-pink)   24px,
        var(--m-teal)   24px, var(--m-teal)   36px
    );
}

.header span {
    font-size: 14px;
    font-weight: 900;
    font-family: 'Inter Tight', 'Arial Black', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--m-yellow);
}

.logout-btn {
    border: 2px solid var(--m-yellow);
    border-radius: 50px;
    background: transparent;
    color: var(--m-yellow);
    padding: 5px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background .15s, color .15s;
}
.logout-btn:hover { background: var(--m-yellow); color: var(--m-dark); }

/* Chat panel header */
.chat-header {
    background: var(--m-dark);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--m-surface);
}

.chat-header::after {
    background: repeating-linear-gradient(
        90deg,
        var(--m-teal)   0, var(--m-teal)   12px,
        var(--m-orange) 12px, var(--m-orange) 24px,
        var(--m-lime)   24px, var(--m-lime)   36px
    );
}

.chat-header button {
    border: 2px solid var(--m-orange);
    border-radius: 50px;
    background: transparent;
    color: var(--m-orange);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    margin: 0;
    height: auto;
    transition: background .15s, color .15s;
}
.chat-header button:hover { background: var(--m-orange); color: #fff; }

/* ========== TOP BUTTONS ========== */
.top-buttons {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    justify-content: center;
    align-items: center;
    background: var(--m-surface2);
    border-bottom: 3px solid var(--m-dark);
}

.circle-btn {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 3px solid var(--m-dark);
    border-radius: 50%;
    background: var(--m-yellow);
    color: var(--m-dark);
    font-size: 20px;
    cursor: pointer;
    transition: transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle-btn:nth-child(2) { background: var(--m-teal); }

/* Ряд с иконками (weather/news/tg/btc/chess/bubbles) — прокручивается
   горизонтально, если кружочки не помещаются по ширине */
.top-buttons-scroll {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.top-buttons-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Desktop: подсказка, что ряд можно тащить мышью */
.top-buttons-scroll { cursor: grab; }
.top-buttons-scroll.dragging { cursor: grabbing; }
.top-buttons-scroll.dragging .circle-btn { pointer-events: none; }

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.btn-icon svg {
    width: 100%;
    height: 100%;
}
.circle-btn:hover  { transform: translate(-2px, -2px); }
.circle-btn:active { transform: translate(3px, 3px); }

/* ========== REQUESTS BADGE ========== */
.requests-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--m-pink);
    color: #fff;
    border: 2px solid var(--m-dark);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== CONTACTS PANEL ========== */
.contacts-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--m-surface);
    border-right: 4px solid var(--m-dark);
    z-index: 10;
    transition: transform .3s ease;
}

.contacts-panel.slide-left { transform: translateX(-100%); }

/* ========== TOP PANEL (collapsible, swipe up/down) ========== */
.top-panel-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .32s ease;
    flex-shrink: 0;
    overflow: hidden;
}
.top-panel-wrap.collapsed { grid-template-rows: 0fr; }

.top-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.panel-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    background: var(--m-surface2);
    border-bottom: 3px solid var(--m-dark);
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
}
.panel-handle:active { cursor: grabbing; }

.panel-handle-bar {
    width: 46px;
    height: 6px;
    border-radius: 4px;
    background: var(--m-dark);
    opacity: .35;
    transition: opacity .2s, transform .2s;
}
.panel-handle:hover .panel-handle-bar { opacity: .6; }
.panel-handle:active .panel-handle-bar { opacity: .7; transform: scaleX(1.1); }

/* ========== APP FOOTER (WhatsApp-style bottom bar) ========== */
.app-footer {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    padding: 0 12px max(0px, env(safe-area-inset-bottom));
    background: var(--m-dark);
    position: relative;
    flex-shrink: 0;
}

.app-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--m-teal)   0, var(--m-teal)   12px,
        var(--m-orange) 12px, var(--m-orange) 24px,
        var(--m-lime)   24px, var(--m-lime)   36px
    );
}

.footer-btn {
    flex: 0 0 auto;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 11px 6px 9px;
    background: transparent;
    border: none;
    color: var(--m-yellow);
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.footer-btn .btn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-btn .btn-icon svg { width: 100%; height: 100%; }

.footer-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.footer-btn:hover  { background: rgba(255,255,255,.08); }
.footer-btn:active { transform: scale(.92); }

/* ========== CONTACTS LIST ========== */
.contacts-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--m-surface);
}

.contacts-list::-webkit-scrollbar       { width: 4px; }
.contacts-list::-webkit-scrollbar-thumb { background: var(--m-dark); opacity: .3; border-radius: 2px; }

.contacts-self-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 14px;
    border-bottom: 3px solid var(--m-dark);
    background: var(--m-yellow);
    transition: background .15s;
    flex-shrink: 0;
    min-height: 68px;
}

.contacts-self-info {
    flex: 1;
    min-width: 0;
}

.contacts-requests-btn {
    margin-left: auto;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 3px solid var(--m-dark);
    border-radius: 50%;
    background: var(--m-teal);
    color: var(--m-dark);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background .15s, transform .15s;
}
.contacts-requests-btn:hover  { background: var(--m-lime); transform: translate(-1px, -1px); }
.contacts-requests-btn:active { transform: translate(2px, 2px); }

.contacts-self-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    border: 3px solid var(--m-dark);
    background: var(--m-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 900;
    color: var(--m-yellow);
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.contacts-self-avatar img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    position: absolute; inset: 0;
}

.contacts-self-name {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--m-dark);
}

.contacts-self-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--m-dark);
    opacity: .5;
    margin-top: 2px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 14px;
    min-height: 72px;
    border-bottom: 1.5px solid rgba(0,0,0,.07);
    cursor: pointer;
    transition: background .1s;
    position: relative;
    background: var(--m-surface);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.contact-card:last-child  { border-bottom: none; }
.contact-card:hover       { background: var(--m-surface2); }
.contact-card.active {
    /* Fallback for browsers without color-mix() (Chrome <111 — old Android
       WebView etc.): plain surface2 tint instead of no background at all. */
    background: var(--m-surface2);
    background: color-mix(in srgb, var(--m-teal) 18%, var(--m-surface));
    border-left: 4px solid var(--m-teal);
}

.contact-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    border: 3px solid var(--m-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 900;
    color: var(--m-dark);
    text-transform: uppercase;
    position: relative;
    flex-shrink: 0;
}

.contact-avatar img,
.orbit-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.contact-status-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--m-surface);
    background: #c0c0c0;
    pointer-events: none;
    z-index: 10;
}

.contact-status-dot.online {
    background: #4cd964;
    border-color: var(--m-surface);
    box-shadow: 0 0 0 1.5px var(--m-dark);
}

.contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.contact-name {
    font-size: 14px;
    font-weight: 900;
    color: var(--m-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.contact-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--m-dark);
    opacity: .4;
    white-space: nowrap;
    flex-shrink: 0;
}

.contact-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.contact-last-msg {
    font-size: 12px;
    font-weight: 600;
    color: var(--m-dark);
    opacity: .55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.contact-unread {
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--m-pink);
    color: #fff;
    border: 2.5px solid var(--m-dark);
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
    box-shadow: 2px 2px 0 var(--m-dark);
}

/* ========== CONTACT CARD MENU (⋮) ========== */
.contact-time-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-menu-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--m-dark);
    opacity: .45;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .15s, opacity .15s;
}
.contact-menu-btn:hover  { opacity: 1; background: var(--m-surface2); }
.contact-menu-btn:active { transform: translate(1px, 1px); }

.contact-menu-dropdown {
    position: fixed;
    z-index: 500;
    min-width: 190px;
    background: var(--m-surface);
    border: 2px solid var(--m-dark);
    border-radius: 14px;
    box-shadow: 2px 2px 0 rgba(26, 26, 26, .5);
    overflow: hidden;
    padding: 4px;
}

.contact-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--m-dark);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .15s;
}
.contact-menu-item:hover { background: var(--m-surface2); }
.contact-menu-item--danger       { color: #c0392b; }
.contact-menu-item--danger:hover { background: var(--m-pink); color: #fff; }

.orbit-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--m-dark);
    font-size: 13px;
    font-weight: 700;
    opacity: .6;
}

/* ========== CHAT PANEL ========== */
.chat-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--m-surface2);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(0,0,0,.03) 20px,
        rgba(0,0,0,.03) 21px
    );
    z-index: 20;
    transform: translateX(100%) translateZ(0);
    transition: transform .3s ease;
    will-change: transform;
    contain: layout style;
    -webkit-font-smoothing: subpixel-antialiased;
}

.chat-panel.open { transform: translateX(0) translateZ(0); }

/* ========== MESSAGES ========== */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-messages::-webkit-scrollbar       { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--m-dark); }

.message {
    max-width: 95%;
    padding: 10px 16px;
    font-size: calc(var(--content-font-size, 15px) * 1.2);
    font-weight: 400;
    font-family: 'Inter', 'Arial', sans-serif;
    word-wrap: break-word;
    border-radius: 20px;
    line-height: 1.55;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.message.own {
    align-self: flex-end;
    background: var(--m-yellow);
    color: var(--m-dark);
    border-bottom-right-radius: 6px;
}

.message.other {
    align-self: flex-start;
    background: var(--m-surface);
    color: var(--m-dark);
    border-bottom-left-radius: 6px;
}

.message-time {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    opacity: .55;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Message text formatting */
.message .msg-text,
.message > div:not(.msg-image-wrap):not(.msg-video-wrap):not(.msg-file-card) {
    white-space: pre-wrap;
    word-break: break-word;
    font-weight: 400;
    font-family: inherit;
}

.msg-text b, .msg-text strong { font-weight: 700; }
.msg-text i, .msg-text em     { font-style: italic; }
.msg-text u                   { text-decoration: underline; }
.msg-text s, .msg-text strike { text-decoration: line-through; }
.msg-text code {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 13px;
    background: rgba(0,0,0,0.08);
    padding: 1px 5px;
    border-radius: 4px;
}
.msg-text a { color: inherit; text-decoration: underline; opacity: 0.8; }
.msg-text a:hover { opacity: 1; }

/* Keep these elements bold */
.message-time,
.contact-name,
.contact-last-msg,
.chat-header,
.header span {
    font-weight: 900;
}

/* ========== CHAT INPUT ========== */
.chat-input {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 4px solid var(--m-dark);
    background: var(--m-surface);
    flex-shrink: 0;
}

/* Wrap dissolves — children participate directly in .chat-input flex */
.chat-input-wrap {
    display: contents;
}

/* Pill input — weather / news / cities search field (single-line, unchanged) */
.chat-input-wrap input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 3px solid var(--m-dark);
    border-radius: 50px;
    background: var(--m-surface2);
    color: var(--m-dark);
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 15px;
    font-weight: 400;
    height: 48px;
    outline: none;
    box-shadow: none;
    transition: background 0.1s;
}
.chat-input-wrap input[type="text"]:focus { background: #fffbe0; }
.chat-input-wrap input[type="text"]::placeholder { color: #aaa; font-weight: 400; }

/* Multi-line message editor (chat mode) — contenteditable div, grows with
   content up to max-height then scrolls. spellcheck="true" on the element
   is what draws the native red squiggly underlines; that's the browser's
   own spell-checker, not something CSS can (or should try to) fake. */
.chat-input-wrap .msg-editor {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 3px solid var(--m-dark);
    border-radius: 22px;
    background: var(--m-surface2);
    color: var(--m-dark);
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: var(--content-font-size, 15px);
    font-weight: 400;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    transition: background 0.1s;
    white-space: pre-wrap;   /* wraps + respects manual \n line breaks */
    word-break: break-word;
    min-height: 48px;
    max-height: 150px;
    overflow-y: auto;
}
.chat-input-wrap .msg-editor:focus { background: #fffbe0; }
/* Divs have no native placeholder — :empty + data-placeholder fakes it.
   cf-editor.js keeps the element genuinely empty (no stray <br>) so this
   stays accurate after the user backspaces all the way out. */
.chat-input-wrap .msg-editor:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    font-weight: 400;
    pointer-events: none;
}

/* ── shared circle button base ── */
.chat-circle-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid var(--m-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background .15s, transform .1s;
    background: var(--m-surface2);
}
.chat-circle-btn:hover  { filter: brightness(.92); }
.chat-circle-btn:active { transform: scale(.93); }

/* Attach button */
.chat-circle-btn.attach-btn {
    background: var(--m-lime);
    font-size: 20px;
    line-height: 1;
}
.chat-circle-btn.attach-btn:hover { background: var(--m-teal); }

/* Voice button */
.chat-circle-btn.voice-btn {
    background: var(--m-purple);
    font-size: 20px;
    line-height: 1;
}
.chat-circle-btn.voice-btn:hover  { background: #7c3aed; }
.chat-circle-btn.voice-btn.recording {
    background: var(--m-pink) !important;
    animation: pulse-record .8s infinite;
}

/* Send button (shown when input non-empty) */
.chat-circle-btn.send-btn {
    background: var(--m-pink);
}
.chat-circle-btn.send-btn i {
    width: 22px;
    height: 22px;
    display: block;
    color: #fff;
}
.chat-circle-btn.send-btn:hover  { background: var(--m-orange); }

/* Hidden state for toolbar toggle */
.chat-circle-btn.hidden { display: none !important; }

/* Keep old selectors from breaking other things */
.chat-input-wrap button:not(.attach-btn):not(.voice-btn):not(.send-btn):not(.chat-circle-btn) { display: none; }
.chat-input > button    { display: none; }



/* ========== SEARCH BAR ========== */
.search-bar {
    display: flex;
    gap: 0;
    padding: 12px 18px 12px 14px;
    border-bottom: 3px solid var(--m-dark);
    background: var(--m-surface2);
}

.search-bar input {
    flex: 1;
    padding: 9px 16px;
    border: 3px solid var(--m-dark);
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: var(--m-surface);
    color: var(--m-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}
.search-bar input:focus { outline: none; background: #fffbe0; }
.search-bar input::placeholder { color: #aaa; font-weight: 400; }

.search-bar button {
    padding: 9px 14px;
    border: 3px solid var(--m-dark);
    border-radius: 0 50px 50px 0;
    background: var(--m-teal);
    color: var(--m-dark);
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    transition: background .15s, transform .1s;
}
.search-bar button:hover  { background: var(--m-lime); }
.search-bar button:active { transform: translate(2px, 2px); }

/* ========== SEARCH RESULT ========== */
#searchResult { border-bottom: 3px solid var(--m-dark); }

.search-loading,
.search-error {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.search-loading { color: #888; }
.search-error   { color: var(--m-orange); }

.search-card {
    padding: 12px 14px;
    background: var(--m-surface);
    border-radius: 16px;
    margin: 8px 12px;
    border: 3px solid var(--m-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.search-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.search-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 3px solid var(--m-dark);
    border-radius: 50%;
    background: var(--m-yellow);
    color: var(--m-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    inset: 0;
}

.search-name {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-email {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-add-btn {
    padding: 6px 16px;
    border: 3px solid var(--m-dark);
    border-radius: 50px;
    background: var(--m-yellow);
    color: var(--m-dark);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .1s;
}
.search-add-btn:hover  { background: var(--m-lime); }
.search-add-btn:active { transform: translate(2px, 2px); }

.search-tag {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 12px;
    border: 2px solid var(--m-dark);
    border-radius: 50px;
    white-space: nowrap;
}
.search-tag--friends { background: var(--m-lime);    color: var(--m-dark); }
.search-tag--pending { background: var(--m-surface2); color: #888; }

/* ========== BACK BUTTON ========== */
.back-btn {
    margin-right: 12px;
    border: 2px solid var(--m-teal);
    border-radius: 50px;
    background: transparent;
    color: var(--m-teal);
    font-size: 20px;
    cursor: pointer;
    padding: 2px 10px;
    font-family: inherit;
    font-weight: 900;
    transition: background .15s, color .15s;
}
.back-btn:hover { background: var(--m-teal); color: var(--m-dark); }

/* ========== TOAST ========== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--m-dark);
    color: var(--m-yellow);
    padding: 10px 24px;
    border: 3px solid var(--m-yellow);
    border-radius: 50px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1000;
}

/* ========== PANEL SECTION HEADINGS ========== */
/* Shared by: requests, weather, news */
.requests-container h2,
.weather-container h2,
.news-container h2 {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    background: var(--m-dark);
    color: var(--m-yellow);
    padding: 6px 18px;
    border-radius: 50px;
    display: inline-block;
}

/* ========== FRIEND REQUESTS PANEL ==========
   Same visual language as the translator's floating windows
   (translater.css: .translater-window / .translater-titlebar / .translater-pdf-toolbar):
   thick var(--m-dark) border, 16px rounded corners, hard "8px 8px 0" shadow,
   dark titlebar with yellow uppercase text.

   .requests-window is only added on desktop (see contacts.js: showFriendRequests) —
   on mobile this panel opens inside the same translater-style drawer used by
   Weather/Bitcoin/News/Telegram, which already draws its own titlebar/border/
   shadow, so .requests-container there stays chrome-less and just holds
   .requests-body. */
.requests-container { display: flex; flex-direction: column; }

.requests-window {
    background: var(--m-surface);
    border: 2px solid var(--m-dark);
    border-radius: 16px;
    box-shadow: 4px 4px 0 rgba(26, 26, 26, .55);
    overflow: hidden;
}

.requests-titlebar {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background: var(--m-dark);
    color: var(--m-yellow);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.requests-body { padding: 20px; }

.requests-search-wrap {
    margin: -20px -20px 18px;
}
.requests-search-wrap .search-bar {
    border-radius: 0;
    border-bottom: 3px solid var(--m-dark);
}
/* Desktop window: no titlebar-adjacent radius needed (titlebar already caps
   the top corners); mobile drawer: no outer chrome at all, so round the
   search bar's own top corners to match its container. */
.requests-container:not(.requests-window) .requests-search-wrap .search-bar {
    border-radius: 16px 16px 0 0;
}
.requests-search-wrap #searchResult {
    border-bottom: 3px solid var(--m-dark);
}

.requests-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
}

.request-card {
    background: var(--m-surface);
    border: 2px solid var(--m-dark);
    border-radius: 20px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 3px 3px 0 rgba(26, 26, 26, .5);
}

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

.request-actions { display: flex; gap: 10px; }

.req-btn {
    flex: 1;
    padding: 8px;
    border: 3px solid var(--m-dark);
    border-radius: 50px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: transform .1s, background .15s;
}
.req-btn:active { transform: translate(2px, 2px); }

.req-btn--accept  { background: var(--m-lime);   color: var(--m-dark); }
.req-btn--decline { background: var(--m-orange);  color: #fff; }
.req-btn--accept:hover  { background: var(--m-teal); }
.req-btn--decline:hover { background: var(--m-pink); }

.request-done {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
    text-align: center;
    padding: 4px 0;
}

/* ========== ALL CONTACTS (full list in Friend requests panel, ⋮ menu) ========== */
.all-contacts-section { margin-top: 28px; }

/* Bleeds out of .requests-body's 20px padding so rows run edge-to-edge,
   same as .contact-card in the main list. */
.all-contacts-list {
    display: flex;
    flex-direction: column;
    margin: 0 -20px;
}

.all-contact-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 14px;
    min-height: 72px;
    border-bottom: 1.5px solid rgba(0,0,0,.07);
}
.all-contact-row:last-child { border-bottom: none; }
.all-contact-row.is-hidden { opacity: .55; }

.all-contact-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.all-contact-hidden-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
    background: var(--m-surface2);
    border: 2px solid var(--m-dark);
    border-radius: 50px;
    padding: 2px 8px;
    flex-shrink: 0;
}

/* ========== WEATHER ========== */
.weather-container,
.news-container {
    padding: 16px;
}

.weather-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-panel.weather-mode .chat-messages,
.chat-panel.news-mode .chat-messages {
    padding: 0;
    gap: 0;
}

.chat-panel.weather-mode .chat-messages .weather-container {
    width: 100%;
    box-sizing: border-box;
}

.weather-current {
    background: var(--m-surface);
    border: 4px solid var(--m-dark);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
}

.weather-forecast {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forecast-day {
    display: grid;
    grid-template-columns: 56px 28px 1fr auto;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 700;
}

.forecast-label  { font-size: 12px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.5px; }
.forecast-icon   { font-size: 22px; line-height: 1; text-align: center; }
.forecast-desc   { font-size: 12px; opacity: 0.6; text-transform: capitalize; }
.forecast-temps  { font-size: 13px; display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.forecast-max    { color: #ff6b35; }
.forecast-min    { opacity: 0.55; }
.forecast-precip { font-size: 10px; opacity: 0.65; grid-column: 3 / 5; margin-top: -4px; }

.weather-temp-chart-wrap {
    background: var(--m-surface);
    border: 4px solid var(--m-dark);
    border-radius: 24px;
    overflow: hidden;
}

.weather-temp-chart {
    width: 100%;
    height: 160px;
    display: block;
}

/* ========== NEWS ========== */
.news-item {
    margin-bottom: 14px;
    background: var(--m-surface);
    border: none;
    border-radius: 18px;
    padding: 16px;
    user-select: text;
    -webkit-user-select: text;
}

.news-item h3 {
    color: var(--m-dark);
    margin-bottom: 8px;
    font-size: calc(var(--content-font-size, 13px) + 1px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.news-item p {
    font-size: var(--content-font-size, 13px);
    font-weight: 500;
    line-height: 1.5;
}

.news-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.news-item__meta small,
.news-item__date,
.news-item__category,
.news-item__source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    transition: color .15s;
}

.news-item__date {
    /* inherits from above */
}

.news-icon-cal,
.news-icon-cat,
.news-icon-ext {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: .7;
    vertical-align: middle;
}

.news-item__category {
    cursor: pointer;
    background: none;
    padding: 0;
    border-radius: 0;
}

.news-item__category:hover {
    color: var(--m-teal);
}

.news-item__category:hover .news-icon-cat {
    opacity: 1;
    color: var(--m-teal);
}

.news-item__source {
    cursor: pointer;
}

a.news-item__source:hover {
    color: var(--m-teal);
}

a.news-item__source:hover .news-icon-ext {
    opacity: 1;
}

.news-icon-ext {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: .7;
    vertical-align: middle;
}
a.news-item__source:hover .news-icon-ext { opacity: 1; }

.news-item--has-thumb {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;
}

.news-item__thumb-wrap {
    flex-shrink: 0;
    width: 110px;
    align-self: stretch;
    overflow: hidden;
    border-radius: 12px 0 0 12px;
    border-right: none;
    background: var(--m-surface2);
}

.news-item__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s;
}

.news-item--has-thumb .news-item__body {
    flex: 1;
    min-width: 0;
    padding: 14px 16px 14px 0;
}

.news-item:not(.news-item--has-thumb) {
    padding: 16px 16px 16px 22px;
}

.news-item:not(.news-item--has-thumb) .news-item__body { padding: 0; }

.news-load-more {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    border: 3px solid var(--m-dark);
    border-radius: 50px;
    background: var(--m-yellow);
    color: var(--m-dark);
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .15s;
}
.news-load-more:hover  { background: var(--m-teal); color: #fff; }
.news-load-more:active { transform: translateY(1px); }

.news-end-note {
    margin-top: 14px;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-top: 2px dashed var(--m-dark);
    opacity: 0.5;
}

/* ========== MEDIA IN MESSAGES ========== */
.message:has(.msg-image-wrap) {
    padding: 0;
    max-width: 95%;
}

/* intermediate div wrapping msg-image-wrap */
.message:has(.msg-image-wrap) > div {
    display: block;
    line-height: 0;
}

.msg-image-wrap {
    display: block;
    max-width: 100%;
}

.msg-image {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    cursor: zoom-in;
}
.msg-image:hover { opacity: .88; }

.message:has(.msg-image-wrap) .msg-caption {
    padding: 6px 12px 2px;
    line-height: 1.4;
}

.message:has(.msg-image-wrap) .message-time {
    padding: 0 12px 8px;
}

.message:has(.msg-image-wrap) .msg-reactions {
    padding: 4px 12px 0;
}

/* Image-only bubble: no shadow, image fills bubble fully */
.message.image-only {
    padding: 0;
    box-shadow: none !important;
    overflow: visible !important;
}
/* clip-path on the image wrapper div, not on .message — so delete btn is not clipped */
.message.own.image-only   > div { clip-path: inset(0 round 17px 17px 3px 17px); }
.message.other.image-only > div { clip-path: inset(0 round 17px 17px 17px 3px); }
.message.image-only > div {
    display: block;
    line-height: 0;
    font-size: 0;
    height: auto;
}
.message.image-only .msg-image-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    line-height: 0;
    font-size: 0;
}
.message.image-only .msg-image {
    border-radius: 0 !important;
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
}
/* keep delete button above clip-path */
.message.image-only .msg-delete-btn {
    z-index: 20;
}

.msg-video-wrap { max-width: 480px; position: relative; }
.msg-video {
    display: block;
    max-width: 100%;
    max-height: 560px;
    border-radius: 12px;
    background: #000;
}

.msg-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 3px solid var(--m-dark);
    border-radius: 12px;
    background: var(--m-surface2);
    color: var(--m-dark);
    text-decoration: none;
    min-width: 180px;
    max-width: 260px;
    transition: background .15s;
}
.msg-file-card:hover { background: var(--m-yellow); }
.msg-file-icon { font-size: 26px; flex-shrink: 0; }
.msg-file-info { flex: 1; overflow: hidden; }
.msg-file-name {
    display: block;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-file-size {
    display: block;
    font-size: 10px;
    font-weight: 600;
    opacity: .6;
    margin-top: 2px;
    text-transform: uppercase;
}
.msg-file-dl   { font-size: 16px; flex-shrink: 0; opacity: .7; }
.msg-caption   { font-size: 12px; font-weight: 600; opacity: .75; word-break: break-word; }

/* ========== PROFILE ==========
   Профиль теперь открывается выезжающей справа панелью — см. profile-panel.css
   (тот же паттерн, что у Stats/Notepad). Стили полей/аватара/слайдера
   переехали туда целиком. */

/* ========== MESSAGE DELETE BUTTON ========== */
.msg-delete-btn {
    display: none;
    position: absolute;
    top: -8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--m-dark);
    border-radius: 50%;
    background: var(--m-surface);
    color: var(--m-dark);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    box-shadow: 2px 2px 0 var(--m-dark);
}

.message.own   .msg-delete-btn { right: -8px; }
.message.other .msg-delete-btn { left:  -8px; }
.message.pending .msg-delete-btn { display: none !important; }

@media (hover: hover) {
    .message:hover .msg-delete-btn { display: flex; }
    .msg-delete-btn:hover {
        background: var(--m-pink);
        color: #fff;
        border-color: var(--m-pink);
    }
}

/* ========== DELETE CONFIRMATION DIALOG ========== */
.msg-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-delete-dialog {
    background: var(--m-surface);
    border: 2px solid var(--m-dark);
    border-radius: 20px;
    padding: 28px 24px 20px;
    min-width: 260px;
    max-width: 350px;
    width: 90%;
    box-shadow: 4px 4px 0 rgba(26, 26, 26, .55);
    text-align: center;
    animation: ctx-pop .14s ease-out;
}

.msg-delete-title {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--m-dark);
    margin-bottom: 20px;
}

.msg-delete-btns { display: flex; flex-direction: column; gap: 10px; }

.msg-delete-opt {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--m-dark);
    border-radius: 50px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    box-shadow: 2px 2px 0 rgba(26, 26, 26, .45);
}
.msg-delete-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(26, 26, 26, .45); }

.msg-delete-me     { background: var(--m-yellow); color: var(--m-dark); }
.msg-delete-me:hover { background: var(--m-teal); color: #fff; }

.msg-delete-both   { background: var(--m-pink); color: #fff; }
.msg-delete-both:hover { background: #c0392b; }

.msg-delete-cancel { background: transparent; border-color: #bbb; color: #999; font-size: 11px; box-shadow: none; }
.msg-delete-cancel:hover { background: var(--m-surface2); color: var(--m-dark); }

/* ========== MESSAGE ACTION MENU (modal, same style as delete dialog) ========== */
@keyframes ctx-pop {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

.msg-menu-react  { background: var(--m-teal);   color: var(--m-dark); }
.msg-menu-react:hover  { background: #00a8ad; color: #fff; }

.msg-menu-reply  { background: var(--m-yellow); color: var(--m-dark); }
.msg-menu-reply:hover  { background: var(--m-teal); color: #fff; }

.msg-menu-edit   { background: var(--m-surface2); color: var(--m-dark); }
.msg-menu-edit:hover   { background: var(--m-orange); color: #fff; }

.msg-menu-copy   { background: var(--m-surface2); color: var(--m-dark); }
.msg-menu-copy:hover   { background: var(--m-dark); color: var(--m-yellow); }

.msg-menu-delete { background: var(--m-pink); color: #fff; }
.msg-menu-delete:hover { background: #c0392b; }

/* ========== CRYPTO (TradingView-style) ========== */
.tv-header-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tv-wrap {
    background: #000;
    border-radius: 16px;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Inter', 'Inter Tight', Arial, sans-serif;
}

.tv-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tv-symbol-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tv-theme-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background .15s;
}
.tv-theme-btn:hover { background: rgba(255,255,255,0.08); }
.tv-wrap.tv-light .tv-theme-btn:hover { background: rgba(0,0,0,0.06); }

.tv-coin-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F7931A;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-pair-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.tv-exchange-row {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.tv-exchange-dot { opacity: .6; }

.tv-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00C2C7;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(0,194,199,0.6);
    animation: tv-pulse 1.8s infinite;
}

@keyframes tv-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,194,199,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(0,194,199,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,194,199,0); }
}

.tv-price-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.tv-price {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}

.tv-price-ccy {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}

.tv-change-line {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tv-change-line.secondary { font-size: 14px; opacity: .85; }

.tv-change-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}

.tv-vol-line {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}
.tv-vol-line b { color: #a78bfa; font-weight: 700; }

.tv-chart-card {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
}

.tv-range-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tv-range-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.tv-range-btn:hover  { background: rgba(255,255,255,0.06); color: #fff; }
.tv-range-btn.active { background: rgba(0,194,199,0.15); color: #00C2C7; }

/* ── Light theme ────────────────────────────────────────────────────────── */
.tv-wrap.tv-light {
    background: #ffffff;
    color: #111;
}
.tv-wrap.tv-light .tv-pair-name    { color: #111; }
.tv-wrap.tv-light .tv-exchange-row { color: rgba(0,0,0,0.5); }
.tv-wrap.tv-light .tv-price        { color: #111; }
.tv-wrap.tv-light .tv-price-ccy    { color: rgba(0,0,0,0.55); }
.tv-wrap.tv-light .tv-change-label { color: rgba(0,0,0,0.45); }
.tv-wrap.tv-light .tv-vol-line     { color: rgba(0,0,0,0.45); }
.tv-wrap.tv-light .tv-vol-line b   { color: #7c3aed; }

.tv-wrap.tv-light .tv-chart-card {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.tv-wrap.tv-light .tv-range-btn         { color: rgba(0,0,0,0.55); }
.tv-wrap.tv-light .tv-range-btn:hover   { background: rgba(0,0,0,0.06); color: #111; }
.tv-wrap.tv-light .tv-range-btn.active { background: rgba(0,158,143,0.12); color: #009e8f; }

.tv-wrap.tv-light .crypto-tooltip {
    background: #ffffff;
    border-color: rgba(0,0,0,0.15);
    color: #111;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.tv-wrap.tv-light .crypto-tooltip b { color: #009e8f; }

.btc-canvas-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.btc-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
}
.btc-canvas--bg      { z-index: 1; cursor: default; }
.btc-canvas--overlay { z-index: 2; cursor: crosshair; background: transparent; }
.btc-canvas-wrap .crypto-tooltip { z-index: 3; }

.crypto-tooltip {
    position: absolute;
    background: rgba(26,26,26,0.95);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: #fff;
    pointer-events: none;
    z-index: 10;
    line-height: 1.5;
    white-space: nowrap;
}
.crypto-tooltip b    { font-size: 14px; color: #00C2C7; }
.crypto-tooltip span { opacity: .6; }

.crypto-loading,
.crypto-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 15px;
    font-weight: 600;
    opacity: .7;
}

.crypto-mode .chat-messages {
    position: relative;
    overflow-y: auto;
}

/* ========== UPLOAD PROGRESS ========== */
.upload-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding: 4px 6px 2px;
    position: relative;
}

/* track */
.upload-progress::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    height: 5px;
    background: rgba(0,0,0,0.13);
    border-radius: 99px;
}

.upload-progress__fill {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 5px;
    width: 0%;
    background: var(--m-teal);
    border-radius: 99px;
    transition: width 0.15s ease-out;
    max-width: calc(100% - 44px);
}
.message.own .upload-progress__fill { background: var(--m-pink); }

.upload-progress__label {
    font-size: 11px;
    font-weight: 900;
    color: var(--m-teal);
    min-width: 30px;
    text-align: right;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}
.message.own .upload-progress__label      { color: var(--m-pink); }

.upload-progress--done .upload-progress__fill  { background: var(--m-lime); }
.upload-progress--done .upload-progress__label { color: #3a9a00; font-size: 13px; }

/* ========== iOS FIXES ========== */
.chat-messages .message img,
.chat-messages .message video,
.chat-messages .message a {
    -webkit-touch-callout: none;
    pointer-events: none;
}
.chat-messages .message .msg-file-card { pointer-events: auto; -webkit-touch-callout: none; }
.chat-messages .message img            { pointer-events: auto; }
.chat-messages .message video          { pointer-events: auto; }
/* Текстовые ссылки внутри сообщения (msg-text) должны оставаться кликабельными —
   правило выше глушит все <a>, это возвращает клики именно текстовым ссылкам,
   не трогая поведение картинок/видео. */
.chat-messages .message .msg-text a    { pointer-events: auto; }

/* ========== PANEL INPUT MODES ========== */
/* weather / news use <input> inside chat-input-wrap */
.chat-panel.weather-mode .attach-btn,
.chat-panel.news-mode    .attach-btn,
.chat-panel.weather-mode .voice-btn,
.chat-panel.news-mode    .voice-btn {
    display: none !important;
}

/* In non-chat modes the wrap holds just input + send */
.chat-panel.weather-mode .chat-input,
.chat-panel.news-mode    .chat-input {
    gap: 12px;
}

.chat-panel.weather-mode .chat-input-wrap,
.chat-panel.news-mode    .chat-input-wrap {
    box-shadow: 4px 4px 0 var(--m-dark);
}

.chat-panel.weather-mode .chat-input input,
.chat-panel.news-mode    .chat-input input {
    background: var(--m-surface2);
    font-weight: 700;
}
.chat-panel.weather-mode .chat-input input:focus,
.chat-panel.news-mode    .chat-input input:focus { background: #fffbe0; }
.chat-panel.weather-mode .chat-input input::placeholder,
.chat-panel.news-mode    .chat-input input::placeholder { color: #aaa; font-weight: 400; }

/* Modes that never show the input bar */
.chat-panel.requests-mode .chat-input,
.chat-panel.crypto-mode   .chat-input {
    display: none !important;
}

/* Hide input when panel is closed (mobile only) */
/* Mobile: JS adds .panel-closed after the 300ms transition; only then hide */
@media (max-width: 768px) {
    .chat-panel.panel-closed .chat-input {
        display: none !important;
    }

    /* Reader и Notepad прячем из скролла кнопок только на мобилке —
       на десктопе (см. min-width:1025px ниже) остаются как есть.
       Кнопка "Переводчик" (#translaterTranslateBtn) остаётся видимой —
       на мобилке она открывает выдвижную панель (translater.js). */
    #translaterReaderBtn,
    #notepadBtn {
        display: none !important;
    }
}

/* ========== DESKTOP (1025px+) ========== */
@media (min-width: 1025px) {
    #mainUI { flex-direction: row; }

    .contacts-panel {
        position: relative;
        inset: auto;
        width: 350px;
        min-width: 350px;
        max-width: 350px;
        height: 100vh;
        flex-shrink: 0;
        z-index: 1;
        transform: none !important;
    }

    .chat-panel {
        position: relative;
        inset: auto;
        flex: 0 0 600px;
        width: 600px;
        min-width: 600px;
        max-width: 600px;
        height: 100vh;
        z-index: 1;
        transform: none !important;
        display: flex;
    }

    .back-btn { display: none !important; }

    .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
    }

    .chat-input { flex-shrink: 0; margin-top: auto; }

    /* Show input bar always on desktop/tablet */
    .chat-panel .chat-input { display: flex !important; }
    .chat-panel:not(.weather-mode):not(.news-mode):not(.open) .chat-input { display: none !important; }
    .chat-panel.requests-mode   .chat-input,
    .chat-panel.crypto-mode     .chat-input,
    .chat-panel.pinball-mode    .chat-input,
    .chat-panel.asteroids-mode  .chat-input,
    .chat-panel.chess-mode      .chat-input,
    .chat-panel.quiz-mode       .chat-input,
    .chat-panel.main-news-mode  .chat-input { display: none !important; }

    .chat-panel.weather-mode .chat-input,
    .chat-panel.news-mode    .chat-input {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
    }

    .chat-panel.weather-mode .chat-input .chat-input-wrap,
    .chat-panel.news-mode    .chat-input .chat-input-wrap {
        display: contents;
    }

    .chat-panel.weather-mode .chat-input input,
    .chat-panel.news-mode    .chat-input input {
        flex: 1;
        min-width: 0;
        padding: 12px 20px;
        font-size: 14px;
        border: 3px solid var(--m-dark);
        border-radius: 50px;
        background: var(--m-surface2);
        box-shadow: none;
        outline: none;
    }
    .chat-panel.weather-mode .chat-input input:focus,
    .chat-panel.news-mode    .chat-input input:focus { background: #fffbe0; }

    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn),
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn) {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        min-width: 46px;
        padding: 0;
        border-radius: 50%;
        border: 3px solid var(--m-dark);
        background: var(--m-pink);
        color: transparent;
        font-size: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s, transform .1s;
    }
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn)::after,
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn)::after {
        content: '';
        display: block;
        width: 22px;
        height: 22px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn):hover,
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn):hover { background: var(--m-orange); }
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn):active,
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn):active { transform: scale(.93); }

    .search-bar          { padding: 10px 12px; }
    .search-bar input    { font-size: 13px; padding: 8px 14px; }
    .search-bar button   { padding: 8px 12px; font-size: 14px; }
    .search-card         { margin: 6px 10px; padding: 8px 12px; }
    .search-avatar       { width: 32px; height: 32px; min-width: 32px; font-size: 13px; }
    .search-name         { font-size: 12px; }
    .search-email        { font-size: 10px; }
    .search-add-btn      { padding: 4px 12px; font-size: 10px; }

    .chat-panel .chat-messages:empty::before {
        content: "✨ Select a contact to start messaging";
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
        padding: 20px;
        color: var(--m-dark);
        opacity: 0.5;
    }
}

/* ========== TABLET (769px – 1024px) ==========
   Same drawer scenario as Weather/News/Stats (stats-panel.css): contacts
   list stays put, chat slides in from the right as a partial-width panel
   riding on top of it, with a dim backdrop behind and a round ✕ to close —
   not a full-screen swap into a second column anymore. */
@media (min-width: 769px) and (max-width: 1024px) {
    #mainUI { flex-direction: row; }

    .contacts-panel {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 100vh;
        flex-shrink: 0;
        z-index: 1;
        transform: none !important;
    }

    .chat-panel {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: auto;
        width: 88vw;
        max-width: 460px;
        height: 100%;
        border-left: 2px solid var(--m-dark);
        box-shadow: -4px 0 0 rgba(26, 26, 26, .55);
        z-index: 30;
        transform: translateX(100%) translateZ(0);
        transition: transform .3s ease;
        display: flex;
    }

    .chat-panel.open { transform: translateX(0) translateZ(0); }

    .chat-header { flex-shrink: 0; }

    .back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        border: 2px solid var(--m-yellow);
        border-radius: 50%;
        background: transparent;
        color: var(--m-yellow);
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        transition: background .12s, color .12s, border-color .12s;
    }
    .back-btn:hover,
    .back-btn:active { background: var(--m-pink); border-color: var(--m-pink); color: #fff; }

    .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
    }

    .chat-input { flex-shrink: 0; margin-top: auto; }

    .chat-panel .chat-input { display: flex !important; }
    .chat-panel.requests-mode   .chat-input,
    .chat-panel.crypto-mode     .chat-input,
    .chat-panel.pinball-mode    .chat-input,
    .chat-panel.asteroids-mode  .chat-input,
    .chat-panel.chess-mode      .chat-input,
    .chat-panel.quiz-mode       .chat-input { display: none !important; }

    /* Voice record button: 2x wider touch target on tablet, matched to the
       composer's actual rendered height via align-self: stretch — see the
       mobile breakpoint above for why a fixed px height doesn't track
       .msg-editor's real (padding + line-height + growth) height. */
    .chat-circle-btn.voice-btn {
        width: 92px;
        min-width: 92px;
        align-self: stretch;
        height: auto;
        border-radius: 9999px;
    }
}

/* ========== CHAT PANEL BACKDROP (mobile + tablet only) ==========
   Same role as .stats-panel-backdrop (stats-panel.css): dims the contacts
   list behind the sliding chat drawer, tap to close. Hidden on desktop
   (1025px+), where chat-panel is a normal in-flow column. */
.chat-panel-backdrop { display: none; }

@media (max-width: 1024px) {
    .chat-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 25;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }
    .chat-panel-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    .header,
    .chat-header { height: 56px; padding: 0 16px; }

    .contacts-panel {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .contacts-panel.slide-left { transform: none !important; }

    .chat-panel {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        border-left: none;
        box-shadow: none;
        transform: translateX(100%) translateZ(0);
        transition: transform .3s ease;
        z-index: 30;
    }

    .chat-panel.open { transform: translateX(0) translateZ(0); }

    .chat-header { flex-shrink: 0; }

    .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
    }

    .chat-input {
        flex-shrink: 0;
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: var(--m-surface);
        border-top: 4px solid var(--m-dark);
        display: flex;
        flex-direction: row;
        align-items: flex-end; /* pin circle buttons to the bottom edge as
                       the editor grows, instead of vertically centering
                       (which made them drift upward). */
        gap: 12px;
    }

    /* chat mode: larger touch targets on mobile */
    .chat-input-wrap .msg-editor,
    .chat-input-wrap input[type="text"] {
        font-size: 16px;
        min-height: 50px;
        padding: 13px 18px;
    }

    .chat-circle-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 16px;
    }

    /* Voice record button: 2x wider touch target on mobile, and matched to
       the composer's actual rendered height via align-self: stretch —
       not a fixed px value. .msg-editor's real height isn't its min-height
       (50px): padding (13px×2) + border (3px×2) + line-height alone already
       exceed that, and it grows further with multi-line content up to
       150px. .chat-input uses align-items: flex-end for the other buttons,
       so this button needs its own align-self to actually track the row's
       cross-axis size instead of sitting at a guessed height. Border-radius
       uses an oversized value (Tailwind's "rounded-full" trick) so it stays
       a true stadium/pill at any height instead of a fixed radius baked in
       for one specific height. */
    .chat-circle-btn.voice-btn {
        width: 84px;
        min-width: 84px;
        align-self: stretch;
        height: auto;
        border-radius: 9999px;
    }

    /* ---- search/info modes: pill input + separate round btn ---- */
    .chat-panel.weather-mode .chat-input,
    .chat-panel.news-mode    .chat-input {
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: var(--m-surface);
        border-top: 4px solid var(--m-dark);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    /* Dissolve the wrap — make it a plain flex passthrough */
    .chat-panel.weather-mode .chat-input .chat-input-wrap,
    .chat-panel.news-mode    .chat-input .chat-input-wrap {
        flex: 1;
        min-width: 0;
        display: contents; /* children participate directly in .chat-input flex */
    }

    /* Input gets its own pill border */
    .chat-panel.weather-mode .chat-input input,
    .chat-panel.news-mode    .chat-input input {
        flex: 1;
        min-width: 0;
        padding: 13px 20px;
        font-size: 16px;
        min-height: 50px;
        border: 3px solid var(--m-dark);
        border-radius: 50px;
        background: var(--m-surface2);
        box-shadow: none;
        outline: none;
        font-weight: 400;
    }
    .chat-panel.weather-mode .chat-input input:focus,
    .chat-panel.news-mode    .chat-input input:focus {
        background: #fffbe0;
    }
    .chat-panel.weather-mode .chat-input input::placeholder,
    .chat-panel.news-mode    .chat-input input::placeholder { color: #aaa; }

    /* Round search button — fully separate */
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn),
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn) {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        min-width: 50px;
        padding: 0;
        border-radius: 50%;
        border: 3px solid var(--m-dark);
        background: var(--m-pink);
        color: transparent;
        font-size: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s, transform .1s;
    }
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn)::after,
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn)::after {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn):hover,
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn):hover {
        background: var(--m-orange);
    }
    .chat-panel.weather-mode .chat-input button:not(.attach-btn):not(.voice-btn):active,
    .chat-panel.news-mode    .chat-input button:not(.attach-btn):not(.voice-btn):active {
        transform: scale(.93);
    }

    .back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        border: 2px solid var(--m-yellow);
        border-radius: 50%;
        background: transparent;
        color: var(--m-yellow);
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        transition: background .12s, color .12s, border-color .12s;
    }
    .back-btn:hover,
    .back-btn:active { background: var(--m-pink); border-color: var(--m-pink); color: #fff; }

    .top-buttons  { gap: 8px; padding: 12px 8px; }
    .circle-btn   { width: 48px; height: 48px; font-size: 18px; }

    /* Hide input bar for game modes on mobile */
    .chat-panel.chess-mode      .chat-input,
    .chat-panel.quiz-mode       .chat-input { display: none !important; }



    .news-item--has-thumb { flex-direction: column; gap: 0; }
    .news-item__thumb-wrap {
        width: 100%;
        height: 140px;
        align-self: auto;
        border-radius: 12px 12px 0 0;
        border-right: none;
        border-bottom: none;
    }
    .news-item--has-thumb .news-item__body { padding: 12px 14px; }
}



/* ========== UNFRIEND BUTTON ========== */
.contact-unfriend-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    background: transparent;
    color: #ccc;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.contact-unfriend-btn:hover {
    background: var(--m-pink);
    color: #fff;
    border-color: var(--m-pink);
    transform: scale(1.1);
}
.contact-unfriend-btn:active {
    transform: scale(.9);
}

/* Для тёмных схем, где кнопка может быть не видна */
[data-scheme="9"] .contact-unfriend-btn {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.3);
}
[data-scheme="9"] .contact-unfriend-btn:hover {
    border-color: var(--m-pink);
    color: #fff;
}



/* ========== UNFRIEND BUTTON ========== */
.contact-unfriend-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.12);
    background: transparent;
    color: #bbb;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0;
    line-height: 1;
    font-family: inherit;
    user-select: none;
}
.contact-unfriend-btn:hover {
    background: var(--m-pink);
    color: #fff;
    border-color: var(--m-pink);
    transform: scale(1.12);
}
.contact-unfriend-btn:active {
    transform: scale(.85);
}

/* Для тёмных схем */
[data-scheme="9"] .contact-unfriend-btn {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.25);
}
[data-scheme="9"] .contact-unfriend-btn:hover {
    border-color: var(--m-pink);
    color: #fff;
    background: var(--m-pink);
}


/* ========== WEATHER MODERN ========== */
.weather-container-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px 20px;
    max-width: 100%;
}

/* Hero card — same "floating window" chrome as the rest of the app
   (translater.css / request-card), but on the LIGHTER side: thinner border
   and a smaller, softer offset-shadow instead of the heaviest 3px/8px combo
   used elsewhere. The gradient itself still carries the weather "mood"
   (see weather.js: WEATHER_BG). */
.weather-card {
    border: 2px solid var(--m-dark);
    border-radius: 20px;
    overflow: hidden;
    padding: 24px 20px 20px;
    box-shadow: 4px 4px 0 rgba(26, 26, 26, .55);
    position: relative;
    min-height: 280px;
    transition: transform .15s ease;
}

/* A couple of flat Memphis confetti shapes tucked in the corners — same
   decorative language as the app icons (circle / rotated square). Pure
   CSS, no extra markup needed. Slightly more subtle than elsewhere. */
.weather-card::before,
.weather-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.weather-card::before {
    top: -34px; right: -34px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
}
.weather-card::after {
    bottom: -30px; left: -24px;
    width: 84px; height: 84px;
    border-radius: 20px;
    background: rgba(255,255,255,0.07);
    transform: rotate(18deg);
}

.weather-card-content {
    position: relative;
    z-index: 1;
    color: #fff;
}

.weather-location {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.weather-location-icon {
    font-size: 18px;
    opacity: 0.8;
}

.weather-location-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.weather-location-country {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--m-dark);
    background: #fff;
    border: 1px solid var(--m-dark);
    padding: 2px 11px;
    border-radius: 50px;
}

.weather-temp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 4px;
}

.weather-temp-main {
    font-size: 54px;
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1;
}

/* Icon lives in a round "sticker" badge — thinner border + smaller, softer
   shadow than the old hard 4px/4px pin. */
.weather-icon-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 38px;
    line-height: 1;
    background: #fff;
    border: 2px solid var(--m-dark);
    border-radius: 50%;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.20);
    animation: weather-float 3s ease-in-out infinite;
}

@keyframes weather-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-4deg); }
}

.weather-desc {
    font-size: 17px;
    font-weight: 700;
    opacity: 0.9;
    text-transform: capitalize;
    margin-top: 2px;
}

.weather-desc-sub {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
    margin-top: 2px;
}

/* Detail chips — flat, thin border, no blur. Lighter footprint (smaller
   radius/gap) than the original. */
.weather-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.weather-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 12px;
    text-align: center;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.35);
}

.weather-detail-icon {
    font-size: 18px;
    opacity: 0.9;
}

.weather-detail-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.weather-detail-value {
    font-size: 13px;
    font-weight: 800;
}

/* Forecast section */
.weather-forecast-section {
    background: var(--m-surface);
    border-radius: 20px;
    padding: 16px 18px 18px;
    border: 2px solid var(--m-dark);
    box-shadow: 3px 3px 0 rgba(26, 26, 26, .5);
}

.weather-section-title {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--m-dark);
    margin-bottom: 14px;
    opacity: 0.55;
}

.weather-forecast-modern {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forecast-day-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--m-surface2);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    opacity: 0;
    animation: forecast-slide 0.4s ease forwards;
}

@keyframes forecast-slide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.forecast-day-modern:hover {
    background: var(--m-surface2);
    background: color-mix(in srgb, var(--m-teal) 12%, var(--m-surface2));
}

.forecast-day-modern.forecast-today {
    background: var(--m-surface2);
    background: color-mix(in srgb, var(--m-yellow) 16%, var(--m-surface2));
    border-color: var(--m-yellow);
}

.forecast-day-left {
    display: flex;
    flex-direction: column;
    min-width: 52px;
}

.forecast-day-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--m-dark);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.forecast-day-date {
    font-size: 10px;
    font-weight: 700;
    color: var(--m-dark);
    opacity: 0.4;
}

.forecast-day-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.forecast-day-temps {
    display: flex;
    gap: 10px;
    margin-left: auto;
    align-items: baseline;
}

.forecast-day-max {
    font-size: 16px;
    font-weight: 900;
}

.forecast-day-min {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.5;
}

.forecast-day-extra {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}

/* Bordered chips instead of flat tinted-background badges, matching the
   forecast-today outline treatment above. Thinner border than before. */
.forecast-precip-badge,
.forecast-wind-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.forecast-precip-badge {
    background: rgba(74, 144, 217, 0.10);
    color: #4A90D9;
}

.forecast-wind-badge {
    background: rgba(255, 107, 53, 0.10);
    color: #FF6B35;
}

/* Chart */
.weather-chart-modern {
    background: var(--m-surface);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid var(--m-dark);
    box-shadow: 3px 3px 0 rgba(26, 26, 26, .5);
}

.weather-temp-chart {
    width: 100%;
    height: 180px;
    display: block;
}

/* Footer */
.weather-footer {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--m-dark);
    opacity: 0.35;
    padding: 6px 0 2px;
    letter-spacing: 0.5px;
}

/* Loading / error / geo-denied states — same lighter window chrome as the
   hero card, so the panel never shows a bare unstyled emoji+text floating
   in space while data is missing. Used by weather.js instead of ad-hoc
   inline styles. */
.weather-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 260px;
    text-align: center;
    padding: 40px 24px;
    margin: 12px 16px 20px;
    background: var(--m-surface);
    border: 2px solid var(--m-dark);
    border-radius: 20px;
    box-shadow: 4px 4px 0 rgba(26, 26, 26, .55);
}

.weather-state-icon { font-size: 56px; line-height: 1; }

.weather-state-icon.spin-loader {
    display: inline-block;
    animation: weather-spin 1.6s linear infinite;
}
@keyframes weather-spin { to { transform: rotate(360deg); } }

.weather-state-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--m-dark);
    opacity: .75;
    max-width: 280px;
    line-height: 1.5;
}
.weather-state-text.is-error { color: var(--m-orange); opacity: 1; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .weather-container-modern {
        padding: 8px 10px 16px;
        gap: 12px;
    }
    
    .weather-card {
        padding: 18px 14px 16px;
        min-height: 220px;
    }
    
    .weather-temp-main {
        font-size: 44px;
    }
    
    .weather-icon-large {
        width: 62px;
        height: 62px;
        font-size: 30px;
    }
    
    .weather-location-name {
        font-size: 17px;
    }
    
    .weather-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .weather-detail-value {
        font-size: 12px;
    }
    
    .forecast-day-modern {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .forecast-day-left {
        min-width: 44px;
    }
    
    .forecast-day-label {
        font-size: 11px;
    }
    
    .forecast-day-max {
        font-size: 14px;
    }
    
    .forecast-day-min {
        font-size: 12px;
    }
    
    .forecast-day-extra {
        margin-left: auto;
        flex-wrap: wrap;
    }
    
    .weather-forecast-section {
        padding: 12px 10px 14px;
    }
    
    .weather-temp-chart {
        height: 140px;
    }

    .weather-state-card {
        margin: 8px 6px 14px;
        min-height: 220px;
        padding: 32px 18px;
    }
    .weather-state-icon { font-size: 46px; }
}

/* Dark scheme support */
[data-scheme="9"] .weather-forecast-section {
    background: #1a1a2e;
    border-color: #2d2d4a;
    box-shadow: 4px 4px 0 #2d2d4a;
}

[data-scheme="9"] .forecast-day-modern {
    background: #252540;
}

[data-scheme="9"] .forecast-day-modern:hover {
    background: #2d2d5a;
}

[data-scheme="9"] .forecast-day-modern.forecast-today {
    background: rgba(255, 225, 53, 0.15);
    border-color: var(--m-yellow);
}

[data-scheme="9"] .weather-chart-modern {
    background: #1a1a2e;
    border-color: #2d2d4a;
    box-shadow: 4px 4px 0 #2d2d4a;
}

[data-scheme="9"] .forecast-precip-badge {
    background: rgba(74, 144, 217, 0.25);
}

[data-scheme="9"] .forecast-wind-badge {
    background: rgba(255, 107, 53, 0.2);
}

[data-scheme="9"] .weather-footer {
    color: rgba(255,255,255,0.4);
}

[data-scheme="9"] .weather-section-title {
    color: rgba(255,255,255,0.6);
}

[data-scheme="9"] .weather-temp-chart {
    background: #1a1a2e;
}

[data-scheme="9"] .weather-state-card {
    background: #1a1a2e;
    border-color: #2d2d4a;
    box-shadow: 8px 8px 0 #2d2d4a;
}
[data-scheme="9"] .weather-state-text { color: rgba(255,255,255,0.75); }