/* File: assets/composer.css */

/* Shared bottom bar + popup */
.composer-bar{
  border-top:1px solid #e6e6e6;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
}
.composer-left,.composer-right{display:flex;align-items:center;gap:10px}
.icon-btn{
  border:0;background:transparent;cursor:pointer;height:34px;padding:0 10px;border-radius:10px;font-size:14px;
}
.icon-btn:hover{background:#f3f3f3}
.info-btn{border:1px solid #e6e6e6;width:34px;padding:0;border-radius:999px;background:#fff}
.post-btn{border:0;background:#e7efff;color:#1a55ff;font-weight:700;padding:0 14px;height:34px;border-radius:999px}
.post-btn:hover{background:#dbe8ff}

.format-panel{
  position:absolute;left:12px;bottom:56px;background:#fff;border:1px solid #e6e6e6;border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);padding:10px;display:none;gap:8px;flex-wrap:wrap;max-width:calc(100% - 24px);
}
.format-panel.open{display:flex}
.fbtn{border:1px solid #e6e6e6;background:#fff;border-radius:10px;height:34px;padding:0 10px;cursor:pointer;font-size:14px}
.fbtn:hover{background:#f6f6f6}
.sep{width:1px;height:22px;background:#e6e6e6;display:inline-block;margin:0 6px}

/* ===== Answer modal ===== */
.answer-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}
.answer-modal-overlay.open{display:flex}
.answer-modal{width:min(980px,100%);height:min(620px,92vh);background:#fff;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;position:relative}
.answer-modal-close{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:999px;border:0;background:#f3f3f3;cursor:pointer;font-size:22px;line-height:1}
.answer-modal-header{padding:22px 22px 10px 22px;display:flex;gap:14px}
.answer-avatar{width:40px;height:40px;border-radius:50%;background:#111;opacity:.9}
.answer-header-main{flex:1;min-width:0}
.answer-user-row{display:flex;align-items:center;gap:12px}
.answer-user-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.answer-credential{position:relative}
.answer-credential-btn{border:1px solid #e6e6e6;background:#fff;padding:7px 10px;border-radius:999px;cursor:pointer;font-size:13px}
.answer-credential-menu{position:absolute;top:40px;left:0;background:#fff;border:1px solid #e6e6e6;border-radius:12px;min-width:220px;box-shadow:0 18px 50px rgba(0,0,0,.12);overflow:hidden}
.answer-credential-item{width:100%;text-align:left;padding:10px 12px;border:0;background:#fff;cursor:pointer}
.answer-credential-item:hover{background:#f6f6f6}
.answer-question-title{margin-top:10px;font-size:24px;font-weight:800;line-height:1.25}
.answer-editor-wrap{flex:1;padding:0 22px}
.answer-editor{height:100%;outline:none;border:0;padding:10px 2px;overflow:auto;font-size:16px;line-height:1.6}
.answer-editor:empty:before{content:attr(data-placeholder);color:#888}
.answer-editor img{max-width:100%;border-radius:12px;border:1px solid #eee}

/* ===== Ask modal ===== */
.ask-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}
.ask-modal-overlay.open{display:flex}
.ask-modal{width:min(980px,100%);height:min(620px,92vh);background:#fff;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;position:relative}
.ask-modal-close{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:999px;border:0;background:#f3f3f3;cursor:pointer;font-size:22px;line-height:1}
.ask-modal-header{padding:22px 22px 10px 22px;display:flex;gap:14px}
.ask-avatar{width:40px;height:40px;border-radius:50%;background:#111;opacity:.9}
.ask-header-main{flex:1;min-width:0}
.ask-user-row{display:flex;align-items:center;gap:12px}
.ask-user-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-credential{position:relative}
.ask-credential-btn{border:1px solid #e6e6e6;background:#fff;padding:7px 10px;border-radius:999px;cursor:pointer;font-size:13px}
.ask-credential-menu{position:absolute;top:40px;left:0;background:#fff;border:1px solid #e6e6e6;border-radius:12px;min-width:220px;box-shadow:0 18px 50px rgba(0,0,0,.12);overflow:hidden}
.ask-credential-item{width:100%;text-align:left;padding:10px 12px;border:0;background:#fff;cursor:pointer}
.ask-credential-item:hover{background:#f6f6f6}
.ask-title-wrap{margin-top:10px}
.ask-title-input{width:100%;border:0;outline:none;font-size:24px;font-weight:800;padding:0}
.ask-title-input::placeholder{color:#666}
.ask-editor-wrap{flex:1;padding:0 22px}
.ask-editor{height:100%;outline:none;border:0;padding:10px 2px;overflow:auto;font-size:16px;line-height:1.6}
.ask-editor:empty:before{content:attr(data-placeholder);color:#888}
.ask-editor img{max-width:100%;border-radius:12px;border:1px solid #eee}

/*
.q-body / .answer-body rich content styling
(so you can remove inline styles from question.php)
*/
.q-body p, .answer-body p { margin: 0 0 10px; }
.q-body ul, .q-body ol, .answer-body ul, .answer-body ol { padding-left: 20px; }
.q-body blockquote, .answer-body blockquote {
  border-left: 4px solid #e6e6e6;
  margin: 8px 0;
  padding: 6px 10px;
  color: #333;
}
.q-body code, .answer-body code { background: #f5f5f5; padding: 2px 6px; border-radius: 8px; }
.q-body pre, .answer-body pre { background: #f5f5f5; padding: 10px 12px; border-radius: 12px; overflow: auto; }
.q-body img, .answer-body img { max-width: 100%; border-radius: 12px; border: 1px solid #eee; }


/* === Image sizing + removable image UI (Ask + Answer editors) === */
.answer-editor img,
.ask-editor img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid #eee;
  max-height:48vh;       /* prevents covering toolbar */
  object-fit:contain;
}

/* wrap inserted images so we can show an X */
.editor-img-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
  margin:10px 0;
}

.editor-img-wrap img{
  max-width:100%;
  height:auto;
  display:block;
}

/* X delete button */
.editor-img-remove{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.65);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:28px;
}
.editor-img-remove:hover{
  background:rgba(0,0,0,.85);
}

/* Keep bottom bar always visible; editor scrolls instead */
.answer-modal,
.ask-modal{
  display:flex;
  flex-direction:column;
}

/* The header stays fixed size */
.answer-modal-header,
.ask-modal-header{
  flex: 0 0 auto;
}

/* Make ONLY the editor area scroll */
.answer-editor-wrap,
.ask-editor-wrap{
  flex: 1 1 auto;
  min-height: 0;          /* IMPORTANT for scrolling in flexbox */
  overflow: auto;         /* scroll here */
}

/* Optional: nicer scroll + spacing */
.answer-editor,
.ask-editor{
  padding-bottom: 24px;   /* breathing room above bottom bar */
}

/* Bottom bar must stay visible */
.composer-bar{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 5;
}