@larose/pi-web 0.3.0

package/public/styles.css

@@ -0,0 +1,2463 @@
+:root {
+  color-scheme: light;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+
+  --bg: #f7f7f7;
+  --panel: #ffffff;
+  --panel-subtle: #f2f2f2;
+  --border: #e5e5e5;
+  --border-strong: #c7c7c7;
+  --text: #2f2f2f;
+  --muted: #6b6b6b;
+  --action: #4a4a4a;
+  --action-hover: #2f2f2f;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --accent-soft: rgb(37 99 235 / 7%);
+  --link: var(--accent);
+  --focus-ring: rgb(37 99 235 / 75%);
+  --danger: #b42318;
+  --danger-soft: #fef3f2;
+  --success: #067647;
+  --success-soft: #ecfdf3;
+  --user-message-bg: #eff6ff;
+  --user-message-border: #bfdbfe;
+  --on-action: #ffffff;
+  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --shadow-subtle: 0 1px 2px rgb(47 47 47 / 5%);
+  --shadow: 0 1px 2px rgb(47 47 47 / 6%), 0 8px 28px rgb(47 47 47 / 8%);
+
+  color: var(--text);
+  background: var(--bg);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+body {
+  min-width: 20rem;
+  min-height: 100vh;
+  margin: 0;
+  background: var(--bg);
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button,
+input,
+textarea {
+  border: 1px solid var(--border-strong);
+  border-radius: 0.6rem;
+  background: var(--panel);
+  color: var(--text);
+}
+
+button {
+  padding: 0.62rem 0.9rem;
+  cursor: pointer;
+  border-color: var(--action);
+  background: var(--action);
+  color: var(--on-action);
+  font-weight: 700;
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--action-hover);
+  background: var(--action-hover);
+}
+
+button:disabled,
+input:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+button.secondary,
+.back-button {
+  border-color: var(--border-strong);
+  background: var(--panel);
+  color: var(--muted);
+}
+
+button.secondary:hover:not(:disabled),
+.back-button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+input,
+textarea {
+  width: 100%;
+  padding: 0.75rem 0.85rem;
+  outline: none;
+}
+
+input:focus,
+textarea:focus,
+button:focus-visible,
+a:focus-visible {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--focus-ring);
+  outline: none;
+}
+
+textarea {
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.app-shell {
+  min-height: 100vh;
+}
+
+.home-screen {
+  display: flex;
+  min-height: 100vh;
+  padding: clamp(2rem, 7vw, 5rem) 1.25rem;
+}
+
+.home-container {
+  display: flex;
+  width: min(52rem, 100%);
+  margin: 0 auto;
+  flex-direction: column;
+}
+
+.home-header {
+  margin-bottom: 1.75rem;
+}
+
+.home-header h1 {
+  margin: 0;
+  font-size: clamp(1.9rem, 5vw, 2.6rem);
+  letter-spacing: -0.04em;
+}
+
+.new-session {
+  margin-top: 1rem;
+  padding: clamp(1rem, 3vw, 1.35rem);
+  border: 1px solid var(--border);
+  border-radius: 0.9rem;
+  background: var(--panel);
+  box-shadow: var(--shadow-subtle);
+}
+
+.new-session-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.new-session-heading {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.workspace-controls,
+.repository-fields {
+  display: grid;
+  min-width: 0;
+  gap: 0.65rem;
+}
+
+.workspace-kind {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.workspace-kind legend,
+.workspace-control > label,
+.new-worktree-mode label {
+  margin-bottom: 0.3rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.choice-buttons {
+  display: inline-grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.5rem;
+}
+
+.choice-buttons input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.choice-buttons label {
+  padding: 0.55rem 0.8rem;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.choice-buttons label + input + label {
+  border-left: 1px solid var(--border-strong);
+}
+
+.choice-buttons input:checked + label {
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+.choice-buttons input:focus-visible + label {
+  position: relative;
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+.workspace-control {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+}
+
+.workspace-control select,
+.workspace-control input {
+  width: 100%;
+  min-width: 0;
+  height: 2.5rem;
+  padding: 0 0.7rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.45rem;
+  outline: none;
+  background: var(--panel);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+
+.workspace-control select {
+  padding-right: 2rem;
+  font-family: inherit;
+  font-size: 0.78rem;
+}
+
+.workspace-control select:focus,
+.workspace-control input:focus {
+  position: relative;
+  z-index: 2;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.workspace-control input[aria-busy="true"] {
+  border-color: var(--accent);
+  cursor: progress;
+}
+
+.workspace-control-feedback {
+  min-height: 1rem;
+  margin: 0.22rem 0 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-control-feedback.error {
+  color: var(--danger);
+  font-family: inherit;
+  white-space: normal;
+}
+
+.path-combobox {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) 2.5rem;
+}
+
+.path-combobox input {
+  border-radius: 0.45rem 0 0 0.45rem;
+}
+
+button.path-combobox-toggle {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border-color: var(--border-strong);
+  border-left: 0;
+  border-radius: 0 0.45rem 0.45rem 0;
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 1rem;
+}
+
+button.path-combobox-toggle:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+.path-combobox-list {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 0.3rem);
+  right: 0;
+  left: 0;
+  max-height: 16rem;
+  margin: 0;
+  padding: 0.3rem;
+  overflow-y: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.55rem;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  list-style: none;
+}
+
+.path-combobox-heading {
+  padding: 0.35rem 0.45rem 0.2rem;
+  color: var(--muted);
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.path-combobox-option {
+  display: grid;
+  min-width: 0;
+  gap: 0.08rem;
+  padding: 0.45rem;
+  border-radius: 0.35rem;
+  cursor: pointer;
+}
+
+.path-combobox-option[aria-selected="true"],
+.path-combobox-option:hover {
+  background: var(--accent-soft);
+}
+
+.path-combobox-option strong,
+.path-combobox-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.path-combobox-option strong {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+}
+
+.path-combobox-option span,
+.path-combobox-empty {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.64rem;
+}
+
+.path-combobox-empty {
+  padding: 0.7rem 0.45rem;
+}
+
+.checkout-control {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.checkout-control select {
+  flex: 1 1 auto;
+}
+
+.quiet-action {
+  color: var(--muted);
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+button.quiet-action {
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+button.quiet-action:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text);
+  text-decoration: underline;
+}
+
+.checkout-control .quiet-action {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.worktree-availability {
+  min-width: 0;
+  margin: -0.75rem 0 0;
+  color: var(--muted);
+  font-size: 0.66rem;
+  line-height: 1.4;
+}
+
+.new-worktree-mode {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.15rem;
+  padding-top: 0.7rem;
+  border-top: 1px solid var(--border);
+}
+
+.new-worktree-mode > header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.new-worktree-mode h3 {
+  margin: 0;
+  font-size: 0.78rem;
+}
+
+.new-worktree-mode input {
+  min-width: 0;
+  padding: 0.6rem 0.7rem;
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+
+.repository-worktree-editor {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0 0 0.8rem 0.7rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 0.65rem;
+  background: var(--panel);
+}
+
+.repository-worktree-editor > header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.repository-worktree-editor h4 {
+  margin: 0;
+  font-size: 0.82rem;
+}
+
+.repository-worktree-editor label {
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.repository-worktree-editor input {
+  padding: 0.6rem 0.7rem;
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+
+.repository-worktree-editor > button[type="submit"] {
+  justify-self: end;
+}
+
+.worktree-target {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.66rem;
+  line-height: 1.4;
+}
+
+.worktree-target span {
+  font-family: var(--mono);
+  overflow-wrap: anywhere;
+}
+
+.new-session-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.55rem;
+}
+
+.session-create-submit {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.82rem;
+}
+
+.session-list-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 2.25rem 0 0.8rem;
+}
+
+.session-list-heading h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.latest-sessions .session-list-heading {
+  margin-top: 0;
+}
+
+.latest-sessions > .new-session {
+  margin: 0 0 0.8rem;
+}
+
+.new-session-toggle {
+  flex: 0 0 auto;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+.app-notifications {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  display: grid;
+  width: 100%;
+  padding-top: env(safe-area-inset-top);
+  box-shadow: var(--shadow);
+}
+
+.app-notification {
+  display: grid;
+  width: 100%;
+  min-height: 2.75rem;
+  grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1.25rem;
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--panel);
+}
+
+.app-notification[data-tone="success"] {
+  border-color: var(--success);
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.app-notification[data-tone="error"] {
+  border-color: var(--danger);
+  background: var(--danger-soft);
+}
+
+.app-notification-message {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 0.78rem;
+  font-weight: 600;
+  grid-column: 2;
+  text-align: center;
+}
+
+.app-notification[data-tone="error"] .app-notification-message {
+  color: var(--danger);
+}
+
+button.app-notification-dismiss {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  flex: 0 0 auto;
+  border-color: transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1.15rem;
+  line-height: 1;
+  grid-column: 3;
+}
+
+button.app-notification-dismiss:hover:not(:disabled) {
+  border-color: var(--border);
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+.latest-session-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.latest-session-card {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-bottom-width: 0;
+  background: var(--panel);
+}
+
+.latest-session-card:first-child {
+  border-radius: 0.65rem 0.65rem 0 0;
+}
+
+.latest-session-card:last-child {
+  border-bottom-width: 1px;
+  border-radius: 0 0 0.65rem 0.65rem;
+}
+
+.latest-session-card:only-child {
+  border-bottom-width: 1px;
+  border-radius: 0.65rem;
+}
+
+.latest-session-card:hover,
+.latest-session-card:focus-within {
+  position: relative;
+  border-color: var(--border-strong);
+}
+
+.latest-session-button {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 0.6rem;
+  padding: 0.65rem 0.75rem;
+  border: 0;
+  border-radius: 0;
+  background: var(--panel);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.latest-session-button:hover,
+.latest-session-button:focus-visible {
+  background: var(--panel-subtle);
+}
+
+.latest-session-button:focus-visible,
+.latest-session-card > .session-delete:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--focus-ring);
+}
+
+.latest-session-button .latest-session-location {
+  font-family: var(--mono);
+}
+
+.latest-empty {
+  grid-column: 1 / -1;
+}
+
+.all-sessions {
+  margin-top: 2.5rem;
+}
+
+.all-sessions .session-list-heading {
+  margin-top: 0;
+}
+
+.home-footer {
+  margin-top: auto;
+  padding-top: 3rem;
+  color: var(--muted);
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+.home-footer p {
+  margin: 0;
+}
+
+.home-footer a {
+  color: var(--link);
+  font-weight: 650;
+  text-underline-offset: 0.15em;
+}
+
+.home-footer a:hover {
+  color: var(--accent-hover);
+}
+
+.session-list {
+  display: grid;
+  gap: 1.3rem;
+}
+
+.session-group-header {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+}
+
+.session-group-identity {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.55rem;
+}
+
+.session-group-header h3 {
+  overflow: hidden;
+  margin: 0;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 1rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-group-header h3 strong {
+  color: var(--text);
+  font-weight: 750;
+}
+
+.worktree-list,
+.standalone-sessions {
+  padding-left: 0.7rem;
+  border-left: 2px solid var(--border);
+}
+
+.worktree-list {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.worktree-group {
+  min-width: 0;
+}
+
+.worktree-header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.35rem;
+}
+
+.worktree-heading-context {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+.worktree-identity {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: baseline;
+  gap: 0.08rem 0.5rem;
+}
+
+button.contextual-session-create,
+button.repository-worktree-start,
+button.worktree-delete {
+  flex: 0 0 auto;
+  padding: 0.2rem 0;
+  border-color: transparent;
+  background: transparent;
+  font-size: 0.66rem;
+  white-space: nowrap;
+}
+
+button.contextual-session-create,
+button.repository-worktree-start {
+  color: var(--muted);
+}
+
+button.contextual-session-create:hover:not(:disabled),
+button.repository-worktree-start:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text);
+  text-decoration: underline;
+}
+
+button.worktree-delete {
+  color: var(--muted);
+}
+
+button.worktree-delete:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text);
+  text-decoration: underline;
+}
+
+.worktree-sessions,
+.standalone-sessions {
+  min-width: 0;
+}
+
+.worktree-sessions {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.relative-cwd-group {
+  min-width: 0;
+}
+
+.relative-cwd-heading {
+  overflow: hidden;
+  margin: 0 0 0.25rem;
+  padding-left: 0.2rem;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.64rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worktree-header .relative-cwd-heading {
+  margin: 0;
+  padding-left: 0;
+}
+
+.worktree-empty {
+  margin: 0;
+  padding: 0.65rem 0.8rem;
+  border: 1px dashed var(--border);
+  border-radius: 0.55rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+}
+
+.session-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-bottom-width: 0;
+  background: var(--panel);
+}
+
+.session-card:first-of-type {
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+.session-card:last-child {
+  border-bottom-width: 1px;
+  border-radius: 0 0 0.75rem 0.75rem;
+}
+
+.session-card:only-of-type {
+  border-bottom-width: 1px;
+  border-radius: 0.75rem;
+}
+
+.session-card:hover,
+.session-card:focus-within {
+  position: relative;
+  border-color: var(--border-strong);
+}
+
+.session-button {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.65rem;
+  padding: 0.7rem 0.85rem;
+  background: var(--panel);
+  color: var(--text);
+  text-align: left;
+  text-decoration: none;
+}
+
+.session-button:hover,
+.session-button:focus-visible {
+  background: var(--panel-subtle);
+}
+
+.session-button::after {
+  content: "›";
+  align-self: center;
+  color: var(--muted);
+  font-size: 1.25rem;
+}
+
+.session-delete.destructive {
+  min-width: 4.75rem;
+  padding: 0.55rem 0.7rem;
+  border: 0;
+  border-left: 1px solid var(--border);
+  border-radius: 0;
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.session-delete.destructive:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+.running-dot {
+  width: 0.48rem;
+  height: 0.48rem;
+  align-self: center;
+  border-radius: 50%;
+  background: var(--border-strong);
+}
+
+.running-dot.active {
+  background: var(--accent);
+  box-shadow: 0 0 0 0.22rem var(--accent-soft);
+}
+
+.session-copy {
+  min-width: 0;
+}
+
+.session-copy strong,
+.session-copy span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-copy strong {
+  font-size: 0.86rem;
+  font-weight: 680;
+}
+
+.session-copy span {
+  margin-top: 0.16rem;
+  color: var(--muted);
+  font-size: 0.7rem;
+}
+
+.empty-list {
+  margin: 0;
+  padding: 2.5rem 1rem;
+  border: 1px dashed var(--border-strong);
+  border-radius: 0.75rem;
+  color: var(--muted);
+  text-align: center;
+}
+
+.workspace {
+  display: grid;
+  width: 100%;
+  height: 100vh;
+  min-width: 0;
+  min-height: 0;
+  grid-template-areas:
+    "context transcript"
+    "context composer";
+  grid-template-columns: clamp(15rem, 22vw, 20rem) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  background: var(--bg);
+}
+
+.session-identity {
+  display: grid;
+  gap: 0.55rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.session-identity-meta {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.session-navigation,
+.session-header-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.session-header-actions {
+  justify-content: flex-end;
+  gap: 0.65rem;
+}
+
+.back-button,
+.create-session {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.2rem 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.15;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.back-button:hover,
+.create-session:hover {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text);
+  text-decoration: underline;
+}
+
+.session-title-row {
+  display: grid;
+  min-width: 0;
+  gap: 0.15rem;
+}
+
+.session-title-row h1 {
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.3;
+}
+
+.session-title-button {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: 0.1rem 0.2rem;
+  border-color: transparent;
+  border-radius: 0.3rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 700;
+  line-height: inherit;
+  overflow-wrap: anywhere;
+  text-align: left;
+  white-space: normal;
+}
+
+.session-title-button:hover:not(:disabled) {
+  border-color: var(--border);
+  background: var(--panel-subtle);
+  color: var(--text);
+}
+
+.connection-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex: none;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.62rem;
+}
+
+.connection-status::before {
+  width: 0.38rem;
+  height: 0.38rem;
+  border-radius: 50%;
+  background: currentColor;
+  content: "";
+  flex: none;
+}
+
+.connection-status[data-state="online"] {
+  color: var(--success);
+}
+
+.connection-status[data-state="error"] {
+  color: var(--danger);
+}
+
+.session-title-row > .connection-status {
+  margin-left: 0.2rem;
+}
+
+.session-context {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: 1rem 0.85rem;
+  overflow: hidden;
+  border-right: 1px solid var(--border);
+  background: var(--panel-subtle);
+  flex-direction: column;
+  grid-area: context;
+}
+
+.session-context h2 {
+  margin: 0 0 1rem;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.65rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.session-context-toggle {
+  display: none;
+}
+
+.session-context-content {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.session-context-content > dl {
+  display: grid;
+  margin: 0;
+  gap: 0.75rem;
+}
+
+.session-context-content > dl > div {
+  min-width: 0;
+}
+
+.session-context-content > dl > div > dt {
+  margin-bottom: 0.25rem;
+  color: var(--muted);
+  font-size: 0.65rem;
+  font-weight: 700;
+}
+
+.session-context-content > dl > div > dd {
+  overflow: hidden;
+  margin: 0;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-context .session-workspace {
+  display: grid;
+  overflow: visible;
+  gap: 0.45rem;
+  white-space: normal;
+}
+
+.session-workspace-state {
+  color: var(--muted);
+  font-size: 0.63rem;
+}
+
+.session-workspace-row {
+  display: grid;
+  min-width: 0;
+  gap: 0.04rem;
+}
+
+.session-workspace-label {
+  color: var(--muted);
+  font-size: 0.61rem;
+  font-weight: 700;
+}
+
+.session-workspace-path {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-size: 0.68rem;
+  white-space: normal;
+}
+
+.session-status-item .extension-statuses {
+  display: grid;
+  overflow: visible;
+  align-items: initial;
+  gap: 0.18rem;
+  white-space: normal;
+}
+
+.session-context .extension-status {
+  color: var(--text);
+}
+
+.session-context-content [data-session-tokens] {
+  font-variant-numeric: tabular-nums;
+}
+
+.session-token-line {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-token-line.is-empty {
+  color: var(--muted);
+}
+
+.session-context-content > dl > .session-context-usage-item > dd {
+  overflow: visible;
+  white-space: normal;
+}
+
+.session-context-usage-visual {
+  display: grid;
+  gap: 0.28rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.session-context-usage-summary {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.15rem 0.55rem;
+}
+
+.session-context-percentage {
+  color: var(--text);
+  font-size: inherit;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: inherit;
+}
+
+.session-context-capacity {
+  color: var(--muted);
+  font-size: 0.63rem;
+}
+
+.session-context-meter {
+  display: block;
+  height: 0.25rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--border);
+}
+
+.session-context-meter-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--muted);
+}
+
+.session-context-auto {
+  width: max-content;
+  color: var(--muted);
+  font-size: 0.6rem;
+  line-height: 1.25;
+}
+
+[data-session-context-usage][data-state="loading"] .session-context-percentage,
+[data-session-context-usage][data-state="unknown"] .session-context-percentage,
+[data-session-context-usage][data-state="unavailable"] .session-context-percentage {
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.session-context-content > .extension-widgets {
+  min-height: 0;
+  max-height: none;
+  margin: 1.25rem 0 0;
+  overflow-y: auto;
+  flex: 1;
+  flex-flow: column nowrap;
+}
+
+.transcript {
+  --transcript-block-padding: 1.5rem;
+
+  min-height: 0;
+  grid-area: transcript;
+  overflow-y: auto;
+  padding: var(--transcript-block-padding) max(1rem, calc((100% - 54rem) / 2));
+  scroll-padding-block-start: var(--transcript-block-padding);
+}
+
+.transcript.has-submitted-turn-anchor::after {
+  display: block;
+  block-size: var(--submitted-turn-runway, calc(100% - var(--transcript-block-padding)));
+  overflow-anchor: none;
+  pointer-events: none;
+  content: "";
+}
+
+.empty-state {
+  display: grid;
+  min-height: 100%;
+  place-content: center;
+  gap: 0.4rem;
+  color: var(--muted);
+  text-align: center;
+}
+
+.empty-state strong {
+  color: var(--muted);
+}
+
+.message {
+  margin: 0 0 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  background: var(--panel);
+  box-shadow: var(--shadow-subtle);
+}
+
+.message > header,
+.message > summary {
+  padding: 0.55rem 0.8rem;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.message > header,
+.message[open] > summary {
+  border-bottom: 1px solid var(--border);
+}
+
+.message > summary {
+  cursor: pointer;
+}
+
+.message.user {
+  width: fit-content;
+  max-width: min(42rem, 82%);
+  margin-left: auto;
+  border-color: var(--user-message-border);
+  border-radius: 1.15rem;
+  background: var(--user-message-bg);
+  box-shadow: none;
+}
+
+.message.user > header,
+.message.assistant:not(.error) > header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.message.user > .message-content {
+  padding: 0.7rem 1rem;
+}
+
+.message.user.pending[data-state="pending"] {
+  border-color: var(--user-message-border);
+  background: var(--user-message-bg);
+}
+
+.message.user.pending[data-state="pending"] > header {
+  position: static;
+  display: flex;
+  width: auto;
+  height: auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  padding: 0.3rem 0.45rem 0 1rem;
+  overflow: visible;
+  clip: auto;
+  border: 0;
+  color: var(--muted);
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  white-space: normal;
+}
+
+.pending-message-remove {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.pending-message-remove:hover:not(:disabled) {
+  border-color: var(--border);
+  background: var(--panel);
+  color: var(--text);
+}
+
+.message.user.pending[data-state="pending"] > .message-content {
+  padding-top: 0.3rem;
+}
+
+.message.assistant:not(.error) {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.message.assistant:not(.error) > .message-content {
+  padding: 0;
+}
+
+.message.toolResult,
+.message.live-tool {
+  background: var(--panel-subtle);
+}
+
+.message.error {
+  border-color: var(--danger);
+  background: var(--danger-soft);
+}
+
+.message-content {
+  padding: 0.85rem;
+}
+
+.message-text,
+.message pre {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.message-content > * + * {
+  margin-top: 0.65rem;
+}
+
+.markdown-content {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  line-height: 1.65;
+  white-space: normal;
+}
+
+.markdown-content > :first-child {
+  margin-top: 0;
+}
+
+.markdown-content > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content p,
+.markdown-content ul,
+.markdown-content ol,
+.markdown-content blockquote,
+.markdown-content pre,
+.markdown-content table,
+.markdown-content hr {
+  margin-block: 0.8rem;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin: 1.35em 0 0.5em;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.markdown-content h1 {
+  font-size: clamp(1.35rem, 3vw, 1.65rem);
+}
+
+.markdown-content h2 {
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid var(--border);
+  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
+}
+
+.markdown-content h3 {
+  font-size: 1.08rem;
+}
+
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  font-size: 0.95rem;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 1.5rem;
+}
+
+.markdown-content li + li {
+  margin-top: 0.25rem;
+}
+
+.markdown-content li > p {
+  margin-block: 0.35rem;
+}
+
+.markdown-content .contains-task-list,
+.markdown-content .task-list-item {
+  list-style: none;
+}
+
+.markdown-content .contains-task-list {
+  padding-left: 0.25rem;
+}
+
+.markdown-content input[type="checkbox"] {
+  width: 0.9rem;
+  height: 0.9rem;
+  margin: 0 0.45rem 0 0;
+  accent-color: var(--accent);
+  vertical-align: -0.08rem;
+}
+
+.markdown-content blockquote {
+  padding: 0.15rem 0 0.15rem 0.9rem;
+  border-left: 0.22rem solid var(--border-strong);
+  color: var(--muted);
+}
+
+.markdown-content blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown-content blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content code,
+.markdown-content pre {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+}
+
+.markdown-content :not(pre) > code {
+  padding: 0.12rem 0.3rem;
+  border: 1px solid var(--border);
+  border-radius: 0.3rem;
+  background: var(--panel-subtle);
+  overflow-wrap: anywhere;
+}
+
+.markdown-content pre,
+.markdown-content .markdown-fallback {
+  max-width: 100%;
+  padding: 0.8rem;
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: 0.55rem;
+  background: var(--panel-subtle);
+  line-height: 1.5;
+  overflow-wrap: normal;
+  white-space: pre;
+}
+
+.markdown-content pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  white-space: inherit;
+}
+
+.markdown-content hr {
+  border: 0;
+  border-top: 1px solid var(--border-strong);
+}
+
+.markdown-content table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 0.82rem;
+}
+
+.markdown-content th,
+.markdown-content td {
+  min-width: 7rem;
+  padding: 0.4rem 0.55rem;
+  border: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.markdown-content th {
+  background: var(--panel-subtle);
+  font-weight: 700;
+}
+
+.markdown-content a {
+  color: var(--link);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.15em;
+}
+
+.markdown-content a:hover {
+  color: var(--accent-hover);
+}
+
+.markdown-content a:focus-visible {
+  border-radius: 0.2rem;
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.markdown-content .markdown-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-block: 0.8rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+}
+
+.markdown-content .markdown-external-image {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.4rem;
+  background: var(--panel-subtle);
+  font-family: var(--mono);
+  font-size: 0.76rem;
+  overflow-wrap: anywhere;
+}
+
+.markdown-content .markdown-unsafe-link,
+.markdown-content .markdown-image-unavailable {
+  color: var(--muted);
+  text-decoration: underline dotted;
+  text-underline-offset: 0.15em;
+}
+
+.message details {
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  color: var(--muted);
+  background: var(--panel);
+}
+
+.message details > summary {
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+
+.message summary:focus-visible {
+  border-radius: 0.3rem;
+  box-shadow: 0 0 0 3px var(--focus-ring);
+  outline: none;
+}
+
+.message details pre {
+  margin-top: 0.55rem;
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.assistant-activity {
+  margin: 0 0 1rem;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  background: var(--panel-subtle);
+  box-shadow: var(--shadow-subtle);
+}
+
+.assistant-activity[data-state="running"] {
+  border-color: var(--border-strong);
+  background: var(--panel-subtle);
+}
+
+.assistant-activity > summary {
+  display: grid;
+  min-height: 3.25rem;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.65rem 0.8rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.assistant-activity > summary::-webkit-details-marker {
+  display: none;
+}
+
+.assistant-activity > summary::after {
+  content: "›";
+  color: var(--muted);
+  font-size: 1.15rem;
+  line-height: 1;
+  transform: rotate(0deg);
+  transition: transform 140ms ease;
+}
+
+.assistant-activity[open] > summary::after {
+  transform: rotate(90deg);
+}
+
+.assistant-activity > summary:focus-visible,
+.assistant-activity-item > summary:focus-visible {
+  border-radius: 0.3rem;
+  box-shadow: inset 0 0 0 2px var(--focus-ring);
+  outline: none;
+}
+
+.assistant-activity-status {
+  position: relative;
+  width: 0.9rem;
+  height: 0.9rem;
+  border: 1.5px solid var(--border-strong);
+  border-radius: 50%;
+  color: var(--accent);
+}
+
+.assistant-activity[data-state="running"] .assistant-activity-status {
+  border-color: var(--border-strong);
+  border-top-color: var(--accent);
+  animation: assistant-activity-spin 800ms linear infinite;
+}
+
+.assistant-activity[data-state="complete"] .assistant-activity-status,
+.assistant-activity[data-state="aborted"] .assistant-activity-status {
+  border-color: transparent;
+}
+
+.assistant-activity[data-state="complete"] .assistant-activity-status::after,
+.assistant-activity[data-state="aborted"] .assistant-activity-status::after {
+  position: absolute;
+  inset: -0.32rem;
+  font-size: 0.9rem;
+  font-weight: 800;
+  line-height: 1;
+  text-align: center;
+}
+
+.assistant-activity[data-state="complete"] .assistant-activity-status::after {
+  content: "✓";
+}
+
+.assistant-activity[data-state="aborted"] .assistant-activity-status::after {
+  content: "■";
+  color: var(--muted);
+  font-size: 0.65rem;
+}
+
+.assistant-activity-summary-copy {
+  display: block;
+  min-width: 0;
+}
+
+.assistant-activity-title,
+.assistant-activity-action {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistant-activity-title {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.assistant-activity-action {
+  margin-top: 0.12rem;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  line-height: 1.35;
+}
+
+.assistant-activity-content:not(:empty) {
+  padding: 0.3rem 0.8rem 0.7rem 2.4rem;
+  border-top: 1px solid var(--border);
+}
+
+.assistant-activity-item {
+  color: var(--muted);
+}
+
+.assistant-activity-item + .assistant-activity-item {
+  border-top: 1px solid var(--border);
+}
+
+.assistant-activity-item > summary {
+  padding: 0.55rem 0.15rem;
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.assistant-activity-item-content {
+  padding: 0 0.15rem 0.65rem;
+}
+
+.assistant-activity-item-content .message-text,
+.assistant-activity-item-content pre {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.assistant-activity-item-content > * + * {
+  margin-top: 0.55rem;
+}
+
+@keyframes assistant-activity-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.extension-widgets {
+  display: flex;
+  max-height: 12rem;
+  margin-bottom: 0.6rem;
+  overflow: auto;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.extension-widgets[data-extension-widgets-below] {
+  margin-top: 0.6rem;
+  margin-bottom: 0;
+}
+
+.extension-statuses {
+  display: inline-flex;
+  min-width: 0;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  color: var(--muted);
+}
+
+.extension-status {
+  overflow-wrap: anywhere;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: inherit;
+}
+
+.extension-status::before {
+  content: "·";
+  margin-right: 0.3rem;
+  color: var(--muted);
+}
+
+.extension-widget {
+  min-width: min(24rem, 100%);
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.65rem;
+  background: var(--panel);
+}
+
+.extension-widget-content {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.74rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+.extension-prompt {
+  margin-bottom: 0.6rem;
+}
+
+.extension-prompt-panel {
+  width: 100%;
+  max-height: min(28rem, 45vh);
+  overflow: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.7rem;
+  background: var(--panel);
+}
+
+.extension-prompt-panel > header,
+.extension-prompt-body {
+  padding: 0.5rem 0.65rem;
+}
+
+.extension-prompt-panel > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+}
+
+.extension-prompt-panel h2 {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  flex: 1 1 auto;
+  font-size: 0.88rem;
+}
+
+.extension-prompt-title-toggle,
+.extension-prompt-title-toggle:hover:not(:disabled) {
+  width: 100%;
+  padding: 0;
+  border-color: transparent;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--text);
+  font-size: inherit;
+  line-height: inherit;
+  text-align: left;
+}
+
+.extension-prompt-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex: none;
+}
+
+.extension-prompt-header-actions button {
+  height: 1.65rem;
+  padding: 0 0.5rem;
+  border-radius: 0.4rem;
+  font-size: 0.7rem;
+  line-height: 1;
+}
+
+.extension-prompt-panel.is-collapsed > header {
+  border-bottom: 0;
+}
+
+.extension-prompt-panel.is-collapsed .extension-prompt-body,
+.extension-prompt-panel.is-collapsed .extension-prompt-actions {
+  display: none;
+}
+
+.extension-prompt-body {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.extension-prompt-choices {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.extension-prompt-choices button {
+  width: 100%;
+  padding: 0.42rem 0.65rem;
+  line-height: 1.25;
+  text-align: left;
+}
+
+.extension-prompt-field {
+  width: 100%;
+  max-height: 12rem;
+}
+
+.extension-prompt-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.4rem 0.65rem;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  border-top: 1px solid var(--border);
+}
+
+.extension-prompt-actions:empty {
+  display: none;
+}
+
+.composer {
+  padding: 0.55rem 0.75rem 0.65rem;
+  background: transparent;
+  grid-area: composer;
+}
+
+.composer-inner {
+  width: min(54rem, 100%);
+  margin: 0 auto;
+}
+
+.slash-completion {
+  max-height: 15rem;
+  margin-bottom: 0.4rem;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.65rem;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.slash-completion-option {
+  display: grid;
+  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
+  width: 100%;
+  padding: 0.5rem 0.7rem;
+  gap: 0.8rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  font-weight: 400;
+  line-height: 1.25;
+  text-align: left;
+}
+
+.slash-completion-option + .slash-completion-option {
+  border-top: 1px solid var(--border);
+}
+
+.slash-completion-option:hover,
+.slash-completion-option[aria-selected="true"] {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.slash-completion-name {
+  overflow: hidden;
+  color: var(--accent-hover);
+  font-family: var(--mono);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slash-completion-description {
+  overflow: hidden;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.composer-input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.45rem;
+}
+
+.composer textarea {
+  min-width: 0;
+  min-height: 2.35rem;
+  max-height: min(12rem, 30vh);
+  padding: 0.45rem 0.7rem;
+  overflow-y: hidden;
+  border-color: var(--border);
+  flex: 1;
+  line-height: 1.35;
+  resize: none;
+}
+
+.composer textarea:focus {
+  border-color: var(--accent);
+  box-shadow: none;
+}
+
+.composer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.45rem;
+}
+
+.composer-actions button {
+  height: 2.35rem;
+  flex: none;
+  padding: 0 0.65rem;
+  border-radius: 0.5rem;
+  font-size: 0.78rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 56rem) {
+  .workspace {
+    grid-template-areas:
+      "context"
+      "transcript"
+      "composer";
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  .session-context {
+    padding: 0.4rem max(0.75rem, calc((100% - 54rem) / 2));
+    overflow: visible;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+    background: var(--panel);
+  }
+
+  .session-identity {
+    grid-template-areas: "nav title actions";
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.65rem;
+    margin-bottom: 0.2rem;
+    padding-bottom: 0.4rem;
+  }
+
+  .session-identity-meta {
+    display: contents;
+  }
+
+  .session-navigation {
+    grid-area: nav;
+  }
+
+  .session-header-actions {
+    grid-area: actions;
+  }
+
+  .session-title-row {
+    grid-area: title;
+  }
+
+  .session-title-row h1 {
+    font-size: 0.82rem;
+  }
+
+  .session-context h2 {
+    display: none;
+  }
+
+  .session-context-toggle {
+    display: flex;
+    width: 100%;
+    min-height: 2rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem 0.35rem;
+    border-color: transparent;
+    background: transparent;
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .session-context-toggle:hover:not(:disabled) {
+    border-color: var(--border);
+  }
+
+  .session-context-toggle::after {
+    content: "›";
+    color: var(--muted);
+    font-size: 1.15rem;
+    line-height: 1;
+    transform: rotate(0deg);
+    transition: transform 140ms ease;
+  }
+
+  .session-context-toggle[aria-expanded="true"]::after {
+    transform: rotate(90deg);
+  }
+
+  .session-context-content {
+    padding-top: 0.4rem;
+    flex: none;
+  }
+
+  .session-context.is-collapsed .session-context-content {
+    display: none;
+  }
+
+  .session-context-content > dl {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    align-items: start;
+    gap: 0.6rem 0.75rem;
+  }
+
+  .session-context-content > dl > .session-workspace-item,
+  .session-context-content > dl > .session-status-item,
+  .session-context-content > dl > .session-context-usage-item {
+    grid-column: 1 / -1;
+  }
+
+  .session-context-content > dl > div > dt {
+    margin-bottom: 0.08rem;
+    font-size: 0.56rem;
+  }
+
+  .session-context-content > dl > div > dd {
+    font-size: 0.61rem;
+    line-height: 1.25;
+  }
+
+  .session-context-content > .extension-widgets {
+    max-height: 7rem;
+    margin-top: 0.5rem;
+    flex: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .assistant-activity > summary::after,
+  .session-context-toggle::after {
+    transition: none;
+  }
+
+  .assistant-activity[data-state="running"] .assistant-activity-status {
+    animation: none;
+    box-shadow: inset 0 0 0 2px var(--panel);
+    background: var(--accent);
+  }
+}
+
+@media (max-width: 38rem) {
+  .app-notification {
+    padding-inline: 0.65rem;
+  }
+
+  .home-screen {
+    padding-top: 2rem;
+  }
+
+  .choice-buttons {
+    width: 100%;
+  }
+
+  .checkout-control {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .checkout-control select {
+    flex-basis: 100%;
+  }
+
+  .new-worktree-mode {
+    padding: 0.65rem 0 0;
+  }
+
+  .repository-worktree-editor {
+    margin-left: 0.45rem;
+  }
+
+  .new-session-actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+
+  .session-create-submit {
+    width: 100%;
+  }
+
+  .new-session-toggle {
+    padding-inline: 0.6rem;
+    font-size: 0.75rem;
+  }
+
+  .session-list-heading {
+    gap: 0.5rem;
+  }
+
+  .session-group-header {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.4rem;
+  }
+
+  .session-group-identity {
+    align-items: flex-start;
+  }
+
+  .session-group-header h3 {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .worktree-list,
+  .standalone-sessions {
+    padding-left: 0.45rem;
+  }
+
+  .worktree-header {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.5rem;
+  }
+
+  .worktree-heading-context {
+    flex: 1 1 100%;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.4rem;
+  }
+
+  .worktree-header > .worktree-delete {
+    margin-left: auto;
+  }
+
+  .session-button {
+    gap: 0.5rem;
+    padding: 0.65rem 0.7rem;
+  }
+
+  .session-delete.destructive {
+    min-width: 4.2rem;
+    padding-inline: 0.5rem;
+  }
+
+  .session-identity {
+    gap: 0.45rem;
+  }
+
+  .back-button,
+  .create-session {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--border-strong);
+    border-radius: 0.6rem;
+    background: var(--panel);
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .back-button:hover,
+  .create-session:hover {
+    border-color: var(--border-strong);
+    background: var(--panel-subtle);
+    text-decoration: none;
+  }
+
+  .back-button span,
+  .create-session-label {
+    display: none;
+  }
+
+  .transcript {
+    --transcript-block-padding: 1rem;
+
+    padding: var(--transcript-block-padding) 0.75rem;
+  }
+
+  .message.user.pending[data-state="pending"] {
+    max-width: 90%;
+  }
+
+  .markdown-content {
+    font-size: 0.86rem;
+  }
+
+  .markdown-content th,
+  .markdown-content td {
+    min-width: 6rem;
+  }
+
+  .pending-message-remove {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .assistant-activity > summary {
+    gap: 0.55rem;
+    padding-inline: 0.65rem;
+  }
+
+  .assistant-activity-content:not(:empty) {
+    padding-right: 0.65rem;
+    padding-left: 2.1rem;
+  }
+
+  .composer {
+    padding: 0.5rem;
+  }
+
+  .composer-input-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .composer textarea {
+    width: 100%;
+    flex: none;
+  }
+
+  .composer-actions {
+    width: 100%;
+  }
+
+  .slash-completion-option {
+    display: block;
+  }
+
+  .slash-completion-description {
+    display: block;
+    margin-top: 0.15rem;
+  }
+
+  .session-context-content > dl {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .session-context-content > dl > .session-context-usage-item {
+    grid-column: auto;
+  }
+}