/* Homdorong Pro Hall v1 — لایهٔ ظاهر «تالار گفتگو»
   فقط CSS است؛ منطق برنامه را تغییر نمی‌دهد. باید آخرین فایل CSS در index.html باشد.
   ایدهٔ طراحی: فهرست گفتگوها یک ستون تیرهٔ نفتی (petrol) با نشانگر برنجی برای گفتگوی فعال و پیام خوانده‌نشده؛
   فضای گفتگو روشن، مسطح و کم‌حاشیه؛ بدون پس‌زمینهٔ نقطه‌دار و سایه‌های شناور. */

:root{
 --hp-side:#0f2e31;--hp-side-hover:rgba(255,255,255,.055);--hp-side-active:rgba(255,255,255,.09);
 --hp-side-line:rgba(255,255,255,.09);--hp-side-ink:#eaf2f0;--hp-side-muted:#97b0ac;
 --hp-paper:#f3f5f4;--hp-surface:#ffffff;--hp-ink:#18282b;--hp-muted:#5d7276;--hp-line:#dce3e1;
 --hp-teal:#0c6f63;--hp-teal-hover:#095c52;--hp-teal-ink:#ffffff;
 --hp-brass:#c9a34f;--hp-brass-ink:#1d1606;
 --hp-in:#ffffff;--hp-in-ink:#18282b;--hp-out:#0c6f63;--hp-out-ink:#ffffff;
 --hp-radius:14px;--hp-radius-sm:10px;
}
[data-theme=dark]{
 --hp-side:#0a1a1c;--hp-side-line:rgba(255,255,255,.07);
 --hp-paper:#0e1719;--hp-surface:#121f22;--hp-ink:#e6eeec;--hp-muted:#8fa4a7;--hp-line:#223336;
 --hp-teal:#14867a;--hp-teal-hover:#1a9b8d;--hp-in:#19292c;--hp-in-ink:#e6eeec;--hp-out:#0f6b61;
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]){
  --hp-side:#0a1a1c;--hp-side-line:rgba(255,255,255,.07);
  --hp-paper:#0e1719;--hp-surface:#121f22;--hp-ink:#e6eeec;--hp-muted:#8fa4a7;--hp-line:#223336;
  --hp-teal:#14867a;--hp-teal-hover:#1a9b8d;--hp-in:#19292c;--hp-in-ink:#e6eeec;--hp-out:#0f6b61;
 }
}

/* ---------- قاب کلی ---------- */
html body{background:var(--hp-paper)!important;color:var(--hp-ink)}
html body .app-shell{padding:0!important;gap:0!important;margin:0 auto!important;border-radius:0!important;border:0!important;box-shadow:none!important;height:100dvh!important;min-height:0!important;background:var(--hp-paper)!important}
@media (min-width:821px){
 html body .app-shell{grid-template-columns:minmax(320px,380px) minmax(0,1fr)!important;width:min(1600px,100%)!important;min-height:0!important}
}
html body .sidebar,html body .chat-panel{border-radius:0!important;box-shadow:none!important;border:0!important}
html body .chat-panel{background:var(--hp-paper)!important;border-inline-start:1px solid var(--hp-line)!important}
html body *{letter-spacing:0!important} /* حروف فارسی نباید فاصله‌گذاری شوند */

/* ---------- ستون فهرست گفتگوها ---------- */
html body .sidebar{background:var(--hp-side)!important;color:var(--hp-side-ink)}
html body .sidebar-header{
 background:rgba(0,0,0,.16)!important;border-bottom:1px solid var(--hp-side-line)!important;
 padding:14px 16px!important;min-height:68px;
}
html body .sidebar .brand-inline strong{color:var(--hp-side-ink)!important;font-size:17px;font-weight:700}
html body .sidebar .brand-inline small{color:var(--hp-side-muted)!important;font-size:12px}
html body .sidebar .brand-mark{box-shadow:none!important;border-radius:10px}
html body .sidebar .icon-btn{color:var(--hp-side-ink)!important;background:transparent!important;border:0!important;border-radius:10px!important}
html body .sidebar .icon-btn:hover{background:var(--hp-side-hover)!important}
html body .sidebar .search-box{
 background:rgba(255,255,255,.07)!important;border:1px solid var(--hp-side-line)!important;
 border-radius:var(--hp-radius-sm)!important;box-shadow:none!important;color:var(--hp-side-ink);
}
html body .sidebar .search-box:focus-within{border-color:var(--hp-brass)!important;box-shadow:0 0 0 3px rgba(201,163,79,.18)!important}
html body .sidebar .search-box input{color:var(--hp-side-ink)!important;background:transparent!important}
html body .sidebar .search-box input::placeholder{color:var(--hp-side-muted)}
html body .sidebar .search-box svg{color:var(--hp-side-muted)}
html body .conversation-list{padding:8px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
html body .conversation-item{
 position:relative;margin:1px 0!important;padding:11px 12px!important;border:0!important;
 border-radius:var(--hp-radius-sm)!important;background:transparent!important;box-shadow:none!important;transform:none!important;
 color:var(--hp-side-ink)!important;transition:background .15s!important;
}
html body .conversation-item:hover{background:var(--hp-side-hover)!important;transform:none!important}
html body .conversation-item.active,html body .conversation-item[aria-current="true"]{background:var(--hp-side-active)!important;box-shadow:none!important}
html body .conversation-item.active::before{
 content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--hp-brass);
}
html body .conversation-item .row-top strong{color:var(--hp-side-ink)!important;font-size:15px;font-weight:600}
html body .conversation-item .preview{color:var(--hp-side-muted)!important;font-size:13px}
html body .conversation-item time{color:var(--hp-side-muted)!important;font-size:11.5px;font-variant-numeric:tabular-nums}
html body .conversation-item time.has-unread{color:var(--hp-brass)!important;font-weight:700}
html body .sidebar .badge{background:var(--hp-brass)!important;color:var(--hp-brass-ink)!important;box-shadow:none!important;font-weight:700}
html body .sidebar .avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important;border:0!important}
html body .fab{background:var(--hp-brass)!important;color:var(--hp-brass-ink)!important;border-radius:16px!important;box-shadow:0 6px 16px rgba(0,0,0,.28)!important}
html body .fab:hover{transform:none!important;filter:brightness(1.06)}
html body .fab-menu{
 background:var(--hp-surface)!important;color:var(--hp-ink)!important;border:1px solid var(--hp-line)!important;
 border-radius:12px!important;box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
}
html body .fab-menu button{color:var(--hp-ink)!important;background:transparent!important}
html body .fab-menu button:hover{background:var(--hp-paper)!important}
html body .fab-menu .menu-danger,html body .fab-menu button.danger{color:#c2334d!important}

/* ---------- سرِ گفتگو ---------- */
html body .chat-header{
 background:var(--hp-surface)!important;border-bottom:1px solid var(--hp-line)!important;
 padding:10px 18px!important;min-height:64px;box-shadow:none!important;
}
html body .chat-heading strong{font-size:16px;font-weight:700;color:var(--hp-ink)}
html body .chat-heading small{font-size:12px;color:var(--hp-muted)}
html body .chat-panel .icon-btn,html body .chat-panel .back-btn{color:var(--hp-muted)!important;border-radius:10px!important}
html body .chat-panel .icon-btn:hover:not(:disabled){background:var(--hp-paper)!important;color:var(--hp-teal)!important}
html body .chat-header .avatar{box-shadow:none!important}

/* ---------- پیام‌ها ---------- */
html body .messages{
 background:var(--hp-paper)!important;background-image:none!important;
 padding:20px clamp(14px,4vw,40px)!important;scrollbar-width:thin;
}
html body .day-sep{display:flex!important;align-items:center;gap:14px;margin:18px 0 10px!important}
html body .day-sep::before,html body .day-sep::after{content:"";flex:1;height:1px;background:var(--hp-line)}
html body .day-sep span{
 background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;
 padding:0!important;color:var(--hp-muted)!important;font-size:12px;font-weight:600;
}
html body .message-row{margin-block:3px!important}
html body .message-row:not(.cont){margin-top:10px!important}
html body .message-bubble{
 max-width:min(74%,36rem);padding:9px 13px!important;line-height:1.9!important;font-size:14.5px;
 border:1px solid transparent!important;border-radius:var(--hp-radius)!important;box-shadow:none!important;
}
html body .message-row.theirs .message-bubble{
 background:var(--hp-in)!important;color:var(--hp-in-ink)!important;border-color:var(--hp-line)!important;border-start-end-radius:4px!important;
}
html body .message-row.mine .message-bubble{
 background:var(--hp-out)!important;color:var(--hp-out-ink)!important;border-start-start-radius:4px!important;
}
html body .message-row.mine .message-bubble a{color:#fff!important;text-decoration:underline}
html body .message-row.mine .message-meta,html body .message-row.mine .message-bubble time,html body .message-row.mine .tick{color:rgba(255,255,255,.72)!important}
html body .message-row.theirs .message-meta,html body .message-row.theirs .message-bubble time{color:var(--hp-muted)!important}
html body .message-bubble .sender-name{font-size:12px;font-weight:700;margin-bottom:2px;display:block}
html body .message-bubble p{margin:0}
html body .message-row.mine .attachment{background:rgba(255,255,255,.12)!important;border-radius:10px;color:inherit}
@media (max-width:820px){html body .message-bubble{max-width:86%}}

/* ---------- نوار ارسال ---------- */
html body .composer{
 margin:0!important;padding:10px 14px!important;gap:8px!important;border:0!important;border-top:1px solid var(--hp-line)!important;
 border-radius:0!important;background:var(--hp-surface)!important;box-shadow:none!important;backdrop-filter:none!important;align-items:flex-end;
}
html body .composer textarea,html body .composer input:not([type=file]){
 min-height:44px!important;border-radius:12px!important;border:1px solid var(--hp-line)!important;
 background:var(--hp-paper)!important;color:var(--hp-ink)!important;padding:10px 14px!important;
}
html body .composer textarea:focus{border-color:var(--hp-teal)!important;background:var(--hp-surface)!important;box-shadow:0 0 0 3px rgba(12,111,99,.14)!important}
html body .composer .attach-btn,html body .composer .record-btn{color:var(--hp-muted)!important;border-radius:12px!important;background:transparent!important}
html body .composer .attach-btn:hover,html body .composer .record-btn:hover{background:var(--hp-paper)!important;color:var(--hp-teal)!important}
html body .send-btn{
 background:var(--hp-teal)!important;color:var(--hp-teal-ink)!important;border-radius:12px!important;height:44px;min-width:44px;padding:0 16px!important;box-shadow:none!important;
}
html body .send-btn:hover:not(:disabled){background:var(--hp-teal-hover)!important}
html body .send-btn:disabled{opacity:.45}
html body .chat-bottom-note{
 background:var(--hp-surface)!important;color:var(--hp-muted)!important;font-size:11.5px;text-align:center;padding:0 14px 8px!important;
}

/* ---------- صفحهٔ خوش‌آمد (لابی) ---------- */
html body .welcome-empty{max-width:380px;gap:10px!important;padding:24px}
html body .empty-symbol{
 width:72px;height:72px;border-radius:20px;background:var(--hp-side)!important;color:var(--hp-brass)!important;box-shadow:none!important;
}
html body .welcome-empty h2{font-size:21px;font-weight:700;color:var(--hp-ink)!important}
html body .welcome-empty p{color:var(--hp-muted);font-size:14px;line-height:1.9;margin:0}
html body .primary{
 background:var(--hp-teal)!important;color:var(--hp-teal-ink)!important;border:0!important;border-radius:var(--hp-radius-sm)!important;
 font-weight:700;box-shadow:none!important;
}
html body .primary:hover:not(:disabled){background:var(--hp-teal-hover)!important}

/* ---------- پنجره‌ها و ورود ---------- */
html body .modal-card,html body .auth-card{
 background:var(--hp-surface)!important;color:var(--hp-ink);border:1px solid var(--hp-line)!important;
 border-radius:16px!important;box-shadow:0 18px 48px rgba(10,26,28,.22)!important;
}
html body .modal-backdrop{background:rgba(10,26,28,.55)!important;backdrop-filter:blur(2px)}
html body .eyebrow{color:var(--hp-teal)!important;font-weight:700}
html body .person-row{border-radius:var(--hp-radius-sm)!important}
html body .person-row:hover{background:var(--hp-paper)!important}

/* ---------- دسترس‌پذیری ---------- */
html body button:focus-visible,html body a:focus-visible,html body textarea:focus-visible,html body input:focus-visible{
 outline:2px solid var(--hp-brass)!important;outline-offset:2px
}
@media (prefers-reduced-motion:reduce){html body *{animation:none!important;transition:none!important}}