/* Hermes chat inside the S1 Kit.modal. */
.hermes-s1 { display: flex; flex-direction: column; gap: 12px; min-height: min(56dvh, 520px); }
.hermes-s1 .hermes-notice { margin: 0; padding: 10px 12px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel-head); color: var(--s1-ink-2); font: var(--s1-text-small)/1.45 var(--s1-font-ui); }
.hermes-s1 .hermes-notice[hidden], .hermes-s1 form[hidden] { display: none; }
.hermes-s1 .hermes-log { flex: 1; min-height: 180px; max-height: min(46dvh, 420px); overflow-y: auto; padding: 2px; display: flex; flex-direction: column; gap: 12px; }
.hermes-s1 .hermes-message { margin: 0; padding: 10px 12px; border: 1px solid var(--s1-line-soft); border-radius: var(--s1-radius-control); background: var(--s1-panel); overflow-wrap: anywhere; }
.hermes-s1 .hermes-message.user { background: var(--s1-panel-head); border-color: var(--s1-line); }
.hermes-s1 .hermes-message strong { color: var(--s1-mute); font: 700 var(--s1-text-micro) var(--s1-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.hermes-s1 .hermes-message p { margin: 4px 0 0; white-space: pre-wrap; color: var(--s1-ink); font: var(--s1-text-base)/1.5 var(--s1-font-ui); }
.hermes-s1 .hermes-message small { display: block; margin-top: 6px; color: var(--s1-mute); font: var(--s1-text-micro) var(--s1-font-ui); }
.hermes-s1 .hermes-live { border-left: 2px solid var(--s1-wait); }
.hermes-s1 .hermes-activity { margin: 8px 0 0; padding: 6px 10px; border: 1px solid var(--s1-line-soft); border-radius: var(--s1-radius-control); color: var(--s1-mute); font: var(--s1-text-micro) var(--s1-font-ui); }
.hermes-s1 .hermes-activity summary { cursor: pointer; font-weight: 650; }
.hermes-s1 .hermes-welcome h3 { margin: 0 0 6px; font: 700 18px var(--s1-font-display); color: var(--s1-ink); }
.hermes-s1 .hermes-welcome p { margin: 0 0 10px; color: var(--s1-ink-2); font: var(--s1-text-base)/1.5 var(--s1-font-ui); }
.hermes-s1 .hermes-welcome button { display: block; margin-top: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); color: var(--s1-ink); text-align: left; cursor: pointer; font: 600 var(--s1-text-small) var(--s1-font-ui); }
.hermes-s1 .hermes-welcome button:hover { background: var(--s1-panel-head); }
.hermes-s1 .hermes-status { margin: 0; color: var(--s1-mute); font: var(--s1-text-small) var(--s1-font-ui); }
.hermes-s1 .hermes-status:empty { display: none; }
.hermes-s1 form { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--s1-line-soft); }
.hermes-s1 form > label { display: grid; gap: 6px; color: var(--s1-ink-2); font: 650 var(--s1-text-small) var(--s1-font-ui); }
.hermes-s1 textarea { width: 100%; resize: vertical; max-height: 160px; padding: 10px 12px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); color: var(--s1-ink); font: var(--s1-text-base)/1.45 var(--s1-font-ui); }
.hermes-s1 textarea:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 1px; }
/* attachments: the native file input is visually hidden; the label is the button */
.hermes-s1 form > label.hermes-attachments { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 8px 12px; border: 1px dashed var(--s1-checkbox); border-radius: var(--s1-radius-control); color: var(--s1-ink-2); font: 600 var(--s1-text-small) var(--s1-font-ui); }
.hermes-s1 form > label.hermes-attachments:hover { background: var(--s1-panel-head); }
.hermes-s1 .hermes-attachments input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.hermes-s1 .hermes-attachments:focus-within { outline: 2px solid var(--s1-ink); outline-offset: 2px; border-radius: var(--s1-radius-control); }
.hermes-s1 .hermes-filenames { color: var(--s1-mute); font: var(--s1-text-small) var(--s1-font-ui); overflow-wrap: anywhere; }
.hermes-s1 .hermes-actions { display: flex; gap: 8px; justify-content: space-between; }
.hermes-s1 .hermes-actions button { min-height: 38px; padding: 8px 16px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); color: var(--s1-ink); cursor: pointer; font: 650 var(--s1-text-small) var(--s1-font-ui); }
.hermes-s1 .hermes-actions button[type=submit] { border-color: var(--s1-ink); background: var(--s1-ink); color: var(--s1-on-ink); }
.hermes-s1 .hermes-actions button:disabled { opacity: .55; cursor: wait; }
.hermes-s1 button:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }