/* App-control point-and-share panel — the floating right-click panel injected by
   ui/shared/js/app-control-point.js (the user-facing half of the App Control
   ability). It reuses the shared .chat-pill .chat-pill-1line skin (geometry in
   ui/shared/css/app1.css) for its message box; this file owns only the panel
   shell + the destination rows. Dark and light come for free from the
   design-system palette tokens (no hard-coded colours), so no body.light-mode
   block is needed. COLOR SCHEME → ui/shared/css/design-system.css.
   REMOVE-WHEN: the App Control ability is dropped from the ability catalog. */

.ac-point-panel {
  position: fixed;
  z-index: 9000;
  /* Never wider than the screen on a phone. */
  min-width: min(250px, calc(100vw - 16px));
  max-width: min(300px, calc(100vw - 16px));
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-elev);
  border: var(--border-width) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--fg-1);
  font: 500 13px/1.4 var(--font-sans);
}
.ac-point-panel.open { display: flex; }

.ac-point-head { display: flex; align-items: center; gap: 7px; color: var(--fg-2); }
.ac-point-head-icon { display: inline-flex; color: var(--accent); }
.ac-point-head-title { font-weight: 600; font-size: 13px; }

/* What was clicked — "label" · Page */
.ac-point-chip {
  font-size: 12px;
  color: var(--fg-3);
  background: var(--bg-1);
  border: var(--border-width) solid var(--border-soft);
  border-radius: 8px;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two destination rows — "Send to current chat" and "Send to new chat widget".
   Each is a one-click send: a leading glyph, a stacked label + target-agent
   (icon + name) the message lands on, and a hover-revealed go arrow. */
.ac-point-rows { display: flex; flex-direction: column; gap: 4px; }
.ac-point-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin: 0;
  background: none;
  border: var(--border-width) solid var(--border-soft);
  border-radius: 10px;
  color: var(--fg-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ac-point-row:hover { background: var(--accent-soft); border-color: var(--accent); }

.ac-point-row-lead {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--accent);
}

.ac-point-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-point-row-title { font-weight: 600; font-size: 13px; }

/* The agent the message lands on — small icon + name beneath the row title. */
.ac-point-row-agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--fg-3);
}
.ac-point-row-agent-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
}
.ac-point-row-agent-icon svg { width: 14px; height: 14px; }
.ac-point-row-agent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hover-revealed one-click send affordance on the right of each row. */
.ac-point-row-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--fg-4);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ac-point-row:hover .ac-point-row-go { opacity: 1; }

/* Touch devices have no :hover, so always reveal the go arrow (the panel is
   opened by long-press there). */
@media (hover: none) {
  .ac-point-row-go { opacity: 1; }
}

/* The message box is the shared compact pill, widened to fill the panel and
   grown to a multi-line composer (a few lines tall) with the send button pinned
   to the bottom-right. */
.ac-point-panel .ac-point-pill { width: 100%; max-width: none; }
.ac-point-panel .ac-point-input {
  min-height: 104px;
  max-height: 150px;
  overflow-y: auto;
}
.ac-point-panel .ac-point-pill .chat-pill-send { align-self: end; }