/* =============================================================================
   chat.dectrickmcgee.space — the assistant's own design foundation
   =============================================================================
   A separate stylesheet from site.css, not an extension of it. The portfolio is
   a document you read top to bottom; this is an application you work in, and
   the two want different densities, different rhythm and different focus
   behaviour. Sharing one file meant every chat rule had to be defensive about
   the marketing page, which is how both end up compromised.

   THE BRAND IS UNCHANGED — the same ink, the same paper, the same orange. What
   changed is everything built on top: a real type scale, an 8px spacing system,
   named elevation, and motion with one easing curve instead of six ad-hoc
   transitions.

   Shaped by what agent interfaces are judged on in practice:
     · CAPABILITY TRANSPARENCY — you can see what it can do before you type
     · STATUS — what it is doing right now, and the ability to stop it
     · RECOVERY — a failure says what failed and offers the next move
     · CONFIDENCE — a tool result is visibly a fact, prose is visibly a claim
   ========================================================================== */

:root {
  /* --- brand, unchanged ------------------------------------------------- */
  --ink:        #14110f;
  --ink-1:      #191512;
  --ink-2:      #201b17;
  --ink-3:      #2a231e;
  --line:       #332b25;
  --line-soft:  #241e19;
  --text:       #f6efe8;
  --muted:      #a2938a;
  --dim:        #6f645d;
  --accent:     #ff7a45;
  --accent-dim: #c2542a;
  --accent-ink: #1a0e08;
  --ok:         #5fd08a;
  --warn:       #e8b04b;
  --bad:        #e0684a;

  /* --- spacing: one 4px base, no arbitrary values ----------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- type scale: 1.2 minor third, so sizes relate rather than drift --- */
  --t-xs: .75rem;   --t-sm: .8125rem; --t-md: .9375rem;
  --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem;
  --lh-tight: 1.25; --lh-body: 1.62;

  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-full: 999px;

  /* --- elevation: dark UI lifts with LIGHT, not only with shadow -------- */
  --e-1: 0 1px 2px rgba(0,0,0,.4);
  --e-2: 0 4px 16px rgba(0,0,0,.35);
  --e-3: 0 18px 48px rgba(0,0,0,.5);

  /* --- motion: one curve, three durations ------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: .12s; --base: .2s; --slow: .32s;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rail-w: 272px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--text);
       font: var(--t-md)/var(--lh-body) var(--sans);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea { font: inherit; color: inherit; }

/* One focus ring everywhere. A keyboard user must always be able to see where
   they are, and a per-component ring is a per-component chance to forget. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
:focus:not(:focus-visible) { outline: none; }

/* =============================================================================
   Shell
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
       height: 100dvh; overflow: hidden; }
.app.rail-off { grid-template-columns: minmax(0, 1fr); }
.app.rail-off .rail { display: none; }

/* --- rail ----------------------------------------------------------------- */
.rail { display: flex; flex-direction: column; min-height: 0;
        background: var(--ink-1); border-right: 1px solid var(--line-soft); }
.rail__brand { display: flex; align-items: center; gap: var(--s3);
               padding: var(--s4) var(--s4) var(--s3); }
.rail__mark { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px;
              background: var(--accent); color: var(--accent-ink);
              display: grid; place-items: center; font-size: var(--t-xs);
              font-weight: 700; letter-spacing: .02em; }
.rail__name { font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; }
.rail__collapse { margin-left: auto; background: none; border: 0; color: var(--dim);
                  cursor: pointer; padding: var(--s1) var(--s2); border-radius: var(--r-1); }
.rail__collapse:hover { color: var(--text); background: var(--ink-2); }

.rail__new { margin: 0 var(--s3) var(--s3); }
.rail__search { margin: 0 var(--s3) var(--s3); position: relative; }
.rail__search input { width: 100%; background: var(--ink); border: 1px solid var(--line);
                      border-radius: var(--r-2); padding: var(--s2) var(--s3);
                      font-size: var(--t-sm); }
.rail__search input::placeholder { color: var(--dim); }

.rail__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s2) var(--s3);
              scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rail__group { margin-bottom: var(--s4); }
.rail__label { display: flex; align-items: center; gap: var(--s2);
               padding: var(--s2) var(--s2) var(--s1); font-size: var(--t-xs);
               letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.rail__add { margin-left: auto; background: none; border: 0; color: var(--dim);
             cursor: pointer; font-size: var(--t-md); line-height: 1; padding: 0 var(--s1); }
.rail__add:hover { color: var(--accent); }

.thread { display: flex; align-items: center; gap: var(--s2); width: 100%;
          text-align: left; background: none; border: 0; cursor: pointer;
          color: var(--muted); font-size: var(--t-sm); padding: var(--s2) var(--s2);
          border-radius: var(--r-2); transition: background var(--fast) var(--ease); }
.thread:hover { background: var(--ink-2); color: var(--text); }
.thread[aria-current="true"] { background: var(--ink-3); color: var(--text); }
.thread__t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__x { opacity: 0; color: var(--dim); padding: 0 var(--s1); border: 0;
             background: none; cursor: pointer; transition: opacity var(--fast) var(--ease); }
.thread:hover .thread__x { opacity: 1; }
.thread__x:hover { color: var(--bad); }

/* The dot is the whole reason durable tasks exist: come back tomorrow and the
   conversation still says whether its work is running. */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--dim); }
.dot--working { background: var(--accent); animation: pulse 1.4s var(--ease) infinite; }
.dot--waiting { background: var(--warn); animation: pulse 1.4s var(--ease) infinite; }
.dot--failed  { background: var(--bad); }
.dot--done    { background: var(--ok); }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.rail__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft);
              font-size: var(--t-xs); color: var(--dim); display: flex;
              align-items: center; gap: var(--s2); }
.rail__foot a { color: var(--muted); }

/* =============================================================================
   Conversation
   ========================================================================== */
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }

.top { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5);
       border-bottom: 1px solid var(--line-soft); background: var(--ink);
       flex: 0 0 auto; min-height: 57px; }
.top__title { font-size: var(--t-md); font-weight: 600; flex: 1; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top__spacer { flex: 1; }

/* The context window, made visible. Shown as a proportion because it is an
   ESTIMATE — four characters to a token — and a token count would imply a
   precision this does not have. */
.ctx { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs);
       color: var(--dim); }
.ctx__bar { width: 72px; height: 4px; border-radius: var(--r-full);
            background: var(--line); overflow: hidden; }
.ctx__bar i { display: block; height: 100%; width: 0; background: var(--accent);
              transition: width var(--slow) var(--ease); }
.ctx.is-warn .ctx__bar i { background: var(--warn); }
.ctx.is-warn { color: var(--warn); }

.scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.stream { max-width: 780px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }

/* --- messages ------------------------------------------------------------- */
/* Rows, not bubbles. A bubble wastes a third of the width on a conversation
   that regularly contains code, a table or a rendered chart, and it makes long
   assistant output read as a chat message rather than as a document. */
.msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3);
       margin-bottom: var(--s6); }
.msg__who { width: 26px; height: 26px; border-radius: 8px; display: grid;
            place-items: center; font-size: 10px; font-weight: 700;
            letter-spacing: .02em; margin-top: 2px; }
.msg--me .msg__who { background: var(--ink-3); color: var(--muted); }
.msg--ai .msg__who { background: var(--accent); color: var(--accent-ink); }
.msg__body { min-width: 0; }
.msg__text { white-space: pre-wrap; word-break: break-word; }
.msg--me .msg__text { color: var(--text); }
.msg--ai .msg__text { color: var(--text); }
.msg__actions { display: flex; gap: var(--s1); margin-top: var(--s2);
                opacity: 0; transition: opacity var(--fast) var(--ease); }
.msg:hover .msg__actions, .msg__actions:focus-within { opacity: 1; }
.act { background: none; border: 1px solid transparent; color: var(--dim);
       font-size: var(--t-xs); padding: 3px var(--s2); border-radius: var(--r-1);
       cursor: pointer; }
.act:hover { color: var(--text); border-color: var(--line); background: var(--ink-1); }

/* A system note — a compaction, an upload — is neither side of the exchange. */
.note { max-width: 780px; margin: 0 auto var(--s5); padding: var(--s3) var(--s4);
        border: 1px dashed var(--line); border-radius: var(--r-2);
        color: var(--muted); font-size: var(--t-sm); text-align: center; }

/* --- thinking ------------------------------------------------------------- */
.think { display: inline-flex; gap: 5px; align-items: center; height: 1.5em; }
.think i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
           animation: bob 1.25s var(--ease) infinite; }
.think i:nth-child(2) { animation-delay: .16s; }
.think i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { 0%,80%,100% { opacity: .25; transform: translateY(0); }
                 40% { opacity: 1; transform: translateY(-3px); } }

/* --- what it did: a step strip, not decoration ---------------------------- */
/* A tool result is a FACT — it happened, it has a name, it returned something.
   Prose is a claim. Showing the two differently is most of what "confidence
   display" means in an agent interface. */
.steps { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3);
         border-left: 2px solid var(--line); padding-left: var(--s3); }
.step { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm);
        color: var(--muted); }
.step i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
          flex: 0 0 auto; animation: pulse 1.2s var(--ease) infinite; }
.step.is-done i   { background: var(--ok); animation: none; }
.step.is-failed i { background: var(--bad); animation: none; }
.step b { color: var(--text); font-weight: 500; font-family: var(--mono);
          font-size: var(--t-xs); letter-spacing: -.01em; }
.step span { color: var(--dim); font-size: var(--t-xs); }

/* --- files ---------------------------------------------------------------- */
.files { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.file { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
        border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ink-1);
        cursor: pointer; transition: border-color var(--fast) var(--ease),
                                     transform var(--fast) var(--ease); text-align: left; }
.file:hover { border-color: var(--accent); transform: translateY(-1px); }
.file__k { font-size: 9px; letter-spacing: .05em; color: var(--dim);
           border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
.file__n { font-size: var(--t-sm); max-width: 240px; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.file__s { font-size: var(--t-xs); color: var(--dim); }
.file--img { padding: 0; overflow: hidden; border-radius: var(--r-3); display: block; }
.file--img img { display: block; max-width: 280px; max-height: 200px; object-fit: cover; }

/* =============================================================================
   The empty state — capability transparency
   -----------------------------------------------------------------------------
   The single most useful thing an agent interface can do is say what it can do
   BEFORE the visitor types. A blank box with a cursor is a guessing game, and
   the guesses are usually smaller than what the thing can actually do.
   ========================================================================== */
.hello { max-width: 780px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s6); }
.hello h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); margin: 0 0 var(--s3);
            letter-spacing: -.02em; }
.hello p { color: var(--muted); margin: 0 0 var(--s6); max-width: 58ch; }
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
        gap: var(--s3); margin-bottom: var(--s6); }
.cap { border: 1px solid var(--line-soft); border-radius: var(--r-3); padding: var(--s4);
       background: var(--ink-1); }
.cap b { display: block; font-size: var(--t-sm); margin-bottom: var(--s1);
         font-family: var(--mono); color: var(--accent); font-weight: 500; }
.cap span { font-size: var(--t-sm); color: var(--muted); }
.starters { display: flex; flex-wrap: wrap; gap: var(--s2); }
.starter { border: 1px solid var(--line); background: var(--ink-1); color: var(--muted);
           border-radius: var(--r-full); padding: var(--s2) var(--s4); font-size: var(--t-sm);
           cursor: pointer; transition: all var(--fast) var(--ease); }
.starter:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }

/* =============================================================================
   Composer
   ========================================================================== */
.dock { flex: 0 0 auto; padding: 0 var(--s5) var(--s5);
        background: linear-gradient(to top, var(--ink) 72%, transparent); }
.composer { max-width: 780px; margin: 0 auto; border: 1px solid var(--line);
            border-radius: var(--r-4); background: var(--ink-1); box-shadow: var(--e-2);
            transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.composer:focus-within { border-color: var(--accent-dim); box-shadow: var(--e-3); }
.composer textarea { width: 100%; background: none; border: 0; resize: none;
                     padding: var(--s4) var(--s4) var(--s2); max-height: 220px;
                     line-height: var(--lh-body); }
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: var(--dim); }
.tools { display: flex; align-items: center; gap: var(--s1);
         padding: 0 var(--s2) var(--s2) var(--s2); flex-wrap: wrap; }

/* Modes are a segmented control, not four look-alike buttons: they change what
   SEND does, which is a different kind of thing from an action you click. */
.modes { display: flex; gap: 2px; background: var(--ink); border: 1px solid var(--line);
         border-radius: var(--r-full); padding: 2px; }
.mode { border: 0; background: none; color: var(--dim); font-size: var(--t-xs);
        padding: var(--s1) var(--s3); border-radius: var(--r-full); cursor: pointer;
        transition: all var(--fast) var(--ease); }
.mode:hover { color: var(--text); }
.mode[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.tool-btn { border: 1px solid var(--line); background: none; color: var(--muted);
            border-radius: var(--r-full); padding: var(--s1) var(--s3);
            font-size: var(--t-xs); cursor: pointer; }
.tool-btn:hover { color: var(--text); border-color: var(--muted); }
.send { margin-left: auto; border: 0; border-radius: var(--r-full);
        background: var(--accent); color: var(--accent-ink); font-weight: 600;
        padding: var(--s2) var(--s5); cursor: pointer; font-size: var(--t-sm);
        transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.send:hover { transform: translateY(-1px); }
.send:disabled { opacity: .45; cursor: default; transform: none; }
.send--stop { background: var(--bad); color: #fff; }
.hint { text-align: center; font-size: var(--t-xs); color: var(--dim);
        margin: var(--s2) auto 0; max-width: 780px; }

/* =============================================================================
   Command palette
   ========================================================================== */
.pal { position: fixed; inset: 0; z-index: 90; display: none;
       background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
       align-items: flex-start; justify-content: center; padding-top: 14vh; }
.pal.is-open { display: flex; }
.pal__box { width: min(600px, 92vw); background: var(--ink-1); border: 1px solid var(--line);
            border-radius: var(--r-3); box-shadow: var(--e-3); overflow: hidden; }
.pal__in { width: 100%; background: none; border: 0; padding: var(--s4);
           font-size: var(--t-lg); border-bottom: 1px solid var(--line-soft); }
.pal__list { max-height: 46vh; overflow-y: auto; padding: var(--s2); }
.pal__item { display: flex; align-items: center; gap: var(--s3); width: 100%;
             background: none; border: 0; color: var(--muted); text-align: left;
             padding: var(--s3); border-radius: var(--r-2); cursor: pointer;
             font-size: var(--t-sm); }
.pal__item[aria-selected="true"] { background: var(--ink-3); color: var(--text); }
.pal__item kbd { margin-left: auto; font: var(--t-xs) var(--mono); color: var(--dim);
                 border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; inset: 0 auto 0 0; width: 84vw; max-width: var(--rail-w);
          z-index: 80; transform: translateX(-101%);
          transition: transform var(--base) var(--ease); box-shadow: var(--e-3); }
  .app.rail-on .rail { transform: none; display: flex; }
  .stream, .hello, .composer, .hint { max-width: 100%; }
  .stream { padding: var(--s5) var(--s4) var(--s6); }
  .dock { padding: 0 var(--s4) var(--s4); }
  .top { padding: var(--s3) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .scroll { scroll-behavior: auto; }
}

/* =============================================================================
   Long tasks, in the new foundation
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.task { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink-1);
        padding: var(--s4); }
.task__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.task__goal { flex: 1; font-weight: 600; font-size: var(--t-sm); min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task__state { font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase;
               color: var(--dim); }
.task__state.is-working { color: var(--accent); }
.task__state.is-waiting { color: var(--warn); }
.task__state.is-failed  { color: var(--bad); }
.task__state.is-done    { color: var(--ok); }
.task__cancel { margin-left: 0; }

.task__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.task__steps li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s2);
                  align-items: start; font-size: var(--t-sm); color: var(--muted); }
.task__steps li b { font-weight: 500; color: var(--text); }
.task__mark { width: 16px; height: 16px; border-radius: 50%; margin-top: 3px;
              border: 1px solid var(--line); display: grid; place-items: center;
              font-size: 9px; color: var(--dim); }
.is-done .task__mark    { border-color: var(--ok);  color: var(--ok); }
.is-failed .task__mark  { border-color: var(--bad); color: var(--bad); }
.is-running .task__mark { border-color: var(--accent); animation: pulse 1.2s var(--ease) infinite; }
.task__note { margin: var(--s3) 0 0; font-size: var(--t-xs); color: var(--dim); }
.task__report { margin: var(--s3) 0 0; padding-top: var(--s3);
                border-top: 1px solid var(--line-soft); font-size: var(--t-sm);
                white-space: pre-wrap; }

.needs { border: 1px solid var(--accent); border-radius: var(--r-2); padding: var(--s4);
         margin-top: var(--s3); background: color-mix(in srgb, var(--accent) 7%, var(--ink-2)); }
.needs h4 { margin: 0 0 var(--s1); font-size: var(--t-sm); }
.needs p { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--muted); }
.needs__row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.needs__field { display: grid; gap: var(--s1); margin-bottom: var(--s2); font-size: var(--t-sm); }
.needs__field input { background: var(--ink); border: 1px solid var(--line);
                      border-radius: var(--r-1); padding: var(--s2) var(--s3); }
.needs__secret { font-size: var(--t-xs); color: var(--muted); background: var(--ink);
                 border: 1px dashed var(--line); border-radius: var(--r-1);
                 padding: var(--s3); font-family: var(--mono); white-space: pre-wrap;
                 margin-bottom: var(--s3); }