/* ================================================================
   LT | AI — Custom Theme
   Colors extracted from Figma: B2RMRZAOHwkRBAgllx792E
   ================================================================ */

/* ── Montserrat font ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

/* ── CSS Variables ── */
:root {
    --lt-accent: #eaaa00;
    --lt-black: #000000;
    --lt-white: #ffffff;

    /* Light theme (default) */
    --lt-bg: #ffffff;
    --lt-panel: #f3f3f5;
    --lt-text: #151615;
    --lt-placeholder: #afaeb1;
    --lt-input-border: #f3f3f5;
    --lt-separator-opacity: 0.32;
}

html.dark {
    --lt-bg: #1f2027;
    --lt-panel: #141316;
    --lt-text: #ffffff;
    --lt-placeholder: #898b97;
    --lt-input-border: #303138;
    --lt-separator-opacity: 1;
}

/* ── Global font ── */
body,
input,
textarea,
button,
select {
    font-family: 'Montserrat', sans-serif !important;
}

/* ── Override shadcn/Tailwind CSS variables (HSL format) ── */
:root {
    --primary: 43.6 100% 45.9%;
    --primary-foreground: 0 0% 100%;
    --ring: 43.6 100% 45.9%;
    --accent: 240 9.1% 95.7%;
    --accent-foreground: 0 0% 8%;
    --card: 240 9.1% 95.7%;
    --card-foreground: 0 0% 8%;
    --background: 0 0% 100%;
    --muted-foreground: 0 0% 68.6%;
}

html.dark {
    --accent: 232.5 7.7% 20.4%;
    --accent-foreground: 0 0% 100%;
    --card: 232.5 7.7% 20.4%;
    --card-foreground: 0 0% 100%;
    --background: 232.5 11.4% 13.7%;
    --muted-foreground: 232 4.9% 56.3%;
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */

/* -- Hide default Chainlit logo (top-left corner) -- */
img.logo,
img[alt="logo"] {
    display: none !important;
}

/* -- Login page: full dark/light background -- */
.MuiBox-root[class*="login"],
div[class*="auth"],
main:has(form) {
    background-color: var(--lt-bg) !important;
}

/* -- Right panel (image area) background, rounded left corners (64px from Figma) -- */
:has(> img[alt="Image"]) {
    background-color: var(--lt-panel) !important;
    border-radius: 64px 0 0 64px !important;
    overflow: hidden !important;
}

/* -- Login page image (LUCKY TEAM logo) -- */
/* Reset Tailwind classes: brightness-[0.2], grayscale, object-cover */
img[alt="Image"] {
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    -webkit-filter: none !important;
    --tw-brightness: initial !important;
    --tw-grayscale: initial !important;
    /* Limit logo size (~53% of panel width, as in Figma) */
    max-width: 460px !important;
    max-height: 132px !important;
    width: auto !important;
    height: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
}

/* -- Dark theme: swap to dark-bg variant of LUCKY TEAM logo -- */
html.dark img[alt="Image"] {
    content: url("/public/LT_for_dark.svg") !important;
}

/* -- LT|AI logo above login form via ::before -- */
form::before {
    content: '';
    display: block;
    width: 158px;
    height: 40px;
    margin-bottom: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("/public/LT_AI_for_light.svg");
}

html.dark form::before {
    background-image: url("/public/LT_AI_for_dark.svg");
}

/* -- Login form title -- */
form h1,
form h2,
form [class*="title"],
form > div > p:first-of-type {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--lt-text) !important;
}

/* -- Login form labels -- */
form label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--lt-text) !important;
}

/* -- Login form inputs -- */
form input[type="text"],
form input[type="password"],
form input[name="username"],
form input[name="password"] {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 8px !important;
    height: 40px !important;
    border: 1px solid var(--lt-input-border) !important;
    background: transparent !important;
}

form input::placeholder {
    color: var(--lt-placeholder) !important;
}

/* -- Login button -- */
form button[type="submit"],
form [class*="bg-primary"] {
    background-color: var(--lt-accent) !important;
    border-color: var(--lt-accent) !important;
    color: var(--lt-black) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    height: 40px !important;
}

form button[type="submit"] *,
form [class*="bg-primary"] * {
    color: var(--lt-black) !important;
}

/* ================================================================
   CHAT PAGE — Background
   ================================================================ */

/* -- Main chat background -- */
html.dark body,
html.dark #root,
html.dark main,
html.dark [class*="chat-container"],
html.dark .cl-main {
    background-color: var(--lt-bg) !important;
}

/* ================================================================
   CHAT PAGE — Sidebar
   ================================================================ */

/* -- Sidebar background (256px in design) -- */
aside,
nav[class*="sidebar"],
div[class*="sidebar"],
.cl-sidebar,
[data-testid="sidebar"] {
    background-color: var(--lt-panel) !important;
}

/* -- Sidebar saved chats info text -- */
aside [class*="text"],
.cl-sidebar [class*="text"] {
    font-family: 'Montserrat', sans-serif !important;
}

/* ================================================================
   CHAT PAGE — Message Composer (Input)
   ================================================================ */

/* -- Chat composer container (Figma: #303138 dark / #f3f3f5 light, radius 24) -- */
#message-composer {
    background-color: var(--lt-input-border) !important;
    border-radius: 24px !important;
    border: none !important;
    box-shadow: none !important;
}

/* -- Textarea itself -- */
#chat-input {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    background: transparent !important;
    color: var(--lt-text) !important;
    border: none !important;
}

#chat-input::placeholder {
    color: var(--lt-placeholder) !important;
}

/* -- Remove focus outlines on textarea -- */
textarea:focus {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* -- Remove focus outlines on all inputs -- */
input:focus {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ================================================================
   CHAT PAGE — Send Button (golden circle)
   ================================================================ */

/* -- Send button: 32x32 golden circle -- */
#chat-submit,
button[class*="send"],
[class*="composer"] button {
    background-color: var(--lt-accent) !important;
    border-color: var(--lt-accent) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
}

/* -- Send button icon color -- */
#chat-submit svg,
button[class*="send"] svg,
[class*="composer"] button svg {
    color: var(--lt-black) !important;
    fill: var(--lt-black) !important;
}

/* ================================================================
   CHAT PAGE — Primary Buttons (general)
   ================================================================ */

[class*="bg-primary"]:not([class*="bg-primary-"]),
button[data-variant="default"] {
    background-color: var(--lt-accent) !important;
    border-color: var(--lt-accent) !important;
    color: var(--lt-black) !important;
}

[class*="bg-primary"]:not([class*="bg-primary-"]) *,
button[data-variant="default"] * {
    color: var(--lt-black) !important;
}

/* ================================================================
   CHAT PAGE — Accent Links
   ================================================================ */

[class*="text-primary"]:not([class*="text-primary-"]) {
    color: var(--lt-accent) !important;
}

/* ================================================================
   CHAT PAGE — Header
   ================================================================ */

/* -- "Описание" text and user avatar area -- */
header,
[class*="header"] {
    font-family: 'Montserrat', sans-serif !important;
}

/* -- User avatar circle (golden) -- */
[class*="avatar"],
.cl-avatar {
    background-color: var(--lt-accent) !important;
    color: var(--lt-black) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* ================================================================
   CHAT PAGE — LT|AI Logo above composer (pure CSS)
   ================================================================ */

/* -- Inject logo only on welcome screen (before chat starts) -- */
#welcome-screen::before {
    content: '';
    display: block;
    width: 158px;
    height: 40px;
    margin: 0 auto 24px;
    background-image: url("/public/LT_AI_for_light.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

html.dark #welcome-screen::before {
    background-image: url("/public/LT_AI_for_dark.svg");
}

/* ================================================================
   CHAT PAGE — Sidebar Info Banner (golden, not blue)
   ================================================================ */

/* -- Override blue alert to golden tint (Figma: #eaaa00 at 8%, radius 12px) -- */
.alert {
    background-color: rgba(234, 170, 0, 0.08) !important;
    border-color: rgba(234, 170, 0, 0.15) !important;
    border-radius: 12px !important;
}

html.dark .alert {
    background-color: rgba(234, 170, 0, 0.08) !important;
    border-color: rgba(234, 170, 0, 0.12) !important;
}

/* -- Alert icon — golden instead of blue -- */
.alert svg {
    color: var(--lt-accent) !important;
}

/* -- Alert text — proper color instead of blue -- */
.alert p,
.alert span {
    color: var(--lt-text) !important;
}

/* ================================================================
   Sidebar — Context menu (Rename/Delete popover)
   ================================================================ */

/* -- Ensure dropdown is wide enough for Russian text -- */
[data-radix-popper-content-wrapper],
[role="menu"],
[data-state="open"][class*="popover"],
[class*="dropdown-menu-content"] {
    min-width: 180px !important;
}