@firstpick/pi-package-webui 0.1.0 → 0.1.2

package/public/styles.css

@@ -44,12 +44,16 @@
   --glow-teal: rgba(148, 226, 213, 0.26);
   --panel-gradient: linear-gradient(145deg, rgba(49, 50, 68, 0.78), rgba(24, 24, 37, 0.86) 52%, rgba(17, 17, 27, 0.9));
   --neon-gradient: linear-gradient(120deg, var(--ctp-pink), var(--ctp-mauve) 32%, var(--ctp-blue) 66%, var(--ctp-teal));
+  --visual-viewport-height: 100dvh;
+  --visual-viewport-offset-top: 0px;
+  --keyboard-inset-bottom: 0px;
 
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 * { box-sizing: border-box; }
 html, body { height: 100%; min-height: 100%; }
+html { overflow-x: hidden; }
 body {
   margin: 0;
   min-height: 0;
@@ -91,9 +95,10 @@ button, select, textarea, input {
   font: inherit;
   outline: none;
 }
-button, select, input { min-height: 2.35rem; }
+button, select, input { min-height: 44px; }
 button {
   position: relative;
+  min-width: 44px;
   padding: 0.56rem 0.86rem;
   cursor: pointer;
   color: var(--ctp-text);
@@ -184,6 +189,12 @@ textarea {
   box-shadow: inset 0 0 0 1px rgba(245, 194, 231, 0.04), inset 0 0 2rem rgba(17, 17, 27, 0.42);
 }
 textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
+#promptInput {
+  min-height: calc(1.5em + 1.8rem);
+  max-height: min(38vh, 18rem);
+  resize: none;
+  overflow-y: hidden;
+}
 
 .topbar {
   position: sticky;
@@ -238,7 +249,7 @@ textarea::placeholder { color: rgba(186, 194, 222, 0.62); }
   padding: 1rem;
   width: 100%;
   height: 100vh;
-  height: 100dvh;
+  height: var(--visual-viewport-height, 100dvh);
   min-height: 0;
   overflow: hidden;
   transition: grid-template-columns 180ms ease;
@@ -249,6 +260,9 @@ body.side-panel-collapsed .layout {
 body.side-panel-collapsed .side-panel {
   display: none;
 }
+.side-panel-backdrop {
+  display: none;
+}
 .side-panel-expand-button {
   position: fixed;
   top: 1rem;
@@ -287,6 +301,9 @@ body.side-panel-collapsed .side-panel {
 body.side-panel-collapsed .side-panel-expand-button {
   display: grid;
 }
+body.side-panel-collapsed .terminal-tabs-shell {
+  padding-right: 4.35rem;
+}
 .side-panel-button-icon {
   position: relative;
   z-index: 1;
@@ -456,10 +473,207 @@ body.side-panel-collapsed .side-panel-expand-button {
   width: 100%;
   min-width: 0;
 }
+.network-status {
+  display: grid;
+  gap: 0.42rem;
+  min-width: 0;
+  min-height: 5.6rem;
+  padding: 0.68rem 0.72rem;
+  overflow-wrap: anywhere;
+  color: rgba(205, 214, 244, 0.88);
+  white-space: normal;
+  border: 1px solid rgba(180, 190, 254, 0.16);
+  border-radius: 0.72rem;
+  background: rgba(17, 17, 27, 0.62);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1.35;
+}
+.network-status.open {
+  color: var(--ctp-yellow);
+  border-color: rgba(249, 226, 175, 0.34);
+  box-shadow: 0 0 0.9rem rgba(249, 226, 175, 0.10);
+}
+.network-status.opening {
+  color: var(--ctp-teal);
+  border-color: rgba(148, 226, 213, 0.34);
+}
+.network-status.closed {
+  color: rgba(186, 194, 222, 0.72);
+}
+.network-status-heading {
+  color: var(--ctp-text);
+  font-size: 0.82rem;
+  letter-spacing: 0.02em;
+}
+.network-status-detail,
+.network-status-empty {
+  color: rgba(186, 194, 222, 0.68);
+  font-family: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.network-url-list {
+  display: grid;
+  gap: 0.28rem;
+  min-width: 0;
+}
+.network-status-url-row {
+  display: grid;
+  grid-template-columns: 3.15rem minmax(0, 1fr);
+  gap: 0.38rem;
+  align-items: start;
+  min-width: 0;
+}
+.network-status-url-label {
+  color: rgba(186, 194, 222, 0.70);
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.network-status-url {
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.network-status-url:hover,
+.network-status-url:focus-visible {
+  color: var(--ctp-teal);
+  text-decoration: underline;
+}
+#openNetworkButton {
+  color: var(--ctp-yellow);
+  border-color: rgba(249, 226, 175, 0.32);
+}
+#openNetworkButton:not(:disabled):hover {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-peach), var(--ctp-red));
+}
 .side-panel-controls .danger {
   margin-top: 0.15rem;
 }
 
+.terminal-tabs-shell {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+  padding: 0.62rem 0.78rem;
+  border-bottom: 1px solid rgba(180, 190, 254, 0.16);
+  background:
+    linear-gradient(90deg, rgba(17, 17, 27, 0.96), rgba(30, 30, 46, 0.82), rgba(24, 24, 37, 0.92)),
+    radial-gradient(circle at 0% 0%, rgba(245, 194, 231, 0.12), transparent 18rem);
+  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(17, 17, 27, 0.20);
+}
+.terminal-tabs-toggle-button { display: none; }
+.terminal-tabs {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.terminal-tab {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 9rem;
+  max-width: 16rem;
+  border: 1px solid rgba(180, 190, 254, 0.16);
+  border-radius: 0.82rem;
+  overflow: hidden;
+  background: rgba(17, 17, 27, 0.54);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
+}
+.terminal-tab.active {
+  border-color: rgba(148, 226, 213, 0.54);
+  background:
+    linear-gradient(120deg, rgba(148, 226, 213, 0.17), rgba(203, 166, 247, 0.12)),
+    rgba(17, 17, 27, 0.60);
+  box-shadow: 0 0 1rem rgba(148, 226, 213, 0.18), inset 0 1px 0 rgba(255,255,255,0.05);
+}
+.terminal-tab.stopped {
+  opacity: 0.72;
+  border-color: rgba(243, 139, 168, 0.28);
+}
+.terminal-tab-button,
+.terminal-tab-close,
+.terminal-new-tab-button {
+  min-height: 2.35rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.terminal-tab-button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.1rem;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 0.38rem 0.66rem;
+  text-align: left;
+}
+.terminal-tab-button:hover,
+.terminal-tab-close:hover,
+.terminal-new-tab-button:hover {
+  transform: none;
+}
+.terminal-tab-title,
+.terminal-tab-meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.terminal-tab-title {
+  color: var(--ctp-text);
+  font-size: 0.84rem;
+  font-weight: 900;
+  letter-spacing: 0.03em;
+}
+.terminal-tab-meta {
+  color: rgba(186, 194, 222, 0.62);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.68rem;
+}
+.terminal-tab.active .terminal-tab-title {
+  color: var(--ctp-teal);
+  text-shadow: 0 0 0.8rem var(--glow-teal);
+}
+.terminal-tab-close {
+  flex: 0 0 2.1rem;
+  color: rgba(186, 194, 222, 0.72);
+  border-left: 1px solid rgba(180, 190, 254, 0.10);
+  font-size: 1.2rem;
+  line-height: 1;
+}
+.terminal-tab-close:hover {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
+}
+.terminal-new-tab-button {
+  flex: 0 0 auto;
+  padding: 0.45rem 0.72rem;
+  color: var(--ctp-pink);
+  border: 1px solid rgba(245, 194, 231, 0.30);
+  border-radius: 0.78rem;
+  background:
+    linear-gradient(120deg, rgba(245, 194, 231, 0.12), rgba(137, 180, 250, 0.08)),
+    rgba(17, 17, 27, 0.58);
+}
+.terminal-new-tab-button:hover {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-pink), var(--ctp-mauve), var(--ctp-blue));
+}
+
 .widget-area {
   flex: 0 0 auto;
   border-bottom: 1px solid rgba(180, 190, 254, 0.16);
@@ -511,6 +725,7 @@ body.side-panel-collapsed .side-panel-expand-button {
   gap: 0.5rem;
   color: rgba(186, 194, 222, 0.76);
 }
+.footer-details-toggle { display: none; }
 .footer-metric,
 .footer-meta {
   min-width: 0;
@@ -568,10 +783,110 @@ body.side-panel-collapsed .side-panel-expand-button {
   padding: 0.28rem 0.52rem;
   border-radius: 0.7rem;
 }
+button.footer-meta {
+  appearance: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.footer-meta-action {
+  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+}
+.footer-meta-action:hover,
+.footer-meta-action:focus-visible {
+  border-color: rgba(166, 227, 161, 0.46);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 1rem rgba(166, 227, 161, 0.16);
+  outline: none;
+}
+.footer-workspace.footer-meta-action .footer-meta-value {
+  color: var(--ctp-green);
+}
+.footer-context { display: none; }
+.footer-context .footer-meta-value {
+  color: var(--ctp-teal);
+  text-shadow: 0 0 0.6rem rgba(148, 226, 213, 0.22);
+}
 .footer-model .footer-meta-value {
   color: var(--ctp-teal);
   text-shadow: 0 0 0.6rem rgba(148, 226, 213, 0.22);
 }
+.footer-model.footer-meta-action {
+  border-color: rgba(148, 226, 213, 0.24);
+}
+.footer-model-picker {
+  position: absolute;
+  right: 0.95rem;
+  bottom: calc(100% + 0.5rem);
+  z-index: 40;
+  display: grid;
+  gap: 0.42rem;
+  width: min(34rem, calc(100vw - 2rem));
+  max-height: min(50dvh, 28rem);
+  overflow: auto;
+  padding: 0.72rem;
+  border: 1px solid rgba(148, 226, 213, 0.30);
+  border-radius: 0.95rem;
+  background:
+    radial-gradient(circle at 8% 0%, rgba(148, 226, 213, 0.13), transparent 12rem),
+    linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
+  box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
+}
+.footer-model-picker-title {
+  color: var(--ctp-teal);
+  font-size: 0.72rem;
+  font-weight: 950;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.footer-model-picker-source,
+.footer-model-picker-empty {
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.footer-model-picker-source {
+  color: rgba(186, 194, 222, 0.68);
+  font-size: 0.74rem;
+}
+.footer-model-picker-empty {
+  display: grid;
+  gap: 0.32rem;
+  padding: 0.58rem 0.62rem;
+  border: 1px solid rgba(249, 226, 175, 0.18);
+  border-radius: 0.72rem;
+  background: rgba(17, 17, 27, 0.48);
+}
+.footer-model-picker-empty strong {
+  color: var(--ctp-yellow);
+}
+.footer-model-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.12rem;
+  width: 100%;
+  min-height: 44px;
+  padding: 0.5rem 0.64rem;
+  text-align: left;
+}
+.footer-model-option.active {
+  border-color: rgba(166, 227, 161, 0.46);
+  box-shadow: inset 3px 0 0 var(--ctp-green), 0 0 1rem rgba(166, 227, 161, 0.14);
+}
+.footer-model-option-main,
+.footer-model-option-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.footer-model-option-main {
+  color: var(--ctp-text);
+  font-weight: 850;
+}
+.footer-model-option-name {
+  color: rgba(186, 194, 222, 0.68);
+  font-size: 0.72rem;
+}
 .footer-branch .footer-meta-value {
   color: var(--ctp-pink);
   text-shadow: 0 0 0.55rem rgba(245, 194, 231, 0.18);
@@ -705,6 +1020,107 @@ body.side-panel-collapsed .side-panel-expand-button {
   white-space: pre-wrap;
   box-shadow: inset 0 0 1.4rem rgba(148, 226, 213, 0.06), 0 0 1rem rgba(148, 226, 213, 0.08);
 }
+.todo-widget {
+  display: grid;
+  gap: 0.52rem;
+  padding: 0.68rem 0.76rem;
+  white-space: normal;
+  border-color: rgba(137, 180, 250, 0.32);
+  background:
+    radial-gradient(circle at 4% 0%, rgba(137, 180, 250, 0.18), transparent 12rem),
+    linear-gradient(145deg, rgba(17, 17, 27, 0.88), rgba(30, 30, 46, 0.74));
+}
+.todo-widget-header {
+  display: flex;
+  align-items: center;
+  gap: 0.48rem;
+  min-width: 0;
+}
+.todo-widget-title {
+  color: var(--ctp-blue);
+  font-weight: 950;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.todo-widget-count,
+.todo-widget-meta {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.35rem;
+  padding: 0.12rem 0.42rem;
+  border: 1px solid rgba(137, 180, 250, 0.24);
+  border-radius: 999px;
+  background: rgba(17, 17, 27, 0.48);
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+.todo-widget-count { color: var(--ctp-green); }
+.todo-widget-meta { color: var(--ctp-yellow); }
+.todo-widget-progress {
+  height: 0.38rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(49, 50, 68, 0.78);
+  box-shadow: inset 0 0 0 1px rgba(180, 190, 254, 0.10);
+}
+.todo-widget-progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--ctp-blue), var(--ctp-teal), var(--ctp-green));
+  box-shadow: 0 0 0.85rem rgba(148, 226, 213, 0.42);
+}
+.todo-widget-list {
+  display: grid;
+  gap: 0.34rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.todo-widget-item {
+  display: grid;
+  grid-template-columns: 1.35rem minmax(0, 1fr);
+  align-items: start;
+  gap: 0.48rem;
+  min-width: 0;
+  color: rgba(205, 214, 244, 0.92);
+}
+.todo-widget-marker {
+  display: inline-grid;
+  place-items: center;
+  width: 1.12rem;
+  height: 1.12rem;
+  margin-top: 0.06rem;
+  border: 1px solid rgba(180, 190, 254, 0.32);
+  border-radius: 0.34rem;
+  color: #11111b;
+  font-size: 0.74rem;
+  font-weight: 950;
+  line-height: 1;
+  background: rgba(49, 50, 68, 0.88);
+}
+.todo-widget-item.done .todo-widget-marker {
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--ctp-green), var(--ctp-teal));
+}
+.todo-widget-item.partial .todo-widget-marker {
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--ctp-yellow), var(--ctp-peach));
+}
+.todo-widget-item.done .todo-widget-text {
+  color: rgba(166, 227, 161, 0.72);
+  text-decoration: line-through;
+}
+.todo-widget-item.partial .todo-widget-text { color: var(--ctp-yellow); }
+.todo-widget-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.35;
+}
+.todo-widget-footer {
+  color: rgba(186, 194, 222, 0.64);
+  font-size: 0.72rem;
+}
 .chat {
   flex: 1 1 auto;
   min-height: 0;
@@ -712,6 +1128,17 @@ body.side-panel-collapsed .side-panel-expand-button {
   padding: 1rem;
   scroll-behavior: smooth;
 }
+.jump-to-latest-button[hidden] { display: none; }
+.jump-to-latest-button {
+  align-self: center;
+  z-index: 3;
+  margin: 0.45rem 0;
+  color: #11111b;
+  font-weight: 900;
+  background: linear-gradient(120deg, var(--ctp-teal), var(--ctp-blue), var(--ctp-mauve));
+  border-color: transparent;
+  box-shadow: 0 0 1.2rem var(--glow-teal), 0 0.7rem 1.6rem rgba(0, 0, 0, 0.28);
+}
 .message {
   position: relative;
   margin: 0 0 0.9rem;
@@ -739,6 +1166,22 @@ body.side-panel-collapsed .side-panel-expand-button {
   border-color: rgba(148, 226, 213, 0.30);
   background: linear-gradient(145deg, rgba(148, 226, 213, 0.12), rgba(49, 50, 68, 0.58));
 }
+.message.extension,
+.message.native,
+.message.notice {
+  border-color: rgba(203, 166, 247, 0.30);
+  background: linear-gradient(145deg, rgba(203, 166, 247, 0.12), rgba(49, 50, 68, 0.58));
+}
+.message.extension .message-role,
+.message.native .message-role,
+.message.notice .message-role {
+  color: var(--ctp-mauve);
+  text-shadow: 0 0 0.8rem rgba(203, 166, 247, 0.22);
+}
+.message.warn {
+  border-color: rgba(249, 226, 175, 0.46);
+}
+.message.warn .message-role { color: var(--ctp-yellow); }
 .message.toolResult, .message.bashExecution {
   border-color: rgba(249, 226, 175, 0.30);
   background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(49, 50, 68, 0.58));
@@ -936,6 +1379,8 @@ summary { cursor: pointer; color: var(--warning); }
   margin-top: 0.7rem;
   flex-wrap: wrap;
 }
+.composer-actions-button { display: none; }
+.composer-actions-panel { display: contents; }
 .composer-row label {
   display: flex;
   align-items: center;
@@ -976,15 +1421,15 @@ summary { cursor: pointer; color: var(--warning); }
 .composer-git-button:hover {
   background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
 }
-.composer-git-button[data-tooltip]::before,
-.composer-git-button[data-tooltip]::after {
+.composer-row button[data-tooltip]::before,
+.composer-row button[data-tooltip]::after {
   position: absolute;
   right: 0;
   pointer-events: none;
   opacity: 0;
   transition: opacity 140ms ease, transform 140ms ease;
 }
-.composer-git-button[data-tooltip]::before {
+.composer-row button[data-tooltip]::before {
   content: "";
   bottom: calc(100% + 0.42rem);
   width: 0.72rem;
@@ -995,7 +1440,7 @@ summary { cursor: pointer; color: var(--warning); }
   transform: translate(-1.2rem, 0.24rem) rotate(45deg);
   z-index: 29;
 }
-.composer-git-button[data-tooltip]::after {
+.composer-row button[data-tooltip]::after {
   content: attr(data-tooltip);
   bottom: calc(100% + 0.72rem);
   z-index: 30;
@@ -1018,15 +1463,18 @@ summary { cursor: pointer; color: var(--warning); }
   letter-spacing: 0;
   transform: translateY(0.24rem);
 }
-.composer-git-button[data-tooltip]:hover::before,
-.composer-git-button[data-tooltip]:hover::after,
-.composer-git-button[data-tooltip]:focus-visible::before,
-.composer-git-button[data-tooltip]:focus-visible::after {
+.composer-row button[data-tooltip]:hover::before,
+.composer-row button[data-tooltip]:hover::after,
+.composer-row button[data-tooltip]:focus-visible::before,
+.composer-row button[data-tooltip]:focus-visible::after,
+.composer-row button[data-tooltip].tooltip-open::before,
+.composer-row button[data-tooltip].tooltip-open::after {
   opacity: 1;
   transform: translateY(0);
 }
-.composer-git-button[data-tooltip]:hover::before,
-.composer-git-button[data-tooltip]:focus-visible::before {
+.composer-row button[data-tooltip]:hover::before,
+.composer-row button[data-tooltip]:focus-visible::before,
+.composer-row button[data-tooltip].tooltip-open::before {
   transform: translate(-1.2rem, 0) rotate(45deg);
 }
 
@@ -1092,6 +1540,145 @@ summary { cursor: pointer; color: var(--warning); }
 .dialog-input { width: 100%; padding: 0.7rem; }
 .dialog-editor { width: 100%; min-height: 12rem; padding: 0.7rem; }
 
+.path-picker-dialog {
+  width: min(48rem, calc(100vw - 2rem));
+}
+.path-picker-current-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.55rem;
+  align-items: stretch;
+}
+.path-picker-current {
+  min-width: 0;
+  margin: 0;
+  padding: 0.72rem 0.82rem;
+  overflow-wrap: anywhere;
+  border: 1px solid rgba(166, 227, 161, 0.24);
+  border-radius: 0.82rem;
+  background: rgba(17, 17, 27, 0.64);
+  color: var(--ctp-green);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-weight: 850;
+}
+.path-picker-add-fast-pick {
+  align-self: stretch;
+  padding: 0.52rem 0.72rem;
+  color: var(--ctp-yellow);
+  border-color: rgba(249, 226, 175, 0.32);
+}
+.path-picker-add-fast-pick:disabled {
+  cursor: default;
+  opacity: 0.62;
+}
+.path-picker-fast-picks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: 0.42rem;
+  margin: 0.72rem 0 0;
+  padding: 0.5rem;
+  border: 1px solid rgba(249, 226, 175, 0.14);
+  border-radius: 0.82rem;
+  background: rgba(17, 17, 27, 0.34);
+}
+.path-picker-fast-pick {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 1.45rem;
+  overflow: hidden;
+  min-width: 0;
+  width: 100%;
+  border: 1px solid rgba(249, 226, 175, 0.22);
+  border-radius: 0.72rem;
+  background: rgba(49, 50, 68, 0.36);
+}
+.path-picker-fast-pick-button,
+.path-picker-fast-pick-remove {
+  min-height: 2rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.path-picker-fast-pick-button {
+  min-width: 0;
+  padding: 0.42rem 0.58rem;
+  overflow: hidden;
+  color: var(--ctp-yellow);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.path-picker-fast-pick-remove {
+  min-width: 1.45rem;
+  width: 1.45rem;
+  padding: 0;
+  color: rgba(186, 194, 222, 0.72);
+  border-left: 1px solid rgba(249, 226, 175, 0.14);
+  font-size: 0.78rem;
+}
+.path-picker-fast-pick-button:hover,
+.path-picker-fast-pick-button:focus-visible {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-peach));
+}
+.path-picker-fast-pick-remove:hover,
+.path-picker-fast-pick-remove:focus-visible {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
+}
+.path-picker-fast-picks-empty {
+  grid-column: 1 / -1;
+  padding: 0.15rem 0.25rem;
+}
+.path-picker-roots {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin: 0.72rem 0;
+}
+.path-picker-root-button {
+  padding: 0.42rem 0.66rem;
+  color: var(--ctp-teal);
+  border-color: rgba(148, 226, 213, 0.30);
+}
+.path-picker-list {
+  display: grid;
+  gap: 0.4rem;
+  max-height: min(24rem, 46vh);
+  overflow: auto;
+  padding: 0.4rem;
+  border: 1px solid rgba(180, 190, 254, 0.16);
+  border-radius: 0.82rem;
+  background: rgba(17, 17, 27, 0.48);
+}
+.path-picker-directory {
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0.58rem 0.72rem;
+  color: rgba(205, 214, 244, 0.94);
+  text-align: left;
+  border-color: rgba(180, 190, 254, 0.14);
+  background: rgba(49, 50, 68, 0.36);
+}
+.path-picker-directory:hover,
+.path-picker-directory:focus-visible,
+.path-picker-root-button:hover,
+.path-picker-root-button:focus-visible {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
+}
+.path-picker-directory.hidden-directory {
+  color: rgba(186, 194, 222, 0.68);
+}
+.path-picker-empty,
+.path-picker-error {
+  padding: 0.62rem 0.72rem;
+}
+.path-picker-error {
+  color: var(--danger);
+}
+
 ::-webkit-scrollbar { width: 0.75rem; height: 0.75rem; }
 ::-webkit-scrollbar-track { background: rgba(17, 17, 27, 0.55); }
 ::-webkit-scrollbar-thumb {
@@ -1101,6 +1688,21 @@ summary { cursor: pointer; color: var(--warning); }
 }
 ::selection { color: #11111b; background: var(--ctp-pink); }
 
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  button:hover {
+    transform: none;
+  }
+}
+
 @media (max-width: 1050px) {
   body { overflow: auto; }
   .layout,
@@ -1112,11 +1714,404 @@ summary { cursor: pointer; color: var(--warning); }
   .footer-model { grid-column: 1 / -1; }
 }
 
-@media (max-width: 720px) {
-  .layout { padding: 0.65rem; }
-  .statusbar { padding: 0.68rem; }
-  .footer-line-main,
-  .footer-line-meta { grid-template-columns: 1fr; }
-  .footer-metric { width: 100%; }
-  .command-suggest-item { grid-template-columns: 1fr; gap: 0.25rem; }
+@media (max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none) {
+  body { overflow: hidden; }
+  .layout,
+  body.side-panel-collapsed .layout {
+    gap: 0;
+    height: 100vh;
+    height: var(--visual-viewport-height, 100dvh);
+    min-height: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  .chat-panel,
+  body.side-panel-collapsed .chat-panel {
+    height: 100vh;
+    height: var(--visual-viewport-height, 100dvh);
+    min-height: 0;
+    border-radius: 0;
+  }
+  .terminal-tabs-shell {
+    position: relative;
+    align-items: center;
+    flex-direction: row;
+    gap: 0.28rem;
+    min-height: calc(28px + env(safe-area-inset-top));
+    padding: calc(0.12rem + env(safe-area-inset-top)) 0.42rem 0.12rem;
+    overflow: visible;
+  }
+  body.side-panel-collapsed .terminal-tabs-shell { padding-right: 2.75rem; }
+  .terminal-tabs-toggle-button {
+    display: block;
+    width: min(14rem, calc(100vw - 4rem));
+    min-height: 28px;
+    padding: 0.16rem 0.58rem;
+    overflow: hidden;
+    color: var(--ctp-teal);
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 0.58rem;
+    border-color: rgba(148, 226, 213, 0.34);
+    font-size: 0.74rem;
+    line-height: 1.1;
+    background:
+      linear-gradient(120deg, rgba(148, 226, 213, 0.12), rgba(203, 166, 247, 0.10)),
+      linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
+  }
+  .side-panel-toggle-button,
+  .side-panel-expand-button {
+    width: 36px;
+    min-width: 36px;
+    height: 32px;
+    min-height: 32px;
+    border-radius: 0.58rem;
+  }
+  .side-panel-expand-button {
+    top: calc(0.12rem + env(safe-area-inset-top));
+    right: 0.42rem;
+  }
+  .terminal-tabs {
+    position: absolute;
+    left: 0.55rem;
+    right: 0.55rem;
+    top: calc(100% + 0.35rem);
+    z-index: 16;
+    display: none;
+    flex-wrap: wrap;
+    gap: 0.34rem;
+    max-height: min(42dvh, 20rem);
+    overflow: auto;
+    padding: 0.55rem;
+    border: 1px solid rgba(148, 226, 213, 0.26);
+    border-radius: 0.95rem;
+    background:
+      radial-gradient(circle at 8% 0%, rgba(148, 226, 213, 0.12), transparent 12rem),
+      linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
+    box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
+  }
+  body.mobile-tabs-expanded .terminal-tabs { display: flex; }
+  .terminal-tab { min-width: min(11rem, 100%); max-width: 100%; flex: 1 1 9rem; }
+  .terminal-tab-button,
+  .terminal-tab-close,
+  .terminal-new-tab-button { min-height: 44px; }
+  .terminal-tab-button { padding: 0.32rem 0.52rem; }
+  .terminal-tab-title { font-size: 0.78rem; }
+  .terminal-tab-meta { display: none; }
+  .terminal-tab-close {
+    flex-basis: 44px;
+    min-width: 44px;
+    font-size: 1rem;
+  }
+  .terminal-new-tab-button {
+    width: auto;
+    padding: 0.36rem 0.58rem;
+    white-space: nowrap;
+  }
+  .widget-area {
+    display: block;
+    max-height: 34dvh;
+    overflow: auto;
+    padding: 0.36rem 0.55rem;
+  }
+  .widget-area .widget:not(.todo-widget) { display: none; }
+  .todo-widget {
+    gap: 0.38rem;
+    margin: 0.2rem 0;
+    padding: 0.52rem 0.58rem;
+    border-radius: 0.72rem;
+  }
+  .todo-widget-header { gap: 0.34rem; }
+  .todo-widget-title { font-size: 0.7rem; }
+  .todo-widget-count,
+  .todo-widget-meta { font-size: 0.66rem; }
+  .todo-widget-list { gap: 0.26rem; }
+  .todo-widget-item {
+    grid-template-columns: 1.12rem minmax(0, 1fr);
+    gap: 0.36rem;
+    font-size: 0.78rem;
+  }
+  .todo-widget-marker {
+    width: 0.96rem;
+    height: 0.96rem;
+    font-size: 0.66rem;
+  }
+  .chat {
+    padding: 0.62rem 0.58rem;
+    scroll-padding-bottom: calc(12rem + var(--keyboard-inset-bottom, 0px));
+  }
+  .jump-to-latest-button {
+    min-height: 44px;
+    margin: 0.35rem auto;
+    padding: 0.55rem 0.92rem;
+    font-size: 0.86rem;
+  }
+  .message {
+    margin-bottom: 0.62rem;
+    padding: 0.68rem 0.7rem;
+    border-radius: 0.82rem;
+  }
+  .message-header {
+    gap: 0.5rem;
+    margin-bottom: 0.38rem;
+    font-size: 0.72rem;
+  }
+  .message-role { letter-spacing: 0.08em; }
+  .code-block {
+    padding: 0.58rem;
+    font-size: 0.78rem;
+  }
+  details { padding: 0.5rem; }
+  .statusbar {
+    max-height: none;
+    overflow: visible;
+    padding: 0.42rem 0.55rem;
+    font-size: 0.68rem;
+  }
+  body.footer-details-expanded .statusbar {
+    max-height: min(42dvh, 20rem);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+  body.footer-model-picker-open .statusbar {
+    z-index: 12;
+    overflow: visible;
+  }
+  body.footer-model-picker-open .footer-line { z-index: 1; }
+  .footer-model-picker {
+    position: fixed;
+    left: max(0.55rem, env(safe-area-inset-left));
+    right: max(0.55rem, env(safe-area-inset-right));
+    bottom: var(--footer-model-picker-bottom, calc(8.5rem + env(safe-area-inset-bottom)));
+    width: auto;
+    max-height: min(52dvh, 24rem);
+    z-index: 60;
+  }
+  .footer-line-main {
+    display: none;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.35rem;
+    margin-bottom: 0.35rem;
+  }
+  body.footer-details-expanded .footer-line-main { display: grid; }
+  body.footer-details-expanded .footer-line-main .footer-metric { display: inline-grid; }
+  .footer-line-meta {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
+    gap: 0.35rem;
+    align-items: stretch;
+  }
+  .footer-line-meta .footer-meta { display: none; }
+  .footer-workspace,
+  .footer-context { display: grid !important; }
+  .footer-workspace { order: 1; }
+  .footer-context { order: 2; }
+  .footer-details-toggle { order: 3; }
+  .footer-branch { order: 4; }
+  .footer-changes { order: 5; }
+  .footer-runtime { order: 6; }
+  .footer-model { order: 7; }
+  body.footer-details-expanded .footer-line-meta {
+    grid-template-columns: 1fr;
+  }
+  body.footer-details-expanded .footer-line-meta .footer-meta { display: grid; }
+  .footer-metric { width: 100%; padding: 0.35rem 0.45rem; }
+  .footer-details-toggle {
+    display: block;
+    min-height: 44px;
+    padding: 0.35rem 0.62rem;
+    color: var(--ctp-yellow);
+    border-color: rgba(249, 226, 175, 0.34);
+    font-size: 0.72rem;
+    font-weight: 900;
+  }
+  .composer {
+    position: sticky;
+    bottom: 0;
+    padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
+    background: linear-gradient(180deg, rgba(17, 17, 27, 0.92), rgba(17, 17, 27, 0.98));
+    box-shadow: 0 -0.85rem 1.8rem rgba(17, 17, 27, 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
+  }
+  #promptInput {
+    min-height: calc(1.45em + 1.5rem);
+    max-height: min(28dvh, 12rem);
+    padding: 0.75rem;
+    resize: none;
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+  .composer-row {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 0.42rem;
+    align-items: stretch;
+    margin-top: 0.55rem;
+  }
+  .composer-actions-button {
+    display: block;
+    grid-column: span 2;
+    color: var(--ctp-yellow);
+    border-color: rgba(249, 226, 175, 0.34);
+    background:
+      linear-gradient(120deg, rgba(249, 226, 175, 0.12), rgba(203, 166, 247, 0.10)),
+      linear-gradient(180deg, rgba(49, 50, 68, 0.88), rgba(17, 17, 27, 0.88));
+  }
+  body.mobile-keyboard-open .terminal-tabs-shell,
+  body.mobile-keyboard-open .widget-area,
+  body.mobile-keyboard-open .statusbar,
+  body.mobile-keyboard-open .side-panel-expand-button {
+    display: none;
+  }
+  body.mobile-keyboard-open .chat {
+    padding-top: 0.42rem;
+    scroll-padding-bottom: calc(7.5rem + var(--keyboard-inset-bottom, 0px));
+  }
+  body.mobile-keyboard-open .composer {
+    padding: 0.42rem 0.5rem calc(0.42rem + env(safe-area-inset-bottom));
+  }
+  body.mobile-keyboard-open #promptInput {
+    min-height: calc(1.45em + 1.5rem);
+    max-height: min(24dvh, 9rem);
+  }
+  body.mobile-keyboard-open .composer-row {
+    grid-template-columns: 1fr;
+    margin-top: 0.35rem;
+  }
+  body.mobile-keyboard-open .composer-actions-button,
+  body.mobile-keyboard-open #steerButton,
+  body.mobile-keyboard-open #followUpButton,
+  body.mobile-keyboard-open .composer-actions-panel {
+    display: none !important;
+  }
+  body.mobile-keyboard-open .composer-row button.primary {
+    grid-column: 1 / -1;
+    min-height: 44px;
+  }
+  .composer-actions-panel {
+    position: absolute;
+    left: 0.55rem;
+    right: 0.55rem;
+    bottom: calc(100% + 0.42rem);
+    z-index: 8;
+    display: none;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.45rem;
+    max-height: min(42dvh, 22rem);
+    overflow: auto;
+    padding: 0.68rem;
+    border: 1px solid rgba(249, 226, 175, 0.24);
+    border-radius: 0.95rem;
+    background:
+      radial-gradient(circle at 8% 0%, rgba(249, 226, 175, 0.12), transparent 12rem),
+      linear-gradient(145deg, rgba(17, 17, 27, 0.98), rgba(30, 30, 46, 0.96));
+    box-shadow: 0 1.2rem 2.8rem rgba(17, 17, 27, 0.68), 0 0 1.4rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.055);
+  }
+  body.composer-actions-open .composer-actions-panel { display: grid; }
+  .composer-actions-panel label {
+    grid-column: 1 / -1;
+    justify-content: space-between;
+    gap: 0.55rem;
+    min-height: 44px;
+    font-size: 0.68rem;
+    letter-spacing: 0.05em;
+  }
+  .composer-actions-panel label select { flex: 1 1 auto; min-width: 0; }
+  .spacer { display: none; }
+  .composer-row button {
+    width: 100%;
+    min-height: 44px;
+    margin-right: 0;
+    padding: 0.48rem 0.5rem;
+    font-size: 0.82rem;
+  }
+  .composer-row button.primary {
+    grid-column: 1 / -1;
+    min-height: 48px;
+    font-size: 0.92rem;
+  }
+  body:not(.pi-run-active):not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
+  .composer-row > #followUpButton,
+  .composer-row > #steerButton,
+  .composer-actions-button { grid-column: span 2; }
+  .composer-actions-panel > #followUpButton,
+  .composer-actions-panel > #steerButton,
+  #newSessionButton,
+  #compactButton,
+  #gitWorkflowButton { grid-column: span 1; }
+  .command-suggest {
+    max-height: 35dvh;
+    font-size: 0.86rem;
+  }
+  .command-suggest-item {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+    padding: 0.6rem 0.68rem;
+  }
+  .side-panel-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 18;
+    display: block;
+    width: 100%;
+    min-height: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: rgba(17, 17, 27, 0.62);
+    box-shadow: none;
+    backdrop-filter: blur(4px);
+  }
+  .side-panel-backdrop[hidden],
+  body.side-panel-collapsed .side-panel-backdrop { display: none; }
+  .side-panel-backdrop:hover,
+  .side-panel-backdrop:active {
+    transform: none;
+    border-color: transparent;
+    box-shadow: none;
+  }
+  .side-panel {
+    position: fixed;
+    z-index: 19;
+    top: calc(0.5rem + env(safe-area-inset-top));
+    right: 0.5rem;
+    bottom: calc(0.5rem + env(safe-area-inset-bottom));
+    left: 0.5rem;
+    display: grid;
+    max-height: none;
+    border-radius: 0.95rem;
+  }
+  .side-panel-body { overscroll-behavior: contain; }
+  .extension-dialog {
+    position: fixed;
+    inset: auto 0 0 0;
+    width: 100vw;
+    max-width: none;
+    max-height: calc(var(--visual-viewport-height, 100dvh) - 1rem - env(safe-area-inset-top));
+    margin: 0;
+    overflow: auto;
+    border-radius: 1rem 1rem 0 0;
+  }
+  .extension-dialog menu {
+    position: sticky;
+    bottom: 0;
+    flex-wrap: wrap;
+    padding-bottom: env(safe-area-inset-bottom);
+    background: linear-gradient(180deg, transparent, rgba(17, 17, 27, 0.96) 35%);
+  }
+  .extension-dialog menu button { flex: 1 1 9rem; }
+  .composer-row button[data-tooltip]:not(.tooltip-open)::before,
+  .composer-row button[data-tooltip]:not(.tooltip-open)::after { display: none; }
+  .composer-row button[data-tooltip].tooltip-open::before,
+  .composer-row button[data-tooltip].tooltip-open::after { display: block; }
+  .git-workflow-actions button,
+  #gitWorkflowCancelButton { min-height: 44px; }
+  .path-picker-current-row { grid-template-columns: 1fr; }
+  .path-picker-add-fast-pick { width: 100%; }
+  .path-picker-fast-pick { grid-template-columns: minmax(0, 1fr) 44px; }
+  .path-picker-fast-pick-remove {
+    width: 44px;
+    min-width: 44px;
+  }
+  .path-picker-list { max-height: min(18rem, 42dvh); }
 }