完善客户端模块与工作区能力

src/styles/globals.css

@@ -310,14 +310,6 @@ html[data-ui-language='ru'] {
   box-shadow: 0 0 0 3px hsl(var(--brand) / 0.12);
 }
 
-/* Keep long completed transcripts cheap to paint while the active response
- * continues to stream. Chromium can skip off-screen message subtrees without
- * changing their scroll geometry. */
-.chat-transcript-message {
-  content-visibility: auto;
-  contain-intrinsic-size: 0 160px;
-}
-
 .motion-press {
   transition-property: background-color, border-color, color, box-shadow, opacity, transform;
   transition-duration: 220ms;
@@ -397,10 +389,11 @@ html[data-ui-language='ru'] {
 
 .agent-session-disclosure {
   --disclosure-duration: 160ms;
+  contain: layout paint;
 }
 
 .agent-session-disclosure[data-state='open'] {
-  --disclosure-duration: 220ms;
+  --disclosure-duration: 180ms;
 }
 
 .codex-browser-drawer {
@@ -458,21 +451,41 @@ html[data-ui-language='ru'] {
   position: relative;
   z-index: 0;
   overflow: visible;
+  height: clamp(7rem, 11vw, 8.5rem);
+  min-width: 0;
+}
+
+/* The module chooser uses a single vertical rail so each horizontal card has
+ * enough room for its image and description. The bounded width keeps the
+ * list readable on large windows while the card width follows the viewport. */
+.module-selection-options {
+  --module-option-gap: clamp(0.625rem, 1.5vw, 1.25rem);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--module-option-gap);
+  width: min(100%, 43rem);
+  min-width: 0;
+  justify-self: center;
+  align-items: stretch;
 }
 
 .module-option-card-surface {
+  display: flex;
+  min-height: 100%;
+  flex-direction: row;
+  align-items: stretch;
   border: 1px solid hsl(var(--border) / 0.75);
   box-shadow: 0 1px 2px hsl(220 20% 16% / 0.035), 0 12px 30px hsl(220 20% 16% / 0.045);
 }
 
 .module-option-card::before {
   position: absolute;
-  inset: 0;
-  left: -5px;
+  top: -1%;
+  left: -1%;
   z-index: -10;
   content: '';
-  width: 200px;
-  height: 264px;
+  width: 102%;
+  height: 102%;
   margin: auto;
   border-radius: 10px;
   background: linear-gradient(-45deg, hsl(var(--brand)) 0%, hsl(var(--brand-blue)) 100%);
@@ -496,6 +509,56 @@ html[data-ui-language='ru'] {
   filter: blur(30px);
 }
 
+.module-option-card-image {
+  width: clamp(7rem, 22%, 10rem);
+  height: 100%;
+  flex: 0 0 clamp(7rem, 22%, 10rem);
+  overflow: hidden;
+}
+
+.module-option-card-image-media {
+  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.module-option-card-content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(0.75rem, 1.6vw, 1.25rem);
+  padding-right: clamp(2.75rem, 5vw, 4rem);
+}
+
+.module-option-card-title {
+  font-size: clamp(1rem, 1.8vw, 1.35rem);
+  line-height: 1.25;
+}
+
+.module-option-card-description {
+  margin-top: clamp(0.375rem, 0.7vw, 0.625rem);
+  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
+  line-height: clamp(1.1rem, 1.5vw, 1.5rem);
+}
+
+.module-option-card-status {
+  margin-top: clamp(0.375rem, 0.7vw, 0.625rem);
+  font-size: clamp(0.625rem, 0.75vw, 0.75rem);
+  line-height: 1.25;
+}
+
+.module-option-card-arrow {
+  top: clamp(0.5rem, 1vw, 0.75rem);
+  right: clamp(0.5rem, 1vw, 0.75rem);
+  width: clamp(1.75rem, 2.8vw, 2rem);
+  height: clamp(1.75rem, 2.8vw, 2rem);
+}
+
+.module-option-card-arrow-icon {
+  width: clamp(1rem, 1.8vw, 1.25rem);
+  height: clamp(1rem, 1.8vw, 1.25rem);
+}
+
 .module-option-card.module-option-card-disabled::before,
 .module-option-card.module-option-card-disabled::after {
   background: hsl(var(--muted-foreground) / 0.28);
@@ -514,7 +577,17 @@ html[data-ui-language='ru'] {
 
 .module-option-card:hover::before,
 .module-option-card:focus-visible::before {
-  transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
+  transform: rotate(-1deg) scaleX(1.01) scaleY(1.04);
+}
+
+.module-option-card:hover .module-option-card-image-media,
+.module-option-card:focus-visible .module-option-card-image-media {
+  transform: scale(1.04);
+}
+
+.module-option-card:disabled:hover .module-option-card-image-media,
+.module-option-card:disabled:focus-visible .module-option-card-image-media {
+  transform: none;
 }
 
 .brand-spark {
@@ -570,6 +643,14 @@ html[data-ui-language='ru'] {
   margin-bottom: 0.5em;
 }
 
+/* Keep ordinary conversation copy aligned across Code and Canvas. Markdown
+ * headings, emphasis, and tables can still provide their own hierarchy. */
+.chat-message-body {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+
 .chat-assistant-message-markdown > :first-child {
   margin-top: 0;
 }