@charset "utf-8";
/* CSS Document - Pepper 96.6 minisite (dark slate theme, matching the reference
   RadioJar widget look - not flat black, dark grays + amber accent) */
html, body {
	height: 100%;
}
body {margin: 0;
	padding: 0;
	background: #1e1f22;
	font: 14px 'Comfortaa', sans-serif;
	color: #FFFFFF;
	width: 100%;}

a {outline: none;}
p {
	margin:0;
}

/* Fluid height chain (was a fixed 600px, inherited from the sportfm template)
   so the widget always exactly fills whatever height the embedding iframe
   actually is (footer.php's #producer-on-air is 63vh desktop / 70vh mobile,
   with overflow-y:hidden - a fixed-pixel mismatch there would either clip
   content or force an unwanted inner scrollbar instead of fitting cleanly). */
#iframe,
#main
{
	width: 100%;
	height: 100%;
}
#left,
#right {
	height: 602px;
	float: left;
	position: relative;
	box-sizing: border-box;
}

#player {height: 130px; margin-bottom:30px; }
#player-only {
	height: 100%;
}
#messages {
	height: 100%;
	box-sizing: border-box;
	border:1px solid #3a3d42;
}
#shows,
.user-action-area{
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

/* messages - rounded "card" look, closer to RadioJar's widget */
#iframe,
#main,
#player-only,
#messages {
	border-radius: 12px;
}
#messages {
	background: #2b2d31;
	box-shadow: 0 2px 10px rgba(0,0,0,0.6);
	overflow: hidden; /* clip children to the rounded corners */
	display: flex;
	flex-direction: column;
}

/* Duplicate title - footer.php already shows "Στείλε μήνυμα στο studio"
   above the iframe, so hide the widget's own internal heading rather
   than showing the title twice. */
#messages h1 {
	display: none;
}

/* Name gate - blocks the chat entirely until a name is entered (mandatory,
   no skipping). Fills the whole panel while active; once a name is
   submitted it's hidden and #chat-body is revealed in its place. The name
   is remembered locally so returning visitors aren't asked again. */
#name-gate {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
}
#name-gate.hidden {
	display: none;
}
.name-gate-inner {
	width: 100%;
	max-width: 260px;
}
.name-gate-inner label {
	display: block;
	font-size: 14px;
	color: #e0e0e0;
	margin-bottom: 12px;
	line-height: 1.4;
}
.name-gate-inner input#sender-name {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #35373c;
	border: 1px solid #3a3d42;
	border-radius: 16px;
	color: #FFFFFF;
	font-family: 'Comfortaa', sans-serif;
	font-size: 13px;
	text-align: center;
	padding: 8px 14px;
	margin-bottom: 10px;
	outline: none;
	transition: border-color 0.15s ease;
}
.name-gate-inner input#sender-name::placeholder {
	color: #9e9e9e;
}
.name-gate-inner input#sender-name:focus {
	border-color: #f5a623;
}
.name-gate-inner input#name-gate-submit {
	background: #f5a623;
	border: none;
	border-radius: 16px;
	color: #1e1f22;
	font-family: 'Comfortaa', sans-serif;
	font-weight: bold;
	font-size: 13px;
	padding: 8px 20px;
	cursor: pointer;
}

/* Chat body (messages + input row) - hidden until the name gate is passed. */
#chat-body {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
#chat-body.open {
	display: flex;
}

/* Chat header bar - shows who you're chatting as, with a link back to the
   name gate for shared devices or switching identity. */
.chat-header-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid #3a3d42;
	font-size: 11px;
	color: #9e9e9e;
}
.chat-header-bar .chat-as strong {
	color: #FFFFFF;
}
.chat-header-bar a#change-name-link {
	color: #f5a623;
	text-decoration: none;
	white-space: nowrap;
}
.chat-header-bar a#change-name-link:hover {
	text-decoration: underline;
}

#message-list {
	margin: 0px;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	color: #FFFFFF;
	padding: 10px;
	box-sizing: border-box;
}
/* CSS-only welcome placeholder - disappears automatically once a real
   message (a <p>) is appended by Hermes, since :empty stops matching. */
#message-list:empty::before {
	content: "Καλωσόρισες στο Pepper 96.6 chat! Γράψε το μήνυμά σου στο studio.";
	display: block;
	color: #9e9e9e;
	font-size: 13px;
	line-height: 1.4;
	padding: 10px 6px;
}
#message-list p {
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 10px;
	margin-bottom: 6px;
	background: #35373c;
	border-radius: 10px;
	max-width: 90%;
}
#message-list span {
	font-weight: bold;
	color: #f5a623;
	margin-right: 4px;
}
/* Sender name, extracted from the "Name: text" pattern by JS and wrapped in
   this class - bold white to stand out from the amber timestamp and the
   regular message text. */
#message-list .msg-sender {
	font-weight: bold;
	color: #FFFFFF;
}
/* Dark scrollbar to match the theme instead of the default light OS one */
#message-list::-webkit-scrollbar {
	width: 8px;
}
#message-list::-webkit-scrollbar-track {
	background: #2b2d31;
}
#message-list::-webkit-scrollbar-thumb {
	background: #3a3d42;
	border-radius: 4px;
}

.user-action-area {
	position: relative;
	margin: 8px;
	border: 1px solid #3a3d42;
	border-radius: 24px;
	background: #3a3d42;
	overflow: hidden;
	display: flex;
	align-items: center;
	transition: border-color 0.15s ease;
}
/* Subtle focus cue instead of the browser's default black outline ring */
.user-action-area:focus-within {
	border-color: #f5a623;
}
/* Brief red flash when a send is blocked by the bot-deterrent checks
   (honeypot filled, sent too fast, or sent too soon after opening). */
.user-action-area.blocked-flash,
#chat-body.blocked-flash {
	border-color: #e05c4b;
}

/* Honeypot fields - present in the DOM for bots that auto-fill every input
   they find, but invisible/unreachable to real visitors (off-screen rather
   than display:none/visibility:hidden, which some bots specifically skip). */
.hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.user-action-area input#submit {
	position: static;
	flex-shrink: 0;
}
#messages textarea {
	color: #9e9e9e;
	font-family: 'Comfortaa', sans-serif;
	font-size: 14px;
	overflow: hidden;
	resize: none;
	flex: 1;
	width: auto;
	height: 44px;
	line-height: 44px;
	padding: 0 16px;
	background: transparent;
	border: none;
	outline: none;
}
/* Send button: small round icon (inline SVG paper-plane, no external
   asset dependency) instead of a background color block. Scoped to #submit
   specifically - #messages now also contains #sender-name and
   #name-gate-submit, which must not be forced into this fixed-size circle. */
#messages input#submit{
	background-color: #f5a623;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	color: transparent;
	font-size: 0;
	height: 36px;
	width: 36px;
	min-width: 36px;
	margin: 4px;
	border: none;
	outline: none;
	border-radius: 50%;
	cursor: pointer;
}
div.jp-error{ font-size: 0.8em; padding: 2px 0; }

#left {width: 400px;}
#right{width: 478px;}
#player,
#messages {width: 100%;}

@media screen and (min-width:899px){
	#left {width: 400px;}
	#right{width: 478px;margin-left:20px;}
}
@media screen and (min-width:599px) and (max-width:898px){
	#left {width: 50%;}
	#right{width: 50%;}
}

@media screen and (max-width:599px){
	#left {width: 100%;}
	#right{width: 100%;}
}

#player-only {width: 100%;}