/* ============================================================
   v104 — Настройки + режимы внешнего вида + Telegram-like polish
   (подключается после style.css)
   ============================================================ */

/* ---- Settings screen ---- */
.settings-wrap{max-width:680px;margin:0 auto;padding:16px 16px 96px;display:flex;flex-direction:column;gap:18px}
.st-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.st-card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:700;font-size:15px;
  border-bottom:1px solid var(--line);letter-spacing:.2px}
.st-card-h .material-symbols-outlined,.st-card-h svg{opacity:.85;font-size:20px;width:20px;height:20px}
.st-row{display:flex;align-items:center;gap:14px;padding:13px 18px;min-height:56px;border-bottom:1px solid var(--line)}
.st-row:last-child{border-bottom:none}
.st-row-txt{flex:1;min-width:0}
.st-row-t{font-size:14.5px;font-weight:500}
.st-row-s{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.st-row-ctl{flex-shrink:0;display:flex;align-items:center}
.st-row-btn{cursor:pointer;transition:background .15s}
.st-row-btn:hover{background:var(--hover)}
.st-row-btn .material-symbols-outlined,.st-row-btn svg{opacity:.6}
.st-row-btn.danger .st-row-t{color:var(--danger)}
.st-select{width:auto;min-width:150px;max-width:260px;padding:8px 12px;border-radius:12px;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);font-size:13.5px;cursor:pointer}
.st-foot{text-align:center;color:var(--muted);font-size:12px;padding:4px 0 8px}

/* iOS/Telegram-style toggle switch */
.st-switch{position:relative;width:46px;height:28px;border-radius:999px;padding:0;flex-shrink:0;
  background:var(--hover);border:1px solid var(--line);transition:background .2s ease;cursor:pointer}
.st-switch:hover{background:var(--hover)}
.st-switch .st-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.4);transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.st-switch.on{background:#3390ec;border-color:#3390ec}
.st-switch.on .st-knob{transform:translateX(18px)}

/* ---- Appearance: compact mode ---- */
body.ui-compact .st-row{min-height:48px;padding:9px 16px}
body.ui-compact .post,body.ui-compact .msg,body.ui-compact .chat-item{padding-top:8px;padding-bottom:8px}
body.ui-compact .settings-wrap{gap:12px}

/* ---- Appearance: big text ---- */
body.ui-bigtext{font-size:16.5px}
body.ui-bigtext .st-row-t{font-size:16px}
body.ui-bigtext .msg-text,body.ui-bigtext .post-text{font-size:16.5px;line-height:1.55}

/* ---- Appearance: reduce motion ---- */
body.ui-reduce-motion *{animation:none!important;transition:none!important}

/* ---- Appearance: hide chat avatars ---- */
body.ui-hide-chat-avatars .msg-avatar,body.ui-hide-chat-avatars .bubble-avatar{display:none!important}

/* ---- Optional light theme ---- */
body.theme-light{
  --bg:#ffffff;--fg:#0f0f10;--muted:#65676b;--line:rgba(0,0,0,0.10);
  --card:#ffffff;--card2:#f2f3f5;--hover:#f0f1f3;--accent:#3390ec;--accent-fg:#ffffff;
  --accent-soft:rgba(51,144,236,.14);--page:#f5f6f8;
  --shadow:0 8px 28px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
  color-scheme:light;background:var(--page);color:var(--fg)
}

/* ============================================================
   Telegram-like messenger polish
   Softer bubbles, tighter rows, accent-blue outgoing bubbles,
   rounded avatars, cleaner composer.
   ============================================================ */
.msg-bubble,.bubble,.message-bubble{border-radius:16px!important}
.msg.out .msg-bubble,.msg.mine .msg-bubble,.bubble.out{
  background:linear-gradient(180deg,#3a95ee,#2f86e6)!important;color:#fff!important}
.msg.out a,.msg.mine a{color:#eaf3ff}
.chat-item{border-radius:14px;transition:background .15s}
.chat-item:hover{background:var(--hover)}
.chat-item.active{background:var(--accent-soft)}
.composer,.msg-composer,.chat-composer{border-radius:22px}
.msg-time{font-size:11px;opacity:.7}