/* Modern visual layer for the existing chat. Logic and API behavior are unchanged. */
:root{
  --modern-primary:#2563eb;
  --modern-primary-2:#4f46e5;
  --modern-accent:#06b6d4;
  --modern-success:#10b981;
  --modern-ink:#0f172a;
  --modern-muted:#64748b;
  --modern-line:rgba(15,23,42,.09);
  --modern-glass:rgba(255,255,255,.82);
  --modern-shadow:0 24px 70px rgba(15,23,42,.15);
  --modern-soft-shadow:0 10px 30px rgba(15,23,42,.08);
}

html{ background:#eef4ff; }
body{
  color:var(--modern-ink);
  background:
    radial-gradient(circle at 88% 5%, rgba(59,130,246,.17), transparent 32rem),
    radial-gradient(circle at 8% 92%, rgba(6,182,212,.13), transparent 30rem),
    linear-gradient(145deg,#f8fbff 0%,#eef4ff 52%,#f8fafc 100%) !important;
}
button,input,textarea{ -webkit-tap-highlight-color:transparent; }
button{ transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease; }
button:active{ transform:scale(.96); }

/* Login */
body > .container{
  position:relative;
  width:min(430px,calc(100% - 28px)) !important;
  max-width:430px !important;
  padding:34px 30px 30px !important;
  border:1px solid rgba(255,255,255,.82);
  border-radius:28px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:var(--modern-shadow) !important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  overflow:hidden;
}
body > .container::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--modern-primary),var(--modern-accent),var(--modern-primary-2));
}
body > .container h2{
  margin:4px 0 26px !important;
  font-size:22px;
  color:var(--modern-ink) !important;
  letter-spacing:-.25px;
}
body > .container .form-group{ margin-bottom:18px !important; }
body > .container label{ margin-bottom:8px !important; color:#475569 !important; font-weight:700; }
body > .container input[type="number"],
body > .container input[type="text"],
body > .container input[type="password"]{
  min-height:50px;
  padding:12px 15px !important;
  border:1px solid #dbe4f0 !important;
  border-radius:15px !important;
  background:#f8fafc;
  color:var(--modern-ink);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body > .container input:focus{
  background:#fff;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.11);
}
body > .container button[type="submit"]{
  min-height:50px;
  border-radius:15px !important;
  background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2)) !important;
  box-shadow:0 12px 25px rgba(37,99,235,.24);
  font-weight:800;
}
body > .container button[type="submit"]:hover{ box-shadow:0 16px 32px rgba(37,99,235,.3); }
body > .container .alert{ border-radius:14px !important; border:1px solid rgba(239,68,68,.16); }

/* Main shells */
.shell{
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:var(--modern-shadow) !important;
}
@media (min-width:920px){ .shell{ border-radius:26px !important; } }

/* Conversation list pages */
.topbar{
  min-height:76px;
  padding:15px 18px !important;
  color:#fff;
  border-bottom:0 !important;
  background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 45%,#0891b2 115%) !important;
  box-shadow:0 10px 28px rgba(30,64,175,.2);
  position:relative;
  z-index:5;
}
.topbar .title{ color:#fff; font-size:16px !important; }
.topbar .sub,.topbar [style*="color:var(--muted)"]{ color:rgba(255,255,255,.78) !important; }
.content{ padding:16px !important; background:transparent !important; }
.card{
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:22px !important;
  box-shadow:var(--modern-soft-shadow) !important;
  background:rgba(255,255,255,.91) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.cardHead{ padding:15px 16px !important; background:linear-gradient(180deg,#fff,#fbfdff); }
.cardTitle{ font-size:14px !important; }
.searchWrap,.sheetSearch{ padding:12px 14px !important; background:#fbfdff !important; }
.search{
  min-height:46px;
  border-color:#dbe5f1 !important;
  border-radius:14px !important;
  background:#f7faff !important;
  padding:11px 14px !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search:focus{
  background:#fff !important;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
}
.listItem{
  min-height:76px;
  padding:13px 15px !important;
  border-bottom-color:#edf2f7 !important;
  background:transparent !important;
  transition:background .18s ease, transform .18s ease;
}
.listItem:hover{ background:#f3f7ff !important; transform:translateX(-2px); }
.avatar{
  width:50px !important;
  height:50px !important;
  border:0 !important;
  color:#fff !important;
  background:linear-gradient(145deg,var(--modern-primary),var(--modern-accent)) !important;
  box-shadow:0 8px 20px rgba(37,99,235,.2);
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.name{ font-size:14px !important; }
.preview{ color:#718096 !important; line-height:1.7; }
.badge{
  min-width:24px !important;
  height:24px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#10b981,#059669) !important;
  box-shadow:0 5px 14px rgba(16,185,129,.24);
}
.fab{
  width:60px !important;
  height:60px !important;
  background:linear-gradient(145deg,var(--modern-primary),var(--modern-primary-2)) !important;
  box-shadow:0 16px 34px rgba(37,99,235,.32) !important;
}
.fab:hover{ transform:translateY(-2px) scale(1.03); }
.modalBack{ background:rgba(15,23,42,.58) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sheet{ border-radius:24px 24px 18px 18px !important; box-shadow:0 30px 80px rgba(15,23,42,.3) !important; }
.sheetHead{ padding:15px 16px !important; }
.sheetClose{ background:#f1f5f9 !important; border:0 !important; }
.tab,.kTab{
  border-radius:13px !important;
  border-color:#dbe5f1 !important;
  background:#f8fafc !important;
}
.tab.active,.kTab.active{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2)) !important;
  box-shadow:0 8px 18px rgba(37,99,235,.2);
}
.docItem{ border-radius:16px !important; border-color:#e2e8f0 !important; transition:.18s ease; }
.docItem:hover{ border-color:#93c5fd !important; background:#f8fbff !important; }
.docBtn{ background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2)) !important; }

/* Chat header and conversation surface */
.header{
  min-height:72px;
  padding:11px 14px !important;
  padding-top:calc(11px + env(safe-area-inset-top)) !important;
  background:linear-gradient(135deg,#1e40af 0%,#2563eb 52%,#0891b2 120%) !important;
  box-shadow:0 10px 26px rgba(30,64,175,.22);
  position:relative;
  z-index:10;
}
.header .hdrTitle{ color:#fff; font-size:16px !important; font-weight:800 !important; }
.header .hdrSub{ color:rgba(255,255,255,.78) !important; }
.backBtn{
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.14) !important;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(15,23,42,.12);
}
.backBtn:hover{ background:rgba(255,255,255,.24) !important; }
.body{
  padding:18px 14px !important;
  background-color:#eaf1fb !important;
  background-image:
    radial-gradient(circle at 25px 25px,rgba(37,99,235,.045) 2px,transparent 2px),
    radial-gradient(circle at 75px 75px,rgba(6,182,212,.045) 2px,transparent 2px),
    linear-gradient(155deg,rgba(255,255,255,.58),rgba(239,246,255,.66)) !important;
  background-size:100px 100px,100px 100px,auto !important;
  scroll-behavior:smooth;
}
.row{ margin:7px 0 !important; }
.bubble{
  max-width:min(76%,680px) !important;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 5px 18px rgba(15,23,42,.08) !important;
  line-height:1.75;
}
.me .bubble{
  background:linear-gradient(145deg,#dbeafe,#dff7f2) !important;
  border-bottom-right-radius:6px !important;
}
.other .bubble{
  background:rgba(255,255,255,.96) !important;
  border-bottom-left-radius:6px !important;
}
.bubble a{ font-weight:700; }
.meta{ margin-top:7px !important; color:#64748b !important; font-size:10px !important; }

.composer{
  padding:10px 12px !important;
  padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  border-top:1px solid rgba(148,163,184,.22) !important;
  background:rgba(248,250,252,.9) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.inputWrap{
  min-height:56px;
  padding:7px 9px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 8px 25px rgba(15,23,42,.08);
}
textarea{ padding:7px 4px; font-size:14px !important; color:var(--modern-ink); }
textarea::placeholder{ color:#94a3b8; }
.iconBtn{
  width:42px !important;
  height:42px !important;
  background:linear-gradient(145deg,var(--modern-primary),var(--modern-primary-2)) !important;
  box-shadow:0 7px 16px rgba(37,99,235,.18);
}
.iconBtn.gray{ background:#edf2f7 !important; box-shadow:none; }
.iconBtn.gray:hover{ background:#dfe7f1 !important; }
.iconBtn img{ width:22px !important; height:22px !important; }
.hint{
  right:50% !important;
  bottom:88px !important;
  transform:translateX(50%);
  padding:9px 15px !important;
  background:rgba(15,23,42,.88) !important;
  box-shadow:0 10px 25px rgba(15,23,42,.25);
  backdrop-filter:blur(10px);
}

/* Attachments */
.mediaAttachment{ position:relative; width:fit-content; max-width:100%; }
.imageAttachment{ overflow:hidden; border-radius:18px; background:#dbe7f5; }
.imgThumb{
  width:min(360px,70vw) !important;
  max-width:100% !important;
  max-height:min(430px,54vh) !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(15,23,42,.14);
  transition:filter .2s ease, transform .2s ease;
  background:#dbe7f5;
}
.imgThumb:hover{ filter:brightness(.94); transform:scale(1.008); }
.imageZoomBadge{
  position:absolute;
  left:10px;
  bottom:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 5px 18px rgba(0,0,0,.2);
  pointer-events:none;
  backdrop-filter:blur(8px);
  font-size:17px;
}
.bubble video{
  display:block;
  width:min(420px,70vw) !important;
  max-width:100% !important;
  max-height:52vh;
  object-fit:contain;
  border-radius:16px !important;
  background:#0f172a;
  box-shadow:0 8px 24px rgba(15,23,42,.15);
}

/* Telegram-like full-screen media viewer */
.lightbox{
  padding:0 !important;
  background:rgba(3,7,18,.94) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.lightboxCard{
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  max-height:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.lightboxTop{
  min-height:64px;
  padding:10px 14px !important;
  padding-top:calc(10px + env(safe-area-inset-top)) !important;
  border:0 !important;
  color:#fff;
  background:linear-gradient(180deg,rgba(3,7,18,.84),rgba(3,7,18,.36),transparent) !important;
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:3;
}
.lightboxTitle{ color:#fff !important; font-size:13px !important; text-shadow:0 1px 6px #000; }
.lightboxBtns{ align-items:center; flex-wrap:nowrap; }
.lightbox .btn,.media-tool{
  min-width:40px;
  height:40px;
  padding:0 12px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  text-decoration:none;
  backdrop-filter:blur(10px);
  font-family:inherit;
  font-weight:800;
  cursor:pointer;
}
.lightbox .btn:hover,.media-tool:hover{ background:rgba(255,255,255,.22) !important; }
.lightbox .btn.primary{ background:rgba(37,99,235,.78) !important; }
.lightboxBody{
  width:100%;
  height:100%;
  padding:74px 18px 24px !important;
  overflow:hidden !important;
  background:transparent !important;
  position:relative;
  touch-action:none;
  cursor:default;
}
.lightboxBody img,#lbImg{
  display:block;
  max-width:calc(100vw - 36px) !important;
  max-height:calc(100dvh - 110px) !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:6px !important;
  background:transparent !important;
  box-shadow:0 18px 70px rgba(0,0,0,.55);
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
  cursor:zoom-in;
}
#lbImg.is-zoomed{ cursor:grab; }
#lbImg.is-dragging{ cursor:grabbing; }
.media-zoom-label{
  min-width:52px;
  height:34px;
  display:inline-grid;
  place-items:center;
  color:rgba(255,255,255,.85);
  font-size:11px;
  direction:ltr;
}

.chat-popup-menu{
  border:1px solid rgba(148,163,184,.25) !important;
  box-shadow:0 18px 55px rgba(15,23,42,.2) !important;
  backdrop-filter:blur(16px);
}

@media (max-width:640px){
  body > .container{ padding:30px 22px 24px !important; }
  .content{ padding:10px !important; }
  .topbar{ min-height:68px; padding:12px 14px !important; }
  .card{ border-radius:18px !important; }
  .listItem{ padding:12px !important; }
  .avatar{ width:46px !important; height:46px !important; }
  .body{ padding:14px 9px !important; }
  .bubble{ max-width:86% !important; }
  .imgThumb{ width:min(350px,78vw) !important; max-height:48vh !important; }
  .bubble video{ width:min(350px,78vw) !important; }
  .lightboxTop{ gap:6px; }
  .lightboxTitle{ max-width:28% !important; }
  .lightboxBtns{ gap:5px !important; }
  .lightbox .btn,.media-tool{ min-width:36px; height:36px; padding:0 9px !important; font-size:11px !important; }
  .media-zoom-label{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}