/* Epyks Hosting palette: violet, slate and plum; no green base-theme bleed. */
:root {
  color-scheme: dark;
  --bg: #191821;
  --surface: #211f29;
  --panel: #302e3a;
  --panel-raised: #383542;
  --line: #4b4857;
  --text: #eceaf1;
  --muted: #a5a2b1;
  --accent: #a18bd2;
  --accent-hover: #b09ce0;
  --accent-soft: #383247;
  --blue: #86a9c9;
  --rose: #b36d82;
  --danger: #e5a0aa;
  --warning: #e5c083;
  font-family: "Segoe UI", system-ui, sans-serif;
}

body { background: var(--bg); color: var(--text); }
aside { background: var(--surface); border-color: #373440; }
.brand { color: #d7caf4; letter-spacing: .4px; }
.brand-light { color: #aaa6b5; }
.eyebrow, label, .section-label { color: var(--muted); }

button, select, input, textarea { color: var(--text); }
button { background: var(--panel); border-color: var(--line); transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
button:hover { background: #413c4d; border-color: #8978b2; }
button:active { transform: translateY(1px); }
button:disabled { transform: none; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--accent-hover); }
.new, #send, #save-memory, #pair-button, #token-button { background: var(--accent); color: #17141e; border-color: transparent; font-weight: 650; }
.new:hover, #send:hover, #save-memory:hover, #pair-button:hover, #token-button:hover { background: var(--accent-hover); color: #17141e; }
.new { margin-bottom: 30px; }
select, #composer, dialog textarea { background-color: #282631; border-color: var(--line); }
select:hover, input:hover { border-color: #716883; }
textarea::placeholder { color: #8f8b9c; }

header { border-color: #34313d; }
.slash { color: #625d70; }
.model { color: #cbbbe9; border-color: #5a506d; background: #292631; }
.hero-mark, .suggestions span, .message a { color: #b8a4e8; }
h1 { color: #f1eff5; }
#welcome > p { color: #b2afbb; }
.suggestions button { background: linear-gradient(145deg, #34303f, #282630); border-color: #484452; }
.suggestions button:hover { background: linear-gradient(145deg, #40394f, #302c3a); border-color: var(--accent); }
.suggestions small { color: #aaa6b5; }
nav button { color: #b0adba; }
nav button.selected { background: #393247; color: #ded2f3; }

.message.user { background: #302d39; border-color: #554e66; }
.message.user .who { color: #b6b1c1; }
pre, #pair-code, #permanent-token, .admin-command { background: #131219; border-color: #403c49; }
code { background: #282531; }
pre code { background: transparent; }
.composer-wrap { background: transparent; }
#composer { background: #25232e; border-color: #514b60; box-shadow: 0 10px 32px #09080d30; }
#composer:focus-within { border-color: #8372a9; box-shadow: 0 0 0 3px #a18bd21b, 0 10px 32px #09080d30; }
.attach { color: #c4b4e6; }
#attachment, #notice { color: #c4b4e6; }
.footnote { color: #918c9e; }

#activity-wrap details { border-color: #484452; background: #211f29; }
#activity-wrap > details > summary { color: #c7c2d0; }
.activity-item > summary { color: #e5e2eb; }
.activity-file { border-color: #484452; background: #1a1921; }
.activity-file-heading { color: #c4b0ec; }
.activity-output, .activity-code { background: #15141b; border-color: #403c49; }
.stage-indicator { border-color: #514a62; background: linear-gradient(100deg, #302b3a, #24222b); }
.stage-indicator strong, .activity-file-heading { color: #c4b0ec; }
.stage-pulse { background: #746b84; }
.stage-indicator[data-active="true"] .stage-pulse { background: var(--accent); }
@keyframes stage-pulse {
  0%, 100% { opacity: .45; box-shadow: 0 0 0 0 #a18bd200; }
  50% { opacity: 1; box-shadow: 0 0 0 5px #a18bd226; }
}

#pair-screen { border-color: #554d66; background: linear-gradient(145deg, #302d3a, #211f28); box-shadow: 0 18px 50px #09080d45; }
#pair-code, #permanent-token { border-radius: 10px; }
#pair-error, #token-error { color: var(--danger); }
.pair-divider { color: #aaa6b8; }
.pair-divider::before, .pair-divider::after { background: #4b4659; }
.local .dot, .dot { background: var(--accent); box-shadow: 0 0 10px #a18bd255; }

#loop-panel { border-color: #484452; background: #211f29; }
#loop-state { color: #c4b0ec; }
#loop-log-dialog, dialog { background: #292631; color: var(--text); border-color: #5d536f; box-shadow: 0 22px 70px #08070b80; }
dialog::backdrop, #loop-log-dialog::backdrop { background: #08070bcf; }
dialog p, .muted { color: #aaa6b5; }
.close { color: #d7d2df; }

#recover { border-color: #665b7b; background: #302b3a; color: #c4b0ec; }
#recover:hover { background: #393247; }
nav .chat-row .chat-delete:hover { color: #ffb4a9; background: #3a222b; border-color: #704653; }
.admin-approval { border-color: #9d7952; background: linear-gradient(130deg, #30271f, #211f28); color: #e9e7e1; }
.admin-approval p { color: #c6c2b9; }
.admin-approval .admin-status { color: var(--warning); }
.admin-command { color: #e0d8ef; }
.admin-controls .secondary { background: #302d38; color: var(--text); border-color: #514d58; }
.admin-result { color: #d2cdda; }

::selection { color: #18151f; background: #b09ce0; }
* { scrollbar-color: #625b70 #211f29; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

#screenshot-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: min(100%, 390px);
  margin: 2px 0 10px;
  padding: 7px 12px 7px 7px;
  border: 1px solid #514b60;
  border-radius: 12px;
  background: linear-gradient(135deg, #302d39, #24222c);
  box-shadow: 0 8px 22px #09080d30;
}
.attach { display: inline-flex; align-items: center; gap: 7px; color: #c8b8e8; }
.attach:hover { color: #e3d8f5; }
.attach-icon { width: 16px; height: 16px; flex: 0 0 16px; }
#screenshot-preview[hidden] { display: none !important; }
.screenshot-thumb {
  position: relative;
  width: 116px;
  height: 76px;
  flex: 0 0 116px;
  overflow: hidden;
  border: 1px solid #5d566d;
  border-radius: 8px;
  background: #17151d;
}
.screenshot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.screenshot-format {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border: 1px solid #ffffff30;
  border-radius: 5px;
  background: #17141edb;
  color: #e7def5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
}
.screenshot-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #ffffff45;
  border-radius: 50%;
  background: #17141ee8;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  box-shadow: 0 2px 8px #0007;
}
.screenshot-remove:hover { background: #8e4c64; border-color: #e7a0b2; }
.screenshot-info { display: grid; min-width: 0; gap: 5px; }
.screenshot-name { overflow: hidden; max-width: 230px; color: #eeeaf5; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.screenshot-size { color: #b1acbc; font-size: 10px; }
.screenshot-remove:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
@media (max-width: 650px) {
  #screenshot-preview { max-width: 100%; }
  .screenshot-thumb { width: 88px; height: 64px; flex-basis: 88px; }
  .screenshot-name { max-width: calc(100vw - 150px); }
}

/* Keep recovery notices, attachment controls and modal close buttons inside their cards. */
#conversation, #messages, .composer-wrap, #composer, #activity-wrap, #admin-approval { min-width: 0; }
.message, .message p, .message li, .activity-item, .stage-detail, .admin-approval p,
.admin-command, #notice, #attachment { overflow-wrap: anywhere; word-break: break-word; }
#notice { max-height: 5rem; overflow: auto; }
.composer-bottom { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.composer-bottom > * { min-width: 0; }
.loop-option { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; line-height: 1.4; }
#attachment { flex: 1 1 100%; }
.spacer { flex: 1 1 18px; }
#recover, #stop, #send { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; gap: 7px; min-height: 40px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.chat-row { min-width: 0; }
.chat-row .chat-open { min-width: 0; }
.chat-row .chat-delete { display: grid; flex: 0 0 34px; place-items: center; padding: 0; line-height: 1; }
dialog { position: relative; box-sizing: border-box; }
dialog > form:first-child { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; }
dialog .close { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; float: none; line-height: 1; }
dialog h2, dialog > .eyebrow { padding-right: 34px; }
.screenshot-preview { box-sizing: border-box; width: min(100%, 390px); min-width: 0; }
.screenshot-thumb { box-sizing: border-box; }
.screenshot-remove { box-sizing: border-box; padding: 0; line-height: 1; transform: none; }
.screenshot-info { flex: 1 1 auto; }
.screenshot-name { max-width: 100%; overflow-wrap: anywhere; }
.attach, .loop-option { flex-shrink: 1; }
@media (max-width: 760px) {
  .composer-bottom { gap: 8px; }
  #recover, #stop, #send { flex: 1 1 calc(33.333% - 8px); min-width: 105px; }
}
@media (max-width: 480px) {
  .composer-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .composer-bottom > .attach, .composer-bottom > .loop-option, #attachment { grid-column: 1 / -1; }
  .spacer { display: none; }
  #recover, #stop, #send { width: 100%; min-width: 0; }
  #screenshot-preview { gap: 8px; padding-right: 8px; }
  .screenshot-thumb { width: 64px; height: 56px; flex: 0 0 64px; }
  .screenshot-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}