openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/app.css

@@ -1754,6 +1754,30 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.task-card-preview-expandable {
+  cursor: pointer;
+}
+.task-card-preview-expandable:hover {
+  color: var(--color-accent-primary);
+}
+.task-card-detail {
+  margin-top: 0.625rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+}
+.task-card-detail-content {
+  margin: 0;
+  font-size: 0.75rem;
+  font-family: inherit;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 12rem;
+  overflow-y: auto;
+}
 .task-card-actions {
   display: flex;
   align-items: center;
@@ -1905,49 +1929,175 @@ body {
 #chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
 #chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
 
-/* ── Workspace panel (right file browser) ───────────────────────────────── */
-#workspace-panel {
-  width: 280px;
+/* ── Session extension slots (agent-scoped panels mount here) ───────────────
+   Each slot is laid out by the host; an empty slot collapses to zero so it
+   never reserves space when no panel is mounted for the current agent. */
+/* ── Session aside — one resizable / collapsible right column with tabs ─────
+   The host owns the chrome (resize handle, collapse button, floating opener);
+   Clacky.ext renders the tab bar + bodies into #ext-slot-session-aside. When
+   the slot has no panels for the current agent it stays empty and the whole
+   column collapses to zero width. */
+#session-aside {
+  --session-aside-width: 360px;
+  width: var(--session-aside-width);
   flex-shrink: 0;
+  position: relative;
   display: flex;
   flex-direction: column;
-  border-left: 1px solid var(--color-border-primary);
-  background: var(--color-bg-primary);
   overflow: hidden;
+  border-left: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
   transition: width var(--transition-base);
 }
-#workspace-panel.collapsed { width: 0; border-left: none; }
-#workspace-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 2.5rem;
-  min-height: 2.5rem;
-  padding: 0 0.5rem 0 0.75rem;
-  border-bottom: 1px solid var(--color-border-primary);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
+#session-aside.collapsed { width: 0; border-left: none; }
+/* Empty slot (no panels for this agent) → collapse the whole column. */
+#session-aside:has(.session-aside-slot:empty) { width: 0; border-left: none; }
+#session-aside:has(.session-aside-slot:empty) .session-aside-resize,
+#session-aside:has(.session-aside-slot:empty) .session-aside-collapse { display: none; }
+
+.session-aside-resize {
+  position: absolute;
+  top: 0;
+  left: -6px;
+  bottom: 0;
+  width: 12px;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
 }
-.workspace-header-actions { display: flex; gap: 0.125rem; }
-.workspace-icon-btn {
+.session-aside-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 6px;
+  width: 1px;
+  background: transparent;
+  transition: background-color var(--transition-base);
+}
+.session-aside-resize:hover::after,
+.session-aside-resize.active::after { background: var(--color-accent-primary); }
+
+.session-aside-collapse {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  z-index: 11;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.625rem;
+  height: 1.625rem;
   border: none;
   background: transparent;
+  color: var(--color-text-tertiary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+.session-aside-collapse:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+
+.session-aside-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+
+/* Tab bar (rendered by Clacky.ext). Leaves room on the right for the collapse
+   button which is absolutely positioned over it. */
+.aside-tabs {
+  flex: none;
+  display: flex;
+  align-items: stretch;
+  height: 40px;
+  padding: 0 38px 0 4px;
+  gap: 2px;
+  border-bottom: 1px solid var(--color-border-primary);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.aside-tabs::-webkit-scrollbar { display: none; }
+.aside-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  border: none;
+  background: none;
+  font-size: 12.5px;
+  color: var(--color-text-tertiary);
+  border-bottom: 2px solid transparent;
+}
+.aside-tab:hover { color: var(--color-text-secondary); }
+.aside-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-primary); font-weight: 600; }
+.aside-tab-badge {
+  font-size: 10px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent-primary);
+  color: var(--color-text-inverse);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aside-bodies { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.aside-panel { flex: 1; min-height: 0; overflow: auto; display: none; flex-direction: column; }
+.aside-panel.active { display: flex; }
+
+/* Floating opener shown when the column is collapsed. */
+.session-aside-opener {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
   color: var(--color-text-secondary);
   border-radius: var(--radius-sm);
   cursor: pointer;
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
   transition: background-color var(--transition-base), color var(--transition-base);
 }
-.workspace-icon-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
-#workspace-tree {
+.session-aside-opener:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+
+.session-banner:empty,
+.session-composer:empty { display: none; }
+.session-banner { flex-shrink: 0; }
+.session-composer { flex-shrink: 0; }
+
+/* ── File tree (used inside the Files tab) ──────────────────────────────── */
+.wt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.wt-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+.wt-bar-hint { font-size: 11px; color: var(--color-text-tertiary); }
+.wt-bar-btn {
+  flex: none;
+  padding: 3px 10px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+}
+.wt-bar-btn:hover { background: var(--color-bg-hover); }
+.wt-tree {
   flex: 1;
   overflow-y: auto;
-  padding: 0.375rem 0.25rem;
+  padding: 6px 8px;
   font-size: 0.8125rem;
   font-family: var(--font-mono);
 }
@@ -1984,26 +2134,6 @@ body {
 }
 .wt-error { color: var(--color-danger, #d23); }
 
-/* Collapsed-state opener tab — floats at the right edge of the chat area */
-#btn-workspace-open {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 8;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--color-border-primary);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background-color var(--transition-base), color var(--transition-base);
-}
-#btn-workspace-open:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
-
 /* Mobile-only floating back button — replaces the old in-header back button.
    Hidden on desktop; mobile media query enables it. Positioned absolutely so
    it doesn't take layout space or add visual chrome on desktop. */
@@ -2147,13 +2277,133 @@ body {
 }
 /* Time color / alignment: anchor to the bubble's own side, let width be
    driven by content — prevents overflow on narrow bubbles. */
-.msg-user .msg-time      { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
+.msg-user .msg-time      { display: none; }
 .msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
 
-.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; }
+.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); white-space: pre-wrap; }
 [data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
 .msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
 
+/* ── User message action bar (copy + edit) ─────────────────────────────── */
+.msg-user-wrap {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 1.8rem;
+}
+.msg-user-actions {
+  position: absolute;
+  top: calc(100% - 1.5rem + 2px);
+  right: 0;
+  display: flex;
+  gap: 0.125rem;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+  z-index: 3;
+}
+.msg-user-wrap:hover .msg-user-actions { opacity: 1; pointer-events: auto; }
+.msg-user-wrap:has(.msg-user.editing) { padding-bottom: 0; }
+.msg-user-wrap:has(.msg-user.editing) .msg-user-actions { display: none; }
+
+.msg-user-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  padding: 0;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 5px;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.msg-user-action-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-tertiary);
+}
+.msg-user-action-btn:active { transform: translateY(1px); }
+.msg-user-action-btn.is-copied {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+.msg-user-copy-icon-check { display: none; }
+.msg-user-action-btn.is-copied .msg-user-copy-icon { display: none; }
+.msg-user-action-btn.is-copied .msg-user-copy-icon-check { display: inline; }
+
+/* Keep the buttons reachable without hover on touch / narrow viewports. */
+@media (hover: none) {
+  .msg-user-actions { opacity: 0.65; pointer-events: auto; }
+}
+
+/* ── Edit mode ─────────────────────────────────────────────────────────── */
+.msg-user.editing {
+  background: var(--color-bg-primary);
+  padding: 0.625rem 0.75rem 0.5rem;
+  overflow: visible;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-primary);
+  max-width: min(42rem, 90%);
+  width: min(42rem, 90%);
+}
+.msg-user-edit-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+.msg-user-edit-textarea {
+  width: 100%;
+  min-height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  resize: none;
+  overflow: hidden;
+  outline: none;
+  white-space: pre-wrap;
+}
+.msg-user-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+}
+.msg-user-edit-cancel {
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.msg-user-edit-cancel:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.msg-user-edit-send {
+  padding: 0.25rem 0.75rem;
+  border: none;
+  border-radius: 5px;
+  background: var(--color-button-primary);
+  color: var(--color-button-primary-text);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+.msg-user-edit-send:hover { opacity: 0.88; }
+.msg-user-edit-send:active { opacity: 0.76; }
+
 /* ── Copy button on assistant messages ────────────────────────────────────
    Hidden by default, revealed on bubble hover (same pattern as .msg-time).
    On touch devices (hover: none) we keep the button visible at low opacity
@@ -2187,8 +2437,8 @@ body {
 }
 .msg-copy-btn.is-copied {
   opacity: 1;
-  color: #10b981;               /* success green — same across themes */
-  border-color: #10b981;
+  color: var(--color-success);
+  border-color: var(--color-success);
   background: var(--color-bg-primary);
 }
 .msg-copy-btn .msg-copy-icon,
@@ -2800,7 +3050,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding: 0.375rem 0.75rem;
   margin-left: 1.5rem;
   margin-right: 1.5rem;
@@ -2810,13 +3060,17 @@ body {
   color: var(--color-text-tertiary);
   font-family: var(--font-mono, monospace);
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
   flex-shrink: 0;
   opacity: 0.95;
   transition: opacity 0.15s ease;
   cursor: default;
 }
 
+#session-info-bar::-webkit-scrollbar { display: none; }
+
 #session-info-bar .sib-sep {
   opacity: 0.3;
 }
@@ -4059,7 +4313,6 @@ body {
   padding: 2rem 2rem 1.5rem;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
 }
 .settings-section {
   display: flex;
@@ -4144,6 +4397,15 @@ body {
 }
 
 /* ── Backup section ── */
+.backup-auto-card {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  padding: 0.625rem 0.875rem;
+  background: var(--color-bg-secondary);
+}
+.backup-auto-card .backup-auto-row {
+  margin: 0.25rem 0;
+}
 .backup-option,
 .backup-auto-label {
   font-size: 0.8125rem;
@@ -4155,6 +4417,11 @@ body {
 .backup-option {
   margin: 0.75rem 0;
 }
+.backup-option-nested {
+  margin: 0.5rem 0 0.25rem 2.75rem;
+  font-size: 0.78125rem;
+  color: var(--color-text-secondary);
+}
 .backup-auto-row {
   display: flex;
   align-items: center;
@@ -4170,7 +4437,6 @@ body {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin: 0.75rem 0;
   flex-wrap: wrap;
 }
 
@@ -4571,7 +4837,6 @@ body {
   color: var(--color-text-secondary);
   font-family: var(--font-mono, monospace);
   background: var(--color-bg-tertiary);
-  padding: 0.125rem 0.375rem;
   border-radius: 4px;
   display: inline-block;
   max-width: 100%;
@@ -4633,14 +4898,15 @@ body {
 }
 .model-card-grid-toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.375rem;
   margin-left: auto;
   justify-content: flex-end;
 }
 .model-card-grid-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 0.25rem;
 }
 .model-card-grid-link {
@@ -6581,6 +6847,123 @@ body {
   background: var(--color-error-bg, #fff0f0);
 }
 
+
+/* ── CodeEditor (CodeMirror 6) Modal ────────────────────────────────────── */
+.code-editor-modal {
+  background: var(--color-bg-secondary);
+  border-radius: 12px;
+  border: 1px solid var(--color-border-primary);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+  width: 92%;
+  max-width: 820px;
+  height: 82vh;
+  max-height: 860px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.code-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.code-editor-header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+  color: var(--color-text-primary);
+}
+.code-editor-close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 0;
+}
+.code-editor-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.code-editor-body {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.code-editor-body .cm-editor {
+  height: 100%;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  background: transparent;
+}
+.code-editor-body .cm-editor .cm-content {
+  background: transparent;
+}
+.code-editor-body .cm-editor.cm-focused {
+  outline: none;
+}
+.code-editor-body .cm-scroller {
+  overflow: auto;
+  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+}
+.code-editor-body .cm-gutters {
+  background: transparent;
+  border-right: 1px solid var(--color-border-primary);
+  color: var(--color-text-tertiary);
+}
+
+.code-editor-body .cm-activeLineGutter {
+  background: var(--color-bg-hover);
+}
+.code-editor-body .cm-activeLine {
+  background: var(--color-bg-hover);
+}
+.code-editor-body .cm-selectionBackground {
+  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent) !important;
+}
+.code-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+  gap: 0.75rem;
+}
+.code-editor-status {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
+.code-editor-status-error {
+  color: var(--color-error, #c0392b);
+}
+.code-editor-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.code-editor-modal--image .code-editor-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-primary);
+  overflow: auto;
+}
+.code-editor-img-preview {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
 /* ── Skills sidebar section ──────────────────────────────────────────────── */
 #skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
 
@@ -8651,6 +9034,29 @@ body.setup-mode[data-theme="dark"] {
   cursor: wait;
 }
 
+.profile-pane-footer-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.btn-profile-edit {
+  padding: 0.5rem 1.125rem;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.btn-profile-edit:hover {
+  border-color: var(--color-button-primary);
+  color: var(--color-button-primary);
+}
+
 /* ── Minimal-Markdown rendered body ───────────────────────────────────── */
 .profile-markdown {
   font-size: 0.8438rem;
@@ -8791,6 +9197,7 @@ body.setup-mode[data-theme="dark"] {
 
 /* Shared base for per-card buttons. */
 .btn-memory-curate,
+.btn-memory-edit,
 .btn-memory-delete,
 .btn-memory-expand {
   padding: 0.3125rem 0.625rem;
@@ -8806,7 +9213,8 @@ body.setup-mode[data-theme="dark"] {
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
-.btn-memory-curate:hover {
+.btn-memory-curate:hover,
+.btn-memory-edit:hover {
   border-color: var(--color-text-primary);
   background: var(--color-bg-hover);
 }
@@ -11442,7 +11850,7 @@ body.setup-mode[data-theme="dark"] {
     min-height: 0;
   }
   #skills-body {
-    padding: 1rem 1rem 5rem;
+    padding: 1rem 1rem 1rem;
     gap: 0.75rem;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -11543,9 +11951,9 @@ body.setup-mode[data-theme="dark"] {
   }
 
   /* ── Billing / Trash / Creator pages ── */
-  #billing-body { padding: 1rem 1rem 5rem; }
-  #trash-body   { padding: 1rem 1rem 5rem; }
-  #creator-body { padding: 1rem 1rem 5rem; }
+  #billing-body { padding: 1rem 1rem 1rem; }
+  #trash-body   { padding: 1rem 1rem 1rem; }
+  #creator-body { padding: 1rem 1rem 1rem; }
 
   .billing-heatmap-row { grid-template-columns: 1fr; }
 
@@ -11673,4 +12081,48 @@ body.setup-mode[data-theme="dark"] {
     font-size: 0.7rem;
     color: var(--color-text-tertiary);
   }
+
+  /* Session aside: fixed overlay on mobile */
+  #session-aside {
+    position: fixed;
+    top: 0;
+    right: 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);
+    width: var(--session-aside-width);
+  }
+  #session-aside.collapsed {
+    transform: translateX(100%);
+    width: var(--session-aside-width);
+    border-left: 1px solid var(--color-border-primary);
+  }
+  #session-aside-resize { display: none; }
+
+  #workspace-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 199;
+    background: rgba(0,0,0,0.4);
+  }
+  #workspace-overlay.active {
+    display: block;
+  }
+}
+
+/* ════ Media output directory subsection (nested under #media-section) ════ */
+#media-output-dir-section.settings-subsection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 48rem;
+}
+#media-output-dir-section .settings-subsection-desc {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin: 0;
 }