/* Unobits — styles.css*/
@font-face {
  font-family: 'DM Sans';
  /* Adjust path if your fonts folder is elsewhere, e.g., '../fonts/DMSans.ttf' */
  src: url('assets/fonts/DMSans.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #1a1a1a;
  --surface: #000000;
  --muted: #1b2027;
  --text: #e5e7eb;
  --text-muted: #9aa3af;
  --primary: #07cfc1; /* users' theme */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: red;
  --radius: 10px;
  --shadow: 0 6px 10px rgba(0,0,0,.35);
  --ring: 0 0 0 1px rgba(79,70,229,.6);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --line: 1px solid rgba(255,255,255,.08);
  --dots: rgba(255, 255, 255, 0.144);
  --btn-bg: red;
  --btn-color: white;
  --bgblur: rgba(255, 255, 255, 0.3);
  --backdrop: blur(40px) brightness(0.5);
  --backdrop-2: blur(20px) brightness(0.5);
}

html[data-theme="light"]{
  --bg: #e5e7eb;
  --surface: #ffffff;
  --muted: #b4b4b4;
  --text: #0b0d10;
  --text-muted: #475569;
  --line: 1px solid rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --dots: rgba(0, 0, 0, 0.199);
  --btn-bg: white;
  --btn-color: red;
  --bgblur: rgba(0, 0, 0, 0.5);
  --backdrop: blur(40px) brightness(0.9);
  --backdrop-2: blur(20px) brightness(.95);
}
/* High contrast tweak */
html[data-contrast="high"]{
  --line: 1px solid rgba(255,255,255,.15);
  --btn-shadow: 0 0 4px 1px #ccc8;
  --surface: #000000;
  --shadow: -2px 1px 5px 1px rgb(104 102 102 / 20%);
  --text: #fff;
  --text-muted: #e5e7eb;
}
html[data-theme="light"][data-contrast="high"]{
  --line: 1px solid rgba(0,0,0,.15);
  --btn-shadow: 0 0 4px 1px #262222;
  --shadow: 0 10px 10px rgba(0,0,0,.28);
  --surface: #ffffff;
  --bg: #f5f5f5;
  --text: #000;
  --text-muted: #111827;
}

html {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-family: 'DM Sans','Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body { background: transparent; height: 100%;}

* {box-sizing: border-box;}
a { color: inherit; text-decoration: none; }
button, input, select, textarea {font: inherit;color: var(--text);border: none;background: transparent;padding: 2px;border-radius: 10px;}
input[type="checkbox" i]{accent-color: var(--primary) !important;}
textarea {background: var(--bg) !important;border-radius: var(--radius) !important;border-top-left-radius: 0px !important;resize: none;width: auto;}
button { cursor: pointer; }
input::placeholder, textarea::placeholder { left: 3px; color: var(--text-muted); }
hr { border: none; border-top: var(--line); }
span.file-name.truncate{
    text-overflow: ellipsis;
    text-wrap-mode: nowrap;
    width: 60px;
    overflow: hidden;
}
.belt-btn i {
  pointer-events: none;
}
.visually-hidden {position: absolute;left: -9999px;top: auto;width: 1px;height: 1px;overflow: hidden;}

/* Density */
html[data-density="comfortable"] {--mar: 3px;--pad: 12px;--nbtnw: 55px;--gap: 12px;--h: 35px;--text-size: 14px;}
html[data-density="cozy"] {--mar: 4px;--pad: 10px;--nbtnw: 47px;--gap: 10px;--h: 30px;--text-size: 12px;}
html[data-density="compact"] {--mar: 5px;--pad: 8px;--nbtnw: 50px;--gap: 8px;--h: 28px;--text-size: 10px;}
body { font-size: var(--text-size); margin:0; padding:0; overflow: clip;}

/* GRADIENT */
body.wp-gradient {
  background: radial-gradient(1200px 600px at 20% -10%, var(--primary-faded), transparent),
              var(--bg);
  filter: none;
  opacity: 1;
}

/* DOTS */
body.wp-dots {
  background-image:
    radial-gradient(var(--dots) 5px, transparent 20px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.2));
  background-size: 50px 50px, auto;
  background-position: 0 0, 0 0;
  filter: none;                /* patterns should not be blurred */
  opacity: 1;
}

/* Top App Bar */
.topbar {
  position: relative;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(180px, 3fr) .5fr;
  align-items: center;
  gap: var(--gap);
  padding: 5px 5px;
  height: 7vh;
  width: 100%;
  border-radius: 25px;
  background: var(--surface);
}
.topbar .left, .topbar .right {display: flex;gap: var(--gap);align-items: center;}
.logo {scale:1;transition:scale 0.5s ease-out;display:inline-flex;align-items:center;gap:10px;border-radius: 25px;cursor: pointer;}
.logo:hover { background: rgba(255,255,255,.04); }
.logo-mark {font-weight: 800;border-radius: 15px;width: 30px;height: 30px;}
.logo-text {font-weight: 900;letter-spacing: .2px;font-size: medium;display: block;transition: display 1s ease;}
@media (max-width: 700px) {
  .topbar .logo .logo-text { display: none !important; }
}
.icon-btn {width: var(--h);height: var(--h);border-radius: 20px;display:grid;place-items:center;border: var(--line);background: var(--surface);justify-content: center;z-index: 5;}
.icon-btn:hover { outline: var(--line); }
.icon-btn svg {width: 20px;height: 20px;fill: var(--text);display: flex;}
.icon-btn.sm {width: 25px;height: 25px;}
.icon-btn-notif {padding: 4px 6px;width: var(--nbtnw);height: var(--h);display:flex;place-items:center;background: var(--primary-faded);font-size: 20px;line-height: 1;border-radius: 20px;}
.icon-btn-notif svg {fill: var(--text-muted);transition: fill 0.2s ease-in-out;height: 20px;}
.icon-btn-notif:hover svg, .icon-btn-notif:focus svg { fill: var(--text); }
.close-icon-btn {height: var(--h);padding: var(--pad);background: var(--surface);border-radius: inherit;position: absolute;top: 20%;left: 88%;border: 1px solid var(--primary-faded);}
.cmdk-btn {padding: 0 10px;height: var(--h);border-radius: 15px;background: var(--surface);border: var(--line);}
.cmdk-btn:hover { background: #222831; }
#btnSettings{display:flex;width:100%;gap:2px;padding: 4px;background: var(--primary-faded);}
.search-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--h);
  padding: 0 10px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--primary-faded);
}
.search-wrap input { width: 100%; outline: none; }
.search-icon { width: 18px; height: 18px; fill: var(--text-muted); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; max-height: 50vh; overflow: auto;
}
.search-results .res { padding: 10px; border-radius: 8px; display:flex; justify-content: space-between; gap: 10px; }
.search-results .res:hover, .search-results .res[aria-selected="true"] { background: rgba(255,255,255,.06); }

.btn {height: var(--h);padding: 0 14px;box-shadow: var(--btn-shadow);border-radius: 10px;background: transparent;border: 1px solid var(--primary-faded);}
.btn.primary {margin: 0;border: none;color: #fff;}
.btn.primary:hover{ filter: brightness(1.05); }
.btn:hover { box-shadow: var(--ring); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn.sm {margin: 0;padding: 0 10px;align-self: flex-end;}
.btn.sm.count-btn {margin-top: 0px;}
.btn-group { display:flex; gap:6px; }
.btn-row {display:flex;flex-wrap: wrap;gap: 5px;padding: 3px;align-items:center;}
.admin-btn-row{ display:flex; flex-wrap: nowrap; column-gap: 5px; align-items:center; }
.dept-btn {height: var(--h);align-self: self-end;box-shadow: var(--btn-shadow);padding: 0 14px;border-radius: 10px;background: transparent;border: 1px solid var(--primary-faded);}
/*.icon-btn.danger { color: #b91c1c; }*/
.btn-ghost, .btn-dark {color: var(--text);border-radius: 15px;box-shadow: var(--shadow), inset 0 0 6px .01px var(--text);padding: 3px 5px;display: flex;align-items: center;gap: 2px;}
.btn.danger { background: #b00020; color: #fff;}
.btn.danger:hover {filter: brightness(1.05);}
.btn.sm.danger {background: var(--btn-bg);color: var(--btn-color);font-size: 14px; padding: 5px; padding-top: 3px; margin:0;}

.spacer { flex: 1 1 auto; }
.divider { width: 1px; height: 24px; background: rgba(255,255,255,.1); }

.menu {
  position: absolute;
  z-index: 40;
  transform: translateX(35%);
  background: var(--surface);
  width:max-content;
  border: var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow);
}
.menu > button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; }
.menu > button:hover { background: rgba(255,255,255,.06); }

.presence {display:flex;align-items:center;gap:8px;background: var(--muted);padding: 0 8px;height: var(--h);border-radius: 20px;border: 1px solid var(--primary-faded);}
.presence-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); display:inline-block; }
.presence .busy { background: var(--warning); }
#presenceSelect {background: var(--muted);border-radius: 10px;}

.badge {background: var(--danger);color: #fff;border-radius: 999px;padding: 2px 6px;font-size: 12px;}

.profile { display:flex; align-items:center; gap: 8px; }
.profile select {background: var(--muted);height: var(--h);padding: 1px 10px;border-radius: 20px;border: var(--line);}

/* ===== Layout container (header is 64px tall) ===== */
.app-body{
  display: grid;
  position:relative;
  z-index: 1;
  gap: 0;
  --sidebar-w: 210px;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas:
    "sidebar main";
  transition: grid-template-columns .54s ease, --sidebar-w .5s ease;
  overflow: clip;
}

.sm.count-btn{background: transparent;box-shadow: none;}

/* hamburger area unclickable while animating (prevents jitter) */
.sidebar, .main{will-change: transform, width;}
/* ---------- Sidebar Icon-Only tooltips ---------- */
.app-body.sidebar-icon {--sidebar-w: 50px;}
.app-body.sidebar-icon .sidebar .nav-link {justify-content: center;gap: 5px;padding: 10px 0px;margin: 0;}
.app-body.sidebar-icon .sidebar .nav-link .label{display: none;}


.header-clock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:115px;
  height:30px;
  padding:0 5px;
  margin-left: 8px;
  border-radius: 13px;
  background: var(--primary-faded);
  color:var(--text);
  font-weight:700;
  font-size: var(--space-3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  user-select:none;
}

/* Chat list accordion */
#chatList .dept-accordion { margin-bottom: 8px; }
#chatList .legend { display:flex; align-items:center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
#chatList .legend:hover { background: rgba(255,255,255,.06); }
#chatList .group-list {display:flex;flex-direction:column;gap: 5px;margin: 0;padding-left: 0px;padding-right: 0;}
#chatInfo .file-card {align-content: space-between; overflow:hidden}
#chatInfo .file-card .icon-btn{width:25px;height:25px;font-size: 10px;}
#chatInfo .file-card .meta .name{font-size: 10px;text-overflow: clip;text-emphasis: sesame open;text-transform: capitalize;text-wrap-mode: nowrap;max-width: 55px;}
#chatInfo .file-card .meta .sub {font-size: 8px;}

/* ===== Sidebar & Main ===== */
.sidebar{
  grid-area: sidebar;
  display: block;
  list-style: none;
  position: sticky;
  padding: 3px;
  margin: 2px 0 2px 2px;
  border-radius: 15px;
  width: 210px;
  /* background: var(--surface); */
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overflow: auto;
  transform: translateX(-1px);
  transition: padding .24s ease, border-color .24s ease, width .5s ease, transform .5s ease;
}
.sidebar-icon .sidebar{transition: padding .24s 
ease, border-color .24s 
ease, width .25s 
ease, transform .5s 
ease, width .5s 
ease;width: 50px;margin-top: 2px;}
.sidebar-header {display: flex;height: 7vh;gap: 4px;padding: 5px;border-radius: 25px;align-items: center;background: var(--primary-dark);justify-content: space-between;}
.sidebar-body{margin: 5px 0;display: flex;height: 73vh;overflow: auto;scrollbar-width: none;-ms-overflow-style: none;border-radius: 25px;background: var(--surface);}
.sidebar-icon .sidebar-header{justify-content:center}
.main{display: grid;gap: 5px;grid-area: main;transition: margin-left .25s ease;min-width: 0;height: 98.5vh;margin: 5px;scrollbar-width: none;flex-wrap: wrap;}

/* ===== Nav / links ===== */
.nav-link{display: flex;align-items:center;gap:10px;margin-left: 5px;padding: 8px 6px;border-radius:10px;}
.nav-icon{width:20px;height:20px;flex: 0 0 16px;vertical-align: middle;}
.nav-link .nav-icon{width: 5px;}
#sbFlyout .nav-icon, .sidebar-icon .nav-icon{display:flex !important}
.nav-list{margin:0;padding:2px;width: 16vw;}
.nav-list .sidebar-icon {width:50px;}
.sidebar-icon .nav-list{font-size:0;justify-items: center;}
.sidebar-icon .logo-text {
    display: none;
    transition: display 1s ease;
}
.sidebar-icon .logo{
  scale: 1.4;
  margin: 0 12px 0 -2px;
  transition:scale 0.5s ease
}
.sidebar-icon .sidebar-header{
  transform:translateX(0);
  transition:transform .2s ease-in
}
.sidebar-icon .sidebar-header:hover{
  transform:translateX(-48px);
  transition:transform .6s ease}
.sidebar-icon .sidebar-header{padding-left:9px;justify-content:left;gap:5px;width: 9vw;background: transparent;}
/* Styles for the text label inside the active link */
a.nav-link.active .label {
  border-radius: 15px;
  font-size: var(--text);
  box-shadow: 0 0 3px 1px var(--primary);
  margin-left: -3px;
  padding-left: 5px;
  width: 100px;
  scale: 1.03;
  transition: box-shadow .9s ease, scale .6s ease;
}
a.nav-link:hover .label {
  border-radius: 25px;
  box-shadow: 0 0 10px 1px var(--primary-faded);
  margin-left: -3px;
  padding: 1px;
  padding-left: 5px;
  width: 100px;
  transition: box-shadow .8s ease;
}
a.nav-link.active:hover .label{
  box-shadow: 0 0 4px 2px var(--primary);
  margin-left: -3px;
  padding:0;
  padding-left: 5px;
  width: 100px;
  scale: 1.03;
}

/* ---- Smooth route transitions ---- */
@keyframes routeIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);  filter: blur(0);  }
}
@keyframes routeOut {
  from { opacity: 1; transform: translateY(0);  filter: blur(0);  }
  to   { opacity: 0; transform: translateY(8px); filter: blur(2px); }
}

.route{display:none;height: 80%;}
.route.active{display: block;width: 100%;height: 93vh;overflow: auto;scrollbar-width: none;animation: routeIn .38s ease-out;}
.route.exiting{ animation: routeOut .12s ease-in; }

/* ---- Tiny route progress bar ---- */
.route-progress{
  position: fixed;
  top: 0; left: 0; height: 3px; width: 100%;
  z-index: 4000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--muted), var(--primary), var(--muted));
  background-size: 200% 100%;
  transform-origin: 0 0;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .18s ease, opacity .12s ease;
}
.user-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.sidebar-footer .user-cardbtn {
  display: grid;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.sidebar-footer .avatar-ft img { width:100%; height:100%; object-fit: cover; display:block; }
.sidebar-footer .status-dot {position: absolute;right: 6.3vw;width: 9px;height: 9px;border-radius:50%;transition: right .5s ease;background: var(--success);}
.sidebar-icon .status-dot{right:8px;transition: right .5s ease;}
/* Small flyout above avatar */
.sb-profile-flyout {position: absolute;left: -75px;bottom: 68px;width: 20vw;background: var(--bg);border: 1px solid var(--surface);border-radius: 8px;box-shadow: 0 8px 24px rgba(0,0,0,.18);}
.sidebar-icon .sb-profile-flyout {left:0}
.sb-profile-flyout[hidden] { display:none; }
.sb-profile-flyout .flyout-inner {padding: 10px;}
.sb-profile-flyout .flyout-row {display:flex;gap:5px;align-items:center;justify-content: space-between;}

/* Toast bar (used by Alerts) */
.toast-bar { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 9999; }
.toast { background: var(--panel); border:1px solid var(--border); padding: 10px 12px; border-radius: 8px; }
.lg-side,.st-side{
  display:flex;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  font-size: 10px;
  padding: 1px;
  scale:1;
  background:transparent;
  transform:translateY(0px);
  transition:scale 0.5s ease-out, transform .5s ease-out, background .5s ease-out
}
.sidebar-icon .lg-side, .sidebar-icon .st-side{scale: 1.2 !important;}
.lg-side:hover, .st-side:hover{background: var(--primary-faded);transform:translateY(-2px); scale:1.1; transition:transform 0.5s ease, scale 0.3s ease, background 0.5s ease}
.orgsel{font-size:10px;overflow: hidden !important;text-overflow:ellipsis;width: 75%;border-radius: 20px;border: 1px solid var(--dots);text-wrap-mode:nowrap}
.sidebar-icon .name-ft, .sidebar-icon .orgsel, .sidebar-icon .email-ft{display:none}
.email-ft{
  font-size: 9px;
  color: var(--text-muted);
  display: block;
  margin-top: -4px;
}
.avatar-ft{
  position: relative;
  width: 30px;
  height: 30px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-weight:600;
  overflow: hidden;
  background: var(--primary-faded);
  color: var(--text);
  font-size: 14px;
}
.footer-content{
  display: flex;
  align-items: center;
  gap: 1px;
  background: linear-gradient(30deg, var(--primary-dark)45%, var(--primary-light));
  padding: 0 8px;
  height: 17vh;
  flex-direction: column;
  border-radius: 20px;
}
.footer-headbar{padding-top: 7px;}
.sidebar-icon .footer-headbar{padding-bottom:5px}
.footer-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  height: var(--h);
  border-radius: 10px;
}
.sidebar-icon .footer-actions{flex-direction:column;gap: 10px;margin-top:10px}

.route-progress.active{
  opacity: 1;
  animation: routeBar 1s linear infinite;
  transform: scaleX(1);
}
@keyframes routeBar {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce){
  .route.active{ animation: none !important; }
  .route.exiting{ animation: none !important; }
}

/* ---- App loader (three big dots) ---- */
.app-loader{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bgblur);
  backdrop-filter: blur(15px);
  z-index: 3000;
}
.app-loader[hidden]{ display: none; }

/* Dots */
.app-loader .dots{ display: inline-flex; gap: 18px; align-items: center; }
.app-loader .dot{
  width: clamp(25px, 9vmin, 50px);
  height: clamp(25px, 9vmin, 50px);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.25) inset, 0 2px 6px var(--primary);
  animation: dotPulse 1.2s infinite cubic-bezier(.4,0,.2,1);
}
.app-loader .dot:nth-child(2){ animation-delay: .15s; }
.app-loader .dot:nth-child(3){ animation-delay: .30s; }
#emailDetails {height: 80vh;overflow: auto;scrollbar-width: thin;scrollbar-color: var(--primary-faded) transparent;}
@keyframes dotPulse{
  0%, 80%, 100% { transform: scale(.8); opacity: .65; }
  40%          { transform: scale(1.0); opacity: 1; }
}

@media (prefers-color-scheme: light){
  .app-loader{ background: #fff; }
  .app-loader .dot{ background: #e9eef5; box-shadow: 0 6px 16px rgba(0,0,0,.08) inset, 0 2px 6px rgba(0,0,0,.12); }
}
#msgTopLoader[hidden]{ display: none;}
/* Read vs Unread styling */
.inbox-item.is-unread strong { font-weight: 700; }
.inbox-item.is-read   strong { font-weight: 500; opacity: .9; }

.inbox-item.is-read { background: rgba(0,0,0,.03); }

#settingsPanel.sheet{
  position: fixed;
  width: min(310px, 94vw);
  background: transparent;
  top: 2px;
  border-left: var(--line);
  box-shadow: var(--shadow);
  z-index: 1200;
  transform: translateX(105%);
  transition: transform .52s ease;
}
.msg.other .msg-belt{right: 0;left: 100%;margin: 0;margin-left: 5px;}
#settingsPanel.sheet[hidden]{ display: block; } /* keep in flow; hidden via transform */
body:not(.no-sheet) #settingsPanel.sheet:not([hidden]){ transform: translateX(0); }

#userSettingsCard{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 65px;
  border: 0;
  padding-top: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: transparent;
}

.panel-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0px;
  border-bottom: var(--line);
  justify-content: space-between;
  margin-bottom: 8px;
}
#chat-root .panel-header{gap:2px;flex-wrap: wrap;}
.chat-header-left{display:flex;width: 100%;align-items: center;justify-content: space-between;}
.emails{width: 100%;}
.p{color:var(--text) !important}
.panel-admin-header{
  display: flex; align-items: center; gap: 12px;
  justify-content: space-between; margin-bottom: 8px; padding: 10px 0px;
}
.thread {
  gap: 14px;
  display: flex;
  flex-direction: column;
  background: transparent;
  backdrop-filter: none;
}
.panel-header h2{ font-size: 1.1rem; margin: 0; color: var(--text); }
.panel-header .muted{ color: var(--text-muted); font-size: .9rem; margin-left: auto; }
.panel-header .icon-btn{
  width: 30px;
  height: 30px;
  border-radius: 19px;
  border: var(--line);
  color: var(--text);
}
.setpanel-header{background: transparent;border-radius: 10px;padding: 1px 5px;position: absolute;width: 94%;align-self: center;top: 5px;backdrop-filter: var(--backdrop);}
.panel-header .icon-btn:hover{ background: var(--muted); }
.panel-section{
  padding: 14px 10px;
  border: var(--line);
  border-radius: 7px;
  margin: 10px 0;
  background: transparent;
  backdrop-filter: var(--backdrop-2);
}
.assistant{gap:5px;display: flex;flex-wrap: wrap;}
.topbar .right {justify-content: right;padding-right: 2px;}
/* Cards, panels */
.card.big { grid-column: 1/-1; }
.panel {background: transparent;backdrop-filter: var(--backdrop);border-radius: var(--radius);padding: 10px;height: 90.8vh;scrollbar-width: none;overflow: clip;}
#wePaneEditor.panel{overflow-y: auto !important;height:89vh}
#wePaneList .card{max-height:72.5vh; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--primary-faded) transparent}
.panel-sub { color: var(--text-muted); margin: 12px 0 6px; }
.panel.main-panel, .right-panel {height: 89vh;margin: 5px;padding: 0;backdrop-filter:none !important;background: var(--bg) !important;}
.left-panel{backdrop-filter:none !important}
.list {list-style: none;margin: 0;padding: 0;display:flex;flex-direction: column;gap: 8px;}
.list .item, .inbox-item, .deal-card, .task {background: var(--primary-faded);border: var(--line);border-radius: 10px;padding: 1px 3px;}
.list .item:hover, .selectable .item:hover, .inbox-item:hover {/* background: rgba(255,255,255,.06); */scale:1;}
.inbox-item:hover {scale: .971;box-shadow: var(--ring);transition:scale .5s ease;}
.list.selectable .item[aria-selected="true"] { outline: var(--ring); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.kpi { background: var(--primary-faded); border: var(--line); border-radius: 12px; padding: 14px; }
.kpi-num { font-size: 28px; font-weight: 800; }
.kpi-label { color: var(--text-muted); }

.dashboard .dash-row { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap); }
.dashboard .grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.grid-2 { display:flex; flex-direction: column; gap: var(--gap); }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.grid-cards { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.flex-2 { display:grid; grid-template-columns: 1fr 2fr; gap: var(--gap); }
.flex-3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: center; margin-bottom: 12px; }

/* Three-column module layout (1fr/3fr/1fr) */
.three-col {
    --col-left: 1fr;
    --col-center: 3fr;
    display: grid;
    grid-template-columns: var(--col-left) var(--col-center);
    transition: grid-template-columns 240ms ease;
    margin: 0;
    border-radius: 20px;
    background: var(--surface);
    }
.split.two {display: grid;grid-template-columns: 0.5fr 1fr;gap: var(--gap);height: 87vh;}

.filters, .chips { display:flex; gap: 6px; flex-wrap: wrap; }
.chip { background: rgba(255,255,255,.06); border: var(--line); border-radius: 999px; padding: 6px 10px; }
.chip.busy { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); }
.chip.me { background: rgba(79,70,229,.2); border-color: rgba(79,70,229,.4); }
.chip.active { background: var(--primary); color: #fff; border: none; }

.inbox-list { display:flex; flex-direction: column; gap: var(--gap); overflow: auto;  -ms-overflow-style: none; scrollbar-width: none; max-height: auto; }
.inbox-item {align-items: flex-start;cursor: pointer;overflow-wrap: anywhere;}
.inbox-item .meta {color: var(--text-muted);font-size: 9px;align-items: center;gap: 5px;}
.thread-view {background: rgba(255,255,255,.02);border: var(--line);border-radius: 10px;padding: var(--pad);min-height: 320px;}
.thread-empty { color: var(--text-muted); padding: 20px; text-align: center; }

.messages {height: 88.2vh;-ms-overflow-style: none;scroll-behavior: smooth;scrollbar-gutter: stable;}
.messages::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.messages::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 50px;
  margin-bottom:60px;
}
.messages:hover::-webkit-scrollbar-thumb {
  background: var(--primary-faded);
  border-radius: 20px;
  opacity: 1;
  transition: opacity .5s ease;
}
.msg.me {margin-right: 2px}

.message {display:flex;gap: 10px;border-radius: 10px;padding: 7px;align-items: flex-start;flex-direction: column;}
.message.me {background: rgba(79,70,229,.08);}
.composer {display:flex;position: sticky;gap: 10px;width: 99.8%;margin-bottom: 7.8px;padding: 5px 70px;bottom: -18px !important;border-radius: 0 0 10px 10px;align-items: flex-end;backdrop-filter: var(--backdrop-2);pointer-events: all;}
.composer input, .input {width: 65%;height: var(--h);outline: none;}
.composer textarea {width: 100%;border-radius: 10px;padding: 10px 10px;background: var(--muted);border: var(--line);max-height: 200px;outline: none;scrollbar-width: thin;scrollbar-color: var(--primary-faded) transparent;scrollbar-width: none;border-radius: 20px !important;}
.composer-actions { display:flex; align-items:center ; flex-direction: row; gap: 5px; }
.avatar { border-radius: 50%; object-fit: cover; background: #ddd; }
.avatar.sm {width: 28px;height: 28px;display:inline-block;}
.avatar.sm.initials {width:28px;height: 28px;border-radius:50%;display:inline-grid;place-items:center;font-weight:600;}
.chip {display:inline-block;padding: 0.2rem .5rem;border-radius:999px;font-size: var(--text);margin:.1rem;}
.chip.quiet { opacity:.7; }
.msg-row { margin: 4px 0; }
#chatContext{overflow: auto;scrollbar-color: var(--primary-faded) transparent;scrollbar-width: thin;}
.message-bubble {width: 100%;overflow: scroll;scrollbar-width: none;margin-top: 15px;color: var(--text);}
.message-bubble.mine { background: var(--surface); }
#assistantMessages.messages{height: 73vh;}
.assistant.card{margin-bottom: 10px;}
.toolbar { display:flex; align-items:center; gap: var(--gap); margin-bottom: var(--gap); }
.grid-cards .card { transition: transform .15s ease; }
.grid-cards .card:hover { transform: translateY(-2px); }

.buckets { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.bucket > header { font-weight: 700; margin-bottom: 8px; }
.task-list { display:flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 6px; background: rgba(255,255,255,.03); border: var(--line); border-radius: 10px; }
.task { display:flex; align-items:center; gap: 8px; }
.task .meta { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.task.dragging { opacity: .6; }
.kanban { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.kanban.crm { grid-template-columns: repeat(5,1fr); }
.kan-col > header { font-weight: 700; margin-bottom: 8px; }
.kan-items { display:flex; flex-direction: column; gap: 8px; min-height: 200px; background: rgba(255,255,255,.03); border: var(--line); border-radius: 10px; padding: 6px; }
.deal-card { cursor: grab; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; border-bottom: var(--line); padding: 10px; }
.table th { color: var(--text-muted); font-weight: 600; }
.table.compact td, .table.compact th { padding: 6px 8px; }
.table-wrap { overflow:auto; border: var(--line); border-radius:8px; }

.timer { display:flex; align-items:center; gap: 10px; }

.calendar {background: var(--surface);border-radius: 10px;padding: var(--pad);min-height: 200px;}
.cal-grid { display:grid; gap: 6px; }
.cal-month { grid-template-columns: repeat(7, 1fr); }
.cal-week { grid-template-columns: repeat(7, 1fr); }
.cal-day { grid-template-columns: 1fr; }
.cal-cell {height: 11.2vh;border: var(--line);border-radius: 8px;padding: 4px;background: var(--primary-dark);overflow: auto;scrollbar-width: none;}
.event {background: rgba(79,70,229,.25);border: 1px solid rgba(79,70,229,.5);border-radius: 6px;padding: 2px 4px;font-size: 11px;margin-top: 2px;display:block;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.google-event {
    display: flex;
    flex-flow: wrap;
    cursor: pointer;
    border: 2px solid transparent;
    background: rgba(66, 133, 244, 0.12);
    padding: 4px;
    background-image: linear-gradient(var(--bg), black), 
    linear-gradient(45deg, green, red, blue);
    background-clip: padding-box, border-box;
}
.cal-swipe-left{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.2);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.cal-swipe-right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(50%);
    background: rgba(0,0,0,.2);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.ge {display:flex}
.note-editor { min-height: 240px; border: var(--line); margin-top: 10px; border-radius: 10px; padding: 10px; background: var(--muted); outline: none; }
.muted { color: var(--text-muted); }

.legend { display:flex; gap:6px; margin-bottom: 8px; }
.desk-grid { --cols: 12; display:grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; background: rgba(255,255,255,.03); border: var(--line); border-radius: 10px; padding: 10px; }
.desk { height: 38px; border-radius: 6px; border: var(--line); background: rgba(255,255,255,.06); display:grid; place-items:center; font-size: 12px; cursor:pointer; }
.desk.booked { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); }
.desk.mine { background: rgba(79,70,229,.2); border-color: rgba(79,70,229,.4); }

.bar-chart { height: 140px; display:flex; align-items: end; gap: 6px; }
.bar { flex: 1; background: linear-gradient(180deg, rgba(79,70,229,.8), rgba(79,70,229,.2)); border-radius: 6px 6px 0 0; }

.form { display:flex; flex-direction: column; gap: 10px; }
.form-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.form-row[hidden]{display:none}
.form-row:last-child{/* margin-bottom: 0; */display: flex;flex-direction: column;gap: 2px;}
.flyout-row label{/* display: grid !important; *//* grid-template-columns: 70px 1fr; */height: 40px;}
.form-inline{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px !important;
}
.flyout-row .form-inline{
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  flex-basis: 1 1 aute;
  grid-template-columns: 1fr .5fr;
  align-items: center;
  }
.form-row label{display: flex;gap: 6px;color: var(--text);flex-direction: column;}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="color"],
.form-row input[type="file"],
.form-row select,
.form-row textarea,
.form-row input[type="range"]{
  color: var(--text);
  border-radius: 20px;
  padding: 7px 9px;
  outline: none;
}
.form-row input[type="color"]{
    padding: 0;
    height: 40px;
}
.form-row input[type="range"]{ padding: 6px; }
.form-row textarea{ resize: vertical; min-height: 70px; }
.flyout-row input{padding: 1px 2px !important;border-radius: 5px !important;width: 80px;}
.flyout-row input[type="text"]{padding: 1px 5px !important;border-radius: 10px !important;width: 100%;}
/* --admin group select feilds-- */
.flex-3 label{ display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.flex-3 input[type="text"],
.flex-3 input[type="email"],
.flex-3 input[type="url"],
.flex-3 input[type="color"],
.flex-3 input[type="file"],
.flex-3 select,
.flex-3 textarea,
.flex-3 input[type="range"]{
  background: var(--muted);
  color: var(--text);
  border: var(--line);
  border-radius: 20px;
  padding: 8px 8px;
  outline: none;
}
.flex-3 input[type="color"]{
    padding: 0;
    height: 40px;
}
.flex-3 input[type="range"]{ padding: 6px; }
.flex-3 textarea{ resize: vertical; min-height: 70px; }

.toggle{display: inline-flex;align-items: center;gap: 8px;border: 0 !important;}
.toggle input{ accent-color: var(--primary); }
.chatbar{width: 100%;}
.avatar-preview{ display: flex; align-items: center; justify-content: flex-start; }
.avatar-preview img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: var(--line);
  object-fit: cover;
  background: var(--muted);
  align-self: end;
}

.sliders label { display:flex; flex-direction: column; gap: 6px; }

.code {background: rgba(0,0,0,.35);border: var(--line);border-radius: 10px;padding: 10px;overflow:auto;}
#emailDetails .code{height: 50vh;width: 15vw;padding: 3px;font-size: .6rem;scrollbar-width: none;letter-spacing: 1px;}
#notifPanel.sheet[hidden]{ display:block; transition: transform .82s ease; }
#notifPanel.sheet:not([hidden]){ transform: translateX(0); transition: transform .52s ease; }
#notifGroups{padding: 5px;display: grid;gap: 5px;scrollbar-width: none;}
.notif-item{background:linear-gradient(20deg, var(--primary-faded), var(--bg));border-radius: 10px;padding: 5px;}
/* Sheets / Panels */
.sheet {
  position: fixed;
  right: 12px;
  top: 12px;
  bottom: 12px;
  width: 350px;
  background: var(--surface);
  border: var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  overflow: auto;
  scrollbar-width: none;
  z-index: 50;
  transform: translateY(-105%);
}
.sheet-header { display:flex; align-items:center; justify-content: space-between; padding: var(--pad); border-bottom: var(--line); }
.sheet-body { padding: var(--pad); overflow:auto; }

/* Command Palette */
.cmdk { border: none; padding: 0; background: var(--muted); }
.cmdk::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.cmdk-inner { width: min(720px, 92vw); background: var(--surface); border: var(--line); border-radius: 12px; margin: 15vh auto; padding: 10px; box-shadow: var(--shadow); }
#cmdkInput { width: 100%; height: 48px; border-radius: 10px; padding: 0 12px; background: var(--muted); border: var(--line); outline: none; }
.cmdk-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow:auto; display:flex; flex-direction:column; gap: 6px; }
.cmdk-list li { padding: 10px; border-radius: 8px; }
.cmdk-list li[aria-selected="true"], .cmdk-list li:hover { background: rgba(255,255,255,.06); }
.cmdk-hint { color: var(--text-muted); font-size: 12px; padding: 8px 4px 4px; text-align: right; }

/* Toasts */
.toasts { position: fixed; right: 12px; bottom: 12px; display:flex; flex-direction: column; gap: 8px; z-index: 6000; }
.toast { background: var(--surface); border: var(--line); border-left: 4px solid var(--primary); border-radius: 8px; padding: 10px 12px; box-shadow: var(--shadow); animation: slide-in-out 5s ease-in-out forwards;}
@keyframes slide-in-out {
  0%   { transform: translateX(-100vw); opacity: 0; }
  10%  { transform: translateX(0);       opacity: 1; }
  90%  { transform: translateX(0);       opacity: 1; }
  100% { transform: translateX(100vw);   opacity: 0; }
}

/* Accessibility & Focus */
:focus-visible { border-radius: 10px; outline: none !important; outline-offset: 2px; }

/* Hidden scrollbar for WebKit browsers */
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .sheet-body::-webkit-scrollbar {display: none;}

/* Optional: consistent sizing for the confirm panel */
#logoutConfirm .modal-card {
  max-width: 420px;
  width: 100%;
}
#logoutConfirm .modal-body {
  padding: 8px 0 16px;
}

/* Responsive */
@media (min-width: 1440px) {
  .grid-cards { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 900px){
  .dashboard .dash-row, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-cards { grid-template-columns: 1fr 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .split.two { grid-template-columns: 1fr; }
  .sidebar.open { transform: translateX(0); }
  .app-body{ grid-template-columns: 1fr; grid-template-areas: "main"; }
  .sidebar{
    position: fixed; 
    visibility: visible !important; 
    pointer-events: auto !important; 
    top: 10px; bottom: 0; left: 10px; 
    width: var(--sidebar-w); 
    max-width: 80vw;
    height: auto;
    background: var(--surface, #111418); 
    transform: translateX(-100%); 
    z-index: 1100; transition: 
    transform .2s ease; }
  body.sidebar-open .sidebar{ transform: translateX(0); }

  /* Scrim blocks background clicks and dims content */
  #sbScrim{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.sidebar-open #sbScrim{
    opacity: 1;
    pointer-events: auto;
  }

  /* Prevent content squeeze class from doing anything on mobile */
  .app-body.sidebar-collapsed{
    grid-template-columns: 1fr;
  }
}

/* --- Admin Users Manager (scoped) --- */
#adminUsersCard .priv-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  padding: 8px;
  background: rgba(255,255,255,.03);
  border: var(--line);
  border-radius: 8px;
}
#adminUsersCard .priv-checks label {
  display: flex; align-items: center; gap: 8px;
}
#adminUsersCard .form-inline {
  display: flex; gap: 8px; align-items: center;
}

/* Multi-select dropdown (Admin Users) */
#adminUsersCard details.ms { position: relative; }
#adminUsersCard details.ms .ms-trigger { cursor: pointer; }
#adminUsersCard details.ms .ms-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow: auto;
  background: var(--surface);
  border: var(--line);
  border-radius: 8px;
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 20;
}
#adminUsersCard details.ms[open] .ms-menu { display: block; }
#adminUsersCard .ms-menu .row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
#adminUsersCard .ms-menu label { display: flex; align-items: center; gap: 8px; width: 100%; }
#adminUsersCard .ms-menu strong { font-weight: 600; }
#adminUsersCard .ms-menu small { color: var(--text-muted); display: block; }


.avatar.sm{width:28px;height:28px;border-radius:50%;padding: 1px;object-fit:cover;background:#e5e7eb;display:inline-block;}
.avatar.sm.initials{display:inline-grid;place-items:center;font-weight:600;color:#374151;padding: 10px;align-content: center;}
.row.gap{display:flex;gap:10px;align-items:center}
.chip.perm{display:inline-block;border:1px solid #e5e7eb;border-radius:999px;padding:.15rem .5rem;font-size:.8rem;margin:.1rem .25rem .1rem 0}
.perm-wrap .chips{display:inline}
.perm-wrap .chips.extra{margin-left:.5rem}
.link-btn{background:none;border:none;color:#2563eb;cursor:pointer;font-size:.85rem}
.btn.xs{padding:.25rem .5rem;font-size:.8rem;border-radius:.375rem;border:1px solid #e5e7eb;background:#f9fafb}
.btn.xs.warn{color:#92400e;border-color:#fcd34d;background:#fffbeb}
.btn.xs.danger{color:#991b1b;border-color:#fecaca;background:#fef2f2}
tr.is-disabled{opacity:.6}
input[type="password" i]{
  background: var(--primary-faded);
  border-radius: 20px;
  color: var(--bg);
}
.form-row-3{
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 2.5fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.stack { display: flex; flex-wrap: wrap; gap: var(--gap); }
#listModalList.stack { display: block;}
input#profileName , input#profileEmail{ background: var(--primary-faded); padding-left: 5px; border-radius: 10px;}

/* Integrations grid */
.integrations-panels{ display:grid; gap: var(--space-4); }
.integrations-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
.integration-card{ display:flex; align-items:center; gap:12px; border: var(--line); border-radius: var(--radius); padding:12px; background: var(--surface); }
.integration-card .icon{ width:32px; height:32px; display:grid; place-items:center; background: var(--muted); border-radius:8px; font-size:18px; }
.integration-card .label{ font-weight:600; }
.integration-card .spacer{ flex:1; }
.integration-card.connected{ outline:2px solid color-mix(in oklab, var(--primary) 60%, transparent); }

/* Modal */
dialog::backdrop { background: rgba(0,0,0,.1); backdrop-filter: blur(3px); }
dialog.user-modal { border: none; padding: 0; }
.user-modal .modal-card {
  width: min(300px, 92vw);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: var(--pad);
}

#backToBottom {scale: 1;transition: scale 0.2s ease-in;color: var(--dots);border-radius: 20px;font-size: 10px;bottom: 86%;display: flex;position: sticky;margin-left: 50%;padding: 0 4px;background: var(--primary-dark);justify-content: center;align-items: center;font-size: 11px;width: 23px;height: 23px;}
#backToBottom[hidden]{ display: none; }
#backToBottom:hover {
  scale:1.1;
  color: var(--text-muted);
  border-radius: 30px;
  transition: scale .5s ease-out, color .5s ease;
}
#backToBottom .bi{font-size: 15px;width:15px;padding: 5px;display: flex;vertical-align: middle;justify-content: center;}

dialog {scrollbar-width: none;background: var(--surface);border-radius: 20px;border: none;box-shadow: var(--shadow);}
dialog#logoutConfirm .modal {background: var(--surface);}
dialog:not([open]) {display:none}
.modal-header{display: flex; justify-content: space-between; align-items: center; color: var(--text);display: flex;justify-content: space-between;align-items: center;}
.modal-body {color: var(--text);}
.user-modal header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 6px; }
.user-modal .muted { margin-top: 4px; }
.message-bubble .plain-text { white-space: pre-wrap; word-break: break-word; color: var(--text); }
.thread-actions {position: absolute;bottom: 5px;background: linear-gradient(to bottom, var(--surface), transparent);padding: 7px 5px;border-radius: inherit;}
.thread-actions-inner {display:flex;gap: .31rem;}
.kv { display: grid; grid-template-columns: 1fr; gap: 6px; }
.kv-row {display:flex;gap: 5px;align-items: baseline;flex-direction: column;margin-bottom: 1px;background: var(--dots);border-radius: 5px;padding: 5px 5px;}
.kv-row .k {width: 110px;color: var(--text-muted);font-size: .9em;text-decoration: underline;}
.kv-row .v {flex: 1;word-break: break-word;font: status-bar;}
.mt-sm { margin-top: 8px; }
/*#emailList.selectable {overflow:auto; width: 166px;}*/
.topbar #roleSelect { display: none !important; }
.mail.three-col {
    --col-left: 1fr;
    --col-center: 2fr auto;
    --col-right: 0fr;
    display: grid;
    grid-template-columns: var(--col-left) var(--col-center) var(--col-right);
    transition: grid-template-columns 240ms ease;
    margin: 0;
    }
#noteMeta{margin-top:8px;}
.mail.left-panel {background: transparent;backdrop-filter: var(--backdrop);height: 89.5vh;border-radius: var(--radius);padding: var(--pad);padding-right: 0;overflow-x: hidden;scrollbar-width: thin;scrollbar-color: var(--primary-faded) transparent;}
#emailList.list.selectable { list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 8px; }
#emailMailboxName.truncate {font-size: 1.1rem;padding: 10px 0;margin: 0;color: var(--text);}
.mail.right-actions {display: flex;margin-left: auto;margin-bottom: 5px;padding-right: 5px;gap: .3rem;}
.meta{display: flex;flex-wrap: wrap;justify-content: space-between;}
/* === HTML Email bubble (isolated via iframe) === */
:root {
  --email-bubble-w: min(680px, 100%);
}
#chatInfo{margin-right:-5px}
.chat-btns{display:flex;gap: 3px;font-size: 13px;}
.email-frame-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: var(--line);
  color: var(--surface) !important;
}

.email-iframe {
  display: block;
  width: 100%;
  color: var(--text);
  border: 0;
  /* Height is set dynamically from content; transform origin is handled in JS */
  height: 400px !important;
}

.email-zoom-ctrl {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 6px;
  background: var(--surface);
  border: var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.email-zoom-ctrl button {
  width: 24px; height: 24px; line-height: 1; border-radius: 6px;
  background: var(--muted);
}
.email-zoom-ctrl input[type="range"]{
  writing-mode: vertical-lr;  /* vertical orientation */
  direction: rtl;             /* keep min at the bottom (old behavior) */
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 100px;
}

/* === Attachments grid === */
.attachments {margin-top: 10px;}
.attch-card {
  position: relative;
  border: var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  cursor: pointer;
}
.attch-card .attch-thumb {
  aspect-ratio: 4/3;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--muted);
}
.attch-card .attch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attch-card .file-icon { font-weight: 700; letter-spacing: .03em; font-size: 14px; color: var(--text-muted); }
.attch-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 8px; font-size: 12px; color: var(--text-muted);
}
#pmPeopleDialog{transform:translateY(0)}
.attch-actions {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  border: var(--line);
}
.attch-card[aria-expanded="true"] .attch-actions { display: flex; }
.attch-card[data-saved="1"] .attch-actions .att-save { opacity: .6; pointer-events: none; }
/* Busy state for action buttons */
.is-busy { opacity: .6; pointer-events: none; }
[aria-busy="true"] { cursor: progress !important; }
.cal-events::-webkit-scrollbar { display: none; }
/* Base style for all placeholder elements */
.file-hero .placeholder {width: 38px; height: 38px}
.file-hero .placeholder[data-icon="doc"]   { background: url('/assets/img/filetypes/doc.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="sheet"] { background: url('/assets/img/filetypes/sheet.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="file"]  { background: url('/assets/img/filetypes/file.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="pdf"]   { background: url('/assets/img/filetypes/pdf.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="ppt"]   { background: url('/assets/img/filetypes/ppt.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="image"] { background: url('/assets/img/filetypes/image.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="zip"]   { background: url('/assets/img/filetypes/zip.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="code"]  { background: url('/assets/img/filetypes/code.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="audio"] { background: url('/assets/img/filetypes/audio.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="video"] { background: url('/assets/img/filetypes/video.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon="text"]  { background: url('/assets/img/filetypes/text.svg') center/contain no-repeat; }
.file-hero .placeholder[data-icon=""] { background: url('/assets/img/filetypes/unknown.svg') center/contain no-repeat; }
.media-missing { background: url('/assets/img/filetypes/missing.svg') center/contain no-repeat; }
/* Ensure main has positioning context for the overlay */
.main { position: relative; }

/* Optional: tweak messages look for Donna */
#assistantMessages .message .meta { font-size: 11px; margin-bottom: 4px; }
#assistantMessages .message .plain-text { white-space: pre-wrap; word-break: break-word; }
.info.icon-btn{position:fixed;bottom: 10px;width: 30px;height: 30px;right: 10px;z-index: 99999999;}

/* Liquid sidebar and container that wraps items under each nav section */
#sidebar .nav-group{
  margin: 0px -5px 0px;
  display: block;
  border-radius: 10px;
}
#sidebar .nav-group-title .nav-icon{display: none;}
#sidebar .nav-group .nav-group-title{
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text-muted);
  font-size: 10px;
  margin: 5px 5px 3px;
}
#sidebar .nav-group .nav-group-list{
  list-style: none;
  padding-left: 10px;
  margin :0;
  display: grid;
  gap: 0px;
}
.sidebar-icon .nav-group-title{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 5px;
  border-radius: 10px;
  background: var(--bg);
  border: var(--line);
}
.sidebar-icon .label {display:none}
.admin-topnav { display:flex; gap:.5rem; margin-bottom: 12px; }
.admin-topnav .tab { border:1px solid var(--line); background: var(--panel-2);
  padding: .45rem .75rem; border-radius: 8px; cursor: pointer; }
.admin-topnav .tab.active { background: var(--panel-3); border-color: var(--primary-faded); }

/* Scroll-top pill (chat older loader) */
.scroll-pill { position: sticky; top: 0; align-self: start; margin: 6px auto 8px;
  z-index: 2; border: 1px solid var(--line); background: var(--panel-2);
  padding: 2px 8px; border-radius: 999px; font-size: .85rem; display: inline-flex;
  align-items: center; gap: 6px; }
.scroll-pill .loading-dots { display: inline-flex; gap: 4px; line-height: 0; }
.scroll-pill .loading-dots i{ width:6px;height:6px;border-radius: 20px; background: currentColor; opacity:.7; animation: ldb 1s infinite both; }
.scroll-pill .loading-dots i:nth-child(2){ animation-delay:.15s; }
.scroll-pill .loading-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes ldb { 0%,80%,100%{transform:scale(.6);opacity:.4;} 40%{transform:scale(1);opacity:1;} }


/* Hide section heading text in icon-only (closed) mode */
.sidebar-icon #sidebar .nav-group .nav-group-list{ display:none; }

/* Keep group subtle in icon-only mode */
.sidebar-icon #sidebar .nav-group{
  padding: 5px;
  margin-left: -7px;
}

/* Small dot on nav items that have data-new */
.nav-group-list a[data-new]::after{
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background: var(--primary);
  display:inline-block;
  margin-left:.4rem;
  vertical-align: middle;
}
/* Active icon highlight when sidebar is closed (icon-only) */
.sidebar-icon #sidebar .nav-link.active > :first-child{
  border-radius: 24px;
  box-shadow: 0 0 10px 2px var(--primary), inset 0 0 0 2px var(--primary-faded);
  outline: 2px solid var(--primary-faded);
  transform: scale(1.08);
}

/* Ensure icons animate smoothly (used by liquid magnify) */
.sidebar-icon #sidebar .nav-link > :first-child{
  transition: transform .22s ease, filter .12s ease, box-shadow .12s ease;
  will-change: transform, filter, box-shadow;
}
/* New item dot on nav items */
.nav-group-list a.nav-link[data-new="1"]{ position: relative; }
.nav-group-list a.nav-link[data-new="1"]::after{
  content:'';
  position:absolute; top:6px; right:10px;
  width:8px; height:8px; border-radius:50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
.dm-row { display:flex; align-items:center; gap:.5rem; }
.dm-meta { flex:1; min-width:0; }
.dm-time {font-size: 9px;margin-left:.5rem;}

#chatSend.btn {margin-bottom: 5px !important;}
.composer-box{display: flex;position: sticky;bottom: 2vh;flex-wrap: wrap;gap: 8px;justify-content: center;pointer-events: none;z-index: 10;}

/* ── Web Elements (we-*) ───────────────────────────────────────────────────────── */
.we-layout { gap: var(--gap); }
.we-layout .toolbar { display:flex; align-items:center; gap:8px; }
.we-layout .toolbar .spacer { flex:1 1 auto; }
.we-layout .toolbar .icon-btn[aria-busy="true"] { opacity:.6; pointer-events:none; }
.we-layout #weLastRefresh { font-size: 12px; color: var(--text-muted); }
.we-templates-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
.we-templates-grid .tpl-card { border: var(--line); border-radius: var(--radius); padding: 12px; background: var(--muted); display:flex; flex-direction:column; gap:6px; }
.we-templates-grid .tpl-card header { font-weight: 600; }
.we-templates-grid .tpl-card .muted { font-size: 12px; color: var(--text-muted); }
.we-templates-grid .tpl-card .btn-row { display:flex; gap: 8px; justify-content: flex-end; }
.we-templates-grid .tpl-card button { font-size: 12px; }

.we-editor-open .three-col { grid-template-columns: var(--col-left, 1fr) 0fr var(--col-right, 3fr); }
.right-panel[hidden]{display:none;}
.editor-split { display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); align-items:start; }
.mini-preview { background: var(--surface); border: var(--line); border-radius: 10px; padding: 12px; min-height: 180px; }
.prop-panel { background: var(--surface); border: var(--line); border-radius: 10px; padding: 12px; max-height: 60vh; overflow:auto; }
.prop-panel .section { margin-bottom: 12px; }
.prop-panel .section header { font-weight: 600; margin-bottom: 6px; }
.prop-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.prop-grid label { display:flex; flex-direction:column; gap:4px; font-size: 12px; }
.prop-grid input[type="range"] { width:100%; }
.prop-grid input[type="number"] { width:100%; }
.prop-grid select, .prop-grid input, .prop-grid textarea { width:100%; }

/* Code mode */
.editor-body.code-mode .editor-split { display:none; }
.code-editor { display:block; }
.code-editor textarea { width:100%; min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border:1px solid var(--border); border-radius:10px; padding:10px; }
.code-editor .btn-row { display:flex; gap:8px; justify-content:flex-end; margin-top: 8px; }
.editor-body .form label { display:block; margin: 10px 0 6px; font-weight:600; }
.editor-body .form input[type="text"],
.editor-body .form input[type="number"],
.editor-body .form input[type="url"],
.editor-body .form textarea, 
.editor-body .form select { width:100%; padding:10px; border:1px solid var(--border); border-radius: 10px; background: #0e1116; color: var(--text); }

.preview-wrap.expanded {
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 2px;
  padding-top: 16px;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-wrap.expanded .we-preview-stage {
  max-width: 1280px;
  /* margin: 0 auto; */
  height: 90vh;
}

/* Parent row with caret */
.sidebar-icon #sidebar .nav-group .nav-group-title{width:30px;margin: 2px 8px 8px;background: none;}
.sidebar-icon #sidebar .nav-group .nav-group-title .label{display:none}
.sidebar-icon #sidebar .nav-icon{scale:1; transition: scale .3s ease-out}
.sidebar-icon #sidebar .nav-icon:hover{scale:1.2; transition:scale .3s ease}
.dashboard{height: 100.5vh;}
.dashboard-icon{
  border-radius:10px;
  padding: 8px 2px;
  display: flex;
  background: none;
  height: 30px;
  margin: 2px 0 -4px;
  margin-left: 3px;
  align-items: center;
}
.sidebar-icon .dashboard-icon{
  border:var(--line);
  padding: 5px;
  margin: 10px 0;
  margin-left: -2px;
}
.sidebar-icon #sidebar .nav-group-title{border-radius:10px;font-size: 0;}
#sidebar .nav-group-title{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 5px;
  border-radius: 6px;
}
.toggle-scope, .new-convo{width:25px;height:25px;display: grid;place-items: center;justify-content: center;background: var(--primary-faded);color: var(--text);border: var(--line);border-radius: 20px;}
/* === Icon-only flyout (right aligned) === */
#sbFlyout{
  position: fixed;
  display: none;
  z-index: 2000;
  transform: translateY(-50%);
  background: var(--surface);
  border: var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 200px;
  max-width: 320px;
  overflow: hidden;
}
#sbFlyout .title{
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: var(--line);
  background: rgba(255,255,255,.03);
}
#sbFlyout .body{padding: 6px;height: auto;max-height: 70vh;overflow: auto;margin-bottom: 0;}
#sbFlyout .body .nav-link{ display:flex; align-items:center; gap: 8px; padding: 8px 8px; border-radius: 8px; }
#sbFlyout .body .nav-link:hover .label {box-shadow:none !important}
#sbFlyout .body .nav-link:hover{ background: rgba(255,255,255,.06); }
#sbFlyout .arrow{
  position: absolute;
  left: -8px;
  top: 10px;
  width: 0; height: 0;
  border-right: 8px solid var(--surface);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(-1px 0 0 rgba(0,0,0,.15));
}
#sbFlyout .toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
}

#sbFlyout .toggle-row:hover{ background: rgba(255,255,255,.06); }
#sbFlyout .toggle-row .switch{ display:inline-flex; align-items:center; }
#sbFlyout .toggle-row .switch input{ width: 36px; height: 18px; }

@keyframes cal-swipe-left   { from{transform:translateX(0)} to{transform:translateX(-24px); opacity:.9} }
@keyframes cal-swipe-right  { from{transform:translateX(0)} to{transform:translateX( 24px); opacity:.9} }
.cal-grid.swipe-left  { animation: cal-swipe-left  180ms ease-in-out; }
.cal-grid.swipe-right { animation: cal-swipe-right 180ms ease-in-out; }



/* Layout Grid 3fr:1fr */
.files-layout-wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1rem;
  height: 97.8%;
  overflow: hidden;
  padding: 10px 0 0 10px;
  background: var(--surface);
  border-radius: 25px;
}

/* Left Panel */
.files-main-panel {
  display: flex;
  flex-direction: column;
  gap: .81rem;
  min-width: 0; /* Fix grid overflow */
}

/* Header Styling */
.files-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background: linear-gradient(182deg, var(--primary-faded), var(--bg));
  border-radius: 15px;
  padding: 0 10px;
}
.flsync-head{display:flex;gap:2px;background: linear-gradient(182deg, var(--primary-faded), var(--bg));justify-content: space-between;border-radius: 12px;padding: 9px 5px;align-items: center;}
.flsync-head h2{margin:0;font-size: 15px;}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Expandable Search */
.search-expander {
  display: flex;
  align-items: center;
  background: var(--primary-dark);
  border-radius: 99px;
  width: 25px;
  height: 25px;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
  position: relative;
}

.search-expander.expanded {
  width: 240px;
  background: var(--surface, #fff);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border: 1px solid var(--surface-2, #ddd);
}

.search-trigger-btn {
  min-width: 25px;
  height: 25px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
}

#fileSearchInput {
  border: none;
  background: transparent;
  outline: none;
  height: 100%;
  padding-right: 15px;
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.search-expander.expanded #fileSearchInput {
  opacity: 1;
  pointer-events: auto;
}

/* Header Controls */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.clean-select {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted, #666);
}

/* Grid/List View Modes */
.file-grid.list-mode {
  display: flex;
  flex-direction: column;
}
.file-grid.list-mode .file-card {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 .51rem;
  flex-direction: row !important;
  justify-content: space-between;
}
.file-grid.list-mode .file-hero{
  display: none !important;
}
.file-grid.list-mode .file-card header {
  display: contents; /* Flattens header children into the grid */
}

/* Right Sidebar */
.files-sidebar {
  border-left: 1px solid var(--primary-dark);
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
  scrollbar-width: none;
  justify-content: space-between;
}

/* Usage Gauge Canvas */
.storage-gauge-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 999px; /* Pill shape container if desired, or just layout */
  background: transparent;
}

.usage-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.usage-big-text { font-size: 28px; font-weight: 700; color: var(--text, #333); }
.usage-sub-text { font-size: 11px; color: var(--text-muted, #888); }

/* Blobs (File Types & Cloud) */
.sidebar-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted, #999);
  margin: 0;
  letter-spacing: 0.5px;
}
.acns{
  display:flex;
  justify-content:space-between;
  margin-bottom: 0.8rem;
}
.blob-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.blob-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem;
  background: var(--bg);
  border: var(--line);
  border-radius: 12px;
}

.blob-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--muted);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.blob-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blob-title { font-size: 13px; font-weight: 600; }
.blob-meta { font-size: 11px; color: var(--text-muted, #777); }

/* Cloud Progress Bar */
.cloud-prog-track {
  height: 4px;
  background: var(--dots);
  border-radius: 2px;
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
}
.cloud-prog-fill {
  height: 100%;
  background: var(--primary-light);
  border-radius: 2px;
}
.cal-anim-fade-out { opacity: 0; transform: translateX(-10px); transition: all 0.15s ease-in; }
.cal-anim-fade-in  { opacity: 0; transform: translateX(10px); animation: calSlideIn 0.2s forwards; }
@keyframes calSlideIn { to { opacity: 1; transform: translateX(0); } }
/* Empty State */
.cal-empty-state { 
  grid-column: 1 / -1; 
  padding: 2rem; 
  background: var(--surface-2, #f5f5f5); 
  border-radius: 8px; 
  margin: 1rem;
  border: 1px dashed var(--line, #ccc);
  text-align: center;
}
/* Event Delegation Helpers */
.cal-cell { cursor: default; }
.cal-cell:hover .cal-expand-btn { opacity: 1; }
.cal-expand-btn { opacity: 0; transition: opacity 0.2s; }