/* ─── Peyda (Persian) ─────────────────────────────────────────────────────── */
@font-face { font-family:'Peyda'; src:url('assets/peyda/peydaWeb-light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Peyda'; src:url('assets/peyda/PeydaWeb-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Peyda'; src:url('assets/peyda/PeydaWeb-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Peyda'; src:url('assets/peyda/PeydaWeb-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Peyda'; src:url('assets/peyda/PeydaWeb-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Peyda'; src:url('assets/peyda/PeydaWeb-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ─── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --primary:    #01EE9C;
  --primary-d:  #00C47E;
  --dark:       #171717;   /* ChatGPT sidebar dark */
  --dark-hover: #212121;
  --dark-2:     #2F2F2F;
  --bg:         #FFFFFF;   /* main chat bg — pure white like ChatGPT */
  --surface:    #FFFFFF;
  --border:     #E5E5E5;
  --text:       #0D0D0D;
  --text-2:     #6B6B6B;
  --text-3:     #9B9B9B;
  --user-bg:    #F4F4F4;   /* light gray for user bubble (ChatGPT style) */
  --sb-w:       260px;
  --sb-mini:    56px;      /* icon-rail width when collapsed on desktop */
  --topbar-h:   56px;
  --r:          12px;
  --ease:       .18s ease;
  --ease-lg:    .24s cubic-bezier(.4,0,.2,1);
  --font-fa:    'Peyda','Vazirmatn',Tahoma,sans-serif;
  --font-en:    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ─── Reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-font-smoothing:antialiased; }
html[dir="rtl"] body { font-family:var(--font-fa); }
html[dir="ltr"] body { font-family:var(--font-en); }
body { height:100%; background:var(--bg); color:var(--text); line-height:1.6; overflow:hidden; }
button { cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit; }
a { text-decoration:none; color:inherit; }
textarea { font-family:inherit; resize:none; border:none; outline:none; background:transparent; }
img { display:block; }

/* ─── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d0d0d0; border-radius:4px; }
.sidebar ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); }

/* ─── Shell ────────────────────────────────────────────────────────────────── */
.shell { display:flex; height:100vh; overflow:hidden; position:relative; }

/* ─── Overlay (mobile) ─────────────────────────────────────────────────────── */
.overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:40;
  opacity:0; transition:opacity var(--ease);
}
.overlay.active { display:block; opacity:1; }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR  — white, clean, premium (ChatGPT-style)
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sb-w);
  background:#fff;
  border-right:1px solid #e5e7eb;
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden; flex-shrink:0;
  transition:width var(--ease-lg);
  position:relative; z-index:30;
}
html[dir="rtl"] .sidebar { border-right:none; border-left:1px solid #e5e7eb; }
.sidebar.collapsed { width:var(--sb-mini); }

/* ── Header ──────────────────────────────────────────────── */
.sb-header {
  display:flex; align-items:center; gap:8px;
  padding:10px 10px; min-height:56px;
  border-bottom:1px solid #f3f4f6;
  flex-shrink:0; overflow:hidden;
}
.sidebar.collapsed .sb-header { justify-content:center; padding:10px 0; }

/* Toggle button — two stacked layers that crossfade */
.sb-toggle-btn {
  position:relative;
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:#6b7280; cursor:pointer;
  transition:background var(--ease), color var(--ease);
}
.sb-toggle-btn:hover { background:#f3f4f6; color:#111827; }
/* RTL: push toggle to the left end of the header row */
html[dir="rtl"] .sb-toggle-btn { order:2; }

.tb-logo, .tb-icon {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}

/* Expanded: show panel icon only */
.tb-logo { opacity:0; transform:scale(.75); }
.tb-icon { opacity:1; transform:scale(1); }

/* Collapsed: show logo, hide panel icon */
.sidebar.collapsed .tb-logo { opacity:1; transform:scale(1); }
.sidebar.collapsed .tb-icon { opacity:0; transform:scale(.75); }

/* Collapsed + hover: morph to panel icon */
.sidebar.collapsed .sb-toggle-btn:hover .tb-logo { opacity:0; transform:scale(.75); }
.sidebar.collapsed .sb-toggle-btn:hover .tb-icon { opacity:1; transform:scale(1); }

.tb-logo img { width:22px; height:22px; object-fit:contain; }

/* Brand (hidden in collapsed) */
.sb-brand {
  display:flex; align-items:center; gap:9px; flex:1;
  overflow:hidden; min-width:0;
  opacity:1; transition:opacity var(--ease-lg), width var(--ease-lg);
}
.sidebar.collapsed .sb-brand { opacity:0; pointer-events:none; flex:0; width:0; }

.sb-logo-icon { width:26px; height:26px; object-fit:contain; flex-shrink:0; }

.sb-brand-text { display:flex; flex-direction:column; gap:1px; overflow:hidden; min-width:0; }
.sb-brand-name {
  font-size:13.5px; font-weight:700; color:#111827;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;
}
.sb-brand-sub {
  font-size:10px; font-weight:500; color:#9ca3af;
  white-space:nowrap; letter-spacing:.02em; line-height:1.2;
}

/* ── Body ────────────────────────────────────────────────── */
.sb-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:8px; display:flex; flex-direction:column; gap:2px;
}
.sidebar.collapsed .sb-body { padding:8px 0; align-items:center; }

/* ── Sidebar items (unified nav button style) ────────────── */
.sb-item {
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:#374151;
  transition:background var(--ease), color var(--ease);
  white-space:nowrap; overflow:hidden;
  text-align:start; cursor:pointer;
}
.sb-item:hover { background:#f3f4f6; color:#111827; }
.sb-item.active { background:#f0fdf4; color:#16a34a; }

.sb-icon { flex-shrink:0; width:18px; height:18px; }
.sb-item-label { overflow:hidden; text-overflow:ellipsis; flex:1; }

/* New chat — slightly elevated */
.sb-new-chat {
  border:1px solid #e5e7eb; background:#fafafa;
  color:#111827; font-weight:600; margin-bottom:2px;
}
.sb-new-chat:hover { background:#f3f4f6; border-color:#d1d5db; }

/* Collapsed icon-rail */
.sidebar.collapsed .sb-item {
  justify-content:center; padding:9px 0; width:40px;
}
.sidebar.collapsed .sb-item-label { display:none; }
.sidebar.collapsed .sb-new-chat { border:none; background:transparent; }

/* ── CSS tooltips (collapsed only) ──────────────────────── */
.sidebar.collapsed .sb-item::after {
  content:attr(data-tooltip);
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  background:#111827; color:#fff;
  padding:5px 10px; border-radius:7px;
  font-size:12px; font-weight:500;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s, transform .15s; z-index:999;
}
.sidebar.collapsed .sb-item:hover::after {
  opacity:1; transform:translateY(-50%) translateX(0);
}
html[dir="rtl"] .sidebar.collapsed .sb-item::after {
  left:auto; right:calc(100% + 10px); transform:translateY(-50%) translateX(6px);
}
html[dir="rtl"] .sidebar.collapsed .sb-item:hover::after {
  transform:translateY(-50%) translateX(0);
}

/* ── Divider ─────────────────────────────────────────────── */
.sb-divider { height:1px; background:#f3f4f6; margin:4px 0; flex-shrink:0; }
.sidebar.collapsed .sb-divider { display:none; }

/* ── Nav + quick questions section ──────────────────────── */
.sb-nav { display:flex; flex-direction:column; gap:1px; }
.sb-section { display:flex; flex-direction:column; }
.sidebar.collapsed .sb-section { display:none; }

.sb-section-label {
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#9ca3af; padding:8px 10px 6px;
}

.quick-list { display:flex; flex-direction:column; gap:1px; }

.quick-chip {
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:start;
  padding:9px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:#374151;
  transition:background var(--ease), color var(--ease);
  white-space:nowrap; overflow:hidden; cursor:pointer;
}
.quick-chip svg { flex-shrink:0; width:16px; height:16px; color:#9ca3af; transition:color var(--ease); }
.quick-chip span { overflow:hidden; text-overflow:ellipsis; flex:1; }
.quick-chip:hover { background:#f3f4f6; color:#111827; }
.quick-chip:hover svg { color:var(--primary-d); }

/* ── Footer ──────────────────────────────────────────────── */
.sb-footer {
  padding:8px 8px 16px;
  border-top:1px solid #f3f4f6;
  display:flex; flex-direction:column; gap:2px;
}
.sidebar.collapsed .sb-footer { padding:8px 0 16px; align-items:center; }

.sb-footer-bottom {
  display:flex; align-items:center; gap:8px; padding:6px 2px 0;
}
.sidebar.collapsed .sb-footer-bottom { display:none; }

.lang-switcher {
  display:flex; align-items:center;
  background:#f3f4f6; border-radius:8px;
  padding:3px; gap:2px; flex:1;
}
.lang-btn {
  flex:1; padding:4px 8px; border-radius:6px;
  font-size:11.5px; font-weight:700; color:#6b7280;
  transition:background var(--ease), color var(--ease), box-shadow var(--ease);
}
.lang-btn.active {
  background:#fff; color:#111827;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.lang-btn:not(.active):hover { color:#374151; }

.sb-status {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:#9ca3af; white-space:nowrap; flex-shrink:0;
  overflow:hidden;
}
.online-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--primary);
  box-shadow:0 0 0 0 rgba(1,238,156,.4);
  animation:pulse 2.5s infinite;
}
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(1,238,156,.4); }
  70%  { box-shadow:0 0 0 6px rgba(1,238,156,0); }
  100% { box-shadow:0 0 0 0 rgba(1,238,156,0); }
}

/* ════════════════════════════════════════════════════════════════
   MAIN  (ChatGPT-exact white area)
═══════════════════════════════════════════════════════════════ */
.main {
  flex:1; min-width:0; display:flex; flex-direction:column;
  height:100vh; overflow:hidden; background:var(--bg);
  padding-top:12px;
}
@media (max-width:680px) { .main { padding-top:0; } }

/* ─── Topbar (mobile only — desktop is sidebar-only) ─────────── */
.topbar {
  display:none; /* hidden on desktop; shown on mobile via media query */
  height:var(--topbar-h); align-items:center;
  justify-content:space-between; padding:0 16px;
  background:var(--bg); border-bottom:1px solid var(--border);
  flex-shrink:0;
}

.menu-btn {
  color:var(--text-2); padding:7px; border-radius:8px; line-height:0;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
}
.menu-btn:hover { background:var(--user-bg); }

.status-pill {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:500; color:#16a34a;
  background:#f0fdf4; border:1px solid #bbf7d0;
  padding:4px 10px; border-radius:99px;
}
.status-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:pulse 2.5s infinite; }

/* ─── Welcome screen ─────────────────────────────────────────── */
.welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 24px; gap:14px; overflow-y:auto;
}
.welcome.hidden { display:none; }

.welcome-orb {
  width:72px; height:72px;
  animation:float 3.5s ease-in-out infinite;
}
.welcome-orb img { width:100%; height:100%; object-fit:contain; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.welcome-title {
  font-size:26px; font-weight:800; color:var(--text); text-align:center;
}
.welcome-sub {
  font-size:14.5px; color:var(--text-2); text-align:center;
  max-width:460px; line-height:1.75;
}

.starter-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; width:100%; max-width:520px; margin-top:4px;
}
.starter-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px;
  font-size:13px; color:var(--text-2); line-height:1.55;
  cursor:pointer; text-align:start;
  transition:border-color var(--ease), background var(--ease), color var(--ease);
}
.starter-card:hover {
  border-color:var(--primary); background:#fafffe; color:var(--text);
}

/* ─── Chat body ──────────────────────────────────────────────── */
.chat-body {
  flex:1; overflow-y:auto;
  display:none; flex-direction:column;
  padding-bottom:8px;
}
.chat-body.active { display:flex; }

/* ─── Message row container ──────────────────────────────────── */
.msg-row {
  width:100%; padding:4px 0;
}
.msg-row:hover { background:rgba(0,0,0,.02); }

.msg-inner {
  max-width:720px; width:100%;
  margin:0 auto; padding:8px 24px;
  display:flex; align-items:flex-start; gap:12px;
  /* Always use physical left→right axis so flex-end/flex-start
     map to physical RIGHT/LEFT regardless of html[dir]. */
  direction:ltr;
}

/* ─── User messages ─────────────────────────────── */
/* Persian: user bubble on physical RIGHT */
.msg-row.user .msg-inner { justify-content:flex-end; }
/* English: user bubble on physical LEFT */
html[dir="ltr"] .msg-row.user .msg-inner { justify-content:flex-start; }

.user-bubble {
  max-width:75%;
  background:var(--user-bg);
  border-radius:18px;
  padding:11px 16px;
  font-size:14px; line-height:1.65; font-family:var(--font-en);
  color:var(--text); word-break:break-word; white-space:pre-wrap;
}

/* ─── Bot messages ──────────────────────────────── */
/* Persian: bot on physical LEFT (flex-start default — no rule needed) */
/* English: bot on physical RIGHT */
html[dir="ltr"] .msg-row.bot .msg-inner { justify-content:flex-end; }
.msg-row.bot .msg-inner { align-items:flex-start; }

.bot-avatar {
  width:28px; height:28px; flex-shrink:0;
  margin-top:2px;
}
/* Persian: move avatar to the right of the text (after text-wrap in LTR flow) */
html[dir="rtl"] .msg-row.bot .bot-avatar { order:2; }
.bot-avatar img { width:100%; height:100%; object-fit:contain; }

.bot-text-wrap { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }

.bot-text {
  font-size:14.5px; line-height:1.75; font-family:var(--font-en);
  color:var(--text); word-break:break-word; white-space:pre-wrap;
}
.bot-text strong { font-weight:700; color:var(--text); }

/* ─── Message actions ────────────────────────────── */
.msg-actions {
  display:flex; align-items:center; gap:1px;
  opacity:0; transition:opacity var(--ease);
  margin-top:6px;
}
.msg-row:hover .msg-actions { opacity:1; }

.act-btn {
  width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:#9ca3af; line-height:0;
  transition:background var(--ease), color var(--ease), transform .1s;
}
.act-btn:hover { background:#f3f4f6; color:#374151; transform:scale(1.05); }
.act-btn:active { transform:scale(.95); }
.act-btn.liked    { color:var(--primary-d); }
.act-btn.disliked { color:#ef4444; }
.act-btn.copied   { color:var(--primary-d); }
.act-btn.shared   { color:#3b82f6; }
.act-btn.spinning svg { animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.act-divider { width:1px; height:16px; background:#e5e7eb; margin:0 3px; flex-shrink:0; }

.msg-time {
  font-size:10px; color:#9ca3af;
  padding:0 4px; margin-inline-start:4px;
}

/* Mobile — always show actions */
@media (max-width:680px) { .msg-actions { opacity:1; } }

/* ─── Suggestion chips ───────────────────────────── */
.suggestions-row { display:flex; flex-wrap:wrap; gap:7px; }
.sugg-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 13px; border:1px solid var(--border);
  border-radius:99px; font-size:12.5px; color:var(--text-2);
  cursor:pointer; background:var(--bg); line-height:1.4;
  transition:border-color var(--ease), background var(--ease), color var(--ease);
}
.sugg-chip:hover {
  border-color:var(--primary); background:#f0fdf8; color:var(--text);
}
.sugg-chip svg { opacity:.45; flex-shrink:0; }

/* ─── Typing indicator ───────────────────────────── */
.typing-dots {
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 16px; background:var(--user-bg);
  border-radius:18px; width:fit-content;
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--text-3); animation:bounce 1.2s infinite; }
.dot:nth-child(2) { animation-delay:.2s; }
.dot:nth-child(3) { animation-delay:.4s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* ─── Composer ───────────────────────────────────────────────── */
.composer-wrap {
  flex-shrink:0; padding:12px 24px 18px;
  background:var(--bg); border-top:1px solid var(--border);
}

.composer {
  display:flex; align-items:flex-end; gap:10px; direction:ltr;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:16px; padding:12px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  max-width:720px; margin:0 auto;
  transition:border-color var(--ease), box-shadow var(--ease);
}
.composer:focus-within {
  border-color:var(--primary);
  box-shadow:0 2px 8px rgba(0,0,0,.06), 0 0 0 3px rgba(1,238,156,.14);
}

#msgInput {
  flex:1; font-size:15px; line-height:1.6; color:var(--text);
  max-height:160px; overflow-y:auto; padding:1px 4px;
}
#msgInput::placeholder { color:var(--text-3); }

.send-btn {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:var(--primary); color:#111; line-height:0;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease), transform var(--ease), opacity var(--ease);
}
.send-btn:hover:not(:disabled) { background:var(--primary-d); transform:scale(1.05); }
.send-btn:disabled { opacity:.28; cursor:not-allowed; }

.disclaimer {
  font-size:11px; color:var(--text-3); text-align:center;
  margin-top:9px; max-width:720px; margin-inline:auto;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width:680px) {
  .sidebar {
    position:fixed; top:0; bottom:0; left:0;
    width:var(--sb-w) !important;
    transform:translateX(-100%);
    transition:transform var(--ease-lg);
    z-index:50;
    box-shadow:4px 0 24px rgba(0,0,0,.08);
  }
  html[dir="rtl"] .sidebar { left:auto; right:0; transform:translateX(100%); box-shadow:-4px 0 24px rgba(0,0,0,.08); }
  .sidebar.mobile-open { transform:translateX(0) !important; }
  .sidebar.collapsed   { width:var(--sb-w) !important; }

  /* Always expanded on mobile — undo all collapsed overrides */
  .sidebar.collapsed .sb-header      { justify-content:flex-start; padding:10px 10px; }
  .sidebar.collapsed .sb-brand       { opacity:1; pointer-events:auto; flex:1; width:auto; }
  .sidebar.collapsed .sb-body        { padding:8px; align-items:stretch; }
  .sidebar.collapsed .sb-item        { justify-content:flex-start; padding:9px 10px; width:100%; }
  .sidebar.collapsed .sb-item-label  { display:block; }
  .sidebar.collapsed .sb-new-chat    { border:1px solid #e5e7eb; background:#fafafa; }
  .sidebar.collapsed .sb-divider     { display:block; }
  .sidebar.collapsed .sb-section     { display:flex; }
  .sidebar.collapsed .sb-footer      { padding:8px 8px 16px; align-items:stretch; }
  .sidebar.collapsed .sb-footer-bottom { display:flex; }
  .sidebar.collapsed .sb-item::after { display:none; }

  /* Mobile toggle button: always show panel icon (sidebar is never icon-rail on mobile) */
  .sidebar.collapsed .tb-logo               { opacity:0; transform:scale(.75); }
  .sidebar.collapsed .tb-icon               { opacity:1; transform:scale(1); }
  .sidebar.collapsed .sb-toggle-btn:hover .tb-logo { opacity:0; transform:scale(.75); }
  .sidebar.collapsed .sb-toggle-btn:hover .tb-icon { opacity:1; transform:scale(1); }

  /* Show topbar on mobile */
  .topbar { display:flex; padding:0 14px; }

  .starter-grid { grid-template-columns:1fr; max-width:100%; }
  .msg-inner { padding:8px 14px; }
  .user-bubble { max-width:88%; }
  .composer-wrap { padding:10px 12px 16px; }
  .welcome-title { font-size:21px; }
}

/* ─── Utility ───────────────────────────────────────────────── */
.hidden { display:none !important; }

/* ════════════════════════════════════════════════════════════════
   RTL / LTR  — explicit direction on every text-bearing element
   (html[dir] sets CSS `direction` globally, but some browsers
   need explicit overrides on inputs and pre-formatted containers)
═══════════════════════════════════════════════════════════════ */

/* Textarea / input — must be set explicitly, not just inherited */
html[dir="rtl"] #msgInput {
  direction:rtl;
  text-align:right;
}
html[dir="ltr"] #msgInput {
  direction:ltr;
  text-align:left;
}

/* Chat bubbles — direction is set per-element via JS based on message content,
   not the app language. text-align:start follows the element's own dir attribute. */
.user-bubble, .bot-text { text-align:start; }

/* Welcome / starter cards */
html[dir="rtl"] .welcome-title,
html[dir="rtl"] .welcome-sub {
  direction:rtl;
}
html[dir="ltr"] .welcome-title,
html[dir="ltr"] .welcome-sub {
  direction:ltr;
}

/* Disclaimer */
html[dir="rtl"] .disclaimer { direction:rtl; }
html[dir="ltr"] .disclaimer { direction:ltr; }

/* User bubble tail — sharp corner on the side the bubble sits on */
/* Persian: user is on the RIGHT → sharp bottom-right */
html[dir="rtl"] .user-bubble { border-bottom-right-radius:4px; border-bottom-left-radius:18px; }
/* English: user is on the LEFT → sharp bottom-left */
html[dir="ltr"]  .user-bubble { border-bottom-left-radius:4px; border-bottom-right-radius:18px; }

/* Message actions row — inherits direction from .bot-text-wrap (set per message in JS) */

/* Suggestion chips row */
html[dir="rtl"] .suggestions-row { flex-direction:row-reverse; }