/* Basic layout */
#meeting-room-app { border: none; padding: 0 0 1px 0; border-radius: 0; max-width: 460px; margin: 5px auto -4px auto; transform: scale(0.8); transform-origin: top right; }
.meeting-room-bar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; position: relative; }
.meeting-room-stats { display:flex; align-items:center; gap:20px; font-size:16px; }
.meeting-room-stats span { white-space: nowrap; }
#meeting-room-toggle-list { border: 1px solid #ccc; padding: 2px 6px; background:#fff; }
.meeting-room-auth { display:flex; align-items:center; gap:8px; font-size:16px; position:relative; left:auto; transform:none; }
.meeting-room-gbtn { display:inline-flex; align-items:center; gap:8px; border:1px solid #dadce0; border-radius:20px; background:#fff !important; color:#3c4043; font-weight:500; cursor:pointer; box-shadow: none; height:32px; padding:0 10px; }
/* Inline shortcode button: slightly larger button box, same text size */
.meeting-room-inline-btn { height:50px; padding:0 20px; }
.meeting-room-gbtn:hover { background:#f7f8f8 !important; box-shadow: none; }
/* Default small Google icon */
.meeting-room-gicon { width:14px; height:14px; display:inline-block; }
.meeting-room-controls button, .meeting-room-logout { width:38px; height:32px; font-size:18px; line-height:32px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid #e0e0e0; border-radius:6px; background:#fff; }
.meeting-room-controls button:hover, .meeting-room-logout:hover { background:#f7f7f7; }
.meeting-room-icon { width:20px; height:20px; }
.meeting-room-list { margin-top: 8px; border: 1px solid #eee; border-radius: 6px; padding: 6px; max-height: calc(1.2em * 10 + 20px); overflow-y: auto; }
#meeting-room-roster-list { list-style: none; padding: 0; margin: 0; display:flex; flex-wrap:wrap; gap:8px; line-height:1.2; font-size:16px; }
.badge { font-size: 10px; padding: 0 6px; border-radius: 10px; background: #eee; }
.mic-green { color: #2e7d32; }
.mic-muted { color: #666; opacity: .8; }
/* Info panel styles */
.meeting-room-info { font-size:16px; }
.meeting-room-info-title { text-align:center; font-weight:700; margin: 0 0 6px; font-size:19px; }
.meeting-room-info-list { margin:0 0 0 18px; padding:0; }
.meeting-room-info-list li { margin:0 0 4px; }

/* In header (logo wrapper) show full Google button label even on small screens */
.logo .meeting-room-glabel { display: inline !important; }
/* Make the Google button more compact when inside the header logo area */
.logo .meeting-room-gbtn { height:28px; padding:0 8px; font-size:14px; }
.logo .meeting-room-gicon { width:12px; height:12px; }
@media (max-width: 420px) {
  .logo .meeting-room-gbtn { height:26px; font-size:13px; padding:0 8px; }
  .logo .meeting-room-gicon { width:11px; height:11px; }
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .meeting-room-stats { font-size:14px; gap:12px; }
  .meeting-room-auth { font-size:14px; }
  #meeting-room-toggle-list { padding:1px 4px; font-size:12px; }
  .meeting-room-controls { gap:8px; }
  .meeting-room-controls button, .meeting-room-logout { width:34px; height:30px; }
.meeting-room-gbtn { height:30px; font-size:inherit; padding:0 10px; white-space:nowrap; }
  .meeting-room-gicon { width:13px; height:13px; }
  .meeting-room-glabel { display:inline; }
  .meeting-room-info { font-size:14px; }
  #meeting-room-roster-list { font-size:14px; }
}
@media (max-width: 420px) {
  .meeting-room-stats { font-size:12px; gap:8px; }
  .meeting-room-auth { font-size:12px; }
  #meeting-room-toggle-list { padding:0 4px; font-size:11px; }
  .meeting-room-controls { gap:6px; }
  .meeting-room-controls button, .meeting-room-logout { width:30px; height:28px; }
  .meeting-room-icon { width:16px; height:16px; }
  .meeting-room-gbtn { height:28px; font-size:inherit; padding:0 8px; white-space:nowrap; }
  .meeting-room-gicon { width:12px; height:12px; }
  .meeting-room-glabel { display:inline; }
  .meeting-room-info { font-size:12px; }
  #meeting-room-roster-list { font-size:12px; }
}
.meeting-room-controls button:hover { background:#f7f7f7; }
.meeting-room-icon { width:20px; height:20px; }
.meeting-room-list { margin-top: 8px; border: 1px solid #eee; border-radius: 6px; padding: 6px; max-height: calc(1.2em * 10 + 20px); overflow-y: auto; }
#meeting-room-roster-list { list-style: none; padding: 0; margin: 0; display:flex; flex-wrap:wrap; gap:8px; line-height:1.2; font-size:16px; }
#meeting-room-roster-list li { display:flex; align-items:center; gap:6px; }
.badge { font-size: 10px; padding: 0 6px; border-radius: 10px; background: #eee; }
.mic-green { color: #2e7d32; }
.mic-muted { color: #666; opacity: .8; }
/* Icon-only controls (no square/background) */
#meeting-room-toggle-list, .meeting-room-logout { border:none !important; background:transparent !important; width:auto !important; height:auto !important; padding:0 !important; line-height:normal !important; box-shadow:none !important; border-radius:0 !important; }
#meeting-room-toggle-list:hover, .meeting-room-logout:hover { background:transparent !important; }
/* 30% larger icons for these controls */
#meeting-room-toggle-list .meeting-room-icon, .meeting-room-logout .meeting-room-icon { width:26px; height:26px; }
@media (max-width: 420px) {
  #meeting-room-toggle-list .meeting-room-icon, .meeting-room-logout .meeting-room-icon { width:21px; height:21px; }
}