/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Kill document-level rubber-band overscroll so the fixed app shell (navbar +
 * editor/chat page) can't be dragged, revealing/hiding browser chrome. Inner
 * scrollers keep their own overscroll-contain. */
html,
body {
  overscroll-behavior: none;
}

/* App shell fills the viewport as a flex column: the navbar sizes to its
 * content (it wraps to two rows on narrow screens) and the full-height pages
 * (.editor-page / .drive-page) take exactly the leftover space via flex-1 — no
 * hardcoded navbar height, so the body never overflows. Short pages still
 * grow/scroll normally because this is min-height, not a fixed height. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Full-height "app shell" pages (editor, chat, drive) opt in via
 * content_for(:full_height). Cap the body to the viewport so it can't grow with
 * content — the inner .editor-page / .drive-page scrollers handle overflow, and
 * the document itself never scrolls. */
body.app-fixed {
  height: 100dvh;
  overflow: hidden;
}

.app-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Rendered markdown in assistant chat messages. Minimal: inherits the chat's
 * font size and black text; only adds block spacing and code/link treatment. */
.chat-markdown > :first-child {
  margin-top: 0;
}

.chat-markdown > :last-child {
  margin-bottom: 0;
}

.chat-markdown p,
.chat-markdown ul,
.chat-markdown ol,
.chat-markdown pre,
.chat-markdown blockquote,
.chat-markdown table {
  margin: 0.5rem 0;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4 {
  margin: 0.75rem 0 0.25rem;
  font-weight: 600;
}

.chat-markdown ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.chat-markdown ol {
  list-style: decimal;
  padding-left: 1.25rem;
}

.chat-markdown li {
  margin: 0.125rem 0;
}

.chat-markdown a {
  text-decoration: underline;
}

.chat-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: #f5f5f5;
  padding: 0.1em 0.3em;
  border-radius: 0.25rem;
}

.chat-markdown pre {
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
}

.chat-markdown pre code {
  background: transparent;
  padding: 0;
}

.chat-markdown blockquote {
  border-left: 2px solid #e5e5e5;
  padding-left: 0.75rem;
  color: #525252;
}

.chat-markdown table {
  border-collapse: collapse;
}

.chat-markdown th,
.chat-markdown td {
  border: 1px solid #e5e5e5;
  padding: 0.25rem 0.5rem;
  text-align: left;
}

/* Fill the leftover viewport height below the navbar. The body is a flex
 * column, so flex-1 adapts to whatever height the navbar wraps to. */
.editor-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* CodeMirror injects its own theme; height is the host page's job. */
.cm-editor {
  height: 100%;
}

.cm-scroller {
  overflow: auto;
}

.drive-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.drive-empty {
  padding: 1.25rem;
}

.file-workspace__layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
}

/* Tree: folders show a ">" chevron that rotates to "v" when open; the browser's
   default <details> marker is hidden so we control the glyph ourselves. */
.file-workspace__folder > summary {
  list-style: none;
}

.file-workspace__folder > summary::-webkit-details-marker {
  display: none;
}

.file-workspace__chevron {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform 0.1s ease;
}

.file-workspace__folder[open] > summary .file-workspace__chevron {
  transform: rotate(90deg);
}

.file-workspace--immersive {
  height: 100%;
  overflow: hidden;
}

.file-workspace--immersive .file-workspace__layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
}

.file-workspace--immersive .file-workspace__sidebar,
.file-workspace--immersive .file-workspace__pane {
  min-height: 0;
  overflow: auto;
}

.file-workspace--immersive .file-workspace__sidebar {
  padding: 1rem 1.5rem;
}

.file-workspace--immersive .file-workspace__pane {
  overflow: hidden;
}

.drive-editor,
.drive-editor__form {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
}

.drive-editor[hidden] {
  display: none;
}

.file-workspace__folder-view {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
}

.file-workspace__folder-view[hidden] {
  display: none;
}

.file-workspace__folder-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e5e5;
}

.file-workspace__folder-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-workspace__folder-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
}

.file-workspace__folder-body {
  flex: 1 1 auto;
  padding: 1.5rem;
  overflow: auto;
}

.drive-editor__body {
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}

.drive-editor__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e5e5;
}

.drive-editor__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-editor__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
}

.drive-editor__back {
  display: none;
}

@media (max-width: 700px) {
  .file-workspace--immersive .file-workspace__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-workspace--immersive .file-workspace__sidebar,
  .file-workspace--immersive .file-workspace__pane {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
  }

  .file-workspace--immersive .file-workspace__pane {
    display: none;
  }

  .file-workspace--immersive.file-workspace--has-selection .file-workspace__sidebar {
    display: none;
  }

  .file-workspace--immersive.file-workspace--has-selection .file-workspace__pane {
    display: block;
  }

  .drive-editor__back {
    display: inline;
  }

  .drive-editor__header {
    gap: 0.75rem;
  }

  .drive-editor__actions {
    gap: 0.5rem;
  }
}