/*
 * LyDian chat — layout, theme and right-to-left fixes shared by all six language versions
 * (2026-10-15). Loaded last in <head>; selectors are scoped to the chat page structure.
 */

/* ── 1. Welcome block never runs under the header ─────────────────────────────────────────
   The empty state is a fixed box from the top of the window to its middle, bottom-aligned.
   On shorter windows its content (greeting, title, 240px animation) was taller than the box
   and rose under the header. The box now starts below the header and the animation shrinks,
   then disappears, when there is not enough room. */
body.desktop-centered.chat-initial .empty-state {
  top: 72px !important;
  height: calc(50% - 72px) !important;
  padding-top: 0.5rem !important;
  overflow: hidden;
}
body.desktop-centered.chat-initial #chatParticleCanvas {
  width: auto !important;
  height: clamp(0px, calc(50vh - 72px - 150px), 240px) !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 1;
}
@media (max-height: 560px) {
  body.desktop-centered.chat-initial #chatParticleCanvas {
    display: none;
  }
}
.welcome-user-name,
.welcome-message {
  text-align: center;
  overflow-wrap: anywhere;
}

/* ── 2. Theme palette: the same components in light and dark ───────────────────────────── */
/* chat input: the text area takes the colour of its field, no white box inside a grey one */
#messageInput,
.input-wrapper textarea {
  background: transparent !important;
}
/* closed history drawer is off screen; its shadow must not show at the window edge */
.desktop-history-drawer:not(.open),
.code-side-panel:not(.open),
.mobile-sidebar:not(.open),
.sidebar.collapsed {
  box-shadow: none !important;
}
/* sign-in button: accent outline in both themes, readable text */
.header-login-btn {
  background: transparent !important;
  border: 1px solid rgba(233, 116, 81, 0.55) !important;
  color: #f4f4f2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.header-login-btn svg {
  fill: currentColor !important;
}
.header-login-btn:hover {
  background: rgba(233, 116, 81, 0.12) !important;
  border-color: #e97451 !important;
  transform: none !important;
  box-shadow: none !important;
}
[data-theme='light'] .header-login-btn {
  color: #1f1f1e !important;
}
[data-theme='light'] .header-login-btn:hover {
  background: rgba(233, 116, 81, 0.1) !important;
}

/* language selector inside the header actions */
.lyd-lang-mount {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .lyd-lang-mount .lls-btn {
    height: 32px;
    padding: 0 8px;
    gap: 4px;
    font-size: 0.75rem;
  }
  .lyd-lang-mount .lls-btn span[aria-hidden] {
    display: none;
  }
}

/* ── 3. Right-to-left (Arabic) ─────────────────────────────────────────────────────────── */
/* the header mirrors; the fixed logo moves to the right edge with it */
html[dir='rtl'] #desktopLogo {
  left: auto !important;
  right: 24px !important;
}
html[dir='rtl'] #desktopHistoryToggle {
  left: auto !important;
  right: 160px !important;
}
/* the mirrored header starts at the left edge: keep the actions clear of the right-hand logo */
html[dir='rtl'] body.desktop-centered .chat-header {
  padding-left: 1.5rem !important;
  padding-right: 220px !important;
}
/* help dropdown opens toward the page, not off the left edge */
html[dir='rtl'] .help-dropdown {
  right: auto !important;
  left: 0 !important;
}
/* phone header: the bar mixes fixed and flowing items, which do not mirror cleanly; it keeps
   one consistent left-to-right arrangement (brand and icons only, no running text) */
@media (max-width: 768px) {
  html[dir='rtl'] .mobile-logo-container,
  html[dir='rtl'] .chat-header {
    direction: ltr;
  }
  html[dir='rtl'] .lls-inline .lls-menu {
    left: auto;
    right: 0;
  }
  html[dir='rtl'] .lls-menu li {
    direction: rtl;
    text-align: right;
  }
}
/* user and assistant text follows its own direction */
html[dir='rtl'] .message-text,
html[dir='rtl'] #messageInput {
  unicode-bidi: plaintext;
  text-align: start;
}
/* code is always left-to-right */
html[dir='rtl'] pre,
html[dir='rtl'] code {
  direction: ltr;
  text-align: left;
}