/* Subtle fade/slide for cycling messages */
.cycle-fade {
  transition: opacity 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.cycle-fade-out {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.cycle-fade-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Fix mobile menu buttons cut off on the right */
@media (max-width: 600px) {
  .user-menu, .user-menu * {
    box-sizing: border-box;
  }
  .user-menu {
    width: 100vw;
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
  }
  .user-menu button, .user-menu .menu-btn {
    width: 100%;
    max-width: 100%;
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
}
/* Fix for composer prompt height to prevent layout shift */
#composePrompt, #composePromptGuest {
  min-height: 2.8em;
  max-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  align-items: center;
}
/* Composer prompt fade animation */
.fadein {
  animation: fadein 0.4s;
  opacity: 1;
  transition: opacity 0.25s;
}
.fadeout {
  animation: fadeout 0.25s;
  opacity: 0;
  transition: opacity 0.25s;
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* =========================================
   base.css
   - Tokens, reset, typography
   - Utilities, buttons, fields
   ========================================= */

:root {
  color-scheme: dark;

  /* Palette */
  --bg: #0b0d10;
  --bg2: #101318;
  --bg3: #0f1217;
  --fg: #e7e7e7;
  --muted: #a7a7a7;
  --line: #2b2f36;
  --line2: #363b44;
  --acc: #8ab4ff;
  --acc-weak: color-mix(in oklab, var(--acc) 35%, white 0%);
  --like:#ff6b6b;
  --ok: #7aa5ff;
  --warn:#f7bf4f;
  --danger:#ff7b7b;

  /* Rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --radius-1: 6px;
  --radius-2: 10px;

  /* Shadows (subtle) */
  --shadow: 0 0 0 1px var(--line);
}



/* Reset + base text */
html, body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Prevent horizontal overflow for all elements */
*, *::before, *::after {
  box-sizing: border-box;
  max-width: 100vw;
  overflow-x: hidden;
}
/* Prevent global overflow-x: hidden on interactive elements (fixes unwanted scrollbars) */
button, input, select, textarea, .btn, .field {
  overflow-x: visible !important;
}

@media (max-width: 600px) {
  html, body {
    font-size: 15px;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utilities */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.thin { font-weight: 300; }
.right { float: right; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.hstack { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: center; }
.grow { flex: 1; }
.sep { border-top: 1px dashed var(--line); margin: var(--space-2) 0; }
.perma { word-break: break-all; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.kbd {
  border: 1px solid var(--line); padding: 0 6px; border-radius: 4px;
  font-size: 11px; background: #0e1116; color: var(--muted);
}
.toolbar { gap: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  cursor: pointer;
  background: transparent; color: var(--fg);
  border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 4px;
  font: inherit;
  transition: border-color .15s ease, transform .02s ease, background-color .15s ease;
  user-select: none;
  vertical-align: middle;
}
button, .button, [class*="button"], [class*="btn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.btn:hover { border-color: var(--line2); }
.btn-ghost { border-style: dashed; }
.btn.icon { padding: 4px 8px; }
.btn[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); }

/* Fields */
.field {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  background: #0d1014; color: var(--fg);
  border: 1px solid var(--line); border-radius: 4px;
  font: inherit; outline: none;
  transition: border-color .15s ease, background-color .2s ease;
}
.field:focus { border-color: var(--line2); }
input[type="search"]::-webkit-search-cancel-button { filter: invert(70%); }