/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#d9eacb;color:#1a1a1a}
button{font:inherit;border:0;background:0;cursor:pointer;color:inherit}
input,textarea{font:inherit;border:0;outline:0;background:0;color:inherit}
.hidden{display:none!important}

/* Screens */
.screen{display:none;height:100%}
.screen.show{display:flex}

/* LOGIN */
#login{flex-direction:column;justify-content:center;align-items:center;padding:24px;min-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.box{width:100%;max-width:320px;text-align:center}
.logo{width:64px;height:64px;margin:0 auto 16px;background:#F7A84C;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
h1{font-size:22px;margin-bottom:6px}
.sub{color:#5a6b50;font-size:13px;margin-bottom:20px}

#form-login{display:flex;flex-direction:column;gap:10px}
#form-login input{height:46px;background:#fff;border-radius:10px;padding:0 16px;font-size:15px}
#form-login input::placeholder{color:#999}
#form-login button{height:46px;background:#2993ff;color:#fff;border-radius:10px;font-weight:600;font-size:15px;margin-top:4px}
#form-login button:active{opacity:.8}
#form-login button:disabled{opacity:.5}

.link{display:block;width:100%;margin-top:14px;background:0;color:#2993ff;font-size:13px;padding:8px}
.msg{color:#c00;font-size:13px;min-height:18px;margin-top:12px}
.msg.ok{color:#2d6a1f}

/* LOADING */
#loading{flex-direction:column;justify-content:center;align-items:center}
.spin{width:36px;height:36px;border:3px solid rgba(0,0,0,.1);border-top-color:#2993ff;border-radius:50%;animation:s 0.8s linear infinite;margin-bottom:14px}
@keyframes s{to{transform:rotate(360deg)}}

/* APP */
#app{flex-direction:column;position:relative}

.hdr{background:#fff;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 6px rgba(0,0,0,.06);z-index:20}
.hdr-l{display:flex;align-items:center;gap:10px}
.av{width:38px;height:38px;background:#F7A84C;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.hdr-l h2{font-size:16px;font-weight:600;line-height:1.2}
.hdr-l span{font-size:12px;color:#888}
.hdr-r{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#ccc}
.dot.on{background:#22c55e}
.icbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#444}
.icbtn:active{background:#eee}

/* Drawer */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.ov.show{opacity:1;pointer-events:auto}
.dr{position:fixed;top:0;right:-260px;width:240px;height:100%;background:#fff;z-index:50;transition:right .25s;box-shadow:-4px 0 16px rgba(0,0,0,.15);display:flex;flex-direction:column}
.dr.open{right:0}
.drh{background:#2993ff;color:#fff;padding:22px 18px}
.drh h3{font-size:18px;margin-bottom:2px}
.drh p{font-size:12px;opacity:.85}
.dr nav{padding:8px 0;flex:1;overflow-y:auto}
.mi{display:flex;align-items:center;gap:12px;padding:12px 18px;width:100%;text-align:left;font-size:14px;font-weight:500}
.mi:active,.mi.on{background:#f0f0f0}
.mi svg{color:#666;flex-shrink:0}
.mi.on svg{color:#2993ff}
.mi.danger{color:#c00}
.mi.danger svg{color:#c00}
.line{height:1px;background:#e5e7eb;margin:6px 14px}

/* Main */
main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.view{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.view.on{display:flex}

/* Chat */
.chatbg{flex:1;overflow-y:auto;padding:12px;background:linear-gradient(rgba(213,231,199,.92),rgba(213,231,199,.92)),url("https://www.transparenttextures.com/patterns/cartographer.png")}
.day{display:flex;justify-content:center;margin:6px 0 14px}
.day span{background:#6f8d7d;color:#fff;padding:3px 10px;border-radius:14px;font-size:11px}
#msgs{display:flex;flex-direction:column;gap:6px}
.m{max-width:78%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.4;word-wrap:break-word;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.m.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.m.user{align-self:flex-end;background:#E4FFD6;border-bottom-right-radius:4px}
.m.sys{align-self:center;background:#6f8d7d;color:#fff;font-size:11px;padding:3px 10px;border-radius:12px;box-shadow:none;max-width:90%}
.fbar{background:#fff;padding:8px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 -1px 6px rgba(0,0,0,.04)}
#ci{flex:1;height:40px;background:#f2f2f2;border-radius:20px;padding:0 14px;font-size:14px}
.snd{width:40px;height:40px;background:#2993ff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.snd:active{opacity:.8}

/* Lists */
.listbg{flex:1;overflow-y:auto;padding:10px;background:linear-gradient(rgba(213,231,199,.92),rgba(213,231,199,.92)),url("https://www.transparenttextures.com/patterns/cartographer.png")}
.li{background:#fff;border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.li h{font-size:14px;font-weight:600;margin-bottom:3px;word-break:break-word}
.li m{font-size:11px;color:#888;display:block;margin-bottom:6px}
.li b{font-size:13px;color:#444;display:block;line-height:1.4}
.li .act{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}
.li .act button{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:600}
.be{background:#f2f2f2;color:#444}
.bd{background:#fdeaea;color:#c00}
.empty{text-align:center;padding:40px 16px;color:#6b7d60;font-size:14px}

/* Settings */
.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.row:last-of-type{border-bottom:0;margin-bottom:14px}
.lobtn{width:100%;padding:11px;background:#fdeaea;color:#c00;border-radius:10px;font-size:14px;font-weight:600}
.lobtn:active{background:#fbd5d5}

/* Call */
.call{position:fixed;inset:0;background:#1a1a2e;z-index:1000;display:flex;align-items:center;justify-content:center}
.cb{text-align:center;color:#fff;padding:30px;max-width:300px}
.call .ca{width:72px;height:72px;margin:0 auto 20px;background:#F7A84C;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;animation:p 1.5s ease-in-out infinite}
.call.connected .ca{background:#22c55e;animation:p 1.2s ease-in-out infinite}
.call.speaking .ca{background:#2993ff;box-shadow:0 0 0 12px rgba(41,147,255,.25);animation:speak 0.8s ease-in-out infinite}
@keyframes speak{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes p{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.cb h2{font-size:22px;margin-bottom:8px}
.cb p{color:rgba(255,255,255,.7);margin-bottom:36px;font-size:14px;line-height:1.4}
.cbtns{display:flex;gap:12px;justify-content:center}
.call.speaking .cbtns,.call.connected .cbtns{display:none}
.ok{padding:12px 24px;background:#22c55e;color:#fff;border-radius:10px;font-size:14px;font-weight:600}
.ok:active{background:#16a34a}
.no{padding:12px 24px;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;font-size:14px;font-weight:600}

/* Modal */
.modal{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;justify-content:center}
.mbg{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.mc{position:relative;width:100%;max-width:480px;background:#fff;border-radius:16px 16px 0 0;padding:18px;animation:su .2s}
@keyframes su{from{transform:translateY(20px)}to{transform:translateY(0)}}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mh h3{font-size:16px;font-weight:600}
.x{width:30px;height:30px;font-size:22px;color:#999;display:flex;align-items:center;justify-content:center}
label{display:block;font-size:12px;font-weight:600;color:#666;margin:10px 0 5px}
.inp{width:100%;background:#f8f8f8;border:1px solid #e5e5e5;border-radius:9px;padding:10px 12px;font-size:14px}
.inp:focus{border-color:#2993ff}
.mfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.bpri{padding:9px 18px;background:#2993ff;color:#fff;border-radius:9px;font-size:13px;font-weight:600}
.bsec{padding:9px 18px;background:#f2f2f2;color:#444;border-radius:9px;font-size:13px;font-weight:600}

@media (min-width:640px){
.modal{align-items:center;padding:20px}
.mc{border-radius:16px}
}
/* CHIPS */
.chips{display:flex;gap:6px;padding:6px 8px;background:#fff;border-top:1px solid #f0f0f0;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:6px 12px;background:#f2f2f2;color:#444;border-radius:14px;font-size:12px;font-weight:500;white-space:nowrap}
.chip:active{background:#e0e0e0}

/* SWITCH */
.sw{width:40px;height:22px;background:#ccc;border-radius:11px;position:relative;transition:background .2s}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s}
.sw.on{background:#22c55e}
.sw.on::after{left:20px}

/* SETTINGS TITLES */
.ct{font-size:12px;font-weight:700;color:#5a6b50;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.arr{color:#999;font-size:18px}

/* HELP */
.hb{padding:0 4px 4px;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hb h4{font-size:13px;font-weight:700;color:#1a1a1a;margin:14px 0 6px}
.hb p{font-size:14px;color:#444;line-height:1.5;margin-bottom:8px}
.hb p b{color:#1a1a1a}
.hb ul{list-style:none;padding:0;margin:0 0 8px}
.hb li{padding:6px 10px;background:#f8f8f8;border-radius:6px;font-size:13px;color:#444;margin-bottom:4px;font-style:italic}

/* DARK THEME */
body.dark{background:#0a0a09;color:#f4f4f5}
body.dark #app .hdr{background:#1a1a1a;color:#f4f4f5}
body.dark #app .hdr .icbtn{color:#ccc}
body.dark #app .av{background:#F7A84C}
body.dark #app .hdr-l h2{color:#f4f4f5}
body.dark #app .hdr-l span{color:#888}
body.dark .chatbg,body.dark .listbg{background:linear-gradient(rgba(20,25,30,.92),rgba(20,25,30,.92)),url("https://www.transparenttextures.com/patterns/cartographer.png")}
body.dark .m.bot{background:#2a2a2a;color:#f4f4f5;border-bottom-left-radius:4px}
body.dark .m.user{background:#0d3a1f;color:#d4f4dd}
body.dark .fbar{background:#1a1a1a;border-top:1px solid #2a2a2a}
body.dark #ci{background:#2a2a2a;color:#f4f4f5}
body.dark .chips{background:#1a1a1a;border-top-color:#2a2a2a}
body.dark .chip{background:#2a2a2a;color:#ccc}
body.dark .li{background:#1a1a1a;color:#f4f4f5}
body.dark .li h{color:#f4f4f5}
body.dark .li m{color:#888}
body.dark .li b{color:#ccc}
body.dark .li .act .be{background:#2a2a2a;color:#ccc}
body.dark .li .act .bd{background:#3a1a1a;color:#f88}
body.dark .card{background:#1a1a1a;color:#f4f4f5}
body.dark .row{border-color:#2a2a2a}
body.dark .empty{color:#888}
body.dark .lobtn{background:#3a1a1a;color:#f88}
body.dark .ct{color:#888}
body.dark .dr{background:#1a1a1a}
body.dark .mi{color:#f4f4f5}
body.dark .mi.on,body.dark .mi:active{background:#2a2a2a}
body.dark .mi svg{color:#888}
body.dark .line{background:#2a2a2a}
body.dark .inp{background:#2a2a2a;border-color:#333;color:#f4f4f5}
body.dark .hb p,body.dark .hb p b{color:#ccc}
body.dark .files-toolbar{background:#1a1a1a;border-color:#2a2a2a}
body.dark .view-toggle{background:#2a2a2a}
body.dark .vt-btn{color:#aaa}
body.dark .vt-btn.on{background:#333;color:#f4f4f5}
body.dark #l-files[data-view="gallery"] .gal-img{background-color:#333}
body.dark #l-files[data-view="gallery"] .gal-hint{background:rgba(30,30,30,.9);color:#aaa}

/* FILES TOOLBAR */
.files-toolbar{background:#fff;padding:8px 12px;display:flex;justify-content:flex-end;border-bottom:1px solid #f0f0f0;flex-shrink:0}
.view-toggle{display:flex;background:#f2f2f2;border-radius:8px;padding:3px;gap:2px}
.vt-btn{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600;color:#666}
.vt-btn.on{background:#fff;color:#1a1a1a;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* GALLERY */
#l-files[data-view="gallery"]{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  padding:10px;
  align-content:start;
}
#l-files[data-view="list"]{
  display:block;
  padding:10px;
}
#l-files[data-view="gallery"] .gal-item{
  padding:0;
  margin:0;
  overflow:hidden;
  aspect-ratio:1;
  position:relative;
  cursor:pointer;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
#l-files[data-view="gallery"] .gal-img{
  width:100%;
  height:100%;
  min-height:120px;
  background:#e8e8e8 center/cover no-repeat;
  display:block;
}
#l-files[data-view="gallery"] .gal-img.gal-error{
  background:#ddd;
}
#l-files[data-view="gallery"] .gal-overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;
  padding:8px 6px;
  font-size:11px;
  line-height:1.3;
  pointer-events:none;
}
#l-files[data-view="gallery"] .gal-hint{
  grid-column:1/-1;
  text-align:center;
  color:#666;
  font-size:12px;
  padding:8px 4px;
  background:rgba(255,255,255,.7);
  border-radius:8px;
}
#l-files[data-view="list"] .file-item .act{margin-top:8px}
@media(min-width:640px){
  #l-files[data-view="gallery"]{grid-template-columns:repeat(3,1fr)}
}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:2000;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}
.lightbox.hidden{display:none}
.lightbox img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:4px}
.lb-x{position:absolute;top:20px;right:20px;width:42px;height:42px;font-size:28px;color:#fff;background:rgba(255,255,255,.15);border-radius:50%}
.lb-x:active{background:rgba(255,255,255,.25)}
.lb-info{color:#fff;text-align:center;margin-top:14px;font-size:14px}

/* AUDIO RECORDING */
.fbar.recording{background:#fdeaea}
.fbar.recording #btn-mic{background:#ef4444;color:#fff;animation:pulse 1s infinite}
.rec-dot{display:inline-block;width:8px;height:8px;background:#ef4444;border-radius:50%;margin-right:6px;animation:pulse 1s infinite}

/* NOTIF */
.sw.denied{background:#ef4444;opacity:.5}
.sw.granted{background:#22c55e}