@import "@fontsource-variable/inter";

@import "tailwindcss";
@import "@agent-native/toolkit/styles.css";

@source "./**/*.{ts,tsx}";

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 0 0% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 43%;
  --accent: 0 0% 95%;
  --accent-foreground: 0 0% 15%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 40%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 97%;
  --sidebar-foreground: 0 0% 43%;
  --sidebar-primary: 0 0% 15%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 15%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 40%;
  --chat-sidebar-width: 17.5rem;
  --chat-sidebar-content-inset: 0.5rem;
  --chat-sidebar-row-padding: 0.75rem;
  --chat-sidebar-title-fade: 1.25rem;
}

.chat-layout-shell {
  --agent-layout-left-drawer-expanded-width: var(--chat-sidebar-width);
  --agent-layout-left-drawer-collapsed-width: 3rem;
  --agent-native-lower-surface: var(--agent-kit-nav-surface);
}

/* Phones get one app bar: the layout bar carries the thread title and
   toolbar, so the AgentKit header would stack a second 48px bar. */
@media (max-width: 47.99rem) {
  [data-chat-header-in-app-bar="true"] .agentkit-chat-header {
    display: none;
  }
}

.agentkit-chat-empty-copy {
  text-align: center;
}

.agentkit-chat-empty-copy h1 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.agent-kit-chat-footer-stack {
  /* Matches the transcript text lane (the lane minus its 1rem padding). */
  inline-size: min(
    100%,
    calc(var(--agent-kit-conversation-max-width, 47rem) - 2rem)
  );
  margin-inline: auto;
  pointer-events: auto;
}

.agent-kit-chat-footer-stack > .agentkit-composer-stack {
  inline-size: 100%;
}

.agent-kit-chat-guided-question {
  max-block-size: min(32rem, 58dvh);
  overflow: auto;
  margin-block-end: 0.5rem;
  border: 1px solid var(--agentkit-border);
  border-radius: var(--agentkit-radius);
  background: var(--agentkit-surface);
  box-shadow: var(--agentkit-elevation);
}

.chat-sidebar-history .an-chat-history__list {
  padding-top: 0;
}

.chat-sidebar-history .an-chat-history__section-label {
  padding: 8px
    calc(var(--chat-sidebar-content-inset) + var(--chat-sidebar-row-padding))
    5px;
  color: hsl(var(--sidebar-foreground));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.chat-sidebar-history.an-chat-history--rail .an-chat-history-row {
  margin-inline: var(--chat-sidebar-content-inset);
  border-radius: calc(var(--radius) + 2px);
}

.chat-sidebar-history.an-chat-history--rail .an-chat-history__skeleton-row {
  min-height: 32px;
  margin-inline: var(--chat-sidebar-content-inset);
  padding-inline: var(--chat-sidebar-row-padding);
}

.chat-sidebar-history.an-chat-history--rail .an-chat-history-row__button {
  min-height: 32px;
  padding-block: 6px;
  padding-inline: var(--chat-sidebar-row-padding);
  color: hsl(var(--sidebar-foreground));
}

/* The ⋯ trigger sits 3px in from the row edge and is 24px wide, so it
   reaches 15px into the title line past the row padding. */
.chat-sidebar-history.an-chat-history--rail {
  --an-chat-history-menu-clearance: calc(
    1.6875rem - var(--chat-sidebar-row-padding)
  );
}

/* Pinned rows hide their trigger until hover here, so they fade only then. */
.chat-sidebar-history.an-chat-history--rail
  .an-chat-history-row--pinned:not(
    :hover,
    :focus-within,
    .an-chat-history-row--menu-open
  )
  .an-chat-history-row__topline {
  mask-image: none;
}

.chat-sidebar-history .an-chat-history-row__title {
  flex: 1 1 auto;
  color: hsl(var(--sidebar-accent-foreground));
  font-size: 13px;
  font-weight: 400;
  text-overflow: clip;
}

.chat-sidebar-thread-title-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.chat-sidebar-thread-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.chat-sidebar-thread-running {
  color: hsl(var(--sidebar-foreground) / 0.72);
}

.chat-sidebar-thread-title[data-overflow="true"] {
  mask-image: linear-gradient(
    to right,
    hsl(var(--foreground)) 0,
    hsl(var(--foreground)) calc(100% - var(--chat-sidebar-title-fade)),
    hsl(var(--foreground) / 0) 100%
  );
}

.chat-sidebar-thread-title__content {
  display: block;
  width: max-content;
  transform: translateX(0);
}

.an-chat-history-row:hover
  .chat-sidebar-thread-title[data-overflow="true"]
  .chat-sidebar-thread-title__content {
  animation: chat-sidebar-title-reveal
    var(--chat-sidebar-title-duration, 1800ms) ease-in-out 350ms;
}

.chat-sidebar-history.an-chat-history--rail
  .an-chat-history-row__menu-trigger--pinned {
  pointer-events: none;
  opacity: 0;
}

.chat-sidebar-history.an-chat-history--rail
  .an-chat-history-row:hover
  .an-chat-history-row__menu-trigger--pinned,
.chat-sidebar-history.an-chat-history--rail
  .an-chat-history-row:focus-within
  .an-chat-history-row__menu-trigger--pinned,
.chat-sidebar-history.an-chat-history--rail
  .an-chat-history-row__menu-trigger--pinned[aria-expanded="true"] {
  pointer-events: auto;
  opacity: 1;
}

@keyframes chat-sidebar-title-reveal {
  to {
    transform: translateX(calc(-1 * var(--chat-sidebar-title-shift, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .an-chat-history-row:hover .chat-sidebar-thread-title__content {
    animation: none;
  }
}

.chat-sidebar-history.an-chat-history--rail
  .an-chat-history-row--active
  .an-chat-history-row__button {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

.dark {
  --background: 0 0% 13%;
  --foreground: 0 0% 90%;
  --card: 0 0% 16.47%;
  --card-foreground: 0 0% 90%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 90%;
  --primary: 0 0% 75%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 90%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 90%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 60%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 60%;
  --sidebar-primary: 0 0% 75%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 60%;
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-family: "Inter Variable", "Inter", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.22);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.34);
}