/* Google Docs-style layout for the TipTap playground editor */

.gdocs-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4rem);
  overflow: hidden;
}

.gdocs-layout-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  background: var(--color-base-100);
}

/* TipTap root: fill the scroll area */
.gdocs-layout [data-controller="tiptap--editor"] {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding: 0.5rem 1.5rem 0 !important;
}

/* Toolbar: card header, rounded top corners */
.gdocs-layout [data-controller="tiptap--editor"] > .sticky {
  background: var(--color-base-100) !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 94%) !important;
  box-shadow: 0 2px 12px color-mix(in oklch, var(--color-base-content), transparent 94%) !important;
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  flex-shrink: 0 !important;
  z-index: 40 !important;
  justify-content: center !important;
}

/* Editor wrapper: card body, base-200 background */
.gdocs-layout [data-controller="tiptap--editor"] > .tiptap-content {
  background: var(--color-base-200) !important;
  padding: 1rem !important;
  flex: 1 !important;
  width: 100% !important;
  border-radius: 0 0 0.75rem 0.75rem !important;
  box-shadow: 0 2px 12px color-mix(in oklch, var(--color-base-content), transparent 94%) !important;
}

/* Prose container: fills card body */
.gdocs-layout [data-controller="tiptap--editor"] > .tiptap-content > .prose {
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* Editor target: white textarea with padding + margin + max-w */
.gdocs-layout .tiptap-content > .prose > [class*="prose"] {
  background: var(--color-base-100) !important;
  border: 1px solid color-mix(in oklch, var(--color-base-content), transparent 94%) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  padding: 1.5rem 2.5rem !important;
  margin: 0 auto !important;
  max-width: 48rem !important;
  width: 100% !important;
  min-height: 80vh !important;
  cursor: text !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ProseMirror: compact, only as tall as content */
.gdocs-layout .ProseMirror {
  min-height: auto !important;
  flex: 0 0 auto !important;
}