/* /samples/assistant.css — scoped styling for the shared talking-assistant workspace.
   Loaded after theme.css on every sample page. Only .assistant-* and .assistant-host are styled,
   so this file can be dropped into an existing site without repainting that site's own layout. */

.assistant-host { margin: 1.5rem 0; }

.assistant-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  font: inherit;
}
.assistant-workspace.is-inline { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .assistant-workspace { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .assistant-face, .assistant-notes { height: auto; min-height: 0; }
  .assistant-notes-area { min-height: 10rem; flex: 0 0 auto; }
}

/* --- left: speaking panel -------------------------------------------------------- */
.assistant-face {
  display: flex; flex-direction: column; gap: .6rem;
  min-height: 0; height: 100%;
  min-height: 0; height: 100%;
  background: #05070c; border: 1px solid #1b2130; border-radius: 14px; overflow: hidden;
}
.assistant-stage {
  position: relative;            /* the clipped box */
  overflow: hidden;              /* contains the SDK canvas */
  aspect-ratio: 4 / 3;   /* landscape-ish per AETNA, not a huge tall portrait */
  background: #05070c;
}
.assistant-still {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .5; filter: saturate(.85) brightness(.8);
}
.assistant-mount {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; z-index: 2;
}
/* The avatar SDK sets its own inline position; !important keeps the canvas inside the box
   instead of leaking a fixed fullscreen layer over the page. */
.assistant-mount, .assistant-mount canvas, .assistant-mount > div {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: 100% !important; max-height: 100% !important;
  right: auto !important; bottom: auto !important;
  border-radius: 0 !important;
}
.assistant-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: .6rem .8rem;
  background: linear-gradient(to top, rgba(3,5,10,.92), rgba(3,5,10,0));
}
.assistant-role {
  display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #d9e1f2; background: rgba(255,255,255,.08); border-radius: 999px; padding: .15rem .55rem;
}
.assistant-status { margin: .4rem 0 0; font-size: .84rem; color: #a9b4c7; min-height: 1.2em; }

.assistant-voice { display: flex; gap: .5rem; padding: .6rem .8rem .8rem; }

/* --- right: digital notes board -------------------------------------------------- */
.assistant-notes {
  background: #07090e; border: 1px solid #1b2130; border-radius: 14px; padding: .8rem;
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 0; height: 100%;
  overflow: auto;          /* long notes scroll inside, never stretch the row */
}
.assistant-notes-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.assistant-eyebrow { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #8f9cb3; }
.assistant-tag { font-size: .72rem; color: #9ad1a8; border: 1px solid #27452f; border-radius: 999px; padding: .1rem .5rem; }
.assistant-notes-area {
  flex: 1 1 auto; min-height: 14rem; resize: vertical; width: 100%; box-sizing: border-box;
  background: #0b0f16; color: #e7ecf5; border: 1px solid #232b3b; border-radius: 10px;
  padding: .65rem .7rem; font: inherit; line-height: 1.5;
}
.assistant-sub { margin: 0; font-size: .78rem; color: #8f9cb3; }
.assistant-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* --- conversation ---------------------------------------------------------------- */
.assistant-thread { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; }
.assistant-log {
  max-height: 22rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem;
  padding: .7rem; background: #07090e; border: 1px solid #1b2130; border-radius: 12px;
}
.assistant-bubble { border-radius: 10px; padding: .5rem .65rem; max-width: 88%; }
.assistant-bubble.user { align-self: flex-end; background: #16233a; border: 1px solid #24354f; }
.assistant-bubble.assistant { align-self: flex-start; background: #101620; border: 1px solid #222b3b; }
.assistant-bubble.system { align-self: center; background: #2a1d1d; border: 1px solid #4a2b2b; }
.assistant-bubble-head { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #93a1b8; margin-bottom: .2rem; }
.assistant-bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; color: #e7ecf5; line-height: 1.5; }

.assistant-form { display: flex; flex-direction: column; gap: .4rem; }
.assistant-input {
  width: 100%; box-sizing: border-box; min-height: 3.2rem; resize: vertical;
  background: #0b0f16; color: #e7ecf5; border: 1px solid #232b3b; border-radius: 10px;
  padding: .55rem .65rem; font: inherit;
}

/* --- buttons --------------------------------------------------------------------- */
.assistant-workspace button {
  font: inherit; cursor: pointer; border-radius: 999px; padding: .45rem .9rem;
}
.assistant-workspace button { border: 1px solid #2c374d; background: #131a26; color: #e7ecf5; }
.assistant-workspace button:hover:not(:disabled) { background: #1a2333; }
.assistant-workspace button:disabled { opacity: .5; cursor: not-allowed; }
.assistant-workspace .btn-start, .assistant-workspace .btn-send { background: #1d4ed8; border-color: #2b5ce6; color: #fff; }
.assistant-workspace .btn-stop { background: #7f1d1d; border-color: #a02a2a; color: #fff; font-weight: 600; }
.assistant-workspace .btn-warn { border-color: #6b3a2a; color: #f0c9b4; }

/* --- summary --------------------------------------------------------------------- */
.assistant-summary { grid-column: 1 / -1; background: #07090e; border: 1px solid #1b2130; border-radius: 12px; padding: .8rem; }
.assistant-h3 { margin: 0 0 .5rem; font-size: 1rem; }
.assistant-summary-list { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .25rem .8rem; margin: 0 0 .6rem; }
.assistant-summary-list dt { color: #8f9cb3; font-size: .84rem; }
.assistant-summary-list dd { margin: 0; color: #e7ecf5; font-size: .9rem; }