* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; color: #fff; font-family: sans-serif; }

/* Login */
.login-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #111; z-index: 1000; }
.login-form { display: flex; flex-direction: column; gap: 12px; padding: 40px; background: #222; border-radius: 8px; min-width: 300px; }
.login-form h1 { text-align: center; margin-bottom: 8px; }
.login-form input { padding: 10px; border: 1px solid #444; border-radius: 4px; background: #333; color: #fff; font-size: 14px; }
.login-form button { padding: 10px; border: none; border-radius: 4px; background: #0066cc; color: #fff; font-size: 14px; cursor: pointer; }
.login-error { color: #f44; font-size: 13px; text-align: center; }

/* Workspace */
.workspace { position: fixed; inset: 0; overflow: hidden; }
.workspace-surface { position: absolute; top: 0; left: 0; will-change: transform; }

/* Status bar */
.status-bar { position: fixed; top: 8px; right: 8px; display: flex; gap: 8px; align-items: center; z-index: 100; opacity: 0.6; transition: opacity 0.3s; }
.status-bar:hover { opacity: 1; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #f44; }
.status-dot.connected { background: #4f4; }
.edit-indicator { font-size: 11px; background: #f90; color: #000; padding: 2px 8px; border-radius: 3px; font-weight: bold; }

/* Widget containers */
.widget-container { position: absolute; }
.widget-container.editable { outline: 2px dashed rgba(255, 153, 0, 0.5); cursor: move; }
.widget-container.dragging { opacity: 0.7; z-index: 999; }
.widget-container.selected {
  outline: 2px solid rgba(0, 153, 255, 0.8);
  outline-offset: 4px;
}

/* Edit mode */
.workspace.edit-mode { cursor: default; }

/* Bridge token dialog */
dialog { background: #222; color: #fff; border: 1px solid #444; border-radius: 8px; padding: 24px; }
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog h2 { margin-bottom: 12px; }
dialog code { display: block; padding: 12px; background: #111; border-radius: 4px; font-size: 12px; word-break: break-all; margin: 12px 0; user-select: all; }
dialog button { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; margin-right: 8px; }
dialog button:first-of-type { background: #0066cc; color: #fff; }
dialog button:last-of-type { background: #444; color: #fff; }


/* Grille visible en mode édition — carrés 10px, origine bas-droite */
.workspace.edit-mode {
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: bottom right;
}

/* Bouton reset scale sur widget sélectionné */
.reset-scale-btn {
  position: absolute;
  top: -30px;
  right: 0;
  padding: 3px 8px;
  background: rgba(0, 153, 255, 0.8);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  z-index: 200;
  pointer-events: auto;
}
.reset-scale-btn:hover {
  background: rgba(0, 153, 255, 1);
}