/* Branding customization for KWAI Agent */

/* SSO screen (no sidebar rendered yet): large floating top-left logo.
   `:not(:has(...))` keeps this off the chat page where the sidebar
   header carries the logo. */
body:not(:has([data-sidebar="sidebar"]))::before {
  content: "";
  position: fixed;
  top: 24px;
  left: 32px;
  width: 220px;
  height: 72px;
  background-image: url("/public/logo_light.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  z-index: 9999;
  pointer-events: none;
}

.dark body:not(:has([data-sidebar="sidebar"]))::before {
  background-image: url("/public/logo_dark.svg");
}

/* Post-login: inject logo into Chainlit's shadcn Sidebar header.
   Lives inside the sidebar flex column → moves with sidebar open/close,
   no overlap with chat content. */
[data-sidebar="header"]::before {
  content: "";
  display: block;
  width: 100%;
  height: 56px;
  margin: 4px 0 8px 0;
  background-image: url("/public/logo_light.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.dark [data-sidebar="header"]::before {
  background-image: url("/public/logo_dark.svg");
}

/* Icon-collapsed sidebar: swap full logo for compact favicon mark so it
   doesn't get clipped at icon-only width. */
[data-state="collapsed"][data-collapsible="icon"] [data-sidebar="header"]::before,
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="header"]::before {
  height: 32px;
  background-image: url("/public/favicon.svg");
  background-position: center;
}

/* Narrow viewports: Chainlit auto-hides the sidebar but the SSO floating
   logo (or the sidebar-mobile drawer header) can leak through and clutter
   the top of the chat. Suppress both pseudo-element logos under the
   shadcn mobile breakpoint. The favicon in the tab + Chainlit's mobile
   header still carry the brand. */
@media (max-width: 768px) {
  body:not(:has([data-sidebar="sidebar"]))::before,
  [data-sidebar="header"]::before {
    display: none;
  }
}

/* Same suppression when the sidebar is explicitly in mobile mode
   (shadcn marks `data-mobile="true"` on its Sheet wrapper). */
[data-mobile="true"] [data-sidebar="header"]::before {
  display: none;
}

/* Hide Chainlit's native logo on the login/SSO page to prevent duplication with
   the ::before logo above. On that page Chainlit renders <img class="logo …">
   in the top-left of the login card — same position as our fixed pseudo-element.
   Note: "cl-logo" does not exist in Chainlit 2.x; the actual class is "logo". */
body:not(:has([data-sidebar="sidebar"])) img.logo {
  display: none !important;
}

/* Style the native logo img where it is visible (e.g. welcome screen). */
img.logo {
  border-radius: 4px !important;
  object-fit: contain;
}

/* Message avatars (MUI Avatar component) - aggressive override */
.MuiAvatar-root,
.MuiAvatar-root.MuiAvatar-circular {
  border-radius: 4px !important;
  overflow: visible !important;
}

.MuiAvatar-root img,
.MuiAvatar-img {
  border-radius: 4px !important;
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* Chainlit-specific avatar classes - catch all variants */
[class*="avatar"],
[class*="Avatar"] {
  border-radius: 4px !important;
  overflow: visible !important;
}

[class*="avatar"] img,
[class*="Avatar"] img {
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* Message bubble avatars */
.step-avatar,
.message-avatar {
  border-radius: 4px !important;
  overflow: visible !important;
}

.step-avatar img,
.message-avatar img {
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* Starter card icons */
.starter-icon,
[class*="starter"] img {
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* Global image override in message context */
[class*="message"] img[class*="avatar"],
[class*="step"] img[class*="avatar"] {
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* Override Tailwind classes for avatar containers */
.rounded-full.overflow-hidden:has(img[alt*="Avatar"]),
span.rounded-full:has(img[alt*="Avatar"]) {
  border-radius: 4px !important;
  overflow: visible !important;
}

.rounded-full.overflow-hidden:has(img[alt*="Avatar"]) img,
span.rounded-full:has(img[alt*="Avatar"]) img {
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* Direct Tailwind class overrides for avatar images */
img[alt*="Avatar"][src*="logo"] {
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* Target the exact structure from Chainlit's avatar HTML */
span.inline-block span.rounded-full {
  border-radius: 4px !important;
  overflow: visible !important;
}

span.inline-block span.rounded-full img {
  border-radius: 4px !important;
  object-fit: contain !important;
}