@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-sans-3.woff2) format("woff2");
}

@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-code-pro.woff2) format("woff2");
}

:root {
  color: #1c292c;
  background: #e8f1f9;
  font-family: "Source Sans 3", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background-color: #e8f1f9;
  background-image: linear-gradient(90deg, rgba(44, 91, 132, 0.045) 1px, transparent 1px), linear-gradient(rgba(44, 91, 132, 0.045) 1px, transparent 1px);
  background-attachment: fixed;
  background-size: 28px 28px;
}

button, textarea { font: inherit; }
button { cursor: pointer; }

.console { width: min(100% - 32px, 700px); margin: 0 auto; padding: 64px 0 80px; }
.topbar, .section-heading, .composer-footer, .history-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar { border-bottom: 1px solid #b8c3c4; padding-bottom: 26px; }
.eyebrow, .label { margin: 0 0 6px; color: #637477; font-family: "Source Code Pro", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 30px; font-weight: 700; line-height: 1.2; }
h2 { margin-bottom: 0; font-size: 19px; font-weight: 600; }
.connection { display: flex; align-items: center; gap: 8px; color: #506165; font-size: 13px; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border: 1px solid #758588; border-radius: 50%; background: #c3cbcc; }
.status-dot.online { border-color: #207a69; background: #35a88c; }
.status-dot.offline { border-color: #a3413b; background: #d8645d; }
.composer, .history { border-bottom: 1px solid #b8c3c4; padding: 34px 0; }
.shortcut { margin: 0; color: #637477; font-size: 12px; }
kbd { border: 1px solid #b8c3c4; border-bottom-width: 2px; border-radius: 3px; padding: 1px 4px; background: #f6f8f8; color: #3d4c4f; font-family: "Source Code Pro", monospace; font-size: 10px; }
textarea { width: 100%; resize: none; overflow-y: hidden; margin-top: 24px; border: 1px solid #9aa9aa; border-radius: 4px; padding: 16px; outline: none; background: #f9fbfb; color: #1c292c; font-size: 16px; line-height: 1.65; }
@supports (field-sizing: content) {
  textarea { field-sizing: content; min-height: calc(3lh + 34px); }
}
textarea::placeholder { color: #809093; }
textarea:focus { border-color: #3e87c5; box-shadow: 0 0 0 3px rgba(62, 135, 197, 0.15); }
.composer-footer { margin-top: 12px; }
.counter { margin: 0; color: #637477; font-family: "Source Code Pro", monospace; font-size: 12px; }
.counter.limit-reached { color: #a3413b; }
.send-button { display: inline-flex; min-width: 94px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 4px; padding: 10px 14px; background: #3e87c5; color: #fff; font-size: 14px; font-weight: 600; }
.send-button:hover:not(:disabled) { background: #3278b5; }
.send-button:disabled { cursor: not-allowed; opacity: 0.48; }
.send-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.send-button.is-sending { background: #9a6a22; }
.feedback { min-height: 22px; margin: 16px 0 0; font-size: 13px; }
.feedback.pending { color: #9a6a22; }
.feedback.success { color: #3278b5; }
.feedback.error { color: #a3413b; }
.history { border-bottom: 0; }
.clear-button { border: 0; padding: 5px 0; background: transparent; color: #637477; font-size: 12px; }
.clear-button:hover { color: #a3413b; text-decoration: underline; }
.history-list { display: grid; gap: 1px; margin: 22px 0 0; padding: 0; list-style: none; background: #c5cecf; border: 1px solid #c5cecf; }
.history-item { padding: 15px 16px; background: #f8fafa; }
.history-text { overflow: hidden; margin: 0 0 8px; font-size: 14px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { margin: 0; color: #718184; font-family: "Source Code Pro", monospace; font-size: 11px; }
.empty-history { margin: 22px 0 0; color: #718184; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 560px) {
  .console { width: min(100% - 28px, 700px); padding-top: 36px; }
  .topbar { align-items: flex-start; }
  .connection { padding-top: 4px; }
  h1 { font-size: 26px; }
  .section-heading { align-items: flex-end; }
  .shortcut { display: none; }
}