/* One continuous writing canvas, with photographs placed inside the story. */
#composeModal .modal-sheet {
  width: min(920px, 100%);
  max-height: 96dvh;
}
#composeModal .blog-toolbar {
  position: sticky;
  top: -1px;
  z-index: 2;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
#composeModal .blog-toolbar .editor-photo-button {
  color: var(--accent);
  background: #f2f5ff;
  border-color: #dce5ff;
  font-weight: 700;
}
#composeModal .blog-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 380px;
  min-height: clamp(380px, 55svh, 640px);
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  background: #fff;
  cursor: text;
}
#composeModal .blog-editor:focus-within { border-color: #aabcf7; }
#composeModal .blog-paragraph { min-width: 0; }
#composeModal .blog-paragraph:last-child { flex: 1; display: flex; }
#composeModal .blog-paragraph textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  max-height: none;
  margin: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text);
  background: transparent;
  resize: none;
  overflow-y: hidden;
  overflow-wrap: anywhere;
}
#composeModal .blog-paragraph:last-child textarea { min-height: 140px; }
#composeModal .blog-paragraph:only-child textarea { min-height: 336px; min-height: clamp(336px, calc(55svh - 44px), 596px); }
#composeModal .blog-paragraph textarea:focus { outline: none; }
#composeModal .blog-paragraph textarea:focus-visible { outline: 2px solid #e2e9ff; outline-offset: 4px; }
#composeModal .blog-paragraph textarea::placeholder { color: #8c97a8; }
#composeModal .blog-image { margin: 14px 0 18px; min-width: 0; cursor: default; }
#composeModal .blog-image > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: contain;
  border-radius: 8px;
}
#composeModal .blog-image figcaption input {
  width: 100%;
  margin: 5px 0 0;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #667085;
  text-align: center;
  font-size: 16px;
}
#composeModal .blog-image-actions { display: flex; justify-content: flex-end; gap: 6px; }
#composeModal .blog-image-actions button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #667085;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
#composeModal .blog-image-actions button:disabled { opacity: .35; cursor: default; }
#composeModal .post-editor-preview { font-size: 16px; line-height: 1.9; }
@media (max-width: 600px) {
  #composeModal .modal-sheet {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }
  #composeModal .blog-editor {
    min-height: 320px;
    min-height: clamp(320px, 52svh, 560px);
    padding: 18px 12px;
  }
  #composeModal .blog-paragraph:only-child textarea {
    min-height: 284px;
    min-height: clamp(284px, calc(52svh - 36px), 524px);
  }
}
/* A stable writing surface: header and actions remain reachable while writing. */
body.writing-post{overflow:hidden}
#composeModal .modal-sheet{display:flex;flex-direction:column;overflow:hidden}
#composeModal .modal-head{flex-shrink:0;margin-bottom:12px}
#composeForm{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scroll-padding:12px 0 90px}
#composeModal [hidden]{display:none!important}
.draft-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:15px;padding:10px 12px;background:#f4f7ff;border-radius:10px}
.draft-tools p{font-size:12px;line-height:1.7;color:#60718a;margin:0}
.draft-tools button,.compose-footer #draftSaveBtn{flex-shrink:0;border:1px solid #d9e2f4;border-radius:8px;background:white;color:#2854d9;padding:9px 13px;min-height:42px;font-size:13px;font-weight:650;cursor:pointer}
.draft-tools .draft-warning{color:#9a3b22}
.draft-panel{padding:14px;border:1px solid #dce4f3;border-radius:12px;margin-bottom:18px;background:#fcfdff}
.draft-panel>p,.draft-panel #draftList>p{font-size:12px;line-height:1.7;color:#69778d;margin:0 0 10px}
.draft-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e9edf4}
.draft-resume{display:block;min-width:0;flex:1;border:0;background:none;text-align:left;padding:5px;cursor:pointer}
.draft-resume strong{display:block;font-size:14px;line-height:1.6;color:#263449;overflow-wrap:anywhere}
.draft-resume span{display:block;font-size:11px;line-height:1.6;color:#738196;margin-top:3px}
.draft-delete{border:0;border-radius:8px;background:#f3f5f9;color:#7a4f4f;padding:10px;min-height:42px;cursor:pointer;flex-shrink:0}
.compose-footer{position:sticky;bottom:-1px;display:flex;align-items:center;gap:8px;background:#fffffff5;backdrop-filter:blur(12px);padding:12px 0;border-top:1px solid #e6ebf3;z-index:3;margin-top:15px}
#composeMeter{font-size:11px;line-height:1.5;color:#758399;margin-right:auto}
#composeSubmit{width:auto;min-width:110px;margin:0}
.draft-retention{font-size:11px;line-height:1.8;color:#8290a4;margin:9px 0 0}
@media(max-width:600px){#composeModal .modal-sheet{height:100dvh;padding-bottom:max(12px,env(safe-area-inset-bottom))}#composeModal .modal-head{margin-bottom:10px}#composeForm{padding-right:0}.draft-tools{padding:9px 10px;gap:8px}.draft-tools p{font-size:11px}.compose-footer{gap:7px;padding-bottom:10px}#composeSubmit{min-width:95px;font-size:14px;padding:12px 16px}.compose-footer #draftSaveBtn{font-size:12px;padding:9px 11px}#composeMeter{font-size:10px}}