/* A compact feed entry opens the same composer used by the publishing flow. */
.compose:has(.compose-launcher) { padding:14px !important; }
.compose-launcher { display:flex; align-items:center; gap:12px; min-width:0; }
.compose-launch-avatar { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; border-radius:50%; overflow:hidden; background:#e9e5f1; color:#665d78; }
.compose-launch-avatar img { width:100%; height:100%; object-fit:cover; }
.compose-launch-avatar svg { width:26px; height:26px; }
#composeLaunchPrompt { min-width:0; flex:1; height:48px; border:0; border-radius:999px; padding:0 18px; background:var(--bg3); color:var(--text3); font-size:17px; font-weight:400; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
body.light #composeLaunchPrompt { background:#f0f2f5; color:#65676b; }
#composeLaunchPrompt:hover { filter:brightness(.97); }
.compose-launch-actions { display:flex; gap:2px; flex:none; }
.compose-launch-actions button { width:40px; height:44px; display:flex; justify-content:center; align-items:center; padding:7px; border:0; border-radius:10px; background:transparent; cursor:pointer; }
.compose-launch-actions button:hover { background:var(--bg3); }
.compose-launch-actions svg { width:27px; height:27px; }
.compose-launch-video { color:#f34269; }
.compose-launch-photo { color:#36ad65; }
.compose-launch-book { color:var(--accent-primary); }
.compose-launcher button:focus-visible, #postComposerDialog button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
/* Mobile Create Hub, adapted to a centered desktop dialog. */
body.post-composer-open { overflow:hidden; }
#postComposerDialog { position:fixed; inset:0; margin:auto; padding:0; width:min(620px,calc(100vw - 40px)); height:min(700px,calc(100dvh - 64px)); max-width:none; max-height:none; border:1px solid var(--border); border-radius:24px; background:var(--bg2); color:var(--text); box-shadow:0 24px 100px #17112245; overflow:hidden; }
body.light #postComposerDialog { background:var(--bg2); }
#postComposerDialog[open] { display:flex; flex-direction:column; }
#postComposerDialog:not([open]) { display:none; }
#postComposerDialog::backdrop { background:rgba(20,18,29,.44); backdrop-filter:blur(3px); }
.post-composer-heading { flex:none; position:relative; display:grid; grid-template-columns:88px 1fr 88px; align-items:center; padding:12px 20px; text-align:center; }
.post-composer-heading h2 { margin:0; font-size:18px; font-weight:750; line-height:1.3; }
.post-composer-heading p { margin:2px 0 0; font-size:13px; color:var(--text2); }
#composeClose { display:grid; place-items:center; width:38px; height:38px; padding:7px; border:0; border-radius:50%; background:transparent; color:var(--text); cursor:pointer; }
#composeClose:hover { background:var(--bg3); }
#composeClose svg { width:25px; height:25px; }
#postComposerDialog #btnPostSubmit { justify-self:end; display:inline-flex; align-items:center; justify-content:center; width:80px; min-height:40px; margin:0; padding:9px 12px; border:0; border-radius:999px; background:var(--accent-primary); color:white; font-size:14px; font-weight:700; }
#postComposerDialog #btnPostSubmit:disabled { opacity:1; background:color-mix(in srgb,var(--accent-primary) 45%,var(--bg2)); cursor:default; }
.post-composer-content { flex:1; min-height:0; padding:10px 22px 20px; overflow:auto; overscroll-behavior:contain; }
#postComposerDialog .compose-top { display:flex; align-items:flex-start; gap:12px; }
.compose-identity { flex:none; }
.compose-identity .avatar { width:44px; height:44px; min-width:44px; box-shadow:none; border:1px solid var(--border); border-radius:50%; overflow:hidden; }
.compose-identity .avatar img { width:100%; height:100%; object-fit:cover; }
#composeAuthorName { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#postComposerDialog .compose-text-wrap { flex:1; min-width:0; }
#postComposerDialog #composeText { display:block; width:100%; min-height:240px; max-height:none; margin:0; padding:8px 0; resize:none; border:0; border-radius:0; background:transparent; color:var(--text); box-shadow:none; font-size:19px; line-height:1.5; overflow:hidden; }
#postComposerDialog #composeText::placeholder { color:#9ca3b4; opacity:1; }
.compose-settings { position:relative; flex:none; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:10px 22px 12px; }
.compose-setting-controls { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:6px; }
.compose-setting { position:relative; }
.compose-setting summary { display:flex; align-items:center; gap:6px; min-height:30px; padding:5px 10px; border:1px solid var(--border); border-radius:999px; background:var(--bg2); color:var(--text); font-size:12px; font-weight:600; list-style:none; cursor:pointer; }
.compose-setting summary::-webkit-details-marker { display:none; }
.compose-setting summary svg { display:block; flex:none; width:16px; height:16px; color:var(--accent-primary); }
.compose-setting summary .compose-chevron { width:14px; height:14px; margin-left:2px; color:var(--text2); }
.compose-setting summary > span { line-height:18px; }
.compose-setting-popover { position:absolute; bottom:calc(100% + 10px); left:0; z-index:4; width:230px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--bg2); box-shadow:0 10px 30px #17112220; }
.compose-setting-popover strong { display:flex; justify-content:space-between; font-size:13px; }
.compose-setting-popover strong span { color:var(--accent-primary); }
.compose-setting-popover p { margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--text3); }
.compose-count-ring { --compose-progress:0%; flex:none; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:conic-gradient(var(--accent-primary) var(--compose-progress),#e8e5ed 0); }
.compose-count-ring::before { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--bg2); }
body.light .compose-count-ring::before { background:var(--bg2); }
#postComposerDialog .char-count { position:relative; inset:auto; z-index:1; margin:0; padding:0; background:none; color:var(--text); font-size:12px; font-weight:700; line-height:15px; }
.compose-count-limit { position:relative; font-size:9px; line-height:12px; color:var(--text2); }
#postComposerDialog .char-count.over { color:#d74e76; }
.compose-schedule-status { flex:none; display:flex; flex-wrap:wrap; gap:5px; padding:0 18px; }
#composeScheduleChip { margin-bottom:8px; }
#postComposerDialog .compose-footer { flex:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin:0; padding:10px 10px 12px; border-top:1px solid var(--border); background:var(--bg2); }
#postComposerDialog .compose-modes > button, #postComposerDialog #composeModePhoto, #postComposerDialog #btnOpenSchedule { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-width:0; height:62px; margin:0; padding:6px 2px; border:0; border-radius:12px; background:transparent; color:var(--text); font-size:11px; line-height:15px; font-weight:600; cursor:pointer; }
#postComposerDialog .compose-modes svg { width:24px; height:24px; flex:none; }
#postComposerDialog .compose-modes > button:hover, #postComposerDialog #composeModePhoto:hover, #postComposerDialog #btnOpenSchedule:hover { background:var(--bg3); }
#postComposerDialog #composeModePost[aria-current] { background:var(--accent-soft); color:var(--accent-primary); }
.compose-text-icon { font-size:25px; font-weight:500; line-height:25px; letter-spacing:-1.5px; }
#composeModePhoto svg { color:#36b56a; }
#composeModeVideo svg { color:#ee5268; }
#composeModeBook svg { color:#4a8fdf; }
#composeModeAudio svg { color:#eda82c; }
#composeModePoll svg { color:#e7afd3; }
#postComposerDialog #composeModePoll { opacity:.6; cursor:default; }
#btnOpenSchedule svg { color:var(--accent-primary); }
.compose-soon { position:absolute; top:-3px; padding:1px 5px; border-radius:7px; background:var(--accent-primary); color:#fff; font-size:8px; line-height:11px; letter-spacing:.3px; }
#postComposerDialog .compose-btn-label { display:block; position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; }
#postComposerDialog #composeImageInput { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
#postComposerDialog #composeScheduleWrap { position:static !important; display:block !important; }
#postComposerDialog #composeSchedulePopover { top:auto !important; bottom:90px; left:auto !important; right:16px; min-width:min(280px,calc(100vw - 40px)) !important; }
#postComposerDialog .image-preview { position:relative; margin:8px 0 0 56px; max-height:300px; overflow:hidden; border-radius:12px; }
#postComposerDialog .image-preview img { display:block; width:100%; max-height:300px; object-fit:contain; }
@media(max-width:600px) {
  .compose:has(.compose-launcher) { padding:12px !important; }
  .compose-launcher { gap:8px; flex-wrap:wrap; }
  .compose-launch-avatar { width:38px; height:38px; flex-basis:38px; }
  #composeLaunchPrompt { font-size:15px; height:44px; padding-inline:12px; }
  .compose-launch-actions { width:100%; justify-content:space-evenly; border-top:1px solid var(--border); padding-top:6px; }
  .compose-launch-actions button { flex:1; }
  #postComposerDialog { width:100%; height:100dvh; border:0; border-radius:0; }
  .post-composer-heading { grid-template-columns:72px 1fr 72px; padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px; }
  .post-composer-heading h2 { font-size:17px; }
  .post-composer-heading p { font-size:12px; }
  #postComposerDialog #btnPostSubmit { width:64px; min-height:34px; padding:6px 10px; font-size:13px; }
  .post-composer-content { padding:4px 15px 16px; }
  #postComposerDialog .compose-top { gap:10px; }
  .compose-identity .avatar { width:38px; height:38px; min-width:38px; }
  #postComposerDialog #composeText { min-height:150px; padding-top:6px; font-size:16px; }
  .compose-settings { padding:8px 14px 8px; }
  .compose-setting-controls { gap:6px; }
  .compose-setting summary { font-size:11px; min-height:27px; padding:4px 8px; gap:4px; }
  .compose-count-ring { width:42px; height:42px; }
  #postComposerDialog .compose-footer { gap:1px; padding:7px 7px calc(8px + env(safe-area-inset-bottom,0px)); }
  #postComposerDialog .compose-modes > button, #postComposerDialog #composeModePhoto, #postComposerDialog #btnOpenSchedule { height:52px; font-size:10px; line-height:13px; }
  #postComposerDialog .compose-modes svg { width:22px; height:22px; }
  .compose-setting-popover { width:195px; }
  .compose-setting:nth-child(2) .compose-setting-popover { left:auto; right:0; }
}

.compose-video-attachment {position:relative;margin:10px 0 0 56px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2);}
.compose-video-attachment video {display:block;width:100%;max-height:260px;background:#14121d;object-fit:contain;}
.compose-video-attachment #removeComposeVideo {position:absolute;right:8px;top:8px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:#fff;color:#171322;font-size:22px;cursor:pointer;}
.compose-video-file {padding:8px 12px 0;font-size:12px;font-weight:600;overflow-wrap:anywhere;}
.compose-video-attachment p {margin:4px 12px 10px;color:var(--text3);font-size:12px;}
#postComposerDialog:has(.compose-video-attachment) #composeText {min-height:90px;}
#postComposerDialog .upload-progress {margin:12px 0 0 56px;}
.compose-video-error {font-size:12px;line-height:1.5;color:#bd3c59;margin:10px 0 0 56px;}
.compose-video-complete {display:flex;align-items:center;gap:10px;margin:8px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);font-size:13px;}
.compose-video-complete[hidden] {display:none;}
.compose-video-complete span {flex:1;}
.compose-video-complete button {border:0;background:transparent;color:var(--purple);font:inherit;cursor:pointer;}
@media(max-width:600px) {.compose-video-attachment,#postComposerDialog .upload-progress,.compose-video-error {margin-left:0;}}

.compose-schedule-hint { margin:0 0 10px; font-size:12px; line-height:1.4; color:var(--text3); }
.compose-schedule-error { margin:0 0 10px; font-size:12px; line-height:1.4; color:#b33b56; }
.compose-schedule-error[hidden] { display:none; }
#postComposerDialog #composeScheduleChip { max-width:100%; }
#postComposerDialog #composeScheduleLabel { overflow-wrap:anywhere; }
@media(max-width:600px) {
  #postComposerDialog #composeSchedulePopover { left:12px !important; right:12px; min-width:0 !important; }
  #postComposerDialog :is(#composeScheduleDate,#composeScheduleTime) { min-width:0; min-height:40px; font-size:16px !important; }
}
@media(max-width:600px) {
  .post-composer-heading { grid-template-columns:80px 1fr 80px; }
  #postComposerDialog #btnPostSubmit { width:76px; padding-inline:8px; white-space:nowrap; }
}
@media(max-width:420px) {
  #postComposerDialog .compose-schedule-fields { display:grid !important; grid-template-columns:minmax(0,1fr); gap:8px !important; }
  #postComposerDialog :is(#composeScheduleDate,#composeScheduleTime) { width:100%; }
}

/* Keep the three posting choices together, with the same comfortable target. */
#postComposerDialog .compose-settings{align-items:center;gap:10px}
#postComposerDialog .compose-setting-controls{align-items:center;min-width:0;flex:1;padding-bottom:0;gap:8px}
#postComposerDialog .compose-setting-controls>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;max-width:100%;padding:8px 12px;margin:0;border:1px solid var(--border2);border-radius:999px;background:var(--bg3);color:var(--text);font:600 12px/1.4 var(--font);cursor:pointer}
#postComposerDialog .compose-setting-controls>button:hover{background:var(--bg4)}
#postComposerDialog .compose-setting-controls>button[aria-pressed=true]{border-color:var(--accent-primary);background:var(--accent-soft);color:var(--purple-lt)}
body.light #postComposerDialog .compose-setting-controls>button[aria-pressed=true]{color:var(--accent-strong)}
#postComposerDialog .compose-setting-controls>button:disabled{opacity:.55;cursor:default}
#postComposerDialog .compose-audience:not(:has(#composeAudienceHint:not(:empty))){display:none}
#postComposerDialog .compose-audience{margin-top:12px}
#postComposerDialog .compose-ask-recovery{margin-top:14px;padding:14px;border:1px solid var(--accent-border);border-radius:12px;background:var(--bg3);color:var(--text);font-size:14px;line-height:1.5}
#postComposerDialog .compose-ask-recovery[hidden]{display:none}
#postComposerDialog .compose-ask-recovery button{min-height:40px;padding:8px 12px;margin:8px 8px 0 0;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);color:var(--text);font:inherit;cursor:pointer}
#postComposerDialog .compose-ask-recovery [role=status]{color:var(--text2)}
#postComposerDialog .compose-modes>button[aria-current]{background:var(--accent-soft);color:var(--accent-primary)}
@media(max-width:600px){#postComposerDialog .compose-setting-controls{gap:6px}#postComposerDialog .compose-setting-controls>button{padding:8px 10px;min-height:40px;font-size:12px}}

/* Composer choices own their layout; they do not depend on Audio dialog styles. */
.compose-choice-dialog{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;padding:20px;border:1px solid var(--border2);border-radius:18px;background:var(--bg2);color:var(--text);box-shadow:0 18px 70px #0004}
.compose-choice-dialog::backdrop{background:#17132288;backdrop-filter:blur(3px)}
.compose-choice-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.compose-choice-header h2{margin:0;font-size:19px;line-height:1.35;min-width:0}
.compose-choice-close{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--bg3);color:var(--text2);font:26px/1 var(--font);cursor:pointer}
.compose-choice-description{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--text2)}
.compose-choice-options{display:grid;gap:8px}
.compose-choice-option{display:flex;flex-direction:column;gap:3px;min-height:56px;width:100%;padding:10px 12px;text-align:left;border:1px solid var(--border2);border-radius:12px;background:var(--bg2);color:var(--text);font:inherit;cursor:pointer}
.compose-choice-option strong{font-size:14px;line-height:1.4}
.compose-choice-option span{font-size:12px;line-height:1.5;color:var(--text2)}
.compose-choice-option:hover{background:var(--bg3)}
.compose-choice-option[aria-pressed=true]{border-color:var(--accent-primary);background:var(--accent-soft)}
.compose-choice-option[aria-pressed=true] strong::after{content:' ✓';color:var(--accent-primary)}
.compose-choice-option.is-destructive strong{color:var(--error,#d94465)}
.compose-choice-dialog button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px}
@media(max-width:420px){.compose-choice-dialog{padding:16px}.compose-choice-header h2{font-size:18px}}

/* Scheduling stays scrollable when the viewport cannot fit the whole form. */
#postComposerDialog #composeSchedulePopover{box-sizing:border-box;max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px;}
@media(pointer:coarse){
 #postComposerDialog :is(#btnPostSubmit,.compose-setting-controls>button,#composeScheduleSet,#composeScheduleCancel,#composeScheduleClear,#btnScheduledPosts){min-height:44px;min-width:44px;}
 #postComposerDialog :is(#composeScheduleDate,#composeScheduleTime){min-height:44px;font-size:16px!important;}
}
@media(max-height:480px){
 #postComposerDialog{height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:72px;}
 #postComposerDialog .post-composer-heading{position:sticky;top:0;z-index:6;padding-block:8px;background:var(--bg2);}
 #postComposerDialog .post-composer-content{flex:none;overflow:visible;padding-bottom:12px;}
 #postComposerDialog #composeText{min-height:80px;}
 #postComposerDialog .compose-settings{padding-block:6px;}
 #postComposerDialog #composeSchedulePopover{position:fixed!important;top:8px!important;bottom:auto;left:12px!important;right:12px;width:min(420px,calc(100vw - 24px));margin-inline:auto;min-width:0!important;max-height:calc(100dvh - 16px);}
}