/* ============================================================
   swalf � annotation-board look, appended to public/style.css
   Matches the landing page: dark canvas #101114, faint grid
   lines, off-white ink #f4f4f2, teal accent #5bc8c3.
   ============================================================ */

/* ============================================================
   0. FIRST PAINT
   ============================================================ */

html,
body {
  background-color: hsl(225 11% 7%);
}

/* Hide the Chainlit watermark in the composer footer. */
a[href*="chainlit.io"],
.watermark {
  display: none !important;
}

#welcome-screen,
.welcome-screen {
  display: none !important;
}

/* faint board grid behind the chat (dark mode only) */
html.dark body {
  background-color: hsl(225 11% 7%);
  background-image:
    linear-gradient(to left,   transparent calc(33.33% - 1px), rgba(255, 255, 255, 0.06) 33.33%, transparent calc(33.33% + 1px)),
    linear-gradient(to left,   transparent calc(66.66% - 1px), rgba(255, 255, 255, 0.06) 66.66%, transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent calc(30% - 1px),    rgba(255, 255, 255, 0.06) 30%,    transparent calc(30% + 1px)),
    linear-gradient(to bottom, transparent calc(72% - 1px),    rgba(255, 255, 255, 0.06) 72%,    transparent calc(72% + 1px));
  background-attachment: fixed;
}

html:not(.dark),
html:not(.dark) body {
  background-color: hsl(0 0% 100%);
}

html.dark #root,
html.dark main {
  background: transparent;
}

::selection {
  background: #5bc8c3;
  color: #111111;
}

html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ============================================================
   Enlarged Assistant Avatar / Label Chip
   ============================================================ */
img[alt="swalf"],
.message-avatar img,
.MuiAvatar-root,
.MuiAvatar-root img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 6px !important;
}

/* ============================================================
   WhatsApp-style chat bubbles
   ============================================================ */

.step .group > .bg-accent {
  background: hsl(177 45% 16%) !important;          
  color: hsl(60 8% 95%);
  border: 1px solid hsl(177 30% 24%);
  border-radius: 14px 4px 14px 14px;                
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  animation: bubble-in-user 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  transform-origin: top right;
}

.step .group > .bg-accent::after {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: hsl(177 45% 16%);
  border-right: 0;
}

.ai-message > div > .message-content {
  position: relative;
  background: hsl(226 10% 13%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px 14px 14px 14px;                
  padding: 0.65rem 1.1rem;
  width: fit-content;
  max-width: 85%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  animation: bubble-in-ai 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  transform-origin: top left;
}

.ai-message > div > .message-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: hsl(226 10% 13%);
  border-left: 0;
}

@keyframes bubble-in-user {
  0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bubble-in-ai {
  0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

html:not(.dark) .step .group > .bg-accent {
  background: hsl(147 50% 88%) !important;          
  color: hsl(0 0% 7%);
  border-color: hsl(147 35% 78%);
}
html:not(.dark) .step .group > .bg-accent::after {
  border-top-color: hsl(147 50% 88%);
}

html:not(.dark) .ai-message > div > .message-content {
  background: hsl(0 0% 100%);
  border-color: hsl(60 5% 85%);
}
html:not(.dark) .ai-message > div > .message-content::after {
  border-top-color: hsl(0 0% 100%);
}

.ai-message .message-content pre {
  max-width: 100%;
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  .step .group > .bg-accent,
  .ai-message > div > .message-content {
    animation: none;
  }
}

/* ============================================================
   Action buttons
   ============================================================ */

#action-start,
.actions button {
  background: hsl(177 45% 16%) !important;
  color: hsl(60 8% 95%) !important;
  border: 1px solid #5bc8c3 !important;
  border-radius: 4px 14px 14px 14px;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  transition: background 0.15s ease, transform 0.1s ease;
}

#action-start:hover,
.actions button:hover {
  background: hsl(177 45% 22%) !important;
}

#action-start:active,
.actions button:active {
  transform: translateY(1px);
}

#action-start:focus-visible,
.actions button:focus-visible {
  outline: 2px solid #5bc8c3;
  outline-offset: 3px;
}

/* ============================================================
   Enlarged Assistant Avatar Override
   ============================================================ */

/* Target Tailwind sizing classes or flex containers wrapping the avatar */
.MuiAvatar-root, 
div[class*="avatar"], 
span[class*="avatar"],
.q-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
}

/* Force the image inside the avatar container to scale up cleanly */
.MuiAvatar-root img,
div[class*="avatar"] img,
span[class*="avatar"] img,
img[alt="swalf"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* ============================================================
 RTL Layout Rules
 ============================================================ */
body, #root, .cl-message, textarea, input, p, div {
 direction: rtl !important;
 text-align: right !important;
}

ul, ol {
 padding-right: 1.5rem !important;
 padding-left: 0 !important;
}

blockquote {
 border-right: 4px solid #5bc8c3 !important;
 border-left: none !important;
 padding-right: 1rem !important;
 padding-left: 0 !important;
}

/* ==========================================================
   RTL Layout Rules
   =========================================================*/
body, #root, .cl-message, textarea, input, p, div {
    direction: rtl !important;
    text-align: right !important;
}

ul, ol {
    padding-right: 1.5em !important;
    padding-left: 0 !important;
}

blockquote {
    border-right: 4px solid #5bc8c3 !important;
    border-left:none !important;
    padding-right: 1rem !important;
    padding-left: 0 !important;
}