:root {
  color-scheme: light;
  --ink: #000000;
  --muted: #404040;
  --line: #808080;
  --surface: #c0c0c0;
  --panel: #d4d0c8;
  --accent: #2e2e3a;
  --accent-strong: #000080;
  --message-accent: #d7f0bd;
  --message-accent-dark: #1d4f1d;
  --message-incoming: #ffffff;
  --warn: #5a3d00;
  --danger: #800000;
  --ok: #008000;
  --highlight: #ffffff;
  --lowlight: #404040;
  --shadow: none;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  color: var(--ink);
  background: #808080;
}

button,
input,
textarea {
  font: inherit;
}

button {
  min-height: 1.65rem;
  border: 2px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  border-radius: 0;
  padding: 0.15rem 0.65rem;
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #707070;
  cursor: pointer;
  transition: none;
}

button:hover {
  background: #e4e0d8;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #707070;
}

button:active {
  border-color: var(--line) var(--highlight) var(--highlight) var(--line);
  box-shadow: inset 1px 1px 0 #707070;
  padding: 0.2rem 0.6rem 0.1rem 0.7rem;
}

button:disabled {
  cursor: not-allowed;
  color: #909090;
  opacity: 1;
}

.shell {
  width: min(1220px, calc(100% - 1rem));
  margin: 0.5rem auto;
  border: 2px solid;
  border-color: var(--highlight) var(--lowlight) var(--lowlight) var(--highlight);
  padding: 0;
  background: var(--surface);
}

body[data-staging="locked"] .shell {
  display: none;
}

body[data-ui-theme="aqua"] {
  background: #7fb8d8;
}

body[data-staging="unlocked"] .staging-gate {
  display: none;
}

.staging-gate {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 1rem;
  background: #808080;
}

.staging-card {
  display: grid;
  gap: 0.65rem;
  width: min(100%, 27rem);
  border: 2px solid;
  border-color: var(--highlight) var(--lowlight) var(--lowlight) var(--highlight);
  border-radius: 0;
  padding: 0.75rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.staging-card h1 {
  font-size: 1.6rem;
}

.staging-copy,
.staging-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.staging-note {
  color: var(--warn);
  font-size: 0.88rem;
  font-weight: 700;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.65rem;
  background: linear-gradient(180deg, #e8e8ec 0%, #c8c8d0 100%);
  border-top: 1px solid var(--highlight);
  border-bottom: 2px solid var(--line);
}

.win98-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.45rem;
  padding: 0.15rem 0.25rem;
  color: #ffffff;
  background: linear-gradient(90deg, #2e2e3a 0%, #6a6a78 56%, #b0b0ba 100%);
  font-size: 0.75rem;
  font-weight: 800;
  user-select: none;
}

.win98-titlebar-left,
.win98-titlebar-buttons,
.win98-menubar {
  display: flex;
  align-items: center;
}

.win98-titlebar-left {
  gap: 0.35rem;
}

.win98-titlebar-icon {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--highlight);
  background: linear-gradient(135deg, #f0f0f0, #909098);
  box-shadow: inset -1px -1px 0 #707078;
}

.win98-titlebar-buttons {
  gap: 0.15rem;
}

.win98-titlebar-buttons span {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 0.9rem;
  border: 1px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  color: var(--ink);
  background: var(--panel);
  font-size: 0.62rem;
  line-height: 1;
}

.shell.theme-classic {
  --surface: #c0c0c0;
  --panel: #d4d0c8;
  --accent-strong: #000080;
}

.shell.theme-aqua {
  --surface: #b8d8e8;
  --panel: #e7f5fb;
  --line: #6c93a5;
  --accent: #22566b;
  --accent-strong: #005c86;
  --highlight: #ffffff;
  --lowlight: #315a6c;
  --message-accent: #c7efff;
  --message-accent-dark: #004f75;
  --message-incoming: #ffffff;
  border-color: #ffffff #315a6c #315a6c #ffffff;
  background: linear-gradient(180deg, #dff6ff 0%, #9fcde4 100%);
}

.shell.theme-aqua .win98-titlebar,
.shell.theme-aqua .messenger-panel > .section-heading,
.shell.theme-aqua .chat-panel .compact-heading {
  background: linear-gradient(180deg, #8fe6ff 0%, #1b9dd0 48%, #006d9f 52%, #4ec7ef 100%);
  text-shadow: 0 1px 0 #005170;
}

.shell.theme-aqua .win98-titlebar-icon {
  border-color: #ffffff #4b8faa #4b8faa #ffffff;
  background: radial-gradient(circle at 35% 25%, #ffffff 0%, #bdf7ff 32%, #0b98ce 70%, #00608f 100%);
}

.shell.theme-aqua .win98-menubar,
.shell.theme-aqua .topbar,
.shell.theme-aqua .panel,
.shell.theme-aqua .activity,
.shell.theme-aqua .chat-panel {
  background: var(--panel);
}

.shell.theme-aqua button {
  border-color: #ffffff #6599ad #6599ad #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #c8edf8 52%, #91cde2 100%);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #6b9db0;
}

.shell.theme-aqua button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d8f5fb 55%, #a7dcef 100%);
}

.shell.theme-aqua input,
.shell.theme-aqua textarea,
.shell.theme-aqua .identity-readout,
.shell.theme-aqua .security-status,
.shell.theme-aqua .security-note,
.shell.theme-aqua .recovery-box,
.shell.theme-aqua .advanced-settings,
.shell.theme-aqua .result-strip,
.shell.theme-aqua .order-status,
.shell.theme-aqua .chat-messages {
  border-color: #6c93a5 #ffffff #ffffff #6c93a5;
  background: #ffffff;
}

.shell.theme-aqua .contacts-list li[data-active="true"] {
  color: #ffffff;
  background: #005c86;
  box-shadow: inset 3px 0 0 #dff6ff, inset 1px 1px 0 #4ec7ef, inset -1px -1px 0 #00425f;
}

.shell.theme-aqua .contacts-list li[data-active="true"]::before {
  color: #00364d;
  background: #dff6ff;
}

.shell.theme-aqua .chat-messages p {
  border-color: #ffffff #6aa4bc #6aa4bc #ffffff;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #5e9bb4;
}

.shell.theme-aqua .chat-messages .message-incoming p {
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #91aeb8;
}

.win98-menubar {
  gap: 0.15rem;
  padding: 0.15rem 0.3rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.win98-menubar span {
  padding: 0.15rem 0.45rem;
}

.win98-menubar span:hover {
  color: #ffffff;
  background: #404048;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1.65rem;
  border: 2px solid;
  border-color: var(--line) #dfdfdf #dfdfdf var(--line);
  padding: 0.15rem;
  background: #ffffff;
}

.theme-toggle span {
  padding: 0 0.35rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.theme-toggle button {
  min-height: 1.35rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
}

.theme-toggle button[aria-pressed="true"] {
  border-color: var(--line) var(--highlight) var(--highlight) var(--line);
  color: #ffffff;
  background: var(--accent-strong);
  box-shadow: inset 1px 1px 0 #000040;
}

#lock-staging {
  min-height: 1.65rem;
  border: 2px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  color: var(--ink);
  background: var(--panel);
}

.eyebrow {
  margin: 0 0 0.2rem;
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 1.35rem;
  line-height: 1.05;
}

h2 {
  font-size: 0.95rem;
}

.health {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 7rem;
  min-height: 1.65rem;
  border: 2px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  border-radius: 0;
  padding: 0.2rem 0.55rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.health span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--warn);
}

.health[data-state="ok"] span {
  background: var(--ok);
}

.health[data-state="error"] span {
  background: var(--danger);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.2fr) minmax(18rem, 1fr);
  gap: 0;
  align-items: start;
  border-top: 1px solid var(--highlight);
}

.panel,
.activity {
  border: 2px solid;
  border-color: var(--line) var(--highlight) var(--highlight) var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel {
  margin: 0.35rem;
  padding: 0.55rem;
}

.activity {
  grid-column: 1 / -1;
  margin: 0.35rem;
  padding: 0.55rem;
}

.onboarding-panel {
  grid-column: 1 / -1;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.8rem;
  margin: -0.15rem -0.15rem 0.55rem;
  border-bottom: 1px solid var(--line);
  padding: 0.25rem 0.3rem;
  background: #c0c0c0;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field span,
.field-error,
.status-list dt,
.details-list dt,
.identity-readout span,
.recovery-head span,
.order-status span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.field-error {
  color: var(--danger);
  min-height: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: none;
}

input,
textarea {
  width: 100%;
  min-height: 1.7rem;
  border: 2px solid;
  border-color: var(--line) #dfdfdf #dfdfdf var(--line);
  border-radius: 0;
  padding: 0.15rem 0.35rem;
  color: var(--ink);
  background: #ffffff;
}

textarea {
  padding-top: 0.35rem;
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: 1px dotted var(--ink);
  outline-offset: -4px;
  border-color: var(--line) #dfdfdf #dfdfdf var(--line);
}

.button-row,
.inline-form,
.search-form,
.form-grid,
.order-status,
.advanced-settings {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.search-form {
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem auto;
  align-items: end;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.form-grid button {
  grid-column: 1 / -1;
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.25rem 0.55rem;
  min-height: 5.25rem;
  border: 2px solid;
  border-color: var(--line) var(--highlight) var(--highlight) var(--line);
  border-radius: 0;
  padding: 0.45rem;
  background: #ececf0;
}

.onboarding-steps span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: #ffffff;
  background: var(--muted);
  font-weight: 800;
}

.onboarding-steps strong,
.onboarding-steps small {
  display: block;
}

.onboarding-steps small {
  grid-column: 2;
  color: var(--muted);
}

.onboarding-steps li[data-state="done"] span {
  background: var(--ok);
}

.onboarding-steps li[data-state="done"] strong {
  color: var(--accent-strong);
}

.onboarding-steps li[data-state="active"] {
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  background: #ffffff;
}

.onboarding-steps li[data-state="active"] span {
  background: var(--accent);
}

.onboarding-steps li[data-state="active"] strong {
  color: var(--accent-strong);
}

.identity-readout,
.security-status,
.security-note,
.recovery-box,
.advanced-settings,
.result-strip,
.order-status {
  border: 2px solid;
  border-color: var(--line) #dfdfdf #dfdfdf var(--line);
  padding: 0.45rem;
  background: #ffffff;
}

.recovery-box {
  margin-top: 0.85rem;
}

.security-note {
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 700;
}

.recovery-head,
.advanced-settings summary,
.checkout-status summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.recovery-head::-webkit-details-marker,
.advanced-settings summary::-webkit-details-marker,
.checkout-status summary::-webkit-details-marker {
  display: none;
}

.advanced-settings summary,
.checkout-status summary {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.advanced-settings button {
  justify-self: start;
  min-height: 2.35rem;
}

.recovery-head strong,
.recovery-head small {
  display: block;
}

.recovery-head strong {
  margin-top: 0.1rem;
  color: var(--accent-strong);
}

.recovery-head small {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.1rem 0.35rem;
  color: var(--accent-strong);
  background: #ececf0;
  white-space: nowrap;
}

.phrase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.phrase-grid li {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: center;
  min-height: 2rem;
  border: 1px solid #c0c0c0;
  border-radius: 0;
  padding: 0.25rem 0.45rem;
  background: #ffffff;
}

.phrase-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.phrase-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.recovery-actions {
  grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr));
}

.recovery-actions button {
  padding: 0 0.75rem;
}

.restore-field {
  margin-top: 0.85rem;
}

.identity-readout code,
.selected-uin,
.order-status code {
  display: block;
  min-height: 2rem;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.selected-uin {
  min-height: 2.1rem;
  border: 2px solid;
  border-color: var(--line) #dfdfdf #dfdfdf var(--line);
  border-radius: 0;
  padding: 0.45rem 0.55rem;
  background: #ffffff;
  font-family: "Courier New", Consolas, monospace;
}

.checkout-preview-note {
  margin: 0;
  border: 1px solid #909098;
  border-radius: 0;
  padding: 0.45rem 0.55rem;
  color: var(--warn);
  background: #ececf0;
  font-weight: 700;
}

.status-list,
.details-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
}

.status-list div,
.details-list div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.status-list dt,
.status-list dd,
.details-list dt,
.details-list dd {
  margin: 0;
}

.status-list dd,
.details-list dd {
  overflow-wrap: anywhere;
}

#detail-price,
#detail-action,
#profile-uin,
#profile-fingerprint {
  font-weight: 700;
}

#detail-price,
#profile-uin,
#profile-fingerprint {
  color: var(--accent-strong);
  font-family: "Courier New", Consolas, monospace;
}

.profile-card dd {
  min-height: 1.35rem;
}

.details-list {
  border-top: 2px solid var(--line);
  padding-top: 0.55rem;
}

.action-helper {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.number-stage {
  display: grid;
  place-items: center;
  min-height: 9rem;
  border: 2px solid;
  border-color: var(--highlight) var(--lowlight) var(--lowlight) var(--highlight);
  border-radius: 0;
  color: #d8e0ff;
  background: linear-gradient(180deg, #2a2a32 0%, #44444e 40%, #5a5a66 100%);
  overflow: hidden;
}

.number-stage span {
  font-family: "Courier New", Consolas, monospace;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px #a0b0e0, 0 2px 0 #303040;
}

.number-stage small {
  color: #b0b8d0;
  text-transform: uppercase;
}

.result-strip {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 3rem;
}

.result-strip strong,
.order-status strong {
  color: var(--accent-strong);
}

.search-results {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.search-results li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  border: 1px solid #e0e0e0;
  padding: 0.35rem 0.45rem;
  background: #ffffff;
  cursor: pointer;
}

.search-results li:hover,
.search-results li:focus-visible {
  outline: 1px dotted var(--ink);
  background: #d4d4e0;
}

.search-results li[data-selected="true"] {
  border-color: var(--line) var(--highlight) var(--highlight) var(--line);
  border-radius: 0;
  background: #ececf0;
}

.search-results button {
  min-height: 2rem;
  padding: 0 0.7rem;
}

.search-results strong {
  font-family: "Courier New", Consolas, monospace;
  font-size: 1rem;
}

.search-results span,
.search-results small {
  color: var(--muted);
}

.search-results small {
  grid-column: 2 / 4;
  overflow-wrap: anywhere;
}

.search-results li[data-buyable="false"] strong {
  color: var(--muted);
}

.search-results .empty-state {
  grid-template-columns: 1fr;
  color: var(--muted);
}

.contacts-block {
  margin-top: 1rem;
}

.messenger-panel {
  background: #d4d0c8;
}

.messenger-panel > .section-heading {
  color: #ffffff;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
}

.messenger-panel > .section-heading .eyebrow,
.messenger-panel > .section-heading h2 {
  color: #ffffff;
}

.messenger-panel .profile-card,
.messenger-state {
  margin-top: 0.65rem;
}

.messenger-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.25rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.messenger-flow li {
  border: 2px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  border-radius: 0;
  padding: 0.3rem 0.45rem;
  color: var(--accent-strong);
  background: #ececf0;
  font-size: 0.72rem;
  font-weight: 800;
}

.compact-heading {
  margin-bottom: 0.55rem;
}

.compact-heading h3 {
  margin: 0;
  font-size: 0.95rem;
}

.contacts-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contacts-list li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: 0.35rem 0.65rem;
  align-items: center;
  min-height: 2.85rem;
  border: 1px solid transparent;
  border-bottom-color: #e0e0e0;
  padding: 0.35rem 0.45rem;
  background: #ffffff;
}

.contacts-list li[data-active="true"] {
  border: 2px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  border-radius: 0;
  padding: 0.32rem 0.42rem;
  color: #ffffff;
  background: #000080;
  box-shadow: inset 3px 0 0 #ffff00, inset 1px 1px 0 #1084d0, inset -1px -1px 0 #000040;
}

.contacts-list li[data-active="true"]::before {
  content: "ACTIVE";
  display: inline-grid;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  border: 1px solid #ffffff;
  padding: 0.02rem 0.24rem;
  color: #ffffff;
  background: #000040;
  font-size: 0.62rem;
  font-weight: 800;
}

.contacts-list strong {
  color: var(--accent-strong);
  font-family: "Courier New", Consolas, monospace;
}

.contacts-list li[data-active="true"] strong,
.contacts-list li[data-active="true"] span {
  color: #ffffff;
}

.contacts-list span {
  color: var(--muted);
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.contacts-list button {
  min-height: 2rem;
  padding: 0 0.7rem;
}

.contacts-list li[data-active="true"] button {
  font-weight: 800;
}

.contacts-list .empty-state {
  grid-template-columns: 1fr;
  color: var(--muted);
}

.chat-panel {
  margin-top: 1rem;
  border: 2px solid;
  border-color: var(--line) var(--highlight) var(--highlight) var(--line);
  padding: 0;
  background: var(--panel);
}

.chat-panel .compact-heading {
  margin: 0;
  color: #ffffff;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
}

.chat-panel .compact-heading .eyebrow,
.chat-panel .compact-heading h3 {
  color: #ffffff;
}

#chat-content {
  display: grid;
  gap: 0.45rem;
  padding: 0.5rem;
}

#chat-content[hidden] {
  display: none;
}

.chat-panel .empty-state {
  margin: 0.55rem;
  color: var(--muted);
}

.chat-demo-note {
  margin: 0;
  border: 1px solid #909098;
  border-radius: 0;
  padding: 0.25rem 0.45rem;
  color: var(--warn);
  background: #ececf0;
  font-size: 0.68rem;
  font-weight: 700;
}

.chat-messages {
  display: grid;
  align-content: end;
  gap: 0.8rem;
  min-height: 16rem;
  max-height: 24rem;
  margin: 0;
  border: 2px solid;
  border-color: var(--line) #dfdfdf #dfdfdf var(--line);
  padding: 0.55rem;
  overflow-y: auto;
  background: #ffffff;
  list-style: none;
}

.chat-messages li {
  display: grid;
  gap: 0.24rem;
  max-width: min(78%, 32rem);
}

.chat-messages .message-outgoing {
  justify-items: end;
  justify-self: end;
  text-align: right;
}

.chat-messages .message-incoming {
  justify-items: start;
  justify-self: start;
  text-align: left;
}

.chat-messages p {
  max-width: 100%;
  margin: 0;
  border: 2px solid;
  border-color: var(--highlight) var(--line) var(--line) var(--highlight);
  border-radius: 0;
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  background: var(--message-accent);
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  line-height: 1.45;
  box-shadow: inset 1px 1px 0 #f8fff0, inset -1px -1px 0 #6f9d6f;
}

.chat-messages .message-incoming p {
  color: var(--ink);
  background: var(--message-incoming);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8f8f8f;
}

.chat-messages small {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
  align-items: center;
  max-width: 100%;
  color: #505050;
  font-size: 0.72rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.chat-messages small span {
  color: var(--accent-strong);
  font-family: "Courier New", Consolas, monospace;
  font-weight: 800;
}

.chat-messages small time {
  color: #606060;
  font-variant-numeric: tabular-nums;
}

.chat-messages .message-outgoing small {
  justify-content: end;
  color: var(--message-accent-dark);
}

.chat-messages .message-outgoing small span {
  color: var(--message-accent-dark);
}

.chat-messages .empty-state {
  justify-items: start;
  max-width: 100%;
  border: 1px dotted var(--line);
  padding: 0.45rem 0.55rem;
  color: var(--muted);
  background: #f8f8f8;
  text-align: left;
}

.chat-composer-field {
  margin-top: 0;
}

#send-message {
  justify-self: end;
  margin-top: 0;
}

.activity ol {
  display: grid;
  gap: 0.55rem;
  max-height: 14rem;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.activity li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
  color: var(--muted);
}

.activity time {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .workspace {
    grid-template-columns: 1fr 1fr;
  }

  .order-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .shell {
    width: min(100% - 1rem, 1180px);
    padding-top: 0.75rem;
  }

  .topbar,
  .workspace,
  .button-row,
  .inline-form,
  .search-form,
  .form-grid,
  .order-status {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .workspace {
    display: grid;
  }

  .order-panel,
  .activity {
    grid-column: auto;
  }

  .status-list div,
  .details-list div,
  .contacts-list li,
  .search-results li,
  .activity li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .contacts-list li[data-active="true"]::before {
    grid-column: 1;
    grid-row: auto;
  }

  .contacts-list button {
    justify-self: start;
  }

  .chat-messages {
    min-height: 14rem;
    padding: 0.45rem;
  }

  .chat-messages li {
    max-width: 92%;
  }

  .chat-messages p {
    font-size: 0.92rem;
  }

  .search-results small {
    grid-column: auto;
  }

  .phrase-grid,
  .recovery-actions {
    grid-template-columns: 1fr 1fr;
  }
}