/* The assistant console (chat) */

.console { height: clamp(470px, 64vh, 600px); }
.console .bezel-core { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 30%); }
.console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--line);
}
.console-id { display: flex; align-items: center; gap: 0.7rem; }
.console-avatar {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bg-3); border: 1px solid var(--line-2);
}
.console-avatar svg { width: 15px; height: 15px; }
.console-name { font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.console-status { display: flex; align-items: center; gap: 0.45rem; color: var(--fg-3); margin-top: 0.15rem; }
.console-status .dot { width: 5px; height: 5px; box-shadow: none; }

.console-log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.1rem; display: flex; flex-direction: column; gap: 0.65rem;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  mask-image: linear-gradient(180deg, transparent 0, #000 1.2rem);
}
.msg {
  max-width: 88%; font-size: 0.93rem; line-height: 1.55; letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  animation: msg-in 420ms var(--ease-out) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.msg-bot { color: var(--fg); align-self: flex-start; }
.msg-user {
  align-self: flex-end; color: var(--fg);
  background: var(--bg-3); border: 1px solid var(--line-2);
  padding: 0.55rem 0.85rem; border-radius: 14px 14px 4px 14px;
}
.msg-typing { display: inline-flex; gap: 4px; padding: 0.4rem 0; }
.msg-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); animation: typing 1s var(--ease-in-out) infinite; }
.msg-typing i:nth-child(2) { animation-delay: 120ms; }
.msg-typing i:nth-child(3) { animation-delay: 240ms; }
@keyframes typing { 40% { transform: translateY(-3px); background: var(--fg-2); } }

.choices { display: flex; flex-wrap: wrap; gap: 0.4rem; align-self: flex-start; animation: msg-in 420ms var(--ease-out) both; }
.choices-heading { width: 100%; color: var(--fg-3); margin: 0.35rem 0 0.1rem; }
.chip {
  font-size: 0.84rem; letter-spacing: -0.005em;
  padding: 0.42rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: transform var(--press) var(--ease-out), border-color var(--hover) ease, background-color var(--hover) ease, color var(--hover) ease, opacity var(--hover) ease;
}
.chip:active:not(:disabled) { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not(:disabled) { border-color: var(--line-3); background: rgba(255, 255, 255, 0.06); }
}
.chip-slot { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0; }
.chip.is-picked { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); }
.choices.is-retired .chip:not(.is-picked) { opacity: 0.28; cursor: default; }

.receipt {
  align-self: stretch; border: 1px solid var(--line-2); border-radius: var(--radius-md);
  background: var(--bg-2); padding: 0.9rem 1rem; display: grid; gap: 0.55rem;
  animation: msg-in 520ms var(--ease-out) both;
}
.receipt-head { display: flex; align-items: center; gap: 0.5rem; color: var(--signal); }
.receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-size: 0.88rem; }
.receipt dt { color: var(--fg-3); }

.console-input {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.6rem; padding: 0.3rem 0.3rem 0.3rem 1rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg);
  transition: border-color var(--hover) ease;
}
.console-input:focus-within { border-color: var(--line-3); }
.console-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0.55rem 0; font-size: 0.93rem; }
.console-input input::placeholder { color: var(--fg-3); }
.console-send {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  display: grid; place-items: center; background: var(--bone); color: var(--bone-ink);
  transition: transform var(--press) var(--ease-out), opacity var(--hover) ease;
}
.console-send:active { transform: scale(0.92); }
.console-send svg { width: 14px; height: 14px; }
[data-busy] .console-send { opacity: 0.45; }
.console-noscript { padding: 1.1rem; color: var(--fg-2); font-size: 0.9rem; }

@media (max-width: 520px) {
  .console-bar > .mono { display: none; }
  .console-status { white-space: nowrap; }
}