@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #12213B;
  --ink-2: #1A2E4D;
  --bg: #F3F5F9;
  --panel: #FFFFFF;
  --border: #E2E6ED;
  --text: #1B2430;
  --text-dim: #6B7686;
  --accent: #1FAE8E;
  --accent-dark: #178F75;
  --danger: #E5484D;
  --warn: #F5A623;
  --radius: 10px;
  /* Work Sans is self-hosted (no CDN, works fully offline/air-gapped) and only
     covers Latin glyphs - for Bengali characters the browser automatically
     falls back to the next fonts in this stack, which already include solid
     Bengali coverage on every OS (Windows/macOS/Android/iOS/Linux). */
  --font: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Stops the browser's native "pull down to refresh" gesture from firing on
   mobile Chrome/Safari. Without this, swiping down anywhere near the top of
   the page - including on the full-screen call overlay - reloads the whole
   page, which kills any in-progress call. */
html { overscroll-behavior-y: contain; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: var(--accent-dark); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  min-height: 100dvh;
  /* Grid (not flex) on purpose: with flex + justify-content:center, the
     footer's margin-top:auto below soaks up all the free space to glue
     itself to the bottom, leaving nothing for justify-content to center
     the card with - so the card ends up stuck near the top instead of
     the middle. A 1fr/auto grid gives the card its own row that's
     independently centered, and the footer keeps its own auto-height
     row below it, so the two no longer fight over the same free space. */
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 55%, #0E1930 100%);
  padding: 20px;
  overflow-y: auto; /* safety net: on a very short/zoomed-in window, scroll instead of clipping the footer below the fold */
}
.login-card {
  background: var(--panel);
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.15);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.login-brand .mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: #000E29;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 18px;
  overflow: hidden; flex: none;
}
.login-brand .mark img,
.sidebar-header .mark img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.login-brand .name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.login-brand .sub { font-size: 12px; color: var(--text-dim); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); }
.field input {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border);
  border-radius: 9px; font-size: 14px; outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }
.btn-primary {
  width: 100%; padding: 12px; border: none; border-radius: 9px;
  background: var(--accent); color: white; font-weight: 700; font-size: 14px;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-dark); }
.login-note {
  margin-top: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.brand-footer {
  text-align: center; font-size: 11px; color: #7C89A6; letter-spacing: 0.2px;
  padding: 12px 10px; margin-top: auto;
}
.brand-footer.on-light { color: var(--text-dim); }
.brand-footer a { color: inherit; text-decoration: none; }
.brand-footer .made-by { opacity: 0.8; }
.brand-footer .company { font-weight: 700; opacity: 0.95; }
.error-msg {
  background: #FDECEC; color: var(--danger); font-size: 13px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 14px; display: none;
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  height: calc(var(--app-vh, 1vh) * 100);
  height: 100dvh;
  overflow: hidden;
}
.sidebar {
  background: var(--ink);
  color: #E7ECF6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;   /* anchors .sidebar-more-menu popup */
  /* iOS PWA/webview status bar is "black-translucent" (see apple-mobile-
     web-app-status-bar-style in app.html), which draws the app's own
     content underneath the real time/battery/signal status bar instead of
     pushing it down automatically. Without this, the sidebar's own header
     row renders directly under - and visually collides with - the phone's
     status bar. env(safe-area-inset-top) is 0 on devices without a notch/
     status-bar overlay, so this is a no-op everywhere else. */
  padding-top: env(safe-area-inset-top, 0px);
}
.sidebar-header {
  padding: 18px 16px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-header .mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: #000E29;
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: white;
  overflow: hidden; flex: none;
}
.sidebar-header .title { font-weight: 700; font-size: 15px; }
.sidebar-header .subtitle { font-size: 11px; color: #9AA7C2; }

.me-bar {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
/* Small green dot on an avatar for someone who's online right now - used in
   the sidebar chat/staff list (see renderConvList in app.js) so who's
   available is visible at a glance without opening each chat. The border
   matches the sidebar background so the dot reads as "cut into" the avatar
   rather than just sitting on top of it. */
.avatar-online-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #2ecc71; border: 2px solid var(--ink);
  box-sizing: content-box;
}
.me-bar .me-name { font-size: 13px; font-weight: 600; }
.me-bar .me-role { font-size: 11px; color: #9AA7C2; }
.me-bar .icon-btn { margin-left: auto; }

.icon-btn {
  background: transparent; border: none; color: #C6CEE0;
  width: 30px; height: 30px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font-size: 15px;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); color: white; }

.tabs {
  display: flex; flex-wrap: nowrap; padding: 7px 8px 6px; gap: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Sidebar is a fixed 280px column even on wide desktop windows, so with
     6+ tabs (Chats/Calls/Meetings/Tasks/Email/Notice, +Admin/Monitor for
     some roles) there isn't room for one row at readable size - keep them
     on ONE line and let the row scroll horizontally instead of wrapping
     to a second row and eating into the conversation list below it. */
}
.tabs::-webkit-scrollbar { display: none; }
/* On touch devices swiping IS the scrollbar, so it stays hidden there (see
   above). A mouse has no swipe gesture though, and with 6+ tabs some were
   simply unreachable with no visible way to scroll to them - show a slim
   scrollbar only for fine-pointer (mouse/trackpad) input as a discoverable
   "slider", and mouse-wheel/drag scrolling is wired up in app.js too. */
@media (hover: hover) and (pointer: fine) {
  .tabs { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; cursor: grab; }
  .tabs::-webkit-scrollbar { display: block; height: 5px; }
  .tabs::-webkit-scrollbar-track { background: transparent; }
  .tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 3px; }
  .tabs::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }
  .tabs.drag-scrolling { cursor: grabbing; }
}
.tab-btn {
  flex: 0 0 auto; min-width: 50px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; background: transparent; border: none; color: #8996b3;
  padding: 5px 3px 6px; font-size: 9.5px; font-weight: 600; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.tab-btn svg { width: 15px; height: 15px; }
.tab-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab-btn:hover { background: rgba(255,255,255,0.06); color: #C6CEE0; }

/* Per-tab icon colors - every tab icon used to render in the same flat
   grey (stroke:currentColor at .tab-btn's own muted grey), so the whole
   sidebar read as plain black-and-white and tabs were hard to tell apart
   at a glance. Coloring only the icon (not .tab-btn's own `color`, which
   the label <span> also inherits) keeps the text labels calm/neutral and
   gives each tab a distinct, professional identity instead. Order matches
   the tab list in app.html. */
.tab-btn[data-tab="chats"] svg { stroke: #2563EB; }
.tab-btn[data-tab="calls"] svg { stroke: #16A34A; }
.tab-btn[data-tab="community"] svg { stroke: #7C3AED; }
.tab-btn[data-tab="meetings"] svg { stroke: #D97706; }
.tab-btn[data-tab="tasks"] svg { stroke: #059669; }
.tab-btn[data-tab="approvals"] svg { stroke: #0891B2; }
.tab-btn[data-tab="email"] svg { stroke: #DC2626; }
.tab-btn[data-tab="notices"] svg { stroke: #EA580C; }
.tab-btn[data-tab="brand"] svg { stroke: #DB2777; }
.tab-btn[data-tab="policies"] svg { stroke: #64748B; }
.tab-btn[data-tab="software"] svg { stroke: #4F46E5; }
.tab-btn[data-tab="hr"] svg { stroke: #0D9488; }
.tab-btn[data-tab="card"] svg { stroke: #9333EA; }
.tab-btn[data-tab="tools"] svg { stroke: #CA8A04; }
.tab-btn[data-tab="admin"] svg { stroke: #B91C1C; }
.tab-btn[data-tab="monitoring"] svg { stroke: #0284C7; }
.tab-btn[data-tab="integrations"] svg { stroke: #65A30D; }
.tab-btn[data-tab="social"] svg { stroke: var(--accent); }

/* The active/selected tab still gets one single strong accent-green
   highlight (same as before) so "you are here" stays instantly obvious,
   regardless of that tab's own color above - same specificity as the
   per-tab rules, so it must come after them to win. */
.tab-btn.active { color: white; background: var(--accent); }
.tab-btn.active svg { stroke: white; }
.tab-badge {
  position: absolute; top: 1px; right: 4px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--danger); color: white;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 0 0 2px var(--ink);
}

.conv-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
/* Without an explicit scrollbar style here, browsers fall back to the OS's
   default scrollbar - on Windows/Chrome that's a solid white track with
   up/down arrow buttons, which looks jarring against this dark sidebar.
   Match the thin, translucent look already used for .tabs above. */
.conv-list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }
.conv-list::-webkit-scrollbar { width: 7px; }
.conv-list::-webkit-scrollbar-track { background: transparent; }
.conv-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 6px; }
.conv-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }
.conv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; margin-bottom: 2px;
}
.conv-item:hover { background: rgba(255,255,255,0.06); }
.conv-item.active { background: rgba(31,174,142,0.18); }
.conv-item .conv-name {
  font-size: 13.5px; font-weight: 600; color: #EAEFF9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.conv-item .conv-preview {
  font-size: 11.5px; color: #93A0BC; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 170px;
}
.dot-online {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  position: relative; left: -12px; top: 11px; border: 2px solid var(--ink);
}
.unread-badge {
  background: var(--accent); color: white; font-size: 10.5px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 10px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* ---- Last-message time (WhatsApp-style: time top-right, unread badge/mute
   icon stacked underneath it) ---- */
.conv-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0; margin-left: 2px;
}
.conv-time {
  font-size: 10.5px; color: var(--text-dim); white-space: nowrap;
}
.conv-time.unread { color: var(--accent); font-weight: 700; }
.conv-meta-bottom { display: flex; align-items: center; gap: 4px; min-height: 18px; }

.new-chat-btn {
  margin: 10px 12px 14px; padding: 10px; border-radius: 9px;
  background: rgba(255,255,255,0.07); border: 1px dashed rgba(255,255,255,0.2);
  color: #C6CEE0; font-size: 12.5px; font-weight: 600;
}
.new-chat-btn:hover { background: rgba(255,255,255,0.12); }

.side-icon-toolbar {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  padding: 10px 10px 14px; flex-wrap: wrap; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px;
}
#sidebarMoreBtn { margin-left: auto; } /* "more" always sits at the far right of the row */
.side-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  color: #C6CEE0; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.side-icon-btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.side-icon-btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.side-icon-btn.primary:hover { background: var(--accent-dark, var(--accent)); }
.side-icon-btn.danger { background: rgba(229,72,77,0.16); border-color: rgba(229,72,77,0.45); color: #FF9B9E; }
.side-icon-btn.danger:hover { background: rgba(229,72,77,0.3); }

/* "More" popup for the sidebar footer - houses Starred/Broadcast/Community/
   Linked Devices/My Account so the footer bar itself stays 2 icons tall.
   (Camera/Search/Logout live as regular icons in the row above instead -
   see .side-icon-toolbar - not in this popup.) */
.sidebar-more-menu {
  position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 45;
  background: #1B2740; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  flex-direction: column; gap: 2px;
  max-height: 70vh; overflow-y: auto;
}
.sidebar-more-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; color: #E7ECF6; font-size: 13.5px;
  padding: 11px 10px; border-radius: 8px; text-align: left;
}
.sidebar-more-menu button:hover, .sidebar-more-menu button:active { background: rgba(255,255,255,0.07); }
.sidebar-more-menu button svg { flex-shrink: 0; opacity: 0.85; }
.sidebar-more-menu button.danger-item { color: #FF9B9E; }
.sidebar-more-menu button.danger-item:hover { background: rgba(229,72,77,0.14); }
.sidebar-more-menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 5px 6px; }

.emergency-btn {
  margin: 0 12px 14px; padding: 10px; border-radius: 9px;
  background: rgba(229,72,77,0.15); border: 1px solid rgba(229,72,77,0.4);
  color: #FF9B9E; font-size: 12.5px; font-weight: 700;
}
.emergency-btn:hover { background: rgba(229,72,77,0.28); }

.record-box {
  background: var(--bg); border: 1.5px dashed var(--border); border-radius: 10px;
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; padding: 12px; font-size: 12.5px; color: var(--text-dim);
}
.record-box video { max-width: 100%; max-height: 200px; border-radius: 8px; }

.emergency-overlay {
  position: fixed; inset: 0; background: rgba(18,10,10,0.88); z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.emergency-overlay.show { display: flex; }
.emergency-card {
  background: white; border-radius: 18px; padding: 32px 28px; max-width: 420px; width: 100%;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.emergency-siren { font-size: 44px; margin-bottom: 6px; animation: emg-pulse 1s infinite; }
@keyframes emg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.emergency-title { font-size: 18px; font-weight: 800; color: var(--danger); margin-bottom: 4px; }
.emergency-sender { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 14px; }
.emergency-body { font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; color: var(--text); white-space: pre-wrap; }
.emergency-body video, .emergency-body audio { max-width: 100%; border-radius: 10px; }
.emergency-card .btn-primary { background: var(--danger); }

/* ---------- Main chat panel ---------- */
.main {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg);
  /* Same iOS status-bar overlap issue as .sidebar above - every "page"
     rendered inside .main (Chats/Calls/Meetings/Tools/Admin/etc, all of
     which share this .main class) gets pushed clear of the status bar
     instead of its own header row sitting underneath it. */
  padding-top: env(safe-area-inset-top, 0px);
}
.chat-header {
  height: 62px; border-bottom: 1px solid var(--border); background: var(--panel);
  display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0;
}
.chat-header .title { font-weight: 700; font-size: 15px; }
.chat-header .status {
  font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A long group name had nowhere to stop growing, so it pushed the
   search/mute/call icons on the right straight off the edge of the
   screen (videoCallBtn - last in line - disappearing first). Let the
   title block shrink/truncate with an ellipsis instead, and keep the
   action icons at their natural size so they're never squeezed out. */
#chatTitleBlock { min-width: 0; flex: 1; overflow: hidden; }
.chat-header .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header .call-actions { flex-shrink: 0; }
.call-actions { margin-left: auto; display: flex; gap: 8px; }
.call-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border);
  background: white; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.call-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.call-btn.hangup { background: var(--danger); border-color: var(--danger); color: white; }

.messages {
  flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px;
  /* Without this, a flex child's default min-height is its CONTENT size
     (min-content), not 0 - so once a chat's message history got long
     enough, .messages refused to shrink to fit the space flex:1 gave it
     and instead grew past it, pushing the whole .main column taller than
     the viewport. The header (flex-shrink:0, first in that column) got
     dragged out of view along with it - it wasn't actually hidden, the
     entire chat panel had scrolled past it. Pinning min-height to 0 lets
     .messages correctly stop at its allotted space and scroll its own
     content internally instead, so the header now always stays put. */
  min-height: 0;
}
.empty-state {
  margin: auto; text-align: center; color: var(--text-dim); max-width: 320px;
}
.empty-state .big { font-size: 40px; margin-bottom: 10px; }
/* Only the Chats panel's empty-state gets the wider quick-nav tile grid -
   every other .empty-state usage (calls list, tasks, notices, HR panels,
   etc.) keeps the narrow 320px default above untouched. */
.chats-empty-state {
  max-width: 460px;
  /* .empty-state centers itself with `margin:auto` inside .messages'
     flex column. An auto side-margin makes a flex item size to its own
     content (fit-content) instead of taking a definite width from the
     container - and a `grid-template-columns: repeat(auto-fill, ...)`
     grid needs a DEFINITE container width to know how many tracks fit.
     Without one, auto-fill has no width to divide up and falls back to
     a single 1fr track, which is exactly why the quick-nav tiles were
     collapsing into one full-width column on every screen size instead
     of wrapping responsively. Giving it an explicit width (still capped
     by max-width above, and still centered by the inherited auto side
     margins) restores a definite width for the grid to size against. */
  width: 100%;
}
.chats-empty-state .tools-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.chats-empty-state .tools-subtab-btn svg { width: 26px; height: 26px; }

.msg-row { display: flex; gap: 10px; max-width: 62%; margin-bottom: 10px; }
.msg-row.mine { margin-left: auto; flex-direction: row-reverse; }
.msg-row .avatar { width: 28px; height: 28px; font-size: 11px; margin-top: 2px; }
.msg-bubble-wrap { display: flex; flex-direction: column; gap: 2px; }
.msg-sender { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.msg-row.mine .msg-sender { text-align: right; }
.msg-bubble {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 9px 13px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.msg-row.mine .msg-bubble { background: #D9FDD3; color: #111B21; border-color: #BEEFB2; }
.msg-time { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.msg-row.mine .msg-time { text-align: right; }
.tick-wrap { display: inline-flex; vertical-align: -2px; margin-left: 3px; }

.emergency-msg .msg-bubble {
  border: 1.5px solid var(--danger) !important;
  background: #FDECEC !important;
  color: var(--text) !important;
}
.emergency-msg .msg-sender { color: var(--danger); }
.emergency-msg .msg-sender::before { content: "🚨 "; }

.file-bubble {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
}
.file-bubble .file-name { font-size: 13px; font-weight: 600; }
.file-bubble .file-size { font-size: 11px; opacity: 0.75; }

.media-bubble { padding: 0; overflow: hidden; }
.media-trigger {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; min-width: 220px;
}
.media-play-btn {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(18,33,59,0.75);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.media-meta .file-name { font-size: 13px; font-weight: 600; }
.media-meta .file-size { font-size: 11px; opacity: 0.75; }
.media-loading { font-size: 12.5px; color: var(--text-dim); padding: 4px 0; }

.photo-bubble { padding: 0; overflow: hidden; cursor: pointer; width: 240px; max-width: 100%; }
.photo-bubble img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.photo-bubble .photo-loading { padding: 60px 12px; text-align: center; color: var(--text-dim); font-size: 12.5px; background: var(--bg); width: 240px; max-width: 100%; box-sizing: border-box; }

/* ---------- Photo viewer ---------- */
.photo-viewer-overlay {
  position: fixed; inset: 0; background: #000; z-index: 160; display: none;
  flex-direction: column;
}
.photo-viewer-overlay.show { display: flex; }
.pv-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; color: #fff; flex-shrink: 0;
}
.pv-icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12);
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv-icon-btn:hover { background: rgba(255,255,255,0.22); }
.pv-meta { text-align: center; min-width: 0; }
.pv-sender { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-date { font-size: 11.5px; opacity: 0.75; }
.pv-stage {
  flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; position: relative; cursor: grab;
}
.pv-stage.grabbing { cursor: grabbing; }
.pv-stage img {
  max-width: 92%; max-height: 88%; object-fit: contain; user-select: none;
  transition: transform 0.08s linear;
  will-change: transform;
}
.pv-actionbar {
  /* justify-content: center (was default stretch) - previously each
     .pv-action grew with flex:1 to fill the whole bar's width, which is
     what spread the icons far apart from each other even though the gap
     value itself was small. Centering + flex: 0 0 auto below lets the
     buttons sit right next to each other instead of being stretched. */
  display: flex; gap: 2px; padding: 10px 8px; overflow-x: auto; flex-shrink: 0;
  background: rgba(255,255,255,0.04); justify-content: center;
}
.pv-action {
  flex: 0 0 auto; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: #fff; padding: 8px 6px; border-radius: 10px; font-size: 10.5px;
}
.pv-action:hover { background: rgba(255,255,255,0.12); }
.pv-edit-toolbar {
  display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 12px;
  background: rgba(255,255,255,0.06); flex-shrink: 0;
}
.pv-edit-btn {
  border: none; background: rgba(255,255,255,0.12); color: #fff; padding: 9px 14px;
  border-radius: 9px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.pv-edit-btn:hover { background: rgba(255,255,255,0.22); }
.pv-edit-btn.pv-edit-save { background: var(--accent, #1FAE8E); }
.pv-edit-btn.pv-edit-cancel { background: transparent; opacity: 0.8; }
.pv-edit-btn.pv-edit-crop.active { background: var(--accent, #1FAE8E); }

/* Crop box overlay - draggable/resizable rectangle shown over the photo
   while cropping. The oversized box-shadow darkens everything outside the
   box; .pv-stage's overflow:hidden clips it to the stage. */
.pv-crop-box {
  position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  cursor: move; touch-action: none; box-sizing: border-box;
}
.pv-crop-handle {
  position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45); touch-action: none;
}
.pv-crop-handle-nw { top: -9px; left: -9px; cursor: nwse-resize; }
.pv-crop-handle-ne { top: -9px; right: -9px; cursor: nesw-resize; }
.pv-crop-handle-sw { bottom: -9px; left: -9px; cursor: nesw-resize; }
.pv-crop-handle-se { bottom: -9px; right: -9px; cursor: nwse-resize; }

.messages.has-wallpaper { background-size: cover; background-position: center; background-repeat: no-repeat; }

.offline-empty-state {
  margin: auto;
  max-width: 320px;
  text-align: center;
  color: var(--text-secondary, #667781);
  font-size: 14px;
  padding: 16px 20px;
  background: var(--bg-secondary, rgba(255,255,255,0.9));
  border-radius: 10px;
}

.composer {
  border-top: 1px solid var(--border); background: var(--panel);
  padding: 10px 10px; display: flex; align-items: flex-end; gap: 6px; flex-shrink: 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.composer textarea {
  flex: 1; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px;
  font-size: 14px; resize: none; max-height: 140px; outline: none; min-width: 0;
}
.composer textarea:focus { border-color: var(--accent); }
.composer .send-btn, .composer .attach-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.composer .send-btn { background: var(--accent); color: white; }
.composer .attach-btn { background: var(--bg); border: 1.5px solid var(--border); color: var(--text-dim); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,16,30,0.55);
  display: none; align-items: center; justify-content: center; z-index: 120; padding: 16px;
  /* Must render above .call-overlay (z-index 100 full-screen / 90 minimized) -
     otherwise any modal opened during an active call (file-send preview,
     guest invite links, task/poll creation, etc.) silently renders behind
     the call and looks like it "didn't open" even though it did. */
}
.modal-overlay.show { display: flex; }
.modal {
  background: white; border-radius: 14px; width: 100%; max-width: 440px;
  max-height: 86vh; overflow-y: auto; padding: 22px;
}
.modal h3 { margin: 0 0 16px; font-size: 16px; }
.modal .close-x {
  float: right; background: none; border: none; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
}
.modal .close-x:hover { background: var(--bg); color: var(--text); }
.file-badge {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 9.5px; letter-spacing: 0.3px;
}
.people-list {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 14px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.people-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.people-row:last-child { border-bottom: none; }
.people-row input[type=checkbox] { margin-left: auto; width: 16px; height: 16px; }

.modal-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg); border-radius: 9px; padding: 4px; }
.modal-tab-btn {
  flex: 1; border: none; background: transparent; padding: 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.modal-tab-btn.active { background: white; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.chat-media-modal { max-width: 480px; }
.chat-media-body { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cm-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-media-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg); border-radius: 10px; padding: 14px 6px; cursor: pointer; text-align: center;
}
.cm-media-tile:hover { background: var(--border); }
.cm-media-tile .file-badge { width: 34px; height: 34px; font-size: 9px; }
.cm-media-tile .cm-tile-name { font-size: 10.5px; color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-list-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.cm-list-row:last-child { border-bottom: none; }
.cm-list-row:hover { background: var(--bg); }
.cm-row-meta { flex: 1; min-width: 0; }
.cm-row-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row-sub { font-size: 11.5px; color: var(--text-dim); }
.cm-link-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center; color: var(--primary, #4f6ef7);
}
.cm-empty { padding: 30px 10px; text-align: center; color: var(--text-dim); font-size: 13px; }

.avatar-preview {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg); border: 1.5px dashed var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Same idea as .avatar-preview but a rounded square, not a circle - company
   logos are usually wide/rectangular marks and a circular crop cuts them off. */
.logo-preview {
  width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg); border: 1.5px dashed var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); overflow: hidden;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.unit-logo-thumb {
  width: 34px; height: 34px; border-radius: 8px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--border);
}
.btn-secondary-sm {
  display: inline-block; padding: 6px 12px; border-radius: 7px; border: 1.5px solid var(--border);
  background: white; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer;
}
.btn-secondary-sm:hover { border-color: var(--accent); color: var(--accent-dark); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.people-row .contact-line { font-size: 11px; color: var(--text-dim); }

/* ---------- Company Software directory ---------- */
.software-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.software-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 16px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: white; cursor: pointer;
}
.software-card:hover { border-color: var(--accent); }
.software-card .software-logo {
  width: 56px; height: 56px; border-radius: 10px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--border);
}
.software-card .software-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.software-card .software-units { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.software-card .software-admin-actions {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 4px;
}

/* ---------- Visiting Card ---------- */
.visiting-card-wrap {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 14px;
  min-height: 220px; padding: 16px;
}
.visiting-card-loading { font-size: 13px; color: var(--text-dim); }
.visiting-card-img { max-width: 100%; border-radius: 10px; box-shadow: 0 4px 18px rgba(18,33,59,0.14); }
.visiting-card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Call overlay ---------- */
.call-overlay {
  position: fixed; inset: 0; background: #0B1424; z-index: 100; display: none;
  flex-direction: column;
  transition: all 0.2s ease;
  overflow: hidden; /* never let video tiles push the control bar off-screen */
  overscroll-behavior: none; touch-action: pan-x pan-y; /* belt-and-braces against pull-to-refresh while a call is up, on top of the html/body rule above */
  /* height:100dvh (where supported) instead of relying purely on inset:0's
     computed height - on some mobile browsers the address/toolbar chrome
     showing/hiding around a "ringing"/offline call could leave the fixed
     overlay's layout box shorter than the real visible screen, which let
     .call-controls (see below) end up stranded high up with a big empty
     gap underneath it instead of pinned to the true bottom of the screen. */
  height: 100vh; height: 100dvh;
}
.call-overlay.show { display: flex; }
.call-overlay.minimized {
  inset: auto; top: 74px; right: 14px; width: 200px; height: 130px;
  border-radius: 14px; overflow: hidden; z-index: 90;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4); cursor: grab;
  /* Own drag handling (initMinimizedCallDrag in app.js) needs full control
     of touch gestures on this little window - without this, touch drags
     get eaten by the browser's own scroll/pan gesture instead. */
  touch-action: none;
}
.call-overlay.minimized:active { cursor: grabbing; }
.call-overlay.minimized .call-videos { padding: 0; gap: 2px; }
.call-overlay.minimized .video-tile { min-height: 0; border-radius: 0; }
.call-overlay.minimized .call-recording-banner { display: none !important; }
.call-overlay.minimized .call-controls { display: none; }
.call-overlay.minimized .call-more-menu { display: none !important; }
.call-overlay.minimized .mini-hangup {
  display: flex; position: absolute; bottom: 6px; right: 6px; z-index: 2;
}
.mini-hangup {
  display: none;
  width: 30px; height: 30px; border-radius: 50%; border: none; font-size: 13px;
  background: var(--danger); color: white; align-items: center; justify-content: center;
}
.call-add-btn {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.14); color: white; display: flex; align-items: center; justify-content: center;
}
.call-add-btn:hover { background: rgba(255,255,255,0.24); }
.call-overlay.minimized .call-add-btn { display: none; } /* only in the full-screen call view, like WhatsApp */
.call-switch-cam-btn {
  position: absolute; top: 62px; right: 14px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.14); color: white; display: flex; align-items: center; justify-content: center;
}
.call-switch-cam-btn:hover { background: rgba(255,255,255,0.24); }
.call-overlay.minimized .call-switch-cam-btn { display: none !important; } /* only in the full-screen call view */
.call-videos {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* Rows share the available height equally instead of shrink-wrapping to
     each tile's min-height - without this, a call with just 1-3 people left
     the tiles sitting small at their minimum size with dead empty space
     below them instead of growing to fill the screen. */
  grid-auto-rows: 1fr;
  gap: 8px; padding: 12px;
  min-height: 0;     /* allow the grid to shrink instead of forcing the overlay to overflow */
  overflow-y: auto;  /* extra participants scroll here instead of hiding the control bar */
  align-content: stretch;
}
.call-videos video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: #10192B;
}
.video-tile { position: relative; min-height: 160px; display: flex; }
.video-tile video { flex: 1; min-height: 0; }
.video-tile.screen-tile { grid-column: 1 / -1; min-height: 320px; background: #10192B; }
.video-tile.screen-tile video { object-fit: contain; }
.video-tile .name-tag {
  position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.5);
  color: white; font-size: 11px; padding: 3px 8px; border-radius: 6px;
}
.call-controls {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 12px;
  flex-shrink: 0;        /* always keep full size - never get squeezed out by the video grid */
  /* Belt-and-braces WhatsApp-style bottom pinning: even if a sibling above
     (audio-call-info / call-videos) somehow doesn't fill the remaining
     flex space, margin-top:auto still forces this bar all the way down to
     the bottom of the call screen rather than floating up under the
     status banner. */
  margin-top: auto;
  width: 100%;
}
.call-controls-row {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; row-gap: 14px; width: 100%;
}
.call-btn-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 60px;
}
.call-btn-label {
  font-size: 11.5px; color: rgba(255,255,255,0.85); text-align: center; line-height: 1.15;
}
.call-controls button {
  width: 52px; height: 52px; border-radius: 50%; border: none; font-size: 18px;
  background: #1E2A42; color: white; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.call-controls button.hangup { background: var(--danger); }
.call-controls button.active-off { background: var(--warn); color: #1B1B1B; }

/* "More" popup - houses message/emoji/record/invite/minimize so the main
   call bar stays a clean, WhatsApp-style 2 rows of 3 labeled buttons. */
.call-more-menu {
  position: absolute; left: 12px; right: 12px; bottom: 110px; z-index: 5;
  background: #17233A; border-radius: 14px; padding: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  flex-direction: column; gap: 2px;
}
.call-more-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; color: white; font-size: 14px;
  padding: 12px 10px; border-radius: 8px; text-align: left;
}
.call-more-menu button:hover, .call-more-menu button:active { background: rgba(255,255,255,0.06); }
.call-more-menu button svg { flex-shrink: 0; }

/* Audio-only call: hide the (empty/black) video grid but keep it in the DOM
   so remote/local <video> elements keep playing audio, and show a
   WhatsApp-style avatar + name + timer instead. */
.call-overlay.audio-mode .call-videos {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.audio-call-info {
  display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: white; text-align: center;
}
.call-overlay.audio-mode .audio-call-info { display: flex; }
/* WhatsApp-style: the other person's (bigger) circle and your own (smaller,
   overlapping bottom-right) circle shown together while an audio call is
   ringing/connected, instead of only the other person's avatar alone. */
.audio-call-avatars { position: relative; display: inline-block; }
.audio-call-avatar {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #1E2A42;
}
.audio-call-avatar img { width: 100%; height: 100%; object-fit: cover; }
.audio-call-avatar .avatar-fallback {
  width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 34px; color: white;
}
.audio-call-avatar-self {
  position: absolute; right: -8px; bottom: -8px;
  width: 52px; height: 52px; border: 3px solid #0B1424; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.audio-call-avatar-self .avatar-fallback { font-size: 16px; }
.audio-call-name { font-size: 19px; font-weight: 600; }
.audio-call-timer { font-size: 13.5px; color: var(--text-dim); }

/* Video-call duration badge (see #callDurationBadge in app.html) - a video
   call has no avatar-centered timer like audio-mode does (the video grid
   fills that space instead), so this floats a small pill at the top of the
   screen instead. Hidden by default/in audio-mode (that flow already shows
   its own bigger timer via .audio-call-timer above) and whenever the call
   overlay itself isn't showing, so it can't flash stale "00:00" before a
   call actually starts or linger after one ends.
   Gated on .connected (added by startCallTimer(), removed by
   stopCallTimer() - see app.js), NOT just .show, because it shares the
   exact same top-center position as .call-status-banner below - while a
   video call is still dialing/ringing, .call-status-banner is the one
   showing "কল করা হচ্ছে..."/"Ringing...", and this badge rendering at the
   same time (as it did before .connected existed - it only checked
   .show:not(.audio-mode), true from the moment dialing starts) drew a
   "00:00" pill directly on top of that text, both fighting for the same
   spot. */
.call-duration-badge {
  display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.45); color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.3px; padding: 5px 13px; border-radius: 20px; z-index: 5; pointer-events: none;
}
.call-overlay.show.connected:not(.audio-mode) .call-duration-badge { display: block; }
.call-overlay.minimized .call-duration-badge { top: 4px; font-size: 10px; padding: 3px 8px; }

/* Lock badge shown once the call's E2EE key handshake has completed - see
   #e2eeBadge in app.html and CallEngine.on('e2eeStatus', ...) in app.js.
   Sits just under the duration badge/status banner rather than fighting
   them for the same top-center spot. */
.e2ee-badge {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  background: rgba(20,120,60,0.55); color: #fff; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.2px; padding: 4px 12px; border-radius: 20px; z-index: 5; pointer-events: none;
}
.call-overlay.minimized .e2ee-badge { display: none; }

/* Safety-number modal - see #safetyNumberModal in app.html */
.safety-number-digits {
  font-family: 'Courier New', monospace; font-size: 17px; font-weight: 700;
  letter-spacing: 1.5px; text-align: center; line-height: 1.9;
  background: rgba(20,120,60,0.08); border: 1px solid rgba(20,120,60,0.25);
  border-radius: 10px; padding: 14px 10px; word-spacing: 6px;
  white-space: pre-line;
}

/* Minimized (PIP) call bar during an audio call: the full-screen avatar
   sizing (120px) doesn't fit the small 200x130 minimized box - it was
   overflowing and getting clipped by the box's overflow:hidden, so the
   caller/receiver photo effectively never showed while minimized. This
   scales everything down to actually fit, WhatsApp-style compact bar. */
.call-overlay.minimized .audio-call-info { gap: 2px; padding: 4px; }
.call-overlay.minimized .audio-call-avatar { width: 46px; height: 46px; }
.call-overlay.minimized .audio-call-avatar .avatar-fallback { font-size: 15px; }
.call-overlay.minimized .audio-call-avatar-self {
  width: 20px; height: 20px; right: -4px; bottom: -4px; border-width: 2px;
}
.call-overlay.minimized .audio-call-avatar-self .avatar-fallback { font-size: 8px; }
.call-overlay.minimized .audio-call-name { font-size: 11.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-overlay.minimized .audio-call-timer { font-size: 10px; }

/* Quick emoji reactions during a call */
.call-emoji-picker {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border-radius: 14px; padding: 8px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35); z-index: 101; gap: 6px;
}
.call-emoji-picker button {
  border: none; background: transparent; font-size: 22px; padding: 4px 6px; cursor: pointer;
}
.call-overlay.minimized ~ .call-emoji-picker { display: none !important; }

.incoming-call-toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--panel); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2); padding: 16px; width: 280px; z-index: 90; display: none;
}
.incoming-call-toast.show { display: block; }
.incoming-call-toast .row { display: flex; gap: 10px; }
.incoming-call-toast .actions { display: flex; gap: 8px; margin-top: 12px; }
.incoming-call-toast button {
  flex: 1; padding: 8px; border-radius: 8px; border: none; font-weight: 700; font-size: 13px;
}
.incoming-call-toast .accept { background: var(--accent); color: white; }
.incoming-call-toast .decline { background: #F2F3F6; color: var(--text); }

/* New-message alert toast - same corner/shape language as the incoming-call
   toast, but no action buttons (tapping it just opens the chat) and a
   lower z-index than call UI (90/100/110), since an incoming call should
   still win visually if both happen to land at once. */
.message-alert-toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--panel); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2); padding: 14px; width: 280px; z-index: 80; display: none;
  cursor: pointer; border: 1.5px solid var(--border);
}
.message-alert-toast.show { display: block; }
.message-alert-toast .row { display: flex; gap: 10px; align-items: center; }

/* Call-waiting banner - same visual language as incoming-call-toast but
   smaller/quieter, and z-index 110 so it renders ABOVE .call-overlay
   (z-index 100) since it needs to show up while a call is already active. */
.call-waiting-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--panel);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.28); padding: 12px 14px; width: 260px;
  z-index: 110; display: none; border: 1.5px solid var(--accent);
}
.call-waiting-toast.show { display: block; }
.call-waiting-toast .row { display: flex; gap: 9px; align-items: center; }
.call-waiting-toast .actions { display: flex; gap: 7px; margin-top: 10px; }
.call-waiting-toast button {
  flex: 1; padding: 7px; border-radius: 8px; border: none; font-weight: 700; font-size: 12px;
}
.call-waiting-toast .accept { background: var(--accent); color: white; }
.call-waiting-toast .decline { background: #F2F3F6; color: var(--text); }

/* ---------- Admin panel ---------- */
.admin-view { padding: 24px 28px; overflow-y: auto; flex: 1; }
.admin-header { display: flex; align-items: center; margin-bottom: 18px; gap: 12px; }
.admin-header h2 { margin: 0; font-size: 18px; }
.admin-header .btn-primary { width: auto; padding: 9px 16px; margin-left: auto; }
.admin-search-input {
  width: 100%; max-width: 360px; padding: 9px 14px; margin-bottom: 14px;
  border: 1.5px solid var(--border); border-radius: 9px; font-size: 13px; font-family: inherit;
}
.admin-search-input:focus { outline: none; border-color: var(--accent); }
.calls-section-title { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; margin: 18px 0 8px; }
table.admin-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 10px; overflow: hidden; }
table.admin-table th, table.admin-table td {
  text-align: left; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border);
}
table.admin-table th { background: #F7F9FC; color: var(--text-dim); font-weight: 700; font-size: 11.5px; text-transform: uppercase; }
/* Lets a wide table (mainly the staff table's action column, which packs
   in ~11 buttons - see .admin-actions-cell below) scroll horizontally on
   narrower screens instead of squeezing every column to fit, which was
   crushing the action buttons into an unreadable, overlapping pile. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.table-scroll table.admin-table { border-radius: 0; }
/* Top slider that mirrors a .table-scroll box's horizontal scroll position.
   Placed above the table so a long staff list can be scrolled sideways
   without first scrolling all the way down to the table's own bottom
   scrollbar. Only shown (via JS) when the table actually overflows. */
.table-hscroll-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.table-hscroll-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.table-hscroll-arrow { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
/* The staff table's একশন (Action) column - every per-user action
   (edit/unit/enable-disable/reset password/2FA/delete/etc, ~11 buttons)
   lives in this one cell. Laid out as a fixed 5-column grid (rather than
   plain flex-wrap) so buttons land in neat, evenly-sized rows of exactly
   5 - however many buttons a row of text needs, it doesn't throw the grid
   off - wrapping to a new row of 5 once it runs out, instead of the
   ragged, differently-wide flex-wrap rows from before. Column width is
   wide enough for the longest label (e.g. "👥 গ্রুপ তৈরির অনুমতি দিন")
   without wrapping inside the button itself. This makes the cell wide
   (5 columns x ~170px), which is exactly what the .table-scroll wrapper
   and its top slider (#staffTableHScrollRow) are there to handle. */
.admin-actions-cell {
  display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 8px 10px;
  align-items: center; min-width: 890px; padding-top: 8px; padding-bottom: 8px;
}
.admin-actions-cell .small-btn { margin-right: 0; white-space: nowrap; width: 100%; box-sizing: border-box; text-align: center; }
.badge { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge.active { background: #E6F7F1; color: var(--accent-dark); }
.badge.inactive { background: #FDECEC; color: var(--danger); }
.badge.admin { background: #EDEBFB; color: #6C4FD9; }
.badge.broadcast { background: #FDECEC; color: var(--danger); }
.badge.stale { background: #F1F2F4; color: var(--text-dim); }

/* ---- Monitoring dashboard ---- */
.mon-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
}
.mon-stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.mon-stat-card .mon-stat-value { font-size: 22px; font-weight: 800; color: var(--text); }
.mon-stat-card .mon-stat-label { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.mon-active-calls { display: flex; flex-direction: column; gap: 10px; }
.mon-call-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mon-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0;
  box-shadow: 0 0 0 rgba(224,63,63,0.4); animation: monPulse 1.6s infinite;
}
@keyframes monPulse {
  0% { box-shadow: 0 0 0 0 rgba(224,63,63,0.4); }
  70% { box-shadow: 0 0 0 7px rgba(224,63,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,63,63,0); }
}
.mon-call-type { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.mon-call-participants { font-size: 13.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 160px; }
.mon-call-time { font-size: 11.5px; color: var(--text-dim); }
.mon-pair-names { font-weight: 600; }

/* ---- Call recording ---- */
.call-recording-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(229,72,77,0.92); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; z-index: 5; letter-spacing: 0.2px;
}
/* ---- Live in-call translation (see callTranslateBtn/translatePanel in
   app.html, wireTranslateControls() in app.js) ---- */
.translate-panel {
  position: absolute; left: 12px; right: 12px; bottom: 110px; z-index: 6;
  background: #17233A; border-radius: 14px; padding: 40px 16px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4); color: #fff;
}
/* Was `top: 10px; right: 10px` with no reserved space above the panel's
   content (padding-top was only 16px) - the button's own box (~26px tall,
   same as .modal .close-x) ended up sitting directly on top of the first
   .translate-toggle-row's checkbox below it. Same top-right corner, same
   stacking context, so the close button visually and functionally covered
   the "Translate my speech & send to others" checkbox - it could never be
   clicked, which looked exactly like "the ON checkbox doesn't show up".
   Fixed two ways together: give this button an explicit box (so it isn't
   however big the browser's default <button> padding happens to be) and
   give the panel enough padding-top (40px) to clear it, matching the
   26px-tall box positioned at top:10px. */
.translate-panel .close-x {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 26px; height: 26px; border-radius: 7px;
  background: none; border: none; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.translate-panel .close-x:hover { background: rgba(255,255,255,0.08); color: #fff; }
.translate-panel-section { margin-bottom: 14px; }
.translate-panel-section:last-child { margin-bottom: 0; }
.translate-panel-section > label:not(.translate-toggle-row) {
  display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
}
.translate-panel-section select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15);
  background: #0F1B2E; color: #fff; font-size: 13.5px;
}
.translate-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; margin-bottom: 10px; cursor: pointer;
}
.translate-save-default-row { margin-top: 10px; margin-bottom: 0; font-size: 12px; color: var(--text-dim); }
.translate-active-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(79,110,247,0.92); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; z-index: 5; letter-spacing: 0.2px;
}
/* When the recording banner is ALSO showing, don't let the two overlap -
   push the translation badge down below it. */
.call-recording-banner ~ .translate-active-badge { top: 46px; }

/* ---- Translator tool (Tools tab) - see toolsPanel-translator in app.html,
   initTranslatorTool() in app.js. Two people sharing one device, not tied
   to a call, so this gets its own plain (non-overlay) styling instead of
   reusing .translate-panel above. ---- */
.translator-mode-tabs { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.translator-mode-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; cursor: pointer; }
.translator-mode-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.translator-status { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-top: 10px; min-height: 16px; }
.translator-result-box { margin-top: 16px; }
.translator-line { padding: 10px 12px; border-radius: 10px; background: var(--bg-soft, rgba(128,128,128,0.08)); margin-bottom: 10px; }
.translator-line:last-child { margin-bottom: 0; }
.translator-line-label { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.translator-line-text { font-size: 14.5px; line-height: 1.4; word-break: break-word; }

/* ---- Call status ("রিং হচ্ছে...", "অফলাইনে আছেন", etc.) ---- */
.call-status-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; z-index: 5; letter-spacing: 0.2px;
}
.call-status-banner.offline { background: rgba(229,72,77,0.92); }
.call-overlay.minimized .call-status-banner { display: none !important; }
#toggleRecordBtn.active-on { color: var(--danger); }
#toggleRecordBtn.active-on svg { fill: var(--danger); }
#toggleRecordBtn.record-mandatory { opacity: 0.55; cursor: not-allowed; }

/* ---- Chat pin ---- */
.conv-pin-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px;
  flex-shrink: 0;
  /* display:none (not just opacity:0) so an inactive button reserves zero
     row width - previously it stayed in the flex row invisible but still
     taking up space, squeezing conv-name and forcing long names to
     truncate even when nothing was actually being shown there. */
  display: none;
}
.conv-item:hover .conv-pin-btn { display: inline-flex; }
.conv-item.pinned .conv-pin-btn { display: inline-flex; color: var(--accent); }
.pin-indicator { margin-right: 3px; }

/* ---- Favorites (WhatsApp-style) ---- */
.conv-fav-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px;
  flex-shrink: 0; font-size: 15px;
  display: none; /* same space-saving approach as .conv-pin-btn above */
}
.conv-item:hover .conv-fav-btn { display: inline-flex; }
.conv-fav-btn.active { display: inline-flex; color: #F5B300; }
.conv-search-wrap {
  display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px;
  padding: 8px 12px; background: rgba(255,255,255,0.06); border-radius: 9px;
  color: #8996b3; flex-shrink: 0;
}
.conv-search-wrap input {
  flex: 1; background: none; border: none; outline: none; color: #EAEFF9; font-size: 13px; font-family: inherit;
}
.conv-search-wrap input::placeholder { color: #6E7A99; }

.conv-filter-chips {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 5px 10px 2px; flex-shrink: 0;
  scrollbar-width: none;
}
.conv-filter-chips::-webkit-scrollbar { display: none; }
.conv-filter-chips .chip {
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; cursor: pointer;
  line-height: 1.6; flex-shrink: 0; white-space: nowrap;
}
.conv-filter-chips .chip.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ---- Message pin banner ---- */
.pinned-msg-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12.5px;
}
.pinned-msg-bar .pin-icon { flex-shrink: 0; }
.pinned-msg-bar .pinned-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pinned-msg-bar .pinned-count { color: var(--text-dim); font-size: 11px; }

/* ---- Attach menu ---- */
.attach-menu-wrap { position: relative; }
.attach-menu {
  position: absolute; bottom: 46px; left: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); overflow: hidden; z-index: 20; min-width: 150px;
}
.attach-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none;
  color: var(--text); font-size: 13px; cursor: pointer;
}
.attach-menu button:hover { background: rgba(255,255,255,0.06); }

/* ---- Stickers ---- */
.sticker-picker {
  position: absolute; bottom: 56px; right: 60px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 220px;
}
.sticker-picker img { width: 44px; height: 44px; cursor: pointer; border-radius: 8px; }
.sticker-picker img:hover { background: rgba(255,255,255,0.08); }
.sticker-msg-bubble { background: none !important; padding: 4px !important; box-shadow: none !important; }
.sticker-msg-bubble img { width: 96px; height: 96px; display: block; }

/* ---- Poll bubble ---- */
.poll-bubble { min-width: 220px; }
.poll-question { font-weight: 700; margin-bottom: 8px; }
.poll-option-row {
  position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  margin-bottom: 6px; cursor: pointer; overflow: hidden; font-size: 12.5px;
}
.poll-option-row .poll-fill {
  position: absolute; left: 0; top: 0; bottom: 0; background: rgba(79,110,247,0.18); z-index: 0;
}
.poll-option-row .poll-option-label { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; }
.poll-option-row.voted { border-color: var(--accent); }
.poll-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ---- Location / contact share cards ---- */
.share-card {
  display: flex; align-items: center; gap: 10px; min-width: 200px; cursor: pointer;
}
.share-card .share-icon {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(79,110,247,0.18);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.share-card .share-title { font-weight: 700; font-size: 13px; }
.share-card .share-sub { font-size: 11.5px; color: var(--text-dim); }
.call-log-bubble.missed .share-title { color: var(--danger); }
.call-log-bubble.missed .share-icon { background: rgba(220,53,69,0.15); }

/* ---- Live location bubble ---- */
.live-location-bubble { min-width: 220px; cursor: default; }
.live-location-bubble .share-icon { background: rgba(229,72,77,0.15); position: relative; }
.live-location-bubble.ended .share-icon { background: rgba(107,118,134,0.15); }
.live-location-bubble .live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex-shrink: 0;
  animation: live-dot-pulse 1.4s infinite;
}
.live-location-bubble.ended .live-dot { animation: none; background: var(--text-dim); }
@keyframes live-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
.live-location-bubble .share-title { display: flex; align-items: center; gap: 6px; color: var(--danger); }
.live-location-bubble.ended .share-title { color: inherit; }
.live-location-bubble .share-open-link { cursor: pointer; }
.live-location-bubble .live-stop-btn {
  margin-top: 8px; width: 100%; border: 1px solid var(--danger); color: var(--danger); background: none;
  border-radius: 8px; padding: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.live-location-bubble .live-stop-btn:hover { background: rgba(229,72,77,0.08); }

/* ---- Live location duration picker ---- */
.live-loc-duration-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.live-loc-duration-opt {
  display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--border);
  border-radius: 9px; padding: 11px 14px; cursor: pointer; font-size: 13.5px;
}
.live-loc-duration-opt:hover { border-color: var(--accent); }
.live-loc-duration-opt.active { border-color: var(--accent); background: rgba(31,174,142,0.08); }

/* ---- Chat header avatar / group icon ---- */
.chat-header-avatar {
  width: 34px; height: 34px; border-radius: 50%; position: relative; flex-shrink: 0; margin-right: 6px; cursor: default;
}
.chat-header-avatar.editable { cursor: pointer; }
.chat-header-avatar.clickable-profile { cursor: pointer; }
/* The circular clip lives on this inner wrapper, not on .chat-header-avatar
   itself, so the online dot (positioned against .chat-header-avatar) can
   sit at the edge of the circle without being clipped off. */
.chat-header-avatar .chat-header-avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-avatar .avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
/* Online dot on the chat header avatar - header background is lighter than
   the sidebar's, so its border is set separately from the sidebar dot. */
.chat-header-avatar .avatar-online-dot { border-color: var(--panel, #fff); }

/* ---- Calls tab ---- */
.calls-list { display: flex; flex-direction: column; gap: 8px; }
.call-history-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px;
}
.call-history-row .chr-info { flex: 1; min-width: 0; }
.call-history-row .chr-name { font-weight: 700; font-size: 13.5px; }
.call-history-row .chr-meta { font-size: 11.5px; color: var(--text-dim); }
.call-history-row .chr-actions { display: flex; gap: 6px; }

/* The "সহকর্মীরা" (colleagues) quick-call list gets its own compact,
   fixed-height panel with a visible scrollbar - instead of every row at
   full size pushing "সাম্প্রতিক কল" further down the page, the whole
   colleague roster now scrolls inside its own small "slider" area that
   fits the screen regardless of staff count. */
#callsColleaguesList {
  max-height: 46vh; overflow-y: auto; padding-right: 6px; margin-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#callsColleaguesList::-webkit-scrollbar { width: 7px; }
#callsColleaguesList::-webkit-scrollbar-track { background: transparent; }
#callsColleaguesList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
#callsColleaguesList::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
#callsColleaguesList .call-history-row { padding: 7px 10px; gap: 9px; border-radius: 8px; }
#callsColleaguesList .chr-name { font-size: 12.5px; }
#callsColleaguesList .chr-meta { font-size: 10.5px; }
#callsColleaguesList .chr-actions { gap: 4px; }
#callsColleaguesList .call-btn { width: 30px; height: 30px; }
#callsColleaguesList .call-btn svg { width: 12px; height: 12px; }

/* ---- Generic list-in-modal rows (broadcast lists, communities, sessions) ---- */
.simple-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.simple-list-row .slr-title { font-weight: 700; font-size: 13.5px; }
.simple-list-row .slr-sub { font-size: 11.5px; color: var(--text-dim); }
.community-group-chip {
  display: inline-block; padding: 4px 10px; margin: 3px 4px 0 0; border-radius: 999px;
  background: rgba(79,110,247,0.15); font-size: 11.5px; cursor: pointer;
}

/* ---- Meetings ---- */
.section-title-sm { font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.meeting-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.meeting-row .mr-info { flex: 1; min-width: 180px; }
.meeting-row .mr-title { font-weight: 700; font-size: 13.5px; }
.meeting-row .mr-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.meeting-row .mr-agenda { font-size: 11.5px; color: var(--text); margin-top: 4px; background: rgba(79,110,247,0.08); padding: 5px 8px; border-radius: 7px; white-space: pre-wrap; }
.meeting-row .mr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.resp-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.resp-badge.accepted { background: rgba(31,174,142,0.18); color: var(--signal); }
.resp-badge.declined { background: rgba(229,72,77,0.15); color: var(--danger); }
.resp-badge.pending { background: rgba(148,163,184,0.18); color: var(--text-dim); }
.resp-badge.cancelled { background: rgba(229,72,77,0.15); color: var(--danger); }
.resp-badge.completed { background: rgba(148,163,184,0.18); color: var(--text-dim); }

/* ---- Global search ---- */
.gsr-row { padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.gsr-row:hover { background: rgba(255,255,255,0.04); }
.gsr-row .gsr-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; }
.gsr-row .gsr-snippet { font-size: 13px; }
.gsr-row mark { background: rgba(245,165,36,0.4); color: inherit; border-radius: 3px; }

/* ---- Meeting calendar ---- */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-month-label { font-weight: 700; font-size: 14.5px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekday { text-align: center; font-size: 10.5px; color: var(--text-dim); font-weight: 700; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; padding: 4px 5px;
  font-size: 11px; cursor: pointer; position: relative; background: var(--panel);
}
.cal-day.other-month { opacity: 0.35; }
.cal-day.today { border-color: var(--accent); }
.cal-day.selected { background: rgba(79,110,247,0.18); border-color: var(--accent); }
.cal-day .cal-day-num { font-weight: 700; }
.cal-day .cal-dot-row { display: flex; gap: 2px; margin-top: 3px; flex-wrap: wrap; }
.cal-day .cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---- System health ---- */
.health-workers-list { display: flex; flex-wrap: wrap; gap: 8px; }
.health-worker-chip {
  font-size: 11px; padding: 5px 10px; border-radius: 999px; font-weight: 600;
  background: rgba(31,174,142,0.15); color: var(--signal);
}
.health-worker-chip.dead { background: rgba(229,72,77,0.15); color: var(--danger); }
.health-bar-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 4px; }
.health-bar-fill { height: 100%; background: var(--accent); }
.health-bar-fill.warn { background: var(--amber); }
.health-bar-fill.danger { background: var(--danger); }

/* ---- Tasks ---- */
.task-filter-row { display: flex; gap: 8px; margin-bottom: 14px; }

/* Tools tab used to be a left-to-right horizontal slider of pill buttons,
   which pushed later items (like জরুরি নোট) off-screen on narrow/mobile
   screens with no obvious way to reach them. Replaced with a wrapping
   icon-tile grid (icon on top, label underneath) - the same card look as
   .software-grid/.software-card - so every tool is visible up front and
   nothing needs to be scrolled through sideways. */
.tools-grid {
  display: grid;
  /* Fixed repeat(4, 1fr) forced every tile into a narrow column on phones,
     and with a fixed 40px icon + two-line label inside that narrow width
     the tile ended up much taller than it was wide. auto-fill + minmax lets
     the browser fit as many square-ish tiles per row as actually fit the
     screen, and aspect-ratio below keeps each tile close to 1:1 instead of
     stretching tall. */
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.tools-subtab-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
  aspect-ratio: 1 / 1;
  /* Belt-and-suspenders against any grid leftover-space quirk (e.g. a lone
     item alone on the grid's last row) ever stretching one tile bigger
     than the rest - caps every tile at a sane size regardless of how much
     free space its row/column ends up with. */
  max-width: 120px;
  padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--border); background: white; cursor: pointer;
  font-family: inherit;
}
.tools-subtab-btn:hover { border-color: var(--accent); }
.tools-subtab-btn .tools-card-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1;
}
.tools-subtab-btn .tools-card-label { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.25; }

/* ---------- Tools page header (shown once a tool is opened) ----------
   Clicking a tile now opens that tool as its own "page" - the grid hides
   and this bar (title + close, and minimize for tools that must keep
   running in the background) sits above the tool's panel. Closing returns
   to the tile grid above. */
.tools-panel-topbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.tools-panel-topbar-title { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.tools-panel-back-btn, .tools-panel-minimize-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 9px; border: 1.5px solid var(--border); background: white;
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit;
}
.tools-panel-back-btn:hover { border-color: #d64545; color: #d64545; }
.tools-panel-minimize-btn:hover { border-color: var(--accent); color: var(--accent-dark, var(--accent)); }

/* Music tool (গান তৈরি) - key/tempo/style setup + live tuner readout.
   See music.js for the pitch-detection + Web-Audio scheduler logic. */
.music-setup-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.music-setup-field { flex: 1; min-width: 140px; }
.music-setup-field label { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; }
.music-setup-field select {
  width: 100%; padding: 9px; border-radius: 9px; border: 1.5px solid var(--border);
  font-family: inherit; font-size: 13px; background: white; color: var(--text);
}
.music-setup-field input[type="range"] { width: 100%; margin-top: 6px; }
.music-tuner-box {
  margin-top: 6px; padding: 16px; border-radius: 12px; border: 1.5px solid var(--border);
  background: rgba(31,174,142,0.04); text-align: center;
}
.music-tuner-note { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.3; }
.music-tuner-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.music-tuner-meter { height: 6px; border-radius: 4px; background: var(--border); margin-top: 12px; overflow: hidden; }
.music-tuner-meter-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.08s linear; }
.music-tuner-box.listening { border-color: var(--accent); }
.music-download-wrap {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px dashed var(--accent); background: rgba(31,174,142,0.05);
}
.music-download-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.music-download-wrap .btn-primary { width: 100%; }

/* Manual harmony row - press-and-hold scale-degree chord buttons so the
   person can play harmony notes alongside their own singing. Disabled/
   greyed out until the backing engine is actually running (see music.js). */
.music-harmony-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.music-harmony-btn {
  flex: 1; min-width: 38px; padding: 9px 4px; border-radius: 8px; border: 1.5px solid var(--border);
  background: white; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background 0.06s, color 0.06s, border-color 0.06s, transform 0.06s;
}
.music-harmony-btn:hover:not(:disabled) { border-color: var(--accent); }
.music-harmony-btn.pressed { background: var(--accent); color: white; border-color: var(--accent); transform: scale(0.96); }
.music-harmony-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.music-harmony-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

@media (max-width: 820px) {
  .tools-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
  .tools-subtab-btn { padding: 8px 4px; }
  .tools-subtab-btn .tools-card-icon { width: 40px; height: 40px; font-size: 20px; }
  .tools-subtab-btn .tools-card-label { font-size: 10.5px; }
  /* On the Chats empty-state, .empty-state's `margin:auto` vertically
     centers the whole block (title + quick-nav grid) inside .messages,
     which on a tall phone screen shoves the tile grid down into the
     middle and leaves a big blank gap above it. Pin the chats variant
     to the top instead so the cards start right under the header. */
  .chats-empty-state { margin: 0 auto; padding-top: 12px; }
}
.task-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.approval-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.task-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.task-row.done { opacity: 0.6; }
.task-row .task-check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); flex-shrink: 0;
  cursor: pointer; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.task-row.done .task-check { background: var(--signal); border-color: var(--signal); color: #fff; }
.task-row .tr-info { flex: 1; min-width: 0; }
.task-row .tr-title { font-weight: 700; font-size: 13.5px; }
.task-row.done .tr-title { text-decoration: line-through; }
.task-row .tr-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.task-row .tr-meta { font-size: 11px; color: var(--text-dim); margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.task-row .tr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.priority-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.priority-badge.low { background: rgba(148,163,184,0.18); color: var(--text-dim); }
.priority-badge.normal { background: rgba(79,110,247,0.15); color: var(--accent); }
.priority-badge.high { background: rgba(229,72,77,0.15); color: var(--danger); }
.due-badge { font-size: 11px; }
.due-badge.overdue { color: var(--danger); font-weight: 700; }
.staff-task-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; }

/* ---- Approvals (external integrations) ---- */
.approval-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.approval-status.pending { background: rgba(245,166,35,0.18); color: #B7791F; }
.approval-status.approved { background: #E6F7F1; color: var(--accent-dark); }
.approval-status.rejected { background: rgba(229,72,77,0.15); color: var(--danger); }
.approval-status.cancelled { background: #F1F2F4; color: var(--text-dim); }
.approval-app-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EDEBFB; color: #6C4FD9; }
.approval-note-box { font-size: 11.5px; color: var(--text-dim); background: var(--bg2, #F7F8FA); border-radius: 8px; padding: 6px 9px; margin-top: 6px; }

/* ---- Integration apps (admin) ---- */
.integration-app-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.integration-app-row .ia-info { flex: 1; min-width: 0; }
.integration-app-row .ia-name { font-weight: 700; font-size: 13.5px; }
.integration-app-row .ia-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.integration-app-row .ia-meta { font-size: 11px; color: var(--text-dim); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.integration-app-row .ia-key { font-family: monospace; background: #F1F2F4; padding: 1px 6px; border-radius: 5px; }
.integration-app-row .ia-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.key-reveal-box {
  background: #F1F2F4; border: 1.5px dashed var(--border); border-radius: 9px; padding: 10px 12px;
  font-family: monospace; font-size: 12.5px; word-break: break-all; margin: 8px 0; user-select: all;
}
.key-reveal-warn { font-size: 11.5px; color: var(--danger); font-weight: 700; margin-bottom: 4px; }

/* ---- Ringtone picker ---- */
.ringtone-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--border);
  border-radius: 9px; margin-bottom: 6px; cursor: pointer;
}
.ringtone-row.selected { border-color: var(--accent); background: rgba(79,110,247,0.08); }
.ringtone-row .rt-label { flex: 1; font-size: 13px; font-weight: 600; }
.ringtone-row .rt-preview-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--accent);
  color: #fff; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
.ringtone-upload-row {
  display: flex; align-items: center; gap: 8px; padding: 10px; border: 1.5px dashed var(--border);
  border-radius: 9px; cursor: pointer; font-size: 12.5px; color: var(--text-dim); font-weight: 600;
}
.ringtone-upload-row:hover { border-color: var(--accent); color: var(--accent); }
.ringtone-upload-row svg { flex-shrink: 0; }

/* ---- Login greeting ---- */
.greeting-toast {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%) translateY(-16px);
  background: var(--ink, #0B1424); color: #fff; padding: 12px 22px; border-radius: 999px;
  display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); z-index: 500;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease;
}
.greeting-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Team Token "still joined" banner (app-wide, see bcodeSessionBanner
   in app.html / renderSessionBanner() in app.js) ---- */
.bcode-session-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 480;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: #1d5c33; color: #eafff1; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.bcode-session-banner-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ee08a; flex-shrink: 0;
  animation: bcodeSessionPulse 1.6s ease-in-out infinite;
}
@keyframes bcodeSessionPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.bcode-session-banner span#bcodeSessionBannerText { flex: 1; cursor: pointer; }
.bcode-session-banner button {
  background: transparent; border: none; color: #eafff1; opacity: 0.75; cursor: pointer;
  font-size: 14px; padding: 2px 6px; line-height: 1;
}
.bcode-session-banner button:hover { opacity: 1; }
/* Pushes the whole app grid down so the fixed banner above doesn't sit on
   top of the sidebar header - toggled by renderSessionBanner() in app.js. */
body.bcode-session-banner-active .app { margin-top: 34px; }
.greeting-wave { display: inline-block; font-size: 20px; transform-origin: 70% 70%; animation: greetingWave 0.7s ease-in-out 2; }
@keyframes greetingWave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(18deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.small-btn { border: 1px solid var(--border); background: white; padding: 5px 10px; border-radius: 7px; font-size: 12px; margin-right: 4px; }
.small-btn:hover { border-color: var(--accent); }
.small-btn.danger { border-color: var(--danger); color: var(--danger); }
.small-btn.danger:hover { background: var(--danger); color: white; }
#emailRefreshBtn { display: inline-flex; align-items: center; }
#emailRefreshBtn:disabled { opacity: 0.65; cursor: default; }
#emailRefreshIcon.spin { animation: email-spin 0.8s linear infinite; }
@keyframes email-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.email-auto-refresh-note { font-size: 10.5px; color: var(--text-dim); padding: 0 16px 6px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white; padding: 10px 18px; border-radius: 10px; font-size: 13px;
  z-index: 200; opacity: 0; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* ---------- Email ---------- */
.email-connect-pane { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.email-connect-card {
  background: var(--panel); border-radius: 16px; padding: 32px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.email-connect-card h3 { margin: 12px 0 6px; font-size: 16px; }
.email-connect-card p { font-size: 12.5px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.5; }
.email-connect-card .field { text-align: left; }
.email-connect-note { font-size: 11px; color: var(--text-dim); margin-top: 12px; }

.email-body { flex: 1; display: flex; min-height: 0; }
.email-folders {
  width: 190px; border-right: 1px solid var(--border); background: var(--panel);
  padding: 14px 10px; overflow-y: auto; flex-shrink: 0;
}
/* Moved out of an inline style="margin-bottom:14px" on the button itself -
   an inline style always wins over the mobile media query below trying to
   reset it to 0, which was pushing the button out of vertical alignment
   with the folder tabs on phones. Desktop (vertical sidebar) still wants
   the gap below the button, before the folder list starts. */
.email-folders #emailComposeBtn { margin-bottom: 14px; }
.email-folder-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: var(--text-dim); margin-bottom: 2px;
}
.email-folder-item:hover { background: var(--bg); }
.email-folder-item.active { background: var(--accent); color: white; font-weight: 600; }
.email-list-pane { width: 320px; border-right: 1px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.email-search-wrap {
  display: flex; align-items: center; gap: 8px; margin: 10px; padding: 7px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text-dim); flex-shrink: 0;
}
.email-search-wrap input { flex: 1; background: none; border: none; outline: none; font-size: 13px; font-family: inherit; color: var(--text); }
.email-list { flex: 1; overflow-y: auto; min-height: 0; }
.email-item { padding: 12px 32px 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; }
/* Outlook-style "Follow up" flag - sits top-right of the list row, greyed
   out (unflagged) until clicked; red once flagged, like Outlook's own.
   .email-item's extra right padding above keeps the from/date/subject text
   from running underneath it. */
.email-item-flag-btn {
  position: absolute; top: 10px; right: 8px; z-index: 1;
  border: none; background: none; padding: 2px; font-size: 13px; line-height: 1;
  opacity: 0.35; filter: grayscale(1); cursor: pointer;
}
.email-item-flag-btn:hover { opacity: 0.7; }
.email-item-flag-btn.flagged { opacity: 1; filter: none; }
/* Same icon reused as a labeled action button in the reader header toolbar -
   .small-btn.email-item-flag-btn (two classes) beats the plain list-row
   .email-item-flag-btn rule above on specificity, so it isn't absolutely
   positioned or greyed out here the way the bare list-row icon is. */
.small-btn.email-item-flag-btn { position: static; opacity: 1; filter: none; color: var(--text-dim); font-size: 12.5px; }
.small-btn.email-item-flag-btn.flagged { color: #d64545; font-weight: 700; }
.email-item:hover { background: var(--bg); }
.email-item.active { background: rgba(31,174,142,0.1); }
.email-item.unread .email-item-from, .email-item.unread .email-item-subject { font-weight: 700; }
.email-item-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.email-item-from { color: var(--text); }
.email-item-date { color: var(--text-dim); flex-shrink: 0; margin-left: 8px; }
.email-item-attach-icon { font-size: 11px; opacity: 0.8; }
.email-item-subject { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-loading { padding: 20px; text-align: center; font-size: 12.5px; color: var(--text-dim); }

.email-reader { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg); }
.email-reader-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.email-reader-header { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.email-reader-header h3 { margin: 0 0 8px; font-size: 17px; }
.email-reader-meta { font-size: 12.5px; color: var(--text-dim); margin-bottom: 2px; }
.email-reader-body { font-size: 14px; line-height: 1.6; color: var(--text); word-break: break-word; }
.email-reader-body img { max-width: 100%; }
.email-attachments { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.email-editor-toolbar {
  display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  border: 1.5px solid var(--border); border-bottom: none; border-radius: 9px 9px 0 0; background: var(--panel);
}
.email-editor-toolbar button {
  width: 26px; height: 26px; border-radius: 5px; border: 1px solid transparent; background: none;
  font-size: 12.5px; display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.email-editor-toolbar button:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.email-editor-toolbar select { font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 3px; background: white; }
.email-editor-toolbar input[type="color"] { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 5px; padding: 1px; cursor: pointer; }
.email-attachment-chip {
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.email-attachment-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.email-attachment-chip:disabled { opacity: 0.6; cursor: wait; }
.email-attachment-chip-removable { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.email-attachment-chip-removable button {
  border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.email-attachment-chip-removable button:hover { color: #d64545; }

@media (max-width: 820px) {
  .email-body { flex-direction: column; }
  .email-folders {
    width: 100%; display: flex; flex-direction: row; align-items: center;
    overflow-x: auto; overflow-y: hidden; padding: 8px 10px; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--border); flex-shrink: 0;
    scrollbar-width: none;
  }
  .email-folders::-webkit-scrollbar { display: none; }
  .email-folders #emailComposeBtn {
    flex-shrink: 0; width: auto; height: 32px; padding: 0 14px; margin-bottom: 0;
    border-radius: 999px; font-size: 12.5px; white-space: nowrap;
  }
  #emailFolderList { display: flex; flex-direction: row; gap: 6px; flex-wrap: nowrap; }
  .email-folder-item {
    flex-shrink: 0; white-space: nowrap; height: 32px; padding: 0 12px;
    border-radius: 999px; background: var(--bg); margin-bottom: 0; font-size: 12.5px;
  }
  .email-folder-item.active { background: var(--accent); color: white; }
  .email-list-pane { width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }

  /* The inbox header (email address + Send/Receive/Rules/Disconnect) was
     cramped into one unwrapped row next to the floating hamburger button,
     pushing "Disconnect" off the edge of the screen with no way to reach
     it on narrow phones. Let it wrap onto its own full-width row instead. */
  #emailInboxPane .chat-header { flex-wrap: wrap; height: auto; padding: 10px 16px 10px 54px; row-gap: 8px; }
  #emailInboxPane .call-actions {
    margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
  #emailInboxPane .call-actions::-webkit-scrollbar { display: none; }
  #emailInboxPane .call-actions .small-btn { flex-shrink: 0; white-space: nowrap; }
}
/* ---------- Message actions, reply, reactions, voice ---------- */
.msg-row { position: relative; }
.msg-actions-btn {
  position: absolute; top: 0; opacity: 0; transition: opacity .12s;
  width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--panel);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.msg-row:not(.mine) .msg-actions-btn { right: -30px; }
.msg-row.mine .msg-actions-btn { left: -30px; }
.msg-row:hover .msg-actions-btn { opacity: 1; }

.msg-action-menu {
  position: fixed; z-index: 150; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 8px; display: none; min-width: 170px; max-height: 80vh; overflow-y: auto;
}
.msg-action-menu.show { display: block; }
.quick-reacts { display: flex; gap: 4px; padding: 4px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.quick-reacts button { background: none; border: none; font-size: 19px; padding: 4px; border-radius: 8px; }
.quick-reacts button:hover { background: var(--bg); }
.msg-action-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text);
}
.msg-action-item:hover { background: var(--bg); }
.msg-action-item.danger { color: var(--danger); }

/* WhatsApp-style bottom sheet for choosing how to delete your own message */
.delete-choice-sheet {
  position: fixed; inset: 0; z-index: 170; display: none;
  align-items: flex-end; justify-content: center;
}
.delete-choice-sheet.show { display: flex; }
.delete-choice-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.delete-choice-box {
  position: relative; width: 100%; max-width: 480px; background: var(--panel, #fff);
  border-radius: 14px 14px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
}
.delete-choice-item {
  display: block; width: 100%; text-align: center; background: none; border: none;
  border-bottom: 1px solid var(--border); padding: 15px 14px; font-size: 14.5px; font-weight: 600; color: var(--text);
}
.delete-choice-item:last-child { border-bottom: none; }
.delete-choice-item.danger { color: var(--danger); }
.delete-choice-item.cancel { font-weight: 700; }
.delete-choice-item:active { background: var(--bg); }

.reply-quote {
  border-left: 3px solid var(--accent); background: rgba(31,174,142,0.08);
  border-radius: 6px; padding: 5px 9px; margin-bottom: 5px; font-size: 12px; cursor: pointer;
}
.msg-row.mine .reply-quote { background: rgba(0,0,0,0.06); border-left-color: var(--accent-dark); }
.reply-quote .reply-quote-sender { font-weight: 700; }
.reply-quote .reply-quote-text { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

.forwarded-label { font-size: 11px; color: var(--text-dim); font-style: italic; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.msg-row.mine .forwarded-label { justify-content: flex-end; }

.reactions-row { display: flex; gap: 3px; margin-top: 3px; flex-wrap: wrap; }
.reaction-pill {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 1px 7px; font-size: 12px; display: flex; align-items: center; gap: 3px; cursor: pointer;
}
.reaction-pill.mine-reacted { border-color: var(--accent); background: rgba(31,174,142,0.1); }

.deleted-msg { font-style: italic; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }

.voice-msg-bubble { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 190px; }
.voice-msg-bubble audio { max-width: 220px; height: 32px; }

.reply-preview-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--bg); border-top: 1px solid var(--border);
}
.reply-preview-content { flex: 1; border-left: 3px solid var(--accent); padding-left: 8px; min-width: 0; }
.reply-preview-sender { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.reply-preview-text { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview-bar button { background: none; border: none; color: var(--text-dim); flex-shrink: 0; }

.voice-record-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--bg); border-top: 1px solid var(--border);
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: emg-pulse 1s infinite; }
.voice-record-bar .send-btn { width: 34px; height: 34px; }

.emoji-picker {
  position: fixed; z-index: 150; background: white; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 10px; display: none; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 300px; max-height: 220px; overflow-y: auto;
}
.emoji-picker.show { display: grid; }
.emoji-picker button { background: none; border: none; font-size: 20px; padding: 5px; border-radius: 8px; }
.emoji-picker button:hover { background: var(--bg); }

.date-divider { text-align: center; margin: 14px 0; }
.date-divider span {
  background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
}
/* ---------- Search in chat ---------- */
.search-in-chat-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border); color: var(--text-dim);
}
.search-in-chat-bar input {
  flex: 1; border: none; outline: none; font-size: 13.5px; background: transparent; color: var(--text);
}
.search-in-chat-bar button { background: none; border: none; color: var(--text-dim); padding: 4px; border-radius: 6px; }
.search-in-chat-bar button:hover { background: var(--bg); }
.search-in-chat-bar #searchInChatCount { font-size: 11.5px; white-space: nowrap; }
.msg-row.search-match .msg-bubble { outline: 2px solid var(--warn); }
.msg-row.search-match-active .msg-bubble { outline: 2px solid var(--accent); }

/* ---------- Mute ---------- */
.call-btn.muted-active { color: var(--danger); border-color: var(--danger); }
.conv-item .mute-indicator { color: var(--text-dim); flex-shrink: 0; opacity: 0.7; }

/* ---------- File preview before send ---------- */
.file-preview-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 4px; }
.file-preview-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 9px; }
.file-preview-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 7px; }
.file-preview-item .fp-name { font-size: 12.5px; font-weight: 600; }
.file-preview-item .fp-size { font-size: 11px; color: var(--text-dim); }
.file-preview-item .fp-remove { margin-left: auto; background: none; border: none; color: var(--text-dim); }

/* ---------- @mention ---------- */
.mention-dropdown {
  position: fixed; z-index: 150; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 6px; display: none; min-width: 220px; max-height: 220px; overflow-y: auto;
}
.mention-dropdown.show { display: block; }
.mention-dropdown .people-row { padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.mention-dropdown .people-row:hover, .mention-dropdown .people-row.highlighted { background: var(--bg); }
.mention-tag { color: var(--accent-dark); font-weight: 700; background: rgba(31,174,142,0.12); border-radius: 4px; padding: 0 2px; }

/* ---------- Link preview ---------- */
.link-preview-card {
  display: block; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: inherit; max-width: 280px; background: var(--panel);
}
.msg-row.mine .link-preview-card { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); }
.link-preview-card img { width: 100%; max-height: 130px; object-fit: cover; display: block; }
.link-preview-card .lp-body { padding: 8px 10px; }
.link-preview-card .lp-title { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.link-preview-card .lp-desc { font-size: 11.5px; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Edited / starred indicators ---------- */
.edited-label { font-size: 10px; opacity: 0.7; margin-left: 4px; }
.star-indicator { color: var(--warn); margin-right: 3px; }

/* ---------- Tools tab: sub-tabs, Calculator, Alarm, Namaz/Azan ---------- */
.tools-subtab-btn.active { border-color: var(--accent); background: rgba(31,174,142,0.06); }
.tools-subtab-btn.active .tools-card-icon { background: var(--accent); color: #fff; }
.tools-subtab-btn.active .tools-card-label { color: var(--accent-dark, var(--accent)); }
.tools-sub-panel { max-width: 420px; }
@media (min-width: 900px) {
  /* On desktop the tools panel sits inside a wide .main column, so a
     420px cap left most of the screen blank and squeezed every label
     into a narrow strip on the left. Let it breathe on larger screens
     while leaving the mobile width above untouched. */
  .tools-sub-panel { max-width: 760px; }
}

.calculator-wrap { max-width: 320px; }
.calculator-wrap.calc-sci-mode { max-width: 420px; }
.calculator-display-wrap { margin-bottom: 10px; }
.calculator-expr-line {
  min-height: 18px; text-align: right; font-size: 13px; font-weight: 500;
  color: var(--text-dim); padding: 0 14px; overflow-x: auto; white-space: nowrap;
}
.calculator-display {
  width: 100%; box-sizing: border-box; text-align: right; font-size: 30px; font-weight: 600;
  padding: 16px 14px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--panel-2, #F4F6FB); color: var(--text); margin: 0;
  overflow-x: auto; white-space: nowrap;
}
.calculator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-btn {
  padding: 16px 0; font-size: 17px; font-weight: 600; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer;
}
.calc-btn:hover { border-color: var(--accent); }
.calc-btn:active { transform: scale(0.96); }
.calc-btn-op { background: var(--panel-2, #F4F6FB); color: var(--accent); }
.calc-btn-eq { background: var(--accent); color: #fff; border-color: var(--accent); }

.calculator-sci-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.calc-btn-sci { padding: 11px 0; font-size: 13px; font-weight: 600; background: var(--panel-2, #F4F6FB); color: var(--text-dim); }
.calc-btn-sci.calc-toggle-on { background: var(--accent); color: #fff; border-color: var(--accent); }

.alarm-add-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.alarm-add-form input[type="time"] { padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; }
.alarm-add-form input[type="text"] { flex: 1; min-width: 160px; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; }

.alarm-list { display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
@media (min-width: 900px) {
  .alarm-list { max-width: 720px; }
}

/* First Aid tool: emergency number grid + accordion guide */
.firstaid-emergency-box { border: 1.5px solid var(--danger); background: rgba(229,72,77,0.06); border-radius: 12px; padding: 12px 14px; max-width: 520px; }
.firstaid-emergency-grid { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 8px; }
.firstaid-emergency-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--border); text-decoration: none; color: var(--text);
}
.firstaid-emergency-item:hover { border-color: var(--danger); }
.firstaid-emergency-item span { font-size: 11px; color: var(--text-dim); }
.firstaid-emergency-item b { font-size: 15px; color: var(--danger); letter-spacing: 0.3px; }

.firstaid-accordion { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.firstaid-item { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.firstaid-item summary {
  cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.firstaid-item summary::-webkit-details-marker { display: none; }
.firstaid-item summary::after { content: '+'; color: var(--text-dim); font-size: 16px; font-weight: 400; }
.firstaid-item[open] summary::after { content: '−'; }
.firstaid-item[open] summary { border-bottom: 1px solid var(--border); }
.firstaid-item ol { margin: 0; padding: 12px 14px 12px 30px; font-size: 12.5px; line-height: 1.7; color: var(--text); }
.firstaid-item ol li { margin-bottom: 4px; }
.firstaid-item ol li:last-child { margin-bottom: 0; }

/* ওয়ারিশ ক্যালকুলেটর (Faraiz inheritance calculator) */
.waris-case-list { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.waris-case-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 12px 14px;
}
.waris-case-item-main { min-width: 0; }
.waris-case-item-title { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waris-case-item-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.waris-case-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.waris-case-empty { font-size: 12.5px; color: var(--text-dim); padding: 10px 2px; }

.waris-meta-box { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 4px 14px; max-width: 620px; margin-bottom: 18px; }
.waris-meta-box .field { margin-bottom: 10px; }
.waris-meta-box label { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.waris-meta-box input, .waris-meta-box select {
  width: 100%; box-sizing: border-box; padding: 9px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 13px;
}
@media (max-width: 480px) { .waris-meta-box { grid-template-columns: 1fr; } }

.waris-step-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 14px 16px; margin-bottom: 14px; max-width: 780px; }
.waris-step-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.waris-step-badge {
  display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 10px; margin-right: 8px;
}
.waris-step-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.waris-step-pool { font-size: 11.5px; color: var(--text-dim); }
.waris-step-notes { font-size: 11.5px; color: var(--text-dim); line-height: 1.7; margin: 8px 0 10px; padding-left: 18px; }
.waris-step-notes li { margin-bottom: 2px; }
.waris-heir-expand-btn { font-size: 10.5px; padding: 4px 8px; }
.waris-heir-expanded-tag { font-size: 10.5px; color: var(--text-dim); font-style: italic; }
.waris-step-remove-btn { font-size: 10.5px; }

.waris-heir-rows { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin-bottom: 10px; }
.waris-heir-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.waris-heir-row select { flex: 1 1 220px; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; }
.waris-heir-row input[type="text"] { flex: 1 1 160px; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; }
.waris-heir-row-remove { flex-shrink: 0; border: 1px solid var(--border); background: white; color: var(--danger); width: 32px; height: 32px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.waris-heir-row-remove:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.waris-add-step-box { border: 1.5px dashed var(--border); border-radius: 12px; padding: 14px 16px; max-width: 780px; margin-bottom: 16px; }
.waris-final-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; max-width: 780px; }

#warisSummaryTable td, #warisSummaryTable th { white-space: nowrap; }
.waris-summary-box { max-width: 780px; margin-bottom: 18px; }

/* জমির উত্তরাধিকার ইতিহাস (Land history) tool - reuses most .waris-*
   classes above (meta box, add-step box, final-actions) since both tools
   share the same "meta fields + step-by-step chain" shape; only the bits
   unique to this tool (the step form's own grid, step cards, and the
   document list/upload row) get their own classes here. */
.lh-step-form-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 4px 14px; max-width: 780px; }
.lh-step-form-grid .field { margin-bottom: 10px; }
.lh-step-form-grid label { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.lh-step-form-grid input, .lh-step-form-grid select {
  width: 100%; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; font-family: inherit;
}
@media (max-width: 480px) { .lh-step-form-grid { grid-template-columns: 1fr; } }

.lh-step-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 14px 16px; margin-bottom: 12px; max-width: 780px; }
.lh-step-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.lh-step-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--primary, #4f6ef7);
  border-radius: 999px; padding: 2px 9px; margin-right: 8px;
}
.lh-step-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.lh-step-type-tag { font-size: 11px; color: var(--text-dim); }
.lh-step-meta { font-size: 11.5px; color: var(--text-dim); line-height: 1.8; margin: 6px 0; }
.lh-step-desc { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; margin: 6px 0; white-space: pre-wrap; }
.lh-step-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lh-step-actions .small-btn { font-size: 10.5px; padding: 4px 9px; }

.lh-docs-list { display: flex; flex-direction: column; gap: 6px; max-width: 780px; margin-bottom: 10px; }
.lh-doc-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.lh-doc-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-doc-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.lh-doc-empty { font-size: 11.5px; color: var(--text-dim); padding: 4px 2px; }
.lh-doc-upload-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; max-width: 780px; margin-bottom: 4px; }
.lh-doc-upload-row input[type="text"] { flex: 1 1 220px; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 12.5px; }
.lh-doc-upload-row input[type="file"] { flex: 1 1 200px; font-size: 12px; }

/* Respiratory Rate tool - timer + tap counter (inside First Aid) */
.rr-dur-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.rr-tap-btn {
  width: 150px; height: 150px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
  line-height: 1.5; cursor: pointer; user-select: none; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: transform 0.08s ease;
}
.rr-tap-btn:active { transform: scale(0.93); }
.rr-result-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; height: 150px; border-radius: 50%; margin: 0 auto;
  border: 4px solid var(--border); background: var(--panel);
}
.rr-result-badge.status-normal { border-color: var(--success, #2e9e5b); color: var(--success, #2e9e5b); }
.rr-result-badge.status-low,
.rr-result-badge.status-high { border-color: var(--danger); color: var(--danger); }
.rr-history-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px;
}
.rr-history-row b { color: var(--text); font-size: 13px; }
.rr-history-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.rr-history-badge.status-normal { background: rgba(46,158,91,0.12); color: var(--success, #2e9e5b); }
.rr-history-badge.status-low,
.rr-history-badge.status-high { background: rgba(229,72,77,0.1); color: var(--danger); }
.rr-history-badge.status-elevated { background: rgba(230,159,0,0.12); color: #b5790a; }
.rr-history-badge.status-crisis { background: var(--danger); color: #fff; }

/* Blood Pressure tool - manual log (inside First Aid) */
.bp-field-row { display: flex; gap: 8px; margin-bottom: 10px; }
.bp-field-row .field { flex: 1; margin: 0; }
.bp-field-row input {
  width: 100%; padding: 9px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 14px;
}
.bp-field-row label { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.bp-result-box {
  border-radius: 12px; padding: 14px; text-align: center; margin-top: 4px;
  border: 1.5px solid var(--border); background: var(--panel);
}
.bp-result-box.status-normal { border-color: var(--success, #2e9e5b); }
.bp-result-box.status-elevated { border-color: #e69f00; }
.bp-result-box.status-low,
.bp-result-box.status-high { border-color: var(--danger); }
.bp-result-box.status-crisis { border-color: var(--danger); background: rgba(229,72,77,0.08); }
#bpResultReading { font-size: 22px; font-weight: 700; color: var(--text); }
#bpResultLabel { font-size: 13px; font-weight: 600; margin-top: 2px; }
.status-normal #bpResultLabel { color: var(--success, #2e9e5b); }
.status-elevated #bpResultLabel { color: #b5790a; }
.status-low #bpResultLabel,
.status-high #bpResultLabel,
.status-crisis #bpResultLabel { color: var(--danger); }

/* Stopwatch */
.stopwatch-display {
  font-size: 46px; font-weight: 700; text-align: center; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; margin: 18px 0 22px; color: var(--text);
}
.stopwatch-btn-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.stopwatch-lap-row {
  display: flex; justify-content: space-between; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px; font-size: 13px;
}
.stopwatch-lap-row .lap-num { color: var(--text-dim); }
.stopwatch-lap-row .lap-time { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.stopwatch-lap-row .lap-split { color: var(--text-dim); font-size: 11.5px; }

/* ঘড়ি / ওয়ার্ল্ড ক্লক */
.clock-local-wrap { text-align: center; padding: 10px 0; }
.clock-local-date { font-size: 14.5px; font-weight: 600; color: var(--text); margin-top: -8px; }
.clock-local-tz { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.world-clock-cards {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px;
}
.world-clock-card {
  flex: 1 1 220px; max-width: 280px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); padding: 14px 16px; text-align: center;
}
.world-clock-card-label { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.world-clock-card-time {
  font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 0.5px;
}
.world-clock-card-date { font-size: 12.5px; color: var(--text); margin-top: 4px; }
.world-clock-card-tz { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.world-clock-diff {
  text-align: center; font-size: 14.5px; color: var(--text); background: var(--bg);
  border: 1px dashed var(--border); border-radius: 9px; padding: 10px 14px; max-width: 480px; margin: 0 auto;
}
.world-clock-diff b { color: var(--accent-dark, var(--accent)); font-size: 16px; }

/* Unit Converter */
/* The category row (দৈর্ঘ্য/ওজন/তাপমাত্রা/.../ক্ষমতা - 11 buttons) is a plain
   .task-filter-row (display:flex, no wrap, no overflow handling). On narrow
   phone screens the buttons don't fit and just overflow past the panel's
   right edge with nothing to reveal them - no wrap, no scrollbar, no swipe
   hint. .hscroll-filter-row turns that overflow into an intentional
   horizontal swipe: buttons stay on one line (nowrap + no shrink) inside a
   scrollable strip, with momentum scrolling on iOS and a fading right edge
   so it's visually obvious there's more to swipe to. */
.hscroll-filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.hscroll-filter-row::-webkit-scrollbar { display: none; }
.hscroll-filter-row .task-filter-btn {
  flex-shrink: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}
.uc-convert-box { max-width: 480px; }
.uc-result-value {
  flex: 1; padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--border);
  background: var(--panel); font-size: 16px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

/* ট্যাক্স ক্যালকুলেটর result card - mirrors .uc-convert-box's max-width and
   .waris-step-card's bordered-panel look so it sits visually consistent
   with the other calculator-style tools in this grid. */
.tc-result-box {
  max-width: 480px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--panel); padding: 14px 16px; margin-top: 4px;
}
.tc-result-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--text-dim); padding: 5px 0;
  font-variant-numeric: tabular-nums;
}
.tc-result-row + .tc-result-row { border-top: 1px dashed var(--border); }
.tc-result-row-main { font-size: 15px; font-weight: 700; color: var(--text); padding-bottom: 8px; }
.tc-result-row-main .tc-result-value { color: var(--accent); font-weight: 700; }
.tc-breakdown-title { font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.tc-breakdown-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px;
  color: var(--text-dim); padding: 3px 0; font-variant-numeric: tabular-nums;
}
.tc-breakdown-row span:last-child { color: var(--text); font-weight: 600; }

/* ট্যাক্স ক্যালকুলেটর - annual/monthly mode toggle, quick-amount chips,
   salary-breakdown grid, advanced-options disclosure, effective-rate/
   monthly-tax metric tiles and the slab stacked bar. Kept as its own small
   block right after the older .tc- rules above so everything for this tool
   stays together. */
.tc-mode-toggle {
  display: flex; gap: 6px; margin-bottom: 12px; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 3px; max-width: 480px;
}
.tc-mode-btn {
  flex: 1; border: none; background: transparent; color: var(--text-dim);
  font-size: 12px; font-weight: 700; padding: 8px 6px; border-radius: 8px; cursor: pointer;
}
.tc-mode-btn.active { background: var(--accent); color: #fff; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; max-width: 480px; }
.tc-chip {
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tc-chip:hover { border-color: var(--accent); color: var(--accent-dark, var(--accent)); }
.tc-salary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; max-width: 480px;
}
@media (max-width: 480px) { .tc-salary-grid { grid-template-columns: 1fr; } }
.tc-monthly-preview {
  display: flex; justify-content: space-between; align-items: center; max-width: 480px;
  background: var(--panel); border: 1.5px dashed var(--accent); border-radius: 10px;
  padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.tc-monthly-preview span:last-child { color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; }
.tc-advanced-toggle {
  border: none; background: transparent; color: var(--accent-dark, var(--accent));
  font-size: 12px; font-weight: 700; padding: 4px 0; cursor: pointer;
}
.tc-metric-row { display: flex; gap: 10px; margin-top: 10px; }
.tc-metric-box {
  flex: 1; background: var(--bg, rgba(0,0,0,0.02)); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px; text-align: center;
}
.tc-metric-label { font-size: 10px; color: var(--text-dim); margin-bottom: 3px; }
.tc-metric-value { font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tc-slab-bar {
  display: flex; width: 100%; height: 10px; border-radius: 6px; overflow: hidden;
  margin-bottom: 8px; background: var(--border);
}
.tc-slab-bar span { height: 100%; }
.tc-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.alarm-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel);
}
.alarm-row.disabled { opacity: 0.55; }
.alarm-row .alarm-row-time { font-size: 18px; font-weight: 700; min-width: 68px; color: var(--text); }
.alarm-row .alarm-row-info { flex: 1; min-width: 0; }
/* Labels were 12.5px in the plain body-text color and the sub-line a washed-
   out 10.5px grey - fine on a cramped mobile card, but next to all the
   spare width on desktop it read as small and low-contrast rather than
   professional. Bump both up a step and darken the sub-line so it's still
   clearly secondary text but no longer feels faint. */
.alarm-row .alarm-row-label { font-size: 14.5px; font-weight: 700; color: var(--text); }
.alarm-row .alarm-row-sub { font-size: 12px; color: #566072; }
.alarm-row .alarm-row-del {
  background: none; border: none; color: var(--danger); font-size: 15px; cursor: pointer; padding: 4px 6px;
}

/* Important notes tool */
.note-add-form { display: flex; flex-direction: column; gap: 8px; max-width: 440px; margin-bottom: 4px; }
.note-add-form input[type="text"] { padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; }
.note-add-form textarea {
  padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; resize: vertical;
  font-family: inherit;
}
.note-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel);
}
.note-row .note-row-info { flex: 1; min-width: 0; }
.note-row .note-row-title { font-size: 13px; font-weight: 700; color: var(--text); word-break: break-word; }
.note-row .note-row-body { font-size: 12px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
.note-row .note-row-time { font-size: 10px; color: var(--text-dim); margin-top: 5px; }
.note-row .note-row-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.note-row .note-row-actions button {
  background: none; border: none; font-size: 14px; cursor: pointer; padding: 3px 6px;
}
.note-row .note-row-edit { color: var(--accent); }
.note-row .note-row-del { color: var(--danger); }
.note-row .note-row-actions button[data-vault-reveal],
.note-row .note-row-actions button[data-vault-copy] { color: var(--text-dim); }

/* ---------- Password Vault (Tools > পাসওয়ার্ড ভল্ট) ----------
   Reuses .note-row/.note-add-form/.field/.btn-primary/.small-btn/
   .error-msg from elsewhere in this file for visual consistency with the
   rest of the Tools tab; the rules below only cover what's specific to
   the vault's three screens (setup / locked / unlocked). See
   public/js/vault.js for the crypto + state behind this UI. */
.vault-intro { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
.vault-warning {
  font-size: 11px; color: var(--danger); background: #FDECEC; border-radius: 8px;
  padding: 9px 11px; margin-bottom: 14px; line-height: 1.5;
}

.vault-lock-screen { text-align: center; padding: 22px 4px 10px; }
.vault-lock-icon { font-size: 36px; margin-bottom: 8px; }
.vault-lock-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }
.vault-pin-field { max-width: 260px; margin: 0 auto 14px; }
.vault-pin-field input {
  text-align: center; letter-spacing: 4px; font-size: 17px; font-weight: 600;
}
.vault-lock-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vault-forgot-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.vault-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.vault-toolbar-note { font-size: 11.5px; color: var(--text-dim); flex: 1; min-width: 180px; }
.vault-toolbar-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.vault-entry-form select#vaultEntryType {
  padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border);
  font-size: 13px; font-family: inherit; background: white; color: var(--text);
}
.vault-secret-text {
  font-family: 'Courier New', monospace; letter-spacing: 1.5px; font-size: 12.5px;
  color: var(--text); background: var(--bg); border-radius: 6px; padding: 3px 7px;
  display: inline-block; margin-top: 3px; word-break: break-all;
}
.vault-entry-meta { font-size: 10px; color: var(--text-dim); margin-top: 5px; }

/* Meeting/voice recording tool - records to a local Blob and downloads it
   straight to the device; nothing here ever touches the server. */
.rec-mode-row { display: flex; gap: 8px; margin-bottom: 12px; }
.rec-mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rec-video-preview {
  width: 100%; max-width: 360px; border-radius: 10px; background: #000; margin-bottom: 12px; display: block;
}
.rec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-timer { font-size: 15px; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.rec-status { font-size: 12px; color: var(--text-dim); margin-top: 8px; min-height: 16px; }
/* Scan to PC done/failed flag under the barcode result (see
   showPcAckStatus() in app.js) - pending is neutral, done is green,
   failed/timeout is red, so the outcome is obvious at a glance. */
.bcode-pc-ack-pending { color: var(--text-dim); }
.bcode-pc-ack-done { color: #2e9e4f; }
.bcode-pc-ack-failed { color: #d9484d; }
.rec-list { display: flex; flex-direction: column; gap: 8px; max-width: 440px; margin-top: 14px; }
.rec-row {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel);
}
.rec-row .rec-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.rec-row audio, .rec-row video { width: 100%; max-height: 220px; }
.rec-row .rec-row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rec-row .rec-row-actions a, .rec-row .rec-row-actions button {
  font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: none; padding: 0;
}

/* Document scanner tool - camera capture -> draggable-corner perspective
   crop -> scan filter -> multi-page stack -> PDF/image export. */
.scan-entry-row { display: flex; gap: 10px; flex-wrap: wrap; }
.scan-camera-wrap { max-width: 420px; margin: 0 auto; }
.scan-video { width: 100%; border-radius: 10px; background: #000; display: block; }
.scan-camera-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.scan-shutter-btn { border-radius: 999px !important; }

.scan-crop-wrap {
  position: relative; max-width: 420px; margin: 0 auto; user-select: none; touch-action: none;
  background: #000; border-radius: 8px; overflow: hidden;
}
.scan-crop-img { width: 100%; display: block; pointer-events: none; }
.scan-crop-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scan-crop-svg polygon { fill: rgba(60, 150, 255, 0.22); stroke: var(--accent); stroke-width: 2; }
.scan-handle {
  position: absolute; width: 26px; height: 26px; margin-left: -13px; margin-top: -13px;
  border-radius: 50%; background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab; touch-action: none;
}
.scan-handle:active { cursor: grabbing; }

.scan-filter-preview-wrap { max-width: 420px; margin: 0 auto; background: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 50% / 16px 16px; border-radius: 8px; overflow: hidden; }
.scan-filter-canvas { width: 100%; display: block; }
.scan-filter-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.scan-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.scan-adjust-row { display: flex; flex-direction: column; gap: 4px; max-width: 420px; margin: 14px auto 0; }
.scan-adjust-row label { font-size: 11.5px; color: var(--text-dim); }
.scan-adjust-row input[type="range"] { width: 100%; margin-bottom: 6px; }

.scan-filmstrip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.scan-page-thumb { position: relative; width: 92px; transition: opacity .15s ease; }
.scan-page-thumb img {
  width: 92px; height: 122px; object-fit: cover; border-radius: 7px;
  border: 1.5px solid var(--border); cursor: pointer; display: block; background: #fff;
}
.scan-page-thumb .scan-page-num {
  position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
}
.scan-page-thumb .scan-page-move { position: absolute; bottom: 4px; display: flex; gap: 3px; width: 100%; justify-content: center; }
.scan-page-thumb .scan-page-move button {
  font-size: 10px; padding: 1px 5px; border-radius: 5px; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer;
}
.scan-page-drag-handle {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 18px; border-radius: 5px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 18px; text-align: center;
  cursor: grab; touch-action: none; user-select: none; z-index: 2;
}
.scan-page-drag-handle:active { cursor: grabbing; }
.scan-page-thumb.dragging { opacity: 0.45; }
.scan-page-thumb.drag-target img { outline: 2px dashed var(--accent); outline-offset: 2px; }
.scan-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* Tools > AI স্টাইল সাজেশন - grid of the 5 generated style variations */
.styleai-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-width: 640px; }
.styleai-result-item { border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.styleai-result-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.styleai-result-item a { display: block; text-align: center; font-size: 11.5px; padding: 6px 4px; color: var(--accent); text-decoration: none; }

/* Barcode Scanner tool - live camera detection via the browser's native
   BarcodeDetector API (QR + common 1D/2D formats). */
.bcode-scan-flash {
  position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  border: 3px solid var(--accent); opacity: 0; transition: opacity .15s ease;
}
.bcode-scan-flash.hit { opacity: 1; border-color: #2ecc71; }
.scan-camera-wrap { position: relative; }
.bcode-result-box {
  max-width: 420px; margin: 16px auto 0; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--accent); background: var(--panel);
}
.bcode-result-type { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.bcode-result-value { font-size: 14px; word-break: break-all; }
.bcode-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 520px; }
/* Team Token "join" input sits on a fixed dark box (background always
   #222 via the var(--bg-secondary,#222) fallback, regardless of light/dark
   theme) - give it an explicit light text/placeholder color instead of
   inheriting the app's normal (dark) text color, which made anything typed
   here nearly invisible against that dark background. */
.bcode-dark-input { color: #fff; }
.bcode-dark-input::placeholder { color: rgba(255,255,255,.55); }

/* Collapsible header for the "Send scan to PC" / "Join PC via token"
   boxes - these stay minimized (just the title row) until tapped, see
   toggleBcodeCollapse() in app.js. */
.bcode-collapse-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; user-select: none;
}
.bcode-collapse-chevron {
  display: inline-block; flex-shrink: 0; font-size: 11px; color: var(--text-dim);
  transition: transform .15s ease;
}
.bcode-collapse-header.open .bcode-collapse-chevron { transform: rotate(90deg); }
.bcode-collapse-body {
  display: none;
  margin-top: 10px;
}
.bcode-collapse-body.open { display: block; }

.bcode-history-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel);
}
.bcode-history-item .bcode-hist-main { min-width: 0; }
.bcode-history-item .bcode-hist-value { font-size: 13px; word-break: break-all; }
.bcode-history-item .bcode-hist-meta { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.bcode-history-item .bcode-hist-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bcode-history-item .bcode-hist-actions button {
  font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: none; color: var(--accent); cursor: pointer;
}
/* Per-scan PC send status row (success/failed/pending + retry) - see
   setHistoryPcStatus()/handleScanAck()/retryHistoryPcSend() in app.js. */
.bcode-hist-status-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.bcode-hist-status { font-size: 10.5px; font-weight: 600; }
.bcode-hist-status-ok { color: #2e9e4f; }
.bcode-hist-status-fail { color: #d9484d; }
.bcode-hist-status-pending { color: var(--text-dim); font-weight: 500; }
.bcode-hist-retry {
  font-size: 10.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid #d9484d;
  background: none; color: #d9484d; cursor: pointer; font-weight: 600;
}
.bcode-hist-retry:hover { background: rgba(217,72,77,0.12); }
/* Counts summary above the scan history list (✅ done vs ❌ failed sent to PC). */
.bcode-history-summary {
  font-size: 11.5px; color: var(--text-dim); margin-top: 8px; font-weight: 600;
}

/* Compass tool - a static ring of N/E/S/W labels that rotates under a fixed
   pointer, so the pointer always shows the direction the device is
   currently facing (same convention as most phone compass apps). */
.compass-dial-outer { position: relative; width: 220px; height: 220px; margin: 0 auto 16px; }
.compass-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 20px; line-height: 1; color: var(--accent); z-index: 2;
}
.compass-dial {
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--border);
  background: var(--panel-2, #F4F6FB); position: relative;
  transition: transform 0.15s ease-out;
}
.compass-label { position: absolute; font-weight: 700; font-size: 14px; color: var(--text); }
.compass-n { top: 10px; left: 50%; transform: translateX(-50%); color: var(--danger); }
.compass-e { right: 12px; top: 50%; transform: translateY(-50%); }
.compass-s { bottom: 10px; left: 50%; transform: translateX(-50%); }
.compass-w { left: 12px; top: 50%; transform: translateY(-50%); }
.compass-reading { font-size: 26px; font-weight: 700; color: var(--text); }
.compass-direction { font-size: 14px; font-weight: 600; color: #4A5568; margin-top: 2px; }

/* Namaz & Azan tool - auto-calculated times, Hijri/Ramadan/Jumma info,
   next-waqt countdown, and a Qibla direction finder that reuses the same
   device-orientation dial styling as the plain Compass tool above. */
.alarm-row.namaz-active { border-color: var(--accent); background: rgba(60, 150, 255, 0.08); }
.alarm-row .alarm-row-offset {
  font-size: 11.5px; border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px;
  background: var(--panel); color: #4A5568; font-weight: 600; flex-shrink: 0;
}
.namaz-meta-card {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); margin-bottom: 10px; font-size: 13px; font-weight: 500; color: #4A5568;
}
.namaz-meta-card .namaz-hijri-date { font-weight: 700; color: var(--text); }
.namaz-jumma-badge {
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.namaz-ramadan-card {
  display: flex; gap: 18px; padding: 12px 14px; border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap;
  background: #FFF8E1; border: 1px solid #FFD54F; max-width: 460px;
}
@media (min-width: 900px) {
  .namaz-ramadan-card, .namaz-meta-card { max-width: 720px; }
}
.namaz-ramadan-card .namaz-ramadan-item { font-size: 12.5px; color: #7A5B00; }
.namaz-ramadan-card .namaz-ramadan-item b { display: block; font-size: 15px; }
.ramadan-cal-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.ramadan-cal-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); font-size: 12.5px;
}
.ramadan-cal-row.ramadan-cal-row-today { border-color: var(--accent); background: rgba(60, 150, 255, 0.08); }
.ramadan-cal-row .ramadan-cal-day { flex: 0 0 auto; min-width: 78px; color: var(--text-dim); }
.ramadan-cal-row .ramadan-cal-day b { color: var(--text); font-weight: 700; }
.ramadan-cal-row .ramadan-cal-times { flex: 1; display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.ramadan-cal-row .ramadan-cal-time-item { text-align: right; }
.ramadan-cal-row .ramadan-cal-time-label { font-size: 10.5px; color: var(--text-dim); }
.ramadan-cal-row .ramadan-cal-time-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.namaz-countdown-box {
  text-align: center; padding: 12px; border-radius: 10px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--border); max-width: 460px;
}
.namaz-countdown-box .namaz-countdown-label { font-size: 11.5px; color: var(--text-dim); }
.namaz-countdown-box .namaz-countdown-time { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.qibla-kaaba-icon {
  position: absolute; top: 8px; left: 50%; font-size: 30px; line-height: 1;
  transform: translateX(-50%); transform-origin: 50% 82px;
  /* Smooths out the raw, jittery device-orientation readings the same
     way .compass-dial already does for the plain Compass tool - without
     this the icon snapped instantly to every noisy sensor sample. */
  transition: transform 0.15s ease-out;
}

/* Digital Tasbih (dhikr counter) tool */
.tasbih-dhikr-label { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.tasbih-tap-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--accent), #2E7DD6); color: #fff;
  box-shadow: 0 6px 18px rgba(46, 125, 214, 0.35); user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.tasbih-tap-btn:active { transform: scale(0.94); }
.tasbih-tap-btn #tasbihCount { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tasbih-tap-btn .tasbih-tap-hint { font-size: 11.5px; opacity: 0.85; margin-top: 4px; }
/* Same fix as the other ইসলামী জীবন tools: round-target/total labels were
   12px in the faint var(--text-dim) grey - fine tucked into a narrow mobile
   card, weak next to the tap button's huge 44px counter on desktop. */
.tasbih-meta-row { font-size: 13px; font-weight: 600; color: #4A5568; margin-top: 10px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* .small-btn (used by these two) has no :active/transition of its own,
   so unlike .tasbih-tap-btn above they gave zero tap feedback - felt
   unresponsive/"not smooth" especially on mobile, where there's no
   :hover to fall back on. Give them the same quick press feedback. */
#tasbihUndoBtn, #tasbihResetBtn {
  transition: transform 0.08s ease, opacity 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
#tasbihUndoBtn:active, #tasbihResetBtn:active { transform: scale(0.93); opacity: 0.8; }

/* Proyojonio Dua (essential daily duas) tool, inside Namaz o Azan */
/* Category row (সকল/দৈনন্দিন কাজ/ঘর/...) is a plain .task-filter-row, which
   has no wrap or scroll of its own - on narrow phones the buttons just ran
   off the right edge with no way to reach them (see uploaded screenshot).
   Turn just this row into a left-right swipeable slider instead of touching
   the shared .task-filter-row rule other tabs rely on. */
#duaCatRow {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; justify-content: flex-start !important;
  padding-bottom: 2px; scroll-snap-type: x proximity;
}
#duaCatRow::-webkit-scrollbar { display: none; }
#duaCatRow [data-duacat] { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
.dua-list { display: flex; flex-direction: column; gap: 10px; max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) {
  .dua-list { max-width: 720px; }
}
.dua-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 12px 14px; }
.dua-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.dua-card-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.dua-card-ref { font-size: 12px; font-weight: 600; color: #566072; white-space: nowrap; }
.dua-arabic-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dua-arabic { flex: 1; }
.dua-audio-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--bg); cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.dua-audio-btn:hover { border-color: var(--accent); }
.dua-audio-btn:active { transform: scale(0.92); }
.dua-audio-btn.speaking { background: var(--accent); border-color: var(--accent); animation: dua-audio-pulse 1s ease-in-out infinite; }
@keyframes dua-audio-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.dua-arabic {
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  direction: rtl; text-align: right; font-size: 21px; line-height: 2;
  color: var(--text); unicode-bidi: plaintext;
}
/* Same fix as namaz/Quran: transliteration/meaning/ref lines were 10.5-12.5px
   in a faint grey, cramped inside the old 420px panel cap. Sized and
   darkened to match, and widened the card list above on desktop. */
.dua-translit { font-size: 13px; color: var(--accent-dark); font-style: italic; margin-bottom: 6px; line-height: 1.6; }
.dua-translit-bn { font-style: normal; opacity: 0.85; margin-top: -4px; }
.dua-meaning { font-size: 13.5px; color: var(--text); line-height: 1.7; }
.dua-cat-empty { font-size: 12.5px; color: #566072; text-align: center; padding: 14px 0; }
.dua-audio-note { font-size: 11.5px; color: #566072; margin-top: 6px; font-style: italic; }

/* কুরআন মাজীদ (full Qur'an reader) */
.quran-surah-list { display: flex; flex-direction: column; gap: 6px; max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) {
  .quran-surah-list { max-width: 720px; }
}
.quran-surah-row {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quran-surah-row:hover { border-color: var(--accent); }
.quran-surah-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg);
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #4A5568;
}
.quran-surah-mid { flex: 1; min-width: 0; }
.quran-surah-name-ar { font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; font-size: 16px; direction: rtl; text-align: right; color: var(--text); }
/* Same fix as the namaz list: the Bangla name, ayah/page count, and reader
   subtitle were 10.5-12px in the faint var(--text-dim) grey - cramped and
   washed out on a wide desktop screen. Sized and darkened to match. */
.quran-surah-name-bn { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }
.quran-surah-meta { flex-shrink: 0; font-size: 12px; color: #566072; white-space: nowrap; }
.quran-reader-head { text-align: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.quran-reader-title-ar { font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; font-size: 22px; color: var(--text); }
.quran-reader-title-bn { font-size: 13.5px; font-weight: 600; color: #566072; margin-top: 4px; }
.quran-voice-gender-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
  font-size: 12px; color: #566072;
}
.quran-voice-gender-row select {
  padding: 5px 8px; border-radius: 7px; border: 1.5px solid var(--border); font-size: 12px;
}
.quran-play-surah-btn {
  margin-top: 10px; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 20px;
  border: 1.5px solid var(--accent); background: var(--bg); color: var(--accent-dark, var(--accent));
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease;
}
.quran-play-surah-btn:hover { background: var(--accent); color: #fff; }
.quran-play-surah-btn.active { background: var(--accent); color: #fff; animation: dua-audio-pulse 1s ease-in-out infinite; }
.quran-ayah-card.quran-ayah-playing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.quran-bismillah {
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; direction: rtl; text-align: center;
  font-size: 22px; color: var(--text); margin-bottom: 16px;
}
.quran-ayah-card .dua-arabic { display: inline; }
.quran-ayah-num { font-family: inherit; color: var(--accent-dark, var(--accent)); font-size: 15px; }
.quran-offline-note {
  font-size: 12px; color: #566072; text-align: center; background: var(--panel);
  border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; line-height: 1.5;
}

/* সহজে কুরআন শিক্ষা - progress bar (huroof/memorize), the 4-shape letter
   grid, non-joiner badge, tajweed letter chips, and the multiple-choice
   quiz card. Reuses .dua-card/.dua-list/.quran-surah-row for everything
   else, so only the genuinely new bits need their own rules here. */
.learnq-progress-wrap { max-width: 620px; margin: 0 auto 14px; }
.learnq-progress-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; text-align: center; }
.learnq-progress-track { height: 8px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.learnq-progress-fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.2s ease; }
.dua-card.learnq-learned, .quran-surah-row.learnq-learned { border-color: var(--accent); background: rgba(31, 174, 142, 0.06); }
.learnq-learned-check { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 15px; cursor: pointer; user-select: none; }
.learnq-learned-check input { width: 16px; height: 16px; cursor: pointer; }
.learnq-forms-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.learnq-form-box {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
}
.learnq-form-box span { font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; font-size: 20px; direction: rtl; color: var(--text); }
.learnq-form-box small { font-size: 9.5px; color: var(--text-dim); }
.learnq-nonjoiner-tag { display: inline-block; margin-top: 8px; font-size: 10px; color: var(--text-dim); background: var(--bg); border: 1px dashed var(--border); border-radius: 6px; padding: 3px 7px; }
.learnq-letter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.learnq-letter-chip {
  font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; font-size: 17px; direction: rtl;
  background: var(--bg); border: 1.5px solid var(--accent); color: var(--text); border-radius: 8px; padding: 3px 10px;
}
.learnq-quiz-score { text-align: center; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.learnq-quiz-card { max-width: 420px; margin: 0 auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 20px 16px; }
.learnq-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.learnq-quiz-option {
  padding: 10px 8px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit;
}
.learnq-quiz-option:hover:not(:disabled) { border-color: var(--accent); }
.learnq-quiz-option:disabled { cursor: default; opacity: 0.75; }
.learnq-quiz-option.correct { border-color: var(--accent); background: rgba(31, 174, 142, 0.15); opacity: 1; }
.learnq-quiz-option.wrong { border-color: var(--danger); background: rgba(229, 72, 77, 0.12); opacity: 1; }
@media (max-width: 420px) { .learnq-forms-row { grid-template-columns: repeat(4, 1fr); gap: 4px; } .learnq-form-box span { font-size: 16px; } }

/* Weather tool */
.weather-warning-box {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
  background: #FFF3E0; border: 1px solid #FFB74D; max-width: 460px;
}
.weather-warning-box .weather-warning-title { font-weight: 700; font-size: 14px; color: #B45309; }
.weather-warning-box .weather-warning-msg { font-size: 12.5px; color: var(--text); }
.weather-warning-box .weather-warning-temp { font-size: 12px; color: var(--text-dim); }
.weather-current-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--border); max-width: 460px;
}
.weather-current-card .weather-current-icon { font-size: 46px; line-height: 1; }
.weather-current-card .weather-current-temp { font-size: 30px; font-weight: 700; color: var(--text); }
.weather-current-card .weather-current-desc { font-size: 13px; color: var(--text-dim); }
.weather-current-card .weather-current-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.weather-daily-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; max-width: 460px; }
.weather-day-chip {
  flex: 0 0 auto; min-width: 78px; text-align: center; padding: 10px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel);
}
.weather-day-chip .weather-day-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; }
.weather-day-chip .weather-day-icon { font-size: 22px; }
.weather-day-chip .weather-day-temps { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.weather-day-chip .weather-day-precip { font-size: 10.5px; color: var(--accent); margin-top: 2px; }

/* Nearby places tool */
.nearby-category-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.nearby-cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.nearby-map { width: 100%; max-width: 620px; height: 280px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; }
.nearby-list { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.nearby-place-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel); cursor: pointer;
}
.nearby-place-row:hover { border-color: var(--accent); }
.nearby-place-name { font-size: 13px; font-weight: 600; color: var(--text); }
.nearby-place-address { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.nearby-place-distance { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.nearby-place-dir-link { font-size: 11px; color: var(--text-dim); text-decoration: none; margin-top: 4px; display: inline-block; }
.nearby-place-phone, .nearby-place-website { font-size: 11.5px; color: var(--accent-dark); text-decoration: none; margin-top: 3px; display: block; }
.nearby-schedule-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text);
  background: rgba(31, 174, 142, 0.08);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 10px 0;
}
.nearby-schedule-banner a.small-btn { text-decoration: none; white-space: nowrap; }

/* Road Traffic / Route Planner tool */
.traffic-dest-suggestions {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  margin-top: 4px; max-height: 220px; overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.traffic-dest-suggestion-row { padding: 9px 12px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--border); }
.traffic-dest-suggestion-row:last-child { border-bottom: none; }
.traffic-dest-suggestion-row:hover { background: var(--hover-bg, rgba(0,0,0,0.04)); }
.traffic-mode-tabs { display: flex; gap: 8px; margin: 12px 0 10px; flex-wrap: wrap; }
.traffic-mode-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; cursor: pointer; }
.traffic-mode-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.traffic-route-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.traffic-route-row.best { border-color: var(--accent); background: rgba(31, 174, 142, 0.08); }
.traffic-route-time { font-size: 16px; font-weight: 700; color: var(--text); }
.traffic-route-dist { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.traffic-route-best-tag { font-size: 10.5px; color: var(--accent); font-weight: 700; margin-top: 2px; }
.traffic-disclaimer { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* রাইড শেয়ারিং (Ride Hailing) tool */
.rh-vehicle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rh-vehicle-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 74px; padding: 10px 8px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg); cursor: pointer;
}
.rh-vehicle-btn:hover { border-color: var(--accent); }
.rh-vehicle-btn.active { border-color: var(--accent); background: rgba(31,174,142,0.08); }
.rh-vehicle-icon { font-size: 22px; }
.rh-vehicle-label { font-size: 11px; font-weight: 600; color: var(--text); }
.rh-estimate-box {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(31,174,142,0.08); border: 1px solid var(--accent);
  font-size: 12.5px; color: var(--text);
}
.rh-ride-card, .rh-incoming-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 10px; background: #fff; box-shadow: 0 2px 8px rgba(11,61,51,0.06);
}
.rh-status-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--border); color: var(--text); margin-bottom: 8px;
}
.rh-status-searching { background: #fff3cd; color: #8a6d00; }
.rh-status-accepted, .rh-status-arrived { background: #d6ecff; color: #14538a; }
.rh-status-ongoing { background: rgba(31,174,142,0.15); color: var(--accent-dark, var(--accent)); }
.rh-status-completed { background: #e6f6ec; color: #1b7a3d; }
.rh-status-cancelled { background: #fde2e2; color: #a12727; }
.rh-route-line { font-size: 12.5px; color: var(--text); margin-bottom: 3px; }
.rh-fare-line { font-size: 12.5px; color: var(--text); margin: 6px 0; }
.rh-otp-box {
  font-size: 12.5px; margin: 8px 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,193,7,0.12); border: 1px dashed #cb9b00; color: var(--text);
}
.rh-driver-info { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rh-driver-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.rh-driver-vehicle, .rh-driver-rating { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.rh-driver-summary {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
  font-size: 12.5px; color: var(--text);
}
.rh-incoming-list { display: flex; flex-direction: column; }
.rh-accept-btn { display: block; }

/* ---------- Ride Hailing Phase 2: Pathao-style wallet, rewards, ratings ----------
   Pathao's own palette leans on a deep teal/near-black surface for money
   cards with a lime-green accent for calls to action; this app's existing
   --accent is already a very close teal (rgba(31,174,142,...)), so these
   rules lean on --accent/--accent-dark rather than introducing a clashing
   second brand color. */
.rh-wallet-strip {
  display: flex; align-items: stretch; background: linear-gradient(135deg, #0b3d33, #12574a);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; color: #fff;
  box-shadow: 0 4px 14px rgba(11,61,51,0.28);
}
.rh-wallet-strip-item { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rh-wallet-strip-divider { width: 1px; background: rgba(255,255,255,0.18); margin: 2px 12px; }
.rh-wallet-strip-label { font-size: 10.5px; color: rgba(255,255,255,0.72); font-weight: 600; letter-spacing: 0.2px; }
.rh-wallet-strip-value { font-size: 17px; font-weight: 800; color: #fff; }

.rh-balance-card {
  background: linear-gradient(135deg, #0b3d33, #157a63 65%, #1fae8e);
  border-radius: 16px; padding: 20px 18px; color: #fff; margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(11,61,51,0.3);
}
.rh-balance-card-label { font-size: 12px; color: rgba(255,255,255,0.78); font-weight: 600; }
.rh-balance-card-amount { font-size: 32px; font-weight: 800; margin: 6px 0 4px; letter-spacing: 0.3px; }
.rh-balance-card-sub { font-size: 11px; color: rgba(255,255,255,0.7); }

.rh-points-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff8e6; border: 1.5px solid #f3d98a; border-radius: 14px; padding: 14px 16px; margin-bottom: 4px;
}
.rh-points-card-label { font-size: 11.5px; font-weight: 700; color: #8a6d00; }
.rh-points-card-amount { font-size: 20px; font-weight: 800; color: #6b5300; margin-top: 2px; }

.rh-wallet-section-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 6px; }

.rh-txn-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.rh-txn-row:last-child { border-bottom: none; }
.rh-txn-note { font-size: 12px; color: var(--text); }
.rh-txn-date { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.rh-txn-amount { font-size: 13px; font-weight: 800; white-space: nowrap; }
.rh-txn-amount.pos { color: #1b7a3d; }
.rh-txn-amount.neg { color: #a12727; }
.rh-txn-points { font-size: 10.5px; color: #8a6d00; font-weight: 700; margin-top: 2px; }

.rh-topup-status-chip { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; display: inline-block; }
.rh-topup-status-chip.pending { background: #fff3cd; color: #8a6d00; }
.rh-topup-status-chip.approved { background: #e6f6ec; color: #1b7a3d; }
.rh-topup-status-chip.rejected { background: #fde2e2; color: #a12727; }

/* Star rating picker - tappable row of 5 stars, filled up to hovered/picked index */
.rh-star-picker { display: flex; gap: 6px; font-size: 34px; line-height: 1; user-select: none; }
.rh-star { color: #e2e2e2; cursor: pointer; transition: color .12s, transform .12s; }
.rh-star:hover { transform: scale(1.08); }
.rh-star.filled { color: #ffb800; }
.rh-star-readonly { font-size: 13px; color: #ffb800; letter-spacing: 1px; }

/* Vehicle picker cards, restyled Pathao-style: bigger tap targets with a
   base-fare hint shown even before a route is entered. */
.rh-vehicle-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rh-vehicle-btn {
  min-width: 84px; padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--border);
  background: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.rh-vehicle-btn:active { transform: scale(0.97); }
.rh-vehicle-btn:hover { border-color: var(--accent); }
.rh-vehicle-btn.active { border-color: var(--accent); background: rgba(31,174,142,0.09); box-shadow: 0 0 0 2px rgba(31,174,142,0.18) inset; }
.rh-vehicle-icon { font-size: 26px; }
.rh-vehicle-label { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; }
.rh-vehicle-basefare { font-size: 10px; color: var(--text-dim); }

/* Online/offline toggle pill for drivers */
.rh-online-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 20px; }
.rh-online-toggle.online { background: rgba(31,174,142,0.14); color: var(--accent-dark, #157a63); }
.rh-online-toggle.offline { background: var(--bg); color: var(--text-dim); }

.rh-earning-banner {
  background: linear-gradient(135deg, #0b3d33, #1fae8e); color: #fff; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; text-align: center;
}
.rh-earning-banner .amt { font-size: 22px; font-weight: 800; }
.rh-earning-banner .lbl { font-size: 11px; color: rgba(255,255,255,0.8); }

/* Ticket Search tool (Bus/Air/Launch/Train) */
.ticket-cat-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ticket-cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ticket-search-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  padding: 12px; margin-bottom: 12px; max-width: 620px;
}
.ticket-search-form .ticket-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 110px; }
.ticket-search-form .ticket-field label { font-size: 10.5px; color: var(--text-dim); }
.ticket-search-form input { padding: 8px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; }
.ticket-disclaimer {
  font-size: 11px; color: var(--text-dim); background: rgba(31, 174, 142, 0.08);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; max-width: 620px;
}
.ticket-quicklink-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; max-width: 620px; }
.ticket-quicklink-card {
  flex: 1 1 160px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  padding: 10px 12px; text-decoration: none; color: var(--text); font-size: 12.5px;
}
.ticket-quicklink-card:hover { border-color: var(--accent); }
.ticket-quicklink-card .ticket-quicklink-title { font-weight: 700; margin-bottom: 2px; }
.ticket-quicklink-card .ticket-quicklink-sub { font-size: 11px; color: var(--text-dim); }
.ticket-op-list { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.ticket-op-row {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel);
}
.ticket-op-row.route-matched { border-color: var(--accent); }
.ticket-op-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ticket-op-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.ticket-op-price { font-size: 12px; color: var(--accent); font-weight: 700; margin-top: 3px; }
.ticket-op-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.ticket-op-actions a, .ticket-op-actions button { font-size: 11.5px; color: var(--accent-dark); text-decoration: none; }
.link-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.ticket-admin-form {
  display: flex; flex-wrap: wrap; gap: 8px; border: 1px dashed var(--border); border-radius: 10px;
  padding: 12px; margin-top: 14px; max-width: 620px;
}
.ticket-admin-form .ticket-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; }
.ticket-admin-form .ticket-field label { font-size: 10.5px; color: var(--text-dim); }
.ticket-admin-form input, .ticket-admin-form select { padding: 8px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; }

/* যাকাত ক্যালকুলেটর result box - green (accent) when zakat is due, amber
   (warn) when nisab reached but hawl not confirmed yet, neutral border
   when below nisab. Color is toggled via .due/.pending/.below modifier
   classes from computeZakat() in app.js, not inline styles, since the
   same box is re-rendered on every "যাকাত হিসাব করুন" tap. */
.zakat-result-box { max-width: 620px; margin-top: 16px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--panel); font-size: 12.5px; line-height: 1.8; }
.zakat-result-box.due { border-color: var(--accent); background: rgba(31, 174, 142, 0.08); }
.zakat-result-box.pending { border-color: var(--warn); background: rgba(245, 166, 35, 0.1); }
.zakat-result-box .zakat-amount { font-size: 19px; font-weight: 800; color: var(--accent); }
.zakat-result-box.pending .zakat-amount { color: var(--warn); }
.zakat-result-box .zakat-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.zakat-result-box .zakat-verdict { font-weight: 700; margin-bottom: 6px; }

/* Group Live Location Share (PIN) tool */
.locshare-pin-banner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  background: rgba(31, 174, 142, 0.1); border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; max-width: 620px;
}
.locshare-pin-banner .locshare-pin-value { font-size: 20px; font-weight: 800; letter-spacing: 2px; color: var(--accent); }
.locshare-pin-banner .locshare-pin-label { font-size: 11px; color: var(--text-dim); }
.locshare-pin-banner .locshare-expiry { font-size: 12px; color: var(--text-dim); }
.locshare-member-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel);
}
.locshare-member-row .locshare-member-name { font-size: 13px; font-weight: 600; color: var(--text); }
.locshare-member-row .locshare-member-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.locshare-member-row .locshare-member-distance { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }

/* Toggle switch reused for both "on/off" alarms and namaz azan rows */
.tool-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.tool-switch input { opacity: 0; width: 0; height: 0; }
.tool-switch .tool-switch-track {
  position: absolute; inset: 0; background: #CBD3E3; border-radius: 999px; cursor: pointer; transition: background 0.15s;
}
.tool-switch .tool-switch-track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff;
  border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tool-switch input:checked + .tool-switch-track { background: var(--accent); }
.tool-switch input:checked + .tool-switch-track::before { transform: translateX(18px); }

/* Ringing popup for both alarms and azan */
.alarm-ring-modal { text-align: center; max-width: 320px; }
.alarm-ring-icon { font-size: 46px; margin-bottom: 4px; animation: alarmShake 0.6s infinite; }
.alarm-ring-time { font-size: 28px; font-weight: 700; margin: 6px 0 18px; }
.alarm-ring-actions { display: flex; gap: 10px; justify-content: center; }
@keyframes alarmShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* ---------- Responsive ---------- */
.hamburger { display: none; }
.back-to-chats-btn { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  /* Mirrors .hamburger's fixed circular-button look, mirrored to the
     top-right corner so it never overlaps the hamburger (top-left) or
     the left-padding every mobile header already reserves for it. JS
     only ever toggles the .show class (see the '.tab-btn' handler),
     never inline display - keeping the actual show/hide rule here,
     inside the mobile-only media query, is what keeps this button from
     ever appearing on desktop (where the sidebar tabs already cover
     this) even while .show is applied on a wide window. */
  .back-to-chats-btn.show {
    /* calc(12px + safe-area-inset-top) instead of a bare 12px keeps this
       clear of the iPhone status bar/notch area on standalone/PWA installs
       (see .sidebar's comment above) - previously it sat underneath the
       status bar there, which is why tapping the X to leave a tile/tab
       appeared to do nothing. */
    position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 50;
    display: flex; width: 38px; height: 38px; border-radius: 50%;
    /* background was var(--panel) (white) with color:white for the icon -
       a white "X" on a white circle, invisible. The border/shadow below
       were always styled for a dark button, so var(--ink) (same dark navy
       as the sidebar) is the intended background, not white. */
    background: var(--ink); color: white; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    align-items: center; justify-content: center;
    cursor: pointer;
  }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; transform: translateX(-100%);
    transition: transform .2s; width: 80%; max-width: 300px;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(0,0,0,0.4);
  }
  .hamburger { display: flex; }
  .hamburger {
    /* Same status-bar fix as .back-to-chats-btn.show above. */
    position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 50;
    width: 38px; height: 38px; border-radius: 50%;
    /* Same white-icon-on-white-background bug as .back-to-chats-btn.show
       above - this is what made the hamburger look like a blank white
       circle on mobile. var(--ink) restores the dark button the border/
       shadow were already designed for. */
    background: var(--ink); color: white; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    align-items: center; justify-content: center;
    transition: left 0.2s, right 0.2s;
  }
  /* When the sidebar is open, its own logo/title sits in this same
     top-left corner - move the button clear of it instead of overlapping. */
  .hamburger.sidebar-open { left: auto; right: 12px; }
  /* Every view (.main) reserves space up top so its own header content
     (title, tabs, buttons - whatever that view's markup is) never sits
     underneath the floating button above. This is what makes the button
     act as a consistent "back to menu" control across Chats/Calls/
     Meetings/Tasks/Email/Admin alike, not just the chat screen. */
  /* Reserve room for the floating back/menu button without changing
     .main's total content height (which risked pushing the composer
     below the visible viewport) - shrink the header row itself instead. */
  .chat-header { padding-left: 54px; min-height: 62px; }
  .admin-header { padding-left: 46px; }
  .msg-row { max-width: 85%; }
  .modal { max-width: 94vw; }
  /* iOS Safari auto-zooms the whole page when a focused input's font-size
     is under 16px - combined with maximum-scale=1 in the viewport meta tag
     this is what makes the screen look "stuck"/not fitting after tapping
     the message box. Keeping inputs at >=16px avoids that zoom entirely. */
  .composer textarea, input, select, textarea { font-size: 16px; }

  /* Filter chips (All/Unread/...) stay on ONE line and swipe horizontally
     instead of wrapping to a second row - saves vertical space on small
     screens. (.tabs gets the same treatment globally now, see base rule.) */
  .conv-filter-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .conv-filter-chips::-webkit-scrollbar { display: none; }
  .conv-filter-chips .chip { flex: 0 0 auto; white-space: nowrap; }

  /* Smaller phones need a shorter colleagues panel so "সাম্প্রতিক কল" below
     it is never pushed fully off-screen. */
  #callsColleaguesList { max-height: 38vh; }
}

/* ---- Workout / exercise tracker (Tools tab) ---- */
.workout-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.workout-type-btn {
  padding: 10px 8px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-align: center;
}
.workout-type-btn.active {
  border-color: var(--accent);
  background: rgba(31, 174, 142, 0.1);
  color: var(--accent-dark);
  font-weight: 600;
}
.workout-active-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--panel);
}
.workout-active-type { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.workout-stat-row { display: flex; gap: 10px; }
.workout-stat { flex: 1; text-align: center; }
.workout-stat-val { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.workout-stat-lbl { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.workout-gps-status { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; }

.workout-corner-widget {
  position: fixed;
  right: 12px;
  bottom: 86px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  cursor: pointer;
}
@media (min-width: 769px) { .workout-corner-widget { bottom: 20px; } }

/* ---------- Office file viewer & editor (Tools tab) ---------- */
.office-panel .office-drop-area {
  border: 2px dashed var(--border); border-radius: 14px; padding: 34px 16px;
  text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.office-panel .office-drop-area:hover,
.office-panel .office-drop-area.dragover { border-color: var(--accent); background: rgba(0,0,0,0.02); }
.office-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
.office-filename { font-weight: 700; font-size: 13px; word-break: break-all; }
.office-note { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }
.office-mode-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.office-mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Word */
.docx-viewer { max-height: 60vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; background: #fff; color: #111; }
.docx-para { line-height: 1.8; font-size: 14px; margin-bottom: 4px; min-height: 1.6em; }
.docx-run { outline: none; border-radius: 3px; }
.docx-run:focus { background: rgba(255, 214, 0, 0.28); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.docx-run:hover { background: rgba(0,0,0,0.04); }

/* PowerPoint */
.pptx-viewer { display: flex; flex-direction: column; gap: 14px; max-height: 65vh; overflow-y: auto; }
.pptx-slide-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.pptx-slide-label { font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.pptx-run-box {
  width: 100%; box-sizing: border-box; resize: none; overflow: hidden; margin-bottom: 6px;
  padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13.5px;
  font-family: inherit; background: var(--panel-2, #F4F6FB); color: var(--text);
}
.pptx-run-box:focus { border-color: var(--accent); outline: none; }

/* Excel / CSV */
.xlsx-sheet-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.xlsx-table-wrap { max-width: 100%; max-height: 55vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.xlsx-table { border-collapse: collapse; font-size: 12.5px; }
.xlsx-table td {
  border: 1px solid var(--border); padding: 6px 9px; min-width: 70px; white-space: pre-wrap;
  outline: none;
}
.xlsx-table td:focus { background: rgba(255, 214, 0, 0.22); box-shadow: inset 0 0 0 1.5px var(--accent); }
.xlsx-controls { display: flex; gap: 8px; margin-top: 10px; }

/* PDF */
.pdf-viewer { display: flex; flex-direction: column; align-items: center; gap: 16px; max-height: 65vh; overflow-y: auto; }
.pdf-page-wrap { position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.18); cursor: text; }
.pdf-page-wrap canvas { display: block; }
.pdf-overlay-layer { position: absolute; inset: 0; pointer-events: none; }
.pdf-overlay-box {
  position: absolute; pointer-events: auto; display: flex; align-items: flex-start; gap: 3px;
  background: rgba(255,255,255,0.85); border: 1px dashed var(--accent); border-radius: 3px; padding: 1px 3px;
}
.pdf-overlay-text { min-width: 14px; outline: none; white-space: pre-wrap; }
.pdf-overlay-del {
  border: none; background: var(--danger); color: #fff; border-radius: 50%; width: 15px; height: 15px;
  line-height: 15px; font-size: 9px; padding: 0; cursor: pointer; flex-shrink: 0;
}

/* ---------- Ludo (লুডু) mini-game ---------- */
.ludo-setup .section-title-sm { font-weight: 700; font-size: 12.5px; color: var(--text); margin-bottom: 8px; }
.ludo-status-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.ludo-turn-badge {
  color: #fff; font-weight: 700; font-size: 12px; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Dice rendered as a little raised cube with its own highlight/shadow so
   it reads as a physical die rather than a flat unicode glyph. */
.ludo-dice-face {
  font-size: 26px; line-height: 1; min-width: 38px; height: 38px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  background: linear-gradient(160deg, #ffffff 0%, #e8e8ec 55%, #cfd2d8 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.15);
  color: #2b2b33;
}
.ludo-log { flex-basis: 100%; font-size: 12px; color: var(--text-dim); }
/* Plain block layout, NOT flex - a flex row here previously fought with the
   JS-computed `transform: scale()` in fitLudoBoard() (ludo.js): the browser
   would flex-shrink this container's child to fit a narrow phone screen on
   top of (and completely uncoordinated with) that transform, and the two
   shrinks stacking is what caused the board to render off-center with its
   right edge clipped off on mobile. overflow-x is auto (not hidden) so that
   on the rare screen too narrow to fit the board even at ludo.js's MIN_SCALE
   floor, the board can be scrolled sideways (by touch/drag or the
   #ludoHScrollSlider slider next to it) instead of being clipped and
   unreachable. position:relative anchors #ludoBoard's absolute positioning
   below - fitLudoBoard() computes and sets its `left` itself (not CSS
   margin:auto - a scaled-down-but-still-wider-than-container box centers
   inconsistently via margin:auto across browsers, which is exactly what
   caused a second, subtler version of this same off-center bug). */
.ludo-board-outer {
  position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
/* A thick colorful "frame" plus a soft inner vignette gives the board some
   depth instead of a flat white square - same 3D approach as the carrom
   board's wood frame, just in board-game-box colors instead of wood. */
.ludo-board {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; box-sizing: border-box;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(135deg, #fdfdff 0%, #eef0f5 100%);
  border-radius: 10px;
  border: 7px solid #3a4a7a;
  border-image: linear-gradient(155deg, #e53935, #f2b705 33%, #43a047 66%, #1e88e5) 1;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.6),
    inset 0 2px 10px rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.35);
}
#ludoFullscreenBtn { display: inline-flex; margin-bottom: 8px; }
/* Left-right slider - shown only when the board can't fully fit even at
   MIN_SCALE (fitLudoBoard() in ludo.js toggles this). */
.ludo-hscroll-row { align-items: center; gap: 8px; margin: 2px 0 10px; }
.ludo-hscroll-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.ludo-hscroll-arrow { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
/* Full-screen mode for the Ludo game itself - a CSS-only "cover the app"
   toggle (not the native Fullscreen API, which Capacitor's iOS/Android
   WebViews and some mobile browsers don't reliably support for a plain
   div) so it works the same everywhere the app runs. z-index 60 is
   deliberately BELOW the message-alert toast (80), incoming-call toast
   (90), call-waiting toast (110) and active call overlay (100) - a call
   or message must still interrupt a full-screen game, never get buried
   under it. See fitLudoBoard()/toggleLudoFullscreen() in ludo.js. */
.ludo-fullscreen-active {
  position: fixed; inset: 0; z-index: 60; background: var(--panel);
  padding: 14px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column;
}
.ludo-fullscreen-active #ludoFullscreenBtn { align-self: flex-end; position: sticky; top: 0; }
/* Each ring cell gets a slight raised-tile gradient + inset highlight
   instead of a flat white fill, so the track itself has some depth. Safe
   cells and the colored start/stretch/home cells (background/border set
   inline from ludo.js via color.hex) keep their own color but pick up the
   same inset lighting via box-shadow, which layers fine on top of any
   inline background color. */
.ludo-cell {
  position: absolute; box-sizing: border-box; border: 1px solid var(--border);
  background: linear-gradient(160deg, #ffffff 0%, #eef0f4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #cf9b00;
}
.ludo-safe {
  font-weight: 700; color: #b8860b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(0,0,0,.08), inset 0 0 0 2px rgba(242,183,5,.5);
}
.ludo-stretch-cell, .ludo-home-cell {
  border-width: 1px;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.25);
}
.ludo-home-cell { border-radius: 4px; }
.ludo-yard-box {
  position: absolute; box-sizing: border-box; border: 2px dashed; border-radius: 12px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.08);
}
.ludo-token-layer { position: absolute; inset: 0; pointer-events: none; }
/* Glossy "playing piece" look: an inline background color from ludo.js
   (color.hex) still shows through, with a highlight/shadow overlay drawn
   via ::after on top so every token reads as a rounded 3D marble. */
.ludo-token {
  position: absolute; border-radius: 50%; border: 2px solid rgba(0,0,0,.3);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -3px 4px rgba(0,0,0,.35);
  transition: left .25s ease, top .25s ease;
  pointer-events: none;
}
.ludo-token::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.15) 40%, transparent 65%);
}
.ludo-token-movable {
  pointer-events: auto; cursor: pointer; animation: ludoPulse 1s infinite;
}
@keyframes ludoPulse {
  0%, 100% { box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -3px 4px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.9); }
  50% { box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -3px 4px rgba(0,0,0,.35), 0 0 0 5px rgba(255,255,255,.55); }
}
.ludo-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.ludo-legend-item {
  font-size: 12px; font-weight: 600; color: var(--text); border-left: 4px solid; padding-left: 6px;
}
.ludo-winner-banner {
  flex-basis: 100%; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, #fff7d6, #ffe9a3);
  border: 1.5px solid #f2b705; border-radius: 9px; padding: 10px 12px; margin-top: 8px;
  box-shadow: 0 3px 8px rgba(242,183,5,.3);
}
@media (max-width: 480px) {
  .ludo-dice-face { font-size: 22px; }
}

/* ---------- Carrom (ক্যারম) mini-game ---------- */
.carrom-status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.carrom-turn-badge {
  font-weight: 700; font-size: 12px; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.carrom-log { flex-basis: 100%; font-size: 12px; color: var(--text-dim); }
/* Same rationale as .ludo-board-outer/.ludo-board: plain block layout (not
   flex) so it doesn't fight the JS-computed transform:scale() in
   fitCarromBoard(), and position:relative anchors the absolutely
   positioned pockets/coins/striker inside #carromBoard. Styled after a
   real wooden carrom board: light honey-oak surface with visible grain,
   big rounded corners, a thin inset cushion-boundary line (not a thick
   physical frame), and decorative fan arcs radiating from each pocket. */
.carrom-board-outer {
  position: relative; overflow: hidden; touch-action: none;
  border-radius: 30px; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.carrom-board {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; box-sizing: border-box;
  background:
    repeating-linear-gradient(100deg, rgba(150,101,45,.07) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(135deg, #f3d9a4 0%, #e8c483 45%, #d9a95f 100%);
  border-radius: 30px;
  border: 3px solid #c8985a;
  box-shadow:
    inset 0 0 0 1px rgba(255,244,220,.6),
    inset 0 2px 10px rgba(0,0,0,.12),
    inset 0 -3px 14px rgba(0,0,0,.1),
    0 6px 16px rgba(0,0,0,.3);
}
/* Thin rounded-square boundary line marking the cushion, inset from the
   board edge so it curves neatly between the four pockets - drawn as its
   own element (see buildGameView) rather than a border on .carrom-board
   itself, since the board's own edge is rounded much more (matches the
   reference photo's light wood margin outside the play-line). */
.carrom-cushion-line {
  position: absolute; box-sizing: border-box; pointer-events: none;
  border: 2px solid rgba(122,58,22,.4); border-radius: 26px;
}
/* Small double-arc "fan" decoration curving out from each pocket, same
   spirit as the scalloped corner pattern on a real board. One element per
   corner; box-sizing + a large radius on just the corner facing the
   center turns two solid edges into a quarter-circle stroke. */
.carrom-corner-arc {
  position: absolute; box-sizing: border-box; pointer-events: none;
  border-style: solid; border-color: transparent;
}
#carromFullscreenBtn { display: inline-flex; margin-bottom: 8px; }
.carrom-fullscreen-active {
  position: fixed; inset: 0; z-index: 60; background: var(--panel);
  padding: 14px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column;
}
.carrom-fullscreen-active #carromFullscreenBtn { align-self: flex-end; position: sticky; top: 0; }
.carrom-pocket {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a2f18 0%, #1c0f06 55%, #000 100%);
  box-shadow: inset 0 0 8px rgba(0,0,0,.9), inset 0 2px 3px rgba(255,255,255,.08), 0 0 0 3px #8a5a30;
}
.carrom-center-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid rgba(122,58,22,.5);
  box-shadow: 0 0 0 6px rgba(122,58,22,.1), inset 0 0 10px rgba(122,58,22,.12);
  box-sizing: border-box;
}
.carrom-baseline { position: absolute; height: 0; border-top: 2px dashed rgba(90,52,24,.5); }
.carrom-coin-layer { position: absolute; inset: 0; pointer-events: none; }
/* Glossy "poker chip" look: a bright highlight top-left, darker rim
   shadow bottom-right, plus a thin inner ring so each coin reads as a
   rounded 3D disc rather than a flat circle. */
.carrom-coin {
  position: absolute; border-radius: 50%; box-sizing: border-box;
  box-shadow:
    0 3px 5px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -3px 4px rgba(0,0,0,.35);
}
.carrom-coin-white {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f1f1f1 45%, #d6d6d6 100%);
  border: 1px solid #b8b8b8;
}
.carrom-coin-black {
  background: radial-gradient(circle at 32% 28%, #555 0%, #262626 55%, #000 100%);
  border: 1px solid #000;
}
.carrom-coin-queen {
  background: radial-gradient(circle at 32% 28%, #ff7a6e 0%, #e0362a 50%, #941f16 100%);
  border: 1px solid #6e130c;
  box-shadow:
    0 3px 6px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 -3px 4px rgba(0,0,0,.4),
    0 0 6px 1px rgba(255,60,40,.5);
}
/* Blue/white pinwheel striker, same spirit as a real carrom striker's
   painted rim pattern - a repeating conic gradient makes the alternating
   wedges, with a small white hub in the middle. */
.carrom-striker {
  position: absolute; border-radius: 50%; touch-action: none; cursor: grab; z-index: 3;
  background:
    radial-gradient(circle at center, #ffffff 0 22%, transparent 23%),
    repeating-conic-gradient(#2f7bc4 0deg 30deg, #ffffff 30deg 60deg);
  border: 2px solid #ffffff;
  box-shadow:
    0 4px 8px rgba(0,0,0,.5),
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -4px 6px rgba(0,0,0,.25);
}
.carrom-striker-ready { animation: carromPulse 1.1s infinite; }
@keyframes carromPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,110,.9), 0 4px 8px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -4px 6px rgba(0,0,0,.25); }
  50% { box-shadow: 0 0 0 6px rgba(255,214,110,.35), 0 4px 8px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -4px 6px rgba(0,0,0,.25); }
}
.carrom-aim-line {
  position: absolute; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,214,110,.95) 0 6px, transparent 6px 10px);
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
  transform-origin: 0 50%; pointer-events: none; z-index: 2;
}
.carrom-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.carrom-controls-hint { font-size: 11.5px; color: var(--text-dim); text-align: center; }
.carrom-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.carrom-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.carrom-legend-swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
}
.carrom-winner-banner {
  flex-basis: 100%; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, #fff7d6, #ffe9a3);
  border: 1.5px solid #f2b705; border-radius: 9px; padding: 10px 12px; margin-top: 8px;
  box-shadow: 0 3px 8px rgba(242,183,5,.3);
}

/* ---------- DxBall (ডিএক্স বল) mini-game ---------- */
.dxball-status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 10px; }
.dxball-stat { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* Canvas keeps its fixed internal resolution (380x480) and is scaled purely
   via CSS width/aspect-ratio - simpler than ludo/carrom's manual JS
   transform:scale() fit, since a <canvas> already redraws crisply at any
   CSS size. max-width caps it on wide desktop screens. */
.dxball-board-outer {
  position: relative; margin: 0 auto; max-width: 420px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.dxball-canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 380 / 480;
  touch-action: none; cursor: pointer; background: #0e1119;
}
#dxballFullscreenBtn { display: inline-flex; margin-bottom: 8px; }
.dxball-fullscreen-active {
  position: fixed; inset: 0; z-index: 60; background: var(--panel);
  padding: 14px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
}
.dxball-fullscreen-active #dxballFullscreenBtn { align-self: flex-end; position: sticky; top: 0; }
.dxball-fullscreen-active .dxball-board-outer { flex: 1; max-width: min(420px, 92vw); display: flex; align-items: center; }
.dxball-fullscreen-active .dxball-canvas { max-height: 68vh; width: auto; height: 100%; }
.dxball-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dxball-controls-hint { font-size: 11.5px; color: var(--text-dim); text-align: center; }
.dxball-winner-banner {
  flex-basis: 100%; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, #ffe3e3, #ffc9c9);
  border: 1.5px solid #ff5c5c; border-radius: 9px; padding: 10px 12px; margin-top: 4px;
  box-shadow: 0 3px 8px rgba(255,92,92,.3);
}

/* ---------- Car Racing (কার রেসিং) mini-game ---------- */
.racing-status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 10px; }
.racing-stat { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* Same fixed-internal-resolution canvas approach as .dxball-board-outer -
   CSS scales the element, canvas redraws crisply at any size. */
.racing-board-outer {
  position: relative; margin: 0 auto; max-width: 380px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.racing-canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 340 / 480;
  touch-action: none; cursor: pointer; background: #23262e;
}
#racingFullscreenBtn { display: inline-flex; margin-bottom: 8px; }
.racing-fullscreen-active {
  position: fixed; inset: 0; z-index: 60; background: var(--panel);
  padding: 14px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
}
.racing-fullscreen-active #racingFullscreenBtn { align-self: flex-end; position: sticky; top: 0; }
.racing-fullscreen-active .racing-board-outer { flex: 1; max-width: min(380px, 92vw); display: flex; align-items: center; }
.racing-fullscreen-active .racing-canvas { max-height: 68vh; width: auto; height: 100%; }
.racing-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.racing-controls-hint { font-size: 11.5px; color: var(--text-dim); text-align: center; }
/* Bigger than the base .small-btn - these are held/tapped repeatedly during
   play on mobile, so they need a large, easy-to-hit touch target. */
#racingLeftBtn, #racingRightBtn {
  width: 68px; height: 68px; font-size: 26px; font-weight: 700;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
#racingLeftBtn:active, #racingRightBtn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.racing-winner-banner {
  flex-basis: 100%; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, #ffe3e3, #ffc9c9);
  border: 1.5px solid #ff5c5c; border-radius: 9px; padding: 10px 12px; margin-top: 4px;
  box-shadow: 0 3px 8px rgba(255,92,92,.3);
}

/* ---------- Chess (দাবা) mini-game ---------- */
.chess-status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.chess-turn-badge { font-weight: 700; font-size: 13px; color: var(--text); }
/* Plain block layout + JS transform:scale, same rationale as
   .ludo-board-outer/.carrom-board-outer - avoids the flex/transform
   double-shrink bug documented there. */
.chess-board-outer {
  position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.chess-board {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; box-sizing: border-box;
  border: 6px solid #5a3417; border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 6px 16px rgba(0,0,0,.35);
}
.chess-cell { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chess-cell-light { background: #f0d9b5; }
.chess-cell-dark { background: #b58863; }
.chess-cell-selected { box-shadow: inset 0 0 0 3px #4d96ff; }
.chess-cell-target::after {
  content: ''; width: 28%; height: 28%; border-radius: 50%; background: rgba(30,30,30,.35);
}
.chess-cell-target-capture::after {
  content: ''; width: 90%; height: 90%; border-radius: 50%; background: transparent;
  box-shadow: inset 0 0 0 4px rgba(220,50,50,.65);
}
.chess-cell-check { box-shadow: inset 0 0 0 3px #ff5c5c, inset 0 0 16px rgba(255,92,92,.55); }
.chess-piece { font-size: 30px; line-height: 1; user-select: none; pointer-events: none; }
.chess-piece-w { color: #fbfbfb; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 1px #000; }
.chess-piece-b { color: #1a1a1a; text-shadow: 0 1px 1px rgba(255,255,255,.3); }
#chessFullscreenBtn { display: inline-flex; margin-bottom: 8px; }
.chess-fullscreen-active {
  position: fixed; inset: 0; z-index: 60; background: var(--panel);
  padding: 14px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column;
}
.chess-fullscreen-active #chessFullscreenBtn { align-self: flex-end; position: sticky; top: 0; }
.chess-promo-picker {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--panel-2, rgba(0,0,0,.03)); border: 1.5px solid var(--border); border-radius: 10px; padding: 10px;
}
.chess-promo-label { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.chess-promo-options { display: flex; gap: 8px; }
.chess-promo-btn {
  font-size: 26px; width: 46px; height: 46px; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--panel); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chess-captured-row { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.chess-captured-line { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.chess-captured-label { font-weight: 600; margin-right: 4px; }
.chess-captured-line .chess-piece { font-size: 16px; }
.chess-log {
  margin-top: 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.6;
  max-height: 90px; overflow-y: auto; font-family: monospace;
}
.chess-winner-banner {
  flex-basis: 100%; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, #fff7d6, #ffe9a3);
  border: 1.5px solid #f2b705; border-radius: 9px; padding: 10px 12px; margin-top: 8px;
  box-shadow: 0 3px 8px rgba(242,183,5,.3);
}

/* ---- Desktop sidebar: wider, auto-scaling column with proportionally
   larger type/icons ------------------------------------------------------
   The sidebar was a flat 280px on every screen, phone or 27" monitor alike.
   That's a sensible *minimum* for a phone, but on a real desktop window it
   left the tab bar, colleague list, names and search box all sized for a
   much smaller screen - tiny 9.5px tab labels, names clipped to "Md. S...",
   a scrollbar just to see the rest of the tab row. `clamp()` lets the
   column genuinely respond to the window instead of a single fixed number:
   it never drops below 300px (still comfortable), grows with the viewport
   via `22vw`, and stops widening past 380px so it can't crowd out the chat
   panel on ultrawide displays. Scoped to min-width:821px so it never touches
   the existing mobile layout (which uses the opposite max-width:820px
   breakpoint elsewhere in this file). */
@media (min-width: 821px) {
  .app { grid-template-columns: clamp(300px, 22vw, 380px) 1fr; }

  .sidebar-header { padding: 22px 20px 16px; gap: 12px; }
  .sidebar-header .mark { width: 38px; height: 38px; border-radius: 10px; }
  .sidebar-header .title { font-size: 17px; }
  .sidebar-header .subtitle { font-size: 12.5px; }

  .me-bar { padding: 14px 20px; gap: 12px; }
  .me-bar .avatar { width: 40px; height: 40px; font-size: 15px; }
  .me-bar .me-name { font-size: 14.5px; }
  .me-bar .me-role { font-size: 12px; }

  /* Tabs keep single-row + horizontal scroll by design (there can be 10+
     of them, see the .tabs comment above) - only their own size grows, so
     more of the row is legible before anyone needs to scroll it at all. */
  .tabs { padding: 9px 12px 8px; gap: 5px; }
  .tab-btn { min-width: 62px; padding: 7px 5px 8px; font-size: 11px; gap: 3px; border-radius: 9px; }
  .tab-btn svg { width: 18px; height: 18px; }

  .conv-search-wrap { margin: 12px 16px 6px; padding: 10px 14px; }
  .conv-search-wrap input { font-size: 13.5px; }
  .conv-filter-chips { padding: 6px 14px 4px; gap: 6px; }
  .conv-filter-chips .chip { font-size: 11px; padding: 3px 10px; }

  .conv-list { padding: 10px 12px; }
  .conv-item { padding: 11px 12px; gap: 12px; }
  .conv-item .avatar { width: 42px; height: 42px; font-size: 15px; }
  .conv-item .conv-name { font-size: 14.5px; }
  .conv-item .conv-preview { font-size: 12.5px; max-width: none; }
  .conv-time { font-size: 11px; }
  .unread-badge { font-size: 11px; min-width: 19px; height: 19px; }

  .side-icon-toolbar { padding: 10px 14px; }
  .side-icon-btn { width: 36px; height: 36px; }
  .side-icon-btn svg { width: 20px; height: 20px; }
}

/* ---------- Jobs (চাকরি) tool ---------- */
.jobs-sub-panel { max-width: 100%; }
.jobs-card {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: white;
}
.jobs-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.jobs-card-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.jobs-card-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.jobs-card-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--text-dim); margin: 6px 0; }
.jobs-card-meta span { background: var(--bg); border-radius: 6px; padding: 3px 8px; }
.jobs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jobs-status-pill { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-block; }
.jobs-status-applied, .jobs-status-draft { background: #F1F2F4; color: var(--text-dim); }
.jobs-status-shortlisted, .jobs-status-published { background: #E6F7F1; color: var(--accent-dark); }
.jobs-status-interview_scheduled { background: #FFF4E0; color: #A9720D; }
.jobs-status-hired { background: #E6F7F1; color: var(--accent-dark); }
.jobs-status-rejected, .jobs-status-closed { background: #FDECEC; color: var(--danger); }
.jobs-notif-item { border-bottom: 1px solid var(--border); padding: 10px 4px; font-size: 12.5px; }
.jobs-notif-item.unread { background: rgba(31,174,142,0.05); }
.jobs-notif-title { font-weight: 700; margin-bottom: 2px; }
.jobs-notif-time { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }
.jobs-cv-row { border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; position: relative; }
.jobs-cv-row-remove { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--danger); font-size: 13px; cursor: pointer; }
.jobs-cv-row .field { margin-bottom: 8px; }
.jobs-timeline { border-left: 2px solid var(--border); padding-left: 14px; margin: 10px 0; }
.jobs-timeline-item { margin-bottom: 12px; font-size: 12.5px; position: relative; }
.jobs-timeline-item::before { content: ''; position: absolute; left: -18px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* =======================================================================
   প্রয়োজন (Proyojon marketplace) - full ecommerce-grade redesign
   (Daraz/Amazon-style: gradient hero, icon nav, chip filters, product
   cards with discount ribbons, stepper cart, gradient stat dashboard).
   Everything here is scoped under #toolsPanel-proyojon (or is a
   .pjx-/.proyojon- class only this tool uses) so no other tool's
   .jobs-card/.tools-subtab-btn/.task-filter-btn look is touched -
   this tool still reuses those base classes for structure, it just
   layers its own skin on top of them. */

/* ---- Hero banner (sits above the তালিকা tile grid) ---- */
.pjx-hero {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent-dark) 100%);
  color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(23,143,117,0.22);
}
.pjx-hero-icon {
  width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.pjx-hero-title { font-size: 16.5px; font-weight: 800; margin-bottom: 3px; }
.pjx-hero-sub { font-size: 12px; opacity: 0.88; line-height: 1.4; }

/* ---- Icon nav tiles, scoped skin over the shared .tools-subtab-btn ---- */
#toolsPanel-proyojon .tools-grid { gap: 10px; }
#toolsPanel-proyojon .tools-subtab-btn {
  border-radius: 16px; border-width: 1.5px; background: var(--panel);
  box-shadow: 0 1px 3px rgba(16,24,40,0.05);
}
#toolsPanel-proyojon .tools-subtab-btn:hover { box-shadow: 0 6px 16px rgba(23,143,117,0.14); transform: translateY(-1px); }
#toolsPanel-proyojon .tools-subtab-btn .tools-card-icon {
  width: 50px; height: 50px; font-size: 25px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(31,174,142,0.14), rgba(31,174,142,0.05));
}
#toolsPanel-proyojon .tools-subtab-btn.active .tools-card-icon,
#toolsPanel-proyojon .tools-subtab-btn:hover .tools-card-icon { background: var(--accent); color: #fff; }

/* ---- Search + filter toolbar ---- */
.pjx-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pjx-search-wrap { position: relative; flex: 1; min-width: 180px; }
.pjx-search-wrap .pjx-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13.5px; opacity: 0.55; pointer-events: none; }
.pjx-search-wrap input {
  width: 100%; padding: 10px 12px 10px 34px; border-radius: 22px; border: 1.5px solid var(--border);
  font-size: 13px; background: var(--panel); transition: border-color .15s, box-shadow .15s;
}
.pjx-search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,174,142,0.12); }
.pjx-select {
  padding: 9px 12px; border-radius: 22px; border: 1.5px solid var(--border); background: var(--panel);
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.pjx-select:focus { outline: none; border-color: var(--accent); }

/* ---- Category chip strip (horizontal scroll) ---- */
.pjx-chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 4px; scrollbar-width: thin; }
.pjx-chip-row::-webkit-scrollbar { height: 5px; }
.pjx-chip-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.pjx-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
  padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--panel);
  font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; transition: all .15s;
}
.pjx-chip:hover { border-color: var(--accent); }
.pjx-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(31,174,142,0.3); }

/* ---- Product grid & card ---- */
.proyojon-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.proyojon-product-card {
  position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--panel); cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.proyojon-product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(16,24,40,0.1); border-color: transparent; }
.proyojon-product-thumb-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bg); }
.proyojon-product-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.proyojon-product-card:hover .proyojon-product-thumb { transform: scale(1.07); }
.proyojon-discount-badge {
  position: absolute; top: 8px; left: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 7px; letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(229,72,77,0.4);
}
.proyojon-newtag-badge {
  position: absolute; top: 8px; left: 8px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 7px;
}
.proyojon-product-info { padding: 9px 11px 11px; }
.proyojon-product-title {
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 5px;
  min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.proyojon-product-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.proyojon-product-price { font-size: 15px; font-weight: 800; color: var(--accent-dark); }
.proyojon-product-price-old { font-size: 11px; color: var(--text-dim); text-decoration: line-through; }
.proyojon-product-meta {
  display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-dim);
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
}
.proyojon-thumb-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.proyojon-thumb-strip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--border); }

/* ---- Order/vendor status colours (kept exactly as before) ---- */
.jobs-status-active, .jobs-status-confirmed, .jobs-status-delivered { background: #E6F7F1; color: var(--accent-dark); }
.jobs-status-pending { background: #FFF4E0; color: #A9720D; }
.jobs-status-packed, .jobs-status-shipped { background: #E6EEFB; color: #2A5FBD; }
.jobs-status-paused, .jobs-status-out_of_stock { background: #F1F2F4; color: var(--text-dim); }
.jobs-status-cancelled { background: #FDECEC; color: var(--danger); }

/* ---- Cart: item row with quantity stepper + sticky-feel summary ---- */
.pjx-cart-item {
  display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px;
}
.pjx-cart-thumb { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; background: var(--bg); flex-shrink: 0; }
.pjx-cart-thumb-ph {
  width: 62px; height: 62px; border-radius: 10px; background: var(--bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.pjx-qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.pjx-qty-btn { width: 26px; height: 26px; border: none; background: var(--bg); font-weight: 800; font-size: 14px; cursor: pointer; color: var(--text); }
.pjx-qty-btn:hover { background: var(--accent); color: #fff; }
.pjx-qty-input { width: 38px; text-align: center; border: none; outline: none; font-weight: 700; font-size: 13px; -moz-appearance: textfield; }
.pjx-qty-input::-webkit-outer-spin-button, .pjx-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pjx-cart-summary {
  background: linear-gradient(135deg, rgba(31,174,142,0.06), rgba(31,174,142,0.01));
  border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; margin-top: 14px;
}
.pjx-cart-summary-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.pjx-cart-summary-row span:last-child { color: var(--accent-dark); }

/* ---- Seller / admin dashboard stat cards ---- */
.proyojon-stat-chip {
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1.5px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 10px 14px; font-size: 11.5px; color: var(--text-dim); min-width: 128px;
}
.proyojon-stat-chip .pjx-stat-icon {
  width: 34px; height: 34px; border-radius: 10px; background: rgba(31,174,142,0.12);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.proyojon-stat-chip b { display: block; font-size: 16px; color: var(--text); font-weight: 800; }
.proyojon-star { color: #E8A200; letter-spacing: 1px; }

/* ---- Shop / vendor header card (seller portal, product detail) ---- */
.pjx-shop-card {
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
}
.pjx-shop-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--bg); flex-shrink: 0; }

@media (max-width: 480px) {
  .pjx-hero { padding: 14px 16px; }
  .pjx-hero-icon { width: 44px; height: 44px; font-size: 21px; }
  .pjx-hero-title { font-size: 14.5px; }
}

/* ============================================================================
   ভাড়া বাজার (Bhara / Rent Market) - dedicated visual language, distinct
   from the plain proyojon-product-* look: a proper classifieds/marketplace
   feel (category chip rail, filter bar, featured ribbon, image gallery,
   status pills, toggle switch, icon-based admin category cards). Reuses
   design tokens only (--accent/--border/--panel/--text/--radius/--font) so
   it stays in sync with dark-mode or any future theme change automatically.
   ============================================================================ */

/* ---- Hero / search bar ---- */
.bh-hero {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: 16px; padding: 18px 18px 40px; margin-bottom: -26px; position: relative; overflow: hidden;
}
.bh-hero::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.bh-hero-title { color: #fff; font-size: 15.5px; font-weight: 800; margin-bottom: 2px; position: relative; }
.bh-hero-sub { color: rgba(255,255,255,0.85); font-size: 11.5px; margin-bottom: 14px; position: relative; }
.bh-searchbar {
  position: relative; background: var(--panel); border-radius: 12px; box-shadow: 0 6px 18px rgba(18,33,59,0.16);
  display: flex; align-items: center; padding: 4px; gap: 4px; z-index: 1;
}
.bh-searchbar .bh-search-icon { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 15px; }
.bh-searchbar input[type="text"] { flex: 1; min-width: 0; border: none; background: none; padding: 10px 4px; font-size: 13.5px; font-family: var(--font); color: var(--text); }
.bh-searchbar input[type="text"]:focus { outline: none; }
.bh-searchbar .bh-filter-toggle-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; border: none; background: var(--bg);
  color: var(--text-dim); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bh-searchbar .bh-filter-toggle-btn.has-active { background: var(--accent); color: #fff; }
.bh-searchbar .bh-filter-toggle-btn:hover { color: var(--accent-dark); }

/* ---- Category chip rail ---- */
.bh-cat-rail-wrap { margin-top: 30px; padding: 0 2px 4px; }
.bh-cat-rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.bh-cat-rail::-webkit-scrollbar { height: 5px; }
.bh-cat-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.bh-cat-chip {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; cursor: pointer;
  padding: 2px 0; border: none; background: none; font-family: var(--font);
}
.bh-cat-chip-icon {
  width: 46px; height: 46px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 21px; transition: all .15s;
}
.bh-cat-chip.active .bh-cat-chip-icon { background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 10px rgba(31,174,142,0.3); transform: translateY(-1px); }
.bh-cat-chip-label { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-align: center; line-height: 1.25; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-cat-chip.active .bh-cat-chip-label { color: var(--accent-dark); font-weight: 700; }

/* ---- Filter drawer (district / price range / sort) ---- */
.bh-filter-drawer {
  display: none; background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px;
  margin: 10px 0 4px; gap: 10px; flex-wrap: wrap; align-items: flex-end; box-shadow: 0 2px 8px rgba(18,33,59,0.05);
}
.bh-filter-drawer.open { display: flex; }
.bh-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
.bh-filter-field label { font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.bh-filter-field input, .bh-filter-field select { padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 12.5px; font-family: var(--font); background: var(--panel); color: var(--text); }
.bh-filter-price-row { display: flex; gap: 6px; align-items: center; }
.bh-filter-price-row input { width: 76px; }
.bh-filter-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---- Results header ---- */
.bh-results-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 10px; }
.bh-results-count { font-size: 12px; color: var(--text-dim); }
.bh-results-count b { color: var(--text); }

/* ---- Ad card ---- */
.bh-ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 13px; }
.bh-ad-card {
  border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); cursor: pointer;
  transition: box-shadow .18s, transform .18s; position: relative; display: flex; flex-direction: column;
}
.bh-ad-card:hover { box-shadow: 0 8px 20px rgba(18,33,59,0.1); transform: translateY(-2px); }
.bh-ad-thumb-wrap { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--bg); overflow: hidden; }
.bh-ad-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-ad-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, var(--bg) 0%, var(--border) 100%); }
.bh-ad-featured-ribbon {
  position: absolute; top: 8px; left: -6px; background: linear-gradient(90deg, #E8A200, #c0392b);
  color: #fff; font-size: 9.5px; font-weight: 800; padding: 3px 10px 3px 12px; border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); letter-spacing: .3px;
}
.bh-ad-cat-badge {
  position: absolute; bottom: 6px; left: 6px; background: rgba(18,33,59,0.72); color: #fff; font-size: 10px;
  font-weight: 600; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(2px);
}
.bh-ad-info { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.bh-ad-title { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.bh-ad-loc { font-size: 10.5px; color: var(--text-dim); display: flex; align-items: center; gap: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-ad-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; }
.bh-ad-price { font-size: 14px; font-weight: 800; color: var(--accent-dark); }
.bh-ad-price span { font-size: 10.5px; font-weight: 600; color: var(--text-dim); }
.bh-ad-views { font-size: 9.5px; color: var(--text-dim); display: flex; align-items: center; gap: 2px; }

/* ---- Skeleton loading ---- */
.bh-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 13px; }
.bh-skel-card { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border); background: var(--panel); }
.bh-skel-thumb, .bh-skel-line { background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%); background-size: 200% 100%; animation: bh-shimmer 1.3s infinite; }
.bh-skel-thumb { width: 100%; aspect-ratio: 4/3; }
.bh-skel-line { height: 10px; border-radius: 5px; margin: 8px 10px; }
.bh-skel-line.w60 { width: 60%; }
@keyframes bh-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Empty state (branded, not the generic one) ---- */
.bh-empty { text-align: center; padding: 40px 16px; color: var(--text-dim); }
.bh-empty-icon { font-size: 44px; margin-bottom: 10px; opacity: .7; }
.bh-empty-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bh-empty-sub { font-size: 11.5px; }

/* ---- Ad detail page ---- */
.bh-detail-gallery-main { width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: var(--bg); position: relative; }
.bh-detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-detail-gallery-main .bh-ad-thumb-placeholder { border-radius: 14px; font-size: 54px; }
.bh-detail-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; }
.bh-detail-gallery-thumbs img { width: 58px; height: 58px; object-fit: cover; border-radius: 9px; border: 2px solid transparent; cursor: pointer; opacity: .65; flex-shrink: 0; transition: all .12s; }
.bh-detail-gallery-thumbs img.active { border-color: var(--accent); opacity: 1; }
.bh-detail-featured-tag { display: inline-flex; align-items: center; gap: 4px; background: #FFF4E0; color: #A9720D; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin: 12px 0 4px; }
.bh-detail-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 6px 0 4px; line-height: 1.35; }
.bh-detail-meta-row { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; }
.bh-detail-meta-row span { display: flex; align-items: center; gap: 4px; }
.bh-detail-price-box { background: var(--bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.bh-detail-price-box .bh-detail-price { font-size: 22px; font-weight: 800; color: var(--accent-dark); }
.bh-detail-price-box .bh-detail-price span { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.bh-detail-section-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin: 16px 0 6px; }
.bh-detail-desc { font-size: 13px; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.bh-contact-card {
  border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 16px; background: var(--panel);
}
.bh-contact-name { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bh-contact-actions { display: flex; gap: 8px; margin-top: 10px; }
.bh-contact-call-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px; padding: 11px; border-radius: 10px; text-decoration: none; border: none; cursor: pointer;
}
.bh-contact-call-btn:hover { background: var(--accent-dark); }
.bh-contact-copy-btn {
  width: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; font-size: 15px;
}
.bh-contact-copy-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.bh-contact-address { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; display: flex; gap: 5px; align-items: flex-start; }

/* ---- Section headers used inside the post-ad form ---- */
.bh-form-section-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--accent-dark); margin: 18px 0 10px; text-transform: none; }
.bh-form-section-title:first-child { margin-top: 2px; }
.bh-form-section-title .bh-sec-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(31,174,142,0.12); display: flex; align-items: center; justify-content: center; font-size: 12.5px; }
.bh-image-drop {
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;
  background: var(--bg); font-size: 12px; color: var(--text-dim); position: relative;
}
.bh-image-drop:hover { border-color: var(--accent); color: var(--accent-dark); }
.bh-image-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bh-image-drop .bh-drop-icon { font-size: 22px; display: block; margin-bottom: 4px; }
.bh-image-preview-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bh-image-preview-tile { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.bh-image-preview-tile img { width: 100%; height: 100%; object-fit: cover; }
.bh-image-preview-tile .bh-rm-img-btn {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(18,33,59,0.75);
  color: #fff; border: none; font-size: 11px; line-height: 1; cursor: pointer;
}

/* ---- My ads (poster's own listing cards) ---- */
.bh-myad-card { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--panel); display: flex; gap: 12px; }
.bh-myad-thumb { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--bg); flex-shrink: 0; }
.bh-myad-thumb-placeholder { width: 76px; height: 76px; border-radius: 10px; background: var(--bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.bh-myad-body { flex: 1; min-width: 0; }
.bh-myad-title { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 3px; }
.bh-myad-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.bh-status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.bh-status-active { background: #E6F7F1; color: var(--accent-dark); }
.bh-status-paused { background: #F1F2F4; color: var(--text-dim); }
.bh-status-rented { background: #E6EEFB; color: #2A5FBD; }
.bh-status-removed { background: #FDECEC; color: var(--danger); }
.bh-myad-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bh-myad-actions .small-btn { display: inline-flex; align-items: center; gap: 4px; }
.bh-boost-btn { background: linear-gradient(90deg, #E8A200, #c0392b); color: #fff !important; border: none !important; font-weight: 700; }
.bh-featured-tag-sm { font-size: 11px; color: #A9720D; font-weight: 800; display: flex; align-items: center; gap: 3px; }

/* ---- Notifications ---- */
.bh-notif-item { display: flex; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--border); margin-bottom: 8px; background: var(--panel); position: relative; }
.bh-notif-item.unread { background: rgba(31,174,142,0.05); border-color: rgba(31,174,142,0.3); }
.bh-notif-item.unread::before { content: ''; position: absolute; top: 14px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bh-notif-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.bh-notif-body { flex: 1; min-width: 0; }
.bh-notif-title { font-weight: 700; font-size: 12.5px; color: var(--text); }
.bh-notif-msg { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.bh-notif-time { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ---- Admin panel ---- */
.bh-admin-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; }
.bh-admin-nav .small-btn { flex-shrink: 0; border-radius: 999px; padding: 7px 14px; font-weight: 600; }
.bh-admin-nav .small-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.bh-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--panel); margin-bottom: 14px; }
.bh-toggle-label { display: flex; flex-direction: column; }
.bh-toggle-label b { font-size: 13px; color: var(--text); }
.bh-toggle-label span { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.bh-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.bh-switch input { opacity: 0; width: 0; height: 0; }
.bh-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 999px; transition: .2s; }
.bh-switch-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.bh-switch input:checked + .bh-switch-slider { background: var(--accent); }
.bh-switch input:checked + .bh-switch-slider::before { transform: translateX(18px); }
.bh-admin-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; background: var(--panel); margin-bottom: 14px; }
.bh-cat-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.bh-cat-icon-input { width: 52px !important; text-align: center; font-size: 16px; flex: none !important; }
.bh-admin-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bh-admin-cat-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.bh-admin-cat-card.inactive { opacity: .55; }
.bh-admin-cat-icon-row { display: flex; align-items: center; gap: 8px; }
.bh-admin-cat-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bh-admin-cat-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.25; flex: 1; }
.bh-admin-cat-kind-tag { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--bg); color: var(--text-dim); align-self: flex-start; }
.bh-admin-cat-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.bh-admin-cat-footer label { font-size: 10.5px; display: flex; align-items: center; gap: 4px; color: var(--text-dim); }
.bh-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bh-stat-card { padding: 16px 12px; border-radius: 14px; border: 1.5px solid var(--border); text-align: center; background: var(--panel); }
.bh-stat-icon { font-size: 22px; margin-bottom: 6px; }
.bh-stat-val { font-size: 22px; font-weight: 800; color: var(--text); }
.bh-stat-lbl { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.bh-boostreq-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--panel); }
.bh-boostreq-title { font-weight: 700; font-size: 13px; color: var(--text); }
.bh-boostreq-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.bh-boostreq-note { font-size: 12px; margin-top: 6px; background: var(--bg); padding: 6px 8px; border-radius: 8px; }
.bh-boostreq-actions { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 520px) {
  .bh-ad-grid, .bh-skel-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .bh-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- সাংসারিক হিসাব (Family Ledger) tool ---------- */
.fl-section-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1.5px solid var(--border); padding-bottom: 10px; }
.fl-section-tabs .fl-section-tab { flex: 1; padding: 9px 6px; font-weight: 700; }
.fl-summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; }
.fl-summary-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform .15s ease; }
.fl-summary-lbl { font-size: 10.5px; color: var(--text-dim); margin-bottom: 4px; }
.fl-summary-val { font-size: 14px; font-weight: 800; color: var(--text); }
.fl-summary-income { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fl-summary-income .fl-summary-val { color: var(--accent-dark, var(--accent)); }
.fl-summary-expense { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.fl-summary-expense .fl-summary-val { color: var(--danger); }
.fl-add-form { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.fl-add-form-row { display: flex; gap: 8px; }
.fl-add-form-row input, .fl-add-form input[type="text"] { flex: 1; padding: 9px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 13px; min-width: 0; }
.fl-month-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.fl-month-label { font-size: 13.5px; font-weight: 700; color: var(--text); min-width: 110px; text-align: center; }
.fl-txn-list { display: flex; flex-direction: column; gap: 8px; }
.fl-txn-row { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.fl-txn-row.fl-row-income { border-left-color: var(--accent-dark, var(--accent)); }
.fl-txn-row.fl-row-expense { border-left-color: var(--danger); }
.fl-txn-main { flex: 1; min-width: 0; }
.fl-txn-cat { font-size: 13px; font-weight: 700; color: var(--text); }
.fl-txn-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.fl-txn-amount { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.fl-txn-income { color: var(--accent-dark, var(--accent)); }
.fl-txn-expense { color: var(--danger); }
.fl-txn-actions { display: flex; gap: 4px; }
.fl-txn-edit-btn, .fl-txn-del-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 4px; border-radius: 6px; }
.fl-txn-edit-btn:hover, .fl-txn-del-btn:hover { background: var(--bg); }
.fl-members-list { display: flex; flex-direction: column; gap: 6px; }

/* ধার-দেনা (Loans) */
.fl-loan-summary-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 16px; }
.fl-loan-summary-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: center; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.fl-loan-summary-card.fl-loan-owe { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.fl-loan-summary-card.fl-loan-owed { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fl-loan-summary-lbl { font-size: 10.5px; color: var(--text-dim); margin-bottom: 4px; }
.fl-loan-summary-val { font-size: 15px; font-weight: 800; }
.fl-loan-owe .fl-loan-summary-val { color: var(--danger); }
.fl-loan-owed .fl-loan-summary-val { color: var(--accent-dark, var(--accent)); }
.fl-loan-list { display: flex; flex-direction: column; gap: 10px; }
.fl-loan-row { position: relative; overflow: hidden; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 12px 12px 16px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.fl-loan-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.fl-loan-row.fl-loan-borrowed::before { background: var(--danger); }
.fl-loan-row.fl-loan-lent::before { background: var(--accent-dark, var(--accent)); }
.fl-loan-row.fl-loan-returned { opacity: .65; }
.fl-loan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fl-loan-person-wrap { min-width: 0; }
.fl-loan-direction-lbl { font-size: 10.5px; color: var(--text-dim); font-weight: 600; }
.fl-loan-person { font-size: 13.5px; font-weight: 800; color: var(--text); }
.fl-loan-amount { font-size: 15px; font-weight: 800; white-space: nowrap; }
.fl-loan-row.fl-loan-borrowed .fl-loan-amount { color: var(--danger); }
.fl-loan-row.fl-loan-lent .fl-loan-amount { color: var(--accent-dark, var(--accent)); }
.fl-loan-meta { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.fl-loan-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-top: 6px; }
.fl-loan-badge.fl-badge-pending { background: #FFF3CD; color: #8a6300; }
.fl-loan-badge.fl-badge-overdue { background: #FDE2E1; color: #B3261E; }
.fl-loan-badge.fl-badge-returned { background: #E1F5EA; color: #1E7A46; }
.fl-loan-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ================================================================
   OCX Social - Facebook-app-style redesign
   Page bg stays the app's normal --bg grey; every card floats on top
   with a soft shadow (no more heavy 1.5px borders everywhere), and the
   header/nav become a proper sticky app bar instead of a plain h2 +
   row of generic small-btn buttons. Class names social.js already
   depends on (social-post-card, social-post-action-btn, etc.) are
   kept as-is - this only restyles them plus adds a few new wrapper
   classes (social-topbar/social-logo/social-nav*) used by the new
   markup in app.html.
   ================================================================ */
.social-view .admin-view,
.social-view.admin-view { background: var(--bg); }

/* ---- sticky top bar: logo + segmented Feed/Friends/Groups/Profile nav ---- */
.social-topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--panel); margin: -24px -28px 16px; padding: 14px 28px 12px;
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(18,33,59,0.04);
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.social-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.social-logo { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16.5px; font-weight: 700; color: var(--text); }
.social-logo b { font-weight: 800; }
.social-logo-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; flex: 0 0 auto; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 3px 8px rgba(31,174,142,0.35);
}
.social-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.social-nav::-webkit-scrollbar { display: none; }
.social-nav-btn {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: none; border-radius: 9px; padding: 9px 10px; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.social-nav-btn svg { flex: 0 0 auto; stroke: currentColor; }
.social-nav-btn span:not(.social-nav-badge) { overflow: hidden; text-overflow: ellipsis; }
.social-nav-btn:hover { background: var(--bg); color: var(--text); }
.social-nav-btn.active { color: var(--accent-dark); background: rgba(31,174,142,0.1); }
.social-nav-btn.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -13px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--accent);
}
.social-nav-badge { flex: 0 0 auto; }

/* ---- stories tray ---- */
.social-stories-bar { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 16px; scrollbar-width: none; }
.social-stories-bar::-webkit-scrollbar { display: none; }
.social-story-tile {
  flex-shrink: 0; width: 92px; height: 150px; border-radius: 14px; position: relative;
  background: var(--bg); cursor: pointer; overflow: hidden; box-shadow: 0 2px 8px rgba(18,33,59,0.08);
  transition: transform 0.15s;
}
.social-story-tile:active { transform: scale(0.97); }
.social-story-tile img, .social-story-tile video { width: 100%; height: 100%; object-fit: cover; }
.social-story-tile.has-unseen {
  padding: 3px; box-sizing: border-box;
  background: linear-gradient(160deg, #FFC24B, var(--accent) 55%, #4F6EF7);
}
.social-story-tile.has-unseen > img, .social-story-tile.has-unseen > video { border-radius: 11px; }
.social-story-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 7px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.7)); text-align: left; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.social-story-add { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: var(--panel); border: 1.5px solid var(--border); box-shadow: none; }
.social-story-add-icon {
  width: 36px; height: 36px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(31,174,142,0.4);
}

/* ---- composer ---- */
.social-composer {
  background: var(--panel); border: none; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(18,33,59,0.06);
}
.social-composer textarea {
  flex: 1; border: none; outline: none; resize: vertical; font-family: var(--font); font-size: 14px;
  background: var(--bg); color: var(--text); min-height: 42px; padding: 10px 14px; border-radius: 18px;
}
.social-composer textarea::placeholder { color: var(--text-dim); }
.social-composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.social-composer-actions label.small-btn { border-radius: 8px; font-weight: 600; }
.social-composer-actions select { border-radius: 8px !important; }
.social-composer-actions #socialPostSubmitBtn { border-radius: 20px; font-weight: 700; box-shadow: 0 2px 8px rgba(31,174,142,0.35); }
.social-composer-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.social-composer-preview .social-preview-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.social-composer-preview .social-preview-thumb img, .social-composer-preview .social-preview-thumb video { width: 100%; height: 100%; object-fit: cover; }
.social-composer-preview .social-preview-remove {
  position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,0.6); color: #fff; border: none;
  border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer;
}

/* ---- composer: feeling/activity, location, music tags ---- */
.social-composer-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.social-composer-tag {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 5px 8px 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text);
}
.social-composer-tag button {
  background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-dim); padding: 2px; line-height: 1;
}
.social-composer-tag button:hover { color: var(--text); }
.social-composer-actions { position: relative; }
.social-tag-popover {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 12px; display: none; width: 280px; max-width: calc(100vw - 40px);
}
.social-tag-popover.show { display: block; }
.social-tag-popover-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.social-tag-popover input[type=text] {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px;
  font-family: var(--font); background: var(--bg); color: var(--text); box-sizing: border-box;
}
.social-tag-popover-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
.social-feeling-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-height: 220px; overflow-y: auto; }
.social-feeling-option {
  display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none;
  border-radius: 8px; padding: 8px 4px; cursor: pointer; font-size: 11px; color: var(--text); text-align: center;
}
.social-feeling-option:hover { background: var(--bg); }
.social-feeling-option .emoji { font-size: 20px; }

/* ---- post card: feeling/location/music line ---- */
.social-post-tagline { font-size: 12.5px; color: var(--text); margin-top: 1px; }

/* ---- post card ---- */
.social-post-card {
  background: var(--panel); border: none; border-radius: 14px; padding: 16px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(18,33,59,0.06);
}
.social-post-header { display: flex; align-items: center; gap: 10px; }
.social-post-author { font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
.social-post-author:hover { text-decoration: underline; }
.social-post-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.social-post-header .small-btn {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.social-post-header .small-btn:hover { background: var(--bg); }
.social-post-content { font-size: 14px; color: var(--text); white-space: pre-wrap; margin: 10px 0; line-height: 1.6; word-break: break-word; }
.social-post-media-grid { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; margin: 0 -16px 8px; }
.social-post-media-grid.count-1 { grid-template-columns: 1fr; }
.social-post-media-grid.count-2 { grid-template-columns: 1fr 1fr; }
.social-post-media-grid.count-3, .social-post-media-grid.count-4-plus { grid-template-columns: 1fr 1fr; }
.social-post-media-item { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 130px; max-height: 360px; overflow: hidden; position: relative; }
.social-post-media-item img, .social-post-media-item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.social-post-media-item:hover img { transform: scale(1.03); }
.social-post-media-item img { cursor: pointer; }
.social-post-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 8px 0; }
.social-reaction-summary, .social-comment-summary { display: flex; align-items: center; gap: 4px; }
.social-reaction-icons { display: inline-flex; font-size: 13px; letter-spacing: -3px; margin-right: 5px; }
.social-post-actions-row { display: flex; gap: 2px; padding-top: 4px; border-top: 1px solid var(--border); }
/* Like/Comment buttons pair the icon with a live count, Facebook-style,
   inside one flex-1 slot so the row still divides evenly with the plain
   icon-only Share/Download/Report buttons next to them. */
.social-action-btn-group { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.social-action-btn-group .social-post-action-btn { flex: 0 0 auto; padding: 9px 4px 9px 8px; }
.social-action-count { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.social-action-count:not(:empty) { cursor: pointer; }
.social-action-count:not(:empty):hover { color: var(--text); text-decoration: underline; }
.social-post-action-btn {
  flex: 1; background: transparent; border: none; padding: 9px 8px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text-dim); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, color 0.15s; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.social-post-action-btn:hover { background: var(--bg); color: var(--text); }
.social-post-action-btn svg { flex: 0 0 auto; }
.social-post-action-btn.active { color: var(--accent-dark); }
.social-post-action-btn.active svg { fill: currentColor; }
.social-post-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.social-comment-item { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
/* Wraps bubble + attachment + meta row so they all share the width freed
   up by moving Edit/Delete off into the compact "..." menu below, instead
   of two full-size buttons sitting beside the bubble eating horizontal
   space (that's what was cramming the bubble into a sliver on mobile). */
.social-comment-body { min-width: 0; flex: 1 1 auto; }
.social-comment-bubble { background: var(--bg); border-radius: 14px; padding: 8px 12px; font-size: 12.5px; max-width: 100%; word-break: break-word; }
.social-comment-author { font-weight: 700; color: var(--text); font-size: 12px; }
.social-comment-attachment { margin-top: 4px; }
.social-comment-media { max-width: 180px; max-height: 180px; border-radius: 10px; display: block; object-fit: cover; }
.social-comment-gift { font-size: 40px; line-height: 1; padding: 4px 0; }
.social-comment-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
/* ---- comment meta row: Like / time / like-count / "..." menu ---- */
.social-comment-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; padding-left: 4px; font-size: 11.5px; color: var(--text-dim); }
.social-comment-like-btn { background: none; border: none; padding: 0; display: inline-flex; align-items: center; line-height: 0; color: var(--text-dim); cursor: pointer; }
.social-comment-like-btn:hover { color: var(--text); }
.social-comment-like-btn.active { color: var(--accent-dark); }
.social-comment-dislike-btn { background: none; border: none; padding: 0; display: inline-flex; align-items: center; line-height: 0; color: var(--text-dim); cursor: pointer; }
.social-comment-dislike-btn:hover { color: var(--text); }
.social-comment-dislike-btn.active { color: var(--danger); }
.social-comment-dislike-btn svg { transform: scaleY(-1); }
.social-comment-reply-btn { background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 700; color: var(--text-dim); cursor: pointer; font-family: var(--font); }
.social-comment-reply-btn:hover { text-decoration: underline; color: var(--text); }
.social-comment-meta-dot { opacity: 0.6; }
/* ---- Reply thread: replies render nested/indented under their top-level
   comment, in a smaller-avatar variant (see is-reply) - the inline reply
   composer (toggleSocialReplyComposer in js/social.js) lands in this same
   box, right above the "Reply" input row's own Send button. ---- */
.social-comment-replies { margin-left: 34px; margin-top: 2px; }
.social-comment-replies:empty { margin-top: 0; }
.social-comment-item.is-reply { margin-bottom: 8px; }
.social-comment-item.is-reply .social-comment-bubble { padding: 6px 10px; font-size: 12px; }
.social-comment-reply-composer { margin-top: 4px; margin-bottom: 8px; }
.social-comment-reaction-counts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.social-comment-count-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; background: var(--bg); border-radius: 10px; padding: 1px 6px; }
/* Compact overflow menu that replaces the old full-size ✏️/🗑️ buttons -
   a single small tap target that reveals Edit/Delete inline instead of
   permanently reserving a big chunk of the row's width. */
.social-comment-more-btn {
  background: none; border: none; padding: 2px 6px; font-size: 15px; line-height: 1; color: var(--text-dim);
  cursor: pointer; border-radius: 6px; flex: 0 0 auto; margin-left: 2px;
}
.social-comment-more-btn:hover { background: var(--bg); color: var(--text); }
.social-comment-edit-actions { display: flex; gap: 12px; margin-top: 4px; padding-left: 4px; }
.social-comment-meta-link { background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 700; color: var(--text-dim); cursor: pointer; font-family: var(--font); }
.social-comment-meta-link:hover { text-decoration: underline; color: var(--text); }
.social-comment-meta-link.danger { color: var(--danger); }
/* ---- Facebook-style quick sticker row above the comment composer - tap
   one to send it as a comment immediately (see populateSocialCommentQuickRow /
   sendSocialQuickCommentSticker in js/social.js). ---- */
.social-comment-quick-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.social-comment-quick-row::-webkit-scrollbar { display: none; }
.social-comment-quick-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--bg); font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.1s, border-color 0.1s;
}
.social-comment-quick-btn:hover { border-color: var(--accent); transform: scale(1.08); }
.social-comment-quick-btn:active { transform: scale(0.94); }
.social-comment-input-row input {
  flex: 1; border: none; background: var(--bg); border-radius: 20px; padding: 9px 15px; font-size: 12.5px; font-family: var(--font);
}
.social-comment-input-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.social-comment-input-row .small-btn { border-radius: 20px; font-weight: 700; }

/* ---- Facebook-style long-press reaction picker (floating bar) ---- */
.social-reaction-picker {
  position: fixed; z-index: 4000; display: flex; gap: 2px; background: #fff; border-radius: 28px;
  padding: 6px 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.22); opacity: 0; transform: translateY(6px) scale(0.9);
  transition: opacity 0.12s, transform 0.12s;
}
.social-reaction-picker.show { opacity: 1; transform: translateY(0) scale(1); }
.social-reaction-picker-btn {
  background: transparent; border: none; font-size: 26px; line-height: 1; padding: 4px 6px; cursor: pointer;
  border-radius: 50%; transition: transform 0.12s;
}
.social-reaction-picker-btn:hover { transform: scale(1.35) translateY(-4px); }

/* ---- Reactions popup (who reacted) ---- */
.social-reaction-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 13px; }
.social-reaction-user-emoji {
  position: absolute; right: -3px; bottom: -3px; font-size: 14px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff; line-height: 1;
}

/* ---- Comments popup ---- */
.social-comments-modal { max-width: 520px; width: 94%; max-height: 90vh; display: flex; flex-direction: column; }
.social-comments-modal-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 10px; }
/* Composer wraps into two lines (input on its own row, toolbar below) once
   the row runs out of width - see the max-width:480px override - instead of
   squeezing the input+5 buttons into one row where the input could shrink
   to nothing on a phone screen. */
.social-comment-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.social-comment-composer-row input {
  flex: 1 1 140px; min-width: 0; border: none; background: var(--bg); border-radius: 20px; padding: 9px 15px; font-size: 12.5px; font-family: var(--font);
}
.social-comment-composer-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.social-comment-composer-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.social-comment-composer-tools .btn-primary { width: auto; padding: 8px 16px; margin-left: 4px; flex: 0 0 auto; }
.social-comment-tool-btn {
  background: transparent; border: none; font-size: 16px; font-weight: 700; cursor: pointer; padding: 7px;
  border-radius: 8px; color: var(--text-dim); flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; min-width: 34px; min-height: 34px; box-sizing: border-box;
}
.social-comment-tool-btn:hover { background: var(--bg); color: var(--text); }
@media (max-width: 480px) {
  .social-comment-composer-row input { flex-basis: 100%; order: 1; }
  .social-comment-composer-tools { order: 2; width: 100%; justify-content: space-between; margin-left: 0; }
  .social-comment-composer-tools .btn-primary { margin-left: 0; }
}
.social-comment-pending-preview {
  display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; position: relative; width: fit-content;
}
.social-comment-pending-preview img { max-height: 60px; max-width: 100px; border-radius: 8px; object-fit: cover; }
.social-comment-pending-remove {
  background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; line-height: 1;
  cursor: pointer; font-size: 13px; flex: 0 0 auto;
}
.social-emoji-picker, .social-gift-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 140px; overflow-y: auto;
  background: var(--bg); border-radius: 10px; padding: 8px; margin-bottom: 8px;
}
.social-emoji-btn, .social-gift-btn {
  background: transparent; border: none; font-size: 20px; padding: 5px; border-radius: 8px; cursor: pointer; line-height: 1;
}
.social-emoji-btn:hover, .social-gift-btn:hover { background: #fff; }

/* ---- notification bell ---- */
.social-bell-btn {
  position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s;
}
.social-bell-btn:hover { background: rgba(31,174,142,0.12); color: var(--accent-dark); }
.social-bell-badge { position: absolute; top: -2px; right: -2px; }
.social-notif-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--border);
  cursor: pointer; border-radius: 8px;
}
.social-notif-item:last-child { border-bottom: none; }
.social-notif-item:hover { background: var(--bg); }
.social-notif-item.unread { background: rgba(31,174,142,0.07); }
.social-notif-text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.social-notif-text b { font-weight: 700; }
/* "Viewing a saved offline copy" banner - see showSocialOfflineNote() in
   public/js/social.js. Same look as .quran-offline-note, kept as its own
   class so this feature's CSS doesn't read as borrowed from Quran tooling. */
.social-offline-note {
  font-size: 12px; color: #566072; text-align: center; background: var(--panel);
  border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; line-height: 1.5;
}
.social-notif-time { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.social-notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }

/* ---- composer: tag friends ---- */
.social-tag-friends-list { max-height: 240px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.social-tag-friend-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--text);
}
.social-tag-friend-row:hover { background: var(--bg); }
.social-tag-friend-row input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }
.social-tag-friend-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-tag-friends-empty { font-size: 12px; color: var(--text-dim); padding: 10px 4px; text-align: center; }

/* ---- post card: "with X and N others" tagged-friends line ---- */
.social-post-tagged-line { font-weight: 400; color: var(--text-dim); font-size: 13px; }
.social-post-tagged-line b { font-weight: 700; color: var(--text); cursor: pointer; }
.social-post-tagged-line b:hover { text-decoration: underline; }

/* ---- shared post embed (Facebook-style "quoted" card inside a share) ---- */
.social-shared-embed {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; margin: 4px 0 10px; background: var(--bg);
}
.social-shared-embed-header { display: flex; align-items: center; gap: 8px; }
.social-shared-embed-author { font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.social-shared-embed-author:hover { text-decoration: underline; }
.social-shared-embed-time { font-size: 11px; color: var(--text-dim); }
.social-shared-embed-content { font-size: 13px; color: var(--text); margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
.social-shared-embed-media { margin-top: 8px; border-radius: 8px; overflow: hidden; max-height: 260px; }
.social-shared-embed-media img, .social-shared-embed-media video { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.social-shared-embed-unavailable { font-size: 12.5px; color: var(--text-dim); font-style: italic; padding: 4px 0; }

/* ---- share modal preview ---- */
.social-share-preview { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; max-height: 280px; overflow-y: auto; background: var(--bg); }

/* ---- share modal - Facebook-style layout: who/where row, emoji+tag+submit
   toolbar, quick-share avatar strip, and a grid of share-elsewhere icons.
   See the "OCX Social: Share modal" block in app.html and the
   socialShare*() functions in social.js. ---- */
.social-share-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.social-share-header-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.social-share-header-pickers { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.social-share-pill {
  display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--text);
}
select.social-share-pill { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: var(--font); }

.social-share-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); position: relative; }
.social-share-icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
  font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.social-share-icon-btn:hover { border-color: var(--accent); }
.social-share-icon-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,174,142,0.15); }
.social-share-emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 180px; overflow-y: auto; }
.social-share-emoji-grid button { background: none; border: none; font-size: 19px; padding: 5px; border-radius: 8px; cursor: pointer; }
.social-share-emoji-grid button:hover { background: var(--bg); }

.social-share-divider { border-top: 1px solid var(--border); margin: 14px 0 10px; }
.social-share-section-label { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }

.social-share-quicklist { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; }
.social-share-quick-item { flex-shrink: 0; width: 56px; text-align: center; background: none; border: none; cursor: pointer; padding: 0; }
.social-share-quick-item .name { display: block; font-size: 10.5px; color: var(--text); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-share-quicklist-empty { font-size: 12px; color: var(--text-dim); padding: 4px 0 10px; }

.social-share-appgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 4px; }
.social-share-app-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 10.5px; color: var(--text); padding: 4px 2px; }
.social-share-app-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; }

.social-share-picker-list { max-height: 220px; overflow-y: auto; margin-top: 8px; }
.social-share-picker-back { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 0 8px; }

/* ---- media viewer (photo/video + full comment thread) ---- */
.social-media-viewer-overlay { padding: 0; background: #000; }
.social-media-viewer-modal {
  max-width: none; width: 100vw; height: 100vh; max-height: 100vh; margin: 0;
  border-radius: 0; background: #000; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
}
.social-media-viewer-modal .close-x {
  position: absolute; top: 10px; right: 10px; z-index: 6; float: none;
  color: #fff; background: rgba(0,0,0,0.4); width: 34px; height: 34px; border-radius: 50%;
}
.social-media-viewer-modal .close-x:hover { background: rgba(0,0,0,0.65); color: #fff; }
.social-media-viewer-header {
  position: absolute; top: 0; left: 0; right: 54px; z-index: 4; padding: 12px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.social-media-viewer-header .social-post-author, .social-media-viewer-header .social-post-meta { color: #fff; }
/* The stage fills the whole screen - this is what makes the photo/video
   show up big like Facebook's fullscreen photo viewer, instead of the old
   fixed 46vh box. touch-action:none hands panning/pinch fully to
   wireSocialViewerZoom() below rather than letting the browser scroll/zoom
   the page underneath it. */
.social-media-viewer-stage {
  position: relative; flex: 1 1 auto; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none;
}
.social-media-viewer-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.social-media-viewer-media img, .social-media-viewer-media video {
  max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; cursor: zoom-in;
}
.social-media-viewer-media img.zoomed { cursor: grab; }
.social-media-viewer-media img.zoomed:active { cursor: grabbing; }
.social-media-viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.4);
  color: #fff; border: none; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.social-media-viewer-nav.prev { left: 12px; }
.social-media-viewer-nav.next { right: 12px; }
.social-media-viewer-nav:hover { background: rgba(0,0,0,0.7); }
/* Comments live in a bottom sheet now (tap 💬 to slide it up) rather than
   permanently eating vertical space under the photo - see
   toggleSocialViewerCommentsSheet() in js/social.js. */
.social-media-viewer-comments-toggle {
  position: absolute; right: 14px; bottom: 18px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none;
  color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.social-media-viewer-comments-toggle:hover { background: rgba(0,0,0,0.75); }
.social-media-viewer-comments-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 62vh;
  background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
  transform: translateY(100%); transition: transform 0.22s ease-out; z-index: 6;
  display: flex; flex-direction: column;
}
.social-media-viewer-comments-sheet.show { transform: translateY(0); }
.social-media-viewer-comments-handle { width: 36px; height: 4px; background: var(--border); border-radius: 3px; margin: 8px auto 2px; flex: 0 0 auto; cursor: pointer; }
.social-media-viewer-comments { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; }

/* ---- profile ---- */
.social-profile-header { background: var(--panel); border: none; border-radius: 14px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(18,33,59,0.06); }
.social-profile-cover { height: 140px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); background-size: cover; background-position: center; }
.social-profile-body { padding: 14px 16px; display: flex; gap: 14px; align-items: flex-end; margin-top: -36px; }
.social-profile-name { font-size: 16px; font-weight: 800; color: var(--text); }
/* Facebook-style "Verified" checkmark, injected inline right after a name
   wherever OCX Social renders one (post/comment author, profile header,
   people list, friend/follower rows, notifications, live host - see
   verifiedBadgeHTML() in social.js). blue = individual identity confirmed
   genuine, gray = a confirmed business/organization/brand, same split as
   Facebook's own two badge colors. */
.social-verified-badge { display: inline-flex; vertical-align: middle; margin-left: 3px; line-height: 0; }
.social-verified-badge svg { width: 1em; height: 1em; }
.social-verified-badge.blue { color: #1877f2; }
.social-verified-badge.gray { color: #8a8d91; }
.social-profile-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.social-about-box { padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.social-about-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }

/* ---- friend suggestions ("People You May Know") ---- */
.social-suggestions-bar { background: var(--panel); border-radius: 14px; padding: 10px 0 12px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(18,33,59,0.06); }
.social-suggestions-bar-title { font-size: 13px; font-weight: 800; color: var(--text); padding: 0 14px 8px; }
.social-suggestions-track { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 2px; scrollbar-width: none; }
.social-suggestions-track::-webkit-scrollbar { display: none; }
.social-suggestion-card {
  flex-shrink: 0; width: 128px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 8px 10px; text-align: center; position: relative;
}
.social-suggestion-remove {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.08); color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer;
}
.social-suggestion-remove:hover { background: rgba(0,0,0,0.16); }
.social-suggestion-name { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 8px; cursor: pointer; }
.social-suggestion-sub { font-size: 10.5px; color: var(--text-dim); margin: 2px 0 8px; }
.social-suggestion-add { width: 100%; padding: 6px 4px; font-size: 11.5px; }
#socialSuggestionsBox .social-suggestions-track { padding: 0 0 2px; }
.social-profile-stats { display: flex; gap: 18px; padding: 0 16px 14px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.social-profile-stats b { color: var(--text); }

/* Facebook-style "All / Reels / Photos / More" tab row under the profile
   header - see socialProfileTabsBox in renderSocialProfileHeader() and
   switchSocialProfileTab() in js/social.js. */
.social-profile-tabs { display: flex; gap: 6px; padding: 4px 16px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.social-profile-tab { border: none; background: transparent; color: var(--text-dim); font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 18px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.social-profile-tab:hover { background: var(--bg); }
.social-profile-tab.active { background: var(--accent-soft, rgba(79,110,247,0.12)); color: var(--accent, #4f6ef7); }
.social-profile-tab-count { font-size: 11px; font-weight: 700; color: inherit; opacity: .75; }

/* Facebook-style "Photos"/"Reels" thumbnail grid rendered inline in place of
   the timeline when one of those tabs is active - see
   loadSocialProfileMediaGrid() in js/social.js. */
.social-profile-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.social-profile-media-grid-item { aspect-ratio: 1 / 1; min-height: 0; max-height: none; cursor: pointer; }
.social-profile-media-grid-item video { pointer-events: none; }
.social-profile-media-grid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.social-profile-stat-link { cursor: pointer; }
.social-profile-stat-link:hover { text-decoration: underline; color: var(--text); }
.social-profile-actions { padding: 0 16px 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- settings & privacy (Facebook-style Profile Lock / Blocking) ---- */
.social-settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 4px 0; }
.social-settings-row-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.social-settings-row-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
.ocx-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.ocx-switch input { opacity: 0; width: 0; height: 0; }
.ocx-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 24px; transition: 0.15s; }
.ocx-switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.ocx-switch input:checked + .ocx-switch-slider { background: var(--accent); }
.ocx-switch input:checked + .ocx-switch-slider::before { transform: translateX(18px); }

.social-people-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.social-people-row:hover { background: var(--panel); box-shadow: 0 1px 6px rgba(18,33,59,0.06); }
.social-people-name { font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; }
.social-people-sub { font-size: 11px; color: var(--text-dim); }
.social-people-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }

/* ---- story viewer (full-screen, unchanged behaviour) ---- */
.social-story-viewer {
  position: fixed; inset: 0; background: #000; z-index: 500; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.social-story-viewer-media { width: 100%; max-width: 420px; height: 100%; max-height: 100vh; display: flex; align-items: center; justify-content: center; }
.social-story-viewer-media img, .social-story-viewer-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.social-story-viewer-header { position: absolute; top: 22px; left: 16px; right: 56px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; z-index: 2; }
.social-story-viewer-progress { position: absolute; top: 8px; left: 16px; right: 16px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden; }
.social-story-viewer-progress::after { content: ''; display: block; height: 100%; background: #fff; width: var(--social-story-progress, 0%); transition: width 0.1s linear; }
.social-story-viewer-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; z-index: 2; }
.social-story-viewer-nav { position: absolute; inset: 0; display: flex; z-index: 1; }
.social-story-viewer-nav > div { flex: 1; cursor: pointer; }

/* Facebook-style story view-count bar + "Seen by" viewer list, own stories only */
.social-story-views-bar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.45); color: #fff; border: none; border-radius: 20px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.social-story-views-bar:hover { background: rgba(0,0,0,0.65); }
.social-story-views-bar svg { width: 15px; height: 15px; flex-shrink: 0; }
.social-story-viewers-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  max-height: 60%; background: #1c1c1e; border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  animation: socialStoryViewersPanelUp 0.18s ease-out;
}
@keyframes socialStoryViewersPanelUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.social-story-viewers-panel-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 3px; margin: 10px auto 4px; }
.social-story-viewers-panel-title { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; color: #fff; font-size: 14px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); }
.social-story-viewers-panel-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.7; }
.social-story-viewers-panel-close:hover { opacity: 1; }
.social-story-viewers-panel-list { overflow-y: auto; padding: 6px 8px 14px; }
.social-story-viewer-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.social-story-viewer-row:hover { background: rgba(255,255,255,0.06); }
.social-story-viewer-row-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.social-story-viewer-row-time { color: rgba(255,255,255,0.55); font-size: 11px; margin-left: auto; }
.social-story-viewers-panel-empty { color: rgba(255,255,255,0.55); font-size: 12.5px; text-align: center; padding: 24px 12px; }

/* ---- new-story modal: "Add music" (Facebook-style story/reel music
   sticker) - see the "OCX Social: add story modal" block in app.html and
   the socialStoryMusic*() functions + js/storyMusic.js. ---- */
.social-story-music-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.social-story-music-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.social-story-music-item { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-radius: 8px; }
.social-story-music-item:hover { background: var(--bg); }
.social-story-music-item .label { flex: 1; font-size: 13px; color: var(--text); }
.social-story-music-item .preview-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; font-size: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.social-story-music-item .preview-btn.playing { border-color: var(--accent); color: var(--accent); }
.social-story-music-item .use-btn { flex-shrink: 0; }

/* ---- story viewer: small music badge while a track is attached/playing,
   Facebook-style pill in the corner of the story. ---- */
.social-story-viewer-music-badge {
  position: absolute; top: 68px; right: 16px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: 20px; z-index: 2; max-width: calc(100% - 32px);
}
.social-story-viewer-music-badge .note { animation: socialStoryMusicNoteBounce 1s ease-in-out infinite; }
@keyframes socialStoryMusicNoteBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }


/* ---- OCX Social Live ("Go Live" bar + full-screen broadcaster/viewer) ---- */
.social-live-bar { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 16px; scrollbar-width: none; }
.social-live-bar::-webkit-scrollbar { display: none; }
.social-live-tile {
  flex-shrink: 0; width: 92px; height: 150px; border-radius: 14px; position: relative;
  cursor: pointer; overflow: hidden; box-shadow: 0 2px 8px rgba(18,33,59,0.08);
  background: linear-gradient(160deg, #ff5a7a, #e0245e 60%, #b3184a);
  padding: 3px; box-sizing: border-box; transition: transform 0.15s;
}
.social-live-tile:active { transform: scale(0.97); }
.social-live-tile-inner { width: 100%; height: 100%; border-radius: 11px; overflow: hidden; position: relative; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.social-live-tile-badge {
  position: absolute; top: 6px; left: 6px; background: #e0245e; color: #fff; font-size: 9.5px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.3px; z-index: 2;
}
.social-live-tile-viewers {
  position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); color: #fff; font-size: 9.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 10px; z-index: 2;
}
.social-live-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 7px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); text-align: left; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.social-live-viewer {
  position: fixed; inset: 0; background: #000; z-index: 500; display: flex; flex-direction: column;
}
.social-live-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.social-live-header {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 16px 14px;
  background: linear-gradient(rgba(0,0,0,0.6), transparent); color: #fff;
}
.social-live-header #socialLiveHeaderInfo { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-live-badge { background: #e0245e; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: 0.3px; flex-shrink: 0; }
.social-live-viewer-count { background: rgba(0,0,0,0.5); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; flex-shrink: 0; }
.social-live-close-btn { background: rgba(0,0,0,0.5); border: none; color: #fff; font-size: 20px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex-shrink: 0; line-height: 1; }

.social-live-reactions {
  position: absolute; right: 10px; bottom: 90px; width: 60px; height: 60%; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.social-live-reaction-emoji {
  position: absolute; bottom: 0; font-size: 26px; animation: socialLiveFloatUp 2.6s ease-in forwards;
}
@keyframes socialLiveFloatUp {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; transform: translate(0, -10px) scale(1); }
  100% { transform: translate(var(--drift, 12px), -280px) scale(1); opacity: 0; }
}

.social-live-footer { margin-top: auto; position: relative; z-index: 2; padding: 8px 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.65) 40%); }
.social-live-comments { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; scrollbar-width: none; }
.social-live-comments::-webkit-scrollbar { display: none; }
.social-live-comment-item { font-size: 12.5px; color: #fff; background: rgba(0,0,0,0.38); border-radius: 14px; padding: 6px 12px; align-self: flex-start; max-width: 90%; word-break: break-word; }
.social-live-comment-item b { font-weight: 700; margin-right: 4px; }
.social-live-input-row { display: flex; align-items: center; gap: 8px; }
.social-live-input-row input {
  flex: 1; border: none; outline: none; background: rgba(255,255,255,0.16); color: #fff; border-radius: 20px;
  padding: 10px 15px; font-size: 12.5px; font-family: var(--font);
}
.social-live-input-row input::placeholder { color: rgba(255,255,255,0.7); }
.social-live-react-btn { background: rgba(255,255,255,0.16); border: none; border-radius: 50%; width: 38px; height: 38px; font-size: 17px; cursor: pointer; flex-shrink: 0; }
.social-live-end-btn { background: #e0245e; color: #fff; border: none; border-radius: 20px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; white-space: nowrap; }

/* ---- mobile: edge-to-edge, app-like feel ---- */
@media (max-width: 760px) {
  .social-view.admin-view { padding: 14px 10px 90px; }
  /* padding-left clears the fixed hamburger/back button (top-left);
     padding-right does the same for the fixed X "back-to-chats" button
     (top-right, see .back-to-chats-btn.show) - without it, the bell
     button below used to render partly underneath that X. */
  .social-topbar { margin: -14px -10px 14px; padding: 12px 14px 10px; padding-left: 54px; padding-right: 54px; }
  /* Bell button moves out of flow so the logo can center across the
     full row width instead of sitting flush left next to it. */
  .social-topbar-row { position: relative; justify-content: center; }
  .social-topbar-row .social-logo { justify-content: center; text-align: center; }
  .social-topbar-row .social-bell-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .social-logo { font-size: 15px; }
  .social-nav-btn span:not(.social-nav-badge) { display: none; }
  .social-nav-btn { flex: 0 0 auto; padding: 10px 14px; }
  .social-story-tile { width: 84px; height: 138px; }
  .social-post-card { border-radius: 12px; padding: 13px; }
  .social-post-media-grid { margin: 0 -13px 8px; }
}


/* ---------- OCX Social: admin moderation ---------- */
.social-admin-stat-pill {
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 16px; min-width: 110px; text-align: center;
}
.social-admin-stat-pill b { display: block; font-size: 19px; color: var(--accent-dark); }
.social-admin-stat-pill span { font-size: 11px; color: var(--text-dim); }
.social-admin-report-card { background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.social-admin-report-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.social-admin-report-content { font-size: 12.5px; color: var(--text); background: var(--bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; }
.social-admin-report-reason { font-size: 11.5px; color: var(--text-dim); font-style: italic; margin-bottom: 8px; }

/* ======================================================================
   জব বোর্ড (Jobs → চাকরির বিজ্ঞপ্তি) — bdjobs-grade browse & detail UI.
   Namespaced under .jb- so it never touches .jobs-card/.jobs-status-pill
   etc., which the Proyojon marketplace also relies on (see notes above).
   ====================================================================== */
:root {
  --jb-navy: #0F2A4A;
  --jb-navy-2: #163A63;
  --jb-gold: #E8A93B;
  --jb-soft: #EEF3FB;
}

/* --- Toolbar: search + filters + live result count -------------------- */
.jb-toolbar {
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px; margin-bottom: 12px;
}
.jb-toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; }
.jb-search-wrap { position: relative; flex: 1 1 220px; min-width: 200px; }
.jb-search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); pointer-events: none;
}
.jb-search-wrap input {
  width: 100%; box-sizing: border-box; padding: 10px 12px 10px 34px;
  border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; font-family: var(--font);
}
.jb-search-wrap input:focus { border-color: var(--jb-navy-2); outline: none; }
.jb-select {
  padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border);
  font-size: 12.5px; font-family: var(--font); background: var(--panel); color: var(--text);
  flex: 0 1 auto;
}
.jb-chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.jb-chip {
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius: 20px; padding: 5px 13px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: none;
}
.jb-chip.active { background: var(--jb-navy); border-color: var(--jb-navy); color: #fff; }
.jb-result-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--text-dim); margin: 2px 2px 10px;
}
.jb-result-bar b { color: var(--text); }

/* --- Job cards ---------------------------------------------------------- */
.jb-list { display: flex; flex-direction: column; gap: 10px; }
.jb-card {
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 14px; display: flex; gap: 12px; cursor: pointer; position: relative;
  border-left: 3px solid transparent;
}
.jb-card:hover { border-color: var(--jb-navy-2); border-left-color: var(--jb-navy-2); }
.jb-card:active { background: var(--jb-soft); }
.jb-logo {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px; letter-spacing: 0.3px;
}
.jb-card-main { flex: 1; min-width: 0; }
.jb-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.jb-title { font-size: 15px; font-weight: 700; color: var(--jb-navy); margin-bottom: 2px; line-height: 1.35; }
.jb-card:hover .jb-title { text-decoration: underline; }
.jb-company-line { font-size: 12.5px; color: var(--text); font-weight: 600; margin-bottom: 7px; }
.jb-company-line span { color: var(--text-dim); font-weight: 500; }
.jb-type-pill {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  background: var(--jb-soft); color: var(--jb-navy-2); white-space: nowrap;
}
.jb-meta-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.jb-meta-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-dim); }
.jb-meta-item svg { flex-shrink: 0; opacity: 0.75; }
.jb-meta-item.jb-salary { color: var(--accent-dark); font-weight: 700; }
.jb-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.jb-deadline { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: #F1F2F4; color: var(--text-dim); }
.jb-deadline.jb-soon { background: #FFF4E0; color: #A9720D; }
.jb-deadline.jb-urgent { background: #FDECEC; color: var(--danger); }
.jb-card-actions { display: flex; gap: 8px; }
.jb-btn-apply {
  border: none; background: var(--jb-navy); color: #fff; font-weight: 700; font-size: 12.5px;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: var(--font);
}
.jb-btn-apply:hover { background: var(--jb-navy-2); }
.jb-applied-pill {
  font-size: 11.5px; font-weight: 700; color: var(--accent-dark); background: #E6F7F1;
  padding: 7px 12px; border-radius: 8px;
}
.jb-empty { text-align: center; padding: 46px 16px; color: var(--text-dim); }
.jb-empty svg { opacity: 0.35; margin-bottom: 10px; }
.jb-empty div:first-of-type { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.jb-empty div.jb-empty-sub { font-size: 12px; }

/* --- Detail modal -------------------------------------------------------- */
.modal.modal-wide { max-width: 620px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 88vh; }
.jb-detail-scroll { overflow-y: auto; padding: 22px; }
.jb-detail-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.jb-detail-head .jb-logo { flex: 0 0 54px; width: 54px; height: 54px; font-size: 20px; border-radius: 12px; }
.jb-detail-title { font-size: 18px; font-weight: 800; color: var(--jb-navy); line-height: 1.3; margin-bottom: 4px; }
.jb-detail-company { font-size: 13px; color: var(--text); font-weight: 600; }
.jb-detail-company span { color: var(--text-dim); font-weight: 500; }
.jb-detail-meta-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin: 16px 0;
  background: var(--bg); border-radius: 10px; padding: 12px 14px;
}
.jb-detail-meta-cell { font-size: 12px; }
.jb-detail-meta-cell b { display: block; font-size: 12.5px; color: var(--text); margin-top: 1px; }
.jb-detail-meta-cell span { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; }
.jb-detail-section { margin-bottom: 16px; }
.jb-detail-section h4 { font-size: 12.5px; color: var(--jb-navy); margin: 0 0 8px; font-weight: 700; }
.jb-detail-section p { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; margin: 0; word-break: break-word; }
.jb-detail-footer {
  border-top: 1.5px solid var(--border); padding: 14px 22px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); flex-shrink: 0;
}
.jb-detail-footer .jb-company-website { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-detail-footer .jb-company-website a { color: var(--jb-navy-2); font-weight: 600; }

@media (max-width: 560px) {
  .jb-toolbar-row { flex-direction: column; }
  .jb-select { flex: 1 1 auto; }
  .jb-card { padding: 12px; }
  .jb-logo { width: 40px; height: 40px; font-size: 15px; }
  .jb-detail-meta-grid { grid-template-columns: 1fr 1fr; }
  .jb-detail-footer { flex-direction: column; align-items: stretch; }
}