/* =========================================================================
   ChatCMS — Telegram + WhatsApp ylhamly dizayn ulgamy
   Bir CSS faýly, hiç bir daşky kitaphana ýok (ýeňil we çalt ýüklener).
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* — Esasy ýüzeý reňkleri (açyk tema, sazlama) — */
  --bg:        #EFF3F6;
  --surface:   #FFFFFF;
  --surface2:  #F2F5F7;
  --border:    #E3E9ED;
  --text:      #0B141A;
  --muted:     #6B7C87;
  --accent:    #25D366;
  --accent-h:  #1DB954;
  --danger:    #E54E4E;
  --success:   #25D366;
  --me-bg:     #DCF8C6;
  --bubble-in: #FFFFFF;
  --radius:    16px;
  --radius-sm: 10px;
  --header-grad: linear-gradient(135deg,#128C6E,#075E54);
  --shadow-sm: 0 1px 2px rgba(16,24,32,.07);
  --shadow-md: 0 6px 20px rgba(16,24,32,.12);
  --tick-color: #53C28B;
}

[data-theme="dark"]{
  --bg:        #0B141A;
  --surface:   #111B21;
  --surface2:  #1F2C34;
  --border:    #25333B;
  --text:      #E9EDEF;
  --muted:     #8696A0;
  --accent:    #00A884;
  --accent-h:  #25D366;
  --danger:    #F2675C;
  --success:   #25D366;
  --me-bg:     #045C4B;
  --bubble-in: #1F2C34;
  --header-grad: linear-gradient(135deg,#1F2C34,#0B141A);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4);
  --tick-color: #53BDEB;
}

html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
body{transition:background-color .15s ease,color .15s ease}

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

::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── Skrollbar (hemmesi üçin) ───────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ── AVATAR (hemme ýerde ulanylýan tegelek) ─ */
.avatar-circle{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:50%;color:#fff;font-weight:700;line-height:1;user-select:none;
  font-size:.95em;letter-spacing:-.02em;
}
.av-32{width:32px;height:32px;font-size:.78rem}
.av-38{width:38px;height:38px;font-size:.85rem}
.av-44{width:44px;height:44px;font-size:.95rem}
.av-72{width:72px;height:72px;font-size:1.7rem}

.av-0{background:#FF6B6B}
.av-1{background:#FF9F43}
.av-2{background:#F2A93B}
.av-3{background:#4CC273}
.av-4{background:#20C997}
.av-5{background:#339AF0}
.av-6{background:#8767F0}
.av-7{background:#F0639B}

.nick-0{color:#E0354F}
.nick-1{color:#D9710C}
.nick-2{color:#A8790F}
.nick-3{color:#2F9E54}
.nick-4{color:#128C6E}
.nick-5{color:#1976D2}
.nick-6{color:#6A42E0}
.nick-7{color:#D63E80}
[data-theme="dark"] .nick-0{color:#FF8A8A}
[data-theme="dark"] .nick-1{color:#FFB870}
[data-theme="dark"] .nick-2{color:#F2C765}
[data-theme="dark"] .nick-3{color:#7EE0A3}
[data-theme="dark"] .nick-4{color:#5FE0BE}
[data-theme="dark"] .nick-5{color:#6FB6F5}
[data-theme="dark"] .nick-6{color:#B39CF7}
[data-theme="dark"] .nick-7{color:#F595BE}

.avatar-online-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;background:var(--success);border-radius:50%;border:2px solid var(--surface)}
.avatar-img{object-fit:cover;border:none}

/* ── ICONS (inline svg saraýy) ──────────── */
.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.icon svg{display:block}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:none;background:transparent;
  color:inherit;cursor:pointer;position:relative;transition:background .15s ease;
  flex-shrink:0;
}
.icon-btn:hover{background:rgba(127,127,127,.16)}
.icon-btn:active{background:rgba(127,127,127,.26)}
.icon-btn .badge-dot{
  position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
  background:var(--success);color:#fff;border-radius:9px;font-size:.62rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--header-on-surface,transparent);
}

/* ── FORM / BUTTON (umumy elementler) ───── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px;font-weight:600}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:10px 13px;background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:.92rem;outline:none;
  transition:border-color .15s,background .15s;font-family:inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--accent);background:var(--surface)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;border:none;border-radius:999px;font-size:.9rem;font-weight:700;
  cursor:pointer;transition:.15s;background:var(--surface2);color:var(--text);
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-block{width:100%}

.alert{padding:11px 15px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:.85rem;font-weight:500}
.alert-error{background:rgba(229,78,78,.12);border:1px solid rgba(229,78,78,.3);color:var(--danger)}
.alert-success{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3);color:#1a9c52}
[data-theme="dark"] .alert-success{color:var(--success)}

/* ── AUTH ─────────────────────────────── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:var(--bg)}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;max-width:400px;padding:36px;box-shadow:var(--shadow-md)}
.auth-logo{font-size:1.5rem;font-weight:800;color:var(--accent);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.auth-card h2{font-size:1.15rem;color:var(--text);margin-bottom:22px;font-weight:600}
.auth-switch{margin-top:18px;font-size:.85rem;color:var(--muted);text-align:center}

/* ── TOP BAR ──────────────────────────── */
.top-bar{
  display:flex;align-items:center;gap:10px;padding:0 14px;height:58px;
  background:var(--header-grad);color:#fff;position:sticky;top:0;z-index:100;
  flex-shrink:0;box-shadow:var(--shadow-sm);
  --header-on-surface: var(--accent);
}
.top-bar .logo{font-weight:800;font-size:1.08rem;color:#fff;display:flex;align-items:center;gap:8px}
.top-bar a{color:#fff}
.top-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.top-bar .icon-btn{color:#fff}
.nav-link{font-size:.85rem;color:rgba(255,255,255,.92);display:inline-flex;align-items:center}
.nav-link:hover{color:#fff;text-decoration:none}
.nav-nick{font-size:.84rem;color:#fff;font-weight:700;margin:0 2px}
.nav-logout.icon-btn{color:rgba(255,255,255,.9)}
.online-badge{font-size:.78rem;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:4px}
.online-badge .dot{width:7px;height:7px;border-radius:50%;background:#7CFFB2;display:inline-block}
.back-btn{font-size:.85rem;color:#fff;display:inline-flex;align-items:center}
.room-title{font-weight:700;font-size:1rem;color:#fff}
.room-header-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.room-header-sub{font-size:.74rem;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-badge{font-size:.66rem;background:rgba(255,255,255,.22);color:#fff;padding:2px 8px;border-radius:999px;font-weight:700;letter-spacing:.03em}

/* ── THEME TOGGLE ─────────────────────── */
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:flex}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ── CHAT LIST (otaglar / şahsy hatlar sanawy) ── */
.list-page{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)}
.list-main{flex:1;max-width:640px;margin:0 auto;width:100%;padding-bottom:24px}

.search-bar{padding:10px 14px;background:var(--bg);position:sticky;top:58px;z-index:60}
.search-input-wrap{position:relative;display:flex;align-items:center}
.search-input-wrap .icon{position:absolute;left:13px;color:var(--muted);pointer-events:none}
.search-input{
  width:100%;padding:10px 14px 10px 40px;border-radius:999px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.88rem;outline:none;transition:border-color .15s;
}
.search-input:focus{border-color:var(--accent)}

.chat-list{background:var(--surface);margin:0 0 14px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.chat-list-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--text);position:relative;transition:background .15s ease;
}
.chat-list-item:last-child{border-bottom:none}
.chat-list-item:hover{background:var(--surface2);text-decoration:none}
.chat-list-item:active{background:var(--surface2)}
.chat-list-body{flex:1;min-width:0}
.chat-list-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px}
.chat-list-name{font-size:.95rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-list-time{font-size:.72rem;color:var(--muted);flex-shrink:0}
.chat-list-preview{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-list-preview span{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.chat-list-item.has-unread .chat-list-preview span{color:var(--text);font-weight:500}

.unread-pill{
  background:var(--success);color:#fff;font-size:.7rem;font-weight:800;
  min-width:20px;height:20px;padding:0 6px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.online-pill{
  background:rgba(37,211,102,.14);color:#1a9c52;font-size:.7rem;font-weight:700;
  padding:3px 9px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;gap:4px;
}
[data-theme="dark"] .online-pill{background:rgba(37,211,102,.16);color:var(--success)}

.list-empty{padding:48px 24px;text-align:center;color:var(--muted)}
.list-empty .icon{justify-content:center;margin-bottom:10px;opacity:.5}
.list-empty p{font-size:.9rem;line-height:1.6}

.fab{
  position:fixed;right:22px;bottom:26px;width:54px;height:54px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);border:none;cursor:pointer;transition:transform .15s,background .15s;
  z-index:80;
}
.fab:hover{background:var(--accent-h);transform:translateY(-2px)}

/* — admin stat / generic kart gridi (.room-grid eski adam galdy, admin ulanýar) — */
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.room-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:.2s;text-decoration:none;color:var(--text)}
.room-card:hover{border-color:var(--accent);text-decoration:none}
.room-card-name{font-size:1.3rem;font-weight:800;margin-bottom:4px}
.room-card-desc{font-size:.8rem;color:var(--muted)}

/* ── CHAT ROOM / PM SÖHBET PENJIRESI ──── */
.room-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
.chat-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;max-width:760px;width:100%;margin:0 auto}

.msg-list{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}

.day-divider{display:flex;justify-content:center;margin:14px 0 10px}
.day-divider span{
  background:var(--surface);color:var(--muted);font-size:.72rem;font-weight:700;
  padding:5px 14px;border-radius:999px;box-shadow:var(--shadow-sm);
}

.msg-row{display:flex;gap:8px;align-items:flex-end;margin-top:2px;max-width:100%;animation:bubbleIn .14s ease}
.msg-row.grouped{margin-top:1px}
.msg-row.in{justify-content:flex-start}
.msg-row.out{justify-content:flex-end}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.row-avatar{width:30px;flex-shrink:0}
.row-avatar .avatar-circle{width:30px;height:30px;font-size:.72rem}

.bubble-col{display:flex;flex-direction:column;max-width:78%}
.msg-row.out .bubble-col{align-items:flex-end}

.bubble{
  position:relative;padding:7px 11px;background:var(--bubble-in);border-radius:16px 16px 16px 4px;
  box-shadow:var(--shadow-sm);word-break:break-word;
}
.msg-row.out .bubble{background:var(--me-bg);border-radius:16px 16px 4px 16px}
.msg-row.grouped.in .bubble{border-radius:16px}
.msg-row.grouped.out .bubble{border-radius:16px}

.bubble-nick{font-size:.78rem;font-weight:700;margin-bottom:2px;display:block}
.bubble-text{font-size:.92rem;line-height:1.45;color:var(--text);white-space:pre-wrap}
.bubble-text a{color:var(--accent)}
.bubble-meta{display:flex;align-items:center;gap:3px;justify-content:flex-end;margin-top:2px;float:right;margin-left:8px}
.bubble-time{font-size:.68rem;color:var(--muted)}

.bubble .del-btn{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;
  font-size:.68rem;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .15s;box-shadow:var(--shadow-sm);
}
.bubble:hover .del-btn{opacity:1}
.del-btn:hover{color:#fff;background:var(--danger);border-color:var(--danger)}

.system-note{
  text-align:center;font-size:.76rem;color:var(--muted);background:var(--surface);
  padding:5px 12px;border-radius:999px;margin:6px auto;box-shadow:var(--shadow-sm);
  width:fit-content;
}

/* ── MSG FORM ─────────────────────────── */
.msg-form{display:flex;align-items:flex-end;gap:8px;padding:10px 14px;background:var(--bg);flex-shrink:0}
.msg-input-wrap{
  flex:1;display:flex;align-items:flex-end;background:var(--surface);border:1.5px solid var(--border);
  border-radius:22px;padding:6px 6px 6px 16px;transition:border-color .15s;
}
.msg-input-wrap:focus-within{border-color:var(--accent)}
.msg-input{
  flex:1;background:transparent;border:none;color:var(--text);padding:6px 4px;font-size:.92rem;
  resize:none;outline:none;font-family:inherit;line-height:1.4;max-height:120px;
}
.msg-input::placeholder{color:var(--muted)}
.send-btn{
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex-shrink:0;
}
.send-btn:hover{background:var(--accent-h)}
.send-btn:disabled{opacity:.45;cursor:not-allowed}

.form-note{padding:11px 16px;background:var(--surface);color:var(--muted);font-size:.83rem;text-align:center;border-top:1px solid var(--border)}

/* ── ADMIN ────────────────────────────── */
.admin-wrap{max-width:920px;margin:24px auto;padding:0 16px}
.admin-wrap h1{font-size:1.3rem;margin-bottom:18px;font-weight:800}
.admin-nav{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.admin-nav a{padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:.84rem;color:var(--muted);font-weight:600}
.admin-nav a:hover,.admin-nav a.active{border-color:var(--accent);color:var(--accent);background:var(--surface);text-decoration:none}

table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
thead{background:var(--surface2)}
th,td{padding:11px 14px;text-align:left;font-size:.85rem;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface2)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700}
.badge-admin{background:rgba(37,211,102,.14);color:var(--accent)}
.badge-mod{background:rgba(135,103,240,.16);color:#8767F0}
.badge-user{background:var(--surface2);color:var(--muted)}
.badge-banned{background:rgba(229,78,78,.14);color:var(--danger)}

/* ── Responsive ───────────────────────── */
@media(max-width:600px){
  .top-bar{padding:0 10px;height:54px}
  .search-bar{top:54px}
  .msg-list{padding:10px 8px 4px}
  .msg-form{padding:8px}
  .bubble-col{max-width:86%}
  .list-main{padding-left:0;padding-right:0}
  .chat-list{border-radius:0;margin:0}
  .fab{right:16px;bottom:18px}
}

/* ══════════════════════════════════════
   Profil stilleri
══════════════════════════════════════ */
.profile-card{background:var(--surface);border-radius:var(--radius);padding:24px;display:flex;gap:20px;align-items:flex-start;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.profile-avatar-wrap{position:relative;flex-shrink:0}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:1.3rem;font-weight:800;margin-bottom:2px}
.profile-nick{font-size:.82rem;color:var(--muted)}
.profile-section{background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.profile-section-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;font-weight:700}
.profile-details{display:flex;flex-direction:column;gap:2px}
.profile-detail-row{display:flex;gap:12px;font-size:.87rem;padding:7px 0;border-bottom:1px solid var(--border)}
.profile-detail-row:last-child{border-bottom:none}
.detail-label{color:var(--muted);width:120px;flex-shrink:0}

/* ══════════════════════════════════════
   Sazlamalar stilleri
══════════════════════════════════════ */
.settings-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--surface);border-radius:999px;padding:4px;box-shadow:var(--shadow-sm)}
.stab{flex:1;text-align:center;padding:9px;border-radius:999px;font-size:.85rem;color:var(--muted);text-decoration:none;transition:.15s;font-weight:600}
.stab:hover{color:var(--text);text-decoration:none}
.stab.active{background:var(--accent);color:#fff}
.settings-card{background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}

.privacy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.privacy-row:last-of-type{border-bottom:none}
.privacy-label{font-size:.9rem;font-weight:700;margin-bottom:3px}
.privacy-desc{font-size:.78rem;color:var(--muted)}
.toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:24px;cursor:pointer;transition:.2s}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked + .toggle-slider{background:var(--success)}
.toggle input:checked + .toggle-slider:before{transform:translateX(20px)}

/* ═══════════════════════════════════════════════════
   ChatCMS v3 — Täze stillar
   ═══════════════════════════════════════════════════ */

/* ── MSG ACTIONS (Jogapla/Üýtget/Poz düwmeleri) ── */
.bubble-col { position: relative; }
.msg-actions {
  display: none;
  position: absolute;
  top: -28px;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 5px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  white-space: nowrap;
}
.out .msg-actions { right: 0; }
.in  .msg-actions { left: 38px; }

.msg-row:hover .msg-actions { display: flex; }

.act-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 12px;
  color: var(--muted); line-height: 1; display: flex; align-items: center;
  transition: background .12s, color .12s;
}
.act-btn:hover { background: var(--surface2); color: var(--text); }
.act-btn.del-btn:hover { color: var(--danger); }
.act-btn.reply-btn:hover { color: var(--accent); }
.act-btn.edit-btn:hover { color: var(--success); }

/* ── REPLY BAR (jogaplayanda / üýtgedende) ─────── */
#reply-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: .82rem;
  color: var(--muted);
}
#reply-bar b { color: var(--accent); }
#reply-bar-close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 8px;
  font-size: 1.1rem; line-height: 1;
}
#reply-bar-close:hover { background: var(--border); color: var(--text); }

/* ── REPLY QUOTE (habar içinde) ──────────────── */
.reply-quote {
  border-left: 3px solid var(--accent);
  padding: 3px 8px;
  margin-bottom: 4px;
  font-size: .8rem;
  background: rgba(42,171,238,.08);
  border-radius: 0 6px 6px 0;
}
.reply-quote-nick { color: var(--accent); font-weight: 600; display: block; }
.reply-quote-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ── EDITED LABEL ────────────────────────────── */
.bubble-edited {
  font-size: .7rem; color: var(--muted); margin-left: 4px;
  font-style: italic;
}

/* ── FAÝL ATTACHMENT BTN ─────────────────────── */
.attach-btn {
  background: none; border: none; cursor: pointer;
  padding: 0 6px; color: var(--muted); display: flex; align-items: center;
  transition: color .12s;
}
.attach-btn:hover { color: var(--accent); }
.attach-btn svg { display:block; }

/* ── AUDIO RECORD BTN ────────────────────────── */
.audio-btn {
  background: none; border: none; cursor: pointer;
  padding: 0 6px; color: var(--muted); display: flex; align-items: center;
  transition: color .12s, transform .15s;
}
.audio-btn:hover { color: var(--danger); }
.audio-btn.recording {
  color: var(--danger);
  animation: rec-pulse 1s infinite;
}
@keyframes rec-pulse {
  0%,100%{opacity:1;} 50%{opacity:.4;}
}

/* ── REC STATUS ──────────────────────────────── */
#rec-status {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(229,78,78,.1);
  border-top: 1px solid var(--danger);
  font-size: .82rem;
  color: var(--danger);
}
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  animation: rec-pulse 1s infinite;
}
.rec-cancel {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .8rem; padding: 2px 8px; border-radius: 8px;
}
.rec-cancel:hover { background: var(--border); }

/* ── UPLOAD PROGRESS ─────────────────────────── */
#upload-progress {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  font-size: .82rem;
}
.prog-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.prog-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.prog-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0; transition: width .1s; }

/* ── BUBBLE: surat / wideo / ses / faýl ─────── */
.bubble-img {
  max-width: 260px; max-height: 200px; border-radius: 10px;
  display: block; cursor: pointer; object-fit: cover;
}
.bubble-video {
  max-width: 260px; border-radius: 10px; display: block;
}
.bubble-audio {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bubble-audio audio { max-width: 220px; }
.bubble-audio-label { font-size: .75rem; color: var(--muted); }
.bubble-file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; min-width: 160px;
}
.bubble-file:hover { background: var(--border); }
.bubble-file svg { flex-shrink: 0; color: var(--accent); }
.bubble-file-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.bubble-file-name { font-size: .83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble-file-size { font-size: .72rem; color: var(--muted); }

/* ── MSG FORM täze dizaýn ────────────────────── */
.msg-form-btns {
  display: flex; align-items: flex-end; gap: 2px;
}

/* ── ADMIN hard-delete düwmesi ───────────────── */
.hard-del-btn {
  background: none; border: none; cursor: pointer; padding: 3px 7px;
  color: var(--danger); border-radius: 8px; font-size: .75rem;
  display: inline-flex; align-items: center; gap: 3px;
}
.hard-del-btn:hover { background: rgba(229,78,78,.12); }