@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{ 
  --primary: #059669; 
  --primary-dark: #047857; 
  --primary-darker: #065f46;
  --primary-light: #10b981; 
  --accent: #34d399; 
  --success: #22c55e; 
  --dark-surface: #064e3b; 
  --dark-surface-light: #065f46; 
  --dark-surface-lighter: #047857; 
  --chat-surface: #ffffff; 
  --chat-surface-light: #f9fafb; 
  --text-dark: #ffffff; 
  --text-dark-muted: #d1fae5; 
  --text-chat: #111827; 
  --text-chat-muted: #6b7280;
  --border-dark: #059669;
  --border-light: #e5e7eb;
  --shadow: rgba(0,0,0,0.3);
  --shadow-light: rgba(0,0,0,0.15);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.1);
  --shadow-button: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; overflow:hidden}
body{display:grid; grid-template-rows:auto 1fr; background:var(--dark-surface); color:var(--text-dark); font-family:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size:14px; min-height:100vh}

/* Hide all scrollbars */
*{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

*::-webkit-scrollbar{
  display: none; /* WebKit */
}
header{
  padding:12px 24px;
  background:linear-gradient(135deg, var(--primary-darker), var(--primary-dark));
  border-bottom:2px solid var(--primary);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
}
header .header-inner{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
header .header-logo{
  height:clamp(30px, 4vw, 50px);
  width:auto;
}
header .header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
header .layout-label{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.85);
}
header .layout-toggle-button{
  background:rgba(255,255,255,0.15);
  color:white;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:none;
}
header .layout-toggle-button:hover{
  background:rgba(255,255,255,0.28);
  transform:translateY(-1px);
}
header .layout-toggle-button:active{
  transform:translateY(0);
  background:rgba(255,255,255,0.2);
}
header h1{margin:0; font-size:clamp(18px,2.5vw,24px); font-weight:700; color:white; text-shadow:0 1px 2px rgba(0,0,0,0.3)}
header p{margin:6px 0 0; color:rgba(255,255,255,0.9); font-size:13px; font-weight:400}
.wrap{display:grid; grid-template-rows: 1fr auto; gap:12px; padding:12px; min-height:calc(100vh - 80px); position:relative}
body.simple-mode{
  background:var(--chat-surface-light);
  color:var(--text-chat);
  overflow:auto;
}
body.simple-mode header{
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
}
body.simple-mode header .layout-label{
  color:var(--text-chat-muted);
}
body.simple-mode header .layout-toggle-button{
  background:var(--chat-surface);
  color:var(--text-chat);
  border:1px solid var(--border-light);
  box-shadow:0 2px 6px rgba(15,23,42,0.12);
}
body.simple-mode header .layout-toggle-button:hover{
  background:var(--chat-surface-light);
}
body.simple-mode .wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:32px 16px;
}
body.simple-mode .stage,
body.simple-mode .panel,
body.simple-mode footer{
  display:none;
}
body.simple-mode .chat-overlay{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  width:min(720px, 90vw);
  height:min(75vh, 640px);
  max-height:unset;
  box-shadow:0 20px 40px rgba(15,23,42,0.18);
  border:1px solid var(--border-light);
}
body.simple-mode .chat-overlay-header{
  text-align:left;
  font-size:16px;
  padding:16px 20px;
}
body.simple-mode .chat-overlay-messages{
  padding:16px 20px;
  font-size:14px;
}
body.simple-mode .chat-overlay-input{
  padding:16px 20px;
}
body.simple-mode .chat-input-row input{
  font-size:14px;
}
body.simple-mode .chat-input-row button{
  font-size:14px;
  padding:8px 16px;
}
.stage{position:relative; background:var(--chat-surface-light); border:2px solid var(--border-dark); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.1)}
.stage-overlay{position:absolute; left:12px; bottom:12px; font-size:11px; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border:2px solid var(--primary); color:#111827; padding:10px 14px; border-radius:8px; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8); z-index:100; max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
canvas{display:block; width:100%; height:100%; border-radius:10px}
.panel{
  background:transparent; 
  border:none; 
  border-radius:0; 
  padding:clamp(8px, 1.5vw, 12px) clamp(8px, 1.5vw, 12px) 0 clamp(8px, 1.5vw, 12px); 
  display:flex; 
  justify-content:space-between; 
  align-items: left; 
  gap:clamp(6px, 1vw, 8px); 
  height:fit-content; 
  max-height:clamp(15vh, 20vh, 25vh); 
  overflow:visible; 
  box-shadow:none; 
  position:fixed; 
  top:0; 
  left:0; 
  right:0; 
  width:100%; 
  box-sizing:border-box; 
  z-index:999;
}

/* Floating Chat Overlay - Wide Bottom Center */
.chat-overlay{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  width:clamp(500px, 60vw, 800px);
  height:clamp(250px, 30vh, 350px);
  background:var(--chat-surface);
  border:1px solid var(--primary);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.3);
  z-index:1000;
  display:flex;
  flex-direction:column;
  backdrop-filter:blur(10px);
  max-width:150vw;
  max-height:50vh;
}
.chat-overlay-header{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)); 
  color:white; 
  padding:4px 8px; 
  border-radius:7px 7px 0 0; 
  font-weight:600; 
  font-size:clamp(11px, 1.2vw, 13px); 
  text-align:center; 
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
  flex-shrink:0;
}
.chat-overlay-messages{
  flex:1;
  padding:10px;
  overflow-y:auto;
  background:var(--chat-surface);
  min-height:0;
  scrollbar-width: auto; /* Firefox - restore scrollbars */
  -ms-overflow-style: auto; /* Internet Explorer 10+ - restore scrollbars */
}

/* Restore scrollbars for chat messages only */
.chat-overlay-messages::-webkit-scrollbar{
  display: block; /* WebKit - restore scrollbars */
  width: 8px;
}

.chat-overlay-messages::-webkit-scrollbar-track{
  background: var(--chat-surface-light);
  border-radius: 4px;
}

.chat-overlay-messages::-webkit-scrollbar-thumb{
  background: var(--primary);
  border-radius: 4px;
}

.chat-overlay-messages::-webkit-scrollbar-thumb:hover{
  background: var(--primary-dark);
}

/* Citations Styles */
.citations {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: clamp(10px, 1.2vw, 12px);
  color: var(--text-chat-muted);
}

.citations hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 0 0 6px 0;
}

.citations strong {
  color: var(--primary);
  font-size: clamp(10px, 1.2vw, 12px);
}

.citations-list {
  margin: 6px 0 0 0;
  padding-left: 16px;
  line-height: 1.3;
}

.citations-list li {
  margin-bottom: 3px;
  font-size: clamp(9px, 1.1vw, 11px);
  color: var(--text-chat-muted);
}
.chat-overlay-input{
  padding:4px; 
  border-top:1px solid var(--border-light); 
  background:var(--chat-surface-light); 
  border-radius:0 0 7px 7px;
  flex-shrink:0;
}
.chat-message{
  margin-bottom:6px;
  padding:clamp(6px, 1.2vw, 8px);
  border-radius:4px;
  font-size:clamp(12px, 1.4vw, 14px);
  line-height:1.4;
  font-family:'Roboto', sans-serif;
  font-weight:400;
}

/* Markdown styling within chat messages */
.chat-message h1, .chat-message h2, .chat-message h3, .chat-message h4, .chat-message h5, .chat-message h6 {
  margin: 8px 0 4px 0;
  color: var(--primary);
  font-weight: 600;
}

.chat-message h1 { font-size: 14px; }
.chat-message h2 { font-size: 13px; }
.chat-message h3 { font-size: 12px; }
.chat-message h4, .chat-message h5, .chat-message h6 { font-size: 11px; }

.chat-message p {
  margin: 4px 0;
}

.chat-message ul, .chat-message ol {
  margin: 4px 0;
  padding-left: 16px;
}

.chat-message li {
  margin: 2px 0;
}

.chat-message strong {
  font-weight: 600;
  color: var(--primary-dark);
}

.chat-message em {
  font-style: italic;
  color: var(--text-chat-muted);
}

.chat-message code {
  background: rgba(0,0,0,0.1);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.chat-message pre {
  background: rgba(0,0,0,0.1);
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 6px 0;
}

.chat-message pre code {
  background: none;
  padding: 0;
}

.chat-message blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 8px;
  margin: 6px 0;
  font-style: italic;
  color: var(--text-chat-muted);
}

.chat-message a {
  color: var(--primary);
  text-decoration: underline;
}

.chat-message a:hover {
  color: var(--primary-dark);
}
.chat-message.user{
  background:linear-gradient(135deg, var(--primary-light), var(--primary)); 
  color:black; 
  margin-left:clamp(3px, 1vw, 8px); 
  border-radius:4px 4px 1px 4px;
}
.chat-message.assistant{
  background:var(--chat-surface-light); 
  border:1px solid var(--border-light); 
  margin-right:clamp(3px, 1vw, 8px); 
  border-radius:4px 4px 4px 1px; 
  color:black;
}
.chat-message.system{
  background:rgba(5,150,105,0.1); 
  border:1px solid var(--primary); 
  color:var(--primary); 
  text-align:center; 
  font-style:italic; 
  margin:0;
}
.chat-input-row{display:flex; gap:3px; align-items:center}
.chat-input-row input{
  flex:1; 
  border-radius:4px; 
  border:1px solid var(--border-light); 
  background:var(--chat-surface); 
  color:black; 
  padding:clamp(4px, 1vw, 6px); 
  font-size:clamp(10px, 1.2vw, 11px); 
  font-family:'Roboto', sans-serif;
}
.chat-input-row button{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)); 
  color:white; 
  border:1px solid var(--primary-dark); 
  border-radius:4px; 
  padding:clamp(4px, 1vw, 6px) clamp(8px, 1.5vw, 10px); 
  font-weight:600; 
  cursor:pointer; 
  font-size:clamp(9px, 1.1vw, 10px);
}
.group{background:linear-gradient(135deg, var(--dark-surface-lighter), var(--dark-surface-light)); border:1px solid var(--border-dark); border-radius:8px; padding:12px; box-shadow:0 4px 12px rgba(0,0,0,0.2), var(--shadow-inset)}
.group h3{
  margin:0 0 clamp(4px, 1vw, 8px); 
  font-size:clamp(10px, 1.4vw, 12px); 
  color:var(--accent); 
  letter-spacing:0.5px; 
  text-transform:uppercase; 
  font-weight:700; 
  text-shadow:0 1px 2px rgba(0,0,0,0.5); 
  text-align:center;
  position:relative;
  padding-bottom:2px;
}
.group h3::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius:1px;
}
.row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
button, .file-label{appearance:none; border:1px solid var(--primary); border-radius:6px; padding:8px 12px; background:linear-gradient(135deg, var(--primary-light), var(--primary)); color:white; font-weight:500; font-size:12px; cursor:pointer; transition:all .2s ease; box-shadow:var(--shadow-button); text-shadow:0 1px 1px rgba(0,0,0,0.2)}
button:hover,.file-label:hover{background:linear-gradient(135deg, var(--accent), var(--primary-light)); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2)}
button:active,.file-label:active{transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,0.2), inset 0 1px 3px rgba(0,0,0,0.2)}
button[data-active="true"]{background:linear-gradient(135deg, var(--success), var(--accent)); box-shadow:0 4px 12px rgba(34,197,94,0.4), var(--shadow-inset)}
button.muted{background:linear-gradient(135deg, var(--primary-darker), #0a4d3a) !important; color:white !important; box-shadow:inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2) !important; transform:translateY(1px) !important;}
button.muted:hover{background:linear-gradient(135deg, var(--primary-darker), #0a4d3a) !important; transform:translateY(1px) !important; box-shadow:inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2) !important;}
button.muted:active{background:linear-gradient(135deg, var(--primary-darker), #0a4d3a) !important; transform:translateY(2px) !important; box-shadow:inset 0 3px 6px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.1) !important;}
button[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:inset 0 1px 3px rgba(0,0,0,0.3)}
input[type="range"]{
  width:clamp(120px, 15vw, 200px); 
  height:clamp(24px, 3vw, 36px); 
  -webkit-appearance:none; 
  background:linear-gradient(145deg, var(--dark-surface-lighter), var(--dark-surface-light)); 
  border:2px solid var(--primary); 
  border-radius:16px; 
  outline:none; 
  box-shadow:inset 0 4px 8px rgba(0,0,0,0.4), 0 2px 8px rgba(5,150,105,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; 
  width:clamp(20px, 2.5vw, 32px); 
  height:clamp(20px, 2.5vw, 32px); 
  border-radius:50%; 
  background:linear-gradient(145deg, var(--accent), var(--primary)); 
  cursor:pointer; 
  box-shadow:0 4px 12px rgba(52,211,153,0.5), inset 0 2px 4px rgba(255,255,255,0.3), 0 0 0 2px rgba(255,255,255,0.2); 
  transition:all .3s ease;
  border:2px solid white;
}
input[type="range"]::-webkit-slider-thumb:hover{
  background:linear-gradient(145deg, var(--success), var(--accent)); 
  transform:scale(1.15);
  box-shadow:0 6px 16px rgba(34,197,94,0.6), inset 0 2px 6px rgba(255,255,255,0.4), 0 0 0 3px rgba(255,255,255,0.3);
}
.chat{display:flex; gap:8px; align-items:center}
.chat input{flex:1; border-radius:8px; border:1px solid var(--border-light); background:var(--chat-surface); color:var(--text-chat); padding:10px 12px; font-size:13px; transition:all .2s ease; box-shadow:0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.05)}
.chat input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(5,150,105,0.2), 0 2px 8px rgba(0,0,0,0.15)}
.log{height:100px; overflow:auto; background:var(--chat-surface-light); border:1px solid var(--border-light); border-radius:6px; padding:8px; font-size:11px; color:var(--text-chat); line-height:1.4; box-shadow:inset 0 2px 4px rgba(0,0,0,0.05)}
.file{display:none}
.file-label{display:inline-flex; align-items:center; gap:6px}
.badge{
  font-size:13px; 
  padding:8px 16px; 
  border-radius:8px; 
  background:linear-gradient(145deg, var(--primary), var(--primary-dark)); 
  border:2px solid var(--accent); 
  color:white; 
  font-weight:700; 
  box-shadow:0 3px 8px rgba(5,150,105,0.4), inset 0 2px 4px rgba(255,255,255,0.2); 
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
  letter-spacing:0.5px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
}
.drop-hint{border:1px dashed var(--border-dark); border-radius:6px; padding:8px; font-size:11px; color:var(--text-dark-muted); text-align:center; background:rgba(255,255,255,0.05)}
footer{padding:8px 16px; text-align:center; color:var(--text-dark-muted); font-size:11px; background:linear-gradient(135deg, var(--dark-surface), var(--primary-darker)); border-top:2px solid var(--border-dark); box-shadow:0 -2px 8px rgba(0,0,0,0.2)}

/* Authentication Styles */
/* Full-screen frosted green authentication overlay */
.auth-overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(6,78,59,0.95); backdrop-filter:blur(10px); z-index:2000; display:flex; align-items:center; justify-content:center}
.auth-card{background:var(--chat-surface); border:2px solid var(--primary); border-radius:12px; padding:32px; max-width:400px; width:90vw; box-shadow:0 20px 50px rgba(0,0,0,0.8); text-align:center}
.auth-card .logo{margin-bottom:24px; display:flex; justify-content:center}
.auth-card .logo img{height:60px; width:auto}
.auth-card h2{color:var(--primary); margin:0 0 16px; font-size:24px; font-weight:700}
.auth-card p{color:var(--text-chat-muted); margin:0 0 24px; line-height:1.5}
.auth-button{background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; border:none; padding:12px 24px; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; width:100%; transition:all .3s ease; display:flex; align-items:center; justify-content:center; gap:12px}
.auth-button:hover{background:linear-gradient(135deg, var(--primary-light), var(--primary)); transform:translateY(-2px)}
.auth-button img{height:20px; width:20px}

/* Panel-based User Info for Right Column */
.user-panel-info{text-align:center; margin-bottom:clamp(8px, 1.5vw, 12px); border:2px solid var(--primary); border-radius:8px; background:var(--chat-surface); padding:clamp(8px, 1.5vw, 12px); box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.user-panel-header{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px; color:var(--text-chat); font-size:clamp(9px, 1.5vw, 11px); font-weight:500}
.user-panel-header img{width:clamp(16px, 2.5vw, 20px); height:clamp(16px, 2.5vw, 20px); border-radius:50%}
.sign-out-panel-btn{background:var(--primary); color:white; border:none; padding:clamp(4px, 0.8vw, 6px) clamp(6px, 1.2vw, 8px); border-radius:4px; font-size:clamp(8px, 1.2vw, 10px); cursor:pointer; width:100%; font-weight:500; transition:all .2s ease}
.sign-out-panel-btn:hover{background:var(--primary-dark); transform:translateY(-1px)}

/* Column Layout Styles - Even Smaller */
.left-column, .right-column{
  display:flex; 
  flex-direction:column; 
  justify-content:flex-start; 
  gap:clamp(3px, 0.6vw, 4px); 
  min-width:clamp(100px, 14vw, 130px); 
  max-width:clamp(130px, 16vw, 160px); 
  flex:0 0 auto;
}
.center-column{opacity:0; pointer-events:none} /* Invisible spacer for main scene */

/* Chat Main Group Styles - WHITE THEME */
.chat-main-group{height:100%; display:flex; flex-direction:column; background:var(--chat-surface); border-radius:8px; padding:12px; border:2px solid var(--border-light); box-shadow:0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8)}
.chat-main-group h3{color:var(--primary); font-size:13px; margin-bottom:10px; font-weight:600}
.chat-main-group .log{flex:1; margin-bottom:10px; min-height:85px}
.chat-main-group .chat{margin-bottom:8px}
.chat-main-group .chat button{background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; font-weight:600; padding:10px 16px; font-size:12px; border-radius:6px; border:1px solid var(--primary-dark); box-shadow:0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2); text-shadow:0 1px 1px rgba(0,0,0,0.2)}
.chat-main-group .chat button:hover{background:linear-gradient(135deg, var(--primary-light), var(--primary)); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3)}
.chat-controls{justify-content:center; gap:6px; flex-wrap:wrap}
.chat-controls button{background:linear-gradient(135deg, var(--chat-surface-light), var(--chat-surface)) !important; color:var(--text-chat) !important; border:1px solid var(--border-light) !important; box-shadow:0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5) !important}
.chat-controls button:hover{background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color:white !important; transform:translateY(-1px) !important}
.chat-controls .badge{background:var(--chat-surface-light) !important; color:var(--text-chat-muted) !important; border:1px solid var(--border-light) !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.05) !important}

/* Ultra Small Action Groups */
.left-column .group, .right-column .group{
  padding:clamp(4px, 0.8vw, 6px); 
  background:linear-gradient(145deg, var(--dark-surface-lighter), var(--dark-surface-light)); 
  border:1px solid rgba(5,150,105,0.3);
  border-radius:4px; 
  box-shadow:0 2px 6px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  width:100%;
  margin-bottom:clamp(3px, 0.6vw, 4px);
  max-width:100%;
}
.left-column button, .right-column button{
  padding:clamp(4px, 0.8vw, 6px) clamp(6px, 1vw, 8px); 
  font-size:clamp(8px, 1vw, 9px);
  width:100%;
  min-height:clamp(22px, 3vh, 28px); 
  font-weight:600;
  border-radius:3px;
  background:linear-gradient(145deg, var(--primary), var(--primary-dark));
  border:1px solid var(--primary-light);
  color:white;
  box-shadow:0 1px 2px rgba(5,150,105,0.4), inset 0 1px rgba(255,255,255,0.2);
  transition:all .2s ease;
  text-shadow:0 1px rgba(0,0,0,0.4);
  letter-spacing:0.1px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
}
.left-column button::before, .right-column button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s ease;
}
.left-column button:hover::before, .right-column button:hover::before{
  left:100%;
}
.left-column button:hover, .right-column button:hover{
  background:linear-gradient(145deg, var(--accent), var(--primary)); 
  transform:translateY(-4px) scale(1.02); 
  box-shadow:0 8px 20px rgba(5,150,105,0.5), inset 0 2px 6px rgba(255,255,255,0.3), 0 0 0 2px rgba(52,211,153,0.8);
  border-color:var(--accent);
}
.left-column button:active, .right-column button:active{
  transform:translateY(-2px) scale(1.01); 
  box-shadow:0 4px 12px rgba(5,150,105,0.4), inset 0 2px 4px rgba(0,0,0,0.2);
}
.left-column .row, .right-column .row{
  gap:6px; 
  margin-top:6px; 
  justify-content:center; 
  align-items:stretch;
  display:flex;
  flex-wrap:wrap;
  width:100%;
}

/* Force buttons to stack in rows of 2 */
.right-column .row {
  max-width:240px;
  margin:0 auto;
  margin-top:6px;
}

.right-column button {
  flex:1;
  max-width:110px;
  min-width:80px;
}
.left-column .row:first-child, .right-column .row:first-child{margin-top:0}

/* Special layout for single buttons */
.left-column .row:has(button:only-child), .right-column .row:has(button:only-child){
  justify-content:center;
}

/* Special button styles */
#zoomies{
  background:linear-gradient(145deg, var(--success), var(--accent)) !important; 
  color:white !important; 
  border:2px solid var(--accent) !important;
  font-weight:700; 
  box-shadow:0 6px 16px rgba(34,197,94,0.5), inset 0 2px 4px rgba(255,255,255,0.3) !important;
  animation:pulse-glow 2s infinite;
}
#zoomies:hover{
  background:linear-gradient(145deg, var(--accent), var(--success)) !important; 
  box-shadow:0 8px 20px rgba(52,211,153,0.6), inset 0 2px 6px rgba(255,255,255,0.4) !important;
  transform:translateY(-4px) scale(1.05) !important;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow:0 6px 16px rgba(34,197,94,0.5), inset 0 2px 4px rgba(255,255,255,0.3); }
  50% { box-shadow:0 6px 16px rgba(34,197,94,0.8), inset 0 2px 4px rgba(255,255,255,0.3), 0 0 20px rgba(34,197,94,0.3); }
}

/* Center alignment for speed control row */
.row:has(input[type=\"range\"]) {
  justify-content:center !important;
  align-items:center;
  gap:12px;
}

/* Enhanced control spacing */
.left-column .group, .right-column .group {
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Mobile & Responsive Media Queries - Ultra Compact with Centered Chat */
@media (max-width: 1200px) {
  .panel {
    padding: clamp(4px, 0.8vw, 6px);
    gap: clamp(3px, 0.6vw, 4px);
  }
  .left-column, .right-column {
    min-width: clamp(90px, 12vw, 120px);
    max-width: clamp(120px, 14vw, 150px);
  }
}

@media (max-width: 900px) {
  .panel {
    padding: 6px;
    gap: 4px;
    max-height: 20vh;
  }
  .left-column, .right-column {
    min-width: clamp(80px, 10vw, 120px);
    max-width: clamp(120px, 15vw, 160px);
  }
  .chat-overlay {
    width: clamp(350px, 70vw, 500px);
    height: clamp(160px, 25vh, 200px);
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .panel {
    padding: 4px;
    gap: 3px;
    max-height: 25vh;
  }
  .left-column, .right-column {
    min-width: clamp(70px, 8vw, 100px);
    max-width: clamp(100px, 12vw, 130px);
  }
  .chat-overlay {
    width: clamp(300px, 85vw, 450px);
    height: clamp(140px, 30vh, 180px);
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
  }
  .left-column .group, .right-column .group {
    padding: clamp(3px, 0.8vw, 4px);
  }
  .left-column button, .right-column button {
    min-height: clamp(18px, 2vh, 22px);
    font-size: clamp(6px, 0.8vw, 7px);
    padding: clamp(3px, 0.6vw, 4px) clamp(4px, 0.8vw, 6px);
  }
}

@media (max-width: 480px) {
  .panel {
    padding: 3px;
    gap: 2px;
  }
  .left-column, .right-column {
    min-width: clamp(60px, 7vw, 80px);
    max-width: clamp(80px, 10vw, 100px);
  }
  .chat-overlay {
    width: calc(100vw - 20px);
    height: clamp(120px, 35vh, 160px);
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
  }
  .stage-overlay {
    left: 6px;
    bottom: 6px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .auth-panel-group {
    padding: 6px;
    margin-bottom: 6px;
  }
  .auth-panel-card h4 {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .auth-panel-card p {
    font-size: 8px;
    margin-bottom: 6px;
  }
  .auth-panel-button {
    padding: 4px 6px;
    font-size: 8px;
  }
  .user-panel-header {
    font-size: 8px;
    margin-bottom: 4px;
  }
  .sign-out-panel-btn {
    padding: 3px 4px;
    font-size: 7px;
  }
}