/* Polished report modal styles (light + dark) */
/* Apply to both .report-modal (new) and legacy .post-style-modal */
.report-modal, .post-style-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.45);
	z-index: 1200;
	padding: 24px;
}
.report-modal[aria-hidden="true"], .post-style-modal[aria-hidden="true"]{ display:none; }

.report-modal .post-modal-content, .post-style-modal .post-modal-content{
	/* Default palette (leaning dark to match screenshots). Override these variables if you want a light theme */
	--rm-bg: #0b0f14; /* modal background */
	--rm-foreground: #e6eef8; /* primary text */
	--rm-muted: #9aa6b2; /* muted text */
	--rm-input-bg: #0a0909; /* dark navy input/textarea */
	--rm-border: rgba(255,255,255,0.06);
	--rm-primary-start: #ff2828; /* primary gradient start */
	--rm-primary-end: #ff2828; /* primary gradient end */
	--rm-primary-glow: rgba(47,140,255,0.35);
	--rm-cancel-bg: rgba(255,255,255,0.03); /* subtle dark cancel bg */
	--rm-cancel-border: rgba(255,255,255,0.06);

	width: 100%;
	max-width: 560px;
	background: var(--rm-bg);
	color: var(--rm-foreground);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(2,6,23,0.4);
	overflow: hidden;
}

.report-modal .post-modal-header, .post-style-modal .post-modal-header{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.06);
}

.report-modal h2, .post-style-modal h2{ font-size:1rem; margin:0; font-weight:600 }
.report-modal .post-close, .post-style-modal .post-close{ background:transparent; border:0; color:inherit; padding:6px; cursor:pointer }

.report-modal .post-modal-form, .post-style-modal .post-modal-form{ padding:16px; display:flex; flex-direction:column; gap:12px }
.report-modal .post-user, .post-style-modal .post-user{ margin-bottom:4px; display:flex; gap:12px; align-items:center }
.report-modal .post-avatar img, .post-style-modal .post-avatar img{ width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid rgba(0,0,0,0.06) }
.report-modal .post-user-name, .post-style-modal .post-user-name{ font-weight:600 }
.report-modal .post-user-handle, .post-style-modal .post-user-handle{ color:#6b7280; font-size:0.875rem }

.report-modal input[type="text"], .post-style-modal input[type="text"],
.report-modal select, .post-style-modal select,
.report-modal textarea, .post-style-modal textarea{
	width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px; border:1px solid var(--rm-border); background: var(--rm-input-bg); color:var(--rm-foreground)
}
.report-modal textarea, .post-style-modal textarea{ min-height:96px; resize:vertical }

.report-modal .post-toolbar, .post-style-modal .post-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.report-modal .post-actions, .post-style-modal .post-actions{ display:flex; gap:8px }
.report-modal .btn, .post-style-modal .btn{ padding:8px 12px; border-radius:8px; border:0; cursor:pointer }
.report-modal .btn-primary, .post-style-modal .btn-primary{
	background: linear-gradient(180deg, var(--rm-primary-start), var(--rm-primary-end));
	color: #fff;
	/* removed colored outer glow; keep a subtle neutral elevation */
	box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 -2px 6px rgba(0,0,0,0.12);
	border: none;
}
.report-modal .btn-primary:active, .post-style-modal .btn-primary:active{ transform: translateY(1px); }
.report-modal .btn-cancel, .post-style-modal .btn-cancel{
	background: var(--rm-cancel-bg);
	border:1px solid var(--rm-cancel-border);
	color: var(--rm-foreground);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.report-modal .post-counter, .post-style-modal .post-counter{ color:#6b7280; font-size:0.875rem }

.report-modal .user-suggestions, .post-style-modal .user-suggestions{
	max-height:220px;
	overflow:auto;
	border-radius:8px;
	margin-top:6px;
	border:1px solid var(--rm-border);
	background: var(--rm-input-bg);
	color: var(--rm-foreground);
	padding:6px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.45);
	z-index: 1300;
}
.user-suggestions .user-suggestion-item{ padding:8px 10px; cursor:pointer; border-radius:6px; display:flex; gap:8px; align-items:center; color:var(--rm-foreground) }
.user-suggestions .user-suggestion-item:hover, .user-suggestions .user-suggestion-item.active{ background: rgba(255,255,255,0.02) }
.user-suggestions .suggestion-name{ display:flex; gap:8px; align-items:center }
.user-suggestions .suggestion-username{ color: var(--rm-muted); font-size:0.85rem; margin-left:6px }

/* Input placeholder and focus states */
.report-user-picker input::placeholder, .report-user-picker textarea::placeholder{ color: var(--rm-muted); opacity:0.9 }
.report-user-picker input:focus, .report-user-picker textarea:focus,
.report-modal input[type="text"]:focus, .report-modal textarea:focus,
.post-style-modal input[type="text"]:focus, .post-style-modal textarea:focus{
	outline: none;
	box-shadow: 0 6px 18px rgba(47,140,255,0.06), 0 0 0 3px rgba(47,140,255,0.03);
	border-color: rgba(47,140,255,0.18);
}
.report-modal .report-feedback, .post-style-modal .report-feedback{ margin-top:6px; font-size:0.9rem; color: #065f46 }

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
	/* dark mode uses the same variables already set above; keep compatibility */
	.report-modal .post-modal-content, .post-style-modal .post-modal-content{ background: var(--rm-bg); color: var(--rm-foreground) }
	.report-modal input[type="text"], .post-style-modal input[type="text"],
	.report-modal select, .post-style-modal select,
	.report-modal textarea, .post-style-modal textarea{ background: var(--rm-input-bg); border:1px solid var(--rm-border); color: var(--rm-foreground) }
	.report-modal .post-user-handle, .post-style-modal .post-user-handle{ color: var(--rm-muted) }
	.report-modal .post-counter, .post-style-modal .post-counter{ color: var(--rm-muted) }
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}