:root {
  color-scheme: light dark;
  --bg: #10141a;
  --panel: #1b212b;
  --text: #e8ecf1;
  --muted: #8a94a3;
  --accent: #4f8cff;
  --danger: #ff5c5c;
  --online: #3ecf6a;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app {
  height: 100%;
}

.screen {
  display: none;
  height: 100%;
  padding: 1.5rem;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
}

.card {
  background: var(--panel);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.card input {
  background: var(--bg);
  border: 1px solid #2a3140;
  border-radius: 8px;
  color: var(--text);
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
}

button {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0;
}

.success {
  color: var(--online);
  font-size: 0.9rem;
  margin: 0;
}

.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(245, 166, 35, 0.15);
  border-bottom: 1px solid #f5a623;
  color: #f5a623;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

/* La regle ci-dessus (display:flex) l'emporte sinon sur la regle [hidden] de
   la feuille de style par defaut du navigateur (meme specificite qu'un
   selecteur de classe, mais l'ordre de declaration ici est plus tardif) -
   bug reel constate : la banniere s'affichait en permanence des le
   chargement de la page, avant meme toute simulation de compte, jusqu'a ce
   qu'un evenement JS d'impersonation la cache explicitement. */
.impersonation-banner[hidden] {
  display: none;
}

.impersonation-banner button {
  background: transparent;
  border: 1px solid #f5a623;
  color: #f5a623;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

.profile-email {
  font-weight: 600;
  margin: 0 0 1rem;
}

.profile-must-change-hint {
  color: #f5a623;
  font-size: 0.9rem;
  margin: 0 0 1rem;
  max-width: 360px;
}

.profile-impersonation-note {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid #f5a623;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile-impersonation-note p {
  margin: 0;
  font-size: 0.9rem;
  color: #f5a623;
}

.profile-impersonation-note button {
  background: transparent;
  border: 1px solid #f5a623;
  color: #f5a623;
  align-self: flex-start;
}

.admin-account-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 640px;
}

.admin-account-item {
  background: var(--panel);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-account-email {
  flex: 1;
  font-weight: 600;
  min-width: 12rem;
}

.admin-account-status {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.admin-account-status.active {
  background: rgba(62, 207, 106, 0.15);
  color: var(--online);
}

.admin-account-status.inactive {
  background: rgba(255, 92, 92, 0.15);
  color: var(--danger);
}

.admin-impersonate-button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.auth-mode-toggle {
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
}

.auth-mode-toggle a {
  color: var(--accent);
}

.device-revoke-button {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.welcome-header {
  text-align: center;
  margin-bottom: 2rem;
}

.welcome-header h1 {
  margin: 0;
}

.welcome-subtitle {
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.welcome-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}

.welcome-option-card {
  align-items: center;
  text-align: center;
  flex: 1 1 320px;
}

.welcome-option-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.welcome-option-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

.back-link {
  align-self: flex-start;
  background: transparent;
  color: var(--muted);
  padding: 0.3rem 0;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.quick-connect-form {
  margin-top: 1.5rem;
}

.devices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 480px;
}

.devices-header h1 {
  margin: 0 0 1rem;
}

.relay-latency-indicator {
  margin: -0.5rem 0 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal[hidden] {
  display: none;
}

.modal-content {
  background: var(--panel);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-content h2 {
  margin: 0;
  font-size: 1.1rem;
}

.pairing-instructions {
  margin: 0;
  font-size: 0.9rem;
}

.pairing-download-link {
  display: block;
  text-align: center;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  text-decoration: none;
}

.pairing-code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  margin: 0;
}

.pairing-countdown {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

.device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 480px;
}

.device-item {
  background: var(--panel);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.device-name-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0; /* permet a .device-note de tronquer plutot que de deborder */
}

.device-name {
  font-weight: 600;
}

.device-note {
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-note:hover {
  text-decoration: underline;
}

.device-note-empty {
  font-style: italic;
  opacity: 0.7;
}

.device-status {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.device-status.online {
  background: rgba(62, 207, 106, 0.15);
  color: var(--online);
}

.device-status.offline {
  background: rgba(138, 148, 163, 0.15);
  color: var(--muted);
}

.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
}

.session-status {
  color: var(--muted);
  margin: 0;
}

.leave-session-button {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.screen-toolbar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.switch-monitor-button {
  flex: 0 0 auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3140;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.toggle-audio-button {
  flex: 0 0 auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3140;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.toggle-audio-button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.audio-status-hint {
  flex: 0 0 auto;
  color: var(--danger);
  font-size: 0.8rem;
  align-self: center;
}

.toggle-virtual-keyboard-button {
  flex: 0 0 auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3140;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.toggle-virtual-keyboard-button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.remote-lock-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-left: 0.4rem;
}

.remote-lock-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.remote-lock-checkbox input[type="checkbox"] {
  cursor: pointer;
}

.virtual-keyboard-panel {
  position: fixed;
  top: 15vh;
  right: 5vw;
  z-index: 1000;
  background: var(--panel);
  border: 1px solid #2a3140;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  max-width: min(96vw, 62rem);
  overflow: auto;
  transition: transform 0.1s ease;
}

.virtual-keyboard-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid #2a3140;
  border-radius: 10px 10px 0 0;
  cursor: move;
  user-select: none;
  touch-action: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

.virtual-keyboard-title {
  flex: 0 0 auto;
}

.virtual-keyboard-modifier-indicator {
  flex: 1 1 auto;
  margin-left: 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #ffb454;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.virtual-keyboard-release-all {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  background: rgba(255, 180, 84, 0.15);
  color: #ffb454;
  border: 1px solid rgba(255, 180, 84, 0.4);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.virtual-keyboard-release-all:hover {
  background: rgba(255, 180, 84, 0.3);
}

.virtual-keyboard-resize {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid #2a3140;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.35rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.virtual-keyboard-resize:hover {
  color: var(--text);
  border-color: var(--accent);
}

.virtual-keyboard-close {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin-left: 0.35rem;
}

.virtual-keyboard-close:hover {
  color: var(--text);
}

.virtual-keyboard-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem;
}

.virtual-keyboard-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.virtual-keyboard-main {
  flex: 1 1 32rem;
  min-width: 22rem;
}

.virtual-keyboard-numpad {
  flex: 0 0 9rem;
  width: 9rem;
}

.virtual-keyboard-row {
  display: flex;
  gap: 0.2rem;
}

.virtual-key,
.virtual-key-spacer {
  flex: 1 1 0;
  min-width: 0;
}

.virtual-key {
  background: var(--bg);
  color: var(--text);
  border: 1px solid #2a3140;
  border-radius: 4px;
  padding: 0.45rem 0.2rem;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.virtual-key:hover {
  border-color: var(--accent);
}

.virtual-key:active {
  background: var(--accent);
  color: white;
}

.virtual-key-modifier.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .screen {
    padding: 0.75rem;
  }

  .virtual-keyboard-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100vw;
    border-radius: 10px 10px 0 0;
  }

  .virtual-keyboard-body {
    flex-direction: column;
  }

  .virtual-keyboard-main {
    /* Un clavier complet ~104 touches ne peut pas tenir sans defilement
       horizontal sur un ecran ~360-390px sans redessiner un sous-ensemble
       compact de touches (hors scope de cette passe). min-width:0 laisse le
       conteneur lui-meme retrecir sous 22rem (sinon il forcerait un
       debordement de toute la page) ; overflow-x:auto rend CE conteneur
       defilable. Mais flex:1 1 0 sur chaque touche (regle de base,
       non-mobile) les laisserait aussi retrecir jusqu'a l'illisibilite
       (libelles tronques en "F...", "E...") au lieu de vraiment defiler -
       flex:0 0 auto ci-dessous fige une largeur minimale lisible par touche,
       ce qui force le debordement (et donc le defilement) plutot que le
       rapetissement. */
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .virtual-keyboard-main .virtual-key,
  .virtual-keyboard-main .virtual-key-spacer {
    flex: 0 0 auto;
    min-width: 2.1rem;
  }

  .virtual-keyboard-numpad {
    width: auto;
  }
}

.session-canvas-wrap {
  flex: 1;
  /* hidden (pas auto) : le zoom pincer-a-2-doigts (session_view.js,
     _applyZoomTransform) gere lui-meme le deplacement de la vue zoomee via
     un CSS transform borne - un defilement natif du navigateur par-dessus
     entrerait en conflit avec ce bornage. Sans effet en dehors du zoom :
     #session-canvas garde max-width:100%, donc ne depasse jamais ce
     conteneur au niveau de zoom normal (1x). */
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #000;
  border-radius: 8px;
  /* Renforce sur toute la chaine d'ancetres (pas seulement #session-canvas) -
     Safari en particulier ignore touch-action s'il n'est pas pose sur tout
     le chemin, ce qui peut laisser passer un double-tap-zoom/scroll par
     defaut du navigateur en plus de notre propre geste tactile. */
  touch-action: none;
}

.session-canvas-stack {
  position: relative;
  display: inline-block;
  touch-action: none;
  /* 0 0 (coin haut-gauche), pas la valeur par defaut 50% 50% - le calcul de
     zoom "sous les doigts" dans _advanceTwoFingerPinch (session_view.js)
     suppose que scale() pivote depuis le coin haut-gauche du conteneur. */
  transform-origin: 0 0;
}

#session-canvas {
  display: block;
  max-width: 100%;
  touch-action: none;
  cursor: crosshair;
}

#session-cursor-canvas {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  pointer-events: none; /* ne doit jamais intercepter les evenements destines a #session-canvas */
}

.session-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.tab-button {
  background: transparent;
  color: var(--muted);
  border: 1px solid #2a3140;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

.tab-button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.session-panel {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.session-panel.active {
  display: flex;
}

.file-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.file-path {
  flex: 1;
  color: var(--muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-upload-label {
  background: var(--accent);
  color: white;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1;
  background: var(--panel);
  border-radius: 8px;
}

.file-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(138, 148, 163, 0.15);
}

.file-entry:hover {
  background: rgba(79, 140, 255, 0.08);
}

.file-entry.is-dir .file-name::before {
  content: "\1F4C1  ";
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.file-delete-button {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  flex: 0 0 auto;
}

.file-download-button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  flex: 0 0 auto;
}

.file-status {
  color: var(--muted);
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fa;
    --panel: #ffffff;
    --text: #1a1f27;
    --muted: #5b6472;
  }

  .card input {
    background: #f4f6fa;
    border-color: #d6dbe3;
  }
}