/* comment-context.css - styles for bottom-anchored comments panel */
#commentPreview{font-size:13px;height:48px}
#commentPreview img{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* overlay behind the panel; clicking closes panel */
.comments-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:1100;transition:opacity 220ms ease;opacity:0}
.comments-overlay.hidden{display:none;opacity:0}
.comments-overlay.visible{display:block;opacity:1}

/* panel anchored to bottom, starting just above the navbar */
.comments-panel{position:fixed;left:0;right:0;top:64px;bottom:75px;z-index:1200;display:flex;justify-content:center;pointer-events:none}
.comments-panel.closed{transform:translateY(150vh) !important;visibility:hidden;pointer-events:none;transition:transform 260ms cubic-bezier(.2,.9,.3,1), visibility 260ms;}
.comments-panel.open{transform:translateY(0%) !important;visibility:visible;pointer-events:auto;transition:transform 260ms cubic-bezier(.2,.9,.3,1), visibility 0s;}
.comments-panel-inner{width:100%;max-width:1000px;background:var(--panel,#0f0f0f);border-radius:16px;box-shadow:0 -8px 30px rgba(0,0,0,0.6);display:flex;flex-direction:column;height:100%;max-height:100% !important;overflow:hidden;pointer-events:auto}

@media (max-width:768px){
  .comments-panel{top:56px;bottom:64px}
}
.comments-panel-header{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:space-between}
.comments-list-area{padding:8px 12px;overflow:auto;flex:1}
.comments-panel-footer{padding:8px 10px;border-top:1px solid rgba(255,255,255,0.04);background:transparent}

.comment-input-wrapper{display:flex;align-items:center;gap:6px;width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);padding:6px 8px;border-radius:999px;box-sizing:border-box}
.comment-action-icon{background:transparent;border:0;color:#bdbdbd;font-size:20px;padding:6px;cursor:pointer;flex:0 0 auto;z-index:2}
.comment-textarea-wrap{flex:1 1 auto;min-width:0}
.comment-textarea{width:100%;resize:none;border-radius:0;padding:8px 10px;border:0;background:transparent;color:#fff;line-height:1.3;min-height:44px;max-height:180px;overflow:auto;outline:none}
/* ensure the send button shows properly in the input row */
.comment-input-wrapper .btn.primary{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:6px}
.comments-list-area .comment{display:flex;margin-bottom:12px}
.comments-list-area .comment img{width:40px;height:40px;border-radius:50%;margin-left:8px}
.comments-list-area .comment-content{flex:1;background:transparent;padding:6px;border-radius:8px}
.comments-list-area .comment-user{font-weight:800;color:#1da1f2}
.comments-list-area .comment-text{color:#d0d0d0}
.comments-list-area .comment-time{color:#999;font-size:12px;margin-top:6px}

/* small screens: panel should occupy most of height */
@media (max-width:520px){
	.comments-panel-inner{max-height:100% !important}
	.comment-action-icon{font-size:22px;padding:10px}
	.mini-waveform{height:32px;width:100px}
	.comment-textarea{min-height:48px}
	/* ensure input row uses nearly full screen width and icons stay inline */
		.comment-input-wrapper{padding:6px 10px;width:100%}
}

/* lift panel when input focused on small screens to avoid keyboard overlap */
@media (max-width:820px){
  .comments-panel.focused, .comments-panel .focused { transform: none !important; }
}
		/* ensure full width and touch area for send button */
		.comment-input-wrapper{width:100%;box-sizing:border-box}
		.comment-input-wrapper .btn.primary{min-width:56px;height:44px;padding:8px 12px;border-radius:20px}

/* mini waveform shown during recording (small bar graph) */
.mini-waveform{display:inline-block;height:36px;width:120px;position:relative;margin-right:8px;vertical-align:middle}
.mini-waveform .bar{position:absolute;bottom:0;width:2px;background:#ffffff;border-radius:2px;opacity:0.95}
.mini-waveform.small { height:28px; width:100px }
.comment-action-icon.recording{color:#ff4b4b}

/* recording timer (shown above mini waveform) */
.rec-timer{position:absolute;left:50%;transform:translateX(-50%);top:-22px;color:#ffb3b3;font-size:12px;background:rgba(0,0,0,0.4);padding:2px 6px;border-radius:6px;border:1px solid rgba(255,255,255,0.04)}
.comment-action-icon.send-mode{color:var(--accent,#1da1f2);transform:translateY(0);}
.comment-action-icon.send-mode i{transform:rotate(-20deg)}

/* make bars slightly translucent and aligned like the main waveform */
.mini-waveform .bar{background:linear-gradient(180deg,#ffffff,#e0e0e0)}

/* temporary debug flash for clicked controls */
.dbg-flash{box-shadow:0 0 0 3px rgba(255,255,0,0.12) inset, 0 6px 18px rgba(255,255,0,0.06);transform:scale(0.98);transition:transform 180ms ease, box-shadow 220ms ease}

/* attach menu styles */
.attach-menu{position:absolute;background:var(--panel,#111);border:1px solid rgba(255,255,255,0.06);padding:6px;border-radius:8px;display:block;box-shadow:0 8px 24px rgba(0,0,0,0.6);z-index:1300}
.attach-menu button{display:block;background:transparent;border:0;color:#fff;padding:8px 10px;text-align:right;width:220px;cursor:pointer;font-weight:700}
.attach-menu button.muted{color:#bbb;font-weight:600}
.attach-menu button:hover{background:rgba(255,255,255,0.02)}

/* debug toast */
.dbg-toast{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;background:rgba(0,0,0,0.7);color:#fff;padding:8px 12px;border-radius:12px;font-weight:700;z-index:1400;opacity:0;transition:opacity 180ms ease}
.dbg-toast.visible{opacity:1}