aimeat 1.40.1 → 2.1.0

package/dist/public/css/views/inbox.css

@@ -5,6 +5,28 @@
  *   ticks, and a sticky composer. All colors/spacing use theme.css variables (dark-mode safe).
  *   Classes are `inbox-` prefixed. NOTE: this file must be linked in spa.html (useViewCSS is a no-op).
  * @version-history
+ *   v1.7.0 -- 2026-07-21 -- Link-preview (unfurl) cards under a pasted link (.inbox-linkcard*) + the
+ *     thread-head show/hide toggle (.inbox-linkprev-toggle).
+ *   v1.6.0 -- 2026-07-18 -- TRUE full-screen mobile chat: ≤760px open panel becomes `position:fixed;inset:0`
+ *     over the whole viewport (covers the app shell nav/menu/breadcrumb); body height var(--inbox-avail,
+ *     100dvh) + safe-area padding under the composer. ← Back drops `.inbox--panel` → shell returns. Pairs
+ *     with spa.html viewport interactive-widget=resizes-content + viewport-fit=cover.
+ *   v1.5.0 -- 2026-07-18 -- Fix the keyboard dead-gap + heavy composer: ≤760px open-panel body height now
+ *     uses measured `--inbox-avail` (body-top→visual-viewport-bottom) instead of the `dvh − keyboard`
+ *     double-count that collapsed the pane on Android Chrome; new `.inbox-textarea--chat` = the mobile
+ *     single-line auto-growing composer (no Toast UI toolbar). Drops the stale `--inbox-kb` var.
+ *   v1.4.0 -- 2026-07-18 -- Mobile space reclaim: when a thread/compose panel is open (`.inbox--panel`),
+ *     ≤760px hides the section header (title/desc/actions) and grows the body to ~full viewport; wider
+ *     bubbles (85%), tighter message/composer padding, and the "Reply with AI" pill collapses to its ✨
+ *     icon. Thread header id-block flexes so action buttons align right.
+ *   v1.3.0 -- 2026-07-17 -- Reply-to quotes (`.inbox-bubble-quote`, `.inbox-replybar`, `.inbox-row--flash`)
+ *     + mobile keyboard: ≤760px height subtracts --inbox-kb (visualViewport keyboard inset set by the tab)
+ *     and the stale `.inbox-msgs{max-height:50vh}` cap from the pre-single-pane stacked layout is removed.
+ *     Bubble hover actions float as a bordered pill above the bubble's corner instead of over the text.
+ *   v1.3.1 -- 2026-07-17 -- Composer file chips align a ✕ remove button (inline-flex + gap).
+ *   v1.2.0 -- 2026-07-17 -- Mobile single-pane: ≤760px shows one pane at a time (list, or an open
+ *     thread/composer full-width with a ← Back button) instead of a list stacked above a squeezed
+ *     thread. Adds `.inbox-back` + `.inbox-body--panel` rules; desktop two-pane unchanged.
  *   v1.1.0 -- 2026-06-16 -- Full messenger redesign (avatars, bubbles, ticks, date dividers, sticky composer).
  *   v1.0.0 -- 2026-06-16 -- Initial creation for user-to-user messaging (layer 5).
  */
@@ -30,8 +52,64 @@
   overflow: hidden;
   background: var(--card-bg);
 }
+/* mobile-only back button (single-pane switching); hidden on the desktop two-pane layout */
+.inbox-back {
+  display: none;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 11px 12px;
+  border: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--card-bg);
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
 @media (max-width: 760px) {
-  .inbox-body { grid-template-columns: 1fr; height: auto; min-height: 0; }
+  /* single-pane: one column, tall enough to read a thread; the open pane fills it. */
+  .inbox-body { grid-template-columns: 1fr; height: calc(100dvh - 168px); min-height: 240px; }
+  /* no panel open → show the list full-height, hide the idle placeholder */
+  .inbox-body:not(.inbox-body--panel) .inbox-panel { display: none; }
+  .inbox-body:not(.inbox-body--panel) .inbox-list { height: 100%; }
+  /* a panel is open → hide the list, reveal the back button, let the panel own the screen */
+  .inbox-body--panel { grid-template-rows: auto minmax(0, 1fr); }
+  .inbox-body--panel .inbox-list { display: none; }
+  .inbox-body--panel .inbox-back { display: inline-flex; }
+
+  /* FULL-SCREEN mobile chat: when a thread/compose panel is open, lift the whole messenger OUT of the
+     profile shell and pin it over the ENTIRE viewport — the app bar, ☰ Menu, bell, Logout pill and the
+     "Messages" breadcrumb all live in the shell above and are simply covered. ← Back closes the panel
+     (mode → 'idle'), which drops `.inbox--panel` and reveals the app + menus again, exactly as before.
+     z 1000 sits above the app nav but below the inbox's own 1200 modals (mdviewer / AI popover). Fixed
+     inset:0 is the same pattern those modals already use, so no transformed-ancestor surprises. */
+  .inbox--panel { position: fixed; inset: 0; z-index: 1000; gap: 0; margin: 0; background: var(--bg, var(--card-bg)); }
+  /* Lock the shell behind the full-screen chat so it can't scroll under it (and drop its scrollbar so the
+     overlay is truly edge-to-edge). Also hide the app's sticky top nav — it lives in a HIGHER stacking
+     context than the profile subtree, so the overlay's z-index can't cover it; the chat has its own ←
+     Back, and closing the thread (mode→idle) drops `.inbox--panel` and the nav returns. :has on body is
+     supported by every browser that ships the modern viewport units this layout already needs. */
+  body:has(.inbox--panel) { overflow: hidden; }
+  body:has(.inbox--panel) .topnav { display: none; }
+  .inbox--panel .inbox-head { display: none; }
+  /* --inbox-avail = measured visual-viewport height (set by the tab's useMobileComposerKeyboard). With the
+     viewport meta's interactive-widget=resizes-content, 100dvh already tracks the keyboard, so it's the
+     fallback; either way the composer sits right on the keyboard with the thread filling the rest. */
+  .inbox--panel .inbox-body { height: var(--inbox-avail, 100dvh); border: none; border-radius: 0; }
+  /* Home-indicator / gesture-bar clearance under the composer. */
+  .inbox--panel .inbox-composer { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
+
+  /* Use the narrow screen: wider bubbles, tighter message padding, a compact thread header. */
+  .inbox-msgs { padding: 12px 10px; }
+  .inbox-bubble { max-width: 85%; }
+  .inbox-thread-head { padding: 10px 12px; gap: 8px; }
+  .inbox-composer { padding: 8px 10px; }
+  .inbox-compose-fields { padding: 10px 10px 0; }
+  /* Collapse the "Reply with AI" button to just its ✨ icon so it never crowds the thread header. */
+  .inbox-ai-btn .inbox-ai-btn-label { display: none; }
 }
 
 /* ── Avatars ── */
@@ -54,7 +132,7 @@
   gap: 4px;
   min-width: 0;
 }
-@media (max-width: 760px) { .inbox-list { border-right: none; border-bottom: 1px solid var(--border-subtle); max-height: 320px; } }
+@media (max-width: 760px) { .inbox-list { border-right: none; } }
 
 .inbox-list-section {
   display: flex;
@@ -185,7 +263,9 @@
   border-bottom: 1px solid var(--border-subtle);
   flex: none;
 }
-.inbox-thread-id { min-width: 0; }
+.inbox-thread-id { min-width: 0; flex: 1; }
+/* The "Reply with AI" pill in the thread header stays on one line (icon + label). */
+.inbox-ai-btn { flex: none; white-space: nowrap; }
 
 /* Message scroll area. */
 .inbox-msgs {
@@ -198,7 +278,6 @@
   gap: 8px;
   background: var(--bg, transparent);
 }
-@media (max-width: 760px) { .inbox-msgs { max-height: 50vh; } }
 
 /* Date divider. */
 .inbox-day { text-align: center; margin: 8px 0; }
@@ -228,6 +307,26 @@
 .inbox-bubble-body .md-body > :last-child { margin-bottom: 0; }
 .inbox-bubble-body img { max-width: 100%; border-radius: var(--radius-xs); margin-top: 6px; }
 
+/* Reply-to quote at the top of a bubble — click jumps to (and flashes) the quoted original. */
+.inbox-bubble-quote {
+  display: block; width: 100%; text-align: left; cursor: pointer;
+  border: none; border-left: 3px solid var(--accent);
+  border-radius: var(--radius-xs);
+  background: var(--bg-dim);
+  padding: 5px 9px; margin-bottom: 6px;
+  font: inherit; color: inherit;
+}
+.inbox-quote-name { display: block; font-size: 11px; font-weight: 600; color: var(--accent); }
+.inbox-quote-text {
+  font-size: 12px; color: var(--text-dim);
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.inbox-row--flash .inbox-bubble {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+  transition: box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
 .inbox-bubble-meta {
   display: flex;
   align-items: center;
@@ -330,6 +429,25 @@
 .inbox-ai-actions { display: flex; justify-content: flex-end; }
 
 /* ── Composer ── */
+/* "Replying to …" bar shown above the composer while a quoted reply (↩) is being written. */
+.inbox-replybar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--card-bg-alt);
+}
+.inbox-replybar-main {
+  flex: 1; min-width: 0; text-align: left; cursor: pointer;
+  border: none; border-left: 3px solid var(--accent);
+  background: transparent; padding: 2px 0 2px 8px;
+  font: inherit; color: inherit;
+}
+.inbox-replybar-label { display: block; font-size: 11px; font-weight: 600; color: var(--accent); }
+.inbox-replybar-text {
+  display: block; font-size: 12px; color: var(--text-dim);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
 .inbox-compose-fields { padding: 12px 12px 0; }
 .inbox-composer {
   border-top: 1px solid var(--border-subtle);
@@ -351,6 +469,8 @@
   color: inherit;
 }
 .inbox-textarea { resize: vertical; min-height: 42px; }
+/* Mobile chat input: a single auto-growing line (JS sets height up to a cap), no manual resize handle. */
+.inbox-textarea--chat { resize: none; min-height: 40px; max-height: 132px; line-height: 1.4; overflow-y: auto; }
 .inbox-input:focus, .inbox-textarea:focus { outline: none; border-color: var(--border-focus); }
 
 /* Toast UI editor host + markdown fallback. */
@@ -367,7 +487,14 @@
   font-size: 14px;
 }
 
+/* Expanded composer (the ⤢ toggle): grow the fallback/simple textarea + preview to ~60vh so a long or
+   formatted draft is fully visible. The rich Toast UI editor is resized in JS via setHeight instead. */
+.inbox-composer--tall .inbox-textarea { min-height: 60vh; }
+.inbox-composer--tall .inbox-textarea--chat { max-height: 60vh; }
+.inbox-composer--tall .inbox-md-preview { max-height: 60vh; }
+
 .inbox-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.inbox-bar-left { display: flex; align-items: center; gap: 8px; }
 .inbox-attach-btn {
   display: inline-flex;
   align-items: center;
@@ -380,15 +507,32 @@
 }
 .inbox-attach-btn:hover { border-color: var(--accent); }
 .inbox-file-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.inbox-file-chip { font-size: 12px; color: var(--text-dim); background: var(--card-bg-alt); padding: 3px 8px; border-radius: var(--radius-full); }
+.inbox-file-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; color: var(--text-dim); background: var(--card-bg-alt);
+  padding: 3px 4px 3px 8px; border-radius: var(--radius-full);
+}
 
 /* ── Tracked Responses: per-message actions, approval banner, track modal ── */
 .inbox-bubble { position: relative; }
+/* Hover actions float as a pill ABOVE the bubble's top-right corner (own background + border) so the
+   icons never sit on top of the message text. */
 .inbox-bubble-actions {
-  position: absolute; top: 4px; right: 6px;
+  position: absolute; top: -13px; right: 8px; z-index: 1;
   display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease;
+  pointer-events: none;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  padding: 2px 6px;
+  box-shadow: var(--shadow-md);
+}
+.inbox-row:hover .inbox-bubble-actions { opacity: 1; pointer-events: auto; }
+/* Touch devices have no hover — the per-message actions (↩ reply, ⭐, 🔗, 📓, ✨) would be unreachable.
+   Reveal them permanently there so a phone user can actually reply to / act on a message by tapping. */
+@media (hover: none) {
+  .inbox-bubble-actions { opacity: 1; pointer-events: auto; }
 }
-.inbox-row:hover .inbox-bubble-actions { opacity: 1; }
 .inbox-bubble-act {
   border: none; background: transparent; cursor: pointer;
   font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: var(--radius-xs);
@@ -608,3 +752,40 @@
 .inbox-sched-new { display: flex; flex-direction: column; gap: 6px; }
 .inbox-sched-new .btn-primary { align-self: flex-start; }
 .inbox-sched-desc { min-height: 38px; resize: vertical; }
+
+/* ── Link previews (unfurl cards) — a rich card under a pasted link in a message bubble. The card is a
+ *    clickable row (thumbnail · site · title · description) plus a ✕ to hide it. Theme tokens only. ── */
+.inbox-linkcards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+.inbox-linkcard {
+  position: relative; display: flex; align-items: stretch;
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
+  background: var(--card-bg-alt); overflow: hidden;
+}
+.inbox-linkcard-main {
+  display: flex; align-items: stretch; gap: 10px; min-width: 0; flex: 1;
+  padding: 8px 10px; text-decoration: none; color: inherit;
+}
+.inbox-linkcard-main:hover { background: var(--surface-hover); }
+.inbox-linkcard-thumb { flex: none; width: 72px; display: flex; align-items: center; justify-content: center; }
+.inbox-linkcard-thumb img {
+  width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-xs); display: block; margin: 0;
+}
+.inbox-linkcard-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; justify-content: center; }
+.inbox-linkcard-site { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; }
+.inbox-linkcard-title {
+  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
+  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+.inbox-linkcard-desc {
+  font-size: 12px; color: var(--text-dim); line-height: 1.35;
+  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+.inbox-linkcard-x {
+  flex: none; align-self: flex-start; border: none; background: transparent; cursor: pointer;
+  color: var(--text-dim); font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: var(--radius-xs);
+}
+.inbox-linkcard-x:hover { color: var(--text); background: var(--surface-hover); }
+
+/* Thread-head toggle: show/hide all link previews (persisted). --on marks the active state. */
+.inbox-linkprev-toggle { flex: none; white-space: nowrap; }
+.inbox-linkprev-toggle--on { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent); }

package/dist/public/css/views/landing.css

@@ -76,6 +76,8 @@
 .ld-footer { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: .88rem; }
 .ld-footer a { color: var(--text-dim); text-decoration: none; }
 .ld-footer a:hover { color: var(--text); }
+.ld-footer a.ld-gh { display: inline-flex; align-items: center; gap: .4rem; }
+.gh-mark { flex: none; }
 /* Pricing */
 .ld-pricing .ld-h1 { text-align: center; }
 .ld-pricing .ld-hero-sub { text-align: center; margin-bottom: 1.5rem; }

package/dist/public/css/views/members.css

@@ -8,7 +8,6 @@
 .mbr { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
 .mbr-title { font-size: 1.6rem; margin: 0 0 6px; }
 .mbr-desc { color: var(--text-dim); margin: 0 0 24px; }
-.mbr-empty { color: var(--text-dim); text-align: center; padding: 40px; }
 .mbr-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

package/dist/public/css/views/my-company.css

@@ -67,11 +67,6 @@
   margin: 0 0 0.75rem;
 }
 
-.mc-empty {
-  color: var(--text-muted);
-  font-style: italic;
-  margin: 0.5rem 0 1rem;
-}
 
 .mc-org-list {
   list-style: none;
@@ -333,3 +328,8 @@
 /* Shared full-width form input for My Company forms (Settings / Portfolio / create-company);
    overrides the base .mc-input above with full-width + border-box sizing. */
 .mc-input { width: 100%; padding: 0.5rem 0.6rem; background: var(--bg-dim); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; box-sizing: border-box; font-family: inherit; }
+
+/* Money books (Payments panel): payables + DAC7/ALV per-currency rows (TARGET-043). */
+.mc-money-box { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0.6rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0.25rem 0 0.5rem; }
+.mc-money-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
+.mc-money-row b { color: var(--text); font-variant-numeric: tabular-nums; }

package/dist/public/css/views/offers.css

@@ -22,9 +22,6 @@
 .of-card-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
 .of-offer-title { font-weight: 600; }
 .of-agent { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
-.of-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-.of-dot--on { background: var(--success, #10b981); }
-.of-dot--off { background: var(--border); }
 
 .of-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-start; }
 .of-badge { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 10px; background: var(--bg-dim); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }

package/dist/public/css/views/portal-dev.css

@@ -52,6 +52,10 @@
 .dv-subtitle { color: var(--love4, #E8564A); font-size: .95rem; margin-bottom: 2rem; }
 .dv-node-badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .8rem; font-size: .85rem; font-family: monospace; margin-bottom: 1.5rem; }
 /* .dv-dot removed — node-badge dot uses canonical <StatusDot>. Unified 2026-06-02 (#11). */
+.dv-repos { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
+.dv-repo-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; font-size: .85rem; border: 1px solid var(--border); border-radius: 8px; padding: .4rem .8rem; background: var(--bg-card); }
+.dv-repo-link:hover { color: var(--love4, #E8564A); border-color: var(--love4, #E8564A); }
+.dv-repo-link .gh-mark { flex: none; }
 
 /* Stats — .dv-stat*/.dv-num/.dv-label removed; dev-portal stats use canonical
    .stat-grid / .stat-card / .stat-card-value.accent / .stat-card-label. Unified 2026-06-02 (#6). */
@@ -146,3 +150,48 @@
   .dv-stats { flex-direction: column; }
   .dv-container h1 { font-size: 1.4rem; }
 }
+
+/* ── MCP setup panel: lifted out of ~52 inline styles + a tabStyle() inline-CSS
+   builder + a bespoke non-brand purple/rgba(255,255,255) palette (portal-dev.panels.js).
+   All colours are theme tokens now (purple/info/success/warn tints), so the panel
+   flips correctly in dark mode. ── */
+.dv-callout { border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1rem; }
+.dv-callout--warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
+.dv-callout--success { background: var(--success-bg); border: 1px solid var(--success-border); }
+.dv-callout--purple { background: var(--purple-bg); border: 1px solid var(--purple-border); }
+.dv-info-box { margin-top: .75rem; padding: .5rem .75rem; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: .25rem; font-size: .82rem; }
+.dv-setup-tabs { display: flex; gap: 2px; margin-top: .75rem; border-bottom: 1px solid var(--purple-border); }
+.dv-setup-tab { padding: .4rem .75rem; border: none; border-radius: .25rem .25rem 0 0; cursor: pointer; font-size: .8rem; font-weight: 600; background: transparent; color: var(--text-dim); }
+.dv-setup-tab.active { background: var(--purple-bg); color: var(--purple-fg); }
+.dv-tab-content { padding: .75rem 0 0; }
+.dv-panel-desc { font-size: .82rem; color: var(--text-dim); margin: 0 0 .75rem; }
+.dv-field { margin-bottom: .75rem; }
+.dv-field-label { font-size: .8rem; color: var(--text-dim); margin-bottom: .25rem; }
+.dv-code-row { display: flex; align-items: center; gap: .5rem; }
+.dv-code { font-size: .78rem; background: var(--code-bg); padding: .4rem .6rem; border-radius: .25rem; user-select: all; flex: 1; word-break: break-all; }
+.dv-code--inline { font-size: .78rem; background: var(--code-bg); padding: .25rem .5rem; border-radius: .25rem; user-select: all; }
+.dv-code--inline-sm { font-size: .8rem; background: var(--code-bg); padding: .25rem .5rem; border-radius: .25rem; user-select: all; }
+.dv-copy-btn { padding: .3rem .6rem; background: var(--accent); color: #fff; border: none; border-radius: .25rem; cursor: pointer; font-size: .75rem; white-space: nowrap; }
+.dv-copy-btn--alt { padding: .2rem .5rem; background: var(--purple-bg); color: var(--purple-fg); border: 1px solid var(--purple-border); border-radius: .25rem; cursor: pointer; font-size: .75rem; white-space: nowrap; }
+.dv-note { margin-top: .75rem; font-size: .8rem; color: var(--text-dim); font-style: italic; }
+.dv-hint { font-size: .8rem; color: var(--text-dim); margin: 0; font-style: italic; }
+.dv-step-img { max-width: 100%; border-radius: .5rem; border: 1px solid var(--border); }
+.dv-step-media { margin: .5rem 0; }
+.dv-steps { margin: 0; padding-left: 1.25rem; line-height: 1.8; }
+.dv-steps--tight { line-height: 1.6; }
+.dv-step-row { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
+.dv-block-sm { font-size: .85rem; }
+.dv-p-mt { margin: .5rem 0 0; font-size: .85rem; }
+.dv-p-mt-muted { margin: .5rem 0 0; font-size: .85rem; color: var(--text-dim); }
+.dv-p-mt-lg { margin: .5rem 0 0; font-size: .9rem; }
+.dv-details { margin-top: .75rem; font-size: .85rem; }
+.dv-details-summary { cursor: pointer; color: var(--text-dim); }
+.dv-details-body { margin-top: .5rem; padding: .5rem; background: var(--bg-surface); border-radius: .25rem; }
+.dv-mt { margin-top: 1rem; }
+.dv-ul-indent { margin-left: 1.5rem; }
+.dv-link { color: var(--accent); text-decoration: underline; }
+.dv-ok-line { color: var(--success); font-size: .85rem; }
+.dv-muted-line { color: var(--text-dim); font-size: .85rem; }
+.dv-p-desc-muted { margin: 0 0 .75rem; color: var(--text-dim); }
+.dv-unavail-sub { font-size: .8rem; margin-top: .5rem; }
+.dv-mt-sm { margin-top: .5rem; font-size: .85rem; }

package/dist/public/css/views/portfolio.css

@@ -317,6 +317,52 @@
   margin-bottom: 0.5rem;
 }
 
+/* ── Promoted apps (public profile) ── */
+.portfolio-profile-head {
+  text-align: center;
+  padding: 3rem 2rem 1rem;
+  color: var(--text-dim, #6B7280);
+}
+.portfolio-profile-head h2 { color: var(--text, #1A1A2E); margin-bottom: 0.5rem; }
+.portfolio-promoted {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 1.5rem 1rem;
+}
+.portfolio-promoted-title {
+  font-size: 1rem;
+  color: var(--text, #1A1A2E);
+  margin: 0 0 0.75rem;
+}
+.portfolio-promoted-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.75rem;
+}
+.portfolio-promoted-card {
+  display: block;
+  text-decoration: none;
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  background: var(--card, #fff);
+  transition: border-color 0.15s, transform 0.15s;
+}
+.portfolio-promoted-card:hover {
+  border-color: var(--accent, #E8564A);
+  transform: translateY(-1px);
+}
+.portfolio-promoted-name {
+  font-weight: 700;
+  color: var(--text, #1A1A2E);
+  margin-bottom: 0.3rem;
+}
+.portfolio-promoted-pitch {
+  font-size: 0.85rem;
+  color: var(--text-dim, #6B7280);
+  line-height: 1.4;
+}
+
 /* ── Upload Section ── */
 .portfolio-upload-zone {
   border: 2px dashed var(--border, #E5E7EB);