/* --- Глобальная плавность --- */
*, *::before, *::after {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.i svg {
    transition: none; /* Убираем "дёрганье" иконок */
}

/* --- Переменные (Темы) --- */
:root{
  --bg:#0f1318; --elev-1:#111720; --elev-2:#141b25; --elev-3:#0c1117;
  --muted:#97a6ba; --text:#eaf1fb; --accent:#6ea8fe; --accent-2:#9b7bff;
  --success:#2fbf71; --danger:#ff6b6b; --warning:#ffb454; --border:#263245;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --radius:14px; --radius-sm:10px; --radius-lg:18px; --radius-xl:22px;
  --focus:0 0 0 2px color-mix(in oklab,var(--accent),transparent 70%);
}
html[data-theme="light"]{
  --bg:#f6f8fb; --elev-1:#fff; --elev-2:#f2f4f8; --elev-3:#fff;
  --muted:#667084; --text:#101828; --accent:#2563eb; --accent-2:#7c3aed;
  --success:#16a34a; --danger:#ef4444; --warning:#f59e0b; --border:#e5e7eb;
  --shadow:0 10px 30px rgba(16,24,40,.10);
}

/* --- Базовые стили --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:radial-gradient(1200px 800px at 15% 10%,var(--elev-2) 0%,var(--bg) 55%);
    color:var(--text);
    font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
a{color:inherit;text-decoration:none}
button{font:inherit; background: transparent; border: 0; padding: 0; cursor: pointer;}

/* --- Элементы UI --- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.65rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:linear-gradient(180deg,var(--elev-2),var(--elev-1));
    color:var(--text);cursor:pointer;box-shadow:var(--shadow);
    text-decoration: none; user-select: none;
}
.btn:hover{transform:translateY(-1px); border-color:color-mix(in oklab,var(--border),white 12%)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow),var(--focus)}
.btn.primary{
    background:linear-gradient(180deg,color-mix(in oklab,var(--accent),white 10%),color-mix(in oklab,var(--accent),black 10%));
    border-color:color-mix(in oklab,var(--accent),black 20%);
}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn.ghost:hover{background:var(--elev-2)}
.btn.icon{padding:.55rem;border-radius:12px}

.chip{
    padding:.25rem .55rem;border-radius:999px;
    background:color-mix(in oklab,var(--accent),black 70%);
    color:#bcd3ff;font-size:.75rem;
    border:1px solid color-mix(in oklab,var(--accent),black 55%);
}
.input,textarea{
    width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);
    border:1px solid var(--border);background:var(--elev-1);
    color:var(--text);outline:none; font:inherit;
}
.input:focus-visible,textarea:focus-visible,.input:focus,textarea:focus{
    outline:none;box-shadow:var(--focus);
    border-color:color-mix(in oklab,var(--accent),black 20%);
}
.input::placeholder,textarea::placeholder{color:color-mix(in oklab,var(--muted),black 10%)}
textarea{resize:vertical; min-height: 60px;}

.divider{border-top:1px solid var(--border);margin:1rem 0}
.scroll-y{overflow-y:auto; overflow-x: hidden;}
.spinner{
    width:16px;height:16px;border-radius:50%;
    border:2px solid color-mix(in oklab,var(--text),transparent 75%);
    border-top-color:var(--text);animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Структура приложения --- */
.app{display:flex;height:100dvh}
.sidebar{
    width:78px;border-right:1px solid var(--border);display:flex;
    flex-direction:column;align-items:center;gap:10px;padding:14px 10px;
    background:color-mix(in oklab,var(--elev-1),transparent 20%);
    flex-shrink: 0;
}
.brand{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;font-weight:800;letter-spacing:.5px; flex-shrink: 0;
}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:10px;width:100%}
.nav button{width:100%;cursor:pointer}
.nav .item{
    display:flex;flex-direction:column;align-items:center;
    gap:6px;padding:10px;border:1px solid transparent;
    border-radius:12px;color:var(--muted);
}
.nav .item:hover{background:color-mix(in oklab,var(--elev-2),transparent 40%);color:var(--text)}
.nav .item.active{background:var(--elev-2);color:var(--text);border-color:var(--border)}
.nav .label{font-size:.7rem;opacity:.85}

.left-col{
    width:360px;border-right:1px solid var(--border);
    background:var(--elev-3);display:flex;flex-direction:column;
    flex-shrink: 0;
}
.left-top{padding:12px;border-bottom:1px solid var(--border);position:relative}
.left-top .input{padding-left:44px}
.left-top .i{position:absolute;left:26px;top:50%;transform:translateY(-50%);opacity:.7;pointer-events:none}
.list{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.list-item{
    display:flex;gap:12px;align-items:center;border:1px solid var(--border);
    border-radius:16px;padding:12px;background:var(--elev-1);cursor:pointer;
}
.list-item:hover{transform:translateY(-1px); border-color:color-mix(in oklab,var(--border),white 14%)}
.list-item.active{background:var(--elev-2);border-color:color-mix(in oklab,var(--border),white 20%)}
.item-body{flex:1;min-width:0}
.item-title{display:flex;align-items:center;gap:8px}
.item-title h4{margin:0;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-sub{color:var(--muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;font-weight:800;overflow:hidden; flex-shrink: 0;
}
.avatar svg{width:100%;height:100%}
.avatar img{width:100%; height:100%; object-fit:cover;}

.right-col{flex:1;display:flex;flex-direction:column; min-width: 0;}
.content-header{
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--border);padding:14px 18px;
    background:var(--elev-3); flex-shrink: 0;
}
.content-title{display:flex;align-items:center;gap:12px;cursor:pointer; min-width: 0;}
.content-title .avatar{width:36px;height:36px;border-radius:10px}
.content-title strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.status-dot{
    width:8px;height:8px;border-radius:50%;background:var(--success);
    display:inline-block;margin-left:8px;box-shadow:0 0 0 0 rgba(47,191,113,.8);
    animation:pulse 2s infinite; flex-shrink: 0;
}
.status-dot.off{background:var(--warning);animation:none;opacity:.8}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,191,113,.7)}70%{box-shadow:0 0 0 8px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}

.content{flex:1;display:flex;min-height:0; position: relative;}
.view{display:none;width:100%; height: 100%;}
.view.active{display:flex;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* --- View: Лента --- */
.feed-wrapper{
    display:flex; flex-direction:column; gap:16px;
    padding:16px;width:100%;max-width:900px;margin:0 auto;
}
.card{background:var(--elev-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}
.composer{padding:14px}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-media{margin-top:10px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.post-media img,.post-media video{width:100%;display:block;border-radius:12px;cursor:zoom-in}
.post-text { white-space: pre-wrap; word-wrap: break-word; }

/* --- View: Чаты --- */
.chat-pane{flex:1;display:flex;flex-direction:column; width: 100%;}
.call-bar{
    display:none;align-items:center;gap:10px;padding:10px 14px;
    border-bottom:1px dashed var(--border);background:color-mix(in oklab,var(--accent),transparent 85%);
}
.call-bar.active{display:flex}
.call-bar .wave{display:flex;gap:3px;align-items:flex-end;height:18px}
.call-bar .wave span{width:3px;height:6px;background:currentColor;border-radius:2px;animation:wave 1s infinite ease-in-out}
.call-bar .wave span:nth-child(2){animation-delay:.1s}.call-bar .wave span:nth-child(3){animation-delay:.2s}.call-bar .wave span:nth-child(4){animation-delay:.3s}
@keyframes wave{0%,100%{height:6px;opacity:.6}50%{height:18px;opacity:1}}

.messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--elev-3)}
.msg{
    max-width:74%;padding:10px 12px;border-radius:14px;
    border:1px solid var(--border);background:var(--elev-1);
    position:relative; animation:pop .12s ease;
    word-wrap: break-word;
}
.msg .meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.75rem;margin-top:6px}
.msg .meta .i{width:16px; height: 16px; stroke-width: 2.5px; opacity: 0.8;}
.msg .actions{
    position:absolute;top:-14px;right:8px;display:flex;gap:6px;
    opacity:0;transform:translateY(-6px);
    background: var(--elev-2); border: 1px solid var(--border);
    border-radius: 99px; padding: 2px 4px; box-shadow: var(--shadow); z-index: 2;
}
.msg:hover .actions{opacity:1;transform:none}
.msg.me{
    align-self:flex-end;
    background:linear-gradient(180deg,color-mix(in oklab,var(--accent),transparent 85%),var(--elev-1));
    border-color:color-mix(in oklab,var(--border),var(--accent) 25%);
}
.msg.deleted{opacity:.7;font-style:italic}
.msg .reply-preview{
    border-left:3px solid color-mix(in oklab,var(--accent-2),black 20%);
    padding-left:8px;margin-bottom:6px;color:var(--muted);font-size:.82rem;
}
.reactions{display:flex;gap:6px;margin-top:6px}
.reaction{font-size:.8rem;padding:.1rem .45rem;border:1px solid var(--border);border-radius:999px;background:var(--elev-2);cursor:pointer;opacity:.9}
.msg-media{margin-top:6px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.msg-media img,.msg-media video{width:100%;display:block;border-radius:10px;cursor:zoom-in}
.msg-media.embedded{
    border: none; background: transparent;
    max-width: 400px;
}
.msg-media.embedded img {
    border-radius: 12px;
    border: 1px solid var(--border);
    display: block;
    width: 100%;
}
.msg-media.embedded iframe {
    border-radius: 12px;
    border: 1px solid var(--border);
}

@keyframes pop{from{transform:translateY(2px) scale(.98);opacity:.4}to{transform:none;opacity:1}}
.audio-player {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 10px;
    background: var(--elev-2); border: 1px solid var(--border);
}
.audio-player audio { width: 100%; height: 32px; }
#voiceBtn.recording {
    background: var(--danger); color: white;
    animation: pulse-danger 1.5s infinite;
}
@keyframes pulse-danger {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--danger), transparent 70%); }
    70% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--danger), transparent 100%); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--danger), transparent 100%); }
}
.composer-row{
    display:flex;gap:8px;padding:10px 12px;
    border-top:1px solid var(--border);background:var(--elev-3);
    align-items:flex-end; position:relative; flex-shrink: 0;
}
.composer-row .input{border-radius:14px; padding-right: 170px;}
.composer-tools{display:flex;gap:6px}
.composer-emoji-btn{position:absolute;right:180px;bottom:22px}
.emoji-pop{
    position:absolute;bottom:64px;right:16px;background:var(--elev-1);
    border:1px solid var(--border);border-radius:12px;padding:8px;
    display:none;width:320px;box-shadow:var(--shadow); z-index: 10;
}
.emoji-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(32px, 1fr));
    gap:4px;max-height:220px;overflow:auto;font-size:20px
}
.emoji-pop.open{display:block}
.emoji-grid .emoji-item {
    font-size: 1.5rem; cursor: pointer; text-align: center;
    border-radius: var(--radius-sm); padding: 2px;
}
.emoji-grid .emoji-item:hover { background-color: var(--elev-2); }

.reply-chip{
    display:none;align-items:center;gap:8px;padding:6px 10px;
    margin:0 12px 8px;border-radius:12px;background:var(--elev-2);
    border:1px dashed var(--border);color:var(--muted); flex-shrink: 0;
}
.reply-chip.active{display:flex}
.upload-strip{display:flex;gap:6px;flex-wrap:wrap;margin: 0 12px 6px; flex-shrink: 0;}
.thumb{width:76px;height:76px;border:1px solid var(--border);border-radius:10px;overflow:hidden;position:relative}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .rm-btn{
    position:absolute;top:4px;right:4px; background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px); border-radius: 99px; color: white;
    line-height: 1; padding: 2px;
}
.thumb .rm-btn .i{stroke-width: 2.5; width: 16px; height: 16px;}
.dropzone{
    border:1px dashed var(--border);border-radius:12px;padding:8px;
    display:none;margin:6px 12px;color:var(--muted); flex-shrink: 0;
}
.dropzone.active{display:block;background:color-mix(in oklab,var(--accent),transparent 92%)}

/* --- View: Профиль (v2) --- */
.profile-wrap {
    width: 100%;
    padding: 0; /* Баннер тянется */
    overflow-y: auto;
    display: flex;
    justify-content: center;
}
.id-card-v2 {
    width: min(760px, 100%);
    margin: 24px 0;
    background: var(--elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.id-banner {
    height: 160px;
    background: linear-gradient(120deg, var(--elev-2), var(--elev-3));
}
.id-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 24px;
    margin-top: -80px; /* Поверх баннера */
}
.id-avatar-wrapper { position: relative; }
.id-avatar-wrapper .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Круглый */
    border: 4px solid var(--elev-1);
    background: var(--elev-3);
    overflow: hidden;
}
.id-avatar-wrapper .avatar img,
.id-avatar-wrapper .avatar svg {
    width: 100%; height: 100%; object-fit: cover;
}
.id-avatar-wrapper .status-dot {
    position: absolute; bottom: 12px; right: 12px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 3px solid var(--elev-1);
    background: var(--success);
    animation: none; box-shadow: none;
}
.id-avatar-wrapper .status-dot.off { background: var(--muted); }
.id-actions { display: flex; gap: 8px; padding-bottom: 16px; }

.id-body { padding: 24px; }
.id-body h2 { margin: 0; font-size: 1.5rem; }
.id-body .divider { margin: 16px 0; }
.id-field { margin-top: 12px; }
.id-field .k { /* Заголовок (Ключ) */
    font-size: 0.75rem; font-weight: 600; color: var(--muted);
    letter-spacing: 0.5px; text-transform: uppercase;
}
.id-field p { /* Значение */
    margin: 4px 0 0 0; font-size: 1rem; color: var(--text);
    white-space: pre-wrap; word-wrap: break-word;
}
.id-field textarea { margin-top: 8px; }

/* Логика режимов Профиля */
.id-card-v2:not(.is-editing) .edit-field { display: none; }
.id-card-v2:not(.is-editing) #saveProfileBtn,
.id-card-v2:not(.is-editing) #cancelEditBtn { display: none; }
.id-card-v2.is-editing .display-field { display: none; }
.id-card-v2.is-editing #editProfileBtn { display: none; }
.id-card-v2.is-editing .edit-field,
.id-card-v2.is-editing #saveProfileBtn,
.id-card-v2.is-editing #cancelEditBtn { display: inline-flex; }
.id-card-v2.is-editing .edit-field { display: block; }

/* --- View: Настройки --- */
.settings-wrap {
    width: 100%; max-width: 900px;
    margin: 0 auto; padding: 24px;
}
.settings-wrap h3 { margin: 0 0 16px 0; }
.settings-row {
    display: flex; justify-content: space-between;
    align-items: center; padding: 12px 0;
}
.settings-row .text { flex: 1; padding-right: 16px; }
.settings-row .text b { font-size: 1rem; }
.toggle-switch {
    position: relative; display: inline-block;
    width: 44px; height: 28px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--elev-2);
    border: 1px solid var(--border);
    border-radius: 34px;
}
.toggle-switch .slider:before {
    position: absolute; content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: var(--text);
    opacity: 0.7; border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: var(--success);
    border-color: color-mix(in oklab, var(--success), black 20%);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(16px);
    opacity: 1;
}
.toggle-switch.disabled { opacity: 0.5; cursor: not-allowed; }
.toggle-switch.disabled .slider { cursor: not-allowed; }

/* --- Компоненты --- */
.lightbox{
    position:fixed;inset:0;background:rgba(0,0,0,.7);
    display:none;align-items:center;justify-content:center;z-index:50
}
.lightbox.open{display:flex}
.lightbox-content{max-width:92vw;max-height:92vh;border-radius:12px;overflow:hidden;border:1px solid #333;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox-content img,.lightbox-content video{display:block;max-width:92vw;max-height:92vh}

.toasts{position:fixed;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:99}
.toast{
    min-width:240px;max-width:380px;border:1px solid var(--border);
    border-left:4px solid var(--accent);background:var(--elev-2);
    color:var(--text);padding:10px 12px;border-radius:12px;
    box-shadow:var(--shadow);animation:slideIn .18s ease
}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warning)}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

#auth{
    position:fixed;inset:0;display:grid;place-items:center;
    background:radial-gradient(1000px 700px at 70% -10%,var(--elev-2),var(--bg));z-index:10
}
.auth-card{
    width:min(860px,96%);background:var(--elev-3);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:18px;display:grid;
    grid-template-columns:1.1fr 1fr;gap:14px; box-shadow: var(--shadow);
}
.auth-hero{
    background:linear-gradient(120deg,color-mix(in oklab,var(--accent),transparent 86%),color-mix(in oklab,var(--accent-2),transparent 85%));
    border:1px solid var(--border);border-radius:var(--radius);padding:14px
}
.auth-title{margin:0 0 6px 0}
.field-error{color:var(--danger);font-size:.85rem;margin-top:4px;display:none}
.field-error.show{display:block}

.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(9,12,16,.6); z-index: 40;}
.modal.open{display:grid}
.modal .sheet{
    width:min(520px,94%);background:var(--elev-3);
    border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:16px;box-shadow:var(--shadow)
}

/* --- Стили Giphy --- */
.giphy-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; padding: 16px 0; max-height: 400px; overflow-y: auto;
}
.giphy-grid .gif-item {
    cursor: pointer; border-radius: var(--radius-sm); overflow: hidden;
    background-color: var(--elev-2); display: flex;
    align-items: center; justify-content: center;
}
.giphy-grid .gif-item:hover { transform: scale(1.03); }
.giphy-grid .gif-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- Стили Cropper.js --- */
#cropContainer { width: 100%; }
#cropImage { display: block; max-width: 100%; opacity: 0; }
.cropper-view-box {
    outline: 1px solid var(--accent);
    outline-color: var(--accent);
    box-shadow: 0 0 0 9999px color-mix(in oklab, var(--bg), transparent 30%);
}
.cropper-face { background: transparent; }
.cropper-modal { background: transparent; }

/* --- Стили Видеозвонка --- */
#video-container {
    position: fixed; z-index: 100;
    bottom: 16px; right: 16px;
    display: grid; grid-template-areas: "main";
}
#localVideo, #remoteVideo {
    grid-area: main;
    border-radius: 12px; border: 1px solid var(--border);
    box-shadow: var(--shadow); background: var(--elev-3);
}
#localVideo {
    width: 150px; z-index: 102;
    position: relative; /* для z-index */
    display: none; /* JS покажет */
}
#remoteVideo {
    width: 400px; z-index: 101;
    display: none; /* JS покажет */
}


/* --- Адаптивность --- */
@media (max-width:1100px){
    .left-col{width:320px}
}
@media (max-width: 900px){
    /* (пусто, .id-card теперь в .id-card-v2) */
}
@media (max-width: 840px) {
    .app { display: block; height: 100dvh; overflow: hidden; }
    .sidebar { display: none; }
    .left-col {
        width: 100%; height: 100%; border-right: none;
        position: absolute; inset: 0;
        z-index: 10;
        transform: translateX(0);
    }
    .right-col {
        width: 100%; height: 100%;
        position: absolute; inset: 0;
        z-index: 5;
    }
    .app.show-chat .left-col {
        /* Сдвигаем левую колонку за экран */
        transform: translateX(-100%);
    }
    #mobileBackBtn { display: flex; }
    .content-header .avatar { width: 32px; height: 32px; }

    .auth-card { grid-template-columns: 1fr; width: 95%; padding: 12px; }

    /* Видео на мобильном */
    #video-container {
        inset: 0; width: 100%; height: 100%;
        background: #000;
    }
    #localVideo {
        width: 120px; position: absolute;
        top: 16px; right: 16px; z-index: 102;
    }
    #remoteVideo {
        width: 100%; height: 100%; border-radius: 0;
        z-index: 101; object-fit: cover;
    }
    .app.show-chat.show-video #callBar { display: none; }
}

@media (max-width: 640px) {
    .content-header{padding:12px}
    .messages{padding:12px}
    .msg{max-width:88%}
    .profile-wrap{padding:14px}
    .composer-row .input{padding-right:170px} /* Подгоняем под кнопки */

    .id-banner { height: 120px; }
    .id-header { margin-top: -60px; padding: 0 16px; }
    .id-avatar-wrapper .avatar { width: 90px; height: 90px; }
}