/* ===== Unjaan theme v6: Royal Violet (replaces the old yellow/gold) =====
   Change the whole look by editing the --u-* variables below. */
:root{
  --u-1:#8a6bff;      /* gradient start */
  --u-2:#5b3df0;      /* gradient end   */
  --u-solid:#6d4df2;  /* flat accent    */
  --u-soft:rgba(109,77,242,.12);
  --u-glow:rgba(109,77,242,.55);
  --u-on:#ffffff;     /* text on accent */
  --u-grad:linear-gradient(135deg,var(--u-1),var(--u-2));

  --color-emerald-50:#f5f3ff;--color-emerald-100:#ede9fe;--color-emerald-200:#ddd6fe;--color-emerald-300:#c4b5fd;
  --color-emerald-400:#a78bfa;--color-emerald-500:#8b5cf6;--color-emerald-600:#6d4df2;--color-emerald-700:#5b3dd6;
  --color-emerald-800:#4a31ae;--color-emerald-900:#35257f;--color-emerald-950:#1c1448;
  --color-teal-50:#f5f3ff;--color-teal-400:#a78bfa;--color-teal-600:#6d4df2;--color-teal-800:#4a31ae;
  /* cool lavender-tinted neutrals */
  --color-slate-50:#f8f7fc;--color-slate-100:#f0eef8;--color-slate-200:#e3e0f0;--color-slate-300:#cdc9df;
  --color-slate-400:#9f9ab6;--color-slate-500:#78738f;--color-slate-600:#57526e;--color-slate-700:#3b3852;
  --color-slate-800:#262439;--color-slate-900:#171629;--color-slate-950:#0d0c1a;
}
html.dark [class*="090D16"],html.dark [class*="0B1120"],html.dark body{background-color:#0d0c1a!important}
html.dark [class*="070B14"]{background-color:#100f1f!important;background-image:radial-gradient(rgba(139,107,255,.08) 1px,transparent 1px)!important;background-size:22px 22px!important}
html:not(.dark) [class*="bg-slate-50/50"]{background:linear-gradient(180deg,#f7f5ff,#ece8fb)!important}
html:not(.dark) [class*="F8FAFC"]{background-color:#f8f7fc!important}
html.dark body{background:#0d0c1a}

/* Brand logo instead of the "K" tile */
header button.group>div:first-child{
  font-size:0!important;color:transparent!important;width:40px!important;height:40px!important;
  background:#000 url(/logo.png) center/cover no-repeat!important;border:1px solid rgba(139,107,255,.45)!important;
  border-radius:12px!important;box-shadow:0 0 16px rgba(109,77,242,.35)!important;flex-shrink:0}
header span.tracking-\[0\.2em\]{letter-spacing:.22em!important;
  background:linear-gradient(90deg,#a78bfa,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
html:not(.dark) header span.tracking-\[0\.2em\]{background:linear-gradient(90deg,#5b3df0,#7c5cff);-webkit-background-clip:text;background-clip:text}
header{box-shadow:0 1px 0 rgba(109,77,242,.12),0 8px 24px -16px rgba(0,0,0,.5)!important}

/* Chat list rows */
.divide-y>div[class*="cursor-pointer"]{border-radius:16px;margin:3px 8px;width:calc(100% - 16px)!important;transition:background .15s,transform .1s}
.divide-y>div[class*="cursor-pointer"]:active{transform:scale(.985)}
.divide-y>*{border-color:transparent!important}
.divide-y>div[class*="cursor-pointer"] .w-10.h-10{width:3rem!important;height:3rem!important;font-size:1rem!important}
.divide-y>div[class*="cursor-pointer"] .bg-emerald-600,.divide-y>div[class*="cursor-pointer"] .bg-emerald-500{
  background:var(--u-grad)!important;color:var(--u-on)!important;font-weight:700}
.divide-y>div[class*="border-l-4"]{border-left-width:3px!important;border-left-color:var(--u-solid)!important;border-left-style:solid!important}

/* Primary buttons */
button.bg-emerald-600,button[class*="bg-emerald-600"],a.bg-emerald-600{box-shadow:0 6px 20px -8px var(--u-glow)}

/* Messages */
html.dark [class*="bg-white"][class*="rounded-2xl"][class*="border"]{background-color:#1a1930!important;border-color:#2c2a46!important}
/* sent bubble */
[class*="rounded-2xl"][class*="bg-emerald-600"]{background:var(--u-grad)!important;color:var(--u-on)!important;
  box-shadow:0 6px 18px -8px var(--u-glow)!important;border:0!important}
[class*="rounded-2xl"][class*="bg-emerald-600"] [class*="text-"],[class*="rounded-2xl"][class*="bg-emerald-600"] p{color:var(--u-on)!important}
[class*="rounded-2xl"][class*="bg-emerald-600"] [class*="text-emerald"],[class*="rounded-2xl"][class*="bg-emerald-600"] [class*="text-\[1"],
[class*="rounded-2xl"][class*="bg-emerald-600"] [class*="text-\[9"]{color:rgba(255,255,255,.72)!important}
/* received bubble */
html:not(.dark) [class*="bg-white"][class*="rounded-2xl"]{box-shadow:0 2px 10px -4px rgba(60,40,140,.22)}
/* light header / chat header */
html:not(.dark) header,html:not(.dark) [class*="p-3.5"][class*="justify-between"]{background:linear-gradient(180deg,#fff,#f7f5ff)!important}
/* send button */
button[class*="bg-emerald-600"][class*="rounded-full"],button[class*="bg-emerald-600"][class*="rounded-2xl"]{background:var(--u-grad)!important;color:var(--u-on)!important}
button[class*="bg-emerald-600"][disabled],button[class*="bg-emerald-600"]:disabled{opacity:.55!important}

html,body{overflow-x:hidden;max-width:100vw}
[class*="0B1120"],[class*="flex-1"][class*="flex-col"]{min-width:0}
.overflow-y-auto{min-width:0}

/* ---- call popup ---- */
#unj-call{display:none}
#unj-pop{position:fixed;right:12px;z-index:200;min-width:190px;padding:6px;border-radius:18px;
  background:#fff;border:1px solid #e3e0f0;box-shadow:0 18px 40px -10px rgba(20,10,60,.45)}
html.dark #unj-pop{background:#1a1930;border-color:#34325a}
.unj-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;background:transparent;border-radius:12px;
  font:600 14px/1 inherit;color:#241f3d;text-align:left;cursor:pointer}
html.dark .unj-item{color:#f1eefc}
.unj-item svg{color:var(--u-solid);flex-shrink:0}
.unj-item:active{background:var(--u-soft)}
.unj-menu{font-size:12px!important;padding:9px 16px!important;border-radius:0!important;gap:10px}
.unj-menu span{font-weight:500}

/* ---- bottom navigation (mobile only) ---- */
#unj-nav{display:none}

@media (max-width:767px){
  header{padding:8px 12px!important}
  header .max-w-7xl>div:last-child{gap:8px!important;space-x:0}
  header .max-w-7xl>div:last-child>*{margin-left:0!important}
  header .max-w-7xl>div:first-child{min-width:0}
  header span.tracking-\[0\.2em\]{font-size:14px!important;letter-spacing:.14em!important}
  header button{white-space:nowrap}
  header button[class*="bg-emerald-6"]{padding:8px 12px!important;font-size:12px!important}
  /* these live in the bottom bar now; top bar keeps theme + logout */
  header button[title="Search by username"],header button[title="Conversations"],header button[title="Your Profile"],
  header button[title="Settings"],header button[title="Admin Console"]{display:none!important}

  /* bottom bar */
  body.unj-hasnav #unj-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid #e3e0f0;box-shadow:0 -10px 30px -18px rgba(40,20,120,.35)}
  html.dark body.unj-hasnav #unj-nav{background:rgba(20,19,40,.92);border-top-color:#2c2a46}
  #unj-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border:0;background:transparent;
    color:#78738f;font:600 10.5px/1 inherit;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
  html.dark #unj-nav button{color:#9f9ab6}
  #unj-nav button svg{width:22px;height:22px}
  #unj-nav button:active{transform:scale(.94)}
  #unj-nav button.on{color:var(--u-solid);background:var(--u-soft)}
  html.dark #unj-nav button.on{color:#b8a4ff}
  body.unj-hasnav #root{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* list pane */
  .divide-y{padding-bottom:96px}
  button[title="Find user by handle"]{
    position:fixed!important;right:18px;bottom:22px;width:58px!important;height:58px!important;border-radius:9999px!important;
    z-index:60;display:flex;align-items:center;justify-content:center;border:0!important;
    background:var(--u-grad)!important;color:var(--u-on)!important;
    box-shadow:0 10px 30px -6px var(--u-glow),0 0 0 6px var(--u-soft)!important}
  body.unj-hasnav button[title="Find user by handle"]{bottom:calc(82px + env(safe-area-inset-bottom))}
  button[title="Find user by handle"] svg{width:26px;height:26px}

  /* open chat = full-screen, hide the global header */
  #root>div:has(button[title="Encrypted Audio Call"])>div.relative.z-30{display:none!important}
  #root>div:has(button[title="Encrypted Audio Call"]){height:100dvh;min-height:0!important;overflow:hidden}
  #root>div:has(button[title="Encrypted Audio Call"])>div.flex-1{min-height:0;height:100%}

  /* chat header: single clean row */
  div:has(>button[title="Encrypted Audio Call"]),div:has(>button[title="Encrypted Video Call"]){gap:0!important}
  button[title="Encrypted Audio Call"],button[title="Encrypted Video Call"],button[title="View Starred Messages"],
  button[title="Search in this chat"],button[title="Configure Disappearing Messages"]{display:none!important}
  button.group .font-mono{display:none}
  button.group p.text-\[11px\]{white-space:nowrap}
  button.group span.text-sm{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  button.group p.text-\[11px\]>span{display:inline-block;max-width:42vw;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  [class*="p-3.5"][class*="justify-between"]{padding:10px 8px!important}
  #unj-call{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9999px;border:0;margin-right:4px;
    background:var(--u-grad);color:var(--u-on);box-shadow:0 6px 16px -6px var(--u-glow);cursor:pointer}
  #unj-call:active{transform:scale(.94)}
  button[aria-label="Conversation options"]{padding:9px!important}

  /* long-press on a message shows reactions: no native text-selection/callout */
  .unj-msg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

  /* composer */
  [placeholder*="encrypted"]{font-size:14px!important}
  [placeholder*="encrypted"]::placeholder{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header button[title^="Switch"]{margin-left:8px!important}
}
@media (min-width:768px){
  .divide-y>div[class*="cursor-pointer"]{margin:3px 8px}
}

/* ===== v7: responsive polish ===== */
/* empty-state "K" tile -> real logo (all screen sizes) */
.flex-1.items-center.justify-center>div.w-16.h-16.rounded-3xl{
  background:#000 url(/logo.png) center/cover no-repeat!important;border:1px solid rgba(139,107,255,.45);box-shadow:0 10px 30px -10px var(--u-glow)!important}
.flex-1.items-center.justify-center>div.w-16.h-16.rounded-3xl>span{display:none}

/* fluid text on very large / very small screens */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (min-width:1600px){html{font-size:17px}}
img,video,canvas,svg{max-width:100%}
input,textarea,select{max-width:100%}

/* small phones (<= 380px): keep header, composer and bubbles inside the screen */
@media (max-width:380px){
  header span.tracking-\[0\.2em\]{font-size:13px!important;letter-spacing:.1em!important}
  #unj-call{width:36px;height:36px;margin-right:2px}
  button[aria-label="Conversation options"]{padding:6px!important}
  button.group span.text-sm{max-width:36vw}
  button.group p.text-\[11px\]>span{max-width:36vw}
  [class*="p-3.5"][class*="justify-between"]{padding:8px 4px!important}
  [placeholder*="encrypted"]{padding-left:12px!important;padding-right:8px!important}
  #unj-nav button{font-size:10px;padding:6px 0}
  #unj-nav button svg{width:20px;height:20px}
}
/* phones: inputs at 16px stop iOS auto-zoom; comfortable tap targets */
@media (max-width:767px){
  input,textarea,select{font-size:16px!important}
  [placeholder*="encrypted"]{font-size:16px!important}
  button,[role="button"]{min-height:36px}
  header button{min-height:0}
  .unj-msg{max-width:100%}
  [class*="max-w-[85%]"]{max-width:88%!important}
  .overflow-x-auto{-webkit-overflow-scrolling:touch}
}
/* tablets / landscape: bottom bar is for phones only */
@media (min-width:768px){#unj-nav{display:none!important}}
/* short landscape phones: never let the bottom bar eat the screen */
@media (max-height:420px) and (max-width:900px){#unj-nav{display:none!important}body.unj-hasnav #root{padding-bottom:0}}

/* =====================================================================
   v8: floating bottom bar + smooth, polished interface
   ===================================================================== */
:root{--u-ease:cubic-bezier(.22,1,.36,1);--u-spring:cubic-bezier(.34,1.56,.64,1)}
html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(124,92,255,.28)}
button,a,input,textarea,select,[role="button"]{transition:background-color .2s var(--u-ease),color .2s var(--u-ease),border-color .2s var(--u-ease),box-shadow .25s var(--u-ease),transform .18s var(--u-ease),opacity .2s}
button:not(:disabled):active{transform:scale(.95)}

@keyframes unj-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes unj-fade{from{opacity:0}to{opacity:1}}
@keyframes unj-pop{from{opacity:0;transform:scale(.86) translateY(6px)}to{opacity:1;transform:none}}
@keyframes unj-slide-r{from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes unj-slide-l{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes unj-menu{from{opacity:0;transform:scale(.92) translateY(-6px)}to{opacity:1;transform:none}}
@keyframes unj-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes unj-ring{0%{box-shadow:0 10px 30px -6px var(--u-glow),0 0 0 0 rgba(124,92,255,.35)}100%{box-shadow:0 10px 30px -6px var(--u-glow),0 0 0 16px rgba(124,92,255,0)}}

/* pages & panes */
#root>div{animation:unj-fade .35s var(--u-ease) both}
.divide-y>div[class*="cursor-pointer"]{animation:unj-rise .38s var(--u-ease) both}
.divide-y>div:nth-child(2){animation-delay:.04s}.divide-y>div:nth-child(3){animation-delay:.08s}
.divide-y>div:nth-child(4){animation-delay:.12s}.divide-y>div:nth-child(5){animation-delay:.16s}
.divide-y>div:nth-child(n+6){animation-delay:.2s}
.divide-y>div[class*="cursor-pointer"]:hover{background-color:rgba(124,92,255,.07)!important}
@media (hover:hover){.divide-y>div[class*="cursor-pointer"]:hover{transform:translateX(2px)}}

/* messages */
.unj-msg.justify-end{animation:unj-slide-r .32s var(--u-ease) both}
.unj-msg.justify-start{animation:unj-slide-l .32s var(--u-ease) both}
[class*="rounded-2xl"][class*="bg-emerald-600"],html:not(.dark) [class*="bg-white"][class*="rounded-2xl"]{transition:transform .2s var(--u-ease),box-shadow .2s}
div[class*="-top-7"]{animation:unj-pop .28s var(--u-spring) both;transform-origin:bottom center;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px -10px rgba(30,15,90,.5)!important}
div[class*="-top-7"] button{transition:transform .2s var(--u-spring)}
div[class*="-top-7"] button:active{transform:scale(1.35)}

/* menus, popups, modals */
button[aria-label="Conversation options"]+div{animation:unj-menu .22s var(--u-ease) both;transform-origin:top right;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#unj-pop{animation:unj-menu .22s var(--u-ease) both;transform-origin:top right}
.unj-item,button[aria-label="Conversation options"]+div button{transition:background-color .15s,padding-left .2s var(--u-ease)}
@media (hover:hover){button[aria-label="Conversation options"]+div button:hover{background:rgba(124,92,255,.09)!important}}
.fixed.inset-0{animation:unj-fade .22s ease both}
.fixed.inset-0>div{animation:unj-pop .3s var(--u-spring) both}

/* header + composer */
header{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html:not(.dark) header{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,245,255,.88))!important}
html.dark header{background-color:rgba(15,14,31,.82)!important}
[placeholder*="encrypted"]{transition:box-shadow .25s var(--u-ease),border-color .25s,background-color .25s}
[placeholder*="encrypted"]:focus{outline:none!important;border-color:var(--u-solid)!important;box-shadow:0 0 0 4px var(--u-soft)!important}
input:focus,textarea:focus{outline:none}
input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px var(--u-soft)}
button[class*="bg-emerald-600"]:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-1px)}

/* desktop niceties */
@media (hover:hover) and (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:rgba(124,92,255,.35) transparent}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-thumb{background:rgba(124,92,255,.3);border-radius:9px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(124,92,255,.55)}
}

/* ---------- floating bottom bar (phones) ---------- */
@media (max-width:767px){
  body.unj-hasnav #root{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  body.unj-hasnav button[title="Find user by handle"]{bottom:calc(98px + env(safe-area-inset-bottom));animation:unj-ring 2.6s ease-out infinite}
  body.unj-hasnav #unj-nav{
    left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    padding:6px;border-radius:26px;gap:2px;overflow:hidden;
    background:rgba(255,255,255,.78);border:1px solid rgba(124,92,255,.16);
    backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:0 18px 40px -14px rgba(50,25,150,.45),0 2px 0 rgba(255,255,255,.7) inset;
    animation:unj-rise .5s var(--u-spring) both}
  html.dark body.unj-hasnav #unj-nav{
    background:rgba(24,22,48,.74);border-color:rgba(167,139,250,.2);
    box-shadow:0 20px 44px -14px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06) inset}
  /* sliding pill */
  #unj-nav .unj-ind{position:absolute;top:6px;bottom:6px;left:0;width:var(--iw,0);border-radius:20px;
    transform:translateX(var(--ix,0));background:var(--u-grad);
    box-shadow:0 10px 22px -8px var(--u-glow),0 1px 0 rgba(255,255,255,.35) inset;opacity:1;pointer-events:none}
  #unj-nav.ready .unj-ind{transition:transform .45s var(--u-spring),width .45s var(--u-spring),opacity .2s}
  #unj-nav.noind .unj-ind{opacity:0}
  #unj-nav button{position:relative;z-index:1;gap:4px;padding:8px 2px 7px;color:#6f6a88;font-weight:600;letter-spacing:.01em;background:transparent!important}
  html.dark #unj-nav button{color:#a6a1c2}
  #unj-nav button i{display:flex;line-height:0;transition:transform .4s var(--u-spring)}
  #unj-nav button svg{width:22px;height:22px;transition:fill .25s,stroke-width .25s}
  #unj-nav button span{transition:opacity .2s,transform .3s var(--u-ease)}
  #unj-nav button.on,html.dark #unj-nav button.on{color:#fff;background:transparent!important}
  #unj-nav button.on i{transform:translateY(-1px) scale(1.12)}
  #unj-nav button.on svg{stroke-width:2.3;fill:rgba(255,255,255,.22)}
  #unj-nav button:not(.on):active i{transform:scale(.85)}
  #unj-nav button:active{transform:none}
}

/* respect reduced-motion setting */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}