/* Comment System — localStorage version */

/* Tooltip on text selection */
.comment-tooltip{position:fixed;background:#65bf9e;color:#fff;padding:.4rem .7rem;border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.3);display:none;transition:opacity .15s;user-select:none}
.comment-tooltip:hover{background:#55a88a}
.comment-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#65bf9e}

/* Modal overlay */
.comment-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1001;padding:1rem}
.comment-modal.open{display:flex}
.comment-modal-content{background:#1e293b;border:1px solid #334155;border-radius:14px;max-width:420px;width:100%;padding:1.5rem;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.comment-modal h4{font-family:'Playfair Display','Fraunces',serif;font-size:1.05rem;margin-bottom:.4rem;color:#e2e8f0}
.comment-modal .highlight-preview{background:#1a3a2e;border:1px solid #2d6b55;border-radius:8px;padding:.5rem .8rem;font-size:.82rem;color:#94a3b8;margin-bottom:.8rem;font-style:italic;max-height:80px;overflow:auto}
.comment-modal textarea{width:100%;border:1.5px solid #334155;border-radius:8px;padding:.7rem;font-family:'DM Sans',sans-serif;font-size:.88rem;resize:vertical;min-height:90px;outline:none;transition:border-color .2s;background:#0f172a;color:#e2e8f0}
.comment-modal textarea:focus{border-color:#65bf9e}
.comment-modal-btns{display:flex;gap:.5rem;margin-top:.8rem;justify-content:flex-end}
.comment-modal-btns button{padding:.45rem .9rem;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s}
.comment-modal-btns .cancel{background:#334155;border:none;color:#94a3b8}
.comment-modal-btns .cancel:hover{background:#475569}
.comment-modal-btns .submit{background:#65bf9e;border:none;color:#fff}
.comment-modal-btns .submit:hover{background:#55a88a}

/* General comment section (bottom of page) */
.general-comment-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #334155}
.general-comment-section h4{font-family:'Playfair Display','Fraunces',serif;font-size:1rem;color:#e2e8f0;margin-bottom:.4rem}
.general-comment-section p{font-size:.8rem;color:#64748b;margin-bottom:.5rem}
.general-comment-section textarea{width:100%;border:1.5px solid #334155;border-radius:8px;padding:.7rem;font-family:'DM Sans',sans-serif;font-size:.86rem;resize:vertical;min-height:70px;outline:none;transition:border-color .2s;background:#0f172a;color:#e2e8f0}
.general-comment-section textarea:focus{border-color:#65bf9e}
.general-comment-section .comment-actions{display:flex;gap:.5rem;margin-top:.5rem;align-items:center}
.general-comment-section button{background:#65bf9e;color:#fff;border:none;border-radius:7px;padding:.45rem 1rem;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s}
.general-comment-section button:hover{background:#55a88a}
.general-comment-section button:disabled{background:#334155;color:#64748b;cursor:not-allowed}
.general-comment-section .success-msg{color:#65bf9e;font-size:.8rem;display:none}

/* Comment count badge */
.comment-count{font-size:.72rem;color:#64748b;margin-top:.3rem}

/* Hint bar */
.comment-hint{background:#1a2332;border:1px dashed #334155;border-radius:8px;padding:.5rem .8rem;margin-bottom:1rem;font-size:.76rem;color:#64748b;text-align:center}

/* Export floating button */
.comment-export-bar{position:fixed;bottom:16px;right:16px;display:flex;gap:8px;z-index:999}
.comment-export-bar button{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:.5rem .9rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:all .15s}
.comment-export-bar button:hover{border-color:#65bf9e;color:#65bf9e}
.comment-export-bar .count-badge{background:#65bf9e;color:#fff;font-size:.65rem;padding:0 5px;border-radius:10px;margin-left:4px}