/* =====================================================================
   INBOX: quick replies + mobile app look
   Mobile e full-screen inbox (rail/appbar lukano).
   ===================================================================== */
/* ---- quick replies (shortcuts) ---- */
.send.qr-btn{width:36px;height:36px;background:#fff4e0;color:#d97706;border:1px solid #fde3b5;margin-right:2px}
.send.qr-btn:hover{background:#fdebc8;color:#b45309}
.send.qr-btn.on{background:var(--grad);color:#fff;border-color:transparent}
body.dark .send.qr-btn{background:#33260f;color:#fbbf24;border-color:#5a4114}
.composer .field{position:relative}
.qr-pop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.14);max-height:260px;overflow-y:auto;z-index:40;padding:6px}
.qr-item{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;cursor:pointer}
.qr-item:hover,.qr-item.sel{background:var(--tint)}
.qr-item .sc{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--blue-700);background:var(--blue-50);padding:2px 8px;border-radius:8px;margin-top:1px}
.qr-item .tx{flex:1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* shortcut er shathe jora chhobi / video */
.qr-item .qth{flex:0 0 auto;width:30px;height:30px;border-radius:7px;object-fit:cover;
  border:1px solid var(--line);background:var(--tint);display:grid;place-items:center;font-size:12px;
  color:var(--muted);margin-top:-1px}
.qr-item .qmed{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:0 4px;
  line-height:0;color:var(--faint);display:grid;place-items:center}
.qr-item .qmed svg{width:15px;height:15px;display:block}
.qr-item .qmed:hover{color:var(--blue-600)}
.qr-item .qmed.on{color:var(--blue-600)}
.qr-item .qmed.on:hover{color:#dc2626}
.qr-item .del{flex:0 0 auto;border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.qr-item .del:hover{color:#dc2626}
.qr-empty{padding:10px 12px;font-size:13px;color:var(--faint)}
.qr-add{border-top:1px solid var(--line);margin-top:6px;padding:10px 10px 6px}
.qr-add .row{display:flex;gap:8px;margin-bottom:8px}
.qr-add input,.qr-add textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);outline:none;resize:none;line-height:1.45;overflow-y:auto;box-sizing:border-box}
.qr-add input:focus,.qr-add textarea:focus{border-color:var(--blue-600)}
.qr-add input.sc{max-width:150px}
.qr-add .btn.sm{padding:8px 14px;font-size:13px;border-radius:10px;width:auto}
.qr-add .hint{font-size:11.5px;color:var(--faint);margin-top:4px}
body.dark .qr-pop{background:var(--panel);border-color:var(--line)}
body.dark .qr-item:hover,body.dark .qr-item.sel{background:#233138}
body.dark .qr-item .sc{background:#233138;color:#9bc0ff}
body.dark .qr-add input,body.dark .qr-add textarea{background:#0b141a;color:var(--ink);border-color:#3b4a54}

/* ================= MOBILE APP LOOK ================= */
@media(max-width:760px){
  html,body{overscroll-behavior-y:none}
  .app{height:100dvh;grid-template-rows:1fr;padding-left:0;padding-bottom:0}
  /* mobile: no top app bar, no bottom tab bar — full screen inbox */
  .appbar{display:none!important}
  .rail{display:none!important}
  .app{grid-template-rows:1fr;padding-bottom:0;padding-top:env(safe-area-inset-top)}
  .col.left{padding-top:0}
  /* chat sits above the bottom tab bar so the composer is always visible */
  .chat{inset:env(safe-area-inset-top) 0 0 0;height:auto!important;min-height:0}
  .chat #chatBody{height:100%;min-height:0}
  .thread-wrap{min-height:0}
  .thread{min-height:0}
  .jumpdown{right:14px;bottom:12px}
  .bub img,.bub video,.bub audio,.bub .cap img{max-width:100%;height:auto}
  .bub audio{width:72vw}
  .chat-head{height:auto;min-height:58px;padding:8px 12px;gap:8px}
  .chat-head .left{flex:1;min-width:0;gap:9px}
  .chat-head .left>div:last-child{min-width:0}
  .chat-head .who{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chat-head .sub{font-size:11px;white-space:normal;line-height:1.35;max-width:62vw}
  .chat-head .resolve{padding:8px 12px;font-size:12.5px;flex:0 0 auto}
  .hdr-info{margin-right:4px;width:36px;height:36px}
  .composer{padding-bottom:10px}
  /* bigger touch targets */
  .conv{padding:14px 14px}
  .tabs .tab,.filters .f{padding:9px 14px;font-size:13px}
  .send{width:42px;height:42px}
  .composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .composer textarea{font-size:16px}   /* 16px stops iOS zoom-on-focus */
  .bub{max-width:84vw;font-size:15px}
  #backBtn{display:flex;width:38px;height:38px}
  .hdr-info{display:flex!important}
  /* details -> slide-up sheet */
  .col.right{display:flex!important;position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:82dvh;z-index:70;border-radius:20px 20px 0 0;border:none;
    box-shadow:0 -14px 40px rgba(15,23,42,.28);transform:translateY(102%);
    transition:transform .26s cubic-bezier(.2,.8,.2,1);flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);background:var(--panel)}
  body.show-info .col.right{transform:none}
  .col.right .info-head{position:relative;text-align:center;padding-top:16px}
  .col.right .info-head:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:3px;background:var(--line)}
  .col.right .info{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sheet-back{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:65;opacity:0;
    transition:opacity .2s;backdrop-filter:blur(2px)}
  body.show-info .sheet-back{opacity:1}
  /* quick-reply popup: full composer width on mobile */
  .composer{position:relative}
  .qr-pop{position:absolute;left:8px;right:8px;bottom:calc(100% + 10px);max-height:56dvh;padding:8px;border-radius:16px}
  .qr-item{padding:11px 12px;gap:12px}
  .qr-item .sc{font-size:12.5px;padding:3px 9px}
  .qr-item .tx{font-size:13.5px}
  .qr-item .del{font-size:18px;padding:0 6px}
  .qr-add{padding:12px 8px 6px}
  .qr-add .row{gap:8px}
  .qr-add input,.qr-add textarea{font-size:16px;padding:10px 12px}
  .qr-add input.sc{max-width:none;flex:1}
  .qr-add .btn.sm{padding:10px 18px;font-size:14px;flex:0 0 auto}
  .qr-empty{font-size:13.5px;padding:12px}
  .modal .card,.modal-grid{border-radius:16px}
}
.hdr-info{display:none;background:#eef2f8;border:none;width:38px;height:38px;border-radius:11px;
  align-items:center;justify-content:center;cursor:pointer;color:#41506a;flex:0 0 auto;margin-right:8px}
body.dark .hdr-info{background:#202c33;color:#d1d7db}
body.dark .hdr-info.on{background:rgba(0,168,132,.22);color:#7fdfc4}

/* mobile top strip + menu (only on small screens) */
.m-top{display:none}
@media(max-width:760px){
  .m-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto}
  .m-brand{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .m-brand span{color:var(--blue-600)}
  #mMenuBtn{background:#eef2f8;border:none;color:#41506a;width:38px;height:38px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;cursor:pointer}
  body.dark #mMenuBtn{background:#202c33;color:#d1d7db}
  .m-menu{position:fixed;top:calc(env(safe-area-inset-top) + 8px);right:10px;z-index:90;
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 18px 44px rgba(15,23,42,.26);padding:8px;min-width:220px}
  .mm-user{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .mm-av{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;
    font-size:13px;display:grid;place-items:center;flex:0 0 auto}
  .mm-user b{display:block;font-size:14px;color:var(--ink)}
  .mm-user small{font-size:11px;color:var(--faint);text-transform:uppercase;font-weight:700}
  .mm-item{display:block;width:100%;text-align:left;padding:11px 12px;border:none;background:none;
    font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:10px;cursor:pointer;font-family:inherit}
  .mm-item:hover{background:var(--tint)}
  .mm-out{color:#b91c1c;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:6px}
  .mm-admin{display:none}
  body.role-admin .mm-admin{display:block}
  .m-menu-back{position:fixed;inset:0;z-index:85;background:rgba(15,23,42,.25)}
}

.stamp .who-tag{font-weight:700;color:var(--blue-700)}
.stamp .who-tag.bot{color:#b45309}
body.dark .stamp .who-tag{color:#9bc0ff}
body.dark .stamp .who-tag.bot{color:#fbbf24}

/* quick replies — bigger panel with its own header */
.qr-pop{max-height:420px}
.qr-head{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.qr-head>span{flex:1;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.qr-head>span b{color:var(--blue-700)}
.qr-new{border:1px solid var(--blue-50);background:var(--tint);color:var(--blue-700);font-size:13px;
  font-weight:700;padding:7px 13px;border-radius:10px;cursor:pointer;font-family:inherit}
.qr-new:hover{background:var(--blue-50)}
.qr-close{border:none;background:none;color:var(--faint);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.qr-close:hover{color:var(--ink)}
.qr-list{max-height:250px;overflow-y:auto}
body.dark .qr-new{background:#233138;border-color:#3b4a54;color:#9bc0ff}
@media(max-width:760px){
  .qr-pop{position:fixed;left:8px;right:8px;top:auto;bottom:calc(70px + env(safe-area-inset-bottom));
    max-height:66dvh;padding:10px;border-radius:18px}
  .qr-list{max-height:40dvh}
  .qr-head>span{font-size:12.5px}
  .qr-new{padding:9px 15px;font-size:14px}
  .qr-close{font-size:24px;padding:0 8px}
}