fraim-framework 2.0.146 → 2.0.147

package/public/ai-hub/styles.css

@@ -1,19 +1,19 @@
-:root {
-  color-scheme: light;
-  --bg: #f4f6f2;
-  --surface: #ffffff;
-  --soft: #f7faf6;
-  --line: #e3e8df;
-  --text: #1f2a24;
-  --muted: #6b7a72;
-  --accent: #3d8a6e;
-  --accent-strong: #2f7359;
-  --accent-soft: #eaf3ee;
-  --warn: #b08442;
-  --warn-soft: #fffaf0;
-  --danger: #a24747;
-  --shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
-  --shadow-lg: 0 12px 36px rgba(20, 40, 30, 0.18);
+:root {
+  color-scheme: light;
+  --bg: #ebe4d7;
+  --surface: #f8f4eb;
+  --soft: #f1ebde;
+  --line: #d7cdbf;
+  --text: #231e17;
+  --muted: #7c6f61;
+  --accent: #1f437d;
+  --accent-strong: #16345f;
+  --accent-soft: #dfe7f5;
+  --warn: #b08442;
+  --warn-soft: #fffaf0;
+  --danger: #a24747;
+  --shadow: 0 1px 2px rgba(35, 30, 23, 0.05);
+  --shadow-lg: 0 18px 48px rgba(35, 30, 23, 0.16);
   /* Issue #347 — picker group dots. Decorative only; the picker uses
      these to scan groups by color without adding semantic weight. Kept
      as variables so future themes flow through here. */
@@ -26,10 +26,12 @@ html, body { margin: 0; padding: 0; }
 [hidden] { display: none !important; }
 
 html, body { height: 100%; }
-body {
-  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  color: var(--text);
-  background: var(--bg);
+body {
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%),
+    linear-gradient(180deg, #efe8dc 0%, var(--bg) 100%);
   line-height: 1.5;
   font-size: 15px;
   /* Issue #339 fix: bound the page to the viewport. The conversation
@@ -39,9 +41,10 @@ body {
 
 button { font: inherit; cursor: pointer; }
 
-.page {
-  max-width: 1080px;
-  margin: 0 auto;
+.page {
+  max-width: none;
+  width: 100%;
+  margin: 0;
   padding: 24px;
   display: flex;
   flex-direction: column;
@@ -51,26 +54,38 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* Header */
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-.header h1 {
-  font-size: 22px;
-  font-weight: 600;
-  margin: 0;
-  letter-spacing: -0.01em;
-}
-.project-button {
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.header-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.header-eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.header h1 {
+  font-size: 34px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.03em;
+}
+.project-button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 8px 14px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px 16px;
   color: var(--text);
   box-shadow: var(--shadow);
   max-width: 360px;
@@ -86,11 +101,11 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* Welcome line */
-.welcome {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 18px 24px;
+.welcome {
+  background: rgba(248, 244, 235, 0.86);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  padding: 20px 24px;
   box-shadow: var(--shadow);
   font-size: 15px;
   line-height: 1.7;
@@ -182,72 +197,94 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* Layout */
-.layout {
-  display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
-  gap: 20px;
-  align-items: stretch;
-  flex: 1;
-  min-height: 0;
-}
+.layout {
+  display: grid;
+  grid-template-columns: 326px minmax(0, 1fr);
+  gap: 20px;
+  align-items: stretch;
+  flex: 1;
+  min-height: 0;
+}
 
 /* Left rail */
-.rail {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-auto-rows: min-content;
-  gap: 8px;
-  min-width: 0;
-  align-self: start;
-  max-height: 100%;
-  overflow-y: auto;
-}
-.new-conv {
-  width: 100%;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 10px;
-  padding: 10px 14px;
-  font-weight: 600;
-  box-shadow: var(--shadow);
-}
-.new-conv:hover { background: var(--accent-strong); }
-.new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
-.conv-list {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 4px;
-  margin-top: 4px;
-  min-width: 0;
-}
-.conv-item {
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 8px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  color: var(--text);
-}
-.conv-item:hover { background: var(--soft); }
-.conv-item.active {
-  background: var(--surface);
-  border-color: var(--line);
-  box-shadow: var(--shadow);
-}
+.rail {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: min-content;
+  gap: 14px;
+  min-width: 0;
+  align-self: start;
+  max-height: 100%;
+  overflow-y: auto;
+  border-radius: 28px;
+  background: rgba(248, 244, 235, 0.84);
+  box-shadow: var(--shadow);
+}
+.new-conv {
+  width: 100%;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 14px;
+  padding: 13px 16px;
+  font-weight: 600;
+  box-shadow: var(--shadow);
+}
+.rail-note {
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+.rail-section {
+  display: grid;
+  gap: 10px;
+}
+.rail-section-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 0 2px;
+}
+.new-conv:hover { background: var(--accent-strong); }
+.new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
+.conv-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 0;
+  min-width: 0;
+}
+.conv-item {
+  width: 100%;
+  text-align: left;
+  background: rgba(255, 255, 255, 0.44);
+  border: 1px solid rgba(31, 67, 125, 0.08);
+  border-radius: 22px;
+  padding: 14px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--text);
+  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
+}
+.conv-item:hover { background: var(--soft); }
+.conv-item.active {
+  background: rgba(229, 236, 248, 0.92);
+  border-color: rgba(31, 67, 125, 0.2);
+  box-shadow: 0 14px 28px rgba(31, 67, 125, 0.12);
+}
 /* Text column: stacks persona name label above job title */
-.conv-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
+.conv-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 .conv-persona-name {
   font-size: 10px;
   font-weight: 700;
@@ -258,15 +295,24 @@ button { font: inherit; cursor: pointer; }
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.conv-title { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.conv-title {
+  font-size: 17px;
+  font-weight: 700;
+  min-width: 0;
+  line-height: 1.3;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 /* Persona avatar chip — enlarged to 34px to serve as a clear visual anchor */
-.conv-persona-chip {
-  flex-shrink: 0;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: var(--accent-soft);
-  border: 1.5px solid var(--accent);
+.conv-persona-chip {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  background: #ffffff;
+  border: 2px solid rgba(31, 67, 125, 0.14);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -277,26 +323,28 @@ button { font: inherit; cursor: pointer; }
   line-height: 1;
   text-transform: uppercase;
 }
-.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
 .conv-persona-chip--free { background: transparent; border-color: var(--line); color: var(--muted); }
-.conv-status {
-  font-size: 11px;
-  color: var(--muted);
-  font-weight: 500;
-  flex-shrink: 0;
-}
+.conv-status {
+  font-size: 11px;
+  color: var(--muted);
+  font-weight: 500;
+  flex-shrink: 0;
+  white-space: nowrap;
+  padding-top: 4px;
+}
 .conv-status.running { color: var(--accent); }
 .conv-status.attention { color: var(--warn); }
 .conv-status.failed { color: var(--danger); }
 
 /* Conversation pane — fills the layout column vertically. Inner regions
    manage their own height; the .messages list is the only scrollable area. */
-.conversation {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  box-shadow: var(--shadow);
-  padding: 18px 20px;
+.conversation {
+  background: rgba(248, 244, 235, 0.94);
+  border: 1px solid var(--line);
+  border-radius: 30px;
+  box-shadow: var(--shadow-lg);
+  padding: 24px 26px;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -305,44 +353,143 @@ button { font: inherit; cursor: pointer; }
   height: 100%;
   overflow: hidden;
 }
-.empty-state {
-  display: grid;
-  gap: 8px;
-  place-items: center;
-  text-align: center;
-  color: var(--muted);
-  padding: 80px 16px;
-}
-.empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; }
+.empty-state {
+  display: grid;
+  gap: 8px;
+  place-items: center;
+  text-align: center;
+  color: var(--muted);
+  padding: 80px 16px;
+}
+.empty-state::before {
+  content: "F";
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-weight: 700;
+  font-size: 24px;
+}
+.empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; }
 .empty-state p { margin: 0; max-width: 320px; }
 
-#active-conv {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-width: 0;
-  flex: 1;
-  min-height: 0;
-}
-
-.conv-header,
-.coach,
-.micro,
-.progress {
-  flex-shrink: 0;
-}
-.conv-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  column-gap: 12px;
-  row-gap: 4px;
-}
-.conv-header h2 { flex: 1 1 auto; min-width: 0; }
-#artifact-slot { flex: 0 0 auto; }
-
-.conv-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
-.conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
+#active-conv {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  flex: 1;
+  min-height: 0;
+}
+
+.conv-header,
+.coach,
+.micro,
+.progress {
+  flex-shrink: 0;
+}
+.conv-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.employee-identity {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.identity-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px solid rgba(31, 67, 125, 0.14);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  flex-shrink: 0;
+}
+.identity-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.identity-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.identity-copy strong {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+.identity-copy small {
+  font-size: 13px;
+  color: var(--muted);
+}
+.run-state-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 12px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: rgba(31, 67, 125, 0.1);
+  color: var(--accent-strong);
+}
+.run-state-pill.running {
+  background: rgba(31, 67, 125, 0.14);
+}
+.run-state-pill.failed {
+  background: #fbebeb;
+  color: var(--danger);
+}
+.run-state-pill.completed {
+  background: #e4f0ea;
+  color: #2c6b4e;
+}
+.conv-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 12px;
+  row-gap: 4px;
+}
+.title-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.conv-header h2 { flex: 1 1 auto; min-width: 0; }
+#artifact-slot { flex: 0 0 auto; }
+
+.conv-header h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
+.conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
+.summary-strip {
+  background: rgba(255, 255, 255, 0.56);
+  border: 1px solid rgba(31, 67, 125, 0.08);
+  border-radius: 18px;
+  padding: 14px 16px;
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.55;
+}
 
 .section-title {
   font-size: 13px;
@@ -377,11 +524,11 @@ button { font: inherit; cursor: pointer; }
 
 /* Progress is now a single-line status strip (was a tall card) so the
    messages region gets the vertical space it needs. */
-.progress {
-  background: var(--soft);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 8px 12px;
+.progress {
+  background: rgba(255, 255, 255, 0.46);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 12px;
   font-size: 13px;
   display: flex;
   align-items: center;
@@ -414,55 +561,147 @@ button { font: inherit; cursor: pointer; }
 }
 .progress.done .stage::before { background: #6cb39a; animation: none; }
 .progress.attention .stage::before { background: var(--warn); animation: none; }
-.progress.failed .stage::before { background: var(--danger); animation: none; }
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(0.8); }
-}
-
-.messages {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 10px;
-  margin-top: 12px;
-  min-width: 0;
-  /* Scroll messages here, not the page. */
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-.message { word-wrap: break-word; overflow-wrap: anywhere; }
-.message {
-  border-radius: 10px;
-  padding: 10px 14px;
-  font-size: 14px;
-  line-height: 1.5;
-  animation: slidein 280ms ease;
-}
-@keyframes slidein {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.message.manager {
-  background: var(--accent-soft);
-  border: 1px solid #c5dcd0;
-  color: var(--text);
-}
-.message.employee {
-  background: var(--soft);
-  border: 1px solid var(--line);
-  color: var(--text);
-}
-.message .who {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted);
-  display: block;
-  margin-bottom: 4px;
-}
+.progress.failed .stage::before { background: var(--danger); animation: none; }
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+.thread-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 280px;
+  flex: 1;
+  padding: 18px 18px 16px;
+  border-radius: 28px;
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.5)),
+    radial-gradient(circle at top left, rgba(31, 67, 125, 0.06), transparent 34%);
+}
+
+.thread-surface-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.messages {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 24px;
+  margin-top: 0;
+  min-width: 0;
+  /* Scroll messages here, not the page. */
+  flex: 1;
+  min-height: 180px;
+  overflow-y: auto;
+  padding: 8px 8px 8px 2px;
+  scroll-behavior: smooth;
+}
+.message {
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  width: 100%;
+  display: grid;
+  gap: 10px;
+  animation: slidein 280ms ease;
+}
+@keyframes slidein {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.message.manager {
+  justify-items: end;
+  padding-left: 24%;
+}
+.message.employee {
+  justify-items: start;
+  padding-right: 24%;
+}
+.message.system {
+  justify-items: stretch;
+  padding-right: 16%;
+}
+.message-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.message.manager .message-meta {
+  justify-content: flex-end;
+}
+.message-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid rgba(31, 67, 125, 0.1);
+}
+.message-avatar.manager {
+  background: rgba(31, 67, 125, 0.12);
+  color: var(--accent-strong);
+}
+.message-avatar.employee {
+  background: #ffffff;
+  color: var(--accent-strong);
+}
+.message-avatar.system {
+  background: rgba(35, 30, 23, 0.08);
+  color: var(--muted);
+}
+.message-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.message .who {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+.message .lane-label {
+  font-size: 11px;
+  color: var(--muted);
+  opacity: 0.88;
+}
+.transport-raw {
+  display: none;
+}
+.bubble {
+  border-radius: 26px;
+  padding: 16px 18px;
+  font-size: 14px;
+  line-height: 1.6;
+  box-shadow: 0 12px 26px rgba(35, 30, 23, 0.05);
+  max-width: min(760px, 100%);
+}
+.message.manager .bubble {
+  background: var(--accent);
+  color: #fff;
+}
+.message.employee .bubble {
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  color: var(--text);
+}
+.message.system .bubble {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(35, 30, 23, 0.08);
+  color: var(--text);
+}
 
 /* Inline artifact pill that sits in the .conv-header next to the title.
    Compact so it never crowds Coach or Micro-manage. Hover reveals the
@@ -504,20 +743,26 @@ button { font: inherit; cursor: pointer; }
 }
 .artifact-where { display: none; }   /* full path lives in tooltip via title attr */
 
-.coach textarea {
-  width: 100%;
-  min-height: 56px;
-  max-height: 30vh;
-  resize: vertical;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 14px;
-  font: inherit;
-  color: var(--text);
-  background: var(--surface);
-}
-.coach textarea:focus { outline: none; border-color: var(--accent); }
-.coach-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
+.coach textarea {
+  width: 100%;
+  min-height: 56px;
+  max-height: 30vh;
+  resize: vertical;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  padding: 13px 15px;
+  font: inherit;
+  color: var(--text);
+  background: var(--surface);
+}
+.coach textarea:focus { outline: none; border-color: var(--accent); }
+.coach-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
+.coach-note {
+  margin-top: 10px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
 .send-button {
   background: var(--accent);
   color: #fff;
@@ -743,7 +988,7 @@ button { font: inherit; cursor: pointer; }
 .install-status { color: var(--muted); flex: 1; font-size: 12px; }
 button.small { padding: 4px 10px; font-size: 12px; }
 
-@media (max-width: 820px) {
+@media (max-width: 820px) {
   /* Single-column reflow — the rigid 100vh layout doesn't make sense at
      mobile width because the rail stacks above the conversation. Let the
      page scroll naturally and bound the messages section to keep the
@@ -755,11 +1000,27 @@ button.small { padding: 4px 10px; font-size: 12px; }
   .rail { max-height: none; overflow-y: visible; }
   .conversation { height: auto; min-height: 60vh; overflow: visible; }
   #active-conv { flex: initial; }
-  .conv-stream { flex: initial; }
-  .messages { flex: initial; max-height: 60vh; }
-  .header { flex-wrap: wrap; }
-  .popover { width: min(320px, calc(100vw - 60px)); }
-}
+  .conv-stream { flex: initial; }
+  .messages { flex: initial; max-height: 60vh; }
+  .header { flex-wrap: wrap; }
+  .conv-topline { align-items: flex-start; flex-direction: column; }
+  .conv-header h2 { font-size: 28px; }
+  .thread-surface {
+    padding: 16px 14px 14px;
+  }
+  .message,
+  .message.manager,
+  .message.employee,
+  .message.system {
+    max-width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .team-roster {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+  .popover { width: min(320px, calc(100vw - 60px)); }
+}
 
 /* ---------------------------------------------------------------- */
 /* Issue #347 — Pizza tracker (R1), template picker (R2), totals (R4) */
@@ -955,31 +1216,67 @@ button.small { padding: 4px 10px; font-size: 12px; }
 /* ── Issue #385: Team roster, Employee selector, Lock badges, Hire notice ── */
 
 /* Team roster — horizontal chip row above conv list */
-.team-roster {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px 4px;
-  flex-wrap: wrap;
-}
-.roster-chip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--accent-soft);
-  border: 2px solid var(--line);
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--accent-strong);
-  cursor: pointer;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.roster-chip.active { border-color: var(--accent); }
-.roster-chip img { width: 100%; height: 100%; object-fit: cover; }
+.team-roster {
+  display: grid;
+  gap: 10px;
+}
+.roster-chip {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 74px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  font-size: 12px;
+  color: var(--text);
+  cursor: pointer;
+  overflow: hidden;
+  padding: 12px 14px;
+  text-align: left;
+  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
+}
+.roster-chip.active {
+  border-color: rgba(31, 67, 125, 0.22);
+  background: rgba(223, 231, 245, 0.92);
+  box-shadow: 0 14px 28px rgba(31, 67, 125, 0.1);
+}
+.roster-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  color: var(--accent-strong);
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid rgba(31, 67, 125, 0.1);
+  overflow: hidden;
+}
+.roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.roster-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.roster-copy strong {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.25;
+}
+.roster-copy small {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+.roster-chip--all .roster-avatar {
+  background: var(--accent-soft);
+}
 .roster-chip-add {
   width: 36px;
   height: 36px;