/* ============================================
   MENSAHE v1 — Dark Telegram × Messenger
   Font: Plus Jakarta Sans + JetBrains Mono
   Palette: #0e1621 base, #17212b panels,
            #2b5278 accent, #64b5f6 highlight
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
  --bg:            #0e1621;
  --panel:         #17212b;
  --panel2:        #1c2a38;
  --hover:         #202d3b;
  --hover2:        #243447;
  --border:        rgba(255,255,255,0.06);
  --border2:       rgba(255,255,255,0.03);

  --blue:          #2b5278;
  --blue-light:    #3a7bd5;
  --blue-glow:     rgba(58,123,213,0.25);
  --teal:          #17a2b8;
  --teal-dim:      rgba(23,162,184,0.15);

  --bubble-out:    #2b5278;
  --bubble-out2:   #1d4e89;
  --bubble-in:     #182533;
  --bubble-in2:    #1e2f3e;

  --text:          #e8f0fb;
  --text2:         #a8bcc8;
  --text3:         #5c7a91;
  --text4:         #3d5464;

  --green:         #4dbd74;
  --green-dim:     rgba(77,189,116,0.15);
  --red:           #e06c75;
  --red-dim:       rgba(224,108,117,0.15);
  --amber:         #e5c07b;

  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 28px;

  --sh-sm:  0 1px 4px rgba(0,0,0,0.5);
  --sh-md:  0 4px 20px rgba(0,0,0,0.6);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.7);
  --sh-blue:0 4px 20px rgba(43,82,120,0.5);

  --t: 0.15s cubic-bezier(0.4,0,0.2,1);
  --t-spring: 0.3s cubic-bezier(0.34,1.56,0.64,1);

  --font:  'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;

  --sidebar: 300px;
  --topbar:  56px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;font-size:15px}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:var(--font);color:var(--text)}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}

/* ════════════════════════════════
   AUTH
   ════════════════════════════════ */
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:auto;position:relative;
  background:radial-gradient(ellipse 120% 80% at 50% 0%, rgba(43,82,120,0.18) 0%, transparent 60%), var(--bg);
}
.auth-bg-dots{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:28px 28px;
}
.auth-card{
  position:relative;z-index:1;width:100%;max-width:400px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:36px 32px;
  box-shadow:var(--sh-lg),0 0 0 1px rgba(58,123,213,0.07);
  animation:fadeUp .35s var(--t-spring);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}

.auth-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:28px}
.auth-logo-mark{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(145deg,#2b5278,#3a7bd5);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:var(--sh-blue);
  position:relative;overflow:hidden;
}
.auth-logo-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
}
.auth-logo-word{
  font-size:1.55rem;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(135deg,#64b5f6,#90caf9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-heading{font-size:1.35rem;font-weight:700;text-align:center;margin-bottom:6px;letter-spacing:-.01em}
.auth-sub{font-size:.875rem;color:var(--text2);text-align:center;margin-bottom:26px}

/* Form */
.field{margin-bottom:14px}
.field-label{display:block;font-size:.75rem;font-weight:600;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
.field-input{
  width:100%;padding:11px 14px;font-size:.9rem;
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-md);
  color:var(--text);outline:none;transition:border-color var(--t),box-shadow var(--t);
}
.field-input:focus{border-color:var(--blue-light);box-shadow:0 0 0 3px var(--blue-glow)}
.field-input::placeholder{color:var(--text4)}
.field-wrap{position:relative}
.field-wrap .field-input{padding-right:42px}
.field-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.95rem;transition:color var(--t)}
.field-eye:hover{color:var(--text)}

.btn-auth{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;margin-top:6px;
  background:linear-gradient(135deg,#2b5278,#3a7bd5);
  color:#fff;font-size:.95rem;font-weight:600;border-radius:var(--r-md);
  border:none;cursor:pointer;transition:all var(--t);
  box-shadow:0 4px 16px rgba(43,82,120,0.5);position:relative;overflow:hidden;
}
.btn-auth::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent);pointer-events:none}
.btn-auth:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(43,82,120,0.6)}
.btn-auth:active{transform:translateY(0)}
.btn-auth:disabled{opacity:.6;transform:none;cursor:not-allowed}

.auth-switch{text-align:center;margin-top:20px;font-size:.875rem;color:var(--text2)}
.auth-switch a{color:#64b5f6;font-weight:600;transition:color var(--t)}
.auth-switch a:hover{color:#90caf9}

.field-err{
  display:none;font-size:.78rem;color:var(--red);
  margin-top:6px;padding:8px 11px;
  background:var(--red-dim);border:1px solid rgba(224,108,117,.2);border-radius:var(--r-sm);
  animation:shake .28s ease;
}
.field-err.show{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* PW strength */
.pw-bar-wrap{margin-bottom:12px;display:none}
.pw-bar-track{height:3px;background:var(--border);border-radius:99px;overflow:hidden}
.pw-bar-fill{height:100%;border-radius:99px;transition:width .3s,background .3s;width:0}
.pw-label{font-size:.72rem;color:var(--text3);margin-top:3px}

/* ════════════════════════════════
   APP SHELL
   ════════════════════════════════ */
#app{display:none;height:100vh;flex-direction:row}
#app.on{display:flex}

/* ── Sidebar ── */
.sidebar{
  width:var(--sidebar);min-width:var(--sidebar);height:100vh;
  background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:relative;z-index:10;
}
.sb-head{
  height:var(--topbar);padding:0 12px 0 16px;
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border-bottom:1px solid var(--border2);flex-shrink:0;
}
.sb-logo{display:flex;align-items:center;gap:9px;flex:1}
.sb-logo-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(145deg,#2b5278,#3a7bd5);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;box-shadow:0 2px 8px rgba(43,82,120,0.5);
  flex-shrink:0;
}
.sb-logo-text{
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(135deg,#64b5f6,#90caf9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sb-actions{display:flex;gap:2px}

.ib{
  width:32px;height:32px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:1rem;transition:all var(--t);cursor:pointer;
}
.ib:hover{background:var(--hover);color:var(--text)}
.ib.active{color:#64b5f6}

/* Search */
.sb-search{padding:10px 12px 6px;flex-shrink:0}
.sb-search-inner{
  position:relative;background:var(--bg);
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  display:flex;align-items:center;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);
}
.sb-search-inner:focus-within{border-color:rgba(58,123,213,0.5);box-shadow:0 0 0 2px var(--blue-glow)}
.sb-search-icon{padding-left:10px;color:var(--text3);font-size:.9rem;flex-shrink:0}
.sb-search-input{
  flex:1;padding:8px 12px;font-size:.85rem;background:none;
  border:none;outline:none;color:var(--text);
}
.sb-search-input::placeholder{color:var(--text4)}

/* Tabs */
.sb-tabs{
  display:flex;border-bottom:1px solid var(--border2);flex-shrink:0;
  padding:0 8px;
}
.sb-tab{
  flex:1;padding:9px 6px;font-size:.8rem;font-weight:600;
  color:var(--text3);text-align:center;cursor:pointer;
  border-bottom:2px solid transparent;transition:all var(--t);
  letter-spacing:.02em;
}
.sb-tab.on{color:#64b5f6;border-bottom-color:#64b5f6}
.sb-tab:hover:not(.on){color:var(--text2)}

/* User list */
.sb-list{flex:1;overflow-y:auto;padding:4px 6px}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--t);position:relative;
}
.sb-item:hover{background:var(--hover)}
.sb-item.on{background:var(--blue);background:rgba(43,82,120,0.55)}
.sb-item.on .sb-name{color:var(--text)}

.av{position:relative;flex-shrink:0}
.av-img{
  width:46px;height:46px;border-radius:50%;
  object-fit:cover;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
}
.av-img.ph{background:linear-gradient(145deg,#1d4e89,#2b5278);color:#90caf9}
.av-dot{
  position:absolute;bottom:1px;right:1px;
  width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--panel);
}
.av-dot.on{background:var(--green)}
.av-dot.off{background:var(--text4)}

.sb-info{flex:1;min-width:0}
.sb-name{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);margin-bottom:2px}
.sb-preview{font-size:.78rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-preview.on-indicator{color:var(--green);font-weight:500}

.sb-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.sb-time{font-size:.7rem;color:var(--text4)}
.unread{
  min-width:18px;height:18px;border-radius:99px;
  background:#3a7bd5;color:#fff;
  font-size:.68rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}

/* Sidebar footer */
.sb-foot{
  border-top:1px solid var(--border2);padding:10px 10px;
  flex-shrink:0;background:var(--panel);
}
.sb-me{
  display:flex;align-items:center;gap:10px;padding:8px 6px;
  border-radius:var(--r-md);cursor:pointer;transition:background var(--t);
}
.sb-me:hover{background:var(--hover)}
.sb-me-info{flex:1;min-width:0}
.sb-me-name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-me-status{font-size:.72rem;color:var(--green);margin-top:1px}

/* ── Chat area ── */
.chat{
  flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;
  background:var(--bg);position:relative;
}
/* subtle grid pattern */
.chat::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E");
  background-size:40px 40px;
}

/* Topbar */
.chat-top{
  height:var(--topbar);padding:0 12px 0 16px;
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border-bottom:1px solid var(--border2);
  flex-shrink:0;position:relative;z-index:5;
  box-shadow:0 1px 0 var(--border2);
}
.chat-back{display:none;color:#64b5f6;font-size:1.2rem;margin-right:2px}
.ct-av{flex-shrink:0;cursor:pointer}
.ct-info{flex:1;min-width:0;cursor:pointer}
.ct-name{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.ct-status{font-size:.75rem;color:var(--text3);margin-top:1px}
.ct-status.on{color:var(--green)}
.ct-actions{display:flex;gap:2px}

/* Empty state */
.chat-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;position:relative;z-index:1;
}
.chat-empty-icon{
  width:80px;height:80px;border-radius:24px;
  background:rgba(43,82,120,0.2);border:1px solid rgba(43,82,120,0.3);
  display:flex;align-items:center;justify-content:center;font-size:36px;
  box-shadow:var(--sh-blue);
}
.chat-empty h3{font-size:1.15rem;font-weight:700;color:var(--text);opacity:.7;letter-spacing:-.01em}
.chat-empty p{font-size:.85rem;color:var(--text3)}

/* Messages scroll */
.msgs{
  flex:1;overflow-y:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:2px;
  position:relative;z-index:1;
  scroll-behavior:smooth;
}

/* Date divider */
.date-div{
  display:flex;align-items:center;gap:10px;margin:14px 0 8px;
}
.date-div::before,.date-div::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,0.04);
}
.date-div span{
  font-size:.7rem;font-weight:600;color:var(--text3);
  background:rgba(255,255,255,0.04);padding:3px 10px;border-radius:99px;
  letter-spacing:.04em;border:1px solid rgba(255,255,255,0.04);
}

/* Message row */
.mrow{display:flex;align-items:flex-end;gap:7px;animation:msgIn .16s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.mrow.out{flex-direction:row-reverse}

.m-av{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  overflow:hidden;background:linear-gradient(145deg,#1d4e89,#2b5278);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#90caf9;align-self:flex-end;
}
.mrow.out .m-av{display:none}

.mgrp{display:flex;flex-direction:column;gap:1px;max-width:70%}
.mrow.out .mgrp{align-items:flex-end}

.m-sender{font-size:.72rem;color:#64b5f6;font-weight:600;margin-bottom:2px;padding:0 4px}

.mbub{
  position:relative;padding:9px 12px;word-break:break-word;
  font-size:.875rem;line-height:1.55;max-width:100%;
}
.mrow.in .mbub{
  background:var(--bubble-in);color:var(--text);
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  border:1px solid rgba(255,255,255,0.04);
}
.mrow.out .mbub{
  background:var(--bubble-out);color:#e8f4ff;
  border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg);
  box-shadow:0 2px 10px rgba(43,82,120,.4);
}
/* Tail effect via pseudo */
.mrow.in  .mbub::before{content:'';position:absolute;bottom:0;left:-5px;width:10px;height:10px;background:var(--bubble-in);clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 0 4px}
.mrow.out .mbub::after {content:'';position:absolute;bottom:0;right:-5px;width:10px;height:10px;background:var(--bubble-out);clip-path:polygon(0 0,100% 100%,0 100%);border-radius:0 0 4px 0}

.mbub.has-img,.mbub.has-gif{padding:4px;overflow:hidden;max-width:280px}
.mbub img{
  border-radius:calc(var(--r-lg) - 4px);
  max-width:260px;max-height:280px;object-fit:cover;cursor:pointer;
  transition:opacity var(--t);
}
.mbub img:hover{opacity:.88}
.mbub.has-img::before,.mbub.has-img::after,
.mbub.has-gif::before,.mbub.has-gif::after{display:none}

.m-meta{display:flex;align-items:center;gap:5px;padding:2px 4px 0}
.m-time{font-size:.67rem;color:var(--text3)}
.m-edited{font-size:.65rem;color:var(--text4);font-style:italic}
.m-tick{font-size:.7rem;color:#64b5f6}

/* ── Context menu ── */
.ctx{
  position:fixed;background:var(--panel2);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:5px;min-width:170px;z-index:9999;
  box-shadow:var(--sh-lg);animation:ctxIn .1s ease;
}
@keyframes ctxIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.ctx-row{
  display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-radius:var(--r-sm);font-size:.85rem;cursor:pointer;transition:background var(--t);
}
.ctx-row:hover{background:var(--hover2)}
.ctx-row.red{color:var(--red)}
.ctx-row.red:hover{background:var(--red-dim)}
.ctx-icon{width:16px;font-size:.85rem}
.ctx-div{height:1px;background:var(--border2);margin:4px 0}

/* ── Input area ── */
.chat-input-area{
  flex-shrink:0;background:var(--panel);
  border-top:1px solid var(--border2);
  padding:8px 12px;position:relative;z-index:5;
}
.input-bar{
  display:flex;align-items:flex-end;gap:6px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-xl);padding:6px 6px 6px 10px;
  transition:border-color var(--t),box-shadow var(--t);
}
.input-bar:focus-within{border-color:rgba(58,123,213,0.4);box-shadow:0 0 0 2px var(--blue-glow)}

.input-act{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:1rem;transition:all var(--t);
}
.input-act:hover{background:var(--hover);color:#64b5f6}

.chat-ta{
  flex:1;min-height:32px;max-height:110px;resize:none;
  background:none;border:none;outline:none;
  color:var(--text);font-size:.9rem;line-height:1.45;
  padding:5px 6px;overflow-y:auto;
}
.chat-ta::placeholder{color:var(--text4)}

.send-btn{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#2b5278,#3a7bd5);
  color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;transition:all var(--t);
  box-shadow:0 2px 10px rgba(43,82,120,.5);
}
.send-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(43,82,120,.7)}
.send-btn:active{transform:scale(.95)}

/* ── Preview bars ── */
.prev-bar{
  display:none;align-items:center;gap:9px;
  padding:7px 10px;margin-bottom:6px;
  background:rgba(43,82,120,0.12);border-radius:var(--r-sm);
  border-left:2.5px solid #3a7bd5;
}
.prev-bar.on{display:flex}
.prev-icon{font-size:.85rem;color:#64b5f6;flex-shrink:0}
.prev-text{flex:1;font-size:.8rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-close{color:var(--text3);cursor:pointer;font-size:.85rem;transition:color var(--t);flex-shrink:0}
.prev-close:hover{color:var(--red)}

/* Image preview */
.img-prev-wrap{display:none;margin-bottom:8px}
.img-prev-wrap.on{display:block}
.img-prev-inner{position:relative;display:inline-block}
.img-prev-wrap img{
  max-height:72px;max-width:110px;border-radius:var(--r-sm);
  object-fit:cover;border:1px solid var(--border);
}
.img-prev-rm{
  position:absolute;top:-6px;right:-6px;
  width:18px;height:18px;background:var(--red);border-radius:50%;
  color:#fff;font-size:.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border:none;
}

/* ── Emoji picker ── */
.picker-wrap{
  position:absolute;bottom:calc(100% + 6px);left:10px;
  z-index:200;display:none;animation:popUp .14s ease;
}
.picker-wrap.on{display:block}
@keyframes popUp{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}

.emoji-box{
  background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:10px;width:308px;
  box-shadow:var(--sh-lg);
}
.emoji-tabs{
  display:flex;gap:2px;margin-bottom:8px;
  overflow-x:auto;padding-bottom:2px;
}
.emoji-tab{
  flex-shrink:0;padding:5px 9px;border-radius:var(--r-sm);
  font-size:.72rem;font-weight:600;color:var(--text3);cursor:pointer;
  transition:all var(--t);border:1px solid transparent;letter-spacing:.02em;
}
.emoji-tab.on{background:rgba(58,123,213,0.2);color:#64b5f6;border-color:rgba(58,123,213,0.3)}
.emoji-tab:hover:not(.on){background:var(--hover2);color:var(--text2)}
.emoji-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
  max-height:190px;overflow-y:auto;
}
.emoji-item{
  width:33px;height:33px;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;border-radius:var(--r-xs);cursor:pointer;transition:background var(--t);
}
.emoji-item:hover{background:var(--hover2)}

/* ── GIF picker ── */
.gif-box{
  background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:10px;width:320px;
  box-shadow:var(--sh-lg);
}
.gif-search-input{
  width:100%;padding:8px 12px;font-size:.85rem;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-lg);color:var(--text);outline:none;
  margin-bottom:8px;transition:border-color var(--t);
}
.gif-search-input:focus{border-color:rgba(58,123,213,.5)}
.gif-search-input::placeholder{color:var(--text4)}
.gif-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
  max-height:210px;overflow-y:auto;
}
.gif-cell{
  border-radius:var(--r-sm);overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;background:var(--hover);transition:opacity var(--t);
}
.gif-cell img{width:100%;height:100%;object-fit:cover}
.gif-cell:hover{opacity:.8}
.gif-empty{
  grid-column:1/-1;text-align:center;padding:20px;
  font-size:.8rem;color:var(--text3);
}

/* ── Modals ── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.overlay.on{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:26px;width:100%;max-width:400px;
  box-shadow:var(--sh-lg);animation:fadeUp .25s var(--t-spring);
}
.modal-head{
  display:flex;align-items:center;gap:8px;margin-bottom:20px;
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
}
.modal-x{
  margin-left:auto;color:var(--text3);cursor:pointer;font-size:1rem;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.modal-x:hover{background:var(--hover);color:var(--text)}

/* Avatar upload */
.av-upload{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}
.av-prev{
  width:76px;height:76px;border-radius:50%;overflow:hidden;cursor:pointer;
  background:linear-gradient(145deg,#1d4e89,#2b5278);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:700;color:#90caf9;
  border:3px solid rgba(58,123,213,0.4);position:relative;
  transition:border-color var(--t);
}
.av-prev:hover{border-color:#3a7bd5}
.av-prev img{width:100%;height:100%;object-fit:cover}
.av-prev-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:600;color:#fff;opacity:0;transition:opacity var(--t);
  letter-spacing:.03em;text-transform:uppercase;
}
.av-prev:hover .av-prev-overlay{opacity:1}
.av-change{font-size:.78rem;color:#64b5f6;cursor:pointer;font-weight:600;transition:opacity var(--t)}
.av-change:hover{opacity:.8}

/* Buttons in modal */
.btn-prim{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:11px;margin-top:6px;
  background:linear-gradient(135deg,#2b5278,#3a7bd5);
  color:#fff;font-size:.9rem;font-weight:600;border-radius:var(--r-md);
  border:none;cursor:pointer;transition:all var(--t);
  box-shadow:0 3px 12px rgba(43,82,120,0.45);
}
.btn-prim:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(43,82,120,0.6)}
.btn-prim:disabled{opacity:.6;transform:none;cursor:not-allowed}
.btn-sec{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:10px;margin-top:6px;
  background:var(--hover);border:1px solid var(--border);
  color:var(--text2);font-size:.9rem;font-weight:500;border-radius:var(--r-md);
  cursor:pointer;transition:all var(--t);
}
.btn-sec:hover{background:var(--hover2);color:var(--text)}
.btn-danger{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:10px;margin-top:6px;
  background:var(--red-dim);border:1px solid rgba(224,108,117,.2);
  color:var(--red);font-size:.9rem;font-weight:600;border-radius:var(--r-md);
  cursor:pointer;transition:all var(--t);
}
.btn-danger:hover{background:rgba(224,108,117,.22)}

/* ── Lightbox ── */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,0.95);
  z-index:2000;display:none;align-items:center;justify-content:center;
  cursor:zoom-out;backdrop-filter:blur(8px);
}
.lightbox.on{display:flex}
.lightbox img{
  max-width:92vw;max-height:92vh;object-fit:contain;
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
}
.lb-close{
  position:absolute;top:14px;right:16px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.1);color:#fff;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--t);
  backdrop-filter:blur(4px);
}
.lb-close:hover{background:rgba(255,255,255,0.2)}

/* ── Toasts ── */
.toasts{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:5000;display:flex;flex-direction:column;gap:7px;
  align-items:center;pointer-events:none;
}
.toast{
  background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:9px 16px;font-size:.83rem;
  color:var(--text);box-shadow:var(--sh-md);
  pointer-events:auto;display:flex;align-items:center;gap:7px;
  animation:toastIn .25s var(--t-spring);white-space:nowrap;
  max-width:340px;
}
.toast.ok {border-color:rgba(77,189,116,.3)}
.toast.ok::before{content:'✓';color:var(--green);font-weight:700}
.toast.err{border-color:rgba(224,108,117,.3)}
.toast.err::before{content:'✕';color:var(--red);font-weight:700}
.toast.info::before{content:'·';color:#64b5f6;font-size:1.4rem;line-height:.5}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-6px) scale(.94)}}
.toast.bye{animation:toastOut .22s ease forwards}

/* ── Skeletons ── */
.skel{
  background:linear-gradient(90deg,var(--hover) 25%,var(--hover2) 50%,var(--hover) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm);
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── Typing ── */
.typing-row{display:flex;align-items:center;gap:7px;padding:6px 0}
.typing-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#1d4e89,#2b5278);flex-shrink:0}
.typing-bubble{
  display:flex;gap:4px;align-items:center;
  background:var(--bubble-in);padding:10px 14px;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;
}
.t-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:bounce 1.2s infinite}
.t-dot:nth-child(2){animation-delay:.2s}
.t-dot:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* ── Spinner ── */
.spin{
  width:18px;height:18px;border:2px solid var(--border);
  border-top-color:#64b5f6;border-radius:50%;
  animation:rot .6s linear infinite;display:inline-block;
}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── Section label ── */
.sec-lbl{
  padding:5px 10px 3px;font-size:.68rem;font-weight:700;
  color:var(--text4);text-transform:uppercase;letter-spacing:.08em;
}

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media(max-width:768px){
  :root{--sidebar:100vw}
  .sidebar{position:fixed;inset:0;width:100%;transition:transform .28s ease;z-index:50}
  .sidebar.hidden{transform:translateX(-100%)}
  .chat{position:fixed;inset:0}
  .chat.hidden{display:none}
  .chat-back{display:flex}
  .picker-wrap{
    left:0;right:0;bottom:0;position:fixed;
  }
  .emoji-box,.gif-box{
    width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
}
@media(max-width:480px){
  .mgrp{max-width:88%}
  .msgs{padding:10px}
  .auth-card{padding:26px 18px}
}

/* ── Utils ── */
.hidden{display:none!important}