codexmate 0.0.16 → 0.0.18

package/web-ui/styles.css

@@ -27,9 +27,7 @@
     --color-error: #C44536;
 
     --bg-warm-gradient:
-        radial-gradient(circle at 16% 10%, rgba(201, 94, 75, 0.14), transparent 48%),
-        radial-gradient(circle at 90% 6%, rgba(255, 255, 255, 0.9), transparent 42%),
-        linear-gradient(135deg, #F8F2EA 0%, #F1E4D8 44%, #F8F2EA 100%);
+        linear-gradient(180deg, #F8F2EA 0%, #F8F2EA 100%);
 
     /* 字体系统 */
     --font-family-body: 'JetBrainsMono Nerd Font Mono', 'OPPO Sans 4.0', 'Fira Mono', 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', monospace;
@@ -89,6 +87,145 @@
     --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 }
 
+/* ============================================
+   手机桌面 UA 兜底：触控设备强制紧凑排版
+   ============================================ */
+body.force-compact {
+    --font-size-title: 20px;
+    --font-size-body: 16px;
+    --font-size-secondary: 14px;
+    --font-size-caption: 12px;
+}
+
+body.force-compact .container {
+    max-width: 760px;
+    padding: 10px 10px 16px;
+}
+
+body.force-compact .provider-fast-switch {
+    position: sticky;
+    top: 8px;
+    z-index: 16;
+}
+
+body.force-compact .provider-fast-switch-select {
+    min-height: 44px;
+    font-size: 16px;
+}
+
+body.force-compact .app-shell {
+    grid-template-columns: 1fr;
+    gap: 12px;
+}
+
+body.force-compact .main-panel {
+    position: relative;
+    top: auto;
+    align-self: stretch;
+    width: 100%;
+    height: auto;
+}
+
+body.force-compact .side-rail,
+body.force-compact .status-inspector {
+    display: none;
+}
+
+body.force-compact .top-tabs {
+    display: grid !important;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 541px) {
+    body.force-compact .top-tabs {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+body.force-compact .hero-logo {
+    display: block;
+}
+
+body.force-compact .hero-github {
+    display: flex;
+}
+
+body.force-compact .main-panel {
+    padding: 14px 12px;
+}
+
+body.force-compact .hero-title {
+    font-size: 34px;
+}
+
+body.force-compact .card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 12px;
+    gap: 8px;
+}
+
+body.force-compact .card-leading {
+    align-items: flex-start;
+    width: 100%;
+}
+
+body.force-compact .card-content {
+    width: 100%;
+}
+
+body.force-compact .card-title,
+body.force-compact .card-title > span:first-child {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    overflow-wrap: anywhere;
+}
+
+body.force-compact .card-subtitle {
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: clip;
+    overflow-wrap: anywhere;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+body.force-compact .card-trailing {
+    width: 100%;
+    margin-top: 0;
+    grid-auto-flow: row;
+    grid-auto-columns: 1fr;
+    justify-content: stretch;
+    justify-items: end;
+}
+
+body.force-compact .card-trailing .card-actions {
+    width: 100%;
+    justify-content: flex-end;
+    justify-self: stretch;
+    flex-wrap: wrap;
+}
+
+body.force-compact .card-actions {
+    opacity: 1;
+    transform: none;
+}
+
+body.force-compact .card-trailing .pill,
+body.force-compact .card-trailing .latency {
+    justify-self: end;
+}
+
+body.force-compact .btn-add,
+body.force-compact .btn-tool,
+body.force-compact .card-action-btn {
+    min-height: 44px;
+}
+
 /* ============================================
    基础重置
    ============================================ */
@@ -240,10 +377,8 @@ body::before {
     position: fixed;
     inset: 0;
     background-image:
-        radial-gradient(circle at 12% 18%, rgba(201, 94, 75, 0.1), transparent 38%),
-        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 120px),
-        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 120px);
-    opacity: 0.28;
+        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
+    opacity: 0.16;
     pointer-events: none;
     z-index: 0;
 }
@@ -254,10 +389,10 @@ body::after {
     position: fixed;
     inset: 0;
     background-image:
-        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
-        linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
-    background-size: 120px 120px;
-    opacity: 0.22;
+        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
+        linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+    background-size: 180px 180px;
+    opacity: 0.08;
     pointer-events: none;
     z-index: 0;
 }
@@ -267,7 +402,7 @@ body::after {
    ============================================ */
 .container {
     width: 100%;
-    max-width: 1460px;
+    max-width: 2200px;
     margin: 0 auto;
     padding: 16px 12px 28px;
     position: relative;
@@ -331,7 +466,7 @@ body::after {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.95) 100%);
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all var(--transition-normal) var(--ease-spring);
+    transition: none;
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -352,6 +487,21 @@ body::after {
     box-shadow: var(--shadow-float);
 }
 
+.side-item.nav-intent-active {
+    border-color: var(--color-brand);
+    background: linear-gradient(135deg, rgba(201, 94, 75, 0.14), rgba(255, 255, 255, 0.96));
+    color: var(--color-text-primary);
+    box-shadow: var(--shadow-float);
+}
+
+.side-item.nav-intent-inactive,
+.side-item.active.nav-intent-inactive {
+    border-color: var(--color-border-soft);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.95) 100%);
+    color: var(--color-text-secondary);
+    box-shadow: var(--shadow-subtle);
+}
+
 .side-item-title {
     font-size: var(--font-size-body);
     font-weight: var(--font-weight-secondary);
@@ -615,6 +765,47 @@ body::after {
     word-break: break-word;
 }
 
+.provider-fast-switch {
+    margin: 0 0 var(--spacing-sm);
+    padding: 10px 12px;
+    border-radius: var(--radius-lg);
+    border: 1px solid rgba(216, 201, 184, 0.6);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 243, 0.96) 100%);
+    box-shadow: var(--shadow-subtle);
+    display: grid;
+    gap: 6px;
+}
+
+.provider-fast-switch-label {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    letter-spacing: 0.02em;
+}
+
+.provider-fast-switch-select {
+    width: 100%;
+    min-height: 40px;
+    padding: 8px 12px;
+    padding-right: 38px;
+    border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-body);
+    color: var(--color-text-primary);
+    background-color: var(--color-surface-alt);
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23505A66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 12px;
+}
+
+.provider-fast-switch-select:focus {
+    border-color: var(--color-brand);
+    box-shadow: var(--shadow-input-focus);
+}
+
 .main-panel {
     min-width: 0;
     background: rgba(255, 255, 255, 0.95);
@@ -783,7 +974,7 @@ body::after {
     color: var(--color-text-secondary);
     text-align: center;
     cursor: pointer;
-    transition: all var(--transition-normal) var(--ease-spring);
+    transition: none;
     box-shadow: var(--shadow-subtle);
 }
 
@@ -800,6 +991,25 @@ body::after {
     box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
 }
 
+.top-tab.nav-intent-active {
+    border-color: var(--color-brand);
+    color: var(--color-text-primary);
+    background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
+    box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
+}
+
+.top-tab.nav-intent-inactive,
+.top-tab.active.nav-intent-inactive {
+    border-color: rgba(216, 201, 184, 0.55);
+    color: var(--color-text-secondary);
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: var(--shadow-subtle);
+}
+
+#panel-sessions.session-panel-fast-hidden {
+    display: none !important;
+}
+
 .config-subtabs {
     display: flex;
     gap: 8px;
@@ -836,6 +1046,25 @@ body::after {
     box-shadow: var(--shadow-card);
 }
 
+.settings-subtabs {
+    margin-bottom: var(--spacing-sm);
+}
+
+.settings-tab-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    margin-left: 6px;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: rgba(210, 107, 90, 0.14);
+    color: var(--color-text-secondary);
+    font-size: 11px;
+    line-height: 1;
+}
+
 .content-wrapper {
     background: rgba(255, 255, 255, 0.94);
     border: 1px solid rgba(216, 201, 184, 0.35);
@@ -1097,8 +1326,9 @@ body::after {
     grid-auto-columns: max-content;
     column-gap: var(--spacing-xs);
     row-gap: 6px;
-    align-items: center;
+    align-items: start;
     justify-content: end;
+    align-self: flex-start;
 }
 
 .card-trailing .card-actions {
@@ -1271,6 +1501,22 @@ body::after {
     margin-bottom: var(--spacing-xs);
 }
 
+.settings-tab-header {
+    align-items: flex-start;
+}
+
+.settings-tab-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.settings-tab-actions .btn-tool,
+.settings-tab-actions .btn-tool-compact {
+    width: auto;
+}
+
 .selector-title {
     font-size: var(--font-size-caption);
     font-weight: var(--font-weight-secondary);
@@ -1645,11 +1891,11 @@ body::after {
 
 .session-source {
     font-size: var(--font-size-caption);
-    color: var(--color-brand);
-    border: 1px solid rgba(210, 107, 90, 0.25);
+    color: var(--color-text-tertiary);
+    border: 1px solid var(--color-border-soft);
     border-radius: 999px;
     padding: 2px 8px;
-    background: rgba(210, 107, 90, 0.08);
+    background: var(--color-surface-alt);
     white-space: nowrap;
 }
 
@@ -1670,6 +1916,12 @@ body::after {
     flex-shrink: 0;
 }
 
+.trash-list-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--spacing-sm);
+}
+
 .btn-session-export,
 .btn-session-open,
 .btn-session-clone,
@@ -1775,9 +2027,113 @@ body::after {
     box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
 }
 
+.trash-list {
+    display: grid;
+    gap: 12px;
+    margin-top: 12px;
+}
+
+.trash-item.session-item {
+    min-height: auto;
+    height: auto;
+    cursor: default;
+    content-visibility: visible;
+    contain-intrinsic-size: auto;
+}
+
+.trash-item.session-item:hover,
+.trash-item.session-item:active {
+    transform: none;
+    border-color: var(--color-border-soft);
+    background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.92) 100%);
+    box-shadow: var(--shadow-subtle);
+}
+
+.trash-item.session-item::before {
+    background: linear-gradient(180deg, rgba(70, 86, 110, 0.26), rgba(70, 86, 110, 0.08));
+}
+
+.trash-item-main {
+    min-width: 0;
+    flex: 1;
+}
+
+.trash-item-mainline {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.trash-item-title {
+    flex: 1;
+    font-size: var(--font-size-body);
+    font-weight: var(--font-weight-secondary);
+    color: var(--color-text-primary);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+}
+
+.trash-item-meta {
+    margin-top: 6px;
+}
+
+.trash-item-side {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+    flex-shrink: 0;
+    min-width: 132px;
+}
+
+.trash-item-actions {
+    display: flex;
+    align-self: flex-end;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.trash-item-time {
+    width: 100%;
+    text-align: right;
+    white-space: nowrap;
+    color: var(--color-text-tertiary);
+}
+
+.trash-item-path {
+    margin-top: 8px;
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr);
+    gap: 8px;
+    align-items: start;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
+
+.trash-item-label {
+    display: inline-block;
+    color: var(--color-text-secondary);
+    font-weight: var(--font-weight-secondary);
+}
+
+.trash-item-path span:last-child {
+    min-width: 0;
+    word-break: break-word;
+}
+
+.trash-item .session-count-badge {
+    margin-top: 2px;
+}
+
 .session-layout {
     display: grid;
-    grid-template-columns: minmax(215px, 295px) minmax(0, 1fr);
+    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
     gap: var(--spacing-sm);
     align-items: start;
     height: min(72vh, 760px);
@@ -1855,14 +2211,16 @@ body::after {
     border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-sm);
     background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.92) 100%);
-    padding: 14px 16px;
+    padding: 16px;
     cursor: pointer;
     transition: all var(--transition-fast) var(--ease-spring);
     user-select: none;
     min-width: 0;
     position: relative;
     overflow: hidden;
-    min-height: 88px;
+    min-height: 102px;
+    content-visibility: auto;
+    contain-intrinsic-size: 102px;
 }
 
 .session-item-header {
@@ -1909,6 +2267,16 @@ body::after {
     box-shadow: 0 6px 16px rgba(210, 107, 90, 0.12);
 }
 
+.session-item.pinned {
+    border-color: rgba(208, 88, 58, 0.42);
+    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.12) 0%, rgba(255, 251, 247, 0.98) 100%);
+    box-shadow: 0 8px 18px rgba(210, 107, 90, 0.10);
+}
+
+.session-item.pinned::before {
+    background: linear-gradient(180deg, rgba(201, 94, 75, 0.8), rgba(201, 94, 75, 0.32));
+}
+
 .session-item.active::before {
     background: linear-gradient(180deg, rgba(201, 94, 75, 0.9), rgba(201, 94, 75, 0.4));
 }
@@ -1917,13 +2285,14 @@ body::after {
     font-size: var(--font-size-body);
     font-weight: var(--font-weight-secondary);
     color: var(--color-text-primary);
-    line-height: 1.5;
-    display: block;
-    white-space: nowrap;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
     overflow: hidden;
-    text-overflow: ellipsis;
     flex: 1;
-    max-width: 75%;
+    max-width: none;
 }
 
 .session-item-actions {
@@ -1966,6 +2335,26 @@ body::after {
     height: 16px;
 }
 
+.session-item-pin {
+    border-color: rgba(208, 88, 58, 0.24);
+}
+
+.session-item-pin .pin-icon,
+.session-item-pin svg {
+    color: rgba(208, 88, 58, 0.78);
+}
+
+.session-item.pinned .session-item-pin {
+    background: rgba(208, 88, 58, 0.16);
+    border-color: rgba(208, 88, 58, 0.46);
+    box-shadow: inset 0 0 0 1px rgba(208, 88, 58, 0.08);
+}
+
+.session-item.pinned .session-item-pin .pin-icon,
+.session-item.pinned .session-item-pin svg {
+    color: var(--color-brand-dark);
+}
+
 .session-item-sub.session-item-snippet,
 .session-preview-meta,
 .session-preview-title {
@@ -2123,6 +2512,7 @@ body::after {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    contain: layout style;
 }
 
 .session-timeline {
@@ -2162,21 +2552,22 @@ body::after {
     transform: translate(-50%, -50%);
     cursor: pointer;
     padding: 0;
-    transition: transform var(--transition-fast) var(--ease-spring), background-color var(--transition-fast) var(--ease-spring), border-color var(--transition-fast) var(--ease-spring), box-shadow var(--transition-fast) var(--ease-spring);
+    transition: none;
+    will-change: auto;
 }
 
 .session-timeline-node:hover {
-    transform: translate(-50%, -50%) scale(1.2);
+    transform: translate(-50%, -50%);
     border-color: rgba(201, 94, 75, 0.85);
     background: rgba(255, 255, 255, 1);
-    box-shadow: 0 0 0 3px rgba(201, 94, 75, 0.15);
+    box-shadow: none;
 }
 
 .session-timeline-node.active {
-    transform: translate(-50%, -50%) scale(1.2);
+    transform: translate(-50%, -50%);
     border-color: rgba(201, 94, 75, 0.95);
     background: rgba(201, 94, 75, 0.95);
-    box-shadow: 0 0 0 3px rgba(201, 94, 75, 0.2);
+    box-shadow: none;
 }
 
 .session-timeline-current {
@@ -2200,6 +2591,7 @@ body::after {
     background: rgba(255, 255, 255, 0.75);
     position: relative;
     box-shadow: 0 2px 6px rgba(31, 26, 23, 0.04);
+    contain: layout style paint;
 }
 
 .session-msg.user {
@@ -2371,6 +2763,44 @@ body::after {
     .session-toolbar-group.session-toolbar-actions .btn-tool {
         width: 100%;
     }
+
+    .trash-item-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .trash-item-mainline {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+    }
+
+    .trash-item-side {
+        width: 100%;
+        min-width: 0;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .trash-item-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        justify-content: flex-start;
+        width: 100%;
+    }
+
+    .trash-item-actions .btn-mini {
+        width: 100%;
+        min-height: 40px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .trash-item-time {
+        text-align: right;
+    }
 }
 
 .btn[disabled] {
@@ -2454,6 +2884,22 @@ body::after {
     letter-spacing: -0.01em;
 }
 
+.confirm-dialog {
+    max-width: 460px;
+}
+
+.confirm-dialog-message {
+    font-size: var(--font-size-body);
+    line-height: 1.7;
+    color: var(--color-text-secondary);
+    white-space: pre-wrap;
+}
+
+.confirm-dialog-actions {
+    margin-top: var(--spacing-lg);
+    justify-content: flex-end;
+}
+
 .install-list {
     display: flex;
     flex-direction: column;
@@ -2665,6 +3111,119 @@ body::after {
     line-height: 1.4;
 }
 
+
+.agents-diff-hint {
+    margin-top: 6px;
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-caption);
+}
+
+.agents-diff-save-alert {
+    margin-bottom: 8px;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm);
+    border: 1px solid rgba(238, 178, 90, 0.45);
+    background: rgba(255, 236, 204, 0.72);
+    color: #8d5b31;
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-secondary);
+}
+
+.agents-diff-summary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+}
+
+.agents-diff-stat {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-weight: var(--font-weight-secondary);
+}
+
+.agents-diff-stat.add {
+    color: #2b6a3b;
+    background: rgba(57, 181, 97, 0.12);
+    border-color: rgba(57, 181, 97, 0.2);
+}
+
+.agents-diff-stat.del {
+    color: #8a2f36;
+    background: rgba(220, 95, 108, 0.12);
+    border-color: rgba(220, 95, 108, 0.2);
+}
+
+
+.agents-diff-empty {
+    padding: 10px 12px;
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    border: 1px dashed var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.6);
+}
+
+.agents-diff-view {
+    border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.7);
+    font-family: var(--font-family-mono);
+    font-size: 12px;
+    line-height: 1.55;
+    max-height: min(32vh, 280px);
+    overflow: auto;
+}
+
+
+.agents-diff-editor {
+    min-height: min(60vh, 520px);
+    max-height: min(65vh, 620px);
+}
+
+.agents-diff-line {
+    display: grid;
+    grid-template-columns: 16px 1fr;
+    gap: 8px;
+    padding: 2px 10px;
+    align-items: start;
+}
+
+.agents-diff-line + .agents-diff-line {
+    border-top: none;
+}
+
+.agents-diff-line.add {
+    background: rgba(57, 181, 97, 0.08);
+}
+
+.agents-diff-line.del {
+    background: rgba(220, 95, 108, 0.1);
+}
+
+.agents-diff-line.context {
+    background: transparent;
+}
+
+
+.agents-diff-line-sign {
+    text-align: center;
+    color: var(--color-text-tertiary);
+    min-height: 20px;
+}
+
+.agents-diff-line-text {
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: var(--color-text-primary);
+}
+
 .form-input:disabled,
 .form-input[readonly] {
     background: linear-gradient(to right, var(--color-bg) 0%, rgba(247, 241, 232, 0.5) 100%);
@@ -3649,6 +4208,21 @@ textarea:focus-visible {
 }
 
 @media (max-width: 540px) {
+    .session-item-copy.session-item-pin {
+        width: 44px;
+        height: 44px;
+        min-width: 44px;
+        min-height: 44px;
+        padding: 10px;
+        transform: none;
+    }
+
+    .session-item-copy.session-item-pin svg,
+    .session-item-copy.session-item-pin .pin-icon {
+        width: 16px;
+        height: 16px;
+    }
+
     body {
         padding: var(--spacing-md) var(--spacing-sm);
     }
@@ -3708,6 +4282,7 @@ textarea:focus-visible {
     .session-item {
         min-height: 75px;
         height: 75px;
+        contain-intrinsic-size: 75px;
         padding: 12px 14px;
     }
 
@@ -3758,6 +4333,79 @@ textarea:focus-visible {
         align-items: center;
     }
 
+    .trash-item.session-item {
+        min-height: auto;
+        height: auto;
+        contain-intrinsic-size: auto;
+    }
+
+    .trash-item-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .trash-item-mainline {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+    }
+
+    .trash-item-side {
+        width: 100%;
+        min-width: 0;
+        align-items: stretch;
+        gap: 10px;
+        padding-top: 8px;
+        border-top: 1px dashed rgba(216, 201, 184, 0.55);
+    }
+
+    .trash-item-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        justify-content: flex-start;
+        width: 100%;
+    }
+
+    .trash-item-actions .btn-mini {
+        width: 100%;
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .trash-item .session-count-badge {
+        align-self: flex-start;
+        margin-top: 0;
+    }
+
+    .trash-item-title {
+        -webkit-line-clamp: 3;
+        max-height: none;
+        white-space: normal;
+        text-overflow: clip;
+        overflow: hidden;
+    }
+
+    .trash-item-meta {
+        margin-top: 6px;
+        margin-bottom: 0;
+        gap: 6px;
+        align-items: center;
+    }
+
+    .trash-item-time {
+        padding-top: 2px;
+        line-height: 1.35;
+        text-align: right;
+    }
+
+    .trash-item-path {
+        grid-template-columns: 1fr;
+        gap: 4px;
+    }
+
     .card {
         padding: 8px;
     }