:root{
  --bg1:#0a0f1a;--bg2:#111827;--bg3:#1e293b;
  --gl:rgba(255,255,255,.05);--glb:rgba(255,255,255,.09);--gls:0 8px 32px rgba(0,0,0,.45);
  --tx1:#f1f5f9;--tx2:#94a3b8;--tx3:#64748b;
  --ac:#10b981;--acl:#34d399;--acd:#059669;--acg:rgba(16,185,129,.2);
  --rd:#ef4444;--wr:#f59e0b;--bl:#3b82f6;--gn:#22c55e;
  --inp:rgba(255,255,255,.06);--inb:rgba(255,255,255,.1);
  --hbg:rgba(10,15,26,.93);--sbg:rgba(17,24,39,.97);--nbg:rgba(10,15,26,.95);
  --mu:rgba(5,150,105,.85);--ma:rgba(255,255,255,.05);
  --rs:12px;--rm:18px;--rl:26px;
  --ez:cubic-bezier(.4,0,.2,1)
}
[data-theme="light"]{
  --bg1:#f0fdf4;--bg2:#fff;--bg3:#f1f5f9;
  --gl:rgba(255,255,255,.7);--glb:rgba(0,0,0,.08);--gls:0 8px 32px rgba(0,0,0,.07);
  --tx1:#0f172a;--tx2:#475569;--tx3:#94a3b8;
  --inp:rgba(0,0,0,.04);--inb:rgba(0,0,0,.1);
  --hbg:rgba(255,255,255,.93);--sbg:rgba(255,255,255,.97);--nbg:rgba(255,255,255,.95);
  --ma:rgba(0,0,0,.04)
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:'Vazirmatn',Tahoma,sans-serif;background:var(--bg1);color:var(--tx1);min-height:100dvh;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background .4s var(--ez),color .4s var(--ez)}
a{color:var(--ac);text-decoration:none}
input,textarea,button,select{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
.hide{display:none!important}

.glass{background:var(--gl);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glb);box-shadow:var(--gls);border-radius:var(--rm)}
.glass-btn{background:var(--gl);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glb);border-radius:var(--rs);padding:10px 18px;display:inline-flex;align-items:center;gap:8px;color:var(--tx1);font-weight:600;transition:all .25s var(--ez)}
.glass-btn:hover{background:var(--acg);border-color:var(--ac);transform:translateY(-2px);box-shadow:0 6px 20px var(--acg)}
.glass-btn:active{transform:scale(.96)}

@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-glow{0%,100%{filter:drop-shadow(0 0 8px var(--acg))}50%{filter:drop-shadow(0 0 22px var(--ac))}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes barLoad{0%{width:0}100%{width:100%}}
@keyframes blobAn{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dotPulse{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pulse-glow{animation:pulse-glow 2.5s ease-in-out infinite}

/* SPLASH */
#splash{position:fixed;inset:0;z-index:9999;background:var(--bg1);display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
.sp-c{text-align:center}
.sp-i{font-size:60px;color:var(--ac);animation:float 2s ease-in-out infinite}
.sp-t{font-size:30px;font-weight:900;margin-top:12px;background:linear-gradient(135deg,var(--acl),var(--ac),var(--acd));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sp-s{color:var(--tx2);font-size:13px;margin:6px 0 24px}
.sp-bar{width:160px;height:4px;background:var(--bg3);border-radius:9px;overflow:hidden;margin:0 auto}
.sp-fill{height:100%;background:linear-gradient(90deg,var(--acd),var(--acl));border-radius:9px;animation:barLoad 2s var(--ez) forwards}

/* AUTH */
#auth{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg1);overflow-y:auto}
.au-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;animation:blobAn 8s ease-in-out infinite,float 6s ease-in-out infinite}
.b1{width:260px;height:260px;background:rgba(16,185,129,.14);top:-60px;right:-40px}
.b2{width:200px;height:200px;background:rgba(59,130,246,.1);bottom:10%;left:-30px;animation-delay:2s}
.b3{width:140px;height:140px;background:rgba(245,158,11,.08);top:40%;left:40%;animation-delay:4s}
.au-card{position:relative;width:100%;max-width:400px;padding:28px 22px;animation:fadeScale .5s var(--ez)}
.au-logo{text-align:center;margin-bottom:24px}
.au-ic{font-size:44px;color:var(--ac);margin-bottom:8px}
.au-logo h1{font-size:26px;font-weight:900;background:linear-gradient(135deg,var(--acl),var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.au-logo p{color:var(--tx2);font-size:13px;margin-top:4px}

.au-tabs{display:flex;position:relative;background:var(--inp);border-radius:var(--rs);padding:4px;margin-bottom:20px}
.au-tab{flex:1;padding:10px;border-radius:calc(var(--rs) - 2px);font-weight:700;color:var(--tx2);transition:all .3s var(--ez);z-index:1}
.au-tab.on{color:var(--tx1)}
.au-line{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);background:var(--acg);border:1px solid var(--ac);border-radius:calc(var(--rs) - 2px);transition:all .35s var(--ez);right:4px}
.au-line.lf{right:calc(50%)}

.au-form{display:none;flex-direction:column;gap:12px;animation:fadeIn .35s var(--ez)}
.au-form.on{display:flex}

.ig{display:flex;align-items:center;background:var(--inp);border:1.5px solid var(--inb);border-radius:var(--rs);padding:0 14px;transition:border .3s,box-shadow .3s}
.ig:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--acg)}
.ig>i:first-child{color:var(--tx3);font-size:14px;width:18px;text-align:center}
.ig input{flex:1;padding:13px 10px;font-size:14px}
.ig input::placeholder{color:var(--tx3)}
.eye{color:var(--tx3);padding:8px;font-size:13px}

.au-opt{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.ck{display:flex;align-items:center;gap:6px;color:var(--tx2);cursor:pointer}
.ck input{accent-color:var(--ac);width:15px;height:15px}
.au-opt a{color:var(--ac)}

.str-w{height:4px;background:var(--bg3);border-radius:9px;overflow:hidden;margin-top:-2px}
.str-b{height:100%;border-radius:9px;transition:all .4s var(--ez);width:0}
.str-t{font-size:11px;color:var(--tx3);min-height:16px}

.btn-pr{width:100%;padding:13px;border-radius:var(--rs);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--ac),var(--acd));color:#fff;border:none;transition:all .3s var(--ez);box-shadow:0 4px 16px var(--acg)}
.btn-pr:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--acg)}
.btn-pr:active{transform:scale(.97)}
.btn-pr:disabled{opacity:.5;cursor:not-allowed;transform:none}
.au-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--rd);padding:10px 14px;border-radius:var(--rs);font-size:13px;text-align:center;animation:shake .4s var(--ez)}
.btn-dn{width:100%;padding:13px;border-radius:var(--rs);font-weight:700;background:rgba(239,68,68,.1);color:var(--rd);border:1px solid rgba(239,68,68,.2);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s var(--ez);margin-top:12px}
.btn-dn:hover{background:rgba(239,68,68,.18)}

/* HEADER */
#hdr{position:fixed;top:0;left:0;right:0;z-index:80;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--hbg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glb);transition:background .4s var(--ez)}
.h-r,.h-l{display:flex;align-items:center;gap:4px}
.h-b{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);color:var(--tx2);font-size:17px;transition:all .25s var(--ez);position:relative}
.h-b:hover{background:var(--gl);color:var(--ac)}
.h-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px}
.h-brand i{color:var(--ac);font-size:18px}
.h-av{width:34px;height:34px;border-radius:50%;background:var(--acg);display:flex;align-items:center;justify-content:center;color:var(--ac);cursor:pointer;border:2px solid var(--ac);font-size:13px;transition:transform .25s var(--ez)}
.h-av:hover{transform:scale(1.1)}
.bdg{position:absolute;top:3px;right:3px;min-width:16px;height:16px;background:var(--rd);color:#fff;font-size:9px;font-style:normal;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px}
.nb{position:relative}

/* NOTIF */
#np{position:fixed;top:60px;left:14px;right:14px;max-width:360px;max-height:380px;z-index:85;padding:0;overflow:hidden;animation:fadeScale .25s var(--ez)}
@media(min-width:600px){#np{left:auto;right:60px}}
.np-h{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--glb)}
.np-h h3{font-size:14px;display:flex;align-items:center;gap:8px}
.np-h button{color:var(--tx3);font-size:15px}
.np-l{max-height:320px;overflow-y:auto;padding:8px}
.np-i{padding:10px 12px;border-radius:var(--rs);margin-bottom:5px;background:var(--inp);font-size:12px;line-height:1.7;display:flex;gap:10px;align-items:flex-start}
.np-i i{color:var(--wr);margin-top:2px;flex-shrink:0}

/* SIDEBAR */
#sb{position:fixed;top:0;bottom:0;right:0;width:270px;z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s var(--ez);background:var(--sbg);border-radius:0;border-left:1px solid var(--glb)}
#sb.open{transform:translateX(0)}
#sb-ov{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:all .35s var(--ez)}
#sb-ov.show{opacity:1;visibility:visible}
.sb-h{padding:14px}
.sb-nw{width:100%;justify-content:center;padding:12px;font-size:13px}
.sb-sr{display:flex;align-items:center;gap:8px;padding:0 14px;margin-bottom:6px}
.sb-sr i{color:var(--tx3);font-size:12px}
.sb-sr input{flex:1;padding:9px 0;font-size:12px}
.sb-ls{flex:1;overflow-y:auto;padding:0 6px}
.sb-it{display:flex;align-items:center;gap:9px;padding:10px;border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ez);margin-bottom:2px;font-size:12px;color:var(--tx2)}
.sb-it:hover,.sb-it.on{background:var(--acg);color:var(--tx1)}
.sb-it i{font-size:13px;flex-shrink:0}
.sb-it span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-it .sb-dl{opacity:0;color:var(--rd);font-size:11px;padding:4px;transition:opacity .2s}
.sb-it:hover .sb-dl{opacity:1}
.sb-ft{border-top:1px solid var(--glb);padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.sb-ft button{display:flex;align-items:center;gap:9px;padding:9px;border-radius:var(--rs);color:var(--tx2);font-size:12px;transition:all .2s var(--ez)}
.sb-ft button:hover{background:var(--inp);color:var(--tx1)}

/* MAIN */
#main{position:fixed;top:56px;left:0;right:0;bottom:64px;overflow:hidden}
.pg{position:absolute;inset:0;display:none;opacity:0;transition:opacity .3s var(--ez)}
.pg.on{display:flex;flex-direction:column;opacity:1}
.scr{flex:1;overflow-y:auto;padding:14px;padding-bottom:20px;-webkit-overflow-scrolling:touch}

/* BOTTOM NAV */
#bnav{position:fixed;bottom:0;left:0;right:0;z-index:80;height:64px;display:flex;align-items:stretch;background:var(--nbg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--glb);padding:0 2px;padding-bottom:env(safe-area-inset-bottom)}
.nv{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--tx3);font-size:10px;font-weight:600;transition:all .25s var(--ez);border-radius:var(--rs);margin:5px 2px;position:relative}
.nv i{font-size:18px;transition:all .25s var(--ez)}
.nv.on{color:var(--ac)}
.nv.on i{transform:scale(1.15)}
.nv.on::before{content:'';position:absolute;top:-5px;width:22px;height:3px;background:var(--ac);border-radius:9px}
.nv:active{transform:scale(.88)}

/* WEATHER */
.wh{padding:20px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(59,130,246,.06));border:1px solid rgba(16,185,129,.12);animation:fadeIn .5s var(--ez)}
.wh-i{flex:1}
.wh-loc{display:flex;align-items:center;gap:6px;color:var(--ac);font-size:12px;font-weight:600;margin-bottom:6px}
.wh-tmp{font-size:52px;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--tx1),var(--acl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.wh-fl{font-size:11px;color:var(--tx3);margin:4px 0}
.wh-ds{font-size:13px;color:var(--tx2);margin-bottom:6px;font-weight:600}
.wh-rng{display:flex;gap:14px;font-size:12px;color:var(--tx2)}
.cr{color:var(--rd)}.cb{color:var(--bl)}
.wh-ico{font-size:56px;color:var(--ac);opacity:.7;animation:float 3s ease-in-out infinite}

.wg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.wc{padding:14px 8px;text-align:center;transition:all .3s var(--ez);animation:slideUp .5s var(--ez) both}
.wc:nth-child(1){animation-delay:.05s}.wc:nth-child(2){animation-delay:.1s}.wc:nth-child(3){animation-delay:.15s}
.wc:nth-child(4){animation-delay:.2s}.wc:nth-child(5){animation-delay:.25s}.wc:nth-child(6){animation-delay:.3s}
.wc:hover{transform:translateY(-3px);border-color:var(--ac)}
.wc-i{font-size:20px;color:var(--ac);margin-bottom:6px}
.wc-v{font-size:17px;font-weight:800;margin-bottom:3px}
.wc-l{font-size:10px;color:var(--tx3)}

.st{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin:18px 0 10px;color:var(--tx1)}
.st i{color:var(--ac)}

#w-alr{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.al{display:flex;align-items:flex-start;gap:9px;padding:12px;border-radius:var(--rs);font-size:12px;line-height:1.7;animation:fadeIn .4s var(--ez) both}
.al.wr{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.18);color:var(--wr)}
.al.inf{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.18);color:var(--bl)}
.al.dn{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.18);color:var(--rd)}
.al.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.18);color:var(--gn)}
.al i{margin-top:2px;flex-shrink:0}

.ch-bx{padding:14px;margin-bottom:8px}
#tmpCh{width:100%;max-height:180px}

.fc-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.fc-row::-webkit-scrollbar{display:none}
.fc{flex-shrink:0;width:95px;padding:12px 8px;text-align:center;border-radius:var(--rm);background:var(--gl);backdrop-filter:blur(12px);border:1px solid var(--glb);scroll-snap-align:start;transition:all .3s var(--ez)}
.fc:hover{border-color:var(--ac);transform:translateY(-3px)}
.fc-d{font-size:11px;color:var(--ac);font-weight:700;margin-bottom:5px}
.fc-ic{font-size:22px;margin-bottom:5px}
.fc-t{font-size:12px;font-weight:700}
.fc-t span{color:var(--tx3);font-weight:400}
.fc-r{font-size:10px;color:var(--bl);margin-top:3px}

.map-bx{padding:0;overflow:hidden;margin-bottom:14px}
#wmap{height:220px;border-radius:var(--rm)}
.leaflet-control-attribution{font-size:9px!important}

/* CHAT (MODERN BUBBLES UI) */
.ch-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: var(--bg1);
}
.ch-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px 14px 100px; /* فضای بیشتر در پایین برای ورودی متن و کیبورد موبایل */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#ch-welc {
  text-align: center;
  padding: 40px 14px;
}
.cw-i { font-size: 50px; color: var(--ac); margin-bottom: 10px; }
#ch-welc h2 { font-size: 24px; font-weight: 900; margin-bottom: 8px; }
#ch-welc p { color: var(--tx2); font-size: 14px; margin-bottom: 4px; }
.cw-sg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
.sg { font-size: 12px; padding: 10px 16px; border-radius: 20px; }

/* حباب های پیام مدرن */
.msg {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  animation: slideUpChat 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.8;
}
@keyframes slideUpChat {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--tx3);
}
.msg-head i {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; flex-shrink: 0;
}

/* پیام کاربر (سبز رنگ، چسبیده به راست) */
.msg-u { align-items: flex-end; }
.msg-u .msg-head { display: none; /* مخفی کردن نام در پیام کاربر برای زیبایی */ }
.msg-u .msg-body {
  background: linear-gradient(135deg, var(--ac), var(--acd));
  color: #fff;
  border-radius: 20px 20px 4px 20px;
  padding: 12px 18px;
  max-width: 85%;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

/* پیام هوش مصنوعی (طوسی/مشکی رنگ، چسبیده به چپ) */
.msg-ai { align-items: flex-start; }
.msg-ai .msg-head i { background: rgba(16,185,129,.15); color: var(--ac); }
.msg-ai .msg-body {
  background: var(--inp);
  border: 1px solid var(--inb);
  color: var(--tx1);
  border-radius: 20px 20px 20px 4px;
  padding: 14px 18px;
  max-width: 90%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* فرمت بندی متن داخل حباب ها */
.msg-body p { margin-bottom: 8px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body strong { color: var(--ac); }
.msg-u .msg-body strong { color: #fff; } /* رنگ بولد در حباب کاربر */
.msg-body code { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.msg-body pre { background: var(--bg3); padding: 14px; border-radius: var(--rs); overflow-x: auto; margin: 10px 0; }
.msg-body img { max-width: 100%; border-radius: 12px; margin: 8px 0; }
.msg-act { display: flex; gap: 4px; margin-top: 6px; opacity: 0.6; }
.msg-act button { padding: 4px 8px; font-size: 11px; border-radius: 6px; transition: all .2s; }
.msg-act button:hover { background: var(--acg); color: var(--ac); }

/* ورودی متن پیشرفته (شناور در پایین) */
.ch-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 14px 15px;
  background: linear-gradient(to top, var(--bg1) 70%, transparent);
}
.ch-inp {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--hbg);
  border: 1px solid var(--glb);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-radius: 28px;
  padding: 8px 10px;
  transition: all 0.3s ease;
}
.ch-inp:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acg); }
.ch-att { width: 38px; height: 38px; border-radius: 50%; color: var(--tx3); font-size: 18px; flex-shrink: 0; }
.ch-att:hover { background: var(--acg); color: var(--ac); }
#ch-in {
  flex: 1;
  max-height: 120px;
  resize: none;
  padding: 10px 4px;
  font-size: 14px;
  line-height: 1.5;
  background: none;
  border: none;
  color: var(--tx1);
}
.ch-send {
  width: 40px; height: 40px;
  background: var(--ac); color: #fff;
  border-radius: 50%; font-size: 16px; flex-shrink: 0;
  transition: all .25s var(--ez);
}
.ch-send:hover { background: var(--acd); transform: scale(1.05); }
.ch-send:disabled { opacity: .4; transform: none; }
.ch-limit { font-size: 11px; text-align: center; margin-bottom: 6px; color: var(--tx3); }
.ch-disc { display: none; /* مخفی کردن متن هشدار زیر چت برای خلوت شدن در موبایل */ }


/* DIAGNOSIS */
.dg-hd{text-align:center;margin-bottom:16px}
.dg-ic{font-size:44px;color:var(--ac);margin-bottom:10px}
.dg-hd h2{font-size:20px;font-weight:900;margin-bottom:4px}
.dg-hd p{color:var(--tx2);font-size:13px}
.dg-limit{font-size:11px;color:var(--tx3);text-align:center;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:4px}
.dg-limit.warn{color:var(--wr)}
.dg-limit.full{color:var(--rd)}
.dg-up{padding:40px 20px;text-align:center;border:2px dashed var(--glb);cursor:pointer;transition:all .3s var(--ez);margin-bottom:14px}
.dg-up:hover,.dg-up.dov{border-color:var(--ac);background:var(--acg)}
.dg-up i{font-size:40px;color:var(--ac);margin-bottom:10px}
.dg-up p{color:var(--tx2);margin-bottom:4px;font-size:13px}
.dg-up span{color:var(--tx3);font-size:11px}

.dg-pv{padding:14px;text-align:center;margin-bottom:14px}
.dg-pv img{max-height:240px;margin:0 auto 12px;border-radius:var(--rs);transition:transform .3s var(--ez)}
.dg-pv-act{display:flex;gap:8px;justify-content:center}
.dg-an{margin-bottom:14px}

.dg-ld{text-align:center;padding:30px}
.spinner{width:40px;height:40px;border:4px solid var(--glb);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
.dg-ld p{color:var(--tx2);font-size:13px}

.dg-res{padding:18px;margin-bottom:14px;animation:fadeIn .4s var(--ez)}
.dr-h{margin-bottom:14px}
.dr-h h3{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:10px}
.dr-h h3 i{color:var(--ac)}
.dr-cf{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2)}
.cf-bar{flex:1;height:6px;background:var(--bg3);border-radius:9px;overflow:hidden}
.cf-fill{height:100%;background:linear-gradient(90deg,var(--rd),var(--wr),var(--gn));border-radius:9px;transition:width .6s var(--ez)}
.dr-bd{font-size:13px;line-height:1.8;margin-bottom:14px}
.dr-bd h4{font-weight:700;margin:10px 0 4px;color:var(--ac);display:flex;align-items:center;gap:6px}
.dr-bd ul{padding-right:16px;margin:4px 0}
.dr-act{display:flex;gap:8px}

/* ABOUT */
.ab-hero{text-align:center;padding:24px 0 20px}
.ab-ic{font-size:48px;color:var(--ac);margin-bottom:10px}
.ab-hero h1{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--acl),var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ab-hero>p{color:var(--tx3);font-size:12px;margin-top:4px}
.ab-cd{padding:18px;margin-bottom:12px;animation:slideUp .5s var(--ez) both}
.ab-cd:nth-child(2){animation-delay:.1s}.ab-cd:nth-child(3){animation-delay:.15s}.ab-cd:nth-child(4){animation-delay:.2s}.ab-cd:nth-child(5){animation-delay:.25s}.ab-cd:nth-child(6){animation-delay:.3s}
.ab-cd h3{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:12px}
.ab-cd h3 i{color:var(--ac)}
.ab-cd p{color:var(--tx2);font-size:13px;line-height:1.8}
.ab-fs{display:flex;flex-direction:column;gap:8px}
.af{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 10px;border-radius:var(--rs);background:var(--inp);transition:all .3s var(--ez)}
.af:hover{background:var(--acg)}
.af i{color:var(--ac);font-size:16px;width:22px;text-align:center}
.ab-tm{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm{text-align:center;padding:16px 10px;border-radius:var(--rs);background:var(--inp)}
.tm-a{width:48px;height:48px;margin:0 auto 8px;border-radius:50%;background:var(--acg);display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:20px}
.tm h4{font-size:13px;margin-bottom:2px}
.tm p{font-size:11px;color:var(--tx2)}
.ab-lnk{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;padding:8px 14px;border-radius:var(--rs);background:var(--acg);transition:all .3s var(--ez)}
.ab-lnk:hover{background:var(--ac);color:#fff}

/* PROFILE */
.pf-hd{text-align:center;padding:20px 0}
.pf-av{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;background:var(--acg);border:3px solid var(--ac);display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:28px}
.pf-hd h2{font-size:18px;font-weight:800}
.pf-hd p{color:var(--tx2);font-size:12px}
.pf-cd{padding:18px;margin-bottom:12px}
.pf-cd h3{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:14px}
.pf-cd h3 i{color:var(--ac)}
.pf-f{margin-bottom:12px}
.pf-f label{display:block;font-size:12px;color:var(--tx3);margin-bottom:4px;font-weight:600}
.pf-f input{width:100%;padding:11px 12px;background:var(--inp);border:1.5px solid var(--inb);border-radius:var(--rs);font-size:13px;transition:border .3s,box-shadow .3s}
.pf-f input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acg)}
.pf-f input[readonly]{opacity:.6}
.pf-usage{display:flex;flex-direction:column;gap:8px}
.pu-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--inp);border-radius:var(--rs);font-size:13px}
.pu-item i{color:var(--ac);margin-left:6px}

/* TOAST */
#toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9998;display:flex;flex-direction:column;gap:8px;width:90%;max-width:360px;pointer-events:none}
.tst{pointer-events:all;padding:12px 16px;border-radius:var(--rs);font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;animation:fadeScale .3s var(--ez);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.tst.out{animation:fadeOut .3s var(--ez) forwards}
@keyframes fadeOut{to{opacity:0;transform:scale(.9) translateY(-10px)}}
.tst-ok{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);color:var(--gn)}
.tst-err{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--rd)}
.tst-inf{background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:var(--bl)}
.tst-wrn{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:var(--wr)}

/* RESPONSIVE */
@media(min-width:768px){
  .wg{grid-template-columns:repeat(6,1fr)}
  .ab-tm{grid-template-columns:1fr 1fr}
  .msg-body{max-width:700px}
  #main{max-width:800px;margin:0 auto;left:0;right:0}
  .ch-bottom{max-width:800px;margin:0 auto}
}
@media(max-width:360px){
  .wg{grid-template-columns:repeat(2,1fr)}
  .wh-tmp{font-size:42px}
  .cw-sg{flex-direction:column}
}


/* ═══════════════════════════════════
   WEATHER PAGE — PREMIUM DESIGN
   ═══════════════════════════════════ */

/* Loading */
.w-loading-box {
  text-align: center;
  padding: 60px 20px;
}
.w-load-anim {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.w-load-anim i {
  font-size: 28px;
  color: #4caf50;
  z-index: 1;
  animation: w-pulse 1.5s ease infinite;
}
.w-load-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #4caf50;
  border-right-color: #81c784;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes w-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.w-loading-box p {
  font-size: 14px;
  opacity: 0.6;
}

/* ── Hero Card ── */
.w-hero-card {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.06);
}
.w-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.w-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.3;
  animation: w-float 8s ease-in-out infinite;
}
.w-orb1 {
  width: 180px; height: 180px;
  background: #4caf50;
  top: -40px; right: -30px;
  animation-delay: 0s;
}
.w-orb2 {
  width: 120px; height: 120px;
  background: #42a5f5;
  bottom: 20px; left: -20px;
  animation-delay: 2s;
}
.w-orb3 {
  width: 90px; height: 90px;
  background: #ab47bc;
  top: 50%; left: 50%;
  animation-delay: 4s;
}
@keyframes w-float {
  0%,100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10px, -15px) scale(1.1); }
  66% { transform: translate(-8px, 10px) scale(0.95); }
}

.w-hero-content {
  position: relative;
  z-index: 1;
  padding: 28px 24px 20px;
}
.w-hero-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.w-hero-icon-wrap {
  width: 90px; height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.w-hero-icon {
  font-size: 48px;
  line-height: 1;
  animation: w-icon-bob 3s ease-in-out infinite;
}
@keyframes w-icon-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.w-hero-temp {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #e8f5e9, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.w-hero-desc {
  font-size: 16px;
  opacity: 0.75;
  margin-top: 6px;
  font-weight: 500;
}

/* Hero Details */
.w-hero-details {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  justify-content: center;
}
.w-hero-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  opacity: 0.7;
  white-space: nowrap;
}
.w-hero-detail i {
  color: #4caf50;
  font-size: 11px;
}
.w-hero-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
}

/* ── Parameters Grid ── */
.w-params {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 24px;
  position: relative;
  z-index: 1;
}
.w-param {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  transition: transform 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.w-param::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.08;
}
.w-param[data-color="blue"]::before { background: #42a5f5; }
.w-param[data-color="teal"]::before { background: #26a69a; }
.w-param[data-color="purple"]::before { background: #ab47bc; }
.w-param[data-color="orange"]::before { background: #ff9800; }
.w-param[data-color="green"]::before { background: #4caf50; }
.w-param[data-color="gray"]::before { background: #78909c; }
.w-param[data-color="red"]::before { background: #ef5350; }
.w-param[data-color="cyan"]::before { background: #00bcd4; }
.w-param:active { transform: scale(0.97); }
.w-param-icon {
  font-size: 24px;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.w-param-info { flex: 1; min-width: 0; }
.w-param-label {
  font-size: 11px;
  opacity: 0.5;
  margin-bottom: 2px;
}
.w-param-val {
  font-size: 15px;
  font-weight: 700;
}
.w-param-bar {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  margin-top: 4px;
  overflow: hidden;
}
.w-param-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}
.w-param-fill.blue { background: linear-gradient(90deg, #42a5f5, #1e88e5); }
.w-param-fill.gray { background: linear-gradient(90deg, #90a4ae, #546e7a); }

/* ── Alerts ── */
.w-alert {
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: w-alert-slide 0.5s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
}
@keyframes w-alert-slide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.w-alert-danger {
  background: linear-gradient(135deg, rgba(229,57,53,0.12), rgba(229,57,53,0.04));
  border-right: 4px solid #e53935;
}
.w-alert-warning {
  background: linear-gradient(135deg, rgba(255,160,0,0.12), rgba(255,160,0,0.04));
  border-right: 4px solid #ffa000;
}
.w-alert-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
}
.w-alert-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}
.w-alert-msg {
  font-size: 12.5px;
  line-height: 1.7;
  opacity: 0.85;
}

/* ── Tips ── */
.w-tips-card, .w-chart-card, .w-forecast-card {
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--card-bg, rgba(255,255,255,0.03));
}
.w-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.w-section-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.w-section-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.w-section-icon.green { background: rgba(76,175,80,0.15); color: #4caf50; }
.w-section-icon.blue { background: rgba(66,165,245,0.15); color: #42a5f5; }
.w-section-icon.orange { background: rgba(255,152,0,0.15); color: #ff9800; }

.w-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
  animation: w-tip-in 0.4s ease backwards;
}
.w-tip-item:nth-child(1) { animation-delay: 0.1s; }
.w-tip-item:nth-child(2) { animation-delay: 0.2s; }
.w-tip-item:nth-child(3) { animation-delay: 0.3s; }
.w-tip-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes w-tip-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.w-tip-icon {
  font-size: 22px;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76,175,80,0.1);
  border-radius: 10px;
  flex-shrink: 0;
}
.w-tip-text {
  font-size: 13px;
  line-height: 1.8;
  flex: 1;
}

/* ── Chart ── */
.w-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.w-chart-scroll canvas {
  min-width: 600px;
  width: 100%;
  height: 220px;
}
.w-chart-scroll::-webkit-scrollbar { height: 4px; }
.w-chart-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 4px; }
.w-chart-scroll::-webkit-scrollbar-thumb { background: rgba(76,175,80,0.3); border-radius: 4px; }

/* ── Forecast ── */
.w-fc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.w-fc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform 0.2s, background 0.2s;
  animation: w-fc-in 0.4s ease backwards;
}
.w-fc-item:nth-child(1) { animation-delay: 0.05s; }
.w-fc-item:nth-child(2) { animation-delay: 0.1s; }
.w-fc-item:nth-child(3) { animation-delay: 0.15s; }
.w-fc-item:nth-child(4) { animation-delay: 0.2s; }
.w-fc-item:nth-child(5) { animation-delay: 0.25s; }
@keyframes w-fc-in {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: translateX(0); }
}
.w-fc-item:active { transform: scale(0.98); }
.w-fc-day {
  font-size: 13px;
  font-weight: 700;
  min-width: 65px;
}
.w-fc-icon {
  font-size: 26px;
  width: 36px;
  text-align: center;
}
.w-fc-temps {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.w-fc-max {
  font-size: 15px;
  font-weight: 700;
}
.w-fc-min {
  font-size: 13px;
  opacity: 0.45;
}
.w-fc-bar-wrap {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  max-width: 80px;
}
.w-fc-bar {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #42a5f5, #4caf50, #ff9800);
  transition: width 1s ease 0.3s;
}
.w-fc-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  opacity: 0.5;
}

/* ── Footer ── */
.w-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 20px;
}
.w-source-tag {
  font-size: 11px;
  opacity: 0.35;
  display: flex;
  align-items: center;
  gap: 4px;
}
.w-refresh-btn {
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.2);
  color: #4caf50;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s;
}
.w-refresh-btn:active {
  transform: scale(0.95);
  background: rgba(76,175,80,0.2);
}
.w-refresh-btn i {
  transition: transform 0.5s;
}
.w-refresh-btn:active i {
  transform: rotate(180deg);
}

/* ── Light Theme ── */
[data-theme="light"] .w-hero-card { background: rgba(255,255,255,0.8); }
[data-theme="light"] .w-hero-temp {
  background: linear-gradient(135deg, #2e7d32, #4caf50);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .w-param { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .w-tips-card,
[data-theme="light"] .w-chart-card,
[data-theme="light"] .w-forecast-card { background: rgba(255,255,255,0.7); }
[data-theme="light"] .w-alert-danger { background: linear-gradient(135deg,#fff0f0,#fff5f5); }
[data-theme="light"] .w-alert-danger .w-alert-title { color: #c62828; }
[data-theme="light"] .w-alert-warning { background: linear-gradient(135deg,#fff8e1,#fffde7); }
[data-theme="light"] .w-alert-warning .w-alert-title { color: #e65100; }
[data-theme="light"] .w-tip-item { background: rgba(0,0,0,0.02); }
[data-theme="light"] .w-fc-item { background: rgba(0,0,0,0.02); }
[data-theme="light"] .w-orb { opacity: 0.15; }











.sb-it-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sb-it-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-preview{font-size:11px;opacity:0.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.msg-img{margin-top:8px}
.msg-img img{max-width:250px;max-height:200px;border-radius:12px;cursor:pointer}








.typing-hint {
  font-size: 11px;
  color: var(--txt-sub, #888);
  margin: 6px 0 0 0;
  opacity: 0.7;
  animation: hintFade 2s ease-in-out infinite;
}
@keyframes hintFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}




.sb-copy {
  padding: 16px 20px;
  margin-top: auto;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 10px;
  color: var(--txt-sub, #888);
  text-align: center;
  line-height: 1.8;
  opacity: 0.6;
}
.sb-copy small {
  color: #ef5350;
  font-weight: 600;
  font-size: 9px;
}

/* --- انیمیشن فکر کردن چت --- */
.ai-thinking {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ac);
    font-weight: 600;
    padding: 4px 0;
}
.ai-thinking .dot {
    width: 6px; height: 6px;
    background: var(--ac);
    border-radius: 50%;
    animation: thinkingBounce 1.2s infinite ease-in-out both;
}
.ai-thinking .dot:nth-child(1) { animation-delay: -0.32s; }
.ai-thinking .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes thinkingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* --- دکمه توقف --- */
.ch-send.stop-btn {
    background: var(--rd); /* رنگ قرمز */
    border-radius: 12px; /* مربعی شدن دکمه */
    animation: pulseStop 1.5s infinite;
}
.ch-send.stop-btn:hover {
    background: #dc2626;
    transform: scale(0.95);
}
@keyframes pulseStop {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- لودر هوش مصنوعی در آب و هوا --- */
.w-ai-loading {
    padding: 15px;
    text-align: center;
    font-size: 12px;
    color: var(--ac);
    background: rgba(16, 185, 129, 0.05);
    border-radius: 12px;
    border: 1px dashed rgba(16, 185, 129, 0.3);
    animation: fadeIn 0.5s ease;
}
.w-ai-loading i {
    margin-left: 8px;
    font-size: 16px;
}

/* --- پیش بینی ساعتی ارتقا یافته --- */
.w-chart-card {
    background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.w-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-top: 10px;
}
#w-hourly-chart {
    border-radius: 12px;
    /* این افکت باعث می‌شود نمودار در موبایل زیباتر دیده شود */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); 
}
[data-theme="light"] #w-hourly-chart {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05));
}


/* --- انیمیشن تفکر فوق مدرن (بدون متن) --- */
.modern-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    height: 24px;
}
.modern-typing .t-dot {
    width: 8px; 
    height: 8px;
    background-color: var(--ac);
    border-radius: 50%;
    opacity: 0.4;
    animation: typePulse 1.4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-typing .t-dot:nth-child(1) { animation-delay: 0ms; }
.modern-typing .t-dot:nth-child(2) { animation-delay: 150ms; }
.modern-typing .t-dot:nth-child(3) { animation-delay: 300ms; }

@keyframes typePulse {
    0%, 100% { opacity: 0.4; transform: translateY(0) scale(0.8); }
    50% { opacity: 1; transform: translateY(-4px) scale(1.1); box-shadow: 0 4px 8px var(--acg); }
}

/* --- افکت تایپ نرم برای حباب هوش مصنوعی --- */
/* این استایل باعث می‌شود متن‌های جدیدی که به چت اضافه می‌شوند به صورت نرم (Fade-in) ظاهر شوند */
.msg-ai .msg-body {
    transition: all 0.1s ease-out;
}

/* --- استایل متن انتظار زیر انیمیشن چت --- */
.modern-typing-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.typing-wait-text {
    font-size: 10px;
    color: var(--tx3);
    opacity: 0.6;
    animation: waitTextPulse 2s infinite ease-in-out;
}
@keyframes waitTextPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
/* ═══════════════════════════════════
   PRO WEATHER UI V2
   ═══════════════════════════════════ */

/* --- Main Scroll container --- */
#p-weather .scr {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Hero Card (Current Weather) --- */
.w-hero-pro {
    border-radius: 28px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 230px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}
.w-hero-bg-pro {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    z-index: -1;
    transition: background 0.5s;
}
.dark-theme .w-hero-bg-pro {
    background: linear-gradient(135deg, #1f2937, #374151);
}
.w-hero-top-pro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.w-hero-location-pro {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}
.w-hero-icon-pro {
    font-size: 44px;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.w-hero-main-pro {
    text-align: center;
    margin-top: -15px; /* Fine-tune position */
}
.w-hero-temp-pro {
    font-size: clamp(4rem, 18vw, 5.5rem); /* Responsive font size */
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.w-hero-desc-pro {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 5px;
    letter-spacing: 0.5px;
}
.w-hero-footer-pro {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.85;
}
.w-hero-footer-pro .separator {
    opacity: 0.6;
}

/* --- Parameters Grid --- */
.w-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.w-param-card-pro {
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.w-param-header-pro {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--c-text-sub);
    font-weight: 500;
}
.w-param-header-pro i {
    font-size: 16px;
    width: 18px;
    text-align: center;
    opacity: 0.8;
}
.w-param-value-pro {
    font-size: clamp(1rem, 4vw, 1.1rem); /* Responsive font */
    font-weight: 600;
    text-align: right;
    color: var(--c-text);
    word-break: keep-all;
    white-space: nowrap;
}

/* --- Parameter Bars --- */
.w-param-bar-wrapper {
    width: 100%;
    height: 6px;
    background-color: var(--c-bg-h);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.w-param-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease-out;
}

/* Fix for icons in the daily forecast */
.w-fc-icon i {
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


/* ===========================================
   TOAST NOTIFICATION FIX
   =========================================== */
.tst {
    background: rgba(25, 35, 50, 0.9); /* رنگ پس‌زمینه تیره و نیمه‌شفاف */
    color: #fff; /* متن سفید و خوانا */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* ===========================================
   FINAL SLIDER WEATHER TIPS (V4)
   =========================================== */

/* Main glass card for the entire tips section */
#w-tips.w-tips-card {
    padding-top: 16px; /* Space for the title */
}

/* Horizontal scroll container */
#w-tips-list {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 4px 20px 16px 20px; /* Padding to see shadows and prevent touching edges */
    scroll-snap-type: x mandatory;
    clip-path: inset(0 -20px 0 -20px); /* Prevents shadows from being cut off by padding */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#w-tips-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Define the fade-in animation */
@keyframes fadeInTip {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Tip Card Style */
.w-tip-final-card {
    flex: 0 0 100%; /* Each card takes the full width of the container */
    scroll-snap-align: center; /* Center the card when scrolling */
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    gap: 16px;
    padding: 20px;
    border-radius: 18px;
    background-color: rgba(var(--c-bg-rgb), 0.5);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    opacity: 0;
    transform: scale(0.95);
    animation: fadeInTip 0.5s ease-out forwards;
}

.w-tip-final-icon {
    font-size: 24px;
    text-align: center;
    color: var(--c-green);
}

.w-tip-final-text {
    font-size: 14px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--c-text);
    text-align: center;
}

/* --- NEW: Slider Navigation --- */
.w-tip-nav-pro {
    padding: 0 16px 12px 16px;
}

.w-tip-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 20px;
    margin-bottom: 8px;
}

.w-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-border);
    transition: all 0.3s ease;
}

.w-tip-dot.active {
    background: var(--c-green);
    width: 24px;
    border-radius: 4px;
}

.w-tip-swipe-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--c-text-sub);
    opacity: 0;
    animation: fadeInTip 0.5s 1s ease-out forwards; /* Fades in after 1 second */
}


/* ===========================================
   USER REVIEWS PAGE UI
   =========================================== */
#p-reviews .scr {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rv-hero {
    border-radius: 24px;
    padding: 24px;
    text-align: center;
}
.rv-hero-icon {
    font-size: 32px;
    color: var(--c-green);
    margin-bottom: 12px;
}
.rv-hero h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--c-text);
}
.rv-hero p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-sub);
    max-width: 400px;
    margin: 0 auto;
}

/* --- Review Form --- */
.rv-form-card {
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rv-form-card h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.rv-rating-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.rv-stars {
    direction: ltr; /* Stars should be LTR */
    display: flex;
    gap: 8px;
}
.rv-stars i {
    font-size: 26px;
    color: #f59e0b; /* Yellow star color */
    cursor: pointer;
    transition: transform 0.2s;
}
.rv-stars i:hover {
    transform: scale(1.2);
}
#rv-comment {
    width: 100%;
    min-height: 100px;
    border-radius: 12px;
    padding: 12px;
    background: var(--c-bg-h);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    resize: vertical;
}

/* --- Review List --- */
.rv-list-header {
    padding: 0 8px;
    margin-top: 16px;
}
.rv-list-header h3 {
    font-size: 18px;
    font-weight: 600;
}
.rv-list-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rv-loading {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: var(--c-text-sub);
}

/* --- Individual Review Card --- */
.rv-card {
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rv-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rv-user-info {
    font-weight: 600;
    font-size: 15px;
}
.rv-card-rating {
    direction: ltr;
    display: flex;
    gap: 4px;
}
.rv-card-rating i {
    font-size: 14px;
    color: #f59e0b;
}
.rv-comment-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-sub);
    padding-top: 8px;
    border-top: 1px solid var(--c-border);
}
/* ========================================================
   CSS for MINIMAL & MODERN CONTEXTUAL LIMITS (v2)
   ======================================================== */

.limit-display-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0 auto 12px auto; /* فاصله از پایین */
    width: fit-content;

    background: rgba(40, 42, 54, 0.6); /* پس‌زمینه نیمه‌شفاف تیره‌تر */
    backdrop-filter: blur(8px);      /* افکت بلوری شیشه‌ای */
    -webkit-backdrop-filter: blur(8px);
    
    border-radius: 50px; /* کاملا گرد */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    font-size: 0.85rem; /* کمی بزرگتر برای خوانایی */
    color: #e0e0e0; /* رنگ متن خواناتر */
    font-weight: 500;
    
    transition: opacity 0.4s ease, transform 0.4s ease;
    
    /* حالت پیش‌فرض: مخفی */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.limit-display-wrapper.visible {
    /* حالت نمایان با انیمیشن */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.limit-display-wrapper span {
    display: flex;
    align-items: center;
    gap: 6px; /* فاصله آیکون و متن */
}

/* استایل بخش عددی */
.limit-display-wrapper strong {
    background-color: #f8f8f2; /* پس‌زمینه سفید */
    color: #282a36; /* متن تیره */
    padding: 2px 9px;
    border-radius: 15px;
    font-weight: 700;
    margin-right: 4px; /* کمی فاصله از متن */
}
/* ========================================================
   [جایگزین شود] - استایل جدید نمایشگر محدودیت (پیشنهادی)
   ======================================================== */

.limit-display-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 5px 12px; /* کمی باریک‌تر */
    margin: 0 auto 8px auto; /* فاصله 8px از پایین */
    width: fit-content;

    background: #282a36;      /* رنگ پس‌زمینه ثابت و زیبا (از تم دراکولا) */
    /* backdrop-filter: blur(8px); <-- حذف افکت بلور */
    
    border-radius: 50px;
    border: 1px solid #44475a; /* یک حاشیه مشخص‌تر */
    
    font-size: 0.8rem; /* کمی کوچک‌تر و مینیمال‌تر */
    color: #f8f8f2;   /* رنگ متن سفید */
    font-weight: 500;
    
    transition: opacity 0.4s ease, transform 0.4s ease;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.limit-display-wrapper.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.limit-display-wrapper span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.limit-display-wrapper strong {
    background-color: #44475a; /* رنگ پس‌زمینه جدید برای عدد */
    color: #50fa7b;           /* رنگ سبز فسفری برای عدد */
    padding: 2px 9px;
    border-radius: 15px;
    font-weight: 700;
    margin-right: 4px;
}