.comment-box { margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.08); }.comment-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#f1e5d5; font-size:11px; }.comment-heading i { margin-right:6px; color:var(--gold); }.comment-heading-tools { display:flex; align-items:center; gap:7px; }.comment-heading b { display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; color:#211e18; background:var(--gold); font-size:10px; }.comment-list { max-height:180px; overflow:auto; }.comment-item { display:flex; gap:8px; padding:4px 0; border-top:1px solid rgba(255,255,255,.05); }.comment-avatar { display:grid; flex:0 0 25px; place-items:center; width:25px; height:25px; color:#211e18; background:var(--gold); font-size:10px; }.comment-item strong { color:#e9dece; font-size:11px; font-weight:500; }.comment-item small { margin-left:7px; color:#817a70; font-size:9px; }.comment-item p { margin:2px 0 0; color:#aaa196; font-size:11px; line-height:1.4; word-break:break-word; }.comment-text-row { margin-top:1px; }.comment-text-row p { display:inline; margin:0 !important; }.comment-text-row .reply-comment { display:inline-block; margin-left:7px; }.empty-comments { margin:0 0 10px; color:#847d73; font-size:10px; line-height:1.5; }.comment-form { display:grid; grid-template-columns:110px 1fr auto; gap:6px; margin-top:8px; }.comment-form input,.comment-form textarea { min-width:0; border:1px solid rgba(225,189,120,.28); border-radius:3px; padding:8px 9px; color:#e5dacc; background:rgba(11,13,18,.48); font:11px 'Segoe UI',sans-serif; outline:none; }.comment-form textarea { min-height:34px; resize:vertical; }.comment-form input:focus,.comment-form textarea:focus { border-color:var(--gold); }.comment-form button { align-self:stretch; border:0; padding:0 11px; color:#211e18; background:var(--gold); cursor:pointer; font-size:10px; font-weight:600; }.comment-form button:hover { background:#f1d89e; }.comment-form button i { margin-right:4px; }
@media (max-width:700px) { .comment-form { grid-template-columns:1fr 1fr; }.comment-input-row { grid-column:span 2; grid-row:1; }.comment-form button { min-height:32px; grid-column:span 2; grid-row:2; padding:8px; } }
.comment-form .comment-input-row,.reply-form .comment-input-row { grid-column:1; grid-row:1; position:relative; min-width:0; display:block; }
.comment-form .comment-input-row textarea,.reply-form .comment-input-row textarea { box-sizing:border-box; width:100%; padding-right:34px; }
.comment-form > button[type="submit"],.reply-form > button[type="submit"] { grid-column:2; grid-row:1; align-self:stretch; }
.comment-form .emoji-toggle,.reply-form .emoji-toggle { position:absolute; z-index:2; right:5px; bottom:5px; display:grid; place-items:center; width:24px; height:24px; min-height:0; border:0; padding:0; color:var(--gold); background:rgba(11,13,18,.55); border-radius:4px; cursor:pointer; font-size:15px; line-height:1; }
.comment-form .emoji-toggle:hover,.reply-form .emoji-toggle:hover { color:#fff8ea; background:rgba(225,189,120,.18); }
.emoji-picker { position:fixed; z-index:300; max-width:calc(100vw - 24px); overflow-y:auto; border:1px solid rgba(225,189,120,.35); border-radius:8px; padding:10px; background:rgba(18,20,25,.98); box-shadow:0 18px 50px rgba(0,0,0,.55); }
.emoji-category { margin-bottom:8px; }
.emoji-category:last-child { margin-bottom:0; }
.emoji-category-name { display:block; margin-bottom:4px; color:#8b8377; font-size:9px; letter-spacing:1px; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.emoji-option { display:grid; place-items:center; min-width:0; border:0; padding:4px 0; color:inherit; background:transparent; border-radius:4px; cursor:pointer; font-size:18px; line-height:1.3; }
.emoji-option:hover { background:rgba(225,189,120,.2); }
@media (max-width:700px) { .emoji-picker { max-height:40vh; } }