openclacky 0.9.7 → 0.9.9

data/lib/clacky/web/app.css

@@ -295,7 +295,7 @@ body {
   flex-direction: column;
   min-height: 0;
 }
-#session-list { padding: 0 8px 8px; }
+#session-list { padding: 4px 8px 8px; min-height: 108px; }
 
 /* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
 .sidebar-divider {
@@ -303,13 +303,13 @@ body {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 12px 16px 6px 16px;
+  padding: 8px 14px 4px 14px;
   font-size: 10px;
   font-weight: 600;
   color: var(--color-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 1px;
-  margin-top: 8px;
+  margin-top: 4px;
 }
 .sidebar-divider:first-child {
   margin-top: 0;
@@ -318,36 +318,161 @@ body {
   flex: 1;
   white-space: nowrap;
 }
-/* Inline New Session button in Chat divider */
-.btn-new-inline {
-  width: 20px;
-  height: 20px;
+/* ── Split button [+ ▾] ─────────────────────────────────────────────────── */
+.btn-split-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  overflow: visible;
+}
+.btn-split-main {
+  height: 22px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 5px 0 0 5px;
+  background: var(--color-bg-hover);
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.btn-split-main:hover {
+  background: var(--color-accent-primary);
+  color: #fff;
+}
+.btn-split-arrow {
+  height: 22px;
+  padding: 0 4px;
+  border: none;
+  border-left: 1px solid var(--color-border-primary);
+  border-radius: 0 5px 5px 0;
+  background: var(--color-bg-hover);
+  color: var(--color-text-tertiary);
+  font-size: 10px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.btn-split-arrow:hover {
+  background: var(--color-accent-primary);
+  color: #fff;
+}
+
+/* ── Dropdown menu ───────────────────────────────────────────────────────── */
+.new-session-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 150px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 7px;
+  box-shadow: var(--shadow-md);
+  z-index: 200;
+  padding: 4px 0;
+  overflow: hidden;
+}
+.new-session-dropdown[hidden] { display: none; }
+.dropdown-item {
+  padding: 7px 14px;
+  font-size: 13px;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.12s;
+}
+.dropdown-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-accent-primary);
+}
+
+/* ── Session source tabs ─────────────────────────────────────────────────── */
+.session-tabs {
+  display: flex;
+  gap: 0;
+  padding: 4px 8px 3px;
+}
+.session-tab {
+  flex: 1;
   border: none;
-  border-radius: 4px;
   background: transparent;
+  color: var(--color-text-muted);
+  font-size: 10px;
+  font-weight: 500;
+  padding: 3px 0;
+  cursor: pointer;
+  border-bottom: 1.5px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+  text-align: center;
+  letter-spacing: 0.2px;
+}
+.session-tab:hover {
   color: var(--color-text-tertiary);
+}
+.session-tab.active {
+  color: var(--color-accent-primary);
+  border-bottom-color: var(--color-accent-primary);
+}
+
+/* ── Coding agent fixed section ──────────────────────────────────────────── */
+#coding-section {
+  max-height: 160px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.coding-section-divider {
+  padding: 8px 16px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-top: 1px solid var(--color-border-primary);
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+#coding-session-list {
+  padding: 0 8px 6px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ── Load-more link ───────────────────────────────────────────────────────── */
+.btn-load-more-sessions {
+  display: block;
+  width: 100%;
+  margin: 6px 0 4px;
+  padding: 3px 0;
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 11px;
   cursor: pointer;
-  padding: 0;
-  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+  text-align: center;
+  transition: color 0.15s;
 }
-.btn-new-inline:hover {
-  background: var(--color-bg-hover);
+.btn-load-more-sessions:hover {
   color: var(--color-accent-primary);
-  transform: scale(1.1);
 }
-.btn-new-inline:active {
-  transform: scale(0.95);
+.btn-load-more-sessions:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/* Legacy .btn-new-inline — kept for compat, can be removed after cleanup */
+.btn-new-inline {
+  display: none;
 }
 
 /* ── Session empty placeholder ───────────────────────────────────────────── */
 .session-empty {
-  margin: 4px 8px;
-  padding: 10px 12px;
-  border-radius: 6px;
-  border: 1px dashed var(--color-border-primary);
+  margin: 0;
+  padding: 32px 12px;
   font-size: 12px;
   color: var(--color-text-muted);
   text-align: center;
@@ -356,15 +481,29 @@ body {
 /* ── Session List ────────────────────────────────────────────────────────── */
 .session-item {
   position: relative;
-  padding: 10px 12px 10px 15px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 10px 4px 13px;
   border-radius: 6px;
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: 1px;
   border: 1px solid transparent;
   transition: background .2s ease, border-color .2s ease;
 }
+/* Two-row text block next to dot */
+.session-body {
+  flex: 1;
+  min-width: 0;
+}
+
 /* Default: secondary text color for icons/text */
 .session-item .session-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--color-text-secondary);
   font-weight: 500;
   transition: color .2s ease, font-weight .2s ease;
@@ -382,7 +521,7 @@ body {
 }
 .session-item.active .session-name {
   color: var(--color-accent-primary);
-  font-weight: 700;
+  font-weight: 600;
 }
 /* Left indicator bar (3px) for active state */
 .session-item.active::before {
@@ -399,23 +538,21 @@ body {
 
 /* Delete button on session list items — visible only on hover */
 .session-delete-btn {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
+  flex-shrink: 0;
   display: none;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   background: transparent;
   border: none;
-  border-radius: 4px;
-  color: var(--color-text-secondary);
-  font-size: 16px;
+  border-radius: 3px;
+  color: var(--color-text-muted);
+  font-size: 14px;
   line-height: 1;
   cursor: pointer;
   padding: 0;
+  margin-top: -3px;
   transition: background .15s, color .15s;
 }
 .session-item:hover .session-delete-btn { display: flex; }
@@ -432,28 +569,37 @@ body {
   box-sizing: border-box;
 }
 .session-name {
-  font-size: 13px;
+  font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 /* While renaming, lift overflow so the input is fully visible */
-.session-name:has(input),
 .session-name.renaming {
   overflow: visible;
   white-space: normal;
+  flex: 1;
+}
+/* Meta: second row — tasks + cost */
+.session-meta {
+  display: block;
+  font-size: 10px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  opacity: 0.7;
+  margin-top: 1px;
 }
-.session-meta { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; }
 .session-dot {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
+  flex-shrink: 0;
+  display: block;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
-  margin-right: 5px;
+  margin-top: -7px;
 }
-.dot-idle    { background: var(--color-text-secondary); }
-.dot-running { background: var(--color-success); animation: pulse 1s infinite; }
-.dot-error   { background: var(--color-error); }
+.dot-idle    { background: var(--color-text-secondary); opacity: 0.4; }
+.dot-running { background: var(--color-success); opacity: 1; animation: pulse 1s infinite; }
+.dot-error   { background: var(--color-error); opacity: 1; }
 
 @keyframes pulse {
   0%, 100% { opacity: 1; }
@@ -704,6 +850,12 @@ body {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+.task-name-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 .task-name-text {
   font-weight: 600;
@@ -713,6 +865,10 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* Mobile-only schedule shown inside name col — hidden on desktop */
+.task-name-sched {
+  display: none;
+}
 
 .task-col-schedule {
   font-size: 12px;
@@ -868,6 +1024,24 @@ body {
 }
 
 /* Delete session button in chat header */
+/* Back button in chat header — hidden on desktop, shown on mobile via media query */
+.chat-back-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background .15s, color .15s;
+}
+.chat-back-btn:hover { background: var(--color-bg-hover); }
+
 .btn-delete-session {
   margin-left: auto;
   display: flex;
@@ -991,6 +1165,8 @@ body {
 .msg-assistant em { font-style: italic; color: var(--color-text-secondary); }
 .msg-tool      { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); font-family: monospace; font-size: 12px; color: var(--color-text-secondary); align-self: flex-start; }
 .msg-info      { color: var(--color-text-secondary); font-size: 12px; align-self: center; font-style: italic; }
+.msg-idle-status { color: var(--color-accent-primary); animation: pulse 1.2s infinite; }
+.msg-idle-status.msg-idle-done { color: var(--color-text-secondary); animation: none; opacity: 0.7; }
 .msg-error     { background: var(--color-error-bg); border: 1px solid var(--color-error); color: var(--color-error); align-self: flex-start; }
 .msg-success   { color: var(--color-success); align-self: flex-start; font-size: 13px; }
 .tool-name     { color: var(--color-warning); font-weight: 600; }
@@ -1143,14 +1319,41 @@ body {
   object-fit: contain;
 }
 .msg-pdf-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border-primary);
+  margin-bottom: 4px;
+  max-width: 240px;
+  min-width: 100px;
+  vertical-align: middle;
+}
+.msg-pdf-badge-icon {
+  font-size: 20px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.msg-pdf-badge-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.msg-pdf-badge-name {
   font-size: 12px;
+  color: var(--color-text-primary);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.msg-pdf-badge-type {
+  font-size: 10px;
   color: var(--color-text-secondary);
-  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 /* ── Session info bar (above input area, mirrors CLI bottom status bar) ─── */
@@ -1278,39 +1481,52 @@ body {
 }
 .img-preview-remove:hover { background: var(--color-error); }
 
-/* PDF preview badge in image-preview-strip */
+/* File preview card in image-preview-strip (PDF, DOC, XLSX, etc.) */
 .pdf-preview-item {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  width: 64px;
+  gap: 8px;
   height: 64px;
-  border-radius: 6px;
+  padding: 0 28px 0 10px;
+  border-radius: 8px;
   border: 1px solid var(--color-border-primary);
   background: var(--color-bg-tertiary);
   flex-shrink: 0;
-  gap: 4px;
+  max-width: 180px;
+  min-width: 120px;
+  box-sizing: border-box;
 }
 .pdf-preview-icon {
-  font-size: 22px;
+  font-size: 24px;
   line-height: 1;
+  flex-shrink: 0;
+}
+.pdf-preview-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 .pdf-preview-name {
-  font-size: 9px;
-  color: var(--color-text-secondary);
-  text-align: center;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 56px;
-  padding: 0 2px;
+}
+.pdf-preview-type {
+  font-size: 9px;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 2px;
 }
 .pdf-preview-remove {
   position: absolute;
-  top: 2px;
-  right: 2px;
+  top: 4px;
+  right: 4px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -1402,6 +1618,28 @@ body {
   margin-bottom: 2px;
 }
 
+/* meta block: encrypted badge + source directory */
+.skill-ac-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.skill-ac-enc {
+  font-size: 11px;
+  opacity: 0.5;
+  cursor: default;
+}
+
+.skill-ac-src {
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  opacity: 0.6;
+  white-space: nowrap;
+  cursor: default;
+}
+
 /* ── Input bar ───────────────────────────────────────────────────────────── */
 #input-bar {
   padding: 13.5px 16px;
@@ -1597,6 +1835,51 @@ body {
 }
 .settings-error { color: var(--color-error); }
 
+/* ── Browser toggle switch ───────────────────────────────────────────────── */
+.settings-browser-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  cursor: pointer;
+}
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--color-border-primary);
+  border-radius: 20px;
+  transition: background 0.2s;
+}
+.toggle-slider::before {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  left: 3px;
+  top: 3px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+.toggle-switch input:checked + .toggle-slider {
+  background: var(--color-accent-primary);
+}
+.toggle-switch input:checked + .toggle-slider::before {
+  transform: translateX(16px);
+}
+
 /* ── Model card ──────────────────────────────────────────────────────────── */
 .model-card {
   background: var(--color-bg-secondary);
@@ -3421,6 +3704,34 @@ body.setup-mode[data-theme="dark"] {
 .badge-inactive  { color: var(--color-text-secondary); }
 
 /* Support QR code */
+.brand-support-contact {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.brand-support-contact-label {
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.brand-support-contact-value,
+.brand-status-link {
+  color: var(--color-accent-primary);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.brand-support-contact-value:hover,
+.brand-status-link:hover {
+  text-decoration: underline;
+}
+
 .brand-support-qr {
   display: flex;
   flex-direction: column;
@@ -3866,6 +4177,11 @@ body.setup-mode[data-theme="dark"] {
   color: #fff;
 }
 
+.channel-logo-weixin {
+  background: linear-gradient(135deg, #2dc100, #1aad19);
+  color: #fff;
+}
+
 .channel-card-name {
   font-size: 15px;
   font-weight: 600;
@@ -3880,13 +4196,22 @@ body.setup-mode[data-theme="dark"] {
 
 /* Status badge */
 .channel-status-badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.badge-running,
+.badge-enabled,
+.badge-disabled {
+  display: inline-flex;
+  align-items: center;
   font-size: 12px;
   font-weight: 500;
   padding: 3px 10px;
   border-radius: 20px;
   white-space: nowrap;
 }
-
 .badge-running  { background: var(--color-success-bg);  color: var(--color-success); border: 1px solid var(--color-success-border); }
 .badge-enabled  { background: #1a2f4e; color: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); }
 .badge-disabled { background: var(--color-bg-tertiary); color: var(--color-text-muted); border: 1px solid var(--color-border-primary); }
@@ -4284,3 +4609,312 @@ body.setup-mode[data-theme="dark"] {
 }
 
 
+
+/* ── Mobile responsive (≤768px) ─────────────────────────────────────────── */
+@media (max-width: 768px) {
+  /* Sidebar becomes a fixed drawer on top of content */
+  #sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 200;
+    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
+    transition: transform 0.3s ease, background-color 0.3s ease;
+    transform: translateX(0);
+    margin-left: 0 !important;
+  }
+  #sidebar.hidden {
+    transform: translateX(-100%);
+    margin-left: 0 !important;
+  }
+
+  /* Overlay backdrop */
+  #sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 199;
+    background: rgba(0,0,0,0.4);
+  }
+  #sidebar-overlay.active {
+    display: block;
+  }
+
+  /* Main takes full width since sidebar is no longer in flow */
+  #main {
+    width: 100%;
+    min-width: 0;
+    overflow: visible;
+  }
+
+  /* Tighten header padding */
+  #top-header {
+    padding: 0 12px;
+  }
+
+  /* Chat sub-header: tighten padding */
+  #chat-header {
+    padding: 8px 12px;
+    gap: 8px;
+  }
+
+  /* Truncate long session titles */
+  #chat-title {
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex: 1;
+  }
+
+  /* Status badge: smaller on mobile */
+  .status-idle,
+  .status-running,
+  .status-error {
+    font-size: 10px;
+    padding: 1px 6px;
+    flex-shrink: 0;
+  }
+
+  /* Session info bar: single-line, no hover-expand, font smaller */
+  #session-info-bar {
+    padding: 3px 12px;
+    font-size: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  /* Always show detail fields on mobile (no hover) */
+  #session-info-bar .sib-detail {
+    display: contents;
+  }
+  /* Hide less-important fields and their orphaned separators */
+  #sib-id,
+  .sib-sep-before-id,
+  #sib-dir,
+  #sib-mode-wrap,
+  .sib-sep-before-tasks {
+    display: none;
+  }
+  .sib-sep {
+    margin: 0 4px;
+  }
+
+  /* Input bar: proportional spacing, touch-friendly */
+  #input-bar {
+    padding: 8px 10px;
+    gap: 4px;
+  }
+
+  /* Attach & slash buttons: slightly smaller touch target */
+  #btn-attach {
+    padding: 4px;
+  }
+  #btn-slash {
+    padding: 4px 6px;
+    font-size: 14px;
+  }
+
+  /* Textarea: prevent iOS auto-zoom (must be ≥16px) */
+  #user-input {
+    font-size: 16px;
+    padding: 7px 10px;
+  }
+
+  /* Send button: bigger tap target */
+  #btn-send, #btn-interrupt {
+    padding: 7px 14px;
+    font-size: 14px;
+  }
+
+  /* Back button: only visible on mobile when inside a session */
+  .chat-back-btn {
+    display: flex;
+  }
+
+  /* Welcome page: vertically centered but shifted up, add horizontal padding */
+  #welcome {
+    justify-content: center;
+    padding-bottom: 30vh;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  /* ── Tasks page ── */
+  #task-detail-panel {
+    overflow: visible;
+    height: auto;
+    flex: 1;
+    min-height: 0;
+  }
+  #task-detail-body {
+    padding: 16px 16px 80px;
+    gap: 12px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    flex: 1;
+    min-height: 0;
+  }
+  /* btn-create-task: move below title instead of absolute top-right */
+  .task-page-header {
+    flex-direction: column;
+    padding-right: 0;
+  }
+  .btn-create-task {
+    position: static;
+    align-self: flex-start;
+    margin-top: 4px;
+  }
+  /* Table: let it scroll horizontally, keep columns readable */
+  #task-list-table {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  /* ── Task table: mobile layout ── */
+  .task-table-header {
+    display: none;
+  }
+  .task-table-row {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 8px;
+    padding: 8px 10px;
+  }
+  /* Name col takes all remaining space */
+  .task-col-name {
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+  }
+  /* Show schedule as subtitle under the task name */
+  .task-name-sched {
+    display: block;
+    font-size: 11px;
+    font-family: monospace;
+    color: var(--color-warning);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* Hide standalone schedule & content columns */
+  .task-col-schedule,
+  .task-col-content {
+    display: none;
+  }
+  /* Actions: fixed width, icon-only buttons */
+  .task-col-actions {
+    flex-shrink: 0;
+    width: 104px;
+    gap: 4px;
+  }
+  .task-btn .btn-label {
+    display: none;
+  }
+  .task-btn {
+    padding: 6px;
+    width: 30px;
+    height: 30px;
+    justify-content: center;
+  }
+
+  /* ── Skills page ── */
+  #skills-panel {
+    overflow: visible;
+    height: auto;
+    flex: 1;
+    min-height: 0;
+  }
+  #skills-body {
+    padding: 16px 16px 80px;
+    gap: 12px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    flex: 1;
+    min-height: 0;
+  }
+  /* action buttons: move below title, inline row */
+  .skills-page-header {
+    padding-right: 0;
+  }
+  .skill-action-btns {
+    position: static;
+    margin-top: 8px;
+  }
+  /* Show system skills toggle: give right margin */
+  #label-show-system {
+    margin-right: 8px;
+  }
+
+  /* ── Settings page ── */
+  #settings-header {
+    padding: 12px 16px;
+    font-size: 15px;
+  }
+  #settings-body {
+    padding: 16px 16px 80px;
+    gap: 24px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+  #settings-panel {
+    overflow: visible;
+    height: auto;
+    flex: 1;
+    min-height: 0;
+  }
+  .settings-section-title {
+    font-size: 15px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  /* Add Model button: full width on mobile */
+  .btn-settings-add {
+    width: 100%;
+    justify-content: center;
+  }
+  /* Model card: tighter, stack actions */
+  .model-card {
+    padding: 12px 14px;
+    gap: 10px;
+  }
+  .model-card-header {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .model-card-actions {
+    flex-wrap: wrap;
+  }
+
+  /* ── Channels page ── */
+  #channels-panel {
+    overflow: visible;
+    height: auto;
+    flex: 1;
+    min-height: 0;
+  }
+  #channels-body {
+    padding: 16px 16px 80px;
+    gap: 16px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+  /* Channel card: tighter padding, stack footer buttons */
+  .channel-card {
+    padding: 14px 16px;
+    gap: 12px;
+  }
+  .channel-card-footer {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .channel-card-actions {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+}