/* Billy — AI assistant panel. Built for a narrow side panel (≈ 360–440 px) inside the
   smart-me portal, but works full-width too. Only smart-me tokens, no own palette. */

html, body { height: 100%; }
body { margin: 0; background: var(--sm-bg); color: var(--sm-text); font-family: var(--sm-font); font-size: 14.5px; }

.by { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; }

/* Views are switched with the hidden attribute; don't let a display rule below revive them. */
.by [hidden] { display: none !important; }

/* ---------- header ---------- */
.by-head {
  display: flex; align-items: center; gap: var(--sm-space-3);
  padding: var(--sm-space-3) var(--sm-space-4);
  border-bottom: 1px solid var(--sm-blue-10pct);
  flex: 0 0 auto;
}
/* Billy's portrait: the smart-me cloud, blinking and glancing around (billy-avatar.svg); while he works
   billy.js swaps in billy-thinking.svg (eyes up, drifting). */
.by-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--sm-blue-10pct);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sm-blue-25pct);
}
/* In the portal's side panel the panel draws the header (?embedded=portal). */
.by-embedded .by-head { display: none; }
.by-head__text { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.by-head__text strong { color: var(--sm-blue-dark); }
.by-head__text span { color: var(--sm-text-muted); font-size: 12.5px; }

/* ---------- states ---------- */
.by-state { padding: var(--sm-space-5) var(--sm-space-4); }
.by-state .sm-alert { display: block; }
.by-state .sm-alert p { margin: var(--sm-space-2) 0 0; }
.by-muted { color: var(--sm-text-muted); }
.by-error { color: var(--sm-error-dark); }

/* ---------- consent ---------- */
/* Long legal text: a notch smaller than the chat so it needs less scrolling. */
.by-consent { padding: var(--sm-space-4); overflow-y: auto; font-size: 13px; line-height: 1.45; }
.by-consent__avatar { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--sm-space-2); background: var(--sm-blue-10pct); }
.by-consent__title { font-size: 17px; color: var(--sm-blue-dark); margin: 0 0 var(--sm-space-2); text-align: center; }
.by-consent__list { padding-left: 1.2em; margin: var(--sm-space-2) 0; }
.by-consent__list li { margin-bottom: var(--sm-space-1); color: var(--sm-grey-900); }
.by-consent__check {
  display: flex; gap: var(--sm-space-2); align-items: flex-start;
  padding: var(--sm-space-3); border-radius: var(--sm-radius-md);
  background: var(--sm-blue-5pct); margin: var(--sm-space-4) 0;
}
.by-consent__check input { margin-top: 3px; accent-color: var(--sm-blue); }

/* ---------- chat ---------- */
.by-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; }
/* shown while a file is dragged over the chat; pointer-events off so dragleave/drop hit the chat */
.by-drop { display: none; position: absolute; inset: var(--sm-space-2); z-index: 5; align-items: center; justify-content: center; padding: var(--sm-space-4); border: 2px dashed var(--sm-blue); border-radius: var(--sm-radius-md); background: color-mix(in srgb, var(--sm-blue-10pct) 60%, var(--sm-bg)); color: var(--sm-blue-dark); font-weight: var(--sm-fw-medium); text-align: center; pointer-events: none; }
.by-chat.is-dragover .by-drop { display: flex; }
.by-log { flex: 1 1 auto; overflow-y: auto; padding: var(--sm-space-4); display: flex; flex-direction: column; gap: var(--sm-space-3); }

.by-msg { max-width: 92%; padding: var(--sm-space-2) var(--sm-space-3); border-radius: var(--sm-radius-lg); line-height: 1.5; overflow-wrap: anywhere; }
.by-msg--user { align-self: flex-end; background: var(--sm-blue); color: #fff; border-bottom-right-radius: var(--sm-radius-sm); white-space: pre-wrap; }
.by-msg--bot { align-self: flex-start; background: var(--sm-blue-5pct); border-bottom-left-radius: var(--sm-radius-sm); position: relative; margin-left: 34px; max-width: calc(92% - 34px); }
/* Billy's face next to each of his answers — still, so a long chat doesn't roll its eyes in every line. */
.by-msg--bot::before {
  content: ""; position: absolute; left: -34px; bottom: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sm-blue-10pct) url("./billy-avatar-still.svg") center / cover no-repeat;
}
.by-msg--bot p { margin: 0 0 .5em; }
.by-msg--bot p:last-child { margin-bottom: 0; }
.by-msg--bot ul, .by-msg--bot ol { margin: .25em 0 .5em; padding-left: 1.3em; }
.by-msg--bot table { border-collapse: collapse; margin: .4em 0; font-size: 13.5px; display: block; overflow-x: auto; }
.by-msg--bot th, .by-msg--bot td { border: 1px solid var(--sm-blue-25pct); padding: 3px 7px; text-align: left; }
.by-msg--bot th { background: var(--sm-blue-10pct); }
.by-msg--bot code { background: #fff; padding: 0 4px; border-radius: var(--sm-radius-sm); font-size: 13px; }
/* A picture from the support wiki ([[img:…]] in Billy's answer): on white, as in the wiki — diagrams are
   drawn for a light page. A click opens it full size in a new tab. */
.by-figure { margin: .5em 0; }
.by-figure__img { display: block; background: #fff; border: 1px solid var(--sm-blue-25pct); border-radius: var(--sm-radius-md); padding: 6px; line-height: 0; cursor: zoom-in; }
.by-figure__img img { display: block; max-width: 100%; max-height: 360px; height: auto; margin: 0 auto; object-fit: contain; }
.by-figure figcaption { margin-top: 4px; font-size: 12.5px; color: var(--sm-text-muted); }
.by-msg--notice { align-self: stretch; max-width: none; background: var(--sm-warning-hover); color: var(--sm-grey-1000); font-size: 13.5px; }
.by-msg--error { align-self: stretch; max-width: none; background: var(--sm-error-hover); color: var(--sm-error-dark); font-size: 13.5px; }
.by-error-detail { display: block; margin-top: 6px; font-size: 12px; white-space: pre-wrap; color: var(--sm-grey-900); }

.by-welcome { color: var(--sm-grey-900); }

/* "Billy fetched these data" + typing indicator */
.by-trace { align-self: flex-start; font-size: 12.5px; color: var(--sm-text-muted); margin-top: -4px; margin-left: 34px; }
.by-trace summary { cursor: pointer; }
.by-trace ul { margin: 4px 0 0; padding-left: 1.2em; }
.by-usage { align-self: flex-start; font-size: 11.5px; color: var(--sm-grey-800); margin-top: -6px; margin-left: 34px; font-variant-numeric: tabular-nums; }

/* Billy at work: his thinking face in a turning ring, what he is doing, a running bar. */
.by-work { align-self: flex-start; display: flex; align-items: flex-end; gap: var(--sm-space-2); max-width: 92%; color: var(--sm-blue-dark); font-size: 13px; }
.by-work__face {
  position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sm-blue-10pct) url("./billy-thinking.svg") center / cover no-repeat;
}
.by-work__face::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--sm-blue-10pct); border-top-color: var(--sm-blue); border-right-color: var(--sm-energy-celeste);
  animation: by-spin 1s linear infinite;
}
.by-work__body {
  display: flex; flex-direction: column; gap: 5px; min-width: 170px;
  padding: 7px 12px; border-radius: var(--sm-radius-md, 10px); border-bottom-left-radius: var(--sm-radius-sm);
  background: var(--sm-blue-5pct);
}
.by-work__line { display: flex; align-items: center; gap: 7px; }
.by-work__icon { flex: 0 0 auto; display: inline-flex; color: var(--sm-blue); }
.by-work__icon svg { width: 16px; height: 16px; }
.by-work__text { transition: opacity .18s ease; }
.by-work__text.is-out { opacity: 0; }
.by-work__bar { position: relative; height: 3px; border-radius: 2px; overflow: hidden; background: var(--sm-blue-10pct); }
.by-work__bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 2px;
  background: linear-gradient(90deg, var(--sm-energy-celeste), var(--sm-blue));
  animation: by-run 1.4s ease-in-out infinite;
}
/* While the answer streams in, the text speaks for itself: only the turning face stays. */
.by-work.is-writing .by-work__body { display: none; }
/* The portrait in the header pulses while Billy works. */
.by-busy .by-avatar { animation: by-pulse 1.6s ease-out infinite; }
@keyframes by-spin { to { transform: rotate(360deg); } }
@keyframes by-run { from { left: -35%; } to { left: 100%; } }
@keyframes by-pulse {
  0% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sm-blue); }
  70%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(40, 89, 154, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .by-work__face::before, .by-work__bar::after, .by-busy .by-avatar { animation: none; }
  .by-work__bar::after { left: 0; width: 100%; opacity: .5; }
  .by-work__text { transition: none; }
}

/* ---------- suggestions + input ---------- */
.by-suggest { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); padding: 0 var(--sm-space-4) var(--sm-space-2); }
.by-chip {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--sm-blue-25pct); background: #fff; color: var(--sm-blue);
  padding: 5px 11px; border-radius: var(--sm-radius-pill);
}
.by-chip:hover { background: var(--sm-blue-5pct); border-color: var(--sm-blue-50pct); }

.by-input { display: flex; gap: var(--sm-space-2); align-items: flex-end; padding: var(--sm-space-2) var(--sm-space-4); border-top: 1px solid var(--sm-blue-10pct); }
/* One line is 40 px high (22 + 2 × 8 + 2 × 1), like the paperclip and send buttons beside it; the
   field grows upwards and the buttons stay at its bottom. It scrolls only at its maximum (autoGrow). */
.by-input textarea {
  flex: 1 1 auto; resize: none; font: inherit; line-height: 22px; color: inherit; max-height: 140px; overflow-y: hidden;
  border: 1px solid var(--sm-border); border-radius: var(--sm-radius-md); padding: 8px 10px;
}
.by-input textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-input textarea:focus { outline: 2px solid var(--sm-blue-25pct); border-color: var(--sm-blue); }
.by-send { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: var(--sm-radius-md); }

.by-foot {
  display: flex; justify-content: space-between; gap: var(--sm-space-3); align-items: center;
  padding: 0 var(--sm-space-4) var(--sm-space-3); font-size: 11.5px; color: var(--sm-text-muted);
}
.by-foot__links { display: flex; gap: var(--sm-space-3); }
.by-privacy h2 { font-size: 15px; color: var(--sm-blue-dark); margin: var(--sm-space-4) 0 var(--sm-space-1); }
.by-privacy p, .by-privacy li { color: var(--sm-grey-900); }
.by-privacy ul { padding-left: 1.2em; }
.by-withdraw { margin-top: var(--sm-space-5); padding-top: var(--sm-space-3); border-top: 1px solid var(--sm-blue-10pct); }
.by-withdraw__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2); margin: 0 0 var(--sm-space-3); }
.by-withdraw__ask > span { flex: 1 1 100%; font-weight: var(--sm-fw-medium); }
.sm-btn.by-btn-danger { background: var(--sm-error); color: #fff; }
.sm-btn.by-btn-danger:hover { background: var(--sm-error-dark); }
.sm-btn.by-btn-danger-outline { background: #fff; color: var(--sm-error-dark); border-color: var(--sm-error-light); }
.sm-btn.by-btn-danger-outline:hover { background: var(--sm-error-hover); }
.by-alert { margin: 0 0 var(--sm-space-3); padding: var(--sm-space-2) var(--sm-space-3); border-radius: var(--sm-radius-md); background: var(--sm-blue-5pct); color: var(--sm-blue-dark); }
.by-link { font: inherit; background: none; border: 0; padding: 0; color: var(--sm-link); cursor: pointer; text-decoration: underline; white-space: nowrap; }

/* ---------- confirmation card (a proposal; nothing is saved before "Save") ---------- */
.by-card {
  align-self: stretch; border: 1px solid var(--sm-blue-25pct); border-left: 4px solid var(--sm-warning);
  border-radius: var(--sm-radius-md); padding: var(--sm-space-3); background: #fff; font-size: 13.5px;
}
.by-card.is-applied { border-left-color: var(--sm-success); }
.by-card.is-rejected, .by-card.is-expired { border-left-color: var(--sm-grey-600); }
.by-card.is-conflict, .by-card.is-failed, .by-card.is-refused { border-left-color: var(--sm-error); }
.by-card__head { display: flex; flex-direction: column; gap: 2px; }
.by-card__head strong { color: var(--sm-blue-dark); }
.by-card__head span { color: var(--sm-text-muted); font-size: 12.5px; }
/* Billy's own wording, under the rows: quieter than the table, which is what actually gets saved. */
.by-card__summary { margin: var(--sm-space-2) 0 0; }
.by-card__summary:empty { display: none; }
.by-card__said { margin: 0; font-size: 12px; color: var(--sm-text-muted); }
.by-card__said-text { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--sm-text-muted); }
.by-card__table { width: 100%; border-collapse: collapse; margin: var(--sm-space-2) 0; }
.by-card__table th { text-align: left; font-weight: var(--sm-fw-medium); color: var(--sm-text-muted); font-size: 12px; padding: 2px 6px 4px 0; }
.by-card__table td { border-top: 1px solid var(--sm-blue-10pct); padding: 4px 6px 4px 0; vertical-align: top; overflow-wrap: break-word; }
.by-card__table td:first-child { width: 46%; }
.by-card__before { color: var(--sm-text-muted); text-decoration: line-through; }
.by-card__after { font-weight: var(--sm-fw-medium); color: var(--sm-grey-1000); }
.by-card__actions { display: flex; gap: var(--sm-space-2); margin-top: var(--sm-space-2); }
/* After saving a new dashboard: the link that opens it. */
.by-card__open { margin-top: var(--sm-space-2); align-self: flex-start; }
.by-card__status { margin: var(--sm-space-2) 0 0; }
.by-card__hint { color: var(--sm-text-muted); font-size: 12px; }
.by-card__form { display: flex; flex-direction: column; gap: var(--sm-space-2); margin: var(--sm-space-2) 0; }
.by-card__form label { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--sm-text-muted); }
.by-card__form textarea, .by-card__form input {
  font: inherit; font-size: 13px; color: var(--sm-text); padding: 6px 8px;
  border: 1px solid var(--sm-blue-10pct); border-radius: var(--sm-radius-md); background: var(--sm-bg); resize: vertical;
}
.by-card__form textarea:focus, .by-card__form input:focus { outline: 2px solid var(--sm-blue); outline-offset: 0; }
.by-card__form .by-card__hint { margin: 0; }

/* ---------- findings of the automatic checks ---------- */
.by-findings { align-self: stretch; display: flex; flex-direction: column; gap: var(--sm-space-2); margin-left: 34px; }
.by-findings__title { color: var(--sm-blue-dark); font-size: 13.5px; }
.by-finding { border-left: 4px solid var(--sm-warning); background: var(--sm-warning-hover); border-radius: var(--sm-radius-md); padding: var(--sm-space-2) var(--sm-space-3); font-size: 13.5px; }
.by-finding--error { border-left-color: var(--sm-error); background: var(--sm-error-hover); }
.by-finding--info { border-left-color: var(--sm-info); background: var(--sm-info-light); }
.by-finding__title { font-weight: var(--sm-fw-medium); }
.by-finding__detail { color: var(--sm-grey-900); margin: 2px 0 4px; }

/* ---------- Billy opened a portal page ---------- */
.by-nav { align-self: flex-start; margin-left: 34px; font-size: 12.5px; color: var(--sm-info-dark); background: var(--sm-info-light); border-radius: var(--sm-radius-pill); padding: 3px 10px; }

/* ---------- several findings of one kind: one line, the list opens on click ---------- */
.by-finding--group > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; padding-right: 20px; position: relative; }
.by-finding--group > summary::-webkit-details-marker { display: none; }
.by-finding--group > summary::after { content: ""; position: absolute; right: 2px; top: 4px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; opacity: .7; }
.by-finding--group[open] > summary::after { transform: rotate(-135deg); top: 8px; }
.by-finding--group > summary .by-finding__detail { margin: 0 0 2px; }
.by-finding__rows { list-style: none; margin: 6px 0; padding: 0 8px 0 0; max-height: 260px; overflow-y: auto; border-top: 1px solid rgba(0, 0, 0, .08); }
.by-finding__rows li { display: flex; align-items: baseline; gap: var(--sm-space-2); padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.by-finding__meter { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-finding__info { flex: 0 0 auto; color: var(--sm-grey-900); font-size: 12.5px; white-space: nowrap; }

/* ---------- warnings on a confirmation card (vacancy, a change reaching back) ---------- */
.by-card__warnings { margin: 0 0 var(--sm-space-2); padding: 6px 10px 6px 26px; background: var(--sm-warning-hover); border-radius: var(--sm-radius-md); font-size: 13px; }
.by-card__warnings:empty { display: none; }

/* ---------- a file going with the next message (tariff sheet) ---------- */
.by-attach { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--sm-blue-10pct); border-radius: var(--sm-radius-md); background: none; color: var(--sm-blue); cursor: pointer; }
.by-attach:hover { background: var(--sm-blue-10pct); }
.by-attach svg { width: 18px; height: 18px; }
.by-attached { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px var(--sm-space-4) 0; font-size: 13px; }
.by-attached #AttachedName { font-weight: var(--sm-fw-medium); color: var(--sm-blue-dark); }
.by-attached__hint { flex-basis: 100%; color: var(--sm-text-muted); font-size: 12px; }
.by-msg__file { display: block; font-size: 12.5px; opacity: .85; margin-bottom: 2px; }

/* ---------- what Billy can do: tiles with an example each ---------- */
.by-caps { align-self: stretch; margin-left: 34px; display: flex; flex-direction: column; gap: var(--sm-space-2); }
.by-caps__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.by-caps__head strong { color: var(--sm-blue-dark); font-size: 13.5px; }
.by-caps__head span { color: var(--sm-text-muted); font-size: 12.5px; }
.by-caps__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sm-space-2); }
.by-cap {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; font: inherit; cursor: pointer;
  padding: 10px 12px; background: #fff; border: 1px solid var(--sm-blue-10pct); border-radius: var(--sm-radius-md);
  color: var(--sm-grey-900); transition: border-color .15s, background .15s;
}
.by-cap:hover, .by-cap:focus-visible { border-color: var(--sm-blue-50pct); background: var(--sm-blue-5pct); outline: none; }
.by-cap svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sm-blue); margin-top: 1px; }
.by-cap > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.by-cap strong { font-size: 13.5px; font-weight: var(--sm-fw-medium); color: var(--sm-blue-dark); }
.by-cap__ask { font-size: 12.5px; color: var(--sm-text-muted); }

/* In the portal's side panel (narrow): two columns of small chips with the topic only; the example
   question is the tooltip and is still what a click sends. The footer wraps instead of squeezing. */
@media (max-width: 560px) {
  .by-caps { gap: 6px; }
  .by-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .by-cap { align-items: center; gap: 7px; padding: 6px 9px; border-radius: var(--sm-radius-sm); }
  .by-cap svg { width: 16px; height: 16px; margin-top: 0; }
  .by-cap strong { font-size: 12.5px; line-height: 1.25; }
  .by-cap__ask { display: none; }
  .by-foot { flex-wrap: wrap; row-gap: 4px; }
  .by-foot > span:first-child { flex: 1 1 100%; }
}