/* --- Color Palette --- */
:root {
		--soft-pink: #f7f7fa; /* much more neutral, almost white */
		--card-bg: #fff; /* white card */
		--textbox-bg: #f3f4f8; /* very light gray-blue */
		--textbox-border: #e0e0e6; /* subtle border */
		--textbox-focus: #ffb84d; /* orangish yellow for focus */
		--button-bg: #ffb84d;
		--button-hover: #ff9900;
		--button-text: #fff;
		--header-bg: #f3f4f8;
		--header-text: #ff9900;
		--avatar-border: #e0e0e6;
		--example-bg: #f3f4f8;
		--example-text: #ff9900;
		--success: #2ecc71;
		--error: #e74c3c;
}

/* --- Top Bar (Header) --- */
.top-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background: transparent;
    color: var(--header-text);
    min-height:64px;
    padding:8px 12px;
    box-shadow: none;
    position:sticky;
    top:0;
    z-index:100;
}

/* Navigation wrapper for consistent width */
.nav-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    gap:24px;
}

.nav-wrap .left {
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

.nav-wrap .right {
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

.nav-center {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
}

/* Icon/button used in the header */
.icon-btn {
	background: none;
	border: none;
	color: var(--header-text);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px 8px;
	transition: background 0.15s;
	border-radius: 50%;
}
.icon-btn:active, .icon-btn:focus {
	/* neutral focus color instead of pink outline */
	background: rgba(0,0,0,0.04);
	outline: none;
}

.top-title {
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-align: center;
	flex: 1;
	color: var(--header-text);
}

/* Small polish for logo and responsive top bar */
.top-logo{
	/* larger visual logo but constrained to header height */
	max-height:64px;
	height: auto;
	width:auto;
	display:block;
	margin-right:12px;
	transition: transform 0.12s ease;
	/* prevent logo from pushing the header taller */
}
.top-logo:hover{ transform: translateY(-1px) scale(1.02); }
.top-logo--large { transform: scale(1.12); }
.top-bar a.top-title{ color:var(--header-text); text-decoration:none; display:block; font-weight:600; }

@media (max-width:600px){
	.top-logo{ max-height:48px; margin-right:8px }
	.top-bar{ padding:12px 14px }
	.top-title{ font-size:1rem }
	/* hide nav title on very small screens if needed */
}

/* Top-bar action buttons */
.top-actions{ display:flex; align-items:center; gap:8px }
.top-nav-btn{ 
    display:inline-block; 
    background:none; 
    border:1px solid transparent; 
    padding:8px 12px; 
    border-radius:8px; 
    color:var(--header-text); 
    text-decoration:none; 
    font-weight:600;
    transition: all 0.2s ease;
}
.top-nav-btn:hover{ 
    background:#fff; 
    color:#222; 
    border-color:rgba(0,0,0,0.06);
    transform:translateY(-1px);
}
.top-actions .icon-btn{ margin-left:4px }

.close-btn {
	margin-right: 12px;
}
.refresh-btn {
	margin-left: 12px;
}

@media (max-width:700px){
	.nav-center { 
        display:flex;
        flex-direction:row; 
        gap:4px;
        background:transparent; 
        position:static;
        padding:0;
        box-shadow:none;
        align-items:center;
        justify-content:center;
        flex:1 1 auto;
    }
	.top-nav-btn{ 
        padding:7px 10px;
        font-size:0.85rem;
        white-space:nowrap;
    }
    .nav-wrap { 
        gap:6px;
        max-width:100%;
    }
}

@media (max-width:640px) {
  .top-nav-btn{
    padding:6px 8px;
    font-size:0.8rem;
  }
  .nav-wrap {
    gap:4px;
    padding:4px 8px;
  }
}

/* --- Question Card --- */
.question-card {
	background: var(--card-bg);
	border-radius: 18px;
	box-shadow: 0 4px 24px rgba(255,184,77,0.08);
	padding: 16px 10px 10px 10px;
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 0 auto;
	max-height: 48vh;
	min-height: 0;
	box-sizing: border-box;
}
.card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
.user-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--soft-pink);
	border: 2px solid var(--avatar-border);
}
.prompt-text {
		color: #222;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.card-body {
	margin-bottom: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 0;
	box-sizing: border-box;
}
.dark-textbox {
	width: 100%;
	min-height: 40px;
	max-height: 80px;
	background: var(--textbox-bg);
	color: #222;
	border: 1.5px solid var(--textbox-border);
	border-radius: 12px;
	padding: 10px 10px;
	font-size: 1rem;
	resize: none;
	outline: none;
	transition: border 0.15s;
	box-shadow: 0 1px 4px rgba(255,184,77,0.04);
	overflow-y: auto;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.question-card {
		max-width: 98vw;
		width: 100vw;
		padding: 8px 2vw 6px 2vw;
		max-height: 52vh;
	}
}
.dark-textbox:focus {
	border: 1.5px solid var(--textbox-focus);
}
.char-counter {
	text-align: right;
	font-size: 0.92rem;
		color: #888;
	margin-top: 4px;
	opacity: 0.7;
}
.top-logo {
    height:56px; /* ensure consistent size if duplicated */
    width:auto;
    display:block;
}
.top-actions {
	display:flex;
	gap:8px;
	align-items:center;
}
.icon-btn {
	background:transparent;
	border:none;
	color:inherit;
	cursor:pointer;
	padding:8px;
	border-radius:8px;
}
.top-nav-btn {
	display:inline-block;
	background:transparent;
	border:1px solid rgba(255,255,255,0.06);
	color:inherit;
	padding:8px 12px;
	border-radius:8px;
	text-decoration:none;
	font-weight:600;
}

/* Constrain main content width so the site doesn't use full page width */
.site-container {
	max-width:1100px;
	margin:0 auto;
	padding:0 20px;
}

/* Narrow, rounded inner nav wrapper so header looks like a compact bar */
.nav-wrap{
	max-width:760px; /* narrower navbar */
	margin:6px auto;
	display:flex;
	align-items:center;
	gap:12px;
	justify-content:space-between;
	padding:6px 12px;
	background: var(--card-bg);
	border-radius:16px; /* rounder corners */
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.04);
}

@media (max-width:700px){
	.nav-wrap{ padding:6px 10px; border-radius:10px; max-width:calc(100% - 28px); }
}

/* Center the navigation buttons in the header */
.top-bar .nav-center {
	display:flex;
	gap:10px;
	justify-content:center;
	align-items:center;
	flex:1 1 auto;
}

/* Ensure logo stays at left and actions at right */
.top-bar .left,
.top-bar .right {
	display:flex;
	align-items:center;
}

/* On small screens, stack or collapse nav appropriately */
.top-bar .nav-center { display:flex; }
@media (max-width:700px) {
	.top-bar .nav-center { display:none; }
}

/* Card Footer - Center submit button */
.card-footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	width: 100%;
}

/* Example button base style (replaces stray/malformed block) */
.example-question {
	font-size: 0.98rem;
	padding: 6px 12px 6px 8px;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	cursor: pointer;
	user-select: none;
	border: 1px solid rgba(0,0,0,0.06);
	background: transparent;
}
.example-question:active, .example-question:focus {
	background: rgba(0,0,0,0.04);
	outline: 2px solid rgba(0,0,0,0.06);
}
.dice-icon {
	font-size: 1.1rem;
	margin-right: 2px;
}
.example-text {
	font-style: italic;
}
.status-message {
	margin-top: 10px;
	min-height: 24px;
}
.success-message {
	color: var(--success);
	font-weight: 500;
	font-size: 1rem;
}
.error-message {
	color: var(--error);
	font-weight: 500;
	font-size: 1rem;
}
.dice-icon {
	font-size: 1.1rem;
	margin-right: 2px;
}
.example-text {
	font-style: italic;
}
.status-message {
	margin-top: 10px;
	min-height: 24px;
}
.success-message {
	color: var(--success);
	font-weight: 500;
	font-size: 1rem;
}
.error-message {
	color: var(--error);
	font-weight: 500;
	font-size: 1rem;
}

/* Submit Button Styling */
.submit-btn {
	background: var(--button-bg);
	color: var(--button-text);
	border: none;
	padding: 12px 24px;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(255, 184, 77, 0.2);
	flex-shrink: 0;
}

.submit-btn:hover {
	background: var(--button-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(255, 184, 77, 0.3);
}

.submit-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(255, 184, 77, 0.2);
}

.submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}