/* assistant.css - the floating "Ask your AI" dock for the coordination
   proof-packet demo. It lives in the LOWER slot of the shared bottom-right
   dock column. aero.css owns the position + z (the .ti-ask / .ti-ask-panel
   geometry rules in the shared dock layer), so this file paints only. The Help
   pill rides one row above it, so the two never overlap. The whole column sits
   below the gate.js status dock (z 2147483646) so the gate is never occluded.
   Tokens are the Datum set (--accent cyan = info affordance; --gold stays
   reserved for the deliverable). */
.ti-ask { font-family: var(--sans); }
.ti-ask-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-pale); color: var(--accent-deep);
  border: 1px solid var(--border-accent); border-radius: 999px;
  padding: 11px 17px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.ti-ask-pill:hover { background: var(--accent-soft); }
.ti-ask-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ti-ask-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ti-ask-panel {
  width: min(360px, 92vw); height: min(520px, 76vh);
  display: none; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.ti-ask.is-open .ti-ask-panel { display: flex; }
.ti-ask.is-open .ti-ask-pill { display: none; }

.ti-ask-head { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ti-ask-head h4 { margin: 0; font-size: 16px; color: var(--text); letter-spacing: -0.01em; }
.ti-ask-note { font-size: 11px; color: var(--text-dim); margin-top: 3px; padding-right: 18px; line-height: 1.45; }
.ti-ask-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; }
.ti-ask-close:hover { color: var(--text); }
.ti-ask-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ti-ask-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ti-ask-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.ti-ask-msg.is-you { align-self: flex-end; background: var(--accent-soft); color: var(--text); border: 1px solid var(--border-accent); border-bottom-right-radius: 4px; }
.ti-ask-msg.is-ai { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }

.ti-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.ti-ask-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.ti-ask-chip:hover { border-color: var(--border-accent); color: var(--text); }
.ti-ask-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ti-ask-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.ti-ask-input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; color: var(--text); font-size: 13.5px; font-family: var(--sans); }
.ti-ask-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ti-ask-send { background: var(--accent-pale); color: var(--accent-deep); border: 1px solid var(--border-accent); border-radius: 10px; padding: 0 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ti-ask-send:hover { background: var(--accent-soft); }
.ti-ask-send:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) { .ti-ask-msg { animation: tiAskIn .2s ease; } }
@keyframes tiAskIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* phone: the dock column tightens via the shared --dock-inset vars in
   aero.css, so the pill + panel follow without a hard-coded override here.
   The expanded panel still anchors to the same corner, clear of the gate dock
   that goes static under 820px. */