/* src/style/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
*:not(dialog) {
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
#root,
#__next {
  isolation: isolate;
}

/* src/style/index.css */
html {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  width: 100%;
  height: 100dvh;
}
:root {
  --background: #ffffff;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #18181b;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --primary-hover: #27272a;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --secondary-hover: #e4e4e7;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --input-disabled: rgb(244 244 245 / 50%);
  --ring: #18181b;
  --ring-shadow: rgb(24 24 27 / 12%);
  --destructive: #dc2626;
  --destructive-muted: rgb(220 38 38 / 10%);
  --destructive-hover: rgb(220 38 38 / 20%);
  --destructive-ring: rgb(220 38 38 / 40%);
  --destructive-shadow: rgb(220 38 38 / 20%);
  --surface-gradient: linear-gradient( rgb(255 255 255 / 0), var(--background) 28px );
  --topbar-bg: rgb(255 255 255 / 84%);
  --message-user-bg: #18181b;
  --message-user-fg: #fafafa;
  --message-agent-bg: #ffffff;
  --message-agent-border: #e4e4e7;
  --message-agent-shadow: 0 1px 2px rgb(0 0 0 / 6%);
  --prompt-bg: #212121;
  --prompt-border: #333333;
  --prompt-focus-border: #3c3c3c;
  --prompt-fg: #d4d4d4;
  --prompt-muted: #747474;
  --prompt-control-border: #343434;
  --prompt-control-fg: #bdbdbd;
  --prompt-control-hover-bg: #2d2d2d;
  --prompt-control-hover-fg: #e4e4e7;
  --prompt-badge-bg: #10233d;
  --prompt-badge-fg: #4da3ff;
  --prompt-ring: rgb(255 255 255 / 7%);
  --prompt-send-bg: #333333;
  --prompt-send-fg: #777777;
  --prompt-send-ready-bg: #f4f4f5;
  --prompt-send-ready-fg: #18181b;
  --prompt-shadow: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --foreground: #d4d4d4;
    --card: #212121;
    --card-foreground: #d4d4d4;
    --primary: #f4f4f5;
    --primary-foreground: #18181b;
    --primary-hover: #e4e4e7;
    --secondary: #212121;
    --secondary-foreground: #d4d4d4;
    --secondary-hover: #2d2d2d;
    --muted: #212121;
    --muted-foreground: #bdbdbd;
    --accent: #2d2d2d;
    --accent-foreground: #e4e4e7;
    --border: #333333;
    --input: #333333;
    --input-disabled: rgb(51 51 51 / 55%);
    --ring: #e4e4e7;
    --ring-shadow: rgb(255 255 255 / 7%);
    --destructive: #f87171;
    --destructive-muted: rgb(248 113 113 / 14%);
    --destructive-hover: rgb(248 113 113 / 22%);
    --destructive-ring: rgb(248 113 113 / 40%);
    --destructive-shadow: rgb(248 113 113 / 24%);
    --surface-gradient: linear-gradient( rgb(18 18 18 / 0), var(--background) 28px );
    --topbar-bg: rgb(18 18 18 / 84%);
    --message-user-bg: #2f2f2f;
    --message-user-fg: #f4f4f5;
    --message-agent-bg: #212121;
    --message-agent-border: #333333;
    --message-agent-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    color-scheme: dark;
  }
}
body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
nav {
  height: 100%;
}
main {
  height: 100%;
  width: 100%;
  max-height: 100%;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
header {
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 8px;
}
.content {
  flex: 1;
  width: 100%;
  overflow: auto;
  padding: 24px 16px;
  display: flex;
  justify-content: center;
}
.content > .wrapper {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  width: 100%;
}
@media print {
  nav,
  header,
  app-prompt-input,
  app-approval-bar,
  app-quiz-bar,
  .error {
    display: none !important;
  }
  body {
    display: block;
    height: auto;
  }
  main {
    display: block;
    height: auto;
    max-height: none;
  }
  .content {
    overflow: visible;
    padding: 0;
  }
  .content > .wrapper {
    max-width: 100%;
    gap: 16px;
  }
}