/* ═══ New post window, clean (compose-v2.js) ═══════════════════════════
   Dark glass like the rest of the site, writing straight on the window,
   the five tools in one row, background colours behind one button, and a
   Post button that lights up only when there is something to post. */

/* the window */
html:not([data-theme="light"]) #cpOverlay .cp-modal { background: linear-gradient(180deg, #221a1d 0%, #1a1416 100%); border: 1px solid rgba(255,255,255,0.1); color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
#cpOverlay .cp-modal { border-radius: 22px; overflow: hidden; }
html:not([data-theme="light"]) #cpOverlay .cp-header { border-bottom: 1px solid rgba(255,255,255,0.08); background: transparent; }
html:not([data-theme="light"]) #cpOverlay .cp-title { color: #fff; }
html:not([data-theme="light"]) #cpOverlay .cp-close { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
html:not([data-theme="light"]) #cpOverlay .cp-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Post: bright only when there is something to post */
#cpOverlay .cp-submit { transition: opacity .2s, filter .2s, box-shadow .2s; }
#cpOverlay .cp-submit.is-empty { opacity: 0.45; filter: saturate(0.6); box-shadow: none !important; }

/* who you are and who sees it */
html:not([data-theme="light"]) #cpOverlay .cp-author-name { color: #fff; }
#cpOverlay .cp-author-av { box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }
#cpOverlay .cpx-audience { -webkit-appearance: none; appearance: none; height: 28px; padding: 0 28px 0 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 650; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
html:not([data-theme="light"]) #cpOverlay .cpx-audience { background-color: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.88); }
#cpOverlay .cpx-audience:hover { border-color: rgba(255,92,122,0.6); }
html:not([data-theme="light"]) #cpOverlay .cpx-audience option { background: #1e1418; color: #fff; }

/* write straight on the window: a bold title line, then the text */
#cpOverlay .cp-write-zone { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0; padding: 0; margin-top: 4px; }
#cpOverlay .cp-subject { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; }
#cpOverlay .cp-caption { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 6px 0 !important; min-height: 130px; font-size: 1rem !important; line-height: 1.6 !important; }
#cpOverlay .cp-subject:focus, #cpOverlay .cp-caption:focus { outline: none; }
html:not([data-theme="light"]) #cpOverlay .cp-subject, html:not([data-theme="light"]) #cpOverlay .cp-caption { color: #fff !important; }
html:not([data-theme="light"]) #cpOverlay .cp-subject::placeholder, html:not([data-theme="light"]) #cpOverlay .cp-caption::placeholder { color: rgba(255,255,255,0.4); }
html:not([data-theme="light"]) #cpOverlay .cp-subject { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
[data-theme="light"] #cpOverlay .cp-subject { border-bottom: 1px solid rgba(0,0,0,0.08) !important; }

/* the tools: one row of quiet chips, then Background and the counter */
#cpOverlay .cp-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 12px; margin-top: 8px; }
#cpOverlay .cp-actions::-webkit-scrollbar { display: none; }
html:not([data-theme="light"]) #cpOverlay .cp-actions { border-top: 1px solid rgba(255,255,255,0.08); }
#cpOverlay .cp-actions .cp-photo-btn, #cpOverlay .cp-bg-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; font-size: 0.84rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
html:not([data-theme="light"]) #cpOverlay .cp-actions .cp-photo-btn, html:not([data-theme="light"]) #cpOverlay .cp-bg-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
html:not([data-theme="light"]) #cpOverlay .cp-actions .cp-photo-btn:hover, html:not([data-theme="light"]) #cpOverlay .cp-bg-btn:hover { background: rgba(255,255,255,0.11); color: #fff; }
#cpOverlay .cp-actions .cp-photo-btn.active, #cpOverlay .cp-bg-btn[aria-expanded="true"] { border-color: rgba(255,92,122,0.6) !important; color: #ff7a92 !important; }
#cpOverlay .cp-bg-btn { border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #333; }
#cpOverlay .cp-bg-dot { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#ff6b35, #1a73e8, #2e7d32, #7b1fa2, #c8102e, #ff6b35); }
#cpOverlay .cp-char-ring { flex: none; margin-left: auto; }

/* background colours open from their button, on their own row */
#cpOverlay .cp-colors { display: none !important; }
#cpOverlay .cp-modal.cp-colors-open .cp-colors { display: flex !important; flex: 1 1 100%; order: 99; gap: 10px; padding: 10px 2px 2px; }
#cpOverlay .cp-modal.cp-colors-open .cp-actions { flex-wrap: wrap; overflow: visible; }
#cpOverlay .cp-color-swatch { flex: none; width: 30px !important; height: 30px !important; min-width: 30px; border-radius: 50% !important; padding: 0; cursor: pointer; }
html:not([data-theme="light"]) #cpOverlay .cp-color-swatch:first-child { background: #2a2023 !important; border: 1.5px solid rgba(255,255,255,0.3) !important; }
#cpOverlay .cp-color-swatch.selected { box-shadow: 0 0 0 2px #1a1416, 0 0 0 4px #fff; }
[data-theme="light"] #cpOverlay .cp-color-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c8102e; }

/* a coloured background: keep the words readable */
#cpOverlay .cp-body[style*="gradient"] .cp-subject, #cpOverlay .cp-body[style*="gradient"] .cp-caption,
#cpOverlay .cp-body[style*="gradient"] .cp-author-name { color: #fff !important; }
#cpOverlay .cp-body[style*="gradient"] .cp-subject::placeholder, #cpOverlay .cp-body[style*="gradient"] .cp-caption::placeholder { color: rgba(255,255,255,0.7); }

/* phones: a bottom sheet with room to write; the tools scroll sideways */
@media (max-width: 560px) {
  #cpOverlay .cp-modal { border-radius: 22px 22px 0 0; max-height: 92vh; }
  #cpOverlay .cp-caption { min-height: 160px; }
  #cpOverlay .cp-actions .cp-photo-btn, #cpOverlay .cp-bg-btn { height: 38px; }
}

/* the body is dark too (a chosen background colour still wins: it is set inline) */
html:not([data-theme="light"]) #cpOverlay .cp-body { background: transparent; }