/* The conversation, laid out like the Claude app: Claude's words on the left in one column, upright and black;
   yours on the right, in a light grey bubble; newest at the bottom, above the message box. Scrolling up (the mouse
   wheel, Page Up, the arrow keys while the box is empty, or pinching and moving with AirTouch) shows earlier
   messages; new words bring it back down. On a wide screen, Messages runs down the left and What's done down the
   right: a sixth of the screen each, as the Claude app's side panels take. What Claude opens (a website, a video, a
   document) goes between them, above your latest message, Claude's latest reply and the message box. */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body.panel { --left: 17vw; --panel: 17vw; --rail: calc(3.45rem + 2px); }
/* A sidebar switched off leaves a narrow margin with just its switch (see "The panels' switches" below). */
body.panel.hide-left { --left: var(--rail); }
body.panel.hide-right { --panel: var(--rail); }
body { padding-left: var(--left, 0px); padding-right: var(--panel, 0px); }
#column {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh;
  width: min(var(--co-column, 30rem), 100% - 3rem); margin: 0 auto;
  padding: 2rem 0 calc(var(--composer-h, 5rem) + 1.25rem);
}
#log { display: flex; flex-direction: column; gap: 1.25rem; }

/* Your words: on the right, in a bubble no wider than most of the column, the way chat apps show them. */
.you {
  align-self: flex-end; max-width: 85%;
  background: var(--bubble); border-radius: 1.1rem; padding: 0.5rem 0.9rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.you, .ai { scroll-margin-top: 1.5rem; }
/* The message a tapped item of What's done was asked in, for a moment. */
.you.found { outline: 2px solid var(--ink); outline-offset: 3px; }
.ai { overflow-wrap: anywhere; }
/* What Claude is doing (when show_activity is on), in the mono font, above the words it leads to. */
.ai .activity { display: block; font-family: var(--mono); margin: 0 0 0.5em; }
.ai.thinking .md:empty::after {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--ink); animation: pulse 1.2s ease-in-out infinite;
}
/* Messages from an earlier day, put back to show where something was asked: their day above them. */
.day, .gap { align-self: center; font-size: 0.8rem; }
.day { font-weight: bold; }

/* What you're saying right now, as it's heard: your next bubble, forming on the right, with a dot that pulses
   while you speak. (Only then: an animation has the page drawn again 60 times a second, which without a graphics
   chip costs a steady few percent of a processor core.) */
#live { margin-top: 1.25rem; display: none; }
body.hearing #live { display: block; }
#caret {
  display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; margin-left: 0.35em; vertical-align: middle;
  background: var(--ink); animation: pulse 1.6s ease-in-out infinite;
}

/* Something open (body.content): the conversation shrinks to just your latest message and Chat Computer's latest,
   in full, above the message box, and the page Claude opened is laid over the space above them, in a rounded frame
   like the sidebars' (the window places it inside #frame: chat.js reports where). Older messages are still there,
   above, cut off. */
#frame { display: none; position: fixed; border: 2px solid var(--bubble); border-radius: 1.1rem; }
body.content #frame { display: block; }
body.content #column {
  position: fixed; bottom: var(--composer-h, 5rem); min-height: 0; height: var(--strip-h, 4rem);
  left: calc(var(--left, 0px) + var(--side-gap)); right: calc(var(--panel, 0px) + var(--side-gap));
  display: block; width: auto; margin: 0; padding: 0; overflow-y: auto;
  --side-gap: max(1.5rem, (100vw - var(--left, 0px) - var(--panel, 0px) - var(--co-column, 30rem)) / 2);
}
/* With the switches at the sides, the latest exchange and the message box leave room at their right for the
   conversation's own switch. */
body.panel.content #column {
  --side-gap: max(2.85rem, (100vw - var(--left, 0px) - var(--panel, 0px) - var(--co-column, 30rem)) / 2);
}
body.panel.content #box, body.panel.content #wake { width: min(var(--co-column, 30rem), 100% - 5.7rem); }
/* There, the two messages are closer together, each in full, however many lines it takes (the page above makes
   room; past six-tenths of the screen they scroll, showing the end). What you're saying shows the same way. */
body.content #log { gap: 0.4rem; }
body.content #log > .off-strip { display: none; }
body.content .you { padding: 0.1rem 0.75rem; }
body.content #live { padding: 0.1rem 0.75rem; margin-top: 0.4rem; }

/* The message box, as in the Claude app: a rounded box the width of the conversation at the bottom of the
   screen; it grows with what's typed (up to a few lines, then scrolls). Enter sends, Shift+Enter starts a new
   line; so does the round button at its right, as ChatGPT's: an arrow up, grey while there's nothing to send,
   black once there is. Nothing else: Chat Computer is the conversation (and "/" to search this computer).
   Asleep, a line above it says how to wake Chat Computer. */
#composer {
  position: fixed; left: var(--left, 0px); right: var(--panel, 0px); bottom: 0; z-index: 6;
  padding: 0.5rem 0 0.75rem; background: var(--ground);
}
#box, #wake { width: min(var(--co-column, 30rem), 100% - 3rem); margin: 0 auto; }
#box {
  position: relative; border: 2px solid var(--bubble); border-radius: 1.1rem; background: var(--ground);
  padding: 0.6rem 0.7rem 0.6rem 1rem;
}
#row { position: relative; display: flex; align-items: flex-end; gap: 0.5rem; }
/* The empty box's hint, where typing starts: "Chat computer anything or type “/” to search", dimmed (--dim, the
   one grey text on the screen); in a box too narrow for all of it, just "Chat computer anything" (.short). It goes
   with the first thing typed. */
#hint {
  position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  line-height: 1.5; color: var(--dim); pointer-events: none;
}
#hint.short #hint-search { display: none; }
body.typed #hint, body.searching #hint { display: none; }
#input {
  position: relative; z-index: 1;                 /* over the hint, so the cursor shows in front of it */
  flex: 1; min-width: 0; height: 1.5em; max-height: 40vh; margin: 0; padding: 0;
  border: 0; outline: 0; resize: none; overflow-y: auto; scrollbar-width: none;
  font: inherit; line-height: 1.5; color: var(--ink); background: transparent; caret-color: var(--ink);
}
#send {
  flex: none; display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--dim); color: var(--ground); cursor: default;
}
body.drafting #send { background: var(--ink); cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#send svg { display: block; width: 62%; height: 62%; stroke-width: 2.6; }
#wake { display: none; margin-bottom: 0.5rem; text-align: center; font-size: 0.8rem; line-height: 1.4; }
body.sleeping #wake, body.resting #wake { display: block; }
/* "/" first in the message box: it searches this computer. What matches shows in a list above the box (as a
   search box's suggestions), in front of everything, even what's open: the arrow keys choose, Enter or a click
   opens it between the sidebars, and the last line asks Claude instead. */
#search-icon { display: none; flex: none; width: 1.2em; height: 1.5em; }
body.searching #search-icon { display: block; }
#results {
  position: absolute; left: -2px; right: -2px; bottom: calc(100% + 0.5rem); display: none;
  max-height: 60vh; overflow-y: auto; scrollbar-width: none;
  padding: 0.35rem; border: 2px solid var(--bubble); border-radius: 0.9rem; background: var(--ground);
  font-size: 0.8rem; line-height: 1.4;
}
body.searching #results { display: block; }
.res { display: flex; align-items: center; gap: 0.7em; padding: 0.4em 0.6em; border-radius: 0.5em; cursor: pointer; }
.res > svg { flex: none; width: 1.3em; height: 1.3em; }
.res-text { flex: 1; min-width: 0; }
.res-name, .res-where { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-name b { font-weight: bold; }
.res-when { flex: none; }
.res:hover, .res.sel { background: var(--bubble); }
.res-note { margin: 0; padding: 0.4em 0.6em; }

/* Buttons: words underlined, or a small outlined icon; the one main button of a form, white on black. */
button { font: inherit; color: var(--ink); }
.text-button { margin: 0; padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
.icon-button {
  flex: none; width: 1.6em; height: 1.6em; margin: 0; padding: 0.2em; border: 0; border-radius: 0.4em;
  background: none; cursor: pointer;
}
.icon-button svg { display: block; width: 100%; height: 100%; }
.icon-button:hover { background: var(--bubble); }
.primary {
  margin: 0; padding: 0.45em 1.2em; border: 2px solid var(--ink); border-radius: 0.6em;
  background: var(--ink); color: var(--ground); cursor: pointer;
}

/* The two sidebars: Messages at the left (newest first), What's done at the right (oldest at the top, grouped by
   day). Each item can be pinned: pinned ones stay at the top, under the title. Tapping a message opens it between
   the sidebars; tapping something done scrolls the conversation back to the message that asked for it. */
.side {
  position: fixed; top: 0.75rem; bottom: 0.75rem; width: calc(var(--panel, 0px) - 1rem);
  display: none; flex-direction: column;
  padding: 1.1rem 0.75rem 0.75rem 1rem;
  border: 2px solid var(--bubble); border-radius: 1.1rem; background: var(--ground);
  font-size: 0.8rem; line-height: 1.4;
}
body.panel .side { display: flex; }
#messages { left: 0.75rem; width: calc(var(--left, 0px) - 1rem); }
#done { right: 0.75rem; }
/* Words in a sidebar line up with the items' words; an item's grey (under the pointer) reaches a little past them. */
.side-head, .side-day, .side-empty, #clock { padding-left: 0.4em; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.75rem; }
.side-title { font-size: 1em; font-weight: bold; line-height: 1.3; margin: 0; }
.side-empty { margin: 0; }
body.has-done #done-empty, body.has-messages #messages-empty { display: none; }
.side-empty .text-button { display: block; margin-top: 0.6em; }
.side-list, .side-pinned { list-style: none; margin: 0; padding: 0; }
.side-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.side-pinned { flex: none; max-height: 40%; overflow-y: auto; scrollbar-width: none; }
.side-pinned:not(:empty) { padding-bottom: 0.6em; margin-bottom: 0.6em; border-bottom: 2px solid var(--bubble); }
.side-day { font-weight: bold; margin: 1em 0 0.35em; }
.side-day:first-child { margin-top: 0; }
.item { position: relative; padding: 0.35em 0.4em; border-radius: 0.5em; overflow-wrap: break-word; cursor: pointer; }
.item:hover { background: var(--bubble); }
/* The pin: shown on a pinned item, and on any item under the pointer, to pin it. It sits at the end of an item's
   first line, which leaves room for it. */
.pin {
  position: absolute; top: 0.3em; right: 0.25em; width: 1.5em; height: 1.5em; margin: 0; padding: 0.2em;
  border: 0; border-radius: 0.4em; background: none; visibility: hidden; cursor: pointer;
}
.pin svg { display: block; width: 100%; height: 100%; }
.item:hover .pin, .item.pinned .pin { visibility: visible; }
.item.pinned .pin svg { fill: currentColor; }
.msg-top, .done-when { padding-right: 1.6em; }
/* On a touchscreen, as in the iPad's Mail: an item swiped left shows its Pin (or Unpin) along its right side; a
   touch elsewhere puts it back. Up and down still scroll the list. Fingers get a little more room on each item. */
.item { touch-action: pan-y; }
.item.swiped .pin {
  visibility: visible; top: 0; right: 0; bottom: 0; width: auto; height: auto; padding: 0 1em;
  border-radius: 0 0.5em 0.5em 0; background: var(--ink); color: var(--ground);
}
.item.swiped .pin svg { display: none; }
.item.swiped .pin::after { content: attr(data-label); font-weight: bold; }
@media (any-pointer: coarse) { .item { padding-top: 0.55em; padding-bottom: 0.55em; } }
/* Messages pulled down from the top of a screen too narrow for the sidebars (the iPad's Notification Center). */
body.show-messages:not(.panel) #messages { display: flex; z-index: 30; width: min(24rem, 100vw - 1.5rem); }
/* Something done: when, and under it what. Above the list, today's date and the time now. */
#clock { margin: -0.4rem 0 0.9rem; }
#clock span { display: block; }
.done-when { display: block; font-variant-numeric: tabular-nums; }
.done-what { display: block; }
/* A message: where it came from (a small icon), who, when; then the words, two lines at most. Unread: who in bold. */
.msg-top { display: flex; align-items: center; gap: 0.4em; }
.msg-top svg { flex: none; width: 1.1em; height: 1.1em; }
.msg-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.unread .msg-who { font-weight: bold; }
.msg-when { flex: none; }
.msg-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.1em;
}
.msg-src { font-weight: bold; }

/* Connecting an account: a form over the whole screen. What's typed in it goes to Chat Computer's own sign-in store,
   not to Claude. */
#sheet {
  position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center;
  background: var(--ground); padding: 2rem;
}
body.sheet #sheet { display: flex; }
#sheet-form { width: min(28rem, 100%); }
#sheet-title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.5em; }
#sheet-text p { margin: 0 0 0.75em; }
#sheet-fields label { display: block; margin: 0.9em 0 0.25em; }
#sheet-fields input, #sheet-fields select {
  display: block; width: 100%; margin: 0; padding: 0.45em 0.7em; font: inherit; color: var(--ink);
  background: var(--ground); border: 2px solid var(--bubble); border-radius: 0.6em; outline: 0;
}
#sheet-fields input:focus { border-color: var(--ink); }
#sheet-fields .choices { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.9em; }
#sheet-fields .choices button {
  padding: 0.45em 1em; border: 2px solid var(--bubble); border-radius: 0.6em; background: var(--ground); cursor: pointer;
}
#sheet-fields .choices button:hover { border-color: var(--ink); }
#sheet-error { margin: 0.9em 0 0; font-weight: bold; }
#sheet-error:empty { display: none; }
#sheet-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 1.25em; margin-top: 1.5em; }
body.sheet-busy #sheet-ok { visibility: hidden; }

/* The panels' switches, like the Claude app's sidebar button: Messages' at the top left, What's done's at the top
   right, and the conversation's (while something is open) at the bottom right, beside the message box. Each icon
   is the screen with its panel marked, filled in while the panel shows. Switched off, Messages and What's done
   leave a narrow margin with just their switch; the conversation's leaves the page room down to its switch. Only
   where the sidebars fit (body.panel). */
.toggle {
  position: fixed; z-index: 7; display: none; width: 1.6rem; height: 1.6rem; margin: 0; padding: 0.15rem;
  border: 0; border-radius: 0.4rem; background: none; color: var(--ink); cursor: pointer;
}
.toggle svg { display: block; width: 100%; height: 100%; }
.toggle .fill { fill: currentColor; stroke: none; }
.toggle[aria-pressed="false"] .fill { display: none; }
.toggle:hover { background: var(--bubble); }
body.panel #toggle-left, body.panel #toggle-right, body.panel.content #toggle-bottom { display: block; }
#toggle-left, #toggle-right { top: calc(1.69rem + 2px); }
#toggle-left { left: calc(1.25rem + 2px); }
#toggle-right { right: calc(1.25rem + 2px); }
#toggle-bottom { right: calc(var(--panel, 0px) + 0.5rem); bottom: 0.75rem; }
body.panel.hide-left #messages, body.panel.hide-right #done { display: none; }
body.panel #messages .side-head { padding-left: 1.55rem; }
body.panel #done .side-head { padding-right: 1.65rem; }
body.panel.content.hide-bottom #column, body.panel.content.hide-bottom #composer { display: none; }

/* Sleeping: the conversation and the sidebars go away; the line under the message box says how to wake Chat Computer. */
body.sleeping #column, body.sleeping .side, body.sleeping .toggle, body.sheet .toggle { visibility: hidden; }

@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }