/* ============================================================
   Comment mode — chat-integrated freeform pin-and-describe.
   Click anywhere on the 3D stage while active, crop a snapshot
   around the cursor, describe it, and it posts straight into
   the chat as a user turn. No separate log/thread panel.
   ============================================================ */

/* Rail button active state reuses .ec-rail-btn.active (shell.css) automatically
   since the "comment" action button shares that class — no override needed. */

/* Crosshair cursor + subtle stage tint while comment mode is armed. */
#viewport.ec-comment-active {
  cursor: crosshair;
}
#viewport.ec-comment-active #scene {
  cursor: crosshair;
}

/* Small non-blocking hint pill, top-center of the stage. */
.ec-comment-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--rail, rgba(20, 15, 9, .92));
  border: 1px solid var(--line, rgba(240, 228, 210, .10));
  color: var(--text, #f1e9db);
  font: 500 12.5px/1.3 var(--font-ui, system-ui, sans-serif);
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(0,0,0,.35));
  pointer-events: none;
  white-space: nowrap;
}
.ec-comment-hint .ec-comment-hint-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--amber, #ec9a3c);
  flex: none;
}

/* Floating popover anchored near the click point. */
.ec-comment-popover {
  position: fixed;
  z-index: 2200;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: var(--panel, #131009);
  border: 1px solid var(--line, rgba(240, 228, 210, .10));
  border-radius: var(--radius, 11px);
  box-shadow: var(--shadow, 0 24px 60px rgba(0,0,0,.45));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text, #f1e9db);
  font-family: var(--font-ui, system-ui, sans-serif);
}

.ec-comment-popover-thumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-comment-popover-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line, rgba(240, 228, 210, .10));
  flex: none;
  background: var(--panel-2, #1c160f);
}
.ec-comment-popover-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #f1e9db);
}
.ec-comment-popover-sub {
  font-size: 11px;
  color: var(--muted, #b8ac99);
  margin-top: 1px;
}

.ec-comment-popover textarea {
  width: 100%;
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
  padding: 8px 10px;
  border-radius: calc(var(--radius, 11px) - 3px);
  border: 1px solid var(--line, rgba(240, 228, 210, .10));
  background: var(--panel-2, #1c160f);
  color: var(--text, #f1e9db);
  /* ≥16px kills iOS Safari's focus auto-zoom. */
  font: 400 16px/1.4 var(--font-ui, system-ui, sans-serif);
  box-sizing: border-box;
}
.ec-comment-popover textarea:focus {
  outline: none;
  border-color: var(--amber, #ec9a3c);
}
.ec-comment-popover textarea::placeholder {
  color: var(--faint, #867c6e);
}

.ec-comment-popover-note {
  font-size: 11px;
  color: var(--muted, #b8ac99);
  line-height: 1.4;
  margin: 0;
}

.ec-comment-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.ec-comment-btn {
  appearance: none;
  border: 1px solid var(--line, rgba(240, 228, 210, .10));
  background: transparent;
  color: var(--text, #f1e9db);
  border-radius: calc(var(--radius, 11px) - 3px);
  padding: 6px 12px;
  font: 600 12px/1.2 var(--font-ui, system-ui, sans-serif);
  cursor: pointer;
}
.ec-comment-btn:hover {
  border-color: var(--muted, #b8ac99);
}
.ec-comment-btn.ec-comment-btn-primary {
  background: var(--amber, #ec9a3c);
  border-color: var(--amber, #ec9a3c);
  color: var(--amber-ink, #1c1304);
}
.ec-comment-btn.ec-comment-btn-primary:hover {
  filter: brightness(1.05);
}
.ec-comment-btn.ec-comment-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 640px) {
  .ec-comment-popover { width: 240px; }
  .ec-comment-hint { font-size: 11.5px; padding: 7px 12px; }
}