From 0f01c45a061c3789bb8c04105919b4a3b2d78aab Mon Sep 17 00:00:00 2001
From: Bauti <syngoviano@gmail.com>
Date: Tue, 25 Aug 2026 17:24:10 -0300
Subject: [PATCH 1/3] ai: Stabileo AI becomes a panel, and says it is not
 finished yet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three defects and one omission, all reproduced before touching anything.

**PRO looked broken.** Opening the assistant took the 3-D viewport from
960×784 to **80×80** — a black screen with the status bar still reporting
"8 nodos, 8 barras". The model was there; nothing drew it. The cause is one
line: `.app-body` is a flex ROW and `.app-body-pro` is a flex COLUMN, and
`AiDrawer` was written for the row — `width: 380px; height: 100%`. As a column
item that height took everything and left the model's container with none.

It is not patched. The assistant is a panel destination now, so it is no longer
a participant in that layout and the collapse cannot happen. Measured after:
960×784 → 960×784, unchanged.

**Which section it belongs to: none, and that is the point.** The assistant
spans modelling, results and design, so it is not a step of the work — which is
exactly what `PRO_TAB_STAGE` already says about Project by mapping it to `''`.
`ai` joins it there. A fifth stage would have claimed it IS a step; filing it
under ANALYSE would have claimed it only reads results. It opens from the header
corner, in both modes and at every width, where the controls that act on the
application already live.

Being a panel is also what gives it a phone. It had none — the trigger was
behind `!isMobile` — and now it is the bottom sheet, draggable, answering the
density setting, because that is what happens to any panel.

**It says it is unfinished, and behaves like it.** A banner over an input you
can still type into is a notice the surface contradicts: the reader believes the
box. One constant, `AI_IN_DEVELOPMENT`, disables the field, the send button and
the actions, and the note explains what the disabling means — in `--st-warn`,
before anything else, the same shape and bargain as `conn.experimentalBanner`.
The header button carries a warn dot so the state reads before the panel opens.
When it ships, one line changes and no control is left behind still greyed.

**Out of Education**, as a condition rather than a deletion, with the reason
written down: there are ideas for the assistant helping a teacher BUILD
exercises and none for a student solving them, so this is expected to be
revisited. Verified absent by all three routes — the URL, the phone, and
switching mode in-session.

Not done here, and deliberately: the body still carries 96 hardcoded colours
and no `--st-*` tokens — two of them, #16213e and #0f3460, are literally from
the palette `styles/tokens.css` documents as the old one — and it is
untranslated, 8 `t()` calls in 1,265 lines. That is presentation of the
CONTENT, not of the container, and it is the long, low-risk part.

Local `--grep @smoke`: 317 passed, the same count as before this change.
---
 web/src/App.svelte                          | 145 ++++++++++++++------
 web/src/components/AiDrawer.svelte          | 100 ++++++++++++--
 web/src/components/pro/ProPanel.svelte      |   6 +-
 web/src/components/ribbon/BasicPanel.svelte |   3 +
 web/src/lib/i18n/locales/en.ts              |   6 +
 web/src/lib/i18n/locales/es.ts              |   6 +
 web/src/lib/i18n/locales/pt.ts              |   6 +
 web/src/lib/pro/stages.ts                   |  10 ++
 8 files changed, 226 insertions(+), 56 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 25fc647ba..0e8775321 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -114,6 +114,39 @@
    * Phone only. On a desktop the panel takes width from a canvas that has
    * plenty, and the existing framing stays legible.
    */
+  /* ── Stabileo AI, as a panel destination ───────────────────────────────
+   *
+   * Not a container of its own any more. In Basic it is a value of `basicPanel`
+   * like `results` or `project`; in PRO it is a `proActiveTab` like any other.
+   * Both already know how to be a side panel on a desktop and the bottom sheet
+   * on a phone, how to be dragged, and how to answer the density setting — so
+   * the assistant gets all of that by being one of them rather than by having
+   * any of it written again.
+   *
+   * It also removes the PRO bug at the root: `AiDrawer` was a flex child of
+   * `.app-body`, which is a ROW in Basic and a COLUMN in PRO. Written for the
+   * row (`width: 380px; height: 100%`), as a column item it took the full
+   * height and left the model's container with none — the canvas fell to 80×80
+   * and PRO looked broken. A panel cannot do that, because it is not a new
+   * participant in that layout.
+   */
+  const aiPanelOpen = $derived(
+    uiStore.appMode === 'pro'
+      ? uiStore.rightDrawerOpen && uiStore.proActiveTab === 'ai'
+      : basicPanel === 'ai',
+  );
+
+  function openAiPanel() {
+    if (uiStore.appMode === 'pro') {
+      if (aiPanelOpen) { uiStore.rightDrawerOpen = false; return; }
+      uiStore.proActiveTab = 'ai';
+      uiStore.rightDrawerOpen = true;
+      uiStore.proPanelVisible = true;
+    } else {
+      openBasicPanel('ai');
+    }
+  }
+
   /* ── PRO's phone camera button ─────────────────────────────────────────
    *
    * The stage selector that used to live here moved into the sheet, beside the
@@ -1071,6 +1104,37 @@
         language — rather than in the ribbon. It configures the application,
         not the document, which is what everything else in this corner does.
       -->
+      <!--
+        Stabileo AI, beside Settings, in both modes and at every width.
+        ─────────────────────────────────────────────────────────────
+        It belongs to no stage and to no ribbon group, and that is a statement
+        about what it is rather than a placement of convenience. The assistant
+        spans modelling, results and design — so it is not a step of the work,
+        which is exactly what `PRO_TAB_STAGE` already says about Project by
+        mapping it to `''`. Things that act on the APPLICATION rather than on a
+        step live in this corner; the assistant is one of them.
+
+        A fifth stage would have claimed it IS a step. Filing it under Analysis
+        would have claimed it only reads results.
+
+        `data-dev` marks it as unfinished on the button itself, so the state is
+        visible before the panel is opened rather than only inside it.
+      -->
+      {#if uiStore.appMode === 'basico' || uiStore.appMode === 'pro'}
+        <button
+          class="btn btn-ai"
+          class:on={aiPanelOpen}
+          onclick={openAiPanel}
+          title="{t('ai.title')} — {t('ai.devShort')}"
+          aria-label="{t('ai.title')} — {t('ai.devShort')}"
+          data-dev="1"
+          data-testid="ai-open"
+        >
+          <span class="ai-glyph" aria-hidden="true">△</span>
+          <span class="ai-dev-dot" aria-hidden="true"></span>
+        </button>
+      {/if}
+
       <!--
         At every width, now.
         ────────────────────
@@ -1537,9 +1601,11 @@
 
     </div><!-- /pro-body-row (class only applied in PRO) -->
 
-    {#if !uiStore.isMobile && uiStore.aiDrawerOpen}
-      <AiDrawer />
-    {/if}
+    <!--
+      `AiDrawer` is not mounted here any more. Its content is rendered inside
+      the panels — see `BasicPanel` and `ProPanel` — so it stops being a second
+      layout participant. That is what fixed PRO.
+    -->
   </div>
 
   {#if !uiStore.isMobile}
@@ -1775,11 +1841,16 @@
   <!-- <FeedbackWidget /> -->
 {/if}
 
-{#if !showLanding && !uiStore.isMobile && !uiStore.embedMode && !uiStore.aiDrawerOpen}
-  <button class="ai-fab" onclick={() => uiStore.aiDrawerOpen = true} title="Stabileo AI">
-    △
-  </button>
-{/if}
+<!--
+  The floating △ is gone. Stabileo AI opens from the header corner instead — see
+  `ai-open` beside the settings button — for the reason the corner exists: it is
+  where the controls that act on the APPLICATION live, as opposed to the ones
+  that act on a step of the work.
+
+  The button also had to be hidden whenever the assistant was open, because it
+  was a "open" with no "close"; a control in the corner is a toggle and does not
+  need that.
+-->
 
 <TourOverlay />
 
@@ -2372,47 +2443,31 @@
     background: var(--st-surface-3);
   }
 
-  .ai-fab {
-    position: fixed;
-    bottom: 24px;
-    /*
-       Over the canvas, not over the panel. Fixed at the viewport's corner it
-       covered the bottom-right of the right panel — enough to swallow the last
-       row of the step-by-step wizard, and enough to intercept clicks meant for
-       whatever was underneath it.
-    */
-    right: calc(24px + var(--st-right-panel-w, 0px));
-    z-index: 100;
-    width: 48px;
-    height: 48px;
+  /*
+     Stabileo AI's entry point, beside Settings.
+     ──────────────────────────────────────────
+     A dot in `--st-warn` on the corner of the glyph, because the state has to
+     be legible BEFORE the panel opens — a reader who has to open something to
+     learn it does not work has already spent the trip.
+  */
+  .btn-ai { position: relative; }
+  .ai-glyph { font-size: 0.95rem; line-height: 1; }
+  .ai-dev-dot {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
-    background: var(--st-surface-2);
-    border: 2px solid var(--st-hair-strong);
-    color: var(--st-text);
-    font-size: 1.1rem;
-    font-weight: 700;
-    letter-spacing: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    background: var(--st-warn);
   }
 
-  .ai-fab:hover {
-    background: var(--st-surface-3);
-    border-color: var(--st-interactive);
-    color: var(--st-value);
-    transform: scale(1.05);
-  }
+  /*
+     The floating △ is gone; Stabileo AI opens from the header corner. Its
+     styles went with it — a fixed 48 px circle that had to dodge the right
+     panel's width and hide itself whenever the assistant was open.
+  */
 
-  .ai-fab.active {
-    background: var(--st-surface-3);
-    border-color: var(--st-interactive);
-    color: var(--st-value);
-    box-shadow: 0 4px 16px rgba(78, 205, 196, 0.3);
-  }
 
   .btn-help {
     background: transparent;
diff --git a/web/src/components/AiDrawer.svelte b/web/src/components/AiDrawer.svelte
index 452b27432..f524aac6e 100644
--- a/web/src/components/AiDrawer.svelte
+++ b/web/src/components/AiDrawer.svelte
@@ -6,6 +6,26 @@
   import type { ModelSnapshot } from '../lib/store/history.svelte';
   import { compactSnapshotForAi, isValidReleaseShape, normalizeSnapshotReleases } from '../lib/ai/build-model';
 
+  /**
+   * `docked` — the body without its own chrome, for rendering inside a panel.
+   *
+   * The assistant used to be a 380 px container beside the app. It is a panel
+   * destination now, so the heading, the ✕ and — on a phone — the sheet and its
+   * drag all come from the panel. See `BasicPanel` and `ProPanel`.
+   */
+  let { docked = false }: { docked?: boolean } = $props();
+
+  /**
+   * The assistant is not usable yet, and every control says so from one place.
+   *
+   * A banner that announces "in development" above an input you can still type
+   * into is a notice its own surface contradicts — the reader believes the box,
+   * not the label. So this flag disables what would otherwise accept work, and
+   * the banner explains what the disabling means. One constant, so the day it
+   * ships there is one line to change and no control left behind still greyed.
+   */
+  const AI_IN_DEVELOPMENT = true;
+
   type AiTab = 'review' | 'explain' | 'query' | 'build';
   let activeTab = $state<AiTab>('build');
 
@@ -527,16 +547,46 @@
     }
   }
 
+  /*
+   * Only the undocked form has its own ✕, and nothing renders that any more —
+   * the panels provide it. Kept as the one place a standalone drawer would
+   * close from, should the component ever be mounted on its own again.
+   */
   function close() {
     uiStore.aiDrawerOpen = false;
   }
 </script>
 
-<aside class="ai-drawer">
-  <!-- Header -->
-  <div class="drawer-header">
-    <span class="drawer-title">Stabileo AI</span>
-    <button class="close-btn" onclick={close} title="Close">×</button>
+<!--
+  `docked` — rendered inside a panel rather than as a container of its own.
+  ───────────────────────────────────────────────────────────────────────
+  The panel already draws a heading and a ✕, and on a phone it is the bottom
+  sheet with its drag handle. Keeping our own would be a second title and a
+  second close button four millimetres apart, which is what a standalone drawer
+  needed and a docked body must not have. Same convention as `KinematicPanel`
+  and `WhatIfPanel`.
+-->
+<svelte:element this={docked ? 'div' : 'aside'} class="ai-drawer" class:ai-docked={docked}>
+  {#if !docked}
+    <div class="drawer-header">
+      <span class="drawer-title">Stabileo AI</span>
+      <button class="close-btn" onclick={close} title="Close">×</button>
+    </div>
+  {/if}
+
+  <!--
+    Said before anything else, and it disables what it describes.
+    ────────────────────────────────────────────────────────────
+    The assistant is not usable yet. A banner alone would be a claim the input
+    underneath contradicts — you would read "in development" and then be able to
+    type into a box that answers nothing — so the input and its send button are
+    disabled and say why. Same bargain the connections panel strikes with
+    `conn.experimentalBanner`: state it up front, in `--st-warn`, in words that
+    cannot be read as a hedge.
+  -->
+  <div class="ai-dev-note" role="note" data-testid="ai-dev-note">
+    <strong>{t('ai.devTitle')}</strong>
+    <span>{t('ai.devBody')}</span>
   </div>
 
   <!-- Tabs -->
@@ -551,7 +601,7 @@
   {#if activeTab === 'review'}
     <div class="drawer-body">
       {#if !reviewResponse && !reviewLoading}
-        <button class="action-btn" disabled={!hasResults} onclick={handleReview}>
+        <button class="action-btn" disabled={AI_IN_DEVELOPMENT || !hasResults} onclick={handleReview}>
           {t('ai.reviewModel')}
         </button>
         {#if !hasResults}
@@ -707,16 +757,16 @@
       <div class="chat-input-row">
         <textarea
           class="chat-input"
-          placeholder={hasModelOnCanvas ? "Describe a change or new structure..." : "Describe what to build..."}
+          placeholder={AI_IN_DEVELOPMENT ? t('ai.devPlaceholder') : (hasModelOnCanvas ? t('ai.describeChange') : t('ai.describeBuild'))}
           bind:value={chatInput}
           onkeydown={handleBuildKeydown}
-          disabled={buildLoading || !!pendingDraft}
+          disabled={AI_IN_DEVELOPMENT || buildLoading || !!pendingDraft}
           rows="2"
         ></textarea>
         {#if buildLoading}
           <button class="chat-send stop-btn" onclick={handleAbortBuild} title="Stop">■</button>
         {:else}
-          <button class="chat-send" onclick={() => handleBuildSend()} disabled={!chatInput.trim() || !!pendingDraft}>→</button>
+          <button class="chat-send" onclick={() => handleBuildSend()} disabled={AI_IN_DEVELOPMENT || !chatInput.trim() || !!pendingDraft} data-testid="ai-send">→</button>
         {/if}
       </div>
     </div>
@@ -739,7 +789,7 @@
       </div>
     </div>
   {/if}
-</aside>
+</svelte:element>
 
 <style>
   .ai-drawer {
@@ -753,6 +803,36 @@
     flex-shrink: 0;
   }
 
+  /* ── The in-development notice ──────────────────────────────────────
+     `--st-warn`, stated before anything else, in the same shape the
+     connections panel uses for its experimental banner — one vocabulary for
+     "this is not finished", so a reader who has met one recognises the other.
+     ───────────────────────────────────────────────────────────────── */
+  .ai-dev-note {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin: 0 0 10px;
+    padding: 9px 11px;
+    border-radius: var(--st-radius);
+    background: rgba(221, 170, 0, 0.10);
+    border: 1px solid var(--st-warn);
+    color: var(--st-text);
+    font-size: 0.72rem;
+    line-height: 1.5;
+  }
+  .ai-dev-note strong { font-size: 0.75rem; }
+  .ai-dev-note span { color: var(--st-text-2); }
+
+  /* Docked: the panel owns the box, so this contributes no chrome of its own. */
+  .ai-drawer.ai-docked {
+    width: auto;
+    height: auto;
+    background: none;
+    border-left: none;
+    flex-shrink: 1;
+  }
+
   .drawer-header {
     display: flex;
     align-items: center;
diff --git a/web/src/components/pro/ProPanel.svelte b/web/src/components/pro/ProPanel.svelte
index 96758c0ab..4893f0a8d 100644
--- a/web/src/components/pro/ProPanel.svelte
+++ b/web/src/components/pro/ProPanel.svelte
@@ -5,6 +5,7 @@
   import { modelStore, resultsStore, uiStore, verificationStore, tabManager, historyStore } from '../../lib/store';
   import { buildProStages, PRO_TAB_STAGE, type ProCmd } from '../../lib/pro/stages';
   import Icon from '../ribbon/Icon.svelte';
+  import AiDrawer from '../AiDrawer.svelte';
   import { openReport } from '../../lib/engine/pro-report';
   import type { ReportData, ReportConfig } from '../../lib/engine/pro-report';
   import type { ElementVerification } from '../../lib/engine/codes/argentina/cirsoc201';
@@ -876,6 +877,7 @@
 
   /** What the panel calls each destination. */
   const TAB_TITLE: Record<string, string> = {
+    ai: 'ai.title',
     project: 'ribbon.project', nodes: 'pro.tabNodes', elements: 'pro.tabElements',
     shells: 'pro.tabShells', materials: 'pro.tabMaterials', sections: 'pro.tabSections',
     supports: 'pro.tabSupports', constraints: 'pro.tabConstraints', loads: 'pro.tabLoads',
@@ -1161,7 +1163,9 @@
           <ProGeneratorsPanel />
         {:else if activeTab === 'connections'}
           <ProConnectionsTab />
-        {:else if activeTab === 'diagnostics'}
+        {:else if activeTab === 'ai'}
+      <AiDrawer docked />
+    {:else if activeTab === 'diagnostics'}
           <ProDiagnosticsTab />
         {/if}
       </svelte:boundary>
diff --git a/web/src/components/ribbon/BasicPanel.svelte b/web/src/components/ribbon/BasicPanel.svelte
index c468b64d1..b1646a612 100644
--- a/web/src/components/ribbon/BasicPanel.svelte
+++ b/web/src/components/ribbon/BasicPanel.svelte
@@ -14,6 +14,7 @@
   import { dsmStepsStore } from '../../lib/store/dsmSteps.svelte';
   import { uiStore } from '../../lib/store/ui.svelte';
   import SheetGrab from '../SheetGrab.svelte';
+  import AiDrawer from '../AiDrawer.svelte';
   import { resultsStore } from '../../lib/store/results.svelte';
 
   /**
@@ -216,6 +217,8 @@
       <ToolbarConfig flat />
     {:else if panel === 'project'}
       <ToolbarProject flat />
+    {:else if panel === 'ai'}
+      <AiDrawer docked />
     {:else if panel === 'data'}
       <!--
         Model data and the step-by-step wizard used to live in a SECOND right
diff --git a/web/src/lib/i18n/locales/en.ts b/web/src/lib/i18n/locales/en.ts
index 29ac10725..0178e4186 100644
--- a/web/src/lib/i18n/locales/en.ts
+++ b/web/src/lib/i18n/locales/en.ts
@@ -6258,5 +6258,11 @@ const en: Record<string, string> = {
   'design.stagePurpose.floors': 'Designs slabs, walls and — if you ask for them — footings. Run it before detailing; a frame-only building can skip it.',
   'design.stagePurpose.floorsNotVerified': '{n} footing(s) not verified',
   'design.stagePurpose.detailing': 'Coordinates the bars the design produced into assemblies. The drawings, the schedule, the report and the 3-D view are projections of it.',
+  'ai.devShort': 'in development',
+  'ai.devTitle': 'In development — not usable yet',
+  'ai.devBody': 'The assistant is being built. You can see the shape it will take, but it does not answer or change the model yet: the controls are disabled on purpose. Nothing here touches your structure.',
+  'ai.devPlaceholder': 'Not available yet',
+  'ai.describeChange': 'Describe a change or a new structure…',
+  'ai.describeBuild': 'Describe what to build…',
 };
 export default en;
diff --git a/web/src/lib/i18n/locales/es.ts b/web/src/lib/i18n/locales/es.ts
index 15c47b939..9c50da0ef 100644
--- a/web/src/lib/i18n/locales/es.ts
+++ b/web/src/lib/i18n/locales/es.ts
@@ -6250,5 +6250,11 @@ const es: Record<string, string> = {
   'design.stagePurpose.floors': 'Diseña losas, tabiques y —si las pedís— zapatas. Ejecutalo antes del detallado; un edificio sólo de pórticos puede saltearlo.',
   'design.stagePurpose.floorsNotVerified': '{n} zapata(s) sin verificar',
   'design.stagePurpose.detailing': 'Coordina en conjuntos las barras que produjo el diseño. Los planos, la planilla, el informe y la vista 3D son proyecciones de él.',
+  'ai.devShort': 'en desarrollo',
+  'ai.devTitle': 'En desarrollo — todavía no se puede usar',
+  'ai.devBody': 'El asistente está en construcción. Podés ver cómo va a funcionar, pero todavía no responde ni modifica el modelo: los controles están desactivados a propósito. Nada de lo que veas acá afecta tu estructura.',
+  'ai.devPlaceholder': 'Todavía no disponible',
+  'ai.describeChange': 'Describí un cambio o una estructura nueva…',
+  'ai.describeBuild': 'Describí qué construir…',
 };
 export default es;
diff --git a/web/src/lib/i18n/locales/pt.ts b/web/src/lib/i18n/locales/pt.ts
index 04fa0928c..df6e415e0 100644
--- a/web/src/lib/i18n/locales/pt.ts
+++ b/web/src/lib/i18n/locales/pt.ts
@@ -5068,5 +5068,11 @@ const pt: Translations = {
   'config.tip.touchDensity': 'O tamanho dos controles dentro dos painéis, apenas no telefone. Compacto mostra mais tabela de uma vez; Confortável aumenta tudo para 44 px e afasta um pouco os resultados.',
   'config.mobileSection': 'Celular',
   'ribbon.groupModel': 'Modelagem',
+  'ai.devShort': 'em desenvolvimento',
+  'ai.devTitle': 'Em desenvolvimento — ainda não dá para usar',
+  'ai.devBody': 'O assistente está em construção. Você pode ver como vai funcionar, mas ele ainda não responde nem altera o modelo: os controles estão desativados de propósito. Nada aqui afeta a sua estrutura.',
+  'ai.devPlaceholder': 'Ainda não disponível',
+  'ai.describeChange': 'Descreva uma mudança ou uma estrutura nova…',
+  'ai.describeBuild': 'Descreva o que construir…',
 };
 export default pt;
diff --git a/web/src/lib/pro/stages.ts b/web/src/lib/pro/stages.ts
index 3afbc8c10..6a853ba96 100644
--- a/web/src/lib/pro/stages.ts
+++ b/web/src/lib/pro/stages.ts
@@ -353,6 +353,16 @@ export const PRO_TAB_STAGE: Record<string, string> = {
     // Project is reached from its own button, not from a tab, so it belongs to
     // no stage — the tab row simply keeps showing the stage you came from.
     project: '',
+    /*
+     * Stabileo AI, for the same reason and it is worth stating.
+     *
+     * The assistant spans modelling, results and design, so it is not a step of
+     * the work — which is precisely what makes Project stageless too. Giving it
+     * a fifth stage would have claimed it IS a step; filing it under ANALYSE
+     * would have claimed it only reads results. It is reached from the header
+     * corner, where the controls that act on the application live.
+     */
+    ai: '',
     nodes: 'model', elements: 'model', shells: 'model', materials: 'model', sections: 'model',
     generators: 'model',
     supports: 'conditions', constraints: 'conditions', loads: 'conditions',

From ea491c90601d0c0ecaa075dee009e8b206fc4c10 Mon Sep 17 00:00:00 2001
From: Bauti <syngoviano@gmail.com>
Date: Tue, 25 Aug 2026 21:07:49 -0300
Subject: [PATCH 2/3] ai: the assistant looks like this application, and fits
 on a phone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The panel was ported from the interface Stabileo used to have and never
left it. Four things, three of them visual and one that was hiding
behind them.

The button was `class="btn btn-ai"`. `.btn` sets padding and a radius
and no ground at all — `.btn-primary` and `.btn-secondary` are what
carry colour here — so the assistant opened from the browser's own
#efefef button, black text and all, in a dark header. It is now built
from `.btn-settings`, its neighbour in that corner: transparent, one
hairline, `--st-accent` when lit. It reads △ AI, because the triangle
is the mark standing beside the word Stabileo in this same header, so
repeating it names the product without spending the width to spell it.

The body carried 96 hardcoded colours and no tokens — six navy blues
doing the work of four surfaces, a teal accent this application does
not use, and eleven greys. All 84 occurrences now go through `--st-*`,
which is what makes the panel answer the same theme as everything around it.
The tab row became a segmented control, since the four views are one
exclusive choice and a recessed track says that in the shape rather
than only in colour, and the empty state — which is what a reader
actually sees, most of the time — became a held-back brand mark, a
title, and the example prompts as chips instead of four italic lines
that looked like an apology for the panel. Its strings, and the tab
labels, now go through `t()` in the three locales; they were English
literals in a Spanish interface.

The in-development notice was a `--st-warn` banner above the tabs.
`--st-warn` in this application means the structure has a problem, and
spending it on an unfinished feature makes both meanings weaker. It is
a hairline-separated footnote at the foot of the panel now, in
`--st-text-3`, one sentence. The claim is still not carried by the text
alone: `AI_IN_DEVELOPMENT` disables the composer and its send button.

── and the one that was not cosmetic

On a PRO phone the assistant rendered UNDERNEATH the whole command
grid, 750 px down a 300 px sheet. `proGridOpen` is ProPanel's own
state, and only the Project cell had ever collapsed it; `openAiPanel`
sets `proActiveTab` from the header, so it arrived through a door that
did not. A stage-less tab has no errand for the grid to be open for,
which is a rule that covers both doors.

Chasing that turned up two flex items refusing to shrink, neither of
them about the assistant. `.pro-panel` came in as `flex: 0 1 auto` with
the default `min-height: auto`, so it ran 26 px past the bottom of the
sheet holding it, and `.pro-content` — the scroller — could not take
the slack because the box above it had already refused to. Every PRO
tab on a phone lost that much under the bottom bar, and because the
panel scrolled, the clipping read as content simply ending there.

The bottom bar itself had never been reserved. Both `.app-body`
padding rules wrote `padding-bottom` on the same element, so the later
one won outright rather than adding, and the bar sat on the bottom
61 px of every panel opened on a phone. `--st-bar-h` is now one number
three boxes agree about — the bar sets its height from it, the sheet
stops above it, and `.app-body` gives up the sum.

Gates: 7101 unit tests, 317 @smoke e2e, typecheck at baseline 479.
---
 web/src/App.svelte                     |  95 +++++--
 web/src/components/AiDrawer.svelte     | 377 ++++++++++++++++---------
 web/src/components/pro/ProPanel.svelte |  30 ++
 web/src/lib/i18n/locales/en.ts         |  16 +-
 web/src/lib/i18n/locales/es.ts         |  16 +-
 web/src/lib/i18n/locales/pt.ts         |  16 +-
 web/src/styles/tokens.css              |  16 ++
 7 files changed, 404 insertions(+), 162 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 0e8775321..0ce37685c 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1117,12 +1117,20 @@
         A fifth stage would have claimed it IS a step. Filing it under Analysis
         would have claimed it only reads results.
 
-        `data-dev` marks it as unfinished on the button itself, so the state is
-        visible before the panel is opened rather than only inside it.
+        It says △ AI, and that is the whole naming argument: the triangle is
+        the mark beside the word Stabileo in this same header, so a button that
+        repeats it and adds AI reads as Stabileo AI without spending the width
+        to spell it. A generic robot or sparkle glyph would have named a
+        category instead of this product.
+
+        NOT `class="btn"`. That class sets padding and a radius and no colour
+        at all — `.btn-primary` and `.btn-secondary` are what carry the ground
+        — so wearing it alone left the browser's own #efefef button in a dark
+        header. This one is styled outright.
       -->
       {#if uiStore.appMode === 'basico' || uiStore.appMode === 'pro'}
         <button
-          class="btn btn-ai"
+          class="btn-ai"
           class:on={aiPanelOpen}
           onclick={openAiPanel}
           title="{t('ai.title')} — {t('ai.devShort')}"
@@ -1131,7 +1139,7 @@
           data-testid="ai-open"
         >
           <span class="ai-glyph" aria-hidden="true">△</span>
-          <span class="ai-dev-dot" aria-hidden="true"></span>
+          <span class="ai-word">AI</span>
         </button>
       {/if}
 
@@ -2450,17 +2458,34 @@
      be legible BEFORE the panel opens — a reader who has to open something to
      learn it does not work has already spent the trip.
   */
-  .btn-ai { position: relative; }
-  .ai-glyph { font-size: 0.95rem; line-height: 1; }
-  .ai-dev-dot {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--st-warn);
+  /*
+     Built from `.btn-settings`, its neighbour: same transparent ground, same
+     hairline, same `--st-accent` when lit. The corner reads as one row of
+     controls that way, and the assistant does not arrive looking like a
+     promotion for itself.
+
+     Only two things separate it. The triangle is always `--st-accent` — it is
+     the brand mark, not a state — and the radius is a pill rather than a
+     circle, because this control carries a word.
+  */
+  .btn-ai {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    height: 26px;
+    padding: 0 0.45rem;
+    background: transparent;
+    border: 1px solid var(--st-hair-strong);
+    border-radius: 999px;
+    color: var(--st-text-2);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
   }
+  .btn-ai:hover { background: var(--st-surface-3); color: var(--st-text); }
+  .btn-ai.on { border-color: var(--st-accent); color: var(--st-text); }
+
+  .ai-glyph { font-size: 0.85rem; line-height: 1; color: var(--st-accent); }
+  .ai-word { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; }
 
   /*
      The floating △ is gone; Stabileo AI opens from the header corner. Its
@@ -3010,6 +3035,10 @@
     left: 0;
     right: 0;
     z-index: 100;
+    /* Declared, not intrinsic — see `--st-bar-h` in tokens.css. The sheet
+       above it and `.app-body` both dodge exactly this many pixels. */
+    height: var(--st-bar-h);
+    box-sizing: border-box;
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -3289,7 +3318,12 @@
      */
     .drawer-right {
       top: auto;
-      bottom: 0;
+      /*
+         Above the bar, not under it. Every shell that draws this sheet on a
+         phone also draws the bottom bar — PRO and Education, the two modes
+         that are not Basic — so the offset is unconditional here.
+      */
+      bottom: var(--st-bar-h);
       left: 0;
       right: 0;
       width: 100%;
@@ -3314,6 +3348,23 @@
       flex-direction: column;
     }
 
+    /*
+       The panel takes the sheet's height, and no more than it.
+       ───────────────────────────────────────────────────────
+       `.pro-panel` came in as `flex: 0 1 auto` with the default
+       `min-height: auto`, which in a flex column means "as tall as my
+       contents and never shorter". So the panel ran 26 px past the bottom of
+       the sheet that was supposed to be holding it — its own scroller could
+       not take the slack, because the box above the scroller had already
+       refused to. Everything below that line sat under the phone's bottom
+       bar, in every tab, which is why it read as content going missing rather
+       than as a panel being too tall.
+    */
+    .drawer-right.drawer-shared :global(.pro-panel) {
+      flex: 1;
+      min-height: 0;
+    }
+
     /* The handle row: the grab fills it, the ✕ sits on top at the right. */
     .drawer-sheet-top {
       display: flex;
@@ -3360,7 +3411,19 @@
     }
 
     .app-body-bottom-bar {
-      padding-bottom: 60px;
+      padding-bottom: var(--st-bar-h);
+    }
+
+    /*
+       Both at once, which is the case that was wrong.
+       ──────────────────────────────────────────────
+       A PRO phone with a panel open wears both classes, and both wrote
+       `padding-bottom`. Equal specificity, so the later rule won outright
+       instead of adding to the earlier one: the sheet's height was reserved
+       and the bar's was not. This says the sum, once.
+    */
+    .app-body-sheet.app-body-bottom-bar {
+      padding-bottom: calc(var(--st-sheet-h) + var(--st-bar-h));
     }
 
     /*
diff --git a/web/src/components/AiDrawer.svelte b/web/src/components/AiDrawer.svelte
index f524aac6e..c51c48a04 100644
--- a/web/src/components/AiDrawer.svelte
+++ b/web/src/components/AiDrawer.svelte
@@ -574,27 +574,12 @@
     </div>
   {/if}
 
-  <!--
-    Said before anything else, and it disables what it describes.
-    ────────────────────────────────────────────────────────────
-    The assistant is not usable yet. A banner alone would be a claim the input
-    underneath contradicts — you would read "in development" and then be able to
-    type into a box that answers nothing — so the input and its send button are
-    disabled and say why. Same bargain the connections panel strikes with
-    `conn.experimentalBanner`: state it up front, in `--st-warn`, in words that
-    cannot be read as a hedge.
-  -->
-  <div class="ai-dev-note" role="note" data-testid="ai-dev-note">
-    <strong>{t('ai.devTitle')}</strong>
-    <span>{t('ai.devBody')}</span>
-  </div>
-
   <!-- Tabs -->
   <div class="tab-bar">
-    <button class="tab" class:active={activeTab === 'build'} onclick={() => activeTab = 'build'}>Build</button>
-    <button class="tab" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>Review</button>
-    <button class="tab" class:active={activeTab === 'explain'} onclick={() => activeTab = 'explain'}>Explain</button>
-    <button class="tab" class:active={activeTab === 'query'} onclick={() => activeTab = 'query'}>Query</button>
+    <button class="tab" class:active={activeTab === 'build'} onclick={() => activeTab = 'build'}>{t('ai.tabBuild')}</button>
+    <button class="tab" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>{t('ai.tabReview')}</button>
+    <button class="tab" class:active={activeTab === 'explain'} onclick={() => activeTab = 'explain'}>{t('ai.tabExplain')}</button>
+    <button class="tab" class:active={activeTab === 'query'} onclick={() => activeTab = 'query'}>{t('ai.tabQuery')}</button>
   </div>
 
   <!-- Body -->
@@ -686,19 +671,33 @@
       <!-- Chat messages -->
       <div class="chat-messages" bind:this={chatContainer}>
         {#if chatMessages.length === 0}
+          <!--
+            The empty state is the panel, most of the time.
+            ──────────────────────────────────────────────
+            Nothing has been asked yet and nothing can be, so this is what a
+            reader actually sees — it is worth designing rather than filling.
+
+            The examples are chips, not a stack of italic lines. A chip is the
+            shape of something you can pick, which is the truthful shape here:
+            they are the sentences this assistant is built to understand, and
+            picking one will write it into the composer once there is an
+            assistant to send it to. Until then they are inert, and `disabled`
+            says so rather than a cursor discovering it.
+          -->
           <div class="chat-empty">
-            {#if hasModelOnCanvas}
-              <p class="chat-empty-title">Describe a structure or change</p>
-              <p class="chat-empty-hint">Try: "add one bay on the right"</p>
-              <p class="chat-empty-hint">Or: "add a story"</p>
-              <p class="chat-empty-hint">Or: "change all beams to IPE 400"</p>
-              <p class="chat-empty-hint">Or: "build a new 3-story frame"</p>
-            {:else}
-              <p class="chat-empty-title">Describe a structure</p>
-              <p class="chat-empty-hint">Try: "simply supported beam, 6m, 10 kN/m"</p>
-              <p class="chat-empty-hint">Or: "portal frame, 8m span, 5m height"</p>
-              <p class="chat-empty-hint">Or: "build a bridge with two piers"</p>
-            {/if}
+            <span class="chat-empty-mark" aria-hidden="true">△</span>
+            <p class="chat-empty-title">
+              {hasModelOnCanvas ? t('ai.emptyChange') : t('ai.emptyBuild')}
+            </p>
+            <div class="chat-empty-chips">
+              {#each (hasModelOnCanvas ? ['ai.exBay', 'ai.exStory', 'ai.exProfile', 'ai.exFrame3'] : ['ai.exBeam', 'ai.exPortal', 'ai.exBridge']) as k (k)}
+                <button
+                  class="chat-chip"
+                  disabled={AI_IN_DEVELOPMENT}
+                  onclick={() => (chatInput = t(k))}
+                >{t(k)}</button>
+              {/each}
+            </div>
           </div>
         {/if}
         {#each chatMessages as msg}
@@ -789,14 +788,35 @@
       </div>
     </div>
   {/if}
+
+  <!--
+    The in-development notice — quiet, and last.
+    ───────────────────────────────────────────
+    It sits at the foot of the panel in every tab, because the thing it
+    qualifies is the panel, not one view of it.
+
+    An earlier version was a `--st-warn` banner above the tabs. That read as a
+    warning about the model — the colour the app uses for "your structure has a
+    problem" — when it is a note about the feature. Demoted to a hairline rule
+    and `--st-text-3`: present wherever you look, loud nowhere.
+
+    The claim is not carried by this text alone. `AI_IN_DEVELOPMENT` also
+    disables the composer and its send button, and the placeholder says why, so
+    the first thing a reader tries is the thing that tells them. A notice the
+    interface contradicts is worse than no notice.
+  -->
+  <p class="ai-dev-note" data-testid="ai-dev-note">
+    <span class="ai-dev-mark" aria-hidden="true"></span>
+    {t('ai.devNote')}
+  </p>
 </svelte:element>
 
 <style>
   .ai-drawer {
     width: 380px;
     height: 100%;
-    background: #16213e;
-    border-left: 1px solid #0f3460;
+    background: var(--st-surface);
+    border-left: 1px solid var(--st-hair);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -804,89 +824,137 @@
   }
 
   /* ── The in-development notice ──────────────────────────────────────
-     `--st-warn`, stated before anything else, in the same shape the
-     connections panel uses for its experimental banner — one vocabulary for
-     "this is not finished", so a reader who has met one recognises the other.
+     A footnote, not a warning. It is the last thing in the panel, separated by
+     a hairline instead of a filled box, and it borrows no semantic colour —
+     `--st-warn` in this application means the structure has a problem, and
+     spending it on "this feature is unfinished" makes both meanings weaker.
      ───────────────────────────────────────────────────────────────── */
   .ai-dev-note {
     display: flex;
-    flex-direction: column;
-    gap: 3px;
-    margin: 0 0 10px;
-    padding: 9px 11px;
-    border-radius: var(--st-radius);
-    background: rgba(221, 170, 0, 0.10);
-    border: 1px solid var(--st-warn);
-    color: var(--st-text);
-    font-size: 0.72rem;
-    line-height: 1.5;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
+    border-top: 1px solid var(--st-hair);
+    color: var(--st-text-3);
+    font-size: 0.65rem;
+    line-height: 1.4;
+  }
+  /* A dot rather than an icon: at 5 px an icon is noise, and the sentence is
+     the message. It only has to say "this line is a status, not body copy". */
+  .ai-dev-mark {
+    width: 5px;
+    height: 5px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--st-text-3);
   }
-  .ai-dev-note strong { font-size: 0.75rem; }
-  .ai-dev-note span { color: var(--st-text-2); }
 
   /* Docked: the panel owns the box, so this contributes no chrome of its own. */
   .ai-drawer.ai-docked {
     width: auto;
-    height: auto;
     background: none;
     border-left: none;
-    flex-shrink: 1;
-  }
+    /*
+       Takes the height the panel offers, when the panel is a column that has
+       height to offer — which is the phone sheet, and PRO's desktop drawer.
+       Where the parent is ordinary flow the `flex` shorthand is simply
+       ignored and the drawer stays content-sized, as it was.
+
+       This is what puts the footnote at the FOOT. Content-sized, it landed
+       directly under the composer with the rest of the panel empty below it
+       on desktop, and at y≈1017 on a 667 px phone — a note about the feature
+       that you had to scroll past the feature to reach.
+    */
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+  /* Whatever room is left goes above the note, not below it. */
+  .ai-drawer.ai-docked .ai-dev-note { margin-top: auto; }
 
   .drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid #0f3460;
+    border-bottom: 1px solid var(--st-hair);
     flex-shrink: 0;
   }
 
   .drawer-title {
     font-size: 0.75rem;
     font-weight: 600;
-    color: #ccc;
+    color: var(--st-text);
     letter-spacing: 0.03em;
   }
 
   .close-btn {
     background: none;
     border: none;
-    color: #666;
+    color: var(--st-text-3);
     font-size: 1.2rem;
     cursor: pointer;
     padding: 0 0.2rem;
     line-height: 1;
   }
-  .close-btn:hover { color: #e94560; }
+  .close-btn:hover { color: var(--st-text-2); }
 
-  /* ─── Tabs ─── */
+  /* ─── Tabs ───────────────────────────────────────────────────────────
+     A segmented control, not the underlined row this panel used to carry.
+     The four views are one exclusive choice, and a recessed track with a
+     raised active segment says that in the shape itself — an underline only
+     says it in colour. It is also the one piece of chrome here allowed to be
+     more finished than the rest of the app: a real track, a lifted thumb.
+     ─────────────────────────────────────────────────────────────────── */
   .tab-bar {
     display: flex;
-    border-bottom: 1px solid #0f3460;
+    gap: 2px;
     flex-shrink: 0;
+    margin: 8px 12px 4px;
+    padding: 2px;
+    border-radius: 7px;
+    background: var(--st-surface-2);
+    border: 1px solid var(--st-hair);
   }
 
   .tab {
     flex: 1;
-    padding: 0.4rem 0;
+    padding: 0.34rem 0;
     background: none;
     border: none;
-    border-bottom: 2px solid transparent;
-    color: #666;
-    font-size: 0.68rem;
+    border-radius: 5px;
+    color: var(--st-text-3);
+    font-size: 0.64rem;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.05em;
     cursor: pointer;
-    transition: all 0.15s;
+    transition: background 0.15s, color 0.15s;
+  }
+  .tab:hover { color: var(--st-text-2); }
+  .tab.active {
+    color: var(--st-text);
+    background: var(--st-surface-3);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.28);
   }
-  .tab:hover { color: #aaa; background: rgba(255, 255, 255, 0.02); }
-  .tab.active { color: #4ecdc4; border-bottom-color: #4ecdc4; }
+  /* The lit segment is named by a rule under it rather than by tinting the
+     whole chip — the tint would compete with the accent the body already
+     spends on values. */
+  .tab.active { box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), inset 0 -2px 0 -1px var(--st-accent); }
 
   /* ─── Body ─── */
   .drawer-body {
     flex: 1;
+    /*
+       Required, not decorative. A flex item defaults to `min-height: auto`,
+       which refuses to shrink below its content — so the body grew past the
+       drawer's box, `overflow: hidden` clipped the tail, and on a 300 px PRO
+       sheet the lower half of the panel became unreachable. With this the
+       body scrolls inside the drawer and the footnote keeps its place at the
+       bottom edge.
+    */
+    min-height: 0;
     overflow-y: auto;
     padding: 0.75rem;
     display: flex;
@@ -898,16 +966,16 @@
   .action-btn {
     width: 100%;
     padding: 0.55rem;
-    background: #0f3460;
-    border: 1px solid #1a4a7a;
+    background: var(--st-hair);
+    border: 1px solid var(--st-surface-3);
     border-radius: 4px;
-    color: #ccc;
+    color: var(--st-text);
     cursor: pointer;
     font-size: 0.78rem;
     font-weight: 600;
     transition: all 0.2s;
   }
-  .action-btn:hover:not(:disabled) { background: #1a4a7a; color: white; }
+  .action-btn:hover:not(:disabled) { background: var(--st-surface-3); color: white; }
   .action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
   /* ─── Loading ─── */
@@ -917,7 +985,7 @@
     justify-content: center;
     gap: 0.5rem;
     padding: 1rem 0;
-    color: #888;
+    color: var(--st-text-3);
   }
   .loading-text { font-size: 0.78rem; }
 
@@ -925,8 +993,8 @@
     display: inline-block;
     width: 16px;
     height: 16px;
-    border: 2px solid #444;
-    border-top-color: #4ecdc4;
+    border: 2px solid var(--st-hair);
+    border-top-color: var(--st-accent);
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
   }
@@ -935,8 +1003,8 @@
     display: inline-block;
     width: 12px;
     height: 12px;
-    border: 2px solid #444;
-    border-top-color: #4ecdc4;
+    border: 2px solid var(--st-hair);
+    border-top-color: var(--st-accent);
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
     flex-shrink: 0;
@@ -944,14 +1012,14 @@
 
   @keyframes spin { to { transform: rotate(360deg); } }
 
-  .hint { color: #555; font-size: 0.73rem; font-style: italic; margin: 0; }
+  .hint { color: var(--st-hair-strong); font-size: 0.73rem; font-style: italic; margin: 0; }
 
   .error-box {
     background: rgba(233, 69, 96, 0.12);
     border: 1px solid rgba(233, 69, 96, 0.4);
     border-radius: 4px;
     padding: 0.5rem 0.6rem;
-    color: #e94560;
+    color: var(--st-text-2);
     font-size: 0.73rem;
     word-break: break-word;
   }
@@ -974,8 +1042,8 @@
 
   .regen-btn {
     background: none;
-    border: 1px solid #333;
-    color: #777;
+    border: 1px solid var(--st-hair);
+    color: var(--st-text-3);
     width: 28px;
     height: 28px;
     border-radius: 4px;
@@ -986,29 +1054,29 @@
     justify-content: center;
     transition: all 0.15s;
   }
-  .regen-btn:hover:not(:disabled) { border-color: #4ecdc4; color: #4ecdc4; }
+  .regen-btn:hover:not(:disabled) { border-color: var(--st-accent); color: var(--st-accent); }
   .regen-btn:disabled { opacity: 0.4; }
 
-  .summary { color: #bbb; font-size: 0.76rem; line-height: 1.5; margin: 0; }
+  .summary { color: var(--st-text-2); font-size: 0.76rem; line-height: 1.5; margin: 0; }
 
   /* ─── Findings ─── */
-  .section-label { color: #777; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+  .section-label { color: var(--st-text-3); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
 
   .findings { display: flex; flex-direction: column; gap: 0.35rem; }
 
   .finding {
     width: 100%;
     background: rgba(255, 255, 255, 0.02);
-    border: 1px solid #252535;
+    border: 1px solid var(--st-surface-2);
     border-radius: 5px;
     padding: 0;
     cursor: pointer;
     text-align: left;
-    color: #ccc;
+    color: var(--st-text);
     transition: border-color 0.15s;
   }
-  .finding:hover { border-color: #3a3a4a; }
-  .finding.expanded { border-color: #4a4a5a; }
+  .finding:hover { border-color: var(--st-hair); }
+  .finding.expanded { border-color: var(--st-hair-strong); }
 
   .finding-header { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.55rem; }
 
@@ -1023,31 +1091,31 @@
     line-height: 1.3;
   }
   .finding-title { flex: 1; font-size: 0.73rem; font-weight: 500; }
-  .finding-chevron { color: #555; font-size: 0.65rem; }
+  .finding-chevron { color: var(--st-hair-strong); font-size: 0.65rem; }
 
-  .finding-body { padding: 0.4rem 0.55rem 0.5rem; border-top: 1px solid #252535; }
-  .finding-body p { margin: 0 0 0.3rem; font-size: 0.72rem; color: #999; line-height: 1.45; }
-  .recommendation { color: #aaa !important; font-style: italic; }
+  .finding-body { padding: 0.4rem 0.55rem 0.5rem; border-top: 1px solid var(--st-surface-2); }
+  .finding-body p { margin: 0 0 0.3rem; font-size: 0.72rem; color: var(--st-text-2); line-height: 1.45; }
+  .recommendation { color: var(--st-text-2) !important; font-style: italic; }
 
   .finding-actions { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
   .finding-action {
     background: none;
-    border: 1px solid #333;
-    color: #888;
+    border: 1px solid var(--st-hair);
+    color: var(--st-text-3);
     font-size: 0.65rem;
     padding: 0.2rem 0.45rem;
     border-radius: 3px;
     cursor: pointer;
     transition: all 0.15s;
   }
-  .finding-action:hover { border-color: #4ecdc4; color: #4ecdc4; }
+  .finding-action:hover { border-color: var(--st-accent); color: var(--st-accent); }
 
-  .no-findings { color: #4caf50; font-size: 0.73rem; margin: 0; }
+  .no-findings { color: var(--st-ok); font-size: 0.73rem; margin: 0; }
 
   .collapsible-section { font-size: 0.72rem; }
-  .collapsible-section ol, .collapsible-section ul { margin: 0.2rem 0 0; padding-left: 1.1rem; color: #999; line-height: 1.5; }
+  .collapsible-section ol, .collapsible-section ul { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--st-text-2); line-height: 1.5; }
 
-  .meta { color: #444; font-size: 0.6rem; text-align: right; padding-top: 0.3rem; border-top: 1px solid #1a1a2e; }
+  .meta { color: var(--st-hair); font-size: 0.6rem; text-align: right; padding-top: 0.3rem; border-top: 1px solid var(--st-surface-2); }
 
   /* ─── Placeholder tabs ─── */
   .placeholder {
@@ -1061,17 +1129,17 @@
   }
   .placeholder-icon {
     font-size: 1.5rem;
-    color: #333;
+    color: var(--st-hair);
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    border: 2px solid #252535;
+    border: 2px solid var(--st-surface-2);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 0.3rem;
   }
-  .placeholder p { color: #666; font-size: 0.75rem; margin: 0; line-height: 1.4; }
+  .placeholder p { color: var(--st-text-3); font-size: 0.75rem; margin: 0; line-height: 1.4; }
 
   /* ─── Build / Chat ─── */
   .build-container {
@@ -1101,19 +1169,48 @@
     padding: 2rem 0;
   }
 
+  /* The brand mark, held well back — it identifies the surface without
+     asking to be looked at, which is the whole job of an empty state. */
+  .chat-empty-mark {
+    font-size: 2rem;
+    line-height: 1;
+    color: var(--st-accent);
+    opacity: 0.28;
+    margin-bottom: 0.15rem;
+  }
+
   .chat-empty-title {
-    color: #888;
-    font-size: 0.8rem;
+    color: var(--st-text-2);
+    font-size: 0.85rem;
     font-weight: 600;
-    margin: 0;
+    margin: 0 0 0.55rem;
   }
 
-  .chat-empty-hint {
-    color: #555;
+  .chat-empty-chips {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 5px;
+    width: 100%;
+    max-width: 260px;
+  }
+
+  /* Stated as things you could pick, and greyed because you cannot yet. The
+     italic hint lines this replaces looked like an apology for the panel. */
+  .chat-chip {
+    padding: 0.4rem 0.6rem;
+    border: 1px solid var(--st-hair);
+    border-radius: var(--st-radius);
+    background: var(--st-surface-2);
+    color: var(--st-text-2);
     font-size: 0.7rem;
-    margin: 0;
-    font-style: italic;
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s;
   }
+  .chat-chip:hover:not(:disabled) { border-color: var(--st-hair-strong); color: var(--st-text); }
+  .chat-chip:disabled { opacity: 0.55; cursor: default; }
 
   .chat-msg {
     display: flex;
@@ -1142,41 +1239,41 @@
   }
 
   .chat-user .chat-bubble {
-    background: #1a4a7a;
-    color: #ddd;
+    background: var(--st-surface-3);
+    color: var(--st-text);
     border-bottom-right-radius: 2px;
   }
 
   .chat-ai .chat-bubble {
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid #252535;
-    color: #bbb;
+    border: 1px solid var(--st-surface-2);
+    color: var(--st-text-2);
     border-bottom-left-radius: 2px;
   }
 
   .chat-system .chat-bubble {
     background: rgba(78, 205, 196, 0.08);
     border: 1px solid rgba(78, 205, 196, 0.2);
-    color: #4ecdc4;
+    color: var(--st-accent);
     font-size: 0.68rem;
     padding: 0.3rem 0.5rem;
   }
 
   .chat-msg.building .chat-bubble {
-    color: #888;
+    color: var(--st-text-3);
     font-style: italic;
   }
 
   .change-summary {
     font-size: 0.62rem;
-    color: #4ecdc4;
+    color: var(--st-accent);
     padding: 0 0.2rem;
     font-weight: 500;
   }
 
   .raw-response {
     font-size: 0.6rem;
-    color: #888;
+    color: var(--st-text-3);
     padding: 0.15rem 0.2rem;
   }
   .raw-response summary {
@@ -1186,7 +1283,7 @@
   .raw-response pre {
     margin: 0.25rem 0 0;
     padding: 0.4rem;
-    background: #1a1a2e;
+    background: var(--st-surface-2);
     border-radius: 4px;
     white-space: pre-wrap;
     word-break: break-all;
@@ -1196,7 +1293,7 @@
   }
 
   .chat-meta {
-    color: #444;
+    color: var(--st-hair);
     font-size: 0.58rem;
     padding: 0 0.2rem;
   }
@@ -1206,7 +1303,7 @@
     display: flex;
     gap: 0.4rem;
     padding: 0.45rem 0.75rem;
-    border-top: 1px solid #0f3460;
+    border-top: 1px solid var(--st-hair);
     flex-shrink: 0;
   }
 
@@ -1223,30 +1320,30 @@
 
   .draft-apply {
     background: rgba(78, 205, 196, 0.15);
-    border-color: #4ecdc4;
-    color: #4ecdc4;
+    border-color: var(--st-accent);
+    color: var(--st-accent);
   }
   .draft-apply:hover { background: rgba(78, 205, 196, 0.25); }
 
   .draft-retry {
     background: rgba(240, 165, 0, 0.1);
-    border-color: #f0a500;
-    color: #f0a500;
+    border-color: var(--st-warn);
+    color: var(--st-warn);
   }
   .draft-retry:hover { background: rgba(240, 165, 0, 0.2); }
 
   .draft-cancel {
     background: rgba(255, 255, 255, 0.03);
-    border-color: #444;
-    color: #888;
+    border-color: var(--st-hair);
+    color: var(--st-text-3);
   }
-  .draft-cancel:hover { background: rgba(255, 255, 255, 0.06); color: #bbb; }
+  .draft-cancel:hover { background: rgba(255, 255, 255, 0.06); color: var(--st-text-2); }
 
   /* ─── Post-build review ─── */
   .post-build-bar {
     display: flex;
     padding: 0.35rem 0.75rem;
-    border-top: 1px solid #0f3460;
+    border-top: 1px solid var(--st-hair);
     flex-shrink: 0;
   }
 
@@ -1256,7 +1353,7 @@
     background: rgba(79, 195, 247, 0.08);
     border: 1px solid rgba(79, 195, 247, 0.3);
     border-radius: 5px;
-    color: #4fc3f7;
+    color: var(--st-info);
     font-size: 0.7rem;
     font-weight: 600;
     cursor: pointer;
@@ -1269,7 +1366,7 @@
   .fix-issues-btn {
     background: rgba(240, 165, 0, 0.08);
     border-color: rgba(240, 165, 0, 0.3);
-    color: #f0a500;
+    color: var(--st-warn);
   }
   .fix-issues-btn:hover {
     background: rgba(240, 165, 0, 0.15);
@@ -1281,17 +1378,17 @@
     display: flex;
     gap: 0.4rem;
     padding: 0.5rem 0.75rem;
-    border-top: 1px solid #0f3460;
+    border-top: 1px solid var(--st-hair);
     flex-shrink: 0;
     align-items: flex-end;
   }
 
   .chat-input {
     flex: 1;
-    background: #0f3460;
-    border: 1px solid #1a4a7a;
+    background: var(--st-hair);
+    border: 1px solid var(--st-surface-3);
     border-radius: 6px;
-    color: #ddd;
+    color: var(--st-text);
     font-size: 0.75rem;
     padding: 0.4rem 0.5rem;
     resize: none;
@@ -1300,10 +1397,10 @@
   }
   .chat-input:focus {
     outline: none;
-    border-color: #4ecdc4;
+    border-color: var(--st-accent);
   }
   .chat-input::placeholder {
-    color: #555;
+    color: var(--st-hair-strong);
   }
   .chat-input:disabled {
     opacity: 0.5;
@@ -1312,10 +1409,10 @@
   .chat-send {
     width: 36px;
     height: 36px;
-    background: #0f3460;
-    border: 1px solid #1a4a7a;
+    background: var(--st-hair);
+    border: 1px solid var(--st-surface-3);
     border-radius: 6px;
-    color: #ccc;
+    color: var(--st-text);
     font-size: 1rem;
     cursor: pointer;
     display: flex;
@@ -1325,9 +1422,9 @@
     flex-shrink: 0;
   }
   .chat-send:hover:not(:disabled) {
-    background: #1a4a7a;
-    border-color: #4ecdc4;
-    color: #4ecdc4;
+    background: var(--st-surface-3);
+    border-color: var(--st-accent);
+    color: var(--st-accent);
   }
   .chat-send:disabled {
     opacity: 0.4;
@@ -1335,8 +1432,8 @@
   }
   .stop-btn {
     background: rgba(233, 69, 96, 0.15);
-    border-color: #e94560;
-    color: #e94560;
+    border-color: var(--st-text-2);
+    color: var(--st-text-2);
     font-size: 0.7rem;
   }
   .stop-btn:hover {
diff --git a/web/src/components/pro/ProPanel.svelte b/web/src/components/pro/ProPanel.svelte
index 4893f0a8d..44d96d9e6 100644
--- a/web/src/components/pro/ProPanel.svelte
+++ b/web/src/components/pro/ProPanel.svelte
@@ -823,6 +823,27 @@
   let proGridOpen = $state(true);
   $effect(() => { gridStage; proGridOpen = true; });
 
+  /*
+   * A stage-less tab has no errand, so the grid has nothing to be open for.
+   * ──────────────────────────────────────────────────────────────────────
+   * `PRO_TAB_STAGE` maps Project and the assistant to `''` — they act on the
+   * application, not on a step of the work — and neither appears in the
+   * stage's groups. Leaving the grid up in front of them shows a list you
+   * cannot get back to what you are reading from.
+   *
+   * The Project CELL already collapsed the grid on its way out, which covered
+   * the reader who arrives through the panel and nobody who arrives from
+   * anywhere else. `openAiPanel` in App.svelte sets `proActiveTab` from the
+   * header, so on a phone the assistant rendered UNDERNEATH the whole command
+   * grid — 750 px down a 300 px sheet, reachable only by scrolling past every
+   * command in the stage. That is the overlap; this is the rule that covers
+   * both doors.
+   *
+   * Declared after the effect above so that when both answer the same change
+   * this one settles it: effects run in creation order.
+   */
+  $effect(() => { if (PRO_TAB_STAGE[uiStore.proActiveTab] === '') proGridOpen = false; });
+
   /**
    * The command the panel is currently showing, if any.
    *
@@ -1744,6 +1765,15 @@
   /* ─── Content area ─── */
   .pro-content {
     flex: 1;
+    /*
+       Without this the scroller is not a scroller. `flex: 1` sets the grow
+       factor, but a flex item's `min-height` defaults to `auto`, so this box
+       still refuses to be shorter than its contents — it grew 26 px past the
+       bottom of `.pro-panel` and put that much of every tab underneath the
+       phone's bottom bar. It scrolled, so the clipping read as the panel
+       simply ending there.
+    */
+    min-height: 0;
     overflow-y: auto;
     padding: 0;
   }
diff --git a/web/src/lib/i18n/locales/en.ts b/web/src/lib/i18n/locales/en.ts
index 0178e4186..3d27eefe7 100644
--- a/web/src/lib/i18n/locales/en.ts
+++ b/web/src/lib/i18n/locales/en.ts
@@ -6259,8 +6259,20 @@ const en: Record<string, string> = {
   'design.stagePurpose.floorsNotVerified': '{n} footing(s) not verified',
   'design.stagePurpose.detailing': 'Coordinates the bars the design produced into assemblies. The drawings, the schedule, the report and the 3-D view are projections of it.',
   'ai.devShort': 'in development',
-  'ai.devTitle': 'In development — not usable yet',
-  'ai.devBody': 'The assistant is being built. You can see the shape it will take, but it does not answer or change the model yet: the controls are disabled on purpose. Nothing here touches your structure.',
+  'ai.tabBuild': 'Build',
+  'ai.tabReview': 'Review',
+  'ai.tabExplain': 'Explain',
+  'ai.tabQuery': 'Query',
+  'ai.emptyBuild': 'Describe a structure',
+  'ai.emptyChange': 'Describe a structure or a change',
+  'ai.exBeam': 'simply supported beam, 6 m, 10 kN/m',
+  'ai.exPortal': 'portal frame, 8 m span, 5 m height',
+  'ai.exBridge': 'a bridge with two piers',
+  'ai.exBay': 'add one bay on the right',
+  'ai.exStory': 'add a storey',
+  'ai.exProfile': 'change all beams to IPE 400',
+  'ai.exFrame3': 'a new 3-storey frame',
+  'ai.devNote': 'In development — it does not answer or change the model yet.',
   'ai.devPlaceholder': 'Not available yet',
   'ai.describeChange': 'Describe a change or a new structure…',
   'ai.describeBuild': 'Describe what to build…',
diff --git a/web/src/lib/i18n/locales/es.ts b/web/src/lib/i18n/locales/es.ts
index 9c50da0ef..ef4e870c9 100644
--- a/web/src/lib/i18n/locales/es.ts
+++ b/web/src/lib/i18n/locales/es.ts
@@ -6251,8 +6251,20 @@ const es: Record<string, string> = {
   'design.stagePurpose.floorsNotVerified': '{n} zapata(s) sin verificar',
   'design.stagePurpose.detailing': 'Coordina en conjuntos las barras que produjo el diseño. Los planos, la planilla, el informe y la vista 3D son proyecciones de él.',
   'ai.devShort': 'en desarrollo',
-  'ai.devTitle': 'En desarrollo — todavía no se puede usar',
-  'ai.devBody': 'El asistente está en construcción. Podés ver cómo va a funcionar, pero todavía no responde ni modifica el modelo: los controles están desactivados a propósito. Nada de lo que veas acá afecta tu estructura.',
+  'ai.tabBuild': 'Construir',
+  'ai.tabReview': 'Revisar',
+  'ai.tabExplain': 'Explicar',
+  'ai.tabQuery': 'Consultar',
+  'ai.emptyBuild': 'Describí una estructura',
+  'ai.emptyChange': 'Describí una estructura o un cambio',
+  'ai.exBeam': 'viga simplemente apoyada, 6 m, 10 kN/m',
+  'ai.exPortal': 'pórtico, 8 m de luz, 5 m de altura',
+  'ai.exBridge': 'un puente con dos pilas',
+  'ai.exBay': 'agregá un vano a la derecha',
+  'ai.exStory': 'agregá un piso',
+  'ai.exProfile': 'cambiá todas las vigas a IPE 400',
+  'ai.exFrame3': 'un pórtico nuevo de 3 pisos',
+  'ai.devNote': 'En desarrollo — todavía no responde ni modifica el modelo.',
   'ai.devPlaceholder': 'Todavía no disponible',
   'ai.describeChange': 'Describí un cambio o una estructura nueva…',
   'ai.describeBuild': 'Describí qué construir…',
diff --git a/web/src/lib/i18n/locales/pt.ts b/web/src/lib/i18n/locales/pt.ts
index df6e415e0..aa5f8744c 100644
--- a/web/src/lib/i18n/locales/pt.ts
+++ b/web/src/lib/i18n/locales/pt.ts
@@ -5069,8 +5069,20 @@ const pt: Translations = {
   'config.mobileSection': 'Celular',
   'ribbon.groupModel': 'Modelagem',
   'ai.devShort': 'em desenvolvimento',
-  'ai.devTitle': 'Em desenvolvimento — ainda não dá para usar',
-  'ai.devBody': 'O assistente está em construção. Você pode ver como vai funcionar, mas ele ainda não responde nem altera o modelo: os controles estão desativados de propósito. Nada aqui afeta a sua estrutura.',
+  'ai.tabBuild': 'Construir',
+  'ai.tabReview': 'Revisar',
+  'ai.tabExplain': 'Explicar',
+  'ai.tabQuery': 'Consultar',
+  'ai.emptyBuild': 'Descreva uma estrutura',
+  'ai.emptyChange': 'Descreva uma estrutura ou uma mudança',
+  'ai.exBeam': 'viga simplesmente apoiada, 6 m, 10 kN/m',
+  'ai.exPortal': 'pórtico, 8 m de vão, 5 m de altura',
+  'ai.exBridge': 'uma ponte com dois pilares',
+  'ai.exBay': 'adicione um vão à direita',
+  'ai.exStory': 'adicione um pavimento',
+  'ai.exProfile': 'mude todas as vigas para IPE 400',
+  'ai.exFrame3': 'um pórtico novo de 3 pavimentos',
+  'ai.devNote': 'Em desenvolvimento — ainda não responde nem modifica o modelo.',
   'ai.devPlaceholder': 'Ainda não disponível',
   'ai.describeChange': 'Descreva uma mudança ou uma estrutura nova…',
   'ai.describeBuild': 'Descreva o que construir…',
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index 059325efb..b9584ab0a 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -170,6 +170,22 @@
      ──────────────────────────────────────────────────────────────────── */
   --st-sheet-h: 45vh;
 
+  /* ── The phone's bottom bar, as a number ──────────────────────────────
+     PRO and Education keep a fixed bar at the foot of the screen. Three
+     boxes have to agree about how tall it is — the bar itself, the sheet
+     that must stop above it, and `.app-body`, which gives up the height so
+     the model is never under either — and before this token they did not.
+     Both padding rules wrote `padding-bottom` on the same element, so the
+     later one simply won, the bar's 60 px was never reserved, and the bar
+     covered the bottom 61 px of every PRO panel opened on a phone.
+
+     `.mobile-bottom-bar` sets its height FROM this value rather than
+     growing to fit, which is what makes the number true instead of a
+     guess: 45 px of button, 8 px above it, and the home-indicator inset
+     below, on the handsets that have one.
+     ──────────────────────────────────────────────────────────────────── */
+  --st-bar-h: calc(53px + max(8px, env(safe-area-inset-bottom, 0px)));
+
   /* ── Semantic: surfaces ────────────────────────────────────────────────
      Four depths, dark to light. The old palette had six near-identical navy
      blues (#1a1a2e, #16213e, #0f3460, #1a3050, #0a1a30, #0f2840) doing this

From a03f4394a4b2904a69008435fb574432839eb60a Mon Sep 17 00:00:00 2001
From: Bauti <syngoviano@gmail.com>
Date: Tue, 25 Aug 2026 22:04:39 -0300
Subject: [PATCH 3/3] ai: four controls in the header corner, one centre line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`.header-actions` was `align-items: normal`, which in a flex row means
stretch. The help button and the language select declare no height of
their own, so they grew to the row's 32 px. The assistant and settings
buttons DO declare one — 26 px — so stretch did not apply to them and
they were left against the top edge, six pixels short of their
neighbours. Four controls side by side on three different centre lines.

Centring alone would have fixed the alignment and kept them looking
undersized next to the pair beside them, so both are now 32 px — the
height the other two arrive at — with the glyph and the AI wordmark
brought up to match. The phone keeps its 44 px targets: those come from
`min-height` in the mobile block, which outranks a declared height.

Gates: typecheck at baseline 479, 317 @smoke e2e.
---
 web/src/App.svelte | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 0ce37685c..73300be69 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -2417,8 +2417,21 @@
     color: white;
   }
 
+  /*
+     One row, one centre line.
+     ─────────────────────────
+     This was `align-items: normal`, which in a flex row means stretch — so
+     the help button and the language select, having no height of their own,
+     grew to the row's 32 px, while the two controls that DO declare a height
+     stayed 26 px and were left sitting against the top edge. Four controls
+     side by side on three different centre lines.
+
+     `center` is the rule; the two heights below are what keeps centring from
+     also making those two look smaller than the pair beside them.
+  */
   .header-actions {
     display: flex;
+    align-items: center;
     gap: 0.5rem;
     flex-shrink: 0;
   }
@@ -2472,8 +2485,10 @@
     display: flex;
     align-items: center;
     gap: 0.25rem;
-    height: 26px;
-    padding: 0 0.45rem;
+    /* 32 px, which is what the help button and the language select come out
+       at when they stretch — see `.header-actions`. */
+    height: 32px;
+    padding: 0 0.55rem;
     background: transparent;
     border: 1px solid var(--st-hair-strong);
     border-radius: 999px;
@@ -2484,8 +2499,8 @@
   .btn-ai:hover { background: var(--st-surface-3); color: var(--st-text); }
   .btn-ai.on { border-color: var(--st-accent); color: var(--st-text); }
 
-  .ai-glyph { font-size: 0.85rem; line-height: 1; color: var(--st-accent); }
-  .ai-word { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; }
+  .ai-glyph { font-size: 0.95rem; line-height: 1; color: var(--st-accent); }
+  .ai-word { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; }
 
   /*
      The floating △ is gone; Stabileo AI opens from the header corner. Its
@@ -2523,8 +2538,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 26px;
-    height: 26px;
+    /* Square, and the same 32 px as everything else in this row. */
+    width: 32px;
+    height: 32px;
     padding: 0;
     background: transparent;
     border: 1px solid var(--st-hair-strong);