@import './base.css' layer(base);
/* @import './syntax-theme.css' layer(theme); */
@import './theme.css' layer(theme);
@import './transitions.css';
@import './chat.css';
@import './navbar.css';
@import './loader.css';


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  width: 100dvw;
  height: calc(100dvh - env(safe-area-inset-bottom));
  overflow-x: hidden;
}

html,
body {
  font-family: 'Poppins', system-ui, sans-serif;
}

:root {
  --content-width: 880px;
}

body {
  margin: 0 auto;
  max-width: var(--content-width);
  display: flex;
  flex-direction: column;
}

main {
  height: 100%;
}

#root[data-hydration-error="true"]::before {
  content: '⛔';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

[data-rehype-pretty-code-figure] {
  button {
    background-color: transparent !important;
  }

  pre {
    padding-top: 0;
    padding-bottom: 0;
  }
}



.message-box {
  margin: var(--spacing-2) 0;
  font-weight: bold;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-2);
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  color: var(--fg-1);

  i.ti {
    scale: 1.5;
  }

  &[data-message-type="error"] {
    background-color: var(--red);
  }

  &[data-message-type="info"] {
    background-color: var(--blue);
  }

  &[data-message-type="warning"] {
    background-color: var(--yellow);
  }

  &[data-message-type="success"] {
    background-color: var(--green);
  }
}