/*
  companion.css — Transaction Companion Tray
  Inherits design tokens from main.css (--font-*, --size-*, --sp-*, --surface, --border, etc.)
  Type rules: labels/status/guidance → --font-ui; technical values → --font-mono; min size → --size-sm.
  Do not introduce new color values. Monochrome only.
*/

/* ---- Tray container ---- */
.companion {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  outline: 1px solid var(--border-2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 0 rgba(255, 255, 255, 0.05),
    0 4px 18px rgba(0, 0, 0, 0.5);
}

.transfer-portal > .companion {
  max-width: none;
  margin: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* ---- Collapsed bar ---- */
.companion-bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.companion-bar:hover {
  background: var(--surface-2);
}

.companion-bar:focus-visible {
  outline: 1px solid var(--border-2);
  outline-offset: -1px;
}

/* Pulse dot — same treatment as .wallet-dot */
.companion-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background 0.2s;
}

.companion.is-open .companion-indicator,
.companion.is-active .companion-indicator {
  background: var(--white);
}

.companion.companion--error .companion-indicator {
  background: var(--warn);
}

.companion.companion--warning .companion-indicator {
  background: var(--telemetry-amber);
}

/* Status line — human-readable state string, not technical data → UI font */
.companion-status {
  font-family: var(--font-ui);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--dim);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.companion.companion--error .companion-status {
  color: var(--warn);
}

.companion.companion--warning .companion-status {
  color: var(--telemetry-amber-dim);
}

/* Chevron toggle — points DOWN when collapsed (tap to expand below) */
.companion-toggle {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--dim);
  flex-shrink: 0;
  transition: transform 0.18s ease-out, border-top-color 0.12s;
}

.companion-bar:hover .companion-toggle,
.companion-bar:focus-visible .companion-toggle {
  border-top-color: var(--dim);
}

/* Rotate to point UP when open (tap to collapse) */
.companion.is-open .companion-toggle {
  transform: rotate(180deg);
  border-top-color: var(--white);
}

/* ---- Detail panel — expands downward below bar ---- */
.companion-detail {
  overflow: hidden;
  border-top: 0px solid var(--border);
  /* height and transition managed by JS animation */
}

.companion.is-open .companion-detail {
  border-top-width: 1px;
}

/* ---- Detail body ---- */
.companion-body {
  padding: 0.75rem 2rem 0.9rem;
  display: flex;
  flex-direction: column;
}

/* Data rows — same pattern as .data-row in main.css */
.companion-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.companion-row:last-child {
  border-bottom: none;
}

.companion-k {
  font-family: var(--font-ui);     /* row label — not data */
  font-size: var(--size-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.companion-v {
  font-family: var(--font-mono);   /* technical values: amounts, state codes, chain data */
  font-size: var(--size-xs);       /* 11px — same visual size, now tokenized */
  color: var(--dim);
  text-align: right;
  padding-left: 1rem;
  max-width: min(68ch, 70%);
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.companion.is-active .companion-v,
.companion.is-active .companion-action {
  color: var(--dim);
}

/* Next-step action value — guidance prose, not a technical value */
.companion-action {
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: var(--size-sm);
}

/* Action link — inline link text, not technical data */
.companion-action-link {
  font-family: var(--font-ui);
  font-size: var(--size-sm);
  color: var(--dim);
  text-decoration: none;
  transition: color 0.12s;
}

.companion-action-link:hover,
.companion-action-link:focus-visible {
  color: var(--white);
}

.companion-action-link:focus-visible {
  outline: 1px solid var(--dim);
  outline-offset: 2px;
}

.companion-v.is-error,
.companion-action.is-error {
  color: var(--warn);
}

.companion-v.is-warning,
.companion-action.is-warning {
  color: var(--telemetry-amber-dim);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .companion-bar {
    padding: 0 1rem;
  }

  .companion-body {
    padding: 0.75rem 1rem 1rem;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .companion-toggle {
    transition: none;
  }
}