/* UGC HQ in the Plinth Club look: plum ground, marble plaques with 3px ink outlines and hard ink shadows.
   Six colours only. Saffron is the one main action. No gradients, blur, soft shadows, round corners (circles only) or 1px lines.
   Only transform and opacity move. Fonts come from fonts.css (Gloock, Archivo, DM Mono, Cairo). */
:root {
  --plum: #5B2A4E; --saffron: #D9A21B; --basalt: #121316; --limestone: #E9E5DC; --marble: #F7F5F0; --sand: #BDB29A;
  --ink: var(--basalt); --focus: var(--saffron);
  --f-display: 'Gloock', 'Cairo', Georgia, serif;
  --f-body: 'Archivo', 'Cairo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'DM Mono', 'Cairo', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--plum);
  color: var(--marble);
  font: 600 16px/1.5 var(--f-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font: 400 24px/1 var(--f-display); text-transform: uppercase; }
.muted { color: var(--sand); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.top :focus-visible, .composer :focus-visible, dialog :focus-visible, .login-card :focus-visible, .pane-bar :focus-visible { outline-color: var(--ink); }
.label, .dot-label, .field span, .login-card label, .tab, .pane-bar, .status-text, .chip, .tools summary { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* buttons and fields: plaque, pressed = no shadow and 3px down-right */
.btn {
  min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--marble); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 600 13px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .15s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) { .btn:not(:disabled):hover { transform: translate(-2px, -2px); } }
.btn:not(:disabled):active { transform: translate(3px, 3px); box-shadow: none; }
.btn:disabled { background: var(--limestone); color: var(--ink); box-shadow: none; border-style: dashed; cursor: not-allowed; }
.btn.primary { background: var(--saffron); }
.btn.danger { background: var(--basalt); color: var(--marble); border-color: var(--marble); box-shadow: 4px 4px 0 var(--marble); }
.btn.icon { padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn.small { min-height: 44px; font-size: 12px; }
select, textarea, input[type="password"] {
  font: 600 16px/1.35 var(--f-body); /* iOS zooms into anything smaller */
  color: var(--ink); background: var(--limestone);
  border: 2px solid var(--ink); border-radius: 0;
}
select {
  min-height: 44px; padding: 0 36px 0 10px; max-width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23121316' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea, .bubble, .msg, .tools { unicode-bidi: plaintext; }
input { color: var(--ink); }
svg { fill: none; } /* outline icons only, never filled */

/* login */
.login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.login-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; background: var(--marble); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.login-card h1 { font-size: 34px; margin-bottom: 4px; }
.login-card input { min-height: 48px; padding: 0 14px; width: 100%; }
.login-msg { margin: 0; padding: 10px 12px; background: var(--basalt); color: var(--marble); font-size: 14px; }

/* shell frame: height follows the visible viewport so the composer rides above the keyboard */
#shell {
  position: fixed; left: 0; right: 0;
  top: var(--app-top, 0px);
  height: var(--app-h, 100dvh);
  display: flex; flex-direction: column;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.top {
  margin: max(8px, env(safe-area-inset-top)) 8px 11px;
  padding: 8px 10px;
  background: var(--marble); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  display: flex; flex-direction: column; gap: 8px;
}
.top-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-row.head { min-height: 44px; }
.brand { font: 400 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .14em; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--limestone); flex: none; }
.dot.busy { background: var(--plum); animation: pulse 1.2s ease-in-out infinite; }
.dot-label { display: none; }
#btn-menu { margin-left: auto; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
#btn-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; }
.menu { display: none; flex-direction: column; gap: 8px; }
body.menu-open .menu { display: flex; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actions .btn { padding: 0 8px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
.long { display: none; }
.settings .field { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings select { width: 100%; }
body.kb .settings, body.kb .tabs { display: none; }

.tabs { display: flex; gap: 8px; margin: 0 8px 8px; }
.tab {
  flex: 1; min-height: 44px; border: 3px solid var(--marble); background: transparent; color: var(--marble);
  cursor: pointer; border-radius: 0;
}
.tab[aria-selected="true"] { background: var(--marble); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tab.warn::after { content: " (down)"; }
.unread { color: inherit; }

.panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
body[data-tab="chat"] #pane-app { display: none; }
body[data-tab="app"] #pane-chat { display: none; }

/* chat */
.net { margin: 0 8px 8px; padding: 6px 12px; font-size: 14px; background: var(--basalt); color: var(--marble); border: 3px solid var(--marble); text-align: center; }
.log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 12px 12px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-color: var(--marble) var(--plum);
}
.msg { max-width: 94%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; }
.bubble {
  padding: 9px 13px; overflow-wrap: anywhere; max-width: 100%;
  background: var(--marble); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.msg.user .bubble { background: var(--sand); white-space: pre-wrap; }
.bubble.empty { display: none; }
.bubble.thinking::after { content: "..."; }
.sys { align-self: center; max-width: 90%; text-align: center; font-size: 14px; padding: 6px 12px; background: var(--limestone); color: var(--ink); border: 2px solid var(--ink); }
.photos { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.photos img { width: 72px; height: 72px; object-fit: cover; border: 3px solid var(--ink); background: var(--marble); }
.photo-note { font: 500 12px var(--f-mono); color: var(--sand); }

.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble p { margin: 0 0 .6em; }
.bubble h4 { margin: .8em 0 .3em; font: 400 16px/1.2 var(--f-display); text-transform: uppercase; }
.bubble ul, .bubble ol { margin: 0 0 .6em; padding-left: 1.4em; }
.bubble li { margin: .15em 0; }
.bubble a { color: var(--plum); text-decoration: underline; text-decoration-thickness: 2px; }
.bubble code { font: 400 13px/1.4 var(--f-mono); background: var(--limestone); padding: 1px 5px; }
.bubble pre { margin: 0 0 .6em; padding: 10px 12px; background: var(--limestone); border: 2px solid var(--ink); overflow-x: auto; max-width: 100%; }
.bubble pre code { background: none; padding: 0; white-space: pre; }
.bubble blockquote { margin: 0 0 .6em; padding-left: 10px; border-left: 3px solid var(--plum); }
.bubble hr { border: 0; border-top: 2px solid var(--ink); margin: .8em 0; }
.tablewrap { overflow-x: auto; margin: 0 0 .6em; max-width: 100%; }
.bubble table { border-collapse: collapse; font-size: 14px; }
.bubble th, .bubble td { border: 2px solid var(--ink); padding: 5px 9px; text-align: left; vertical-align: top; }
.bubble th { background: var(--limestone); font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }

.tools { color: var(--sand); max-width: 100%; }
.tools summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; list-style-position: inside; overflow-wrap: anywhere; }
.tools ul { margin: 2px 0 0; padding-left: 22px; font: 400 12px/1.5 var(--f-mono); }
.tools li { overflow-wrap: anywhere; }
.foot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--limestone); color: var(--ink); border: 2px solid var(--ink); }
.chip.ok { background: var(--marble); }
.chip.ok b { font-weight: 500; }
.banner { width: 100%; padding: 10px 12px; font-size: 14px; }
.banner.bad { background: var(--basalt); color: var(--marble); border: 3px solid var(--marble); }
.banner.warn { background: var(--sand); color: var(--ink); border: 3px solid var(--ink); }
.banner strong { display: block; margin-bottom: 4px; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.banner pre { margin: 6px 0 0; max-height: 160px; overflow: auto; font: 400 12px/1.4 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

.status { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border-top: 3px solid var(--ink); background: var(--sand); color: var(--ink); min-height: 52px; margin: 0 8px; border-inline: 3px solid var(--ink); }
.status-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); border-top-color: var(--plum); animation: spin .8s linear infinite; flex: none; }

.composer { margin: 0 8px 8px; padding: 8px 10px; background: var(--marble); color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); margin-bottom: max(11px, calc(env(safe-area-inset-bottom) + 6px)); }
body.kb .composer { margin-bottom: 11px; }
.composer .row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; padding: 10px 12px; resize: none; }
.send { min-width: 76px; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 8px; }
.thumb { position: relative; width: 64px; height: 64px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border: 3px solid var(--ink); }
.thumb button {
  position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0;
  border-radius: 0; border: 2px solid var(--ink); background: var(--marble); color: var(--ink);
  font: 500 16px/1 var(--f-mono); cursor: pointer;
}
.thumb button::after { content: ""; position: absolute; inset: -8px; } /* 44px tap area */

/* app pane */
.pane-app { margin: 0 11px 11px 8px; border: 3px solid var(--ink); background: var(--marble); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); }
.pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 4px 12px; background: var(--marble); border-bottom: 3px solid var(--ink); }
.app-state.down { text-decoration: underline; text-decoration-thickness: 2px; }
.frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--marble); }

/* dialogs */
dialog {
  border: 3px solid var(--ink); padding: 0; border-radius: 0;
  background: var(--marble); color: var(--ink);
  width: min(440px, calc(100vw - 24px));
  max-height: calc(var(--app-h, 100dvh) - 24px);
  box-shadow: 5px 5px 0 var(--ink);
}
dialog::backdrop { background: var(--basalt); opacity: .6; }
.dlg-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: inherit; }
.dlg-body h2 { font-size: 24px; }
.dlg-body p { margin: 0; overflow-wrap: anywhere; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dlg-actions { display: flex; gap: 12px; justify-content: flex-end; }
.dlg-actions .btn { flex: 1; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; padding: 10px; background: var(--limestone); border: 2px solid var(--ink); }
.check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--plum); }
.hist { list-style: none; margin: 0; padding: 0 5px 5px 0; overflow-y: auto; max-height: 62dvh; display: flex; flex-direction: column; gap: 12px; }
.hist li { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--marble); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.hist .info { flex: 1; min-width: 0; }
.hist .msg-line { overflow-wrap: anywhere; font-size: 15px; }
.hist .meta-line { font: 400 12px var(--f-mono); }
.hist .meta-line code { font: 400 12px var(--f-mono); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--toast-bottom, 90px) + env(safe-area-inset-bottom));
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 16px; background: var(--basalt); color: var(--marble);
  border: 3px solid var(--marble); font-size: 15px; z-index: 50; overflow-wrap: anywhere;
}
.toast.bad { background: var(--sand); color: var(--ink); border-color: var(--ink); }
.drop {
  position: fixed; inset: 8px; z-index: 40; display: flex; align-items: center; justify-content: center;
  border: 3px dashed var(--marble); background: var(--plum); color: var(--marble);
  font: 400 24px/1 var(--f-display); text-transform: uppercase; pointer-events: none;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dot.busy { animation: none; }
  .spin { animation-duration: 3s; }
  .btn { transition: none; }
}

/* phones (860px and under): hamburger menu, bottom-sheet dialogs */
@media (max-width: 860px) {
  dialog { margin: auto auto 0; width: 100%; max-width: none; padding-bottom: env(safe-area-inset-bottom); box-shadow: none; }
  .pane-app { margin-right: 8px; }
}

/* wider screens: chat left, app right, menu always open */
@media (min-width: 600px) {
  .dot-label { display: inline; }
  .long { display: inline; }
}
@media (min-width: 861px) {
  #btn-menu { display: none; }
  .menu { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 1; justify-content: flex-end; }
  .tabs { display: none; }
  .panes { grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); }
  body[data-tab="chat"] #pane-app, body[data-tab="app"] #pane-chat { display: flex; }
  .top { flex-direction: row; align-items: center; gap: 16px; padding: 8px 14px; }
  .top-row.settings { flex: none; width: 360px; }
  .settings .field { flex-direction: row; align-items: center; }
  .actions { display: flex; }
  .composer .send { min-width: 84px; }
  .toast { --toast-bottom: 100px; }
}