/* ============================================
   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;
  /* Prevent picker from extending above viewport on short screens */
  max-height:calc(100vh - 80px);
}
.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:340px;
  box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;
  /* Desktop: tall enough to see 2 full rows */
  max-height:min(520px, 70vh);
}
.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);
  flex-shrink:0;
  box-sizing:border-box;
}
.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;
  /* Fill remaining space in box, scroll within */
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.gif-cell{
  border-radius:var(--r-sm);overflow:hidden;cursor:pointer;
  /* Square cells so full image shows — no cropping */
  aspect-ratio:1/1;background:var(--hover);transition:opacity var(--t);
}
.gif-cell img{width:100%;height:100%;object-fit:cover;display:block}
.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}

/* ════════════════════════════════
   AUTH EXTRAS
   ════════════════════════════════ */
.auth-link-btn{background:none;border:none;color:#64b5f6;font-size:.85rem;cursor:pointer;font-family:var(--font);font-weight:600;padding:0;transition:opacity var(--t)}
.auth-link-btn:hover{opacity:.75}

/* ════════════════════════════════
   EMOJI — smaller, more columns
   ════════════════════════════════ */
.emoji-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;max-height:200px;overflow-y:auto}
.emoji-item{width:30px;height:30px;font-size:1rem;border-radius:var(--r-xs);cursor:pointer;transition:background var(--t);display:flex;align-items:center;justify-content:center}
.emoji-item:hover{background:var(--hover2)}

/* ════════════════════════════════
   GIF — proper height constraints
   ════════════════════════════════ */
.mbub.has-gif{padding:4px;overflow:hidden;max-width:260px}
.mbub.has-gif img{border-radius:calc(var(--r-lg) - 4px);max-width:252px;max-height:180px;width:100%;object-fit:contain;background:rgba(0,0,0,0.15);cursor:pointer;display:block}
.mbub.has-gif::before,.mbub.has-gif::after{display:none}

/* ════════════════════════════════
   SETTINGS OVERLAY
   ════════════════════════════════ */
.settings-overlay{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.settings-overlay.on{transform:none}

.settings-head{
  height:var(--topbar);padding:0 16px;
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border-bottom:1px solid var(--border2);
  flex-shrink:0;
}
.settings-back{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:1.1rem;cursor:pointer;
  border:none;background:none;transition:all var(--t);
}
.settings-back:hover{background:var(--hover);color:var(--text)}
.settings-head-title{font-size:1rem;font-weight:700;letter-spacing:-.01em;flex:1}

.settings-body{flex:1;overflow-y:auto;padding:0 0 40px}

.settings-profile{
  display:flex;flex-direction:column;align-items:center;
  padding:28px 20px 20px;
  background:var(--panel);border-bottom:1px solid var(--border2);
  margin-bottom:8px;
}
.settings-av{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(145deg,#1d4e89,#2b5278);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:700;color:#90caf9;
  overflow:hidden;margin-bottom:12px;
  border:3px solid rgba(58,123,213,.4);
  cursor:pointer;position:relative;
}
.settings-av:hover::after{content:'Change';position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:#fff;letter-spacing:.03em;text-transform:uppercase}
.settings-av img{width:100%;height:100%;object-fit:cover}
.settings-username{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.settings-email{font-size:.8rem;color:var(--text3)}

.settings-section{margin-bottom:6px}
.settings-label{
  padding:10px 16px 4px;
  font-size:.68rem;font-weight:700;color:var(--text4);
  text-transform:uppercase;letter-spacing:.08em;
}
.settings-row{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;cursor:pointer;
  transition:background var(--t);
  background:var(--panel);
  border-bottom:1px solid var(--border2);
}
.settings-row:first-of-type{border-top:1px solid var(--border2)}
.settings-row:hover{background:var(--hover)}
.settings-row.danger{color:var(--red)}
.stg-icon{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
.stg-icon.blue{background:rgba(58,123,213,.15)}
.stg-icon.green{background:rgba(77,189,116,.12)}
.stg-icon.amber{background:rgba(229,192,123,.12)}
.stg-icon.red{background:rgba(224,108,117,.12)}
.stg-icon.purple{background:rgba(150,118,200,.12)}
.stg-row-info{flex:1;min-width:0}
.stg-row-title{font-size:.9rem;font-weight:500}
.stg-row-sub{font-size:.75rem;color:var(--text3);margin-top:2px}
.stg-arrow{color:var(--text4);font-size:.9rem;flex-shrink:0}

/* Toggle switch */
.stg-toggle{
  width:42px;height:24px;border-radius:99px;
  background:var(--text4);position:relative;
  transition:background .2s;flex-shrink:0;cursor:pointer;
}
.stg-toggle.on{background:#3a7bd5}
.stg-toggle::after{
  content:'';position:absolute;
  top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.stg-toggle.on::after{transform:translateX(18px)}

/* ════════════════════════════════
   GROUP CHAT — sidebar
   ════════════════════════════════ */
.sb-item.group .av-img.ph{background:linear-gradient(145deg,#1d5e4b,#1a7a5e);color:#56d4b0}
.group-badge{
  font-size:.62rem;background:rgba(77,189,116,.18);
  color:var(--green);border-radius:3px;padding:1px 5px;
  font-weight:600;letter-spacing:.02em;flex-shrink:0;
  border:1px solid rgba(77,189,116,.2);
}

/* ════════════════════════════════
   CREATE GROUP MODAL
   ════════════════════════════════ */
.member-list{max-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-md);margin-top:6px}
.member-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  cursor:pointer;transition:background var(--t);
}
.member-item:hover{background:var(--hover)}
.member-item.selected{background:rgba(43,82,120,.3)}
.member-check{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--text4);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;flex-shrink:0;transition:all var(--t);
}
.member-item.selected .member-check{background:#3a7bd5;border-color:#3a7bd5;color:#fff}

/* ════════════════════════════════
   GROUP CALL OVERLAY
   ════════════════════════════════ */
#group-call-overlay{
  position:fixed;inset:0;z-index:3000;background:#0a1520;
  display:none;flex-direction:column;
}
#group-call-overlay.on{display:flex}
.gc-topbar{
  height:56px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  flex-shrink:0;
}
.gc-title{font-size:.95rem;font-weight:700;color:#fff}
.gc-duration{font-size:.85rem;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.gc-grid{
  flex:1;display:grid;gap:4px;padding:4px;overflow:hidden;
  align-items:stretch;
}
.gc-grid[data-count="1"]{grid-template-columns:1fr}
.gc-grid[data-count="2"]{grid-template-columns:1fr 1fr}
.gc-grid[data-count="3"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.gc-grid[data-count="3"] .gc-tile:first-child{grid-column:1/-1}
.gc-grid[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.gc-grid[data-count^="5"],[data-count^="6"]{grid-template-columns:1fr 1fr 1fr}
.gc-tile{
  position:relative;border-radius:12px;background:#1a2a3a;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.gc-tile video{width:100%;height:100%;object-fit:cover}
.gc-tile-name{
  position:absolute;bottom:6px;left:8px;
  font-size:.72rem;color:#fff;font-weight:600;
  background:rgba(0,0,0,.5);padding:2px 7px;border-radius:99px;
  backdrop-filter:blur(4px);
}
.gc-tile-av{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(145deg,#1d4e89,#2b5278);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;color:#90caf9;
}
.gc-tile.muted .gc-tile-name::before{content:'🔇 ';font-size:.65rem}
.gc-controls{
  padding:14px 20px 20px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);flex-shrink:0;
}

/* ════════════════════════════════
   RESPONSIVE UPDATES
   ════════════════════════════════ */
@media(max-width:768px){
  .settings-overlay{width:100%}
  .gc-grid[data-count="2"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}

/* Settings text size buttons */
.size-opt{padding:4px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:none;color:var(--text2);font-size:.8rem;cursor:pointer;font-family:var(--font);transition:all var(--t)}
.size-opt.on,.size-opt:hover{background:#3a7bd5;color:#fff;border-color:#3a7bd5}

/* Auth pages - field-ok */
.field-ok{padding:10px 12px;background:rgba(77,189,116,.12);border:1px solid rgba(77,189,116,.25);border-radius:var(--r-sm);font-size:.85rem;color:#4dbd74;margin-bottom:8px}
.auth-logo-word{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.auth-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px}

/* Green dim var for auth pages */
:root{--green-dim:rgba(77,189,116,.12)}

/* ════════════════════════════════════════════════════
   RESPONSIVE & CROSS-DEVICE COMPATIBILITY
   Mobile · Tablet · iPad · Desktop · iOS · Android
   ════════════════════════════════════════════════════ */

/* ── iOS safe area (notch / home indicator) ───────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Prevent iOS input zoom (font-size must be ≥16px) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .field-input, .chat-ta, select, textarea {
    font-size: 16px !important;
  }
}

/* ── Base touch targets ≥ 44px ────────────────────── */
button, .sb-item, .settings-row, .member-item,
.emoji-item, .ib, .cb-btn, .stg-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ib { min-width: 36px; min-height: 36px; }
.cb-btn { min-width: 52px; min-height: 52px; }

/* ── Smooth scrolling everywhere ─────────────────── */
.msgs, .settings-body, .sb-list, .emoji-grid,
.member-list, .gc-grid { -webkit-overflow-scrolling: touch; }

/* ── Prevent text selection on UI chrome ─────────── */
.sidebar, .topbar, .chatbar, .call-overlay,
#group-call-overlay, .settings-overlay, .auth-page {
  -webkit-user-select: none;
  user-select: none;
}
.msgs, .mbub, .auth-card input { -webkit-user-select: text; user-select: text; }

/* ════════ PHONE (≤ 640px) ════════════════════════ */
@media (max-width: 640px) {

  /* App layout */
  #app { height: 100dvh; }  /* dvh = dynamic viewport height (handles mobile browsers) */

  /* Sidebar full-screen on mobile */
  .sidebar {
    position: fixed; inset: 0; width: 100vw;
    padding-bottom: var(--safe-bottom);
    z-index: 100;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.hidden { transform: translateX(-100%); }

  /* Chat full-screen */
  .chat {
    position: fixed; inset: 0;
    padding-bottom: var(--safe-bottom);
  }
  .chat.hidden { display: none !important; }

  /* Topbars: pad for iOS status bar */
  .topbar, .sb-header, .settings-head {
    padding-top: max(var(--safe-top), 0px);
    height: calc(var(--topbar) + var(--safe-top));
  }

  /* Chat textarea bar: pad for home indicator */
  .chatbar {
    padding-bottom: max(var(--safe-bottom), 8px);
  }

  /* Messages: more padding bottom so last msg isn't behind input */
  .msgs { padding-bottom: 16px; }

  /* Bubbles: slightly wider on mobile */
  .mgrp { max-width: 88%; }

  /* Auth pages */
  .auth-page { padding: 16px 12px; align-items: flex-start; padding-top: max(40px, var(--safe-top)); }
  .auth-card { padding: 24px 18px; border-radius: var(--r-xl); width: 100%; max-width: 420px; }

  /* Pickers full-width bottom sheet */
  .picker-wrap { left: 0 !important; right: 0 !important; bottom: 0 !important; }
  .emoji-box, .gif-box {
    width: 100% !important; max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    max-height: 55vh;
    padding-bottom: var(--safe-bottom);
  }
  .emoji-grid { grid-template-columns: repeat(8, 1fr); max-height: 38vh; }

  /* Settings full-screen */
  .settings-overlay { width: 100%; }

  /* Group call full-screen */
  #group-call-overlay { height: 100dvh; }
  .gc-grid[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .gc-controls { gap: 10px; padding: 10px 12px max(12px, var(--safe-bottom)); }
  .cb-btn { width: 52px; height: 52px; }

  /* Modals: full-width */
  .modal { width: calc(100vw - 32px); max-height: 85dvh; overflow-y: auto; }

  /* Profile modal: full-width */
  .overlay .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; position: fixed; bottom: 0; left: 0; right: 0; top: auto; }
  .overlay { align-items: flex-end; }

  /* Call overlay buttons: bigger hit targets */
  .cb-btn { min-width: 56px; min-height: 56px; font-size: 1.3rem; }
  .call-controls { gap: 10px; padding: 14px 10px max(16px, var(--safe-bottom)); }

  /* Input font — iOS anti-zoom */
  .field-input { font-size: 16px; padding: 12px 14px; }
  .chat-ta { font-size: 16px; }

  /* Make emoji categories scrollable horizontally */
  .emoji-cats { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .emoji-cat-btn { display: inline-flex; }

  /* GIF picker — mobile full bottom sheet */
  .gif-box {
    max-height: 60vh;
    /* iOS safe area bottom padding */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    width: 100% !important;
    box-sizing: border-box;
  }
  .gif-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Fill remaining height inside box */
    max-height: calc(60vh - 60px);
  }
}

/* ════════ TABLET / iPAD (641px – 1024px) ════════ */
@media (min-width: 641px) and (max-width: 1024px) {

  /* Show sidebar + chat side by side on tablet */
  :root { --sidebar: 280px; }

  #app { height: 100dvh; }

  /* GIF picker on tablet */
  .gif-box { max-height: 60vh; width: 360px; }
  .gif-grid { max-height: calc(60vh - 60px); }

  .sidebar {
    position: relative; transform: none !important;
    width: var(--sidebar); flex-shrink: 0;
    display: flex; flex-direction: column;
  }

  .chat { position: relative; flex: 1; }
  .chat.hidden { display: flex !important; }

  /* Auth pages: centered card */
  .auth-page { align-items: center; }
  .auth-card { max-width: 440px; }

  /* Settings slide-in from right */
  .settings-overlay { width: min(420px, 100vw); right: 0; left: auto; }

  /* Group call: 2-col grid for small tablets */
  .gc-grid[data-count="3"],
  .gc-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }

  /* Pickers: normal floating boxes */
  .emoji-box { width: 340px; }
  .emoji-grid { grid-template-columns: repeat(9, 1fr); }
}

/* ════════ LARGE TABLET / SMALL DESKTOP (1025px–1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  :root { --sidebar: 300px; }
  .settings-overlay { width: 420px; right: 0; left: auto; }
}

/* ════════ DESKTOP (> 1280px) ════════════════════ */
@media (min-width: 1281px) {
  :root { --sidebar: 340px; }
  .settings-overlay { width: 440px; right: 0; left: auto; }
  .chat-empty { display: flex; }
}

/* ════════ iOS SPECIFIC FIXES ════════════════════ */
/* Fix 100vh on Safari iOS (address bar) */
@supports (-webkit-touch-callout: none) {
  #app, .sidebar, .chat, #group-call-overlay {
    height: -webkit-fill-available;
  }
  .auth-page { min-height: -webkit-fill-available; }
}

/* Fix momentum scrolling on iOS */
.msgs, .sb-list, .settings-body, .member-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Fix sticky hover states on iOS touch */
@media (hover: none) {
  .sb-item:hover, .settings-row:hover,
  .emoji-item:hover, .ib:hover { background: none; }
  .sb-item:active { background: var(--hover); }
  .settings-row:active { background: var(--hover); }
  .emoji-item:active { background: var(--hover2); }
  .ib:active { background: var(--hover); }
  .btn-google:active { background: var(--hover); }
}

/* ════════ HIGH-DPI / RETINA ═════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .mbub.has-img img, .mbub.has-gif img { image-rendering: -webkit-optimize-contrast; }
}

/* ════════ KEYBOARD HANDLING ════════════════════ */
/* When virtual keyboard opens on mobile, shrink viewport */
@supports (height: 100dvh) {
  #app { height: 100dvh; }
  .chat { height: 100dvh; }
  .sidebar { height: 100dvh; }
}

/* ════════ LANDSCAPE PHONE ═══════════════════════ */
@media (max-width: 812px) and (orientation: landscape) {
  .auth-card { max-height: 90dvh; overflow-y: auto; }
  .gc-controls { padding: 6px 16px max(6px, var(--safe-bottom)); gap: 12px; }
  .gc-grid { max-height: calc(100dvh - 100px); }
  .emoji-box { max-height: 45vh; }
  .gif-box { max-height: 55vh; }
  .gif-grid { max-height: calc(55vh - 60px); }
}

/* ════════ PRINT (just hide app chrome) ══════════ */
@media print {
  .sidebar, .chatbar, .topbar, #group-call-overlay,
  .settings-overlay, .call-overlay { display: none !important; }
  .msgs { overflow: visible; height: auto; }
}

/* ════════════════════════════════
   SCO AGENCY FOOTER
   ════════════════════════════════ */

/* Auth pages footer */
.sco-footer {
  position: fixed;
  bottom: max(12px, var(--safe-bottom));
  left: 0; right: 0;
  text-align: center;
  font-size: .72rem;
  color: var(--text4);
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.sco-footer strong { color: var(--text3); font-weight: 700; }

/* Sidebar brand (index.html) */
.sco-brand {
  text-align: center;
  font-size: .65rem;
  color: var(--text4);
  letter-spacing: .05em;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border2);
  margin-top: 4px;
  user-select: none;
  -webkit-user-select: none;
}
.sco-brand strong { color: var(--text3); font-weight: 700; }