/* Jedan Brko chat. Ista kartica na #app i na rezervnom korijenu. */
#ziher-brko-root{
  --bg:#060a15; --card:#0c1327; --card2:#101a33; --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --fg:#e8ecf5; --mut:#8c97ae; --mut2:#66718b;
  --green:#22c08a; --gsoft:rgba(34,192,138,.13); --ink:#04120c;
  --orange:#f5a30a;
  --ring1:#cfd6ea; --ring2:#97a1bf; --ring3:#5f6a8a;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--fg); font-family:var(--font); font-size:15px; line-height:1.5;
}
#app .brko-ring,
#ziher-brko-root .brko-ring{
  --size:60px; display:inline-block; position:relative; width:var(--size); height:var(--size); border-radius:50%;
  padding:max(2px,calc(var(--size)*.035)); flex:none;
  background:conic-gradient(from 210deg,var(--ring1),var(--ring2),var(--ring3),var(--ring2),var(--ring1));
  box-shadow:0 0 0 calc(var(--size)*.05) color-mix(in srgb,var(--ring2) 14%,transparent),0 calc(var(--size)*.15) calc(var(--size)*.4) calc(var(--size)*-.12) var(--ring2);
}
#app .brko-ring::before,
#ziher-brko-root .brko-ring::before{
  content:""; position:absolute; inset:max(2px,calc(var(--size)*.035)); border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#17503f 0,#0c202b 56%,#091020 100%);
}
#app .brko-ring img,
#ziher-brko-root .brko-ring img{
  position:absolute; left:50%; top:50%; width:84%; height:auto; max-width:none; display:block; transform:translate(-50%,-50%);
  border-radius:0; background:transparent;
}
#app .brko-ring.none,
#ziher-brko-root .brko-ring.none{ background:none; border:2px dashed var(--mut2); box-shadow:none; padding:0; }
#app .brko-ring.none::before,
#ziher-brko-root .brko-ring.none::before{ inset:0; }
#app .brko-ring.none img,
#ziher-brko-root .brko-ring.none img{ filter:saturate(.75) brightness(.9); }
#app .medal,
#ziher-brko-root .medal{ position:absolute; right:-3%; bottom:-6%; width:30%; line-height:0; filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
#app .medal svg,
#ziher-brko-root .medal svg{ width:100%; height:auto; }
#app .brko-ring.none .medal,
#ziher-brko-root .brko-ring.none .medal{ display:none; }
#app .fab,
#ziher-brko-root .fab{
  line-height:0; position:fixed; right:max(16px,env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:50; border:0; background:none; padding:0; cursor:pointer; border-radius:50%;
  transition:transform .2s, opacity .2s; -webkit-appearance:none; appearance:none; box-shadow:none;
}
#app .fab:hover,
#ziher-brko-root .fab:hover{ transform:translateY(-2px); }
#app .fab[hidden],
#ziher-brko-root .fab[hidden]{ display:none; }
#app .scrim,
#ziher-brko-root .scrim{
  position:fixed; inset:0; z-index:95; background:rgba(2,4,10,.6); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
#app .scrim.on,
#ziher-brko-root .scrim.on{ opacity:1; pointer-events:auto; }
#app .sheet.chat,
#ziher-brko-root .sheet.chat{
  position:fixed; z-index:96; display:flex; flex-direction:column; overflow:hidden; visibility:hidden;
  background:var(--card); border:1px solid var(--line2); box-shadow:0 30px 80px rgba(0,0,0,.6);
  width:min(400px,100%); top:auto; height:min(640px,100%);
  right:max(16px,env(safe-area-inset-right,0px)); bottom:max(16px,env(safe-area-inset-bottom,0px));
  border-radius:24px; transform:translateY(20px) scale(.96); opacity:0; transform-origin:bottom right;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
#app .sheet.chat.on,
#ziher-brko-root .sheet.chat.on{ transform:none; opacity:1; visibility:visible; }
#app .sheet.chat .grab,
#ziher-brko-root .sheet.chat .grab{ display:none; width:40px; height:4px; border-radius:4px; background:var(--line2); margin:10px auto 0; flex:none; }
#app .sheet.chat .sh-h,
#ziher-brko-root .sheet.chat .sh-h{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none; }
#app .sheet.chat .sh-h .tt,
#ziher-brko-root .sheet.chat .sh-h .tt{ min-width:0; flex:1; }
#app .sheet.chat .sh-h .tt b,
#ziher-brko-root .sheet.chat .sh-h .tt b{ display:block; font-size:16px; font-weight:700; }
#app .sheet.chat .sh-h .tt span,
#ziher-brko-root .sheet.chat .sh-h .tt span{ font-size:12px; color:var(--mut); }
#app .sheet.chat .x,
#ziher-brko-root .sheet.chat .x{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:12px;
  background:rgba(255,255,255,.05); color:var(--mut); cursor:pointer;
}
#app .sheet.chat .x:hover,
#ziher-brko-root .sheet.chat .x:hover{ color:var(--fg); }
#app .sheet.chat .sh-b,
#ziher-brko-root .sheet.chat .sh-b{
  overflow-y:auto; padding:16px; display:grid; gap:16px; align-content:start; flex:1 1 auto; min-height:0; overscroll-behavior:contain;
}
#app .sheet.chat .sh-b.brko-qr,
#ziher-brko-root .sheet.chat .sh-b.brko-qr{ flex:none; padding-top:0; overflow:visible; }
#app .msgs,
#ziher-brko-root .msgs{ display:grid; gap:10px; }
#app .msg,
#ziher-brko-root .msg{ display:flex; gap:8px; align-items:flex-end; max-width:88%; }
#app .msg .bub,
#ziher-brko-root .msg .bub{
  padding:10px 14px; border-radius:18px 18px 18px 6px; background:var(--card2); border:1px solid var(--line); font-size:14px;
}
#app .msg.me,
#ziher-brko-root .msg.me{ margin-left:auto; flex-direction:row-reverse; }
#app .msg.me .bub,
#ziher-brko-root .msg.me .bub{ border-radius:18px 18px 6px 18px; background:rgba(34,192,138,.16); border-color:rgba(34,192,138,.3); }
#app .av,
#ziher-brko-root .av{ --size:28px; }
#app .av.me,
#ziher-brko-root .av.me{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%; padding:2px; flex:none;
  background:conic-gradient(from 210deg,var(--ring1),var(--ring2),var(--ring3),var(--ring1));
}
#app .av.me span,
#ziher-brko-root .av.me span{
  display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#123b2d; font-size:12px; font-weight:800;
}
#app .av-sp,
#ziher-brko-root .av-sp{ width:28px; flex:none; }
#app .qr,
#ziher-brko-root .qr{ display:flex; flex-wrap:wrap; gap:8px; }
#app .qr button,
#ziher-brko-root .qr button{
  min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line2); background:transparent;
  font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:var(--fg);
}
#app .qr button.lock,
#ziher-brko-root .qr button.lock{ color:var(--mut); }
#app .qr button.lock svg,
#ziher-brko-root .qr button.lock svg{ color:var(--orange); }
#app .compose,
#ziher-brko-root .compose{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); flex:none; }
#app .compose input,
#ziher-brko-root .compose input{
  flex:1; min-width:0; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line2); background:var(--bg); color:var(--fg);
}
#app .compose input:disabled,
#ziher-brko-root .compose input:disabled{ opacity:.6; }
#app .compose .btn,
#ziher-brko-root .compose .btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px; border-radius:12px; border:0; cursor:pointer;
}
#app .compose .btn.g,
#ziher-brko-root .compose .btn.g{ background:var(--green); color:var(--ink); }
#app .compose .btn[disabled],
#ziher-brko-root .compose .btn[disabled]{ opacity:.55; cursor:not-allowed; }
#app .sheet.chat .sr,
#ziher-brko-root .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#app[data-plan="premium"] [data-show]:not([data-show~="premium"]),
#app[data-plan="free"] [data-show]:not([data-show~="free"]),
#app[data-plan="anon"] [data-show]:not([data-show~="anon"]),
#ziher-brko-root[data-plan="premium"] [data-show]:not([data-show~="premium"]),
#ziher-brko-root[data-plan="free"] [data-show]:not([data-show~="free"]),
#ziher-brko-root[data-plan="anon"] [data-show]:not([data-show~="anon"]){ display:none !important; }
@media (max-width:760px){
  #app .sheet.chat,
  #ziher-brko-root .sheet.chat{
    top:auto; left:0; right:0; bottom:0; width:100%; height:88%; max-height:820px;
    border-radius:24px 24px 0 0; transform:translateY(105%); opacity:1;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #app .sheet.chat.on,
  #ziher-brko-root .sheet.chat.on{ transform:none; }
  #app .sheet.chat .grab,
  #ziher-brko-root .sheet.chat .grab{ display:block; }
}
@media (max-width:900px){
  body.zm-page #app .fab,
  body.ziher-mn-v2 #app .fab{ z-index:70; bottom:calc(88px + env(safe-area-inset-bottom)); }
}
body.ziher-mn-v2 #app .fab{ z-index:70; }
#brko-toast{
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:120;
  transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.25s;
  background:#e8ecf5; color:#060a15; font-weight:600; font-size:14px; padding:10px 16px; border-radius:12px;
  text-align:center; width:max-content; max-width:min(560px,calc(100% - 32px));
}
#brko-toast.on{ opacity:1; transform:translate(-50%,0); }