claude-remote-cli 2.2.1 → 2.3.0

package/public/style.css

@@ -1,1246 +0,0 @@
-/* ===== CSS Variables ===== */
-:root {
-  --bg: #1a1a1a;
-  --surface: #2b2b2b;
-  --accent: #d97757;
-  --text: #ececec;
-  --text-muted: #9b9b9b;
-  --border: #3d3d3d;
-  --sidebar-width: 240px;
-  --toolbar-height: auto;
-}
-
-/* ===== Reset & Base ===== */
-[hidden] {
-  display: none !important;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  height: 100%;
-  overflow: hidden;
-  background: var(--bg);
-  color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  font-size: 15px;
-}
-
-/* ===== PIN Gate ===== */
-#pin-gate {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  background: var(--bg);
-  padding: 1rem;
-}
-
-.pin-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
-  max-width: 320px;
-  text-align: center;
-}
-
-.pin-container h1 {
-  font-size: 1.5rem;
-  color: var(--text);
-}
-
-.pin-container p {
-  color: var(--text-muted);
-  font-size: 0.95rem;
-}
-
-#pin-input {
-  width: 100%;
-  padding: 14px 16px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-size: 1.2rem;
-  text-align: center;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-#pin-input:focus {
-  border-color: var(--accent);
-}
-
-#pin-submit {
-  width: 100%;
-  padding: 14px;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-#pin-submit:active {
-  opacity: 0.8;
-}
-
-.error {
-  color: var(--accent);
-  font-size: 0.9rem;
-}
-
-/* ===== Main App Layout ===== */
-#main-app {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-}
-
-#sidebar-overlay {
-  display: none;
-}
-
-/* ===== Sidebar ===== */
-#sidebar {
-  display: flex;
-  flex-direction: column;
-  width: var(--sidebar-width);
-  min-width: var(--sidebar-width);
-  background: var(--surface);
-  border-right: 1px solid var(--border);
-  overflow: hidden;
-  transition: transform 0.25s ease;
-  z-index: 100;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 10px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.sidebar-label {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.icon-btn {
-  background: none;
-  border: none;
-  color: var(--text);
-  font-size: 1.2rem;
-  cursor: pointer;
-  padding: 4px 6px;
-  border-radius: 4px;
-  touch-action: manipulation;
-  display: none; /* shown on mobile */
-}
-
-.icon-btn:active {
-  background: var(--border);
-}
-
-.sidebar-filters {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 6px 8px;
-  flex-shrink: 0;
-}
-
-.sidebar-filters select {
-  padding: 6px 8px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.75rem;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  cursor: pointer;
-}
-
-.sidebar-filters select:focus {
-  border-color: var(--accent);
-}
-
-.sidebar-filters input {
-  padding: 6px 8px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.75rem;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.sidebar-filters input:focus {
-  border-color: var(--accent);
-}
-
-/* Sidebar Tabs */
-.sidebar-tabs {
-  display: flex;
-  gap: 0;
-  padding: 0 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-.sidebar-tab {
-  flex: 1;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-muted);
-  font-size: 0.7rem;
-  padding: 6px 4px;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-  text-align: center;
-}
-
-.sidebar-tab:hover {
-  color: var(--text);
-}
-
-.sidebar-tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-#session-list {
-  list-style: none;
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-#session-list li {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 4px;
-  padding: 8px 10px;
-  cursor: pointer;
-  border-radius: 6px;
-  margin: 2px 6px;
-  font-size: 0.8rem;
-  color: var(--text-muted);
-  touch-action: manipulation;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-/* Active session (filled) */
-#session-list li.active-session {
-  background: var(--bg);
-}
-
-#session-list li.active-session:hover {
-  background: var(--border);
-}
-
-#session-list li.active-session.active {
-  background: var(--accent);
-  color: #fff;
-}
-
-#session-list li.active-session.active .session-sub {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-#session-list li.active-session.active .session-time {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-/* Inactive worktree (outline) */
-#session-list li.inactive-worktree {
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  opacity: 0.7;
-}
-
-#session-list li.inactive-worktree:hover {
-  opacity: 1;
-  border-color: var(--accent);
-}
-
-.session-info {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 2px;
-  min-width: 0;
-  flex: 1;
-  align-items: center;
-}
-
-.session-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-  color: var(--text);
-}
-
-.status-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-right: 8px;
-  margin-top: 2px;
-}
-
-.status-dot--running {
-  background: #4ade80;
-}
-
-.status-dot--idle {
-  background: #60a5fa;
-}
-
-.status-dot--attention {
-  background: #f59e0b;
-  box-shadow: 0 0 6px 2px rgba(245, 158, 11, 0.5);
-  animation: attention-glow 2s ease-in-out infinite;
-}
-
-@keyframes attention-glow {
-  0%, 100% { box-shadow: 0 0 4px 1px rgba(245, 158, 11, 0.3); }
-  50% { box-shadow: 0 0 8px 3px rgba(245, 158, 11, 0.6); }
-}
-
-.status-dot--inactive {
-  background: #6b7280;
-}
-
-.session-sub {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-time {
-  font-size: 0.65rem;
-  color: var(--text-muted);
-  opacity: 0.6;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-sub, .session-time {
-  width: 100%;
-  padding-left: 16px; /* aligns with name text: status-dot 8px + margin-right 8px */
-}
-
-.session-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-/* Divider between active and inactive */
-.session-divider {
-  font-size: 0.65rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 8px 12px 4px;
-  opacity: 0.6;
-}
-
-.session-kill {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 1.1rem;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 4px;
-  touch-action: manipulation;
-  flex-shrink: 0;
-}
-
-.session-kill:hover,
-.session-kill:active {
-  color: var(--accent);
-  background: rgba(217, 119, 87, 0.15);
-}
-
-.session-rename-btn {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  cursor: pointer;
-  padding: 2px 4px;
-  border-radius: 4px;
-  touch-action: manipulation;
-  flex-shrink: 0;
-}
-
-.session-rename-btn:hover {
-  color: var(--accent);
-}
-
-.session-rename-input {
-  background: var(--bg);
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  color: var(--text);
-  font-size: 0.8rem;
-  padding: 2px 6px;
-  outline: none;
-  width: 100%;
-  font-weight: 500;
-}
-
-#new-session-btn {
-  margin: 8px;
-  padding: 10px 12px;
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.875rem;
-  cursor: pointer;
-  touch-action: manipulation;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-#new-session-btn:active {
-  background: var(--border);
-}
-
-#settings-btn {
-  margin: 0 8px 8px;
-  padding: 10px 12px;
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-  cursor: pointer;
-  touch-action: manipulation;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-#settings-btn:active {
-  background: var(--border);
-}
-
-/* ===== Terminal Area ===== */
-#terminal-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-  position: relative;
-}
-
-#mobile-header {
-  display: none; /* shown on mobile */
-}
-
-#terminal-container {
-  flex: 1;
-  overflow: hidden;
-  background: #000;
-}
-
-#terminal-container .xterm {
-  height: 100%;
-}
-
-#no-session-msg {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--text-muted);
-  font-size: 0.95rem;
-  text-align: center;
-  pointer-events: none;
-}
-
-#mobile-input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  font-size: 16px; /* prevents iOS zoom on focus */
-  z-index: -1;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  color: transparent;
-  caret-color: transparent;
-  background: transparent;
-}
-
-/* ===== Terminal Scrollbar ===== */
-#terminal-scrollbar {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 2px;
-  bottom: 0;
-  width: 6px;
-  z-index: 10;
-  pointer-events: auto;
-}
-
-#terminal-scrollbar-thumb {
-  position: absolute;
-  right: 0;
-  width: 6px;
-  min-height: 20px;
-  background: var(--border);
-  border-radius: 3px;
-  opacity: 0.7;
-  touch-action: none;
-}
-
-/* ===== Touch Toolbar ===== */
-#toolbar {
-  display: none;
-  flex-shrink: 0;
-  background: var(--surface);
-  border-top: 1px solid var(--border);
-  padding: 6px 4px;
-  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
-}
-
-.toolbar-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: auto auto;
-  gap: 4px;
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-.tb-btn {
-  padding: 14px 4px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.85rem;
-  font-family: monospace;
-  cursor: pointer;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  text-align: center;
-  white-space: nowrap;
-  min-height: 44px;
-}
-
-.tb-btn:active {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-}
-
-.tb-btn.tb-arrow {
-  font-size: 1.1rem;
-}
-
-/* ===== Dialog ===== */
-dialog#new-session-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  color: var(--text);
-  padding: 1.5rem;
-  width: 90%;
-  max-width: 400px;
-  max-height: 80vh;
-  overflow-y: auto;
-  margin: auto;
-}
-
-dialog#new-session-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-dialog#new-session-dialog h2 {
-  font-size: 1.1rem;
-  margin-bottom: 1rem;
-}
-
-.dialog-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 12px;
-}
-
-.dialog-field label,
-.dialog-field-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.dialog-field select {
-  padding: 10px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.875rem;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  cursor: pointer;
-}
-
-.dialog-field select:focus {
-  border-color: var(--accent);
-}
-
-.dialog-field select:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ===== Branch Input ===== */
-.branch-input-wrapper {
-  position: relative;
-}
-
-.branch-input-wrapper input {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.875rem;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.branch-input-wrapper input:focus {
-  border-color: var(--accent);
-}
-
-.branch-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  max-height: 200px;
-  overflow-y: auto;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  list-style: none;
-  z-index: 10;
-  margin: 0;
-  padding: 0;
-}
-
-.branch-dropdown li {
-  padding: 8px 12px;
-  font-size: 0.85rem;
-  color: var(--text);
-  cursor: pointer;
-}
-
-.branch-dropdown li:hover,
-.branch-dropdown li.highlighted {
-  background: var(--surface);
-  color: var(--accent);
-}
-
-.branch-dropdown li.branch-create-new {
-  color: var(--accent);
-  font-style: italic;
-}
-
-.repo-group-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 6px 4px 2px;
-}
-
-.repo-item {
-  padding: 10px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  cursor: pointer;
-  font-size: 0.875rem;
-  touch-action: manipulation;
-  text-align: left;
-  width: 100%;
-}
-
-.repo-item:active,
-.repo-item.selected {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.dialog-separator {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 0.75rem 0;
-}
-
-.dialog-custom-path {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 1rem;
-}
-
-.dialog-custom-path label {
-  font-size: 0.85rem;
-  color: var(--text-muted);
-}
-
-.dialog-custom-path input {
-  padding: 10px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.9rem;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.dialog-custom-path input:focus {
-  border-color: var(--accent);
-}
-
-.dialog-option {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 1rem;
-}
-
-.dialog-option label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.875rem;
-  color: var(--text);
-  cursor: pointer;
-}
-
-.dialog-option input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-
-.dialog-option-hint {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  padding-left: 24px;
-}
-
-.dialog-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-.dialog-actions button {
-  padding: 10px 18px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 0.9rem;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-.dialog-actions button:active {
-  background: var(--border);
-}
-
-/* ===== Settings Dialog ===== */
-dialog#settings-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  color: var(--text);
-  padding: 1.5rem;
-  width: 90%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-  margin: auto;
-}
-
-dialog#settings-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-dialog#settings-dialog h2 {
-  font-size: 1.1rem;
-  margin-bottom: 1rem;
-}
-
-.settings-label {
-  display: block;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
-}
-
-.settings-hint {
-  font-size: 0.8rem;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-}
-
-#settings-roots-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 8px;
-}
-
-.settings-repo-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  font-size: 0.8rem;
-}
-
-.settings-repo-item .repo-path {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-muted);
-  font-family: monospace;
-}
-
-.settings-repo-item .remove-repo {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 1rem;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.settings-repo-item .remove-repo:hover,
-.settings-repo-item .remove-repo:active {
-  color: var(--accent);
-}
-
-.settings-add-repo {
-  display: flex;
-  gap: 6px;
-}
-
-.settings-add-repo input {
-  flex: 1;
-  padding: 8px 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.85rem;
-  font-family: monospace;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.settings-add-repo input:focus {
-  border-color: var(--accent);
-}
-
-.settings-add-repo button {
-  padding: 8px 14px;
-  font-size: 0.85rem;
-  flex-shrink: 0;
-}
-
-.settings-section {
-  margin-bottom: 1rem;
-}
-
-.btn-accent {
-  background: var(--accent) !important;
-  border-color: var(--accent) !important;
-  color: #fff !important;
-}
-
-.btn-accent:active {
-  opacity: 0.85;
-}
-
-/* ===== Context Menu ===== */
-.context-menu {
-  position: fixed;
-  z-index: 200;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  min-width: 160px;
-}
-
-.context-menu-item {
-  display: block;
-  width: 100%;
-  padding: 10px 14px;
-  background: none;
-  border: none;
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 0.85rem;
-  text-align: left;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-.context-menu-item:hover,
-.context-menu-item:active {
-  background: var(--bg);
-  color: var(--accent);
-}
-
-.context-menu-item.ctx-danger:hover,
-.context-menu-item.ctx-danger:active {
-  color: #c0392b;
-}
-
-/* ===== Delete Worktree Dialog ===== */
-dialog#delete-worktree-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  color: var(--text);
-  padding: 1.5rem;
-  width: 90%;
-  max-width: 400px;
-  margin: auto;
-}
-
-dialog#delete-worktree-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-dialog#delete-worktree-dialog h2 {
-  font-size: 1.1rem;
-  margin-bottom: 0.75rem;
-}
-
-.delete-wt-warning {
-  font-size: 0.85rem;
-  color: var(--text-muted);
-  margin-bottom: 0.75rem;
-  line-height: 1.4;
-}
-
-.delete-wt-name {
-  font-size: 0.85rem;
-  font-family: monospace;
-  color: var(--accent);
-  padding: 8px 10px;
-  background: var(--bg);
-  border-radius: 6px;
-  margin-bottom: 1rem;
-  word-break: break-all;
-}
-
-.btn-danger {
-  background: #c0392b !important;
-  border-color: #c0392b !important;
-  color: #fff !important;
-}
-
-.btn-danger:active {
-  opacity: 0.85;
-}
-
-/* ===== Update Toast ===== */
-
-#update-toast {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 150;
-  display: flex;
-  justify-content: center;
-  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
-  pointer-events: none;
-  animation: toast-slide-up 0.25s ease-out;
-}
-
-@keyframes toast-slide-up {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-#update-toast-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 12px 16px;
-  max-width: 500px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  pointer-events: auto;
-}
-
-#update-toast-text {
-  flex: 1;
-  font-size: 0.85rem;
-  color: var(--text);
-}
-
-#update-toast-actions {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-#update-toast-btn {
-  padding: 8px 14px;
-  border-radius: 6px;
-  font-size: 0.8rem;
-  border: none;
-  white-space: nowrap;
-}
-
-#update-toast-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-#update-toast-dismiss {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 1.2rem;
-  padding: 4px 6px;
-  cursor: pointer;
-}
-
-#update-toast-dismiss:hover {
-  color: var(--text);
-}
-
-/* ===== Mobile Responsive ===== */
-@media (max-width: 600px) {
-  #mobile-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 10px;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-
-  #mobile-header .icon-btn {
-    display: block;
-    font-size: 1.4rem;
-    padding: 4px 8px;
-  }
-
-  .mobile-title {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: var(--text-muted);
-  }
-
-  #sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    transform: translateX(-100%);
-    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5);
-  }
-
-  #sidebar.open {
-    transform: translateX(0);
-  }
-
-  /* Overlay when sidebar is open */
-  #sidebar-overlay {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 99;
-  }
-
-  #sidebar-overlay.visible {
-    display: block;
-  }
-
-  #terminal-area {
-    width: 100%;
-  }
-
-  .tb-btn {
-    padding: 14px 2px;
-    font-size: min(0.8rem, 3.5vw);
-    min-height: 44px;
-  }
-
-  .tb-btn.tb-arrow {
-    font-size: min(1.1rem, 4.5vw);
-  }
-
-  #toolbar {
-    display: block;
-  }
-
-  #terminal-scrollbar {
-    display: block;
-    width: 24px;
-    right: 0;
-  }
-
-  #terminal-scrollbar-thumb {
-    width: 24px;
-    min-height: 44px;
-    border-radius: 12px;
-    background: var(--text-muted);
-    opacity: 0.5;
-  }
-}
-
-/* ===== Scrollbar ===== */
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 4px;
-}
-
-/* ===== Image Paste Toast ===== */
-#image-toast {
-  position: fixed;
-  bottom: 60px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1000;
-  background: #2d2d2d;
-  border: 1px solid #555;
-  border-radius: 8px;
-  padding: 8px 14px;
-  color: #d4d4d4;
-  font-size: 13px;
-  max-width: 90vw;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-}
-
-#image-toast-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-#image-toast-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-#image-toast-dismiss {
-  background: none;
-  border: none;
-  color: #999;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 2px 6px;
-}
-
-#terminal-container.drag-over {
-  outline: 2px dashed #007acc;
-  outline-offset: -2px;
-}