/* feedback.css - paint for the "Leave feedback" dock affordance. It rides the
   TOP slot of the shared bottom-right dock column (above the Help pill and the
   Ask-AI pill). aero.css owns the column geometry (the .ti-feedback-launch
   position + z, lifted clear of the two pills below it, plus the .ti-fb-panel
   anchor), so this file paints only. The three pills stack and never overlap at
   1280 or 375. Tokens are the shared Datum set, so the same paint reads in light
   and dark, both WCAG-AA. The cyan accent marks the affordance; gold stays
   reserved for the deliverable. */

.ti-feedback-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface, #15181E);
  color: var(--text, #E7EAEE);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.32));
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ti-feedback-launch:hover { background: var(--accent-pale, rgba(84, 199, 224, 0.12)); }
.ti-feedback-launch:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }
.ti-feedback-launch-glyph {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent, #54C7E0);
  color: var(--bg, #0E1014);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}
.ti-feedback-launch-label { white-space: nowrap; }

/* the panel: same chassis as the Ask-AI panel so the dock feels of a piece.
   width-capped to the viewport, scrolls inside if a short screen needs it. */
.ti-fb-panel {
  width: min(340px, 92vw);
  /* the panel is anchored by its bottom (aero.css), three pill rows up. Cap
     the height to what fits between that anchor and a small top margin, so the
     top never runs off a short phone screen. The subtracted block matches the
     aero.css bottom anchor: inset + (item-h + gap) * 3, plus a 12px margin. */
  max-height: calc(100vh - var(--dock-inset-bottom, 18px)
    - (var(--dock-item-h, 44px) + var(--dock-gap, 12px)) * 3 - 12px);
  display: none;
  flex-direction: column;
  background: var(--surface-2, #1C2027);
  border: 1px solid var(--border, #2A2F38);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 6px 22px rgba(0, 0, 0, 0.40));
  overflow-y: auto;
  font-family: var(--sans, system-ui, sans-serif);
}
.ti-fb-panel.is-open { display: flex; }

.ti-fb-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px;
}
.ti-fb-title { margin: 0; font-size: 16px; color: var(--text, #E7EAEE); letter-spacing: -0.01em; }
.ti-fb-close {
  background: none; border: none; color: var(--text-dim, #9AA2AD);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ti-fb-close:hover { color: var(--text, #E7EAEE); }
.ti-fb-close:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }

.ti-fb-intro {
  margin: 0; padding: 0 16px 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim, #9AA2AD);
}

.ti-fb-form { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }
.ti-fb-label { font-size: 12px; font-weight: 600; color: var(--text, #E7EAEE); }

.ti-fb-note {
  width: 100%; box-sizing: border-box; min-width: 0;
  background: var(--surface, #15181E);
  border: 1px solid var(--border, #2A2F38);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--text, #E7EAEE);
  font-size: 13.5px; line-height: 1.5;
  font-family: var(--sans, system-ui, sans-serif);
  resize: vertical;
}
.ti-fb-note::placeholder { color: var(--text-dim, #9AA2AD); }
.ti-fb-note:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 1px; }

/* the read-only page line: a quiet tag plus the page label, never editable */
.ti-fb-page-row {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--accent-pale, rgba(84, 199, 224, 0.12));
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  border-radius: 8px;
  padding: 7px 10px;
}
.ti-fb-page-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep, #8BDCEE);
  flex: 0 0 auto;
}
.ti-fb-page-val {
  font-size: 12.5px; color: var(--text, #E7EAEE);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ti-fb-ratings { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-fb-rating {
  background: var(--surface, #15181E);
  border: 1px solid var(--border, #2A2F38);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--text-dim, #9AA2AD);
  cursor: pointer;
  font-family: var(--sans, system-ui, sans-serif);
}
.ti-fb-rating:hover { border-color: var(--border-accent, rgba(84, 199, 224, 0.30)); color: var(--text, #E7EAEE); }
.ti-fb-rating:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }
.ti-fb-rating.is-on {
  background: var(--accent-soft, rgba(84, 199, 224, 0.18));
  border-color: var(--border-accent, rgba(84, 199, 224, 0.30));
  color: var(--text, #E7EAEE);
  font-weight: 600;
}

.ti-fb-status {
  min-height: 18px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--text-dim, #9AA2AD);
}
.ti-fb-status.is-ok { color: var(--ok, #4BBF86); font-weight: 600; }
.ti-fb-status.is-error { color: var(--warn, #E5786C); font-weight: 600; }

.ti-fb-actions { display: flex; justify-content: flex-end; }
.ti-fb-send {
  background: var(--accent-pale, rgba(84, 199, 224, 0.12));
  color: var(--accent-deep, #8BDCEE);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  font-family: var(--sans, system-ui, sans-serif);
}
.ti-fb-send:hover { background: var(--accent-soft, rgba(84, 199, 224, 0.18)); }
.ti-fb-send:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }
.ti-fb-send:disabled { opacity: 0.6; cursor: default; }

/* motion: a gentle reveal that the reduced-motion guard drops */
@media (prefers-reduced-motion: no-preference) {
  .ti-fb-panel.is-open { animation: tiFbIn 0.18s ease; }
}
@keyframes tiFbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ti-fb-panel, .ti-feedback-launch { transition: none; animation: none; }
}

/* phone: the dock column tightens via the shared --dock-inset vars in
   aero.css, so the pill + panel follow without a hard override here. Under the
   help-button breakpoint the pill drops to a compact glyph-only puck so the
   three-pill column stays clear of the gate dock that goes static under 820px. */
@media (max-width: 820px) {
  .ti-feedback-launch { padding: 8px; }
  .ti-feedback-launch-label { display: none; }
}