/* Homdorong Design Refresh v2 — cache-busted corrective pass — visual-only layer; preserves existing app behavior */
:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --panel: #ffffff;
  --panel-2: #f5f8f6;
  --chat-bg: #f2f6f3;
  --dots: #0d735a0a;
  --text: #152c25;
  --muted: #687c73;
  --line: #e1eae4;
  --hover: #f0f7f2;
  --active: #e5f4eb;
  --accent: #087f5b;
  --accent-dark: #066747;
  --accent-text: #ffffff;
  --gold: #c28a22;
  --bubble-in: #ffffff;
  --bubble-out: #d9f4e5;
  --bubble-text: #152c25;
  --meta: #72847a;
  --badge: #087f5b;
  --badge-text: #ffffff;
  --input: #ffffff;
  --sep: #fffffff0;
  --danger: #c13d4b;
  --success: #087f5b;
  --hd-radius-sm: 10px;
  --hd-radius-md: 15px;
  --hd-radius-lg: 20px;
  --hd-radius-xl: 25px;
  --hd-shadow-sm: 0 2px 8px rgba(22, 53, 39, .045);
  --hd-shadow-md: 0 12px 32px rgba(22, 53, 39, .075);
  --hd-shadow-lg: 0 24px 70px rgba(22, 53, 39, .12);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101a17;
  --panel: #17241f;
  --panel-2: #1d2d26;
  --chat-bg: #111c18;
  --dots: #e9fff208;
  --text: #edf5ef;
  --muted: #a0b2a8;
  --line: #2a3d33;
  --hover: #21372c;
  --active: #203e30;
  --accent: #38bd8a;
  --accent-dark: #5bd4a2;
  --accent-text: #09261b;
  --bubble-in: #203128;
  --bubble-out: #155a40;
  --bubble-text: #eff8f1;
  --meta: #a7b9ae;
  --badge: #38bd8a;
  --badge-text: #09261b;
  --input: #1d2d26;
  --sep: #17241ff0;
  --danger: #ff7780;
  --success: #38bd8a;
  --hd-shadow-sm: 0 2px 8px #0002;
  --hd-shadow-md: 0 12px 32px #0003;
  --hd-shadow-lg: 0 24px 70px #0005;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #101a17; --panel: #17241f; --panel-2: #1d2d26; --chat-bg: #111c18;
    --dots: #e9fff208; --text: #edf5ef; --muted: #a0b2a8; --line: #2a3d33;
    --hover: #21372c; --active: #203e30; --accent: #38bd8a; --accent-dark: #5bd4a2;
    --accent-text: #09261b; --bubble-in: #203128; --bubble-out: #155a40;
    --bubble-text: #eff8f1; --meta: #a7b9ae; --badge: #38bd8a; --badge-text: #09261b;
    --input: #1d2d26; --sep: #17241ff0; --danger: #ff7780; --success: #38bd8a;
    --hd-shadow-sm: 0 2px 8px #0002; --hd-shadow-md: 0 12px 32px #0003; --hd-shadow-lg: 0 24px 70px #0005;
  }
}

html { background: var(--bg); scrollbar-color: var(--line) transparent; }
body { background: var(--bg); color: var(--text); font-family: inherit; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 78%, white); outline-offset: 3px; }

/* App frame and navigation */
.app-shell { background: var(--panel); color: var(--text); box-shadow: var(--hd-shadow-md); }
.sidebar { background: var(--panel); border-color: var(--line); }
.sidebar-header, .chat-header { box-shadow: 0 1px 0 var(--line); }
.brand-inline strong { letter-spacing: -.45px; }
.brand-mark, .choqa-mark { box-shadow: var(--hd-shadow-sm); }
.search-box { background: var(--panel-2); border-color: var(--line); border-radius: 15px; }
.search-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.conversation-item { border-radius: 15px; }
.conversation-item:hover { background: var(--hover); border-color: var(--line); }
.conversation-item.active, .conversation-item[aria-current="true"] { background: var(--active); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); box-shadow: inset -3px 0 0 var(--accent); }
.avatar { border-color: var(--panel); }
.badge { background: var(--badge); color: var(--badge-text); }
.fab { background: var(--accent); color: var(--accent-text); box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 26%, transparent); }
.fab:hover { background: var(--accent-dark); }
.fab-menu, .top-menu { background: var(--panel); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--hd-shadow-lg); }
.fab-menu button, .top-menu button { border-radius: 11px; }

/* Conversation canvas */
.chat-panel { background-color: var(--chat-bg); color: var(--text); }
.chat-header { background: color-mix(in srgb, var(--panel) 94%, transparent); border-color: var(--line); }
.chat-heading strong, .row-top strong { letter-spacing: -.2px; }
.header-tools .icon-btn, .back-btn, .attach-btn, .record-btn { border-radius: 13px; }
.header-tools .icon-btn:hover, .back-btn:hover, .attach-btn:hover, .record-btn:hover { background: var(--hover); }
.messages { scrollbar-color: var(--line) transparent; }
.day-sep span { background: var(--panel); color: var(--muted); border-color: var(--line); }
.message-bubble { border-radius: 17px !important; color: var(--bubble-text); box-shadow: var(--hd-shadow-sm); }
.message-row.mine .message-bubble { background: var(--bubble-out); }
.message-row:not(.mine) .message-bubble { background: var(--bubble-in); }
.message-bubble .meta, .message-bubble time, .message-meta { color: var(--meta); }
.composer { background: color-mix(in srgb, var(--panel) 96%, transparent) !important; border-color: var(--line) !important; }
.composer input, .composer textarea, .composer>input, .composer>textarea { background: var(--panel-2) !important; border-color: var(--line) !important; color: var(--text) !important; border-radius: 16px; }
.composer input::placeholder, .composer textarea::placeholder { color: var(--muted); opacity: .9; }
.composer input:focus, .composer textarea:focus { background: var(--panel) !important; border-color: color-mix(in srgb, var(--accent) 65%, var(--line)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent) !important; }
.primary, .send-btn { background: var(--accent); color: var(--accent-text); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
.primary:hover, .send-btn:hover { background: var(--accent-dark); }

/* Forms, sheets, dialogs, profile and secondary screens */
.auth-page, .center-screen { background: var(--bg); color: var(--text); }
.auth-card, .modal-card, .call-panel, .profile-card, .person-row, .people-list, .setup-steps, .attachment, .media-preview, .theme-row, .check-row, .stack-form, .tabs, .cont, .card, .panel { color: var(--text); }
.auth-card, .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--hd-radius-xl); box-shadow: var(--hd-shadow-lg); }
.modal-backdrop, .menu-backdrop, .fab-backdrop { backdrop-filter: blur(5px); }
.modal-label, .eyebrow { color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]), textarea, select { color: var(--text); }
.stack-form input, .stack-form textarea, .stack-form select, .pw-field, .auth-card input, .auth-card textarea, .auth-card select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; }
.stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus, .auth-card input:focus, .auth-card textarea:focus, .auth-card select:focus { border-color: var(--accent); }
.tabs { background: var(--panel-2); border-radius: 14px; padding: 4px; }
.tabs button, .tabs [role="tab"] { border-radius: 10px; }
.tabs .active, .tabs [aria-selected="true"] { background: var(--panel); box-shadow: var(--hd-shadow-sm); }
.person-row, .people-list, .attachment, .media-preview, .theme-row, .check-row, .setup-steps { border-color: var(--line); border-radius: var(--hd-radius-md); }
.person-row:hover, .attachment:hover { background: var(--hover); }
.profile-avatar, .group-avatar { box-shadow: var(--hd-shadow-md); }
.call-top, .top { background: var(--panel); border-color: var(--line); color: var(--text); }
.ib { color: var(--text); }
.ib:hover { background: var(--hover); }
.danger, .menu-danger { color: var(--danger); }
.success { color: var(--success); }
.inline-error, .error { color: var(--danger); }
.muted, .small, .tiny { color: var(--muted); }

/* Standalone group/channel administration screen */
body:has(.top) main { color: var(--text); }
.top h1 { font-weight: 750; letter-spacing: -.25px; }
.chip { border-color: var(--line); background: var(--panel); color: var(--text); border-radius: 999px; }
input, textarea, select { accent-color: var(--accent); }

/* Keep the layout calm on small screens and respect device safe areas */
@media (max-width: 760px) {
  .app-shell { box-shadow: none; }
  .sidebar-header { padding-inline: 15px; }
  .conversation-item { min-height: 72px; }
  .chat-header { padding-inline: 12px; }
  .message-bubble { max-width: 88%; }
  .auth-card, .modal-card { border-radius: 20px; }
}
@media (hover: none) {
  .conversation-item:hover, .person-row:hover, .attachment:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* v2 corrective pass: intentionally stronger, directly-targeted visual overrides */
:root {
  --bg: #f1f6f3;
  --panel: #ffffff;
  --panel-2: #f6faf7;
  --chat-bg: #edf5f0;
  --text: #142c23;
  --muted: #63796d;
  --line: #dce9e0;
  --hover: #eaf5ee;
  --active: #dff2e6;
  --accent: #087f5b;
  --accent-dark: #056747;
  --bubble-in: #ffffff;
  --bubble-out: #ccefdc;
  --hd-shadow-sm: 0 3px 12px rgba(18, 60, 39, .07);
  --hd-shadow-md: 0 14px 36px rgba(18, 60, 39, .10);
  --hd-shadow-lg: 0 24px 64px rgba(18, 60, 39, .15);
}
:root[data-theme="dark"] {
  --bg: #0c1511;
  --panel: #121f19;
  --panel-2: #192a21;
  --chat-bg: #0e1913;
  --text: #edf8f0;
  --muted: #a1b8a8;
  --line: #2b4033;
  --hover: #1c3326;
  --active: #204332;
  --accent: #4bd49a;
  --accent-dark: #6ce4b0;
  --bubble-in: #1a2a20;
  --bubble-out: #14583d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:#0c1511; --panel:#121f19; --panel-2:#192a21; --chat-bg:#0e1913;
    --text:#edf8f0; --muted:#a1b8a8; --line:#2b4033; --hover:#1c3326;
    --active:#204332; --accent:#4bd49a; --accent-dark:#6ce4b0;
    --bubble-in:#1a2a20; --bubble-out:#14583d;
  }
}
html, body { min-height: 100%; background: var(--bg) !important; color: var(--text) !important; }
body { font-family: Vazirmatn, Tahoma, sans-serif; }
.app-shell {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: var(--hd-shadow-md) !important;
}
.sidebar { background: var(--panel) !important; border-color: var(--line) !important; }
.sidebar-header, .chat-header {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  padding-top: max(16px, env(safe-area-inset-top)) !important;
}
.brand-inline strong { font-size: 21px !important; font-weight: 850 !important; }
.brand-mark, .choqa-mark { border-radius: 16px !important; }
.search-box {
  min-height: 46px !important; background: var(--panel-2) !important;
  border: 1px solid var(--line) !important; border-radius: 15px !important;
}
.conversation-list { padding: 8px 10px 18px !important; }
.conversation-item {
  min-height: 76px !important; margin: 4px 0 !important;
  padding: 10px 12px !important; border: 1px solid transparent !important;
  border-radius: 18px !important; transition: background .18s ease, transform .18s ease !important;
}
.conversation-item:hover { transform: translateY(-1px); background: var(--hover) !important; }
.conversation-item.active {
  background: var(--active) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  box-shadow: inset -4px 0 0 var(--accent) !important;
}
.conversation-copy .row-top strong { font-size: 14px !important; font-weight: 800 !important; }
.conversation-copy .preview, .conversation-copy p { color: var(--muted) !important; }
.chat-panel { background: var(--chat-bg) !important; }
.chat-header {
  min-height: 76px !important; border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 18px rgba(15, 45, 29, .035) !important;
}
.messages {
  background-color: var(--chat-bg) !important;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 7%, transparent) .7px, transparent .7px) !important;
  background-size: 18px 18px !important;
  padding: 22px clamp(12px, 3vw, 34px) !important;
}
.message-row { margin-block: 7px !important; }
.message-bubble {
  padding: 11px 14px !important; border-radius: 18px !important;
  line-height: 1.85 !important; box-shadow: 0 3px 10px rgba(13, 50, 31, .06) !important;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
}
.message-row.mine .message-bubble {
  background: var(--bubble-out) !important; border-bottom-right-radius: 6px !important;
}
.message-row.theirs .message-bubble {
  background: var(--bubble-in) !important; border-bottom-left-radius: 6px !important;
}
.composer {
  margin: 12px !important; padding: 9px !important; gap: 8px !important;
  border: 1px solid var(--line) !important; border-radius: 22px !important;
  box-shadow: 0 8px 28px rgba(18, 60, 39, .08) !important;
}
.composer input, .composer textarea {
  min-height: 44px !important; padding: 11px 14px !important;
  background: var(--panel-2) !important; border-radius: 15px !important;
}
button, input, textarea, select { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
button:active { transform: scale(.985); }
.fab {
  width: 54px !important; height: 54px !important; border-radius: 19px !important;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}
.modal-card, .auth-card, .profile-card, .call-panel {
  border-radius: 24px !important; border-color: var(--line) !important;
  box-shadow: var(--hd-shadow-lg) !important;
}
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  border-radius: 13px;
}
:focus-visible { outline-offset: 3px !important; }
@media (min-width: 900px) {
  .app-shell { margin: 18px auto !important; width: min(1440px, calc(100vw - 36px)) !important; min-height: calc(100dvh - 36px) !important; }
}
@media (max-width: 760px) {
  .app-shell { width: 100% !important; min-height: 100dvh !important; border-radius: 0 !important; border: 0 !important; margin: 0 !important; }
  .conversation-item { min-height: 74px !important; }
  .messages { padding: 16px 12px !important; }
  .composer { margin: 8px !important; border-radius: 20px !important; }
}

/* WhatsApp-like message timestamp: one muted timestamp below the message only. */
.message-meta{color:#8b9b96!important;font-size:12px!important;opacity:.9!important;justify-content:flex-end!important;margin-top:5px!important;font-weight:400!important}
.message-meta time{font-weight:400!important;color:inherit!important}