:root{
  --bw-bg:#0e1420;
  --bw-card:#18202e;
  --bw-line:#2a3547;
  --bw-text:#eef4fb;
  --bw-muted:#9aacbf;
  --bw-accent:#2bb673;
}

#brainoWorkerNav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483000;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  padding:6px max(6px,env(safe-area-inset-right))
          calc(6px + env(safe-area-inset-bottom))
          max(6px,env(safe-area-inset-left));
  background:rgba(9,14,22,.97);
  border-top:1px solid var(--bw-line);
  backdrop-filter:blur(16px);
}

#brainoWorkerNav button{
  border:0;
  background:transparent;
  color:var(--bw-muted);
  padding:7px 2px;
  font:700 11px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;
  border-radius:10px;
}

#brainoWorkerNav button span{
  display:block;
  font-size:21px;
  margin-bottom:3px;
}

#brainoWorkerNav button.on{
  background:rgba(43,182,115,.16);
  color:#fff;
}

.braino-worker-panel{
  position:fixed;
  inset:0;
  z-index:2147482000;
  padding:18px 14px 90px;
  overflow:auto;
  background:var(--bw-bg);
  color:var(--bw-text);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}

.braino-worker-panel[hidden]{
  display:none !important;
}

.bw-wrap{
  max-width:760px;
  margin:0 auto;
}

.bw-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.bw-head h1{
  margin:0;
  font-size:1.45rem;
}

.bw-card{
  background:var(--bw-card);
  border:1px solid var(--bw-line);
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
}

.bw-card h2{
  margin:0 0 8px;
  font-size:1.05rem;
}

.bw-muted{
  color:var(--bw-muted);
}

.bw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 15px;
  border-radius:999px;
  border:0;
  background:var(--bw-accent);
  color:white;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}

.bw-btn.secondary{
  background:#26344a;
}

.bw-shift{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--bw-line);
}

.bw-shift:last-child{
  border-bottom:0;
}

#bwPhoneFrame{
  width:100%;
  height:calc(100vh - 125px);
  min-height:650px;
  border:0;
  border-radius:14px;
  background:#0e1420;
}


/* BRAINO_BOTTOM_NAV_CLEARANCE
   Keep Chat / Phone / My Shift / Work / My Profile from covering
   the conversation, composer or final messages.
*/

:root{
  --braino-bottom-nav-clearance:
    calc(92px + env(safe-area-inset-bottom, 0px));
}

html,
body{
  min-height:100%;
}

body{
  padding-bottom:var(--braino-bottom-nav-clearance) !important;
  box-sizing:border-box;
}

#root{
  min-height:100%;
  padding-bottom:var(--braino-bottom-nav-clearance) !important;
  box-sizing:border-box;
}

/* common chat/message scroll surfaces */
#messages,
.messages,
.chat-messages,
.ah-messages,
.thread-messages,
.conversation-messages,
.message-list,
[data-messages]{
  padding-bottom:var(--braino-bottom-nav-clearance) !important;
  scroll-padding-bottom:var(--braino-bottom-nav-clearance) !important;
}

/* composer/input areas must stay above fixed bottom menu */
.composer,
.chat-composer,
.ah-composer,
.message-composer,
[data-composer]{
  margin-bottom:var(--braino-bottom-nav-clearance) !important;
}

/* worker panels including Phone / Shift / Work / Profile */
#bwPhone,
#bwShift,
#bwWork,
#bwProfile{
  padding-bottom:var(--braino-bottom-nav-clearance) !important;
  box-sizing:border-box;
}



/* BRAINO_COLLAPSIBLE_NAV_CSS_V1 */

.braino-worker-bottom-nav{
  transition:
    transform .20s ease,
    opacity .20s ease !important;
  z-index:99990 !important;
}

body.braino-menu-collapsed
.braino-worker-bottom-nav{
  transform:translateY(
    calc(100% + 30px)
  ) !important;
  pointer-events:none !important;
  opacity:0 !important;
}

.braino-bottom-menu-toggle{
  position:fixed;
  right:12px;
  bottom:
    calc(
      10px +
      env(safe-area-inset-bottom,0px)
    );
  z-index:99999;
  border:0;
  border-radius:999px;
  padding:10px 14px;
  min-height:42px;
  background:#111827;
  color:#fff;
  font:800 14px
    system-ui,-apple-system,
    Segoe UI,sans-serif;
  box-shadow:
    0 4px 18px
    rgba(0,0,0,.34);
  cursor:pointer;
}

/*
  When expanded we reserve room.
  When collapsed only the little Menu pill remains.
*/
body:not(.braino-menu-collapsed){
  padding-bottom:
    calc(
      92px +
      env(safe-area-inset-bottom,0px)
    ) !important;
}

body.braino-menu-collapsed{
  padding-bottom:
    calc(
      58px +
      env(safe-area-inset-bottom,0px)
    ) !important;
}

body.braino-menu-collapsed #root{
  padding-bottom:
    calc(
      58px +
      env(safe-area-inset-bottom,0px)
    ) !important;
}

/*
  Make sure message lists and composer can scroll clear
  of the small Menu control.
*/
#messages,
.messages,
.chat-messages,
.ah-messages,
.thread-messages,
.conversation-messages,
.message-list,
[data-messages]{
  scroll-padding-bottom:70px !important;
  padding-bottom:70px !important;
}

@media(max-width:700px){

  .braino-bottom-menu-toggle{
    right:8px;
    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom,0px)
      );
  }

}


/* BRAINO_GLOBAL_INCOMING_CALL_CSS_V1 */

#brainoGlobalIncomingCall{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:none;
  align-items:center;
  justify-content:center;
  padding:
    20px
    20px
    calc(80px + env(safe-area-inset-bottom,0px));
  background:rgba(3,7,18,.78);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

#brainoGlobalIncomingCall.show{
  display:flex;
}

.braino-call-sheet{
  width:min(430px,100%);
  border-radius:28px;
  padding:28px 22px 24px;
  text-align:center;
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55);
}

.braino-call-pulse{
  width:82px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  border-radius:50%;
  font-size:38px;
  background:#16a34a;
  animation:
    brainoIncomingPulse
    1.15s
    infinite;
}

.braino-call-small{
  opacity:.72;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.braino-call-name{
  margin:10px 0 24px;
  font-size:27px;
  font-weight:900;
  line-height:1.15;
  word-break:break-word;
}

.braino-call-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.braino-call-actions button{
  border:0;
  border-radius:18px;
  min-height:62px;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  color:#fff;
}

.braino-call-answer{
  background:#16a34a;
}

.braino-call-decline{
  background:#dc2626;
}

@keyframes brainoIncomingPulse{

  0%{
    transform:scale(1);
    box-shadow:
      0 0 0 0
      rgba(22,163,74,.5);
  }

  70%{
    transform:scale(1.07);
    box-shadow:
      0 0 0 22px
      rgba(22,163,74,0);
  }

  100%{
    transform:scale(1);
    box-shadow:
      0 0 0 0
      rgba(22,163,74,0);
  }

}


/* BRAINO_PHONE_NAV_ESCAPE_CSS_V1 */

.braino-phone-back-chat,
.braino-phone-menu-button{
  position:fixed !important;
  top:
    calc(
      10px +
      env(safe-area-inset-top,0px)
    ) !important;
  z-index:2147483500 !important;

  min-height:44px;
  padding:10px 14px;

  border:0;
  border-radius:999px;

  background:#111827;
  color:#fff;

  font:
    800 14px
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;

  box-shadow:
    0 4px 18px
    rgba(0,0,0,.38);

  cursor:pointer;

  pointer-events:auto !important;
}

.braino-phone-back-chat{
  left:10px !important;
}

.braino-phone-menu-button{
  right:10px !important;
}

/*
  The phone iframe must never sit above BrainOchat controls.
*/
#bwPhone{
  position:relative;
  z-index:1;
}

#bwPhone iframe,
#bwPhoneFrame{
  position:relative !important;
  z-index:1 !important;
}

/*
  Move the old collapsible Menu button to the top-right too.
  It was getting hidden behind the phone area at the bottom.
*/
#brainoBottomMenuToggle{
  top:
    calc(
      10px +
      env(safe-area-inset-top,0px)
    ) !important;

  right:10px !important;
  bottom:auto !important;

  z-index:2147483400 !important;
}

/*
  While Phone is open the dedicated phone Menu button is used,
  so don't stack two menu pills on top of each other.
*/
body:has(#brainoPhoneMenuButton[style*="display: block"])
#brainoBottomMenuToggle{
  visibility:hidden;
}


/*
  Leave space at the top so these controls don't sit over
  the softphone heading.
*/
#bwPhone{
  padding-top:62px !important;
}


/* BRAINO_UNIVERSAL_NAV_CSS_V2 */

#brainoBottomMenuToggle,
#brainoPhoneMenuButton,
#brainoPhoneBackChat{
  display:none !important;
}

.braino-universal-menu-button{
  position:fixed !important;
  top:
    calc(
      10px +
      env(safe-area-inset-top,0px)
    ) !important;
  right:10px !important;

  z-index:2147483500 !important;

  min-height:44px;
  padding:10px 15px;

  border:0;
  border-radius:999px;

  background:#111827;
  color:#fff;

  font:
    800 14px
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;

  box-shadow:
    0 5px 20px
    rgba(0,0,0,.38);

  cursor:pointer;
}

.braino-universal-nav{
  position:fixed !important;

  top:
    calc(
      62px +
      env(safe-area-inset-top,0px)
    ) !important;

  right:10px !important;

  z-index:2147483499 !important;

  display:none;

  width:min(260px,calc(100vw - 20px));

  padding:8px;

  border-radius:18px;

  background:#111827;

  border:
    1px solid
    rgba(255,255,255,.14);

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.5);
}

.braino-universal-nav.open{
  display:grid !important;
  gap:6px;
}

.braino-universal-nav button{
  width:100%;

  min-height:48px;

  padding:10px 14px;

  border:0;
  border-radius:12px;

  text-align:left;

  background:#1f2937;
  color:#fff;

  font:
    800 15px
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;

  cursor:pointer;
}

.braino-universal-nav button:hover,
.braino-universal-nav button:focus{
  background:#374151;
}

/*
  Keep enough clearance for the fixed universal menu
  on every worker panel.
*/
#bwPhone,
#bwShift,
#bwWork,
#bwProfile{
  padding-top:62px !important;
}

/*
  The embedded phone must stay underneath navigation.
*/
#bwPhoneFrame,
#bwPhone iframe{
  z-index:1 !important;
}


/* BRAINO_PHONE_FULL_PAGE_V1
   Phone is a real BrainOchat section, not content sitting
   underneath/inside the Chat screen.
*/

#bwPhone:not([hidden]){
  position:fixed !important;

  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:100vw !important;
  height:100dvh !important;
  min-height:100vh !important;

  margin:0 !important;

  padding:
    calc(
      66px +
      env(safe-area-inset-top,0px)
    )
    0
    env(safe-area-inset-bottom,0px)
    0 !important;

  box-sizing:border-box !important;

  background:#0d1117 !important;

  overflow:hidden !important;

  z-index:2147483000 !important;
}


/*
  Hidden really means hidden.
*/
#bwPhone[hidden]{
  display:none !important;
}


/*
  The actual softphone fills the available Phone page.
*/
#bwPhoneFrame{
  display:block !important;

  width:100% !important;

  height:
    calc(
      100dvh -
      66px -
      env(safe-area-inset-top,0px) -
      env(safe-area-inset-bottom,0px)
    ) !important;

  min-height:
    calc(
      100vh -
      66px
    ) !important;

  margin:0 !important;

  border:0 !important;

  background:#fff !important;

  position:relative !important;
  z-index:1 !important;
}


/*
  Universal menu remains above Phone.
*/
#brainoUniversalMenuButton{
  z-index:2147483500 !important;
}

#brainoUniversalNav{
  z-index:2147483499 !important;
}


/*
  Incoming call popup remains above everything.
*/
#brainoGlobalIncomingCall{
  z-index:2147483600 !important;
}