:root {
  /* Cores — marca IMND */
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-text-muted: #aaaaaa;
  --color-primary: #00babf;
  --color-primary-hover: #00d4da;
  --color-on-primary: #000000;

  /* Tipografia */
  --font-family: Arial, sans-serif;
  --font-size-title: 22px;
  --font-size-body: 14px;
  --font-size-button: 18px;
  --font-weight-button: 700;

  /* Espaçamento */
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 28px;

  /* Forma */
  --radius-button: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  font-family: var(--font-family);
  color: var(--color-text);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* 100% do container (iframe pai), não 100vh — evita scrollbar em painéis embutidos */
#meet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}

/* iframe inline deixa ~4px de gap e dispara overflow-y */
#meet > iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

#loading,
#error {
  text-align: center;
}

#error {
  display: none;
  padding: 0 var(--space-xl);
}

#loading h2,
#error h2 {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-title);
}

#error-hint {
  display: none;
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 28rem;
}

button {
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

button:hover {
  background: var(--color-primary-hover);
}