/* Emkay's layer over ovos-visage: boot screen, mic hint, typing. */
html, body { background: #000; margin: 0; height: 100%; overflow: hidden; }
body { font-family: system-ui, sans-serif; color: #fff; -webkit-tap-highlight-color: transparent; }

.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: #000; z-index: 50; text-align: center; padding: 24px; }
.boot[hidden] { display: none; }
.boot h1 { font-weight: 300; letter-spacing: .3em; margin: 0; font-size: 28px; }
.boot p { margin: 0; color: #9aa; }
.boot .small { position: absolute; bottom: 24px; font-size: 12px; color: #567; }
.boot .small a { color: #789; }
.boot-face { display: flex; gap: 60px; margin-bottom: 18px; }
.boot-face span { width: 54px; height: 54px; border-radius: 50%; border: 6px solid #555;
  border-top-color: #fff; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar { width: 220px; height: 4px; background: #222; border-radius: 2px; overflow: hidden; }
.bar div { height: 100%; width: 0; background: #22a7f0; transition: width .2s; }
#start, #first-setup { margin-top: 18px; font-size: 18px; padding: 16px 32px; border-radius: 40px; border: 0;
  background: #22a7f0; color: #fff; }
/* first start: "Sæt op" is the main button, starting on the defaults the quiet one */
.first { display: flex; flex-direction: column; align-items: center; max-width: 300px;
  margin-top: 22px; text-align: center; }
.first[hidden] { display: none; }
.first p { font-size: 14px; line-height: 1.45; }
#start.quiet { margin-top: 12px; background: transparent; color: #9cd3f5; border: 1px solid #22a7f0; }

/* the whole screen is the talk button; this is only the hint in the corner */
.mic { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; border: 0; background: #333; z-index: 20; pointer-events: none; }
.mic.listening { background: #22a7f0; box-shadow: 0 0 0 8px #22a7f055; }
.mic.thinking { background: #888; }
.mic.muted { background: #ff5c5c55; }   /* the listener is muted (panel, voice) */

.keyboard { position: fixed; right: 12px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 30;
  background: none; border: 0; color: #444; font-size: 22px; }
.type { position: fixed; left: 12px; right: 52px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 30; }
.type input { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 14px; border-radius: 20px;
  border: 1px solid #333; background: #111; color: #fff; }

/* the menu: a corner button and a card over the screen */
.menu-button { position: fixed; right: 12px; top: max(10px, env(safe-area-inset-top)); z-index: 30;
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  background: #ffffff1f; color: #ddd; font-size: 24px; line-height: 44px; }
.menu { position: fixed; inset: 0; z-index: 60; background: #000c; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.menu[hidden] { display: none; }
.menu-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px;
  background: #111; border: 1px solid #222; border-radius: 24px; padding: 24px; }
.menu-card h2 { margin: 0; font-weight: 300; letter-spacing: .25em; text-align: center; }
.menu-card button { font-size: 16px; padding: 14px; border-radius: 14px; border: 0;
  background: #22a7f0; color: #fff; }
.menu-card button.secondary { background: #222; }
.menu-card .small { margin: 0; font-size: 12px; color: #789; text-align: center; }
.menu-card a { color: #8ab; }

/* On a phone the phone is the device: no Mark II drawing, the screen fills
   the display (app.js layout() sets html.fullscreen and --screen-h). */
html.fullscreen, html.fullscreen body { background: var(--page-bg); }
/* visage centres the device with left/top 50% and a transform; unscaled it
   sticks out past the right edge, and a phone then widens the whole page
   to fit it (everything looks zoomed out). Fixed boxes do not widen it. */
.device { position: fixed; }
html.fullscreen .silhouette { display: none; }
html.fullscreen .device { width: var(--screen-w); height: var(--screen-h); }
html.fullscreen .screen { left: 0; top: 0; border-radius: 0; }

/* the OpenVoiceOS settings (ovos-control-panel) over the whole screen */
.panel { position: fixed; inset: 0; z-index: 70; background: #05070a; }
.panel[hidden] { display: none; }
.panel iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel-close { position: fixed; right: 10px; top: max(8px, env(safe-area-inset-top)); z-index: 71;
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: #000a; color: #fff;
  font-size: 24px; line-height: 40px; padding: 0; }

/* shut down (device.js): a dark screen with one quiet line */
.off { position: fixed; inset: 0; z-index: 100; background: #000; color: #345;
  display: flex; align-items: center; justify-content: center; font-size: 14px; }
.off[hidden] { display: none; }

/* the language changed: one button to restart into it (app.js), above the
   panel so it is seen right where the language was chosen */
.restart-lang { position: fixed; left: 50%; transform: translateX(-50%); z-index: 80;
  bottom: max(16px, env(safe-area-inset-bottom)); padding: 10px 18px; border-radius: 22px;
  border: 0; background: #22a7f0; color: #fff; font-size: 15px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.restart-lang[hidden] { display: none; }