/* Module Claude — Glance HUD. Préfixe .cl-
   Variables fournies par styles.css : --hud, --hud-dim, --warn, --alert, --muted, --line.
   Affichage additif : le noir est transparent, on garde des traits fins et lumineux. */

.cl-host {
  min-block-size: 0;
}

.cl-root {
  --cl-hud: var(--hud, #4fd8ff);
  --cl-dim: var(--hud-dim, #2a8fb0);
  --cl-line: var(--line, rgba(79, 216, 255, 0.35));
  --cl-muted: var(--muted, #6f8c99);
  --cl-warn: var(--warn, #ffc94f);
  --cl-alert: var(--alert, #ff5f5f);
  --cl-gap: 0.5em;

  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: var(--cl-gap);
  block-size: 100%;
  min-block-size: 0;
  inline-size: 100%;
  max-inline-size: 40em;
  margin-inline: auto;
  color: var(--cl-hud);
  font-family: inherit;
  background: transparent;
}
.cl-root *,
.cl-root *::before,
.cl-root *::after {
  box-sizing: border-box;
}

.cl-root--setup {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* ---------- en-tête ---------- */
.cl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding-block-end: 0.3em;
  border-block-end: 1px solid var(--cl-line);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8em;
  min-inline-size: 0;
}
.cl-title {
  font-weight: 700;
  color: var(--cl-hud);
}
.cl-title::before {
  content: "◇ ";
  color: var(--cl-dim);
}
.cl-status {
  color: var(--cl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
}
.cl-status--busy { color: var(--cl-hud); }
.cl-status--warn { color: var(--cl-warn); }
.cl-status--err { color: var(--cl-alert); }

/* ---------- transcript (seul conteneur qui défile) ---------- */
.cl-frame {
  position: relative;
  display: grid;
  min-block-size: 0;
}
/* Équerres aux quatre coins */
.cl-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --c: var(--cl-dim);
  background:
    linear-gradient(var(--c), var(--c)) top left / 0.8em 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px 0.8em no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 0.8em 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px 0.8em no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 0.8em 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 0.8em no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 0.8em 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 0.8em no-repeat;
}
.cl-log {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cl-dim) transparent;
  padding: 0.6em 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  outline: none;
}
.cl-log:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cl-hud);
}

.cl-empty {
  margin: auto 0;
  color: var(--cl-muted);
  font-size: 0.85em;
  line-height: 1.4;
  text-align: center;
}

.cl-msg {
  max-inline-size: 92%;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cl-msg--user {
  align-self: flex-end;
  text-align: end;
  color: var(--cl-dim);
  font-size: 0.85em;
  padding-inline-end: 0.6em;
  border-inline-end: 1px solid var(--cl-line);
}
.cl-msg--bot {
  align-self: flex-start;
  color: var(--cl-hud);
  font-size: 1em;
  padding-inline-start: 0.6em;
  border-inline-start: 2px solid var(--cl-hud);
}
.cl-msg--err {
  align-self: stretch;
  max-inline-size: none;
  color: var(--cl-alert);
  font-size: 0.85em;
  padding-inline-start: 0.6em;
  border-inline-start: 2px solid var(--cl-alert);
}
.cl-msg--err .cl-msg-text::before {
  content: "⚠ ";
}

/* curseur clignotant pendant le streaming */
.cl-caret::after {
  content: "▍";
  margin-inline-start: 0.1em;
  color: var(--cl-hud);
  animation: cl-blink 1s steps(1) infinite;
}
.cl-msg--streaming .cl-msg-text:empty + .cl-caret::before {
  content: "…";
  color: var(--cl-dim);
}
@keyframes cl-blink {
  50% { opacity: 0; }
}

/* ---------- saisie ---------- */
.cl-compose {
  display: flex;
  gap: var(--cl-gap);
  min-inline-size: 0;
}
.cl-input {
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 2.4em;
  padding: 0.45em 0.7em;
  font: inherit;
  font-size: 0.95em;
  color: var(--cl-hud);
  caret-color: var(--cl-hud);
  background: transparent;
  border: 1px solid var(--cl-line);
  border-radius: 0;
  outline: none;
}
.cl-compose .cl-input {
  flex: 1 1 auto;
}
.cl-compose .cl-btn {
  flex: 0 0 auto;
}
.cl-input::placeholder {
  color: var(--cl-muted);
  opacity: 1;
}

/* ---------- boutons ---------- */
.cl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl-gap);
}
.cl-actions .cl-btn {
  flex: 1 1 0;
}
.cl-btn {
  min-block-size: 2.4em;
  min-inline-size: 0;
  padding: 0.4em 0.8em;
  font: inherit;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--cl-hud);
  background: transparent;
  border: 1px solid var(--cl-line);
  border-radius: 0;
  cursor: pointer;
  outline: none;
}
.cl-btn--primary {
  border-color: var(--cl-dim);
}
.cl-btn--back {
  color: var(--cl-dim);
}
.cl-btn[aria-disabled="true"] {
  color: var(--cl-muted);
  border-style: dashed;
  opacity: 0.6;
  cursor: default;
}
.cl-btn[hidden] {
  display: none;
}

/* Focus : bordure épaisse + liseré + marqueur, pas seulement une couleur */
.cl-btn:focus-visible,
.cl-input:focus-visible,
.cl-input:focus {
  border-color: var(--cl-hud);
  box-shadow: 0 0 0 1px var(--cl-hud), 0 0 0.6em rgba(79, 216, 255, 0.35);
  background: rgba(79, 216, 255, 0.08);
}
.cl-btn:focus-visible::before {
  content: "▸ ";
}

/* ---------- configuration ---------- */
.cl-setup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6em;
  min-block-size: 0;
  overflow-y: auto;
  padding: 0.5em 0.2em;
}
.cl-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8em;
  color: var(--cl-dim);
}
.cl-hint {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.4;
  color: var(--cl-muted);
}
.cl-msg-line {
  margin: 0;
  font-size: 0.85em;
}
.cl-msg-line--err { color: var(--cl-alert); }
.cl-msg-line--ok { color: var(--cl-hud); }

@media (prefers-reduced-motion: reduce) {
  .cl-caret::after { animation: none; }
}