/* Le Carré TV - Widget System Styles */

/* ============ Floating Container ============ */
/* Container for floating widgets - covers entire screen but doesn't block events */
.widget-floating-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2000;
}

/* ============ Widget Base ============ */
.tv-widget {
  position: absolute;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.85);
  border: calc(2px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.15);
  border-radius: calc(12px * var(--ui-scale, 1));
  /* backdrop-filter removed for performance - increased opacity to compensate */
  overflow: visible;
  user-select: none;
}

.tv-widget.anchored {
  z-index: 50;
}

.tv-widget.floating {
  z-index: 2000;
}

/* ============ Widget Content ============ */
.widget-content {
  width: 100%;
  height: 100%;
  padding: calc(8px * var(--ui-scale, 1));
  overflow: hidden;
}

/* ============ Grab Handle ============ */
/* Small grab icon in top-left corner - visible when unlocked */
.widget-grab-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(24px * var(--ui-scale, 1));
  height: calc(24px * var(--ui-scale, 1));
  background: rgba(74, 222, 128, 0.3);
  border-bottom-right-radius: calc(8px * var(--ui-scale, 1));
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s;
  z-index: 10;
}

/* Grip pattern icon */
.widget-grab-handle::before {
  content: '\2630';  /* Trigram for heaven (three horizontal lines) */
  font-size: calc(12px * var(--ui-scale, 1));
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(90deg);
}

/* Show handle when widget is unlocked */
.tv-widget.unlocked .widget-grab-handle {
  opacity: 1;
  pointer-events: auto;
}

.tv-widget.unlocked .widget-grab-handle.hover {
  background: rgba(74, 222, 128, 0.5);
}

/* Grabbing state */
.tv-widget.dragging .widget-grab-handle {
  cursor: grabbing;
  background: rgba(74, 222, 128, 0.7);
}

/* ============ Resize Anchors ============ */
/* Four corner resize handles - visible when in editing mode */
.widget-resize-anchor {
  position: absolute;
  width: calc(16px * var(--ui-scale, 1));
  height: calc(16px * var(--ui-scale, 1));
  background: #22d3ee;
  border: calc(2px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.6);
  border-radius: calc(4px * var(--ui-scale, 1));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.1s;
  z-index: 11;
}

/* Show anchors when widget is in editing mode (grab handle clicked) */
.tv-widget.editing .widget-resize-anchor {
  opacity: 1;
  pointer-events: auto;
}

.widget-resize-anchor.hover {
  transform: scale(1.2);
  background: #67e8f9;
}

/* Position and cursor for each corner */
.widget-resize-nw {
  top: calc(-8px * var(--ui-scale, 1));
  left: calc(-8px * var(--ui-scale, 1));
  cursor: nw-resize;
}

.widget-resize-ne {
  top: calc(-8px * var(--ui-scale, 1));
  right: calc(-8px * var(--ui-scale, 1));
  cursor: ne-resize;
}

.widget-resize-sw {
  bottom: calc(-8px * var(--ui-scale, 1));
  left: calc(-8px * var(--ui-scale, 1));
  cursor: sw-resize;
}

.widget-resize-se {
  bottom: calc(-8px * var(--ui-scale, 1));
  right: calc(-8px * var(--ui-scale, 1));
  cursor: se-resize;
}

/* ============ Widget States ============ */
.tv-widget.dragging {
  opacity: 0.85;
  box-shadow: 0 calc(10px * var(--ui-scale, 1)) calc(30px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.5);
}

.tv-widget.resizing {
  opacity: 0.9;
}

/* Editing mode - subtle border glow */
.tv-widget.editing {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 calc(10px * var(--ui-scale, 1)) rgba(34, 211, 238, 0.3);
}

/* ============ Key Indicator Widget ============ */
.widget-key-indicator {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.widget-key-indicator .widget-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(14px * var(--ui-scale, 1));
  margin-bottom: calc(6px * var(--ui-scale, 1));
  text-align: right;
  font-family: monospace;
}

.widget-key-indicator .widget-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(6px * var(--ui-scale, 1));
  min-height: calc(32px * var(--ui-scale, 1));
  flex: 1;
  align-content: flex-start;
}

.widget-key-indicator .widget-key {
  background: linear-gradient(to bottom, #4ade80, #22c55e);
  color: black;
  padding: calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border-radius: calc(4px * var(--ui-scale, 1));
  font-weight: bold;
  font-size: calc(16px * var(--ui-scale, 1));
  font-family: monospace;
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.3);
}

/* ============ Clock Widget ============ */
.widget-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.widget-clock .clock-time {
  font-size: calc(32px * var(--ui-scale, 1));
  font-weight: 300;
  font-family: monospace;
  color: white;
  letter-spacing: calc(2px * var(--ui-scale, 1));
}

.widget-clock .clock-seconds {
  font-size: calc(20px * var(--ui-scale, 1));
  opacity: 0.6;
  margin-left: calc(4px * var(--ui-scale, 1));
}

/* ============ Nexa Placeholder Widget ============ */
.widget-nexa {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(14px * var(--ui-scale, 1));
  font-style: italic;
}