/* =====================================================================
   Unjaan — pro.css (v9)  ·  Professional UI/UX layer for the logged-in app
   Load AFTER theme.css. Pure CSS: no change to app logic.
   Goals: one clear layout grid, logical order of controls, consistent
   sizes/spacing, readable type, 44px touch targets, no overlaps.
   ===================================================================== */

:root{
  --p-nav-h:64px;
  --p-side-w:360px;
  --p-thread-w:880px;
  --p-r:14px;
  --p-line:#e6e3f3;
  --p-side-bg:#ffffff;
  --p-chat-bg:#f6f5fb;
  --p-ctl:#f1eff9;
  --p-ctl-hover:#e8e4f7;
  --p-text:#171629;
  --p-muted:#6b6785;
}
html.dark{
  --p-line:rgba(167,139,250,.14);
  --p-side-bg:#121127;
  --p-chat-bg:#0d0c1a;
  --p-ctl:#1c1b36;
  --p-ctl-hover:#26244a;
  --p-text:#f3f1fc;
  --p-muted:#9d98b8;
}

/* ---------------------------------------------------------------
   1. TOP BAR  — one aligned row:  Brand | Find user ........ nav | account
   --------------------------------------------------------------- */
header{height:var(--p-nav-h);padding:0 16px!important;display:flex;align-items:center;border-bottom:1px solid var(--p-line)!important}
header .max-w-7xl{max-width:none!important;width:100%!important;margin:0!important;height:100%}
header .max-w-7xl>div:first-child{flex:0 0 auto}
header .max-w-7xl>div:last-child{flex:1 1 auto;justify-content:flex-end;gap:6px!important}
header .max-w-7xl>div:last-child>*{margin-left:0;margin-right:0}

/* unified control size */
header .max-w-7xl>div:last-child button{
  height:40px;min-width:40px;border-radius:12px!important;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px!important;gap:8px;font-size:13px;font-weight:600;white-space:nowrap}
header button[title="Your Profile"]{padding:0 12px 0 4px!important;border-radius:999px!important}
header button[title="Your Profile"] span{font-size:13px!important;font-weight:600}

/* logical order (left → right): Find · Chats · Settings · Theme | Profile · Logout */
header button[title="Search by username"]{order:1}
header button[title="Conversations"]{order:2}
header button[title="Settings"]{order:3}
header button[title^="Switch"]{order:4}
header .max-w-7xl>div:last-child button[title="Your Profile"]{order:6;margin-left:12px!important;position:relative}
header button[title="Secure Logout"]{order:7}
header button[title="Admin Console"]{order:2}
header button[title="Your Profile"]::before{content:"";position:absolute;left:-9px;top:50%;height:22px;width:1px;background:var(--p-line);transform:translateY(-50%)}

/* text labels next to the icons on desktop so nothing is a mystery icon */
@media (min-width:1024px){
  header button[title="Conversations"]::after{content:"Chats"}
  header button[title="Settings"]::after{content:"Settings"}
  header button[title="Conversations"],header button[title="Settings"]{padding:0 14px!important}
  /* Find user = a real search field, placed beside the brand */
  header .max-w-7xl>div:last-child button[title="Search by username"]{
    order:0;margin-right:auto!important;margin-left:28px!important;min-width:280px;max-width:360px;width:100%;flex:0 1 360px;
    justify-content:flex-start;padding:0 14px!important;font-weight:500;color:var(--p-muted)!important}
  header button[title="Search by username"] span{color:var(--p-muted)}
}
@media (min-width:768px) and (max-width:1023px){
  header button[title="Search by username"] span{display:none}
  header .max-w-7xl>div:first-child p{display:none}
}

/* brand */
header .max-w-7xl>div:first-child button{gap:12px}
header .max-w-7xl>div:first-child button>*{margin:0!important}
header .max-w-7xl>div:first-child p{margin-top:1px}

/* ---------------------------------------------------------------
   2. APP FRAME — header fixed, panes fill the rest, only panes scroll
   --------------------------------------------------------------- */
#root>div:has(div[class*="md:w-80"]){height:100dvh;min-height:0!important;overflow:hidden}
#root>div:has(div[class*="md:w-80"])>div.flex-1{min-height:0;display:flex;flex-direction:column}
div.flex-1.flex.overflow-hidden:has(>div[class*="md:w-80"]){min-height:0;height:100%}

/* ---------------------------------------------------------------
   3. SIDEBAR (conversation list)
   --------------------------------------------------------------- */
div[class*="md:w-80"]{background:var(--p-side-bg)!important;border-right:1px solid var(--p-line)!important;min-height:0}
@media (min-width:768px){
  div[class*="md:w-80"]{flex:0 0 300px;width:300px!important}
}
@media (min-width:1024px){
  div[class*="md:w-80"]{flex:0 0 var(--p-side-w);width:var(--p-side-w)!important}
}
@media (min-width:1440px){
  :root{--p-side-w:400px}
}

/* 3a. title row */
div[class*="md:w-80"]>div.p-4{padding:20px 16px 12px!important;border:0!important;align-items:center}
div[class*="md:w-80"]>div.p-4 h1{font-size:22px!important;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--p-text)!important}
div[class*="md:w-80"]>div.p-4 p{font-size:12.5px!important;margin-top:3px;color:var(--p-muted)!important}
div[class*="md:w-80"]>div.p-4>div:last-child{gap:8px;display:flex;align-items:center}
div[class*="md:w-80"]>div.p-4>div:last-child>*{margin:0!important}
div[class*="md:w-80"]>div.p-4 button:not([title="Find user by handle"]){width:40px;height:40px;padding:0!important;border-radius:12px!important;display:flex;align-items:center;justify-content:center}
div[class*="md:w-80"]>div.p-4 button svg{width:18px!important;height:18px!important}
@media (min-width:768px){
  div[class*="md:w-80"]>div.p-4 button[title="Find user by handle"]{width:40px;height:40px;padding:0!important;border-radius:12px!important;display:flex;align-items:center;justify-content:center}
}
@media (min-width:768px){
  /* "+" = primary action (new chat) */
  button[title="Find user by handle"]{background:var(--u-grad)!important;color:var(--u-on)!important;border:0!important;box-shadow:0 8px 20px -8px var(--u-glow)}
}

/* 3b. stories strip — compact */
div[class*="md:w-80"]>div.overflow-x-auto{padding:4px 16px 12px!important;border:0!important;background:transparent!important;gap:14px!important;backdrop-filter:none}
div[class*="md:w-80"]>div.overflow-x-auto span{font-size:11.5px!important}

/* 3c. search field — icon centred, 44px tall */
div[class*="md:w-80"]>div.p-3{padding:2px 16px 12px!important;border:0!important}
div[class*="md:w-80"]>div.p-3 .relative svg{left:14px!important;top:50%!important;transform:translateY(-50%);width:16px!important;height:16px!important}
div[class*="md:w-80"]>div.p-3 input{height:44px;padding:0 14px 0 40px!important;border-radius:14px!important;font-size:14px!important;
  background:var(--p-ctl)!important;border:1px solid transparent!important}
div[class*="md:w-80"]>div.p-3 input:focus{background:transparent!important;border-color:var(--u-solid)!important}
div[class*="md:w-80"]>div.p-3 input::placeholder{font-size:14px;color:var(--p-muted)}

/* 3d. rows */
div[class*="md:w-80"] .divide-y{padding:2px 0 12px;border-top:1px solid var(--p-line)}
.divide-y>div[class*="cursor-pointer"]{padding:11px 12px!important;min-height:72px;margin:2px 8px!important;width:calc(100% - 16px)!important;gap:12px;space-x:0}
.divide-y>div[class*="cursor-pointer"]>*{margin-left:0!important}
.divide-y>div[class*="cursor-pointer"]>.relative{flex:0 0 auto}
.divide-y>div[class*="cursor-pointer"] .w-11.h-11{width:48px!important;height:48px!important}
.divide-y>div[class*="cursor-pointer"] span.font-bold:not([class*="uppercase"]){font-size:15px!important;color:var(--p-text)}
.divide-y>div[class*="cursor-pointer"] span[class*="text-[10px]"]{font-size:11.5px!important;color:var(--p-muted)}
/* line 1: name … time    line 2: preview … badge */
.divide-y>div[class*="cursor-pointer"] .flex-1.min-w-0>div:first-child{margin-bottom:3px!important}
.divide-y>div[class*="cursor-pointer"] .flex-1.min-w-0>div:last-child{gap:8px}
.divide-y>div[class*="cursor-pointer"] .flex-1.min-w-0>div:last-child>p{max-width:none!important;flex:1 1 auto;min-width:0;font-size:13.5px!important}
.divide-y>div[class*="cursor-pointer"] .flex-1.min-w-0>div:last-child>div{flex:0 0 auto;margin-left:auto;gap:4px;display:flex;align-items:center}
.divide-y>div[class*="cursor-pointer"] .flex-1.min-w-0>div:last-child>div>*{margin:0!important}
.divide-y>div[class*="cursor-pointer"] span.rounded-full[class*="bg-emerald-6"]{min-width:22px;height:22px!important;width:auto!important;padding:0 7px;font-size:11.5px!important;font-weight:700}
/* row ⋮ menu: no wasted space until hover (desktop) / always tappable (touch) */
button[title="Chat options"]{width:0!important;padding:0!important;overflow:hidden;min-height:0!important}
.divide-y>div:hover button[title="Chat options"]{width:26px!important;height:26px;padding:4px!important}
@media (hover:none){
  button[title="Chat options"]{width:28px!important;height:28px;padding:5px!important;opacity:.55!important}
}
/* selected row */
.divide-y>div[class*="border-l-4"]{background:var(--u-soft)!important;border-left-width:0!important;box-shadow:inset 3px 0 0 var(--u-solid)}

/* ---------------------------------------------------------------
   4. CHAT PANE
   --------------------------------------------------------------- */
div[class*="0B1120"][class*="flex-col"]{background:var(--p-chat-bg)!important;min-width:0;min-height:0}

/* 4a. chat header */
[class*="p-3.5"][class*="justify-between"]{padding:0 20px!important;height:68px;border-bottom:1px solid var(--p-line)!important;flex:0 0 auto}
[class*="p-3.5"][class*="justify-between"] button.group span.text-sm{font-size:16px!important;font-weight:700}
[class*="p-3.5"][class*="justify-between"] button.group p{font-size:12.5px!important}
[class*="p-3.5"][class*="justify-between"] .font-mono{font-size:12px!important;color:var(--p-muted)!important}
[class*="p-3.5"][class*="justify-between"]>div:last-child{gap:4px;display:flex;align-items:center}
[class*="p-3.5"][class*="justify-between"]>div:last-child>*{margin:0!important}
[class*="p-3.5"][class*="justify-between"]>div:last-child button{height:40px;min-width:40px;border-radius:12px!important;display:inline-flex;align-items:center;justify-content:center}

/* 4b. message thread: readable centred column on wide screens */
div[class*="0B1120"][class*="flex-col"]>div.overflow-y-auto{
  padding-top:20px!important;padding-bottom:20px!important;
  padding-left:max(16px,calc((100% - var(--p-thread-w))/2))!important;
  padding-right:max(16px,calc((100% - var(--p-thread-w))/2))!important;
  min-height:0;scroll-behavior:smooth}
.unj-msg>div[class*="max-w-["]{font-size:14.5px}
.unj-msg [class*="rounded-2xl"]{line-height:1.5}
.unj-msg [class*="rounded-2xl"] [class*="text-[10px]"],.unj-msg [class*="rounded-2xl"] [class*="text-[9px]"]{font-size:11px!important}
@media (min-width:640px){.unj-msg>div[class*="max-w-["]{max-width:min(70%,560px)!important}}
/* day separator */
div.flex.items-center.justify-center.my-4>span{font-size:11px!important;letter-spacing:.08em;padding:5px 14px!important}

/* 4c. composer */
div[class*="0B1120"][class*="flex-col"]>div:last-child:has(textarea){
  flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--p-line)!important;background:var(--p-side-bg)!important}
div[class*="0B1120"]>div:last-child:has(textarea)>div.flex.items-end{max-width:var(--p-thread-w);margin:0 auto;gap:8px;space-x:0}
div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end>*{margin-left:0!important}
div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end button{
  width:44px;height:44px;padding:0!important;border-radius:14px!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end button svg{width:20px!important;height:20px!important}
div[class*="0B1120"] textarea{
  display:block;min-height:44px;box-sizing:border-box;padding:11px 16px!important;border-radius:22px!important;font-size:14.5px!important;line-height:22px;
  background:var(--p-ctl)!important;border:1px solid transparent!important}
div[class*="0B1120"] textarea::placeholder{font-size:14px;color:var(--p-muted)}
div[class*="0B1120"] textarea:focus{background:transparent!important;border-color:var(--u-solid)!important}
/* only one round action button at a time: mic when empty, send when typing */
div[class*="0B1120"] div.flex.items-end button[title="Send"]:disabled{display:none!important}
/* attachment / emoji pop-ups open above the bar, never off-screen */
div[class*="0B1120"] div.absolute.bottom-14{bottom:54px}

/* ---------------------------------------------------------------
   5. EMPTY STATE (no chat selected)
   --------------------------------------------------------------- */
.flex-1.items-center.justify-center{background:var(--p-chat-bg)}
.flex-1.items-center.justify-center h2,.flex-1.items-center.justify-center h3{font-size:20px!important;color:var(--p-text)}
.flex-1.items-center.justify-center p{font-size:14px!important;max-width:380px;color:var(--p-muted)}

/* ---------------------------------------------------------------
   6. MODALS & MENUS — consistent corners, spacing, readable type
   --------------------------------------------------------------- */
.fixed.inset-0>div{border-radius:20px}
.fixed.inset-0 h2,.fixed.inset-0 h3{letter-spacing:-.01em}
button[aria-label="Conversation options"]+div button,#unj-pop button{min-height:44px;font-size:13.5px}

/* ---------------------------------------------------------------
   7. SETTINGS / PROFILE / OTHER FULL PAGES — same grid & rhythm
   --------------------------------------------------------------- */
main,.max-w-3xl,.max-w-4xl{margin-left:auto;margin-right:auto}
.max-w-7xl.mx-auto.space-y-8{max-width:1100px}
.max-w-3xl{max-width:760px}

/* ---------------------------------------------------------------
   8. PHONES (< 768px)
   --------------------------------------------------------------- */
@media (max-width:767px){
  :root{--p-nav-h:56px}
  header{padding:0 12px!important}
  header .max-w-7xl>div:last-child button{height:40px;min-width:40px;padding:0 8px!important}
  header .max-w-7xl>div:first-child button{gap:10px}

  /* list screen: 1 compact title row, stories, search, then chats immediately */
  div[class*="md:w-80"]{width:100%!important;flex:1 1 auto}
  div[class*="md:w-80"]>div.p-4{padding:12px 16px 6px!important}
  div[class*="md:w-80"]>div.p-4>div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0}
  div[class*="md:w-80"]>div.p-4 h1{font-size:20px!important}
  div[class*="md:w-80"]>div.p-4 p{font-size:12px!important;margin:0}
  div[class*="md:w-80"]>div.overflow-x-auto{padding:6px 16px 10px!important}
  div[class*="md:w-80"]>div.p-3{padding:0 16px 10px!important}
  div[class*="md:w-80"] .divide-y{padding-bottom:110px}
  .divide-y>div[class*="cursor-pointer"]{margin:1px 6px!important;width:calc(100% - 12px)!important}

  /* chat screen */
  [class*="p-3.5"][class*="justify-between"]{height:60px;padding:0 6px!important}
  [class*="p-3.5"][class*="justify-between"] button.group span.text-sm{font-size:15.5px!important}
  div[class*="0B1120"][class*="flex-col"]>div.overflow-y-auto{padding-left:12px!important;padding-right:12px!important;padding-top:14px!important}
  .unj-msg>div[class*="max-w-["]{max-width:86%!important;font-size:15px}
  div[class*="0B1120"][class*="flex-col"]>div:last-child:has(textarea){padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important}
  div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end{gap:6px}
  div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end button{width:42px;height:42px}
  div[class*="0B1120"] textarea{min-height:42px;padding:10px 14px!important}
}
@media (max-width:380px){
  header .max-w-7xl>div:last-child button{min-width:36px;padding:0 6px!important}
  div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end button{width:38px;height:38px}
}

/* =====================================================================
   v10 — mute button, toast, and a professional bottom navigation
   ===================================================================== */
#unj-mute{order:5}
#unj-mute svg{width:18px;height:18px}
#unj-mute.is-muted{color:#f87171!important;background:rgba(248,113,113,.12)!important;border-color:rgba(248,113,113,.35)!important}
#unj-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,12px);z-index:300;padding:11px 18px;border-radius:999px;
  background:#1f1d3a;color:#fff;font-family:inherit;font-weight:600;font-size:13px;line-height:1;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .3s var(--u-spring,ease)}
#unj-toast.show{opacity:1;transform:translate(-50%,0)}
html:not(.dark) #unj-toast{background:#241f3d}
@media (min-width:768px){#unj-toast{bottom:28px}}

@media (max-width:767px){
  /* docked glass bar with rounded top, Material-style active pill behind the icon */
  body.unj-hasnav #unj-nav{
    left:0;right:0;bottom:0;border-radius:24px 24px 0 0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:0;overflow:visible;
    border:0;border-top:1px solid var(--p-line);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:0 -14px 34px -18px rgba(40,20,120,.35);animation:none}
  html.dark body.unj-hasnav #unj-nav{background:rgba(18,17,39,.92);border-top-color:rgba(167,139,250,.16);box-shadow:0 -16px 36px -16px rgba(0,0,0,.75)}
  #unj-nav .unj-ind{display:none!important}
  body.unj-hasnav #unj-nav button{
    flex:1;gap:4px;padding:4px 0 2px;min-height:58px;background:transparent!important;
    color:#7d7898;font-size:11px;font-weight:600;letter-spacing:.01em}
  html.dark body.unj-hasnav #unj-nav button{color:#9792b4}
  #unj-nav button i{position:relative;width:52px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    transition:background .3s var(--u-ease),box-shadow .3s,transform .35s var(--u-spring)}
  #unj-nav button svg{width:22px;height:22px;stroke-width:2;fill:none;transition:stroke-width .2s}
  #unj-nav button.on,html.dark #unj-nav button.on{color:var(--u-solid);font-weight:700}
  html.dark #unj-nav button.on{color:#c4b5fd}
  #unj-nav button.on i{background:var(--u-grad);color:#fff;transform:translateY(-3px);box-shadow:0 10px 20px -8px var(--u-glow)}
  #unj-nav button.on svg{stroke-width:2.3;fill:rgba(255,255,255,.2)}
  #unj-nav button.on span{transform:translateY(-2px)}
  #unj-nav button:not(.on):active i{background:var(--u-soft);transform:scale(.92)}
  /* unread badge */
  #unj-nav .unj-badge{position:absolute;top:-5px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:#ef4444;color:#fff;font-family:inherit;font-weight:700;font-size:10.5px;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--p-side-bg)}
  /* "+" button sits just above the new bar */
  body.unj-hasnav button[title="Find user by handle"]{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.unj-hasnav #root{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  #unj-toast{bottom:calc(92px + env(safe-area-inset-bottom))}
}