/* CloudSocial composer modal styles — Phase 5a + 5e (Tiptap). */

#cs-composer-modal .modal-header,
#cs-composer-modal .modal-footer {
  border-color: rgba(0, 0, 0, 0.05);
}

/* ─── Tiptap article composer (mountComposer) ───────────────────────── */

.cs-composer-editor {
  min-height: 14rem;
  padding: 0.25rem 0;
}
.cs-composer-editor .ProseMirror {
  outline: none;
  min-height: 14rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.cs-composer-editor .ProseMirror h1.cs-title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem 0;
  border: 0;
}
.cs-composer-editor .ProseMirror p.is-editor-empty:first-child::before,
.cs-composer-editor .ProseMirror h1.is-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--bs-secondary-color, #adb5bd);
  pointer-events: none;
  height: 0;
  float: left;
}
.cs-composer-editor .ProseMirror :is(h2, h3) { margin-top: 1.25rem; }
.cs-composer-editor .ProseMirror img { max-width: 100%; border-radius: 0.375rem; }
.cs-composer-editor .ProseMirror blockquote {
  border-left: 3px solid var(--bs-border-color, #dee2e6);
  padding-left: 0.875rem;
  color: var(--bs-secondary-color);
}
.cs-composer-editor .ProseMirror pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
}

/* ─── Bubble menu (selection toolbar) ───────────────────────────────── */

#cs-bubble-menu {
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  background: #1f2937;
  border-radius: 0.375rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
#cs-bubble-menu button {
  background: transparent;
  border: 0;
  color: #f4f5f7;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
}
#cs-bubble-menu button:hover { background: rgba(255, 255, 255, 0.1); }
#cs-bubble-menu button.cs-bm-active { background: rgba(255, 255, 255, 0.18); }

/* ─── Tippy.js minimal positioning (loaded inline since the bundled
       side-effect CSS import got tree-shaken). v6 .tippy-box defaults. ──── */

.tippy-box {
  position: relative;
  background-color: transparent;
  color: inherit;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
  outline: 0;
  transition-property: transform, visibility, opacity;
}
.tippy-content { position: relative; padding: 0; z-index: 1; }
[data-tippy-root] { max-width: calc(100vw - 10px); }

/* ─── Slash command popover ─────────────────────────────────────────── */

.tippy-box[data-theme~='cs-slash'] {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.cs-slash-menu {
  background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.25rem;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
}
.cs-slash-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.cs-slash-item.cs-slash-active { background: var(--bs-primary-bg-subtle, #e7f1ff); }
.cs-slash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--bs-tertiary-bg, #f5f5f5);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.cs-slash-text { display: flex; flex-direction: column; gap: 0; }
.cs-slash-title { font-weight: 500; font-size: 0.9375rem; }
.cs-slash-desc { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); }
.cs-slash-empty { padding: 0.5rem; color: var(--bs-secondary-color); font-size: 0.875rem; }

/* ─── Body-only editor (mountBodyEditor) ────────────────────────────── */

.cs-editor-wrap {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  background: var(--bs-body-bg, #fff);
}
.cs-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 0.375rem 0.375rem 0 0;
}
.cs-tb-btn {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--bs-body-color);
}
.cs-tb-btn:hover { background: rgba(0, 0, 0, 0.06); }
.cs-tb-btn.cs-tb-active { background: var(--bs-primary-bg-subtle, #e7f1ff); color: var(--bs-primary); }
.cs-tb-sep {
  width: 1px;
  background: var(--bs-border-color, #dee2e6);
  margin: 0.25rem 0.25rem;
}
.cs-editor-body { padding: 0.625rem 0.875rem; min-height: 6rem; }
.cs-editor-body .ProseMirror { outline: none; min-height: 5rem; }
.cs-editor-body .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--bs-secondary-color, #adb5bd);
  pointer-events: none;
  height: 0;
  float: left;
}
.cs-editor-body .ProseMirror img { max-width: 100%; border-radius: 0.375rem; }

#cs-composer-title {
  font-size: 1.5rem;
  line-height: 1.3;
  background: transparent;
}
#cs-composer-title:focus {
  box-shadow: none;
}

#cs-composer-body-input {
  min-height: 12rem;
}

/* Fullscreen modifier — toggled by the [⤢] button. */
#cs-composer-dialog.cs-composer-fullscreen {
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
#cs-composer-dialog.cs-composer-fullscreen .modal-content {
  height: 100vh;
  border-radius: 0;
}
#cs-composer-dialog.cs-composer-fullscreen .modal-body {
  max-height: none;
  overflow-y: auto;
}

/* Phase 7a — More options expand-reveal. Borrowed shell layout from
   Bootstrap's collapse but using hidden + JS toggle for simplicity. */
.cs-composer-more #cs-composer-more-toggle {
  color: var(--bs-secondary-color, #6c757d);
}
.cs-composer-more #cs-composer-more-toggle:hover {
  color: var(--bs-body-color);
}
.cs-composer-more #cs-composer-more-chevron {
  transition: transform 120ms ease;
}

/* Bottom toolbar — match Circle's subtle grey icons. */
#cs-composer-modal .modal-footer .bx {
  font-size: 1.25rem;
}
#cs-composer-modal .modal-footer .btn-link {
  color: var(--bs-secondary);
}
#cs-composer-modal .modal-footer .btn-link:hover:not(:disabled) {
  color: var(--bs-primary);
}

/* Mobile: full-width overlay-style modal */
@media (max-width: 575.98px) {
  #cs-composer-dialog {
    max-width: 100vw;
    margin: 0;
    height: 100vh;
  }
  #cs-composer-dialog .modal-content {
    height: 100vh;
    border-radius: 0;
  }
}

/* Phase 5d.5 — quiz take-overlay goes full-screen on mobile (≤767px). */
@media (max-width: 767.98px) {
  .quiz-overlay-host {
    position: fixed;
    inset: 0;
    background: var(--bs-body-bg);
    z-index: 1080;
    overflow-y: auto;
    padding: 1rem 1rem 6rem 1rem;
  }
  .quiz-overlay-host #quiz-submit {
    position: sticky;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }
}