:root {
	--bg:#0f172a; 
	--card:#111827; 
	--muted:#cbd5e1; 
	--accent:#38bdf8; 
}

body {
	margin:0; 
	font-family: system-ui, sans-serif; 
	background:var(--bg); 
	color:white; 
	}
	
header { 
padding:16px 20px; 
border-bottom:1px solid #1f2937; 
display:flex; gap:12px;
 align-items:center; 
}

.persona { 
	display:flex;
	gap:8px;
 }
 
.persona button { 
	background:#1f2937; 
	color:white; 
	border:1px solid #334155;
	border-radius:999px; 
	padding:8px 14px;
	cursor:pointer; 
 }
.persona button.active { 
	border-color: var(--accent); 
	box-shadow: 0 0 0 2px rgba(56,189,248,.2) inset;
}
 
.wrap { 
	max-width:1012px;
	margin:0 auto;
	padding:20px; 
 }
 
.card { 
	background:var(--card); 
	border:1px solid #1f2937; 
	border-radius:16px; 
}

#chat { 
	height:60vh;
	overflow:auto;
	padding:16px; 
	display:flex;
	flex-direction:column; 
	gap:12px;
	scrollbar-width: thin;
	scrollbar-color: #334155 #1f2937;
}
#chat::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
#chat::-webkit-scrollbar-track {
	background: #1f2937;
	border-radius: 4px;
}
#chat::-webkit-scrollbar-thumb {
	background: #334155;
	border-radius: 4px;
	border: 2px solid #1f2937;
}
#chat::-webkit-scrollbar-thumb:hover {
	background: #475569;
}
#chat::-webkit-scrollbar-corner {
	background: #1f2937;
}
 
.msg { 
	padding:12px 14px;
	border-radius:12px; 
	line-height:1.4;
	max-width:80%; 
}
 
.msg.user { 
	background:#334155;
	align-self:flex-end; 
}
 
.msg.bot { 
	background:#0b3b4b; 
	border:1px solid #134e5e; 
}

.muted { 
	color:var(--muted); 
	font-size:12px; 
}

form { 
	display:flex;
	gap:8px; 
	padding:12px;
	border-top:1px solid #1f2937; 
}

input[type="text"]{
	flex:1; 
	padding:12px; 
	border-radius:10px; 
	border:1px solid #334155;
	background:#0b1220; 
	color:white; 
}

button.send{ 
	padding:12px 16px; 
	border-radius:10px; 
	border:1px solid #334155;
	background:#0b1220; 
	color:white; 
	cursor:pointer;
}

.toolbar { 
	display:flex; 
	gap:8px;
	padding:10px 12px; 
	border-bottom:1px solid #1f2937; 
	align-items:center; 
	justify-content:space-between;
}

.toolbar .left, .toolbar .right { 
	display:flex; 
	gap:8px; 
	align-items:center; 
}
.toolbar button, .toolbar select {
	background:#0b1220; 
	color:white; 
	border:1px solid #334155;
	border-radius:8px; 
	padding:8px 10px; 
	cursor:pointer;
}

.note { 
	font-size:12px; 
	color:#9ca3af; 
}

/* --- Design actions onder de chat --- */
#designActions {
  padding: 12px;
  border-top: 1px solid #1f2937;
}

.design-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px;
}

.design-actions__info {
  color: var(--muted);
  font-size: 12px;
}

/* Knop stijl: lijkt op jouw toolbar/send knoppen, met accent */
.design-actions button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(56, 189, 248, 0.12);
  color: white;
  cursor: pointer;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
}

.design-actions button:hover {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.18);
}

.design-actions button:active {
  transform: translateY(1px);
}

.design-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: #0b1220;
  border-color: #334155;
}

/* --- Cookie banner --- */
.hidden {
  display: none !important;
}

.cookie-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;              /* ~10% smaller dan de kaart/chat */
  max-width: 910px;        /* 90% van 1012px (wrap max-width) */
  background: var(--card);
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  z-index: 50;
}

.cookie-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.cookie-banner strong {
  color: var(--accent);
}

.cookie-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.cookie-buttons button {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #0b1220;
  color: white;
  cursor: pointer;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
}

.cookie-buttons button:hover {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.16);
}

.cookie-buttons button:active {
  transform: translateY(1px);
}

.cookie-buttons #cookieAccept {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--accent);
}

.cookie-buttons #cookieAccept:hover {
  background: rgba(56, 189, 248, 0.26);
}