fauna-api 0.0.0-stage → 1.0.676

package/dist/src/ui/ui.css

@@ -0,0 +1,4763 @@
+/* File — list row (modern card) */
+.file-list {
+    position: relative;
+
+    display: flex;
+    align-items: stretch;
+
+    border: 1px solid rgba(247, 239, 138, 0.10);
+    border-radius: 10px;
+
+    padding: 6px 12px;
+
+    background: rgba(24, 27, 30, 0.9);
+
+    box-sizing: border-box;
+
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+.file-list:hover {
+    background: rgba(28, 31, 34, 0.96);
+    border-color: rgba(247, 239, 138, 0.42);
+    box-shadow: 0 8px 26px -14px rgba(247, 239, 138, 0.32);
+}
+
+/* File — cozy card */
+.file-cozy {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    aspect-ratio: 1/1;
+
+    border: 1px solid rgba(247, 239, 138, 0.12);
+    border-radius: 2px;
+
+    background: rgba(24, 27, 30, 0.9);
+
+    overflow: hidden;
+
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+.file-cozy:hover {
+    transform: translateY(-2px);
+    border-color: rgba(247, 239, 138, 0.42);
+    box-shadow: 0 12px 34px -14px rgba(247, 239, 138, 0.34);
+}
+
+.file-list.active, .file-cozy.active {
+    border-color: var(--accent, #888) !important;
+    box-shadow: 0 0 0 1px var(--accent, #888),
+                0 8px 28px -10px color-mix(in srgb, var(--accent, #888) 45%, transparent) !important;
+}
+
+.file-list-preview {
+    display: none;
+}
+
+.file-cozy-preview {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    z-index: 0;
+}
+
+/* Fallback icon shown over the preview canvas when no thumbnail
+   has been painted yet. createFileElement adds the `drawn` class to
+   the file element as soon as a thumbnail is painted into the canvas. */
+.file-preview-icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: var(--accent, #888);
+    opacity: 0.45;
+    pointer-events: none;
+    z-index: 0;
+
+    transition: opacity 0.25s ease, transform 0.25s ease;
+}
+/* Once a real thumbnail is painted, fade out the fallback glyph. Only the
+   cozy view shows the full-bleed canvas; the list view keeps its avatar icon
+   (its preview canvas is display:none) so it isn't faded. */
+.file-cozy.drawn .file-preview-icon {
+    opacity: 0;
+}
+.file-list .file-preview-icon {
+    position: relative;
+    inset: auto;
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+    align-self: center;
+    flex-shrink: 0;
+    background-color: color-mix(in srgb, var(--accent, #888) 10%, transparent);
+    border-radius: 8px;
+}
+.file-list .file-preview-icon span {
+    font-size: 20px !important;
+}
+.file-cozy .file-preview-icon span {
+    font-size: 48px !important;
+}
+.file-list:hover .file-preview-icon,
+.file-cozy:not(.drawn):hover .file-preview-icon {
+    opacity: 0.7;
+    transform: scale(1.04);
+}
+
+.file-list-details, .file-cozy-details {
+    position: relative;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+
+    box-sizing: border-box;
+}
+.file-list-details {
+    height: 44px;
+    flex: 1;
+    min-width: 0;
+}
+
+.file-cozy-details {
+    align-self: stretch;
+    padding: 10px 12px;
+
+    /* A distinct, near-opaque footer so the label reads clearly against the
+       preview behind it. Own bottom radius keeps it inside the rounded card
+       even where backdrop-filter would otherwise defeat the parent's
+       overflow:hidden clip. */
+    background: rgba(14, 16, 18, 0.94);
+    border-top: 1px solid rgba(247, 239, 138, 0.14);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+}
+.file-cozy:hover .file-cozy-details {
+    border-top-color: rgba(247, 239, 138, 0.3);
+}
+
+.file-list-label, .file-cozy-label {
+    display: flex;
+    align-items: center;
+
+    gap: 10px;
+
+    padding: 4px 6px;
+
+    min-width: 0;
+    flex: 1;
+}
+.file-list-label input, .file-cozy-label input {
+    background-color: transparent;
+    color: var(--text, #F3F6FF);
+    border: none;
+    outline: none;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+
+    padding: 2px 0;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    transition: color 0.15s ease;
+}
+.file-list-label input:not([readonly]), .file-cozy-label input:not([readonly]) {
+    color: var(--accent, #888);
+    border-bottom: 1px solid color-mix(in srgb, var(--accent, #888) 50%, transparent);
+}
+
+.file-list-label span, .file-cozy-label span {
+    flex-shrink: 0;
+
+    background-color: color-mix(in srgb, var(--accent, #888) 14%, transparent);
+    color: var(--accent, #888);
+
+    border-radius: 3px;
+    padding: 2px 7px;
+
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+
+    user-select: none;
+}
+.file-cozy-label span {
+    background-color: color-mix(in srgb, var(--accent, #888) 22%, transparent);
+}
+
+.file-list-options, .file-cozy-options {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: 12px;
+
+    padding: 4px 6px;
+}
+.file-list-options span, .file-cozy-options span {
+    font-size: 20px;
+    color: var(--text, #F3F6FF);
+    opacity: 0.55;
+    cursor: pointer;
+    user-select: none;
+
+    transition: opacity 0.15s ease, color 0.15s ease;
+}
+.file-list-options span:hover, .file-cozy-options span:hover {
+    opacity: 1;
+    color: var(--accent, #888);
+}
+
+.file-load {
+    position: absolute;
+    inset: 0;
+
+    background-color: color-mix(in srgb, var(--secondary, #0E1528) 92%, transparent);
+    border-radius: inherit;
+
+    z-index: 1;
+
+    overflow: hidden;
+}
+.file-load-progress {
+    position: absolute;
+
+    width: 0%;
+    height: 100%;
+
+    background: linear-gradient(120deg,
+        color-mix(in srgb, var(--accent, #888) 10%, transparent),
+        var(--accent, #888),
+        color-mix(in srgb, var(--accent, #888) 10%, transparent));
+    background-size: 300% 300%;
+    animation: progress-gradient 10s linear infinite;
+}
+
+
+
+/* Tooltip */
+.tooltip {
+    position: fixed;
+    display: none;
+    opacity: 0;
+
+    transform: translateX(-50%);
+
+    padding: 6px 12px;
+
+    border-radius: 6px;
+
+    background-color: var(--secondary, #222);
+    color: var(--text, #fff);
+
+    font-family: inherit;
+    font-size: 12px;
+    white-space: nowrap;
+
+    pointer-events: none;
+    user-select: none;
+    z-index: 100;
+
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+
+/* Hovering ? popover menu (file options, etc.) */
+.hover {
+    /* `fixed` matches the JS positioner which feeds it viewport
+       coordinates from getBoundingClientRect ? `absolute` would drift
+       when the surrounding scroll container moves.
+       z-index needs to clear any consumer-app stacking context (sidebar,
+       page bodies with z-index: 1, etc.) without going over toast (9999)
+       or critical modals. 500 is the safe middle. */
+    position: fixed;
+    z-index: 500;
+
+    display: flex;
+    flex-direction: column;
+
+    gap: 6px;
+
+    padding: 8px;
+
+    border-radius: 6px;
+    border: 1px solid color-mix(in srgb, var(--accent, #888) 25%, transparent);
+
+    background-color: var(--secondary, #1a1a1a);
+
+    transform: translateX(-50%);
+
+    overflow: hidden;
+
+    box-shadow:
+        0 12px 32px -10px rgba(0, 0, 0, 0.55),
+        0 0 0 1px rgba(0, 0, 0, 0.35),
+        inset 0 1px 0 color-mix(in srgb, var(--accent, #888) 15%, transparent);
+}
+.hover * {
+    cursor: pointer;
+    user-select: none;
+}
+.hover span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+
+    font-size: 20px !important;
+    color: var(--text, #F3F6FF);
+
+    border-radius: 4px;
+    opacity: 0.7;
+
+    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+}
+.hover span:hover {
+    opacity: 1;
+    color: var(--accent, #888);
+    background-color: color-mix(in srgb, var(--accent, #888) 12%, transparent);
+}
+
+
+
+/* Toast ? styles live inline in the self-mounting React component (toast.tsx),
+   which renders into its own body portal so it never depends on host-app CSS. */
+
+
+
+/* Chat */
+.chat-root {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+}
+
+.chat-messages {
+    flex: 1;
+
+    display: flex;
+    flex-direction: column;
+
+    align-self: center;
+    box-sizing: border-box;
+    width: min(100%, 800px);
+    max-width: 800px;
+    min-width: 0;
+
+    gap: 20px;
+
+    /* Horizontal breathing room so the pinned sender avatar (bottom-right of
+       authored user bubbles) isn't clipped by this scroll container's overflow.
+       Top and bottom so a long log can be dragged as far down as up. */
+    padding: 36px 24px;
+
+    overflow-y: scroll;
+    scrollbar-width: none;
+}
+
+.chat-message-user {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-end;
+    align-items: stretch;
+    gap: 15px;
+    box-sizing: border-box;
+
+    max-width: 70%;
+    padding: 12px 16px;
+    border-radius: 18px;
+    border-bottom-right-radius: 6px;
+    background: var(--chat-input-bg, #FFFEFB);
+    border: 1px solid var(--chat-border, #e0e0e0);
+}
+.chat-message-model {
+    align-self: flex-start;
+    box-sizing: border-box;
+
+    max-width: 80%;
+    padding: 12px 16px;
+    border-radius: 18px;
+    border-bottom-left-radius: 6px;
+    background: transparent;
+    border: 1px solid transparent;
+
+    font-size: 14px;
+    line-height: 1.45;
+}
+
+.chat-message-user .chat-message-text {
+    text-align: left;
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+}
+
+.chat-message-text {
+    margin: 0;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 1.45;
+    color: var(--chat-text, inherit);
+}
+.chat-message-text > :first-child { margin-top: 0; }
+.chat-message-text > :last-child { margin-bottom: 0; }
+
+.chat-message-text table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+    margin: 10px 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 10px;
+    font-size: 13px;
+    line-height: 1.4;
+    font-variant-numeric: tabular-nums;
+}
+.chat-message-text th,
+.chat-message-text td {
+    padding: 7px 12px;
+    vertical-align: top;
+    border-bottom: 1px solid var(--chat-border, #e0e0e0);
+}
+.chat-message-text th:not([align]),
+.chat-message-text td:not([align]) {
+    text-align: left;
+}
+.chat-message-text th {
+    font-weight: 600;
+    white-space: nowrap;
+    background: var(--chat-secondary, #f5f5f5);
+}
+.chat-message-text tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.chat-message-user .chat-message-avatar {
+    border-color: var(--chat-input-bg, #fff);
+    background-color: var(--chat-input-bg, #f0f0f0);
+}
+
+.chat-message-user:last-child, .chat-message-model:last-child {
+    margin-bottom: 200px;
+}
+
+.chat-message-file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    max-width: 100%;
+
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+
+    user-select: none;
+}
+.chat-message-file-preview {
+    font-size: 32px !important;
+    color: var(--chat-accent, #888);
+}
+/* A file's preview: its type icon until the server preview lands, then the preview over it */
+.chat-file-thumb {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+.chat-file-thumb > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+.chat-file-thumb-on > .material-symbols-outlined { display: none; }
+.chat-message-file-thumb.chat-file-thumb-on {
+    width: 200px;
+    max-width: 100%;
+    aspect-ratio: 10 / 7;
+    border-radius: 8px;
+    background: var(--chat-secondary, #f5f5f5);
+}
+.chat-file-thumb-video.chat-file-thumb-on::after {
+    content: "play_circle";
+    position: absolute;
+    font-family: 'Material Symbols Outlined';
+    font-size: 40px;
+    line-height: 1;
+    color: #fff;
+    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
+    pointer-events: none;
+}
+.chat-message-file-label {
+    font-size: 12px;
+    color: var(--chat-accent, #888);
+    text-align: center;
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+button.chat-message-file {
+    font: inherit;
+    background: transparent;
+    align-self: flex-start;
+}
+.chat-message-file-open {
+    cursor: pointer;
+    transition: border-color 0.15s, background-color 0.15s;
+}
+.chat-message-file-open:hover {
+    border-color: var(--chat-accent, #888);
+    background-color: var(--chat-secondary, #f5f5f5);
+}
+
+/* Tool output (a command's printout) under its chip */
+.chat-tool-output > pre {
+    margin: 6px 0 0;
+    max-height: 280px;
+    overflow: auto;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: var(--chat-secondary, #f0f0f0);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    font-size: 12px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Side panel: the chat's attachments and a tab per open file */
+.chat-root-panel {
+    position: relative;
+    flex-direction: row;
+}
+.chat-main {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+/* The chat's top right buttons: the app's actions, then the side panel's */
+.chat-actions {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 5;
+    display: flex;
+    gap: 8px;
+}
+.chat-action {
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    background-color: var(--chat-secondary, #f0f0f0);
+    color: var(--chat-accent, #888);
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.18s, color 0.18s;
+}
+.chat-action:hover {
+    opacity: 1;
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-panel {
+    position: relative;
+    flex-shrink: 0;
+    min-height: 0;
+    overflow: hidden;
+    border-left: 1px solid var(--panel-border, var(--chat-border, #e0e0e0));
+    background: var(--panel-bg, var(--chat-input-bg, #fff));
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-panel-cover {
+    position: absolute;
+    inset: 0;
+    z-index: 6;
+    border-left: none;
+}
+/* Pinned to the panel's right edge at full width, so it slides in as the panel opens */
+.chat-panel-inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.chat-panel-cover .chat-panel-inner { left: 0; }
+.chat-panel-handle {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    cursor: col-resize;
+    z-index: 3;
+}
+.chat-panel-handle:hover { background: color-mix(in srgb, var(--chat-accent, #888) 25%, transparent); }
+.chat-panel-tabs {
+    display: flex;
+    align-items: stretch;
+    gap: 2px;
+    padding: 6px 6px 0;
+    border-bottom: 1px solid var(--panel-border, var(--chat-border, #e0e0e0));
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+.chat-panel-tab {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 200px;
+    padding: 6px 8px;
+    border: none;
+    border-radius: 8px 8px 0 0;
+    background: transparent;
+    color: var(--chat-accent, #888);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.chat-panel-tab .material-symbols-outlined { font-size: 16px; }
+.chat-panel-tab-on {
+    background: var(--panel-tab, var(--chat-secondary, #f0f0f0));
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-panel-tab-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chat-panel-tab-people {
+    font-size: 10px;
+    min-width: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    background: var(--chat-accent, #888);
+    color: var(--chat-input-bg, #fff);
+    text-align: center;
+}
+.chat-panel-tab-close,
+.chat-panel-hide {
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-size: 16px !important;
+    padding: 0;
+}
+.chat-panel-hide { font-size: 20px !important; padding: 4px 6px; color: var(--chat-accent, #888); }
+.chat-panel-tabs-gap { flex: 1; }
+.chat-panel-body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.chat-panel-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+}
+.chat-panel-view {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.chat-panel-empty {
+    padding: 24px 16px;
+    font-size: 13px;
+    color: var(--chat-accent, #888);
+    text-align: center;
+}
+.chat-panel-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    cursor: default;
+    user-select: none;
+    outline: none;
+}
+.chat-panel-row:hover { background: var(--chat-secondary, #f5f5f5); }
+.chat-panel-row-on { background: var(--panel-tab, var(--chat-secondary, #f0f0f0)); }
+.chat-panel-row-icon { color: var(--chat-accent, #888); font-size: 22px; }
+.chat-panel-row-thumb.chat-file-thumb-on {
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    background: var(--chat-secondary, #f5f5f5);
+}
+.chat-panel-row-thumb > img { object-fit: cover; }
+.chat-panel-row-text { min-width: 0; }
+.chat-panel-row-name {
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chat-panel-row-meta { font-size: 11px; color: var(--chat-accent, #888); }
+
+/* A file's view in a popup, for chats without a side panel */
+.chat-view-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+}
+.chat-view-modal-box {
+    position: relative;
+    width: min(1000px, 92vw);
+    height: min(760px, 88vh);
+    display: flex;
+    flex-direction: column;
+    border-radius: 14px;
+    overflow: hidden;
+    background: var(--panel-bg, var(--chat-input-bg, #fff));
+}
+.chat-view-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.chat-view-modal-close {
+    position: absolute;
+    top: 6px;
+    right: 8px;
+    z-index: 2;
+    border: none;
+    background: transparent;
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+    font-size: 20px;
+}
+
+/* The chat's repository in the message box */
+.chat-repository-holder { display: flex; align-items: center; min-width: 0; }
+.chat-repository { position: relative; display: flex; align-items: center; min-width: 0; }
+.chat-repository-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    max-width: 200px;
+    padding: 4px 10px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 14px;
+    background: transparent;
+    color: var(--chat-accent, #888);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+.chat-input-options .chat-repository-chip .material-symbols-outlined { font-size: 16px; padding: 0; }
+.chat-repository-chip:hover { background: var(--chat-secondary, #f5f5f5); }
+/* The composer draws its spans as round icon buttons; inside the chip and the menu they are plain. */
+.chat-repository .chat-repository-chip span,
+.chat-repository .chat-repository-menu span { font-size: inherit; color: inherit; padding: 0; border-radius: 0; cursor: inherit; }
+.chat-repository .chat-repository-chip span:not(.chat-repository-dot):hover,
+.chat-repository .chat-repository-menu span:not(.chat-repository-dot):hover { background-color: transparent; }
+.chat-repository-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-repository-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.chat-repository .chat-repository-dot,
+.chat-repository .chat-repository-dot:hover { background-color: #9ca3af; }
+.chat-repository .chat-repository-dot.chat-repository-running { background-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
+.chat-repository .chat-repository-dot.chat-repository-starting,
+.chat-repository .chat-repository-dot.chat-repository-saving { background-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
+.chat-repository-menu {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    right: 0;
+    z-index: 20;
+    box-sizing: border-box;
+    width: min(296px, calc(100vw - 32px));
+    padding: 8px;
+    border-radius: 14px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    background: var(--chat-input-bg, #fff);
+    color: var(--chat-text, #1a1a1a);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.08);
+    font-size: 13px;
+    line-height: 1.4;
+}
+.chat-repository-down .chat-repository-menu { bottom: auto; top: calc(100% + 10px); }
+.chat-repository-current {
+    margin-bottom: 6px;
+    padding: 10px;
+    border-radius: 10px;
+    background: var(--chat-secondary, #f5f5f5);
+}
+.chat-repository-current-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.chat-repository .chat-repository-current-row > .material-symbols-outlined { font-size: 20px; color: var(--chat-accent, #888); }
+.chat-repository-current-text { min-width: 0; }
+.chat-repository-current-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-repository-current-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--chat-accent, #888); }
+.chat-repository-actions { display: flex; gap: 6px; margin-top: 10px; }
+.chat-repository-actions button {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 8px;
+    background: var(--chat-input-bg, #fff);
+    color: var(--chat-text, #1a1a1a);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition: border-color 0.15s ease, opacity 0.15s ease;
+}
+.chat-repository-actions button:hover:not(:disabled) { border-color: var(--chat-accent, #888); }
+.chat-repository-heading {
+    padding: 6px 8px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--chat-accent, #888);
+}
+.chat-repository-list { max-height: 208px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 0 0 2px; }
+.chat-repository-list .chat-shimmer { margin: 9px 8px; }
+.chat-repository-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 13px;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+.chat-repository-option:hover:not(:disabled) { background: var(--chat-secondary, #f5f5f5); }
+.chat-repository .chat-repository-option > .material-symbols-outlined { font-size: 17px; color: var(--chat-accent, #888); }
+.chat-repository-option-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-repository-empty { padding: 7px 8px; font-size: 12px; color: var(--chat-accent, #888); }
+.chat-repository-new {
+    display: flex;
+    gap: 6px;
+    margin-top: 6px;
+    padding: 8px 0 0;
+    border-top: 1px solid var(--chat-border, #e0e0e0);
+}
+.chat-repository-new input {
+    flex: 1;
+    min-width: 0;
+    padding: 7px 10px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 12px;
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.chat-repository-new input:focus { border-color: var(--chat-accent, #888); box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.18); }
+.chat-repository-new button {
+    padding: 7px 12px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: var(--chat-text, #1a1a1a);
+    color: var(--chat-input-bg, #fff);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+}
+.chat-repository-new button:hover:not(:disabled) { opacity: 0.88; }
+.chat-repository-menu button:disabled { opacity: 0.45; cursor: default; }
+.chat-repository-error { margin: 8px 4px 2px; font-size: 12px; color: #b94b43; }
+
+/* A loading row */
+.chat-shimmer {
+    position: relative;
+    overflow: hidden;
+    height: 12px;
+    margin: 6px 0;
+    border-radius: 6px;
+    background: rgba(136, 136, 136, 0.1);
+}
+.chat-shimmer + .chat-shimmer { width: 70%; }
+.chat-shimmer::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent 0%, rgba(136, 136, 136, 0.12) 50%, transparent 100%);
+    animation: chat-shimmer 1.6s ease-in-out infinite;
+}
+
+/* Asking to make a repository so Parrot can use a computer */
+.chat-computer-veil {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(3px);
+}
+.chat-computer {
+    width: min(400px, 100%);
+    padding: 24px;
+    border-radius: 18px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    background: var(--chat-input-bg, #fff);
+    color: var(--chat-text, #1a1a1a);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.16), 0 32px 64px rgba(0, 0, 0, 0.1);
+    font-size: 14px;
+    line-height: 1.45;
+}
+.chat-computer-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    margin-bottom: 14px;
+    border-radius: 12px;
+    background: var(--chat-secondary, #f5f5f5);
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-computer-icon .material-symbols-outlined { font-size: 24px; }
+.chat-computer-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
+.chat-computer-text { margin: 0 0 16px; color: var(--chat-accent, #888); }
+.chat-computer-prices {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: var(--chat-secondary, #f5f5f5);
+    font-size: 13px;
+}
+.chat-computer-price { display: flex; align-items: flex-start; gap: 8px; }
+.chat-computer-price .material-symbols-outlined { font-size: 18px; color: var(--chat-accent, #888); }
+.chat-computer-price b { font-weight: 600; }
+.chat-computer-payer { font-size: 12px; color: var(--chat-accent, #888); }
+.chat-computer-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--chat-accent, #888); }
+.chat-computer-name {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 9px 12px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 10px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.chat-computer-name:focus { border-color: var(--chat-accent, #888); box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.18); }
+.chat-computer-error { margin-top: 8px; font-size: 12px; color: #b94b43; }
+.chat-computer-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
+.chat-computer-buttons button {
+    padding: 9px 16px;
+    border-radius: 10px;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
+}
+.chat-computer-buttons button:active:not(:disabled) { transform: scale(0.97); }
+.chat-computer-buttons button:disabled { opacity: 0.5; cursor: default; }
+.chat-computer-no { border: 1px solid var(--chat-border, #e0e0e0); background: transparent; color: var(--chat-text, #1a1a1a); }
+.chat-computer-no:hover:not(:disabled) { background: var(--chat-secondary, #f5f5f5); }
+.chat-computer-yes { border: 1px solid transparent; background: var(--chat-text, #1a1a1a); color: var(--chat-input-bg, #fff); }
+.chat-computer-yes:hover:not(:disabled) { opacity: 0.88; }
+
+
+/* Message actions row */
+.chat-message-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.chat-message-user:hover .chat-message-actions,
+.chat-message-model:hover .chat-message-actions {
+    opacity: 1;
+}
+.chat-message-actions span {
+    font-size: 18px !important;
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+    user-select: none;
+    padding: 4px;
+    border-radius: 4px;
+    transition: color 0.15s;
+}
+.chat-message-actions span:hover {
+    color: var(--chat-text, #1a1a1a);
+}
+
+/* Reactions: folded under the message they point at. */
+.chat-reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 6px;
+}
+.chat-reaction {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: auto;
+    padding: 2px 9px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 999px;
+    background: var(--chat-secondary, #f0f0f0);
+    color: var(--chat-text, #1a1a1a);
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.5;
+    cursor: pointer;
+}
+.chat-reaction:hover {
+    border-color: var(--chat-accent, #888);
+}
+.chat-reaction.mine {
+    border-color: var(--chat-reaction-mine, var(--chat-accent, #888));
+    background: var(--chat-reaction-mine-bg, var(--chat-input-bg, #FFFEFB));
+}
+.chat-reaction-count {
+    font-size: 12px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--chat-accent, #888);
+}
+.chat-reaction-picker {
+    display: flex;
+    gap: 2px;
+    align-self: flex-start;
+    margin-top: 6px;
+    padding: 4px;
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 999px;
+    background: var(--chat-input-bg, #FFFEFB);
+    transform-origin: left center;
+}
+.chat-reaction-picker button {
+    height: auto;
+    padding: 2px 6px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    font: inherit;
+    font-size: 18px;
+    line-height: 1.3;
+    cursor: pointer;
+}
+.chat-reaction-picker button:hover {
+    background: var(--chat-secondary, #f0f0f0);
+}
+/* Queue strip ? queued messages pinned just above the composer. */
+.chat-queue {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 8px;
+}
+.chat-queue:empty {
+    display: none;
+}
+.chat-queue-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    padding: 7px 8px 7px 12px;
+    border-radius: 10px;
+
+    background-color: var(--chat-secondary, #f0f0f0);
+    border: 1px dashed var(--chat-accent, #c8c8c8);
+
+    overflow: hidden;
+    box-sizing: border-box;
+}
+.chat-queue-item-icon {
+    font-size: 18px !important;
+    color: var(--chat-accent, #888);
+    flex-shrink: 0;
+}
+.chat-queue-item-label {
+    flex: 1;
+    min-width: 0;
+
+    font-size: 13px;
+    color: var(--chat-text, #1a1a1a);
+    opacity: 0.85;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.chat-queue-item-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+}
+.chat-queue-item-actions span {
+    font-size: 18px !important;
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+    user-select: none;
+    padding: 3px;
+    border-radius: 4px;
+    transition: color 0.15s;
+}
+.chat-queue-item-actions span:hover {
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-queue-item-actions .chat-queue-remove:hover {
+    color: #f87171;
+}
+
+/* Room mode: "Steer all" header, shown above the queued chips when >1 message
+   is waiting on the current reply. Clicking stops the in-flight reply so the
+   server re-answers the whole (larger) transcript after the debounce window. */
+.chat-queue-steer-all {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    padding: 6px 10px;
+    border-radius: 10px;
+
+    background-color: var(--chat-accent, #c8c8c8);
+    color: var(--chat-input-bg, #fffefb);
+
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+
+    cursor: pointer;
+    user-select: none;
+    transition: filter 0.15s, transform 0.1s;
+}
+.chat-queue-steer-all span.material-symbols-outlined {
+    font-size: 16px !important;
+}
+.chat-queue-steer-all:hover {
+    filter: brightness(1.08);
+}
+.chat-queue-steer-all:active {
+    transform: translateY(1px);
+}
+
+
+.chat-thinking {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    border-radius: 16px;
+    background: var(--chat-secondary, #f0f0f0);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    font-size: 12px;
+    color: var(--chat-accent, #888);
+    line-height: 1.4;
+    overflow: hidden;
+    position: relative;
+}
+
+.chat-thinking::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent 0%, rgba(136, 136, 136, 0.08) 40%, rgba(136, 136, 136, 0.15) 50%, rgba(136, 136, 136, 0.08) 60%, transparent 100%);
+    animation: chat-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes chat-shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+.chat-thinking .material-symbols-outlined {
+    font-size: 14px;
+    animation: chat-pulse-opacity 2s ease-in-out infinite;
+}
+
+@keyframes chat-pulse-opacity {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+}
+
+.chat-tool-chip {
+    /* Block-ish so it sits on its own line between text segments and gives
+       a clean paragraph break around it. fit-content keeps it from
+       stretching across the full message bubble. */
+    display: flex;
+    align-self: flex-start;
+    align-items: center;
+    width: fit-content;
+    gap: 6px;
+    padding: 5px 12px;
+    margin: 8px 0;
+    border-radius: 12px;
+    background: var(--chat-secondary, #f0f0f0);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    font-size: 12px;
+    color: var(--chat-accent, #888);
+    line-height: 1.4;
+    position: relative;
+}
+.chat-tool-chip-running {
+    overflow: hidden;
+}
+.chat-tool-chip-running::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent 0%, rgba(136, 136, 136, 0.08) 40%, rgba(136, 136, 136, 0.15) 50%, rgba(136, 136, 136, 0.08) 60%, transparent 100%);
+    animation: chat-shimmer 2s ease-in-out infinite;
+}
+.chat-tool-chip .material-symbols-outlined {
+    font-size: 14px;
+    flex-shrink: 0;
+}
+.chat-tool-chip-label {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.chat-tool-chip-success {
+    color: #2f7d50;
+    border-color: #cfe3d5;
+    background: #f4faf6;
+}
+.chat-tool-chip-error {
+    color: #b94b43;
+    border-color: #ead1ce;
+    background: #fff7f6;
+}
+
+.chat-tool-web {
+    align-self: flex-start;
+    max-width: 100%;
+    margin: 8px 0;
+}
+.chat-tool-web > summary {
+    width: fit-content;
+    list-style: none;
+    cursor: pointer;
+}
+.chat-tool-web > summary::-webkit-details-marker {
+    display: none;
+}
+.chat-tool-web > summary .chat-tool-chip {
+    margin: 0;
+}
+.chat-tool-web-sources {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 6px 0 0 12px;
+    padding-left: 12px;
+    border-left: 1px solid var(--chat-border, #e0e0e0);
+}
+.chat-tool-web-source {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+    padding: 3px 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--chat-accent, #888);
+    text-decoration: none;
+}
+.chat-tool-web-source-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--chat-text, #1a1a1a);
+}
+.chat-tool-web-source:hover .chat-tool-web-source-title {
+    text-decoration: underline;
+}
+.chat-tool-web-source-host {
+    flex-shrink: 0;
+}
+
+/* The whole composer is one rounded pill: text on top, a controls row
+   (model selector left, attach/send right) beneath it. */
+.chat-input {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    align-self: center;
+    width: 100%;
+    max-width: 800px;
+
+    padding: 6px 8px 4px;
+    box-sizing: border-box;
+
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 16px;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
+    background-color: var(--chat-input-bg, white);
+}
+
+.chat-input-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    width: 100%;
+
+    box-sizing: border-box;
+}
+
+.chat-input-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    width: 100%;
+
+    padding: 0px 4px;
+    box-sizing: border-box;
+}
+
+.chat-input input,
+.chat-input .tokenized-root {
+    flex: 1;
+    height: 100%;
+
+    margin: 0px;
+    padding: 12px;
+
+    box-sizing: border-box;
+
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    font-family: inherit;
+    font-size: 14px;
+    color: inherit;
+}
+
+.chat-input .tokenized-root {
+    padding: 0;
+    /* Inherits flex-direction: column from .tokenized-root. Stretch (not
+       center) so the editor fills the row's width ? otherwise the empty
+       editor sizes to the placeholder text and appears centered. */
+    align-items: stretch;
+}
+.chat-input .tokenized-editor {
+    padding: 12px;
+}
+.chat-input .tokenized-suggestions {
+    bottom: calc(100% + 8px);
+}
+
+.chat-input-options {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+
+    /* Pin to the right of the controls row, regardless of whether a model
+       selector is present on the left. */
+    margin-left: auto;
+    min-width: 0;
+
+    box-sizing: border-box;
+}
+.chat-input-options span {
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+    user-select: none;
+    font-size: 22px;
+
+    padding: 8px;
+    border-radius: 50%;
+}
+.chat-input-options span:hover {
+    background-color: var(--chat-secondary, #f0f0f0);
+}
+/* Stop state ? the send button morphs into a stop control mid-stream. */
+.chat-input-options span.chat-stop {
+    color: #f87171;
+}
+.chat-input-options span.chat-stop:hover {
+    background-color: rgba(248, 113, 113, 0.15);
+}
+/* Generic catalog picker (provider icon + name + optional reasoning flyout).
+   Menu opens UPWARD so composers at the bottom of the viewport stay usable. */
+.gen-select {
+    position: relative;
+    display: inline-flex;
+}
+.gen-select-trigger {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+
+    max-width: 200px;
+    margin: 0;
+    padding: 6px 8px 6px 10px;
+
+    color: var(--chat-accent, #888);
+    background-color: transparent;
+    border: 1px solid var(--chat-secondary, #f0f0f0);
+    border-radius: 14px;
+
+    font-family: inherit;
+    font-size: 12px;
+    cursor: pointer;
+
+    transition: border-color 0.18s, color 0.18s, background-color 0.18s;
+}
+.gen-select-trigger:hover,
+.gen-select.open .gen-select-trigger {
+    color: var(--chat-text, #1a1a1a);
+    border-color: var(--chat-accent, #888);
+}
+.gen-select-trigger-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    object-fit: contain;
+}
+.gen-select-trigger-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.gen-select-caret {
+    margin-left: 2px;
+    font-size: 16px !important;
+    transition: transform 0.18s ease;
+}
+.gen-select.open .gen-select-caret {
+    transform: rotate(180deg);
+}
+
+.gen-select-menu {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 0;
+    z-index: 20;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    min-width: 200px;
+    max-width: 260px;
+    max-height: 280px;
+    padding: 6px;
+
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    background-color: var(--chat-input-bg, #fff);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 14px;
+    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
+
+    opacity: 0;
+    transform: translateY(6px);
+    pointer-events: none;
+    transition: opacity 0.16s ease, transform 0.16s ease;
+}
+
+.gen-select-menu::-webkit-scrollbar { display: none; }
+.gen-select.open .gen-select-menu {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+.gen-select-option {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+
+    width: 100%;
+    margin: 0;
+    padding: 7px 9px;
+
+    background-color: transparent;
+    border: none;
+    border-radius: 9px;
+
+    font-family: inherit;
+    font-size: 13px;
+    color: var(--chat-text, #1a1a1a);
+    text-align: left;
+    cursor: pointer;
+
+    transition: background-color 0.14s ease;
+}
+.gen-select-option:hover {
+    background-color: var(--chat-secondary, #f0f0f0);
+}
+.gen-select-option[aria-selected="true"] {
+    background-color: var(--chat-secondary, #f0f0f0);
+    font-weight: 600;
+}
+.gen-select-option-icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    object-fit: contain;
+}
+.gen-select-option-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.gen-select-option-chevron {
+    margin-left: auto;
+    font-size: 16px !important;
+    color: var(--chat-accent, #888);
+}
+.gen-select-trigger-reasoning {
+    color: var(--chat-accent, #888);
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+.gen-select-reasoning {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 21;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    min-width: 120px;
+    padding: 6px;
+
+    max-height: calc(100vh - 24px);
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    background-color: var(--chat-input-bg, #fff);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 14px;
+    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
+}
+.gen-select-reasoning-option {
+    width: 100%;
+    margin: 0;
+    padding: 7px 9px;
+
+    background-color: transparent;
+    border: none;
+    border-radius: 9px;
+
+    font-family: inherit;
+    font-size: 13px;
+    color: var(--chat-text, #1a1a1a);
+    text-align: left;
+    cursor: pointer;
+
+    transition: background-color 0.14s ease;
+}
+.gen-select-reasoning-option:hover {
+    background-color: var(--chat-secondary, #f0f0f0);
+}
+.gen-select-reasoning-option[aria-selected="true"] {
+    background-color: var(--chat-secondary, #f0f0f0);
+    font-weight: 600;
+}
+
+.gen-demographic {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    width: min(420px, 100%);
+}
+.gen-demographic-row {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.gen-demographic-head {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--chat-accent, #888);
+}
+.gen-demographic-readout {
+    color: var(--chat-text, #1a1a1a);
+}
+.gen-demographic-row input[type="range"] {
+    width: 100%;
+    accent-color: #3B5BB8;
+}
+.gen-demographic-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.gen-demographic-chips button {
+    border: 1px solid var(--chat-border, #e0e0e0);
+    background: var(--chat-input-bg, #fff);
+    color: var(--chat-text, #1a1a1a);
+    font: inherit;
+    font-size: 12px;
+    padding: 5px 10px;
+    border-radius: 999px;
+    cursor: pointer;
+}
+.gen-demographic-chips button.is-selected {
+    border-color: rgba(59, 91, 184, 0.35);
+    background: #E8EEFC;
+    color: #3B5BB8;
+}
+
+.chat-input-parts {
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    gap: 10px;
+    padding: 0px 4px;
+
+    width: 100%;
+    height: 0px;
+    opacity: 0;
+
+    /* Collapsed by default ? keep it from contributing any space (or stray
+       border) above the text row when there are no attachments. It lives
+       inside the single .chat-input pill now, so it needs no border of its
+       own. attachPart() animates the height open. */
+    overflow: hidden;
+
+    box-sizing: border-box;
+}
+
+.chat-input-part {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    gap: 8px;
+
+    border: 1px solid var(--chat-border, #e0e0e0);
+
+    overflow: hidden;
+
+    border-radius: 10px;
+
+    width: 100px;
+    height: 100%;
+
+    box-sizing: border-box;
+
+    user-select: none;
+}
+.chat-input-part-delete {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 1;
+
+    font-size: 14px !important;
+    color: var(--chat-accent, #888);
+    background: var(--chat-input-bg, #fff);
+    border-radius: 50%;
+
+    cursor: pointer;
+}
+.chat-input-part-thumb.chat-file-thumb-on {
+    width: 84px;
+    height: 64px;
+    border-radius: 6px;
+    background: var(--chat-secondary, #f5f5f5);
+}
+.chat-input-part-thumb > img { object-fit: cover; }
+.chat-input-part-preview {
+    font-size: 32px !important;
+    color: var(--chat-accent, #888);
+}
+.chat-input-part-label {
+    font-size: 11px;
+    text-align: center;
+    color: var(--chat-accent, #888);
+}
+
+
+
+/* Tokenized Input */
+.tokenized-root {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.tokenized-editor {
+    flex: 1;
+    min-height: 20px;
+
+    margin: 0;
+    padding: 0;
+
+    box-sizing: border-box;
+
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    font-family: inherit;
+    font-size: 14px;
+    color: inherit;
+
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+
+    line-height: 1.6;
+    cursor: text;
+}
+
+.tokenized-editor:empty::before {
+    content: attr(data-placeholder);
+    color: var(--chat-accent, #888);
+    pointer-events: none;
+    font-style: normal;
+}
+
+/* Read-only token chip rendered inside sent/loaded messages. Mirrors the
+   composer's .tokenized-token, minus the remove control. */
+.chat-message-token {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    min-width: 0;
+
+    padding: 0px 8px;
+    margin: 0 1px;
+
+    border-radius: 12px;
+    background-color: var(--chat-secondary, #f0f0f0);
+    border: 1px solid var(--chat-border, #e0e0e0);
+
+    font-size: 13px;
+    line-height: 1.4;
+
+    vertical-align: middle;
+    user-select: none;
+}
+
+.chat-message-token-icon {
+    font-size: 14px !important;
+    color: var(--chat-accent, #888);
+}
+
+.chat-message-token-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tokenized-token {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    min-width: 0;
+
+    padding: 0px 6px 0px 8px;
+    margin: 0 1px;
+
+    border-radius: 12px;
+    background-color: var(--chat-secondary, #f0f0f0);
+    border: 1px solid var(--chat-border, #e0e0e0);
+
+    font-size: 13px;
+    line-height: inherit;
+
+    vertical-align: middle;
+    user-select: none;
+    cursor: default;
+
+    transition: background-color 0.15s, border-color 0.15s;
+}
+.tokenized-token:hover {
+    border-color: var(--chat-accent, #888);
+}
+
+.tokenized-token-icon {
+    font-size: 14px !important;
+    color: var(--chat-accent, #888);
+}
+
+.tokenized-token-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tokenized-token-remove {
+    font-size: 14px !important;
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+    border-radius: 50%;
+    padding: 1px;
+    transition: color 0.15s, background-color 0.15s;
+    opacity: 0.5;
+}
+.tokenized-token-remove:hover {
+    opacity: 1;
+    color: #f87171;
+    background-color: rgba(248, 113, 113, 0.1);
+}
+
+.tokenized-suggestions {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 220px;
+    max-width: 360px;
+    max-height: 240px;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    background-color: var(--chat-input-bg, white);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    border-radius: 10px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+
+    padding: 4px;
+
+    z-index: 50;
+}
+
+.tokenized-suggestion {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    padding: 8px 12px;
+    border-radius: 8px;
+
+    cursor: pointer;
+    user-select: none;
+
+    transition: background-color 0.1s;
+}
+.tokenized-suggestion:hover,
+.tokenized-suggestion.active {
+    background-color: var(--chat-secondary, #f0f0f0);
+}
+
+.tokenized-suggestion-icon {
+    font-size: 18px !important;
+    color: var(--chat-accent, #888);
+    flex-shrink: 0;
+}
+
+.tokenized-suggestion-image {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    object-fit: cover;
+}
+
+.tokenized-suggestion-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.tokenized-suggestion-label {
+    font-size: 13px;
+    font-weight: 500;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.tokenized-suggestion-subtitle {
+    font-size: 11px;
+    color: var(--chat-accent, #888);
+    opacity: 0.7;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+
+/* Explorer */
+.explorer-root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.explorer-toolbar {
+    position: relative;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 14px 18px;
+    gap: 14px;
+
+    flex-shrink: 0;
+}
+.explorer-toolbar::after {
+    content: '';
+    position: absolute;
+    left: 18px;
+    right: 18px;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(to right,
+        transparent,
+        color-mix(in srgb, var(--accent, #888) 35%, transparent) 12%,
+        color-mix(in srgb, var(--accent, #888) 35%, transparent) 88%,
+        transparent);
+    pointer-events: none;
+}
+
+.explorer-breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    flex: 1;
+    min-width: 0;
+
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    font-size: 13px;
+    letter-spacing: 0.01em;
+}
+.explorer-breadcrumbs::-webkit-scrollbar { display: none; }
+.explorer-breadcrumb-home {
+    font-size: 18px !important;
+    color: var(--accent, #888);
+
+    cursor: pointer;
+    user-select: none;
+
+    opacity: 0.55;
+    transition: opacity 0.18s ease, transform 0.18s ease, text-shadow 0.18s ease;
+}
+.explorer-breadcrumb-home:hover {
+    opacity: 1;
+    transform: scale(1.08);
+    text-shadow: 0 0 8px color-mix(in srgb, var(--accent, #888) 50%, transparent);
+}
+.explorer-breadcrumb-sep {
+    opacity: 0.35;
+    user-select: none;
+
+    font-size: 12px;
+    color: var(--accent, #888);
+}
+.explorer-breadcrumb {
+    cursor: pointer;
+    user-select: none;
+
+    white-space: nowrap;
+
+    padding: 4px 8px;
+    border-radius: 7px;
+
+    opacity: 0.6;
+
+    transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease;
+}
+.explorer-breadcrumb:hover {
+    opacity: 1;
+    color: var(--accent, #888);
+    background-color: color-mix(in srgb, var(--accent, #888) 10%, transparent);
+}
+.explorer-breadcrumb.current {
+    opacity: 1;
+    cursor: default;
+    color: var(--accent, #888);
+    font-weight: 500;
+}
+.explorer-breadcrumb.current:hover {
+    background-color: transparent;
+}
+
+/* Right-side toolbar column ? stacks view switches above file actions */
+.explorer-actions-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.explorer-actions,
+.explorer-view-switch {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.explorer-actions span,
+.explorer-view-switch span {
+    font-size: 20px;
+
+    color: var(--text, #F3F6FF);
+
+    cursor: pointer;
+    user-select: none;
+
+    padding: 6px;
+    border-radius: 8px;
+
+    opacity: 0.55;
+    transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease;
+}
+.explorer-actions span:hover,
+.explorer-actions span.active,
+.explorer-view-switch span:hover,
+.explorer-view-switch span.active {
+    opacity: 1;
+    color: var(--accent, #888);
+    background-color: color-mix(in srgb, var(--accent, #888) 10%, transparent);
+}
+
+.explorer-body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+.explorer-body::-webkit-scrollbar { display: none; }
+
+.explorer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px 18px;
+}
+.explorer-list.cozy {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 14px;
+    padding: 18px;
+}
+
+.explorer-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding: 80px 20px;
+    gap: 14px;
+
+    user-select: none;
+}
+.explorer-empty span {
+    font-size: 56px;
+    color: var(--accent, #888);
+    opacity: 0.35;
+
+    padding: 18px;
+    border-radius: 50%;
+    background: radial-gradient(circle, color-mix(in srgb, var(--accent, #888) 12%, transparent), transparent 65%);
+}
+.explorer-empty div {
+    font-size: 13px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    opacity: 0.55;
+}
+.explorer-empty-hint {
+    font-size: 12px !important;
+    letter-spacing: 0.02em !important;
+    text-transform: none !important;
+    opacity: 0.4 !important;
+}
+
+.explorer-retry {
+    cursor: pointer;
+
+    padding: 7px 18px;
+
+    border-radius: 8px;
+    border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
+
+    font-size: 12px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+
+    opacity: 0.7 !important;
+    transition: opacity 0.15s, border-color 0.15s, background-color 0.15s;
+
+    margin-top: 6px;
+}
+.explorer-retry:hover {
+    opacity: 1 !important;
+    border-color: currentColor;
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.explorer-loading {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    padding: 10px 14px;
+}
+.explorer-loading-skeleton {
+    height: 52px;
+    border-radius: 10px;
+    background: linear-gradient(120deg,
+        color-mix(in srgb, var(--secondary, #f0f0f0) 60%, transparent),
+        color-mix(in srgb, var(--accent, #e0e0e0) 30%, transparent),
+        color-mix(in srgb, var(--secondary, #f0f0f0) 60%, transparent));
+    background-size: 300% 300%;
+    animation: progress-gradient 3s linear infinite;
+    opacity: 0.4;
+}
+
+.explorer-dropzone {
+    position: absolute;
+    inset: 8px;
+
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    background: radial-gradient(circle at center,
+        color-mix(in srgb, var(--accent, #888) 14%, transparent),
+        color-mix(in srgb, var(--accent, #888) 4%, transparent) 60%);
+
+    border: 2px dashed color-mix(in srgb, var(--accent, #888) 65%, transparent);
+    border-radius: 12px;
+
+    color: var(--accent, #888);
+    font-size: 13px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+
+    z-index: 10;
+    user-select: none;
+
+    box-shadow: inset 0 0 60px color-mix(in srgb, var(--accent, #888) 18%, transparent);
+}
+.explorer-dropzone span {
+    font-size: 40px;
+    text-shadow: 0 0 18px color-mix(in srgb, var(--accent, #888) 50%, transparent);
+}
+
+/* Integrations ? connections panel (card grid) */
+.connections-root {
+    width: 100%;
+}
+
+.connections-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 14px;
+    width: 100%;
+}
+
+.connection-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    padding: 16px;
+
+    border: 1px solid var(--border, color-mix(in srgb, var(--text, #1a1a18) 12%, transparent));
+    border-radius: 14px;
+
+    background: color-mix(in srgb, var(--text, #1a1a18) 3%, var(--surface, #fff));
+
+    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+.connection-card:hover {
+    border-color: color-mix(in srgb, var(--text, #1a1a18) 22%, transparent);
+    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
+    transform: translateY(-1px);
+}
+.connection-card.connected {
+    border-color: color-mix(in srgb, #22c55e 45%, transparent);
+}
+
+.connection-card-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.connection-card-logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 40px;
+    height: 40px;
+    flex: 0 0 40px;
+
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--text, #1a1a18) 5%, transparent);
+}
+.connection-card-logo svg {
+    width: 24px;
+    height: 24px;
+    display: block;
+}
+.connection-card-titles {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+    flex: 1;
+}
+.connection-card-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text, #1a1a18);
+    line-height: 1.2;
+}
+.connection-card-status {
+    font-size: 12px;
+    color: color-mix(in srgb, var(--text, #1a1a18) 55%, transparent);
+}
+.connection-card-check {
+    font-size: 20px !important;
+    color: #22c55e;
+}
+
+.connection-card-accounts {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.connection-account {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    padding: 7px 10px;
+
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--text, #1a1a18) 4%, transparent);
+}
+.connection-account-label {
+    flex: 1;
+    min-width: 0;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font-size: 13px;
+    color: var(--text, #1a1a18);
+}
+.connection-account-unlink {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 22px;
+    height: 22px;
+    padding: 0;
+
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: color-mix(in srgb, var(--text, #1a1a18) 45%, transparent);
+
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease;
+}
+.connection-account-unlink span {
+    font-size: 16px !important;
+}
+.connection-account-unlink:hover {
+    color: #ef4444;
+    background-color: rgba(239, 68, 68, 0.12);
+}
+
+.connection-card-connect {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+
+    margin-top: auto;
+    padding: 9px 14px;
+
+    border: 1px solid var(--border, color-mix(in srgb, var(--text, #1a1a18) 14%, transparent));
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text, #1a1a18);
+
+    cursor: pointer;
+    user-select: none;
+
+    font-size: 13px;
+    font-weight: 600;
+
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.connection-card-connect span:first-child {
+    font-size: 18px !important;
+}
+.connection-card-connect:hover {
+    background: color-mix(in srgb, var(--text, #1a1a18) 6%, transparent);
+    border-color: color-mix(in srgb, var(--text, #1a1a18) 26%, transparent);
+}
+.connection-card.connected .connection-card-connect {
+    font-weight: 500;
+    color: color-mix(in srgb, var(--text, #1a1a18) 70%, transparent);
+}
+
+
+/* Social sign-in buttons (UI.Authentification.createOAuthButtons).
+   Themed via --oauth-* custom properties so each app can recolor without
+   touching this stylesheet. */
+.oauth-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    width: 100%;
+}
+
+.oauth-divider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    margin: 4px 0;
+
+    color: var(--oauth-muted, #9a9a9a);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+.oauth-divider::before,
+.oauth-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--oauth-border, #e0e0e0);
+}
+
+.oauth-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+
+    width: 100%;
+    padding: 11px 16px;
+
+    border: 1px solid var(--oauth-border, #e0e0e0);
+    border-radius: var(--oauth-radius, 10px);
+    background: var(--oauth-bg, #ffffff);
+    color: var(--oauth-text, #1a1a1a);
+
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+
+    cursor: pointer;
+    user-select: none;
+
+    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
+}
+.oauth-button:hover {
+    background: var(--oauth-bg-hover, color-mix(in srgb, var(--oauth-bg, #ffffff) 92%, #000));
+    border-color: var(--oauth-border-hover, color-mix(in srgb, var(--oauth-border, #e0e0e0) 70%, #000));
+    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.45);
+}
+.oauth-button:active {
+    transform: translateY(1px);
+}
+
+.oauth-button-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 18px;
+    height: 18px;
+}
+.oauth-button-icon svg {
+    display: block;
+}
+
+.oauth-button-label {
+    white-space: nowrap;
+}
+
+
+/* Animations */
+@keyframes progress-gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 300% 50%;
+    }
+}
+
+
+/* -- Shared hang avatars (chat + talk, built in generative.tsx) ------------ */
+
+/* User badge bottom-right; model catalog icon bottom-left. */
+.chat-message-authored {
+    position: relative;
+    padding-right: 14px;
+}
+.chat-message-avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    object-fit: cover;
+
+    background-color: var(--chat-secondary, #f0f0f0);
+    border: 2px solid var(--chat-input-bg, #fff);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+}
+.chat-message-authored .chat-message-avatar {
+    position: absolute;
+    right: -12px;
+    bottom: -12px;
+    z-index: 2;
+}
+
+/* MODEL bubbles: producing model's icon pinned bottom-left. */
+.chat-message-model-authored {
+    position: relative;
+    padding-left: 14px;
+}
+.chat-message-model-authored .chat-message-model-avatar {
+    position: absolute;
+    left: -12px;
+    bottom: -12px;
+    z-index: 2;
+}
+.chat-message-model-avatar-fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px !important;
+    color: var(--chat-accent, #888);
+}
+
+/* Roster: the row of member avatars pinned to the top of a live room. */
+.chat-room-roster {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+
+    padding: 10px 12px;
+    margin-bottom: 4px;
+
+    background: transparent;
+}
+.chat-room-member {
+    display: flex;
+    align-items: center;
+}
+.chat-room-member .chat-message-avatar {
+    width: 28px;
+    height: 28px;
+    transition: transform 0.15s;
+}
+.chat-room-member .chat-message-avatar:hover {
+    transform: translateY(-2px);
+}
+
+/* Shown when the live Parrot room is destroyed (reap / host leave). */
+.chat-room-ended {
+    margin: 12px 8px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--text-muted, #6b7280);
+    background: var(--surface-2, rgba(0, 0, 0, 0.04));
+}
+
+/* Typing indicator, styled like common messaging apps ? a subtle line that
+   appears above the input when someone is typing. */
+.chat-room-typing {
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+
+    font-size: 12px;
+    font-style: italic;
+    color: var(--chat-accent, #888);
+
+    padding: 0 4px;
+    transition: opacity 0.2s, height 0.2s, margin 0.2s;
+}
+.chat-room-typing-active {
+    height: 16px;
+    opacity: 1;
+    margin-bottom: 6px;
+}
+
+
+/* -- Per-message actions: floating hover-out pill ----------------------------
+   Overrides the in-flow ".chat-message-actions" row defined earlier. The
+   per-message options (copy, ...) now live in a rounded pill that hovers out on
+   message hover, freeing the bubble's bottom-right corner for the pinned sender
+   avatar. User + model share the same pill wrapper; it sits in the left gutter
+   for user turns and just below the bubble for model turns. A transparent
+   bridge fills the small gap to the bubble so moving the cursor onto the pill
+   never drops the :hover. */
+.chat-message-user,
+.chat-message-model {
+    position: relative;
+}
+
+.chat-message-actions {
+    position: absolute;
+    z-index: 3;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+
+    margin: 0;
+    padding: 2px 6px;
+    border-radius: 999px;
+
+    background-color: var(--chat-input-bg, #fff);
+    border: 1px solid var(--chat-border, #e0e0e0);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+/* Both user + model: the pill hovers out just ABOVE the bubble for consistent
+   placement. Model aligns to the bubble's left edge, user to the right edge; the
+   bottom-right corner stays clear for the pinned sender avatar. */
+.chat-message-model .chat-message-actions,
+.chat-message-user .chat-message-actions {
+    bottom: calc(100% + 5px);
+    top: auto;
+    transform: translateY(6px);
+}
+.chat-message-model .chat-message-actions {
+    left: 0;
+    right: auto;
+}
+.chat-message-user .chat-message-actions {
+    right: 0;
+    left: auto;
+}
+
+.chat-message-time {
+    width: auto !important;
+    height: auto !important;
+    padding: 0 4px !important;
+    font-size: 10px !important;
+    line-height: 1.2;
+    color: var(--chat-accent, #888);
+    white-space: nowrap;
+    user-select: none;
+    cursor: default;
+}
+
+/* Transparent bridge fills the gap BELOW the pill (down to the bubble top) so
+   moving the cursor from the bubble onto the pill never drops the :hover. */
+.chat-message-actions::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 8px;
+}
+
+.chat-message-user:hover .chat-message-actions,
+.chat-message-model:hover .chat-message-actions {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+.chat-message-actions span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+
+    font-size: 16px !important;
+    color: var(--chat-accent, #888);
+    cursor: pointer;
+    user-select: none;
+
+    border-radius: 50%;
+    line-height: 1;
+    transition: color 0.15s, background-color 0.15s;
+}
+.chat-message-actions span:hover {
+    color: var(--chat-text, #1a1a1a);
+    background-color: var(--chat-secondary, #f0f0f0);
+}
+
+.talk {
+    --talk-text: var(--chat-text, #1a1a1a);
+    --talk-accent: var(--chat-accent, #888);
+    --talk-border: var(--chat-border, #e0e0e0);
+    --talk-bg: var(--chat-input-bg, #fff);
+    --talk-assistant: #E8EEFC;
+    --talk-blue: #3B5BB8;
+    --talk-rose: #B85C5C;
+    --talk-rose-soft: #FBEFEF;
+
+    display: grid;
+    grid-template-columns: 1fr minmax(0, 0fr);
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.talk.is-split {
+    grid-template-columns: minmax(240px, 38%) 1fr;
+}
+
+.talk-stage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+    padding: 36px 28px;
+    min-width: 0;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.talk-orb {
+    position: relative;
+    width: 168px;
+    height: 168px;
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+}
+
+.talk-orb-core {
+    width: 86px;
+    height: 86px;
+    border-radius: 50%;
+    background:
+        radial-gradient(circle at 35% 30%, #fffefb, #d7e0f7 42%, var(--talk-blue) 100%);
+    box-shadow:
+        0 10px 28px rgba(59, 91, 184, 0.22),
+        inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.talk-orb-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 1px solid rgba(59, 91, 184, 0.18);
+    opacity: 0.35;
+}
+
+.talk-orb-ring:nth-child(2) {
+    inset: 18px;
+}
+
+.talk-orb-idle .talk-orb-core {
+    animation: talkBreathe 3.6s ease-in-out infinite;
+}
+
+.talk-orb-connecting .talk-orb-core,
+.talk-orb-listening .talk-orb-core {
+    animation: talkListen 2.6s ease-in-out infinite;
+}
+
+.talk-orb-talking .talk-orb-core {
+    animation: talkSpeak 0.7s ease-in-out infinite;
+    background:
+        radial-gradient(circle at 35% 30%, #fffefb, #c9d6f6 36%, var(--talk-blue) 100%);
+}
+
+.talk-orb-listening .talk-orb-ring,
+.talk-orb-connecting .talk-orb-ring {
+    animation: talkRipple 3.2s ease-out infinite;
+}
+
+.talk-orb-talking .talk-orb-ring {
+    animation: talkRipple 2.2s ease-out infinite;
+}
+
+.talk-orb-talking .talk-orb-ring:nth-child(2) {
+    animation-delay: 0.4s;
+}
+
+@keyframes talkBreathe {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.04); }
+}
+
+@keyframes talkListen {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.08); }
+}
+
+@keyframes talkSpeak {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.14); }
+}
+
+@keyframes talkRipple {
+    0% { transform: scale(0.86); opacity: 0.45; }
+    100% { transform: scale(1.12); opacity: 0; }
+}
+
+.talk-status {
+    margin: 0;
+    width: min(280px, 100%);
+    text-align: left;
+    font-size: 15px;
+    letter-spacing: 0.04em;
+    color: var(--talk-accent);
+}
+
+.talk-error {
+    margin: 0;
+    width: min(280px, 100%);
+    text-align: left;
+    color: var(--talk-rose);
+    font-size: 13px;
+}
+
+.talk-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    width: min(280px, 100%);
+}
+
+.talk-stage .gen-select {
+    align-self: center;
+    width: max-content;
+}
+
+.talk-stage .gen-demographic {
+    width: 100%;
+}
+
+.talk-stage .gen-demographic-head {
+    text-align: left;
+}
+
+.talk-stage .gen-demographic-chips {
+    justify-content: center;
+}
+
+.talk-start,
+.talk-hang-up {
+    border: none;
+    font: inherit;
+    font-size: 14px;
+    padding: 10px 22px;
+    border-radius: 999px;
+    cursor: pointer;
+    align-self: center;
+}
+
+.talk-start {
+    background: var(--talk-blue);
+    color: #fff;
+}
+
+.talk-hang-up {
+    background: var(--talk-rose-soft);
+    color: var(--talk-rose);
+}
+
+.talk-log {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+    padding: 20vh 28px 20vh;
+    opacity: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+.talk.is-split .talk-log {
+    overflow-x: hidden;
+    overflow-y: auto;
+    opacity: 1;
+    pointer-events: auto;
+    mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+}
+
+.talk-bubble {
+    max-width: 86%;
+    padding: 12px 16px;
+    border-radius: 18px;
+    background: var(--talk-bg);
+    border: 1px solid var(--talk-border);
+}
+
+.talk-bubble .chat-message-avatar {
+    border-color: var(--talk-bg, #fff);
+    background-color: var(--talk-bg, #f0f0f0);
+}
+
+.talk-bubble-text {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.45;
+    color: var(--talk-text);
+}
+
+.talk-bubble-user {
+    align-self: flex-end;
+    border-bottom-right-radius: 6px;
+}
+
+.talk-bubble-assistant {
+    align-self: flex-start;
+    border-bottom-left-radius: 6px;
+    background: var(--talk-assistant);
+    border-color: rgba(59, 91, 184, 0.12);
+}
+
+.talk-memory {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 6px;
+    max-width: 86%;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: var(--talk-bg);
+    border: 1px solid var(--talk-border);
+    color: var(--talk-text);
+    font-size: 12px;
+}
+
+.talk-memory .material-symbols-outlined {
+    font-size: 16px;
+    color: var(--talk-blue);
+    flex-shrink: 0;
+}
+
+.talk-memory-text {
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.talk-type {
+    display: inline;
+    animation: talkTypeIn 0.38s ease-out both;
+}
+
+@keyframes talkTypeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.tickets-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 80;
+    pointer-events: none;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.tickets-overlay.is-dragging,
+.tickets-overlay.is-dragging * {
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.tickets-vignette {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    /* Quadratic falloff: opacity ≈ 0.22 + 0.56 r², centered. */
+    background: radial-gradient(
+        ellipse 90% 80% at 50% 50%,
+        rgba(8, 8, 10, 0.22) 0%,
+        rgba(8, 8, 10, 0.26) 25%,
+        rgba(8, 8, 10, 0.36) 50%,
+        rgba(8, 8, 10, 0.49) 70%,
+        rgba(8, 8, 10, 0.64) 85%,
+        rgba(8, 8, 10, 0.78) 100%
+    );
+}
+
+.tickets-pin-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: auto;
+    cursor: auto;
+}
+
+.tickets-pin-layer.is-aiming {
+    cursor: none;
+}
+
+.tickets-pin-cursor {
+    pointer-events: none;
+}
+
+.tickets-pin-wrap {
+    position: absolute;
+    transform: translate(-50%, -100%);
+    pointer-events: auto;
+    z-index: 2;
+    color: #f7ef8a;
+}
+
+.tickets-pin-wrap::before {
+    content: "";
+    position: absolute;
+    inset: -28px;
+}
+
+.tickets-pin-wiggle {
+    display: block;
+    transform-origin: 50% 100%;
+}
+
+.tickets-pin-wrap > .tickets-pin-wiggle > svg {
+    position: relative;
+    display: block;
+    color: inherit;
+}
+
+.tickets-pin-wrap.is-peeking {
+    z-index: 3;
+}
+
+.tickets-pin {
+    position: absolute;
+    transform: translate(-50%, -100%);
+    pointer-events: none;
+}
+
+.tickets-pin svg {
+    color: #f7ef8a;
+}
+
+.tickets-pin-draft {
+    position: absolute;
+    pointer-events: none;
+}
+
+.tickets-pin-draft.is-nested {
+    left: 50%;
+    top: 100%;
+}
+
+.tickets-pin-draft {
+    cursor: auto;
+}
+
+.tickets-pin-draft .tickets-cancel,
+.tickets-pin-draft .tickets-cancel *,
+.tickets-pin-draft .tickets-create,
+.tickets-pin-draft .tickets-create * {
+    cursor: pointer;
+}
+
+.tickets-pin-clone {
+    position: absolute;
+    transform: translate(-50%, -100%);
+    pointer-events: none;
+    color: inherit;
+}
+
+.tickets-pin-draft-inner {
+    position: absolute;
+    left: 14px;
+    top: 0;
+    transform: translateY(-28px);
+    pointer-events: auto;
+}
+
+.tickets-pin-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.tickets-pin-field {
+    display: inline-grid;
+    align-items: center;
+    box-sizing: border-box;
+    width: max-content;
+    min-width: 88px;
+    min-height: 42px;
+    max-width: min(280px, 70vw);
+    background: #151515;
+    border: 1px solid rgba(247, 239, 138, 0.35);
+    border-radius: 7px;
+    padding: 11px 14px;
+}
+
+.tickets-pin-field:focus-within {
+    border-color: rgba(247, 239, 138, 0.85);
+    box-shadow: 0 0 0 2px rgba(247, 239, 138, 0.16);
+}
+
+.tickets-pin-field > textarea,
+.tickets-pin-field > span {
+    grid-area: 1 / 1;
+    font: inherit;
+    font-size: 14px;
+    line-height: 1.35;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.tickets-pin-field > span {
+    visibility: hidden;
+    min-width: 88px;
+}
+
+.tickets-pin-field.is-readonly > span {
+    visibility: visible;
+    color: #fff;
+}
+
+.tickets-pin-field > textarea {
+    resize: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: 0;
+    color: #fff;
+    padding: 0;
+    cursor: text;
+}
+
+.tickets-pin-field > textarea:focus {
+    outline: none;
+}
+
+.tickets-pin-field > textarea::placeholder {
+    color: #8a8a8a;
+}
+
+.tickets-pin-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tickets-cancel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-height: 42px;
+    padding: 0 17px;
+    border: 1px solid rgba(247, 239, 138, 0.45);
+    border-radius: 7px;
+    background: transparent;
+    color: #f7ef8a;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 0.22s, border-color 0.22s;
+}
+
+.tickets-cancel:hover {
+    border-color: #fff8b8;
+    background: rgba(247, 239, 138, 0.08);
+}
+
+.tickets-cancel:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+.tickets-panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    font-family: inherit;
+    background: #151515;
+    border: 1px solid rgba(247, 239, 138, 0.28);
+    border-radius: 16px;
+    overflow: hidden;
+    pointer-events: auto;
+    z-index: 1;
+    box-shadow:
+        0 0 0 0 rgba(247, 239, 138, 0),
+        0 18px 48px -24px rgba(0, 0, 0, 0.55);
+    --chat-secondary: #1c1c1c;
+    --chat-border: rgba(247, 239, 138, 0.22);
+    --chat-accent: rgba(247, 239, 138, 0.72);
+    --chat-input-bg: #1c1c1c;
+    --chat-text: #ffffff;
+}
+
+.tickets-panel-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 14px;
+    color: #fff;
+    font-size: 15px;
+    cursor: grab;
+    user-select: none;
+    border-bottom: 1px solid rgba(247, 239, 138, 0);
+}
+
+.tickets-panel-bar:active {
+    cursor: grabbing;
+}
+
+.tickets-panel-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.tickets-panel-brand canvas {
+    width: 22px;
+    height: 22px;
+    display: block;
+    flex-shrink: 0;
+}
+
+.tickets-panel-brand > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tickets-resize {
+    position: absolute;
+    z-index: 3;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.tickets-resize-n,
+.tickets-resize-s {
+    left: 10px;
+    right: 10px;
+    height: 8px;
+    cursor: ns-resize;
+}
+
+.tickets-resize-e,
+.tickets-resize-w {
+    top: 10px;
+    bottom: 10px;
+    width: 8px;
+    cursor: ew-resize;
+}
+
+.tickets-resize-n { top: 0; }
+.tickets-resize-s { bottom: 0; }
+.tickets-resize-e { right: 0; }
+.tickets-resize-w { left: 0; }
+
+.tickets-resize-ne,
+.tickets-resize-nw,
+.tickets-resize-se,
+.tickets-resize-sw {
+    width: 14px;
+    height: 14px;
+}
+
+.tickets-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
+.tickets-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
+.tickets-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
+.tickets-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
+
+.tickets-panel-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.tickets-pin-draft button.tickets-create,
+.tickets-panel-actions .tickets-create {
+    color: #111416;
+}
+
+.tickets-board {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.tickets-board-head {
+    padding: 16px 18px 10px;
+    color: #f7ef8a;
+    font-size: 10px;
+    font-weight: 650;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+}
+
+.tickets-board-rule {
+    height: 1px;
+    margin: 0 18px;
+    border-radius: 999px;
+    background: rgba(247, 239, 138, 0.16);
+}
+
+.tickets-list {
+    flex: 1;
+    overflow: auto;
+    padding: 4px 8px 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.tickets-row {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 3px;
+    width: 100%;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid rgba(247, 239, 138, 0.1);
+    color: #fff;
+    padding: 12px 10px;
+    cursor: pointer;
+    text-align: left;
+}
+
+.tickets-row-line {
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 2px;
+    height: 2px;
+    border-radius: 999px;
+    background: #f7ef8a;
+    transform: scaleX(0);
+    transform-origin: left center;
+    pointer-events: none;
+}
+
+.tickets-row:last-child {
+    border-bottom: none;
+}
+
+.tickets-row-top {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.tickets-row-top strong {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 560;
+}
+
+.tickets-row-top time {
+    flex-shrink: 0;
+    color: rgba(247, 239, 138, 0.62);
+    font-size: 11px;
+}
+
+.tickets-row-preview {
+    color: rgba(255, 255, 255, 0.48);
+    font-size: 12px;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tickets-row.is-unread .tickets-row-preview {
+    color: rgba(255, 255, 255, 0.78);
+}
+
+.tickets-compose {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 14px 14px;
+}
+
+.tickets-compose input {
+    flex: 1;
+    min-width: 0;
+    height: 42px;
+    background: #1c1c1c;
+    border: 1px solid rgba(247, 239, 138, 0.22);
+    border-radius: 7px;
+    color: #fff;
+    padding: 0 14px;
+}
+
+.tickets-compose input:focus {
+    outline: none;
+    border-color: rgba(247, 239, 138, 0.55);
+}
+
+.tickets-create {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-shrink: 0;
+    min-height: 42px;
+    padding: 0 17px;
+    border: 1px solid #f7ef8a;
+    border-radius: 7px;
+    background: #f7ef8a;
+    color: #111416;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+.tickets-create .material-symbols-outlined {
+    font-size: 18px;
+    font-weight: normal;
+}
+
+.tickets-create:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+.tickets-empty-hero {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.tickets-empty-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+
+.tickets-empty-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 28px 22px 8px;
+}
+
+.tickets-empty-ornament {
+    width: 46px;
+    margin: 0 0 16px;
+}
+
+.tickets-empty-rule {
+    display: block;
+    height: 3px;
+    border-radius: 999px;
+    background: rgba(247, 239, 138, 0.72);
+}
+
+.tickets-empty-kicker {
+    margin-bottom: 10px;
+    color: #f7ef8a;
+    font-size: 10px;
+    font-weight: 650;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+}
+
+.tickets-empty-title {
+    color: #fff;
+    font-size: 34px;
+    font-weight: 560;
+    letter-spacing: -0.04em;
+    line-height: 0.98;
+}
+
+.tickets-empty-hint {
+    max-width: 320px;
+    margin-top: 12px;
+    color: rgba(255, 255, 255, 0.55);
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.tickets-empty-features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+    margin-top: 16px;
+}
+
+.tickets-empty-features span {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.48);
+    font-size: 11px;
+}
+
+.tickets-empty-features span::before {
+    content: "";
+    width: 12px;
+    height: 2px;
+    border-radius: 999px;
+    background: rgba(247, 239, 138, 0.7);
+}
+
+.tickets-empty-visual {
+    position: relative;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 8px 18px 0;
+    padding: 18px 16px;
+    overflow: hidden;
+    border: 1px solid rgba(247, 239, 138, 0.16);
+    border-radius: 10px;
+    background:
+        radial-gradient(circle, rgba(247, 239, 138, 0.1) 0 1px, transparent 1.2px) 0 0 / 18px 18px,
+        #1a1a1a;
+}
+
+.tickets-empty-ghost {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    max-width: 280px;
+    padding: 16px 18px;
+    border: 1px solid rgba(247, 239, 138, 0.28);
+    border-radius: 12px;
+    background: #22252a;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+}
+
+.tickets-empty-ghost::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 16px;
+    bottom: 16px;
+    width: 3px;
+    border-radius: 999px;
+    background: #f7ef8a;
+    opacity: 0.85;
+}
+
+.tickets-empty-ghost-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tickets-empty-ghost-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #f7ef8a;
+    flex-shrink: 0;
+}
+
+.tickets-empty-ghost-id {
+    width: 28px;
+    height: 14px;
+    border-radius: 6px;
+    border: 1px solid rgba(247, 239, 138, 0.22);
+    background: rgba(247, 239, 138, 0.08);
+    flex-shrink: 0;
+}
+
+.tickets-empty-ghost-title {
+    height: 10px;
+    flex: 1;
+    min-width: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.38);
+}
+
+.tickets-empty-ghost-status {
+    width: 42px;
+    height: 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(108, 142, 163, 0.4);
+    background: rgba(108, 142, 163, 0.16);
+    flex-shrink: 0;
+}
+
+.tickets-empty-ghost-line {
+    height: 8px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.18);
+}
+
+.tickets-empty-ghost-line.short {
+    width: 62%;
+}
+
+.tickets-empty-ghost-foot {
+    display: flex;
+    gap: 8px;
+    padding-top: 6px;
+    border-top: 1px solid rgba(247, 239, 138, 0.1);
+}
+
+.tickets-empty-ghost-foot i {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1px solid rgba(247, 239, 138, 0.28);
+    background: rgba(247, 239, 138, 0.06);
+}
+
+.tickets-empty-ghost-foot i:nth-child(2) {
+    opacity: 0.5;
+}
+
+.tickets-empty-hero .tickets-compose {
+    flex-shrink: 0;
+    padding-top: 14px;
+    border-top: 1px solid rgba(247, 239, 138, 0.16);
+}
+
+.tickets-stage {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+}
+
+.tickets-stage-pane {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.tickets-stage-pane[aria-hidden="true"] {
+    pointer-events: none;
+}
+
+.tickets-chat {
+    padding: 4px 14px 14px;
+    box-sizing: border-box;
+    font-family: inherit;
+    color: var(--chat-text);
+    caret-color: var(--chat-text);
+}
+
+.tickets-chat .chat-root {
+    height: 100%;
+}
+
+.tickets-chat .chat-messages {
+    padding: 36px 20px;
+}
+
+.tickets-chat .chat-message-user:last-child,
+.tickets-chat .chat-message-model:last-child {
+    margin-bottom: 28px;
+}
+
+.tickets-support {
+    position: fixed;
+    left: var(--support-left, 22px);
+    right: var(--support-right, auto);
+    bottom: var(--support-bottom, 22px);
+    z-index: 4;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 48px;
+    padding: 0 16px 0 10px;
+    border: 1px solid rgba(247, 239, 138, 0.35);
+    border-radius: 999px;
+    background:
+        radial-gradient(circle at 18% 28%, rgba(247, 239, 138, 0.22), transparent 42%),
+        #151515;
+    box-shadow:
+        0 10px 28px rgba(0, 0, 0, 0.28),
+        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+    color: #f7ef8a;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.tickets-support canvas {
+    width: 28px;
+    height: 28px;
+    display: block;
+}
+
+.tickets-support.is-unread {
+    border-color: rgba(247, 239, 138, 0.7);
+    animation: tickets-support-glow 1.8s ease-in-out infinite;
+}
+
+.tickets-support-dot {
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #f7ef8a;
+    box-shadow:
+        0 0 0 2px #151515,
+        0 0 12px rgba(247, 239, 138, 0.85);
+    pointer-events: none;
+}
+
+.tickets-support-dot::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: #f7ef8a;
+    animation: tickets-support-ping 1.6s ease-out infinite;
+}
+
+@keyframes tickets-support-glow {
+    0%, 100% {
+        box-shadow:
+            0 10px 28px rgba(0, 0, 0, 0.28),
+            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+            0 0 10px rgba(247, 239, 138, 0.18);
+    }
+    50% {
+        box-shadow:
+            0 10px 28px rgba(0, 0, 0, 0.28),
+            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+            0 0 28px 6px rgba(247, 239, 138, 0.42);
+    }
+}
+
+@keyframes tickets-support-ping {
+    0% {
+        transform: scale(1);
+        opacity: 0.65;
+    }
+    100% {
+        transform: scale(2.6);
+        opacity: 0;
+    }
+}
+
+.fauna-browser {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #fff;
+}
+
+.fauna-browser-frame {
+    width: 100%;
+    height: 100%;
+}
+
+.fauna-browser-frame iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+.fauna-browser-cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    z-index: 3;
+}
+
+.fauna-browser-ripple {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    margin: -14px 0 0 -14px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.35);
+    border: 1px solid rgba(17, 17, 17, 0.35);
+    pointer-events: none;
+    z-index: 2;
+}
+
+.fauna-browser-ripple.is-firing {
+    animation: fauna-browser-ripple 0.55s ease-out;
+}
+
+@keyframes fauna-browser-ripple {
+    from { transform: scale(0.2); opacity: 0.6; }
+    to { transform: scale(1.6); opacity: 0; }
+}
+
+.fauna-browser-badge {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    background: rgba(17, 17, 17, 0.72);
+    color: #fff;
+    font-size: 11px;
+    pointer-events: none;
+    z-index: 4;
+}
+
+.fauna-browser-badge[data-tone="good"] { background: rgba(32, 120, 72, 0.85); }
+.fauna-browser-badge[data-tone="bad"] { background: rgba(140, 36, 36, 0.85); }
+
+/* ── Live rooms: presence cursors, roster, agent confirm ──
+   Set the --roster-* variables on a parent to theme them. */
+
+.fauna-cursors {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.fauna-roster {
+    position: relative;
+}
+
+.fauna-roster-pill {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px;
+    border: 1px solid var(--roster-rule, rgba(174, 27, 40, 0.22));
+    border-radius: 999px;
+    background: var(--roster-surface, rgba(22, 22, 23, 0.82));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
+    overflow: visible;
+}
+
+.fauna-roster-seat {
+    position: relative;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 2px solid var(--roster-muted, #8A8580);
+    border-radius: 50%;
+    background: var(--roster-seat, #161617);
+    color: var(--roster-text, #E8E2DC);
+    cursor: pointer;
+}
+
+.fauna-roster-seat.in-control {
+    cursor: default;
+}
+
+.fauna-roster-seat img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.fauna-roster-agent {
+    border-color: var(--roster-ring, #A31B28);
+}
+
+.fauna-roster-agent .material-symbols-outlined {
+    font-size: 17px !important;
+}
+
+/* Sized to the holder's avatar by GSAP, and drawn just outside it. */
+.fauna-roster-ring {
+    position: absolute;
+    left: 0;
+    top: 0;
+    box-sizing: content-box;
+    margin: -5px 0 0 -5px;
+    padding: 3px;
+    border: 2px solid var(--roster-ring, #A31B28);
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px rgba(163, 27, 40, 0.18), 0 0 12px rgba(163, 27, 40, 0.4);
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.fauna-roster-badge {
+    position: absolute;
+    right: -5px;
+    bottom: -5px;
+    display: grid;
+    place-items: center;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: var(--roster-ring, #A31B28);
+    color: var(--roster-text, #E8E2DC);
+    box-shadow: 0 0 0 2px var(--roster-seat, #161617);
+}
+
+.fauna-roster-badge .material-symbols-outlined {
+    font-size: 10px !important;
+}
+
+.fauna-roster-tip {
+    position: absolute;
+    top: calc(100% + 8px);
+    transform: translateX(-50%);
+    padding: 5px 10px;
+    border: 1px solid var(--roster-rule, rgba(174, 27, 40, 0.22));
+    border-radius: 8px;
+    background: var(--roster-seat, #161617);
+    color: var(--roster-text, #E8E2DC);
+    font-family: var(--roster-font, 'IBM Plex Mono', ui-monospace, monospace);
+    font-size: 11px;
+    white-space: nowrap;
+    pointer-events: none;
+    animation: fauna-roster-tip-in 0.18s ease-out;
+}
+
+@keyframes fauna-roster-tip-in {
+    from { opacity: 0; transform: translate(-50%, -3px); }
+    to { opacity: 1; transform: translate(-50%, 0); }
+}
+
+.fauna-confirm-veil {
+    position: fixed;
+    inset: 0;
+    z-index: 500;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    background: rgba(5, 5, 6, 0.72);
+    backdrop-filter: blur(6px);
+}
+
+.fauna-confirm {
+    width: min(420px, 100%);
+    padding: 24px 26px 20px;
+    border: 1px solid var(--roster-rule, rgba(174, 27, 40, 0.22));
+    border-radius: 16px;
+    background: var(--roster-seat, #161617);
+    color: var(--roster-text, #E8E2DC);
+    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
+    font-family: Inter, system-ui, sans-serif;
+}
+
+.fauna-confirm-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+}
+
+.fauna-confirm-body {
+    margin: 12px 0 22px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--roster-muted, #8A8580);
+}
+
+.fauna-confirm-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+.fauna-confirm-actions button {
+    height: 36px;
+    padding: 0 16px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    font: 13px Inter, system-ui, sans-serif;
+    cursor: pointer;
+}
+
+.fauna-confirm-cancel {
+    background: transparent;
+    color: var(--roster-muted, #8A8580);
+}
+
+.fauna-confirm-cancel:hover {
+    color: var(--roster-text, #E8E2DC);
+}
+
+.fauna-confirm-go {
+    background: var(--roster-ring, #A31B28);
+    border-color: var(--roster-ring, #A31B28);
+    color: var(--roster-text, #E8E2DC);
+}
+
+.fauna-confirm-go:hover {
+    box-shadow: 0 0 22px rgba(163, 27, 40, 0.45);
+}
+
+
+/* Maps. Every color and size reads a --maps-* variable; apps restyle by setting them. */
+
+.maplibregl-map {
+    position: relative;
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.maplibregl-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.maplibregl-canvas-container.maplibregl-interactive {
+    cursor: grab;
+}
+
+.maplibregl-canvas-container.maplibregl-interactive:active {
+    cursor: grabbing;
+}
+
+.maplibregl-canvas-container.maplibregl-touch-drag-pan,
+.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
+    touch-action: pan-x pan-y;
+}
+
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
+    touch-action: pinch-zoom;
+}
+
+.maplibregl-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+}
+
+.fauna-map {
+    position: relative;
+    min-height: 220px;
+    overflow: hidden;
+    border: 1px solid var(--maps-rule, rgba(174, 27, 40, 0.22));
+    border-radius: var(--maps-radius, 14px);
+    background: var(--maps-canvas, #1d1d1f);
+    isolation: isolate;
+}
+
+.fauna-map-canvas {
+    position: absolute;
+    inset: 0;
+}
+
+.fauna-map-attribution {
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    max-width: calc(100% - 12px);
+    padding: 2px 6px 2px 4px;
+    border-radius: 6px;
+    background: var(--maps-attribution-surface, rgba(255, 255, 255, 0.78));
+    color: var(--maps-attribution-text, #3c3c3c);
+    font: 500 10px/1.4 var(--maps-font, Inter, system-ui, sans-serif);
+    pointer-events: none;
+}
+
+.fauna-map-attribution img {
+    height: 14px;
+}
+
+.fauna-map-attribution span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fauna-map-notice {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    z-index: 3;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: var(--maps-surface, #161617);
+    color: var(--maps-text, #E8E2DC);
+    font: 500 12px/1.4 var(--maps-font, Inter, system-ui, sans-serif);
+    opacity: 0;
+    transform: translate(-50%, -6px);
+    transition: opacity 0.2s, transform 0.2s;
+    pointer-events: none;
+}
+
+.fauna-map-notice.is-shown {
+    opacity: 1;
+    transform: translate(-50%, 0);
+}
+
+.fauna-map-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+}
+
+.fauna-map-pin {
+    width: 18px;
+    height: 18px;
+    border: 3px solid var(--maps-marker-ring, #ffffff);
+    border-radius: 50% 50% 50% 0;
+    background: var(--maps-marker, #AE1B28);
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
+    transform: rotate(-45deg);
+    transition: transform 0.2s;
+}
+
+.fauna-map-marker:hover .fauna-map-pin {
+    transform: rotate(-45deg) scale(1.15);
+}
+
+.fauna-map-marker.is-muted .fauna-map-pin {
+    background: var(--maps-marker-muted, #8A8580);
+}
+
+.fauna-map-label {
+    order: -1;
+    max-width: 160px;
+    padding: 3px 8px;
+    border-radius: 999px;
+    background: var(--maps-surface, #161617);
+    color: var(--maps-text, #E8E2DC);
+    font: 600 11px/1.3 var(--maps-font, Inter, system-ui, sans-serif);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.fauna-directions {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    container-type: inline-size;
+    color: var(--maps-text, #E8E2DC);
+    font-family: var(--maps-font, Inter, system-ui, sans-serif);
+}
+
+.fauna-directions-tabs {
+    position: relative;
+    display: flex;
+    gap: 4px;
+    padding: 4px;
+    border: 1px solid var(--maps-rule, rgba(174, 27, 40, 0.22));
+    border-radius: 999px;
+    background: var(--maps-surface, #161617);
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.fauna-directions-mark {
+    position: absolute;
+    top: 4px;
+    bottom: 4px;
+    left: 0;
+    border-radius: 999px;
+    background: var(--maps-accent, #AE1B28);
+    pointer-events: none;
+}
+
+.fauna-directions-tabs button {
+    position: relative;
+    display: inline-flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    white-space: nowrap;
+    gap: 6px;
+    height: 34px;
+    padding: 0 14px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--maps-muted, #8A8580);
+    font: 600 13px/1 var(--maps-font, Inter, system-ui, sans-serif);
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.fauna-directions-tabs button.is-current {
+    color: var(--maps-accent-text, #ffffff);
+}
+
+.fauna-directions-tabs .material-symbols-outlined {
+    font-size: 18px;
+}
+
+.fauna-directions-best {
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: var(--maps-best, rgba(255, 255, 255, 0.18));
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+/* Narrow: every way there still fits, without the icons. */
+@container (max-width: 440px) {
+    .fauna-directions-tabs button {
+        gap: 4px;
+        padding: 0 8px;
+    }
+
+    .fauna-directions-tabs .material-symbols-outlined {
+        display: none;
+    }
+}
+
+.fauna-directions-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.fauna-directions-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 4px 10px;
+}
+
+.fauna-directions-summary strong {
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+}
+
+.fauna-directions-muted {
+    margin: 0;
+    color: var(--maps-muted, #8A8580);
+    font-size: 13px;
+}
+
+.fauna-directions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.fauna-directions-step,
+.fauna-directions-flight-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 4px;
+    border-top: 1px solid var(--maps-line, rgba(255, 255, 255, 0.06));
+}
+
+.fauna-directions-step:first-child,
+.fauna-directions-flight:first-child .fauna-directions-flight-main {
+    border-top: 0;
+}
+
+.fauna-directions-step > .material-symbols-outlined,
+.fauna-directions-flight-main > .material-symbols-outlined {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: var(--maps-chip, rgba(255, 255, 255, 0.06));
+    color: var(--maps-text, #E8E2DC);
+    font-size: 18px;
+}
+
+.fauna-directions-step.is-transit > .material-symbols-outlined {
+    background: var(--maps-route-transit, #2F6FDE);
+    color: #ffffff;
+}
+
+.fauna-directions-flight-main img {
+    flex: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: #ffffff;
+    object-fit: contain;
+}
+
+.fauna-directions-step-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    font-size: 14px;
+}
+
+.fauna-directions-price {
+    font-size: 15px;
+    font-weight: 650;
+}
+
+.fauna-directions-book {
+    height: 32px;
+    padding: 0 14px;
+    border: 1px solid var(--maps-accent, #AE1B28);
+    border-radius: 999px;
+    background: var(--maps-accent, #AE1B28);
+    color: var(--maps-accent-text, #ffffff);
+    font: 600 13px/1 var(--maps-font, Inter, system-ui, sans-serif);
+    cursor: pointer;
+}
+
+.fauna-directions-book:disabled {
+    opacity: 0.6;
+    cursor: default;
+}
+
+.fauna-directions-offers {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 0 0 10px 44px;
+    padding: 0;
+    list-style: none;
+}
+
+.fauna-directions-offers button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 9px 12px;
+    border: 1px solid var(--maps-line, rgba(255, 255, 255, 0.08));
+    border-radius: 10px;
+    background: var(--maps-chip, rgba(255, 255, 255, 0.04));
+    color: var(--maps-text, #E8E2DC);
+    font: 500 13px/1.3 var(--maps-font, Inter, system-ui, sans-serif);
+    text-align: left;
+    cursor: pointer;
+}
+
+.fauna-directions-offers button span:first-child {
+    flex: 1;
+}
+
+.fauna-directions-offers .material-symbols-outlined {
+    color: var(--maps-muted, #8A8580);
+    font-size: 16px;
+}
+
+.fauna-place-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    border: 1px solid var(--maps-rule, rgba(174, 27, 40, 0.22));
+    border-radius: var(--maps-radius, 14px);
+    background: var(--maps-surface, #161617);
+    color: var(--maps-text, #E8E2DC);
+    font-family: var(--maps-font, Inter, system-ui, sans-serif);
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.fauna-place-search:focus-within {
+    border-color: var(--maps-accent, #AE1B28);
+    box-shadow: 0 0 0 4px var(--maps-focus, rgba(174, 27, 40, 0.18));
+}
+
+.fauna-place-search > .material-symbols-outlined {
+    color: var(--maps-muted, #8A8580);
+    font-size: 20px;
+}
+
+.fauna-place-search.is-busy > .material-symbols-outlined {
+    animation: fauna-place-search-busy 0.9s ease-in-out infinite;
+}
+
+@keyframes fauna-place-search-busy {
+    50% {
+        opacity: 0.35;
+    }
+}
+
+.fauna-place-search input {
+    flex: 1;
+    min-width: 0;
+    height: 44px;
+    padding: 0;
+    border: 0;
+    outline: none;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+    font-size: 15px;
+}
+
+.fauna-place-search-list {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    left: 0;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 6px;
+    border: 1px solid var(--maps-rule, rgba(174, 27, 40, 0.22));
+    border-radius: var(--maps-radius, 14px);
+    background: var(--maps-surface, #161617);
+    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
+    list-style: none;
+}
+
+.fauna-place-search-list li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.fauna-place-search-list li.is-active {
+    background: var(--maps-chip, rgba(255, 255, 255, 0.06));
+}
+
+.fauna-place-search-list .material-symbols-outlined {
+    color: var(--maps-accent, #AE1B28);
+    font-size: 20px;
+}
+
+.fauna-place-search-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.fauna-place-search-text strong {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.fauna-place-search-text span {
+    overflow: hidden;
+    color: var(--maps-muted, #8A8580);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .fauna-map-notice,
+    .fauna-map-pin,
+    .fauna-directions-tabs button {
+        transition: none;
+    }
+
+    .fauna-place-search.is-busy > .material-symbols-outlined {
+        animation: none;
+    }
+}
+
+
+/* View: a file's live room (UI.View). Themed through --view-*, falling back to the chat's colors. */
+.view-root {
+    --v-bg: var(--view-bg, var(--chat-bg, transparent));
+    --v-surface: var(--view-surface, var(--chat-secondary, #f5f5f5));
+    --v-border: var(--view-border, var(--chat-border, #e0e0e0));
+    --v-text: var(--view-text, var(--chat-text, #1a1a1a));
+    --v-muted: var(--view-muted, var(--chat-accent, #888));
+    --v-accent: var(--view-accent, var(--chat-accent, #3d7cf2));
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    background: var(--v-bg);
+    color: var(--v-text);
+}
+
+.view-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--v-border);
+    min-width: 0;
+}
+.view-bar-name {
+    font-weight: 600;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.view-bar-meta {
+    flex: 1;
+    font-size: 12px;
+    color: var(--v-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.view-bar-button,
+.view-tools button {
+    border: 1px solid var(--v-border);
+    background: var(--v-surface);
+    color: var(--v-text);
+    border-radius: 8px;
+    padding: 4px 8px;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+.view-bar-button.material-symbols-outlined,
+.view-tools button.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    line-height: 1;
+    font-size: 18px;
+    padding: 3px 5px;
+}
+.view-tools button:disabled { opacity: 0.4; cursor: default; }
+.view-tools button.view-tool-on { border-color: var(--v-accent); color: var(--v-accent); }
+
+.view-people { display: flex; align-items: center; }
+.view-person {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid;
+    margin-left: -6px;
+    background: var(--v-surface);
+}
+.view-person:first-child { margin-left: 0; }
+.view-people-more { font-size: 11px; color: var(--v-muted); margin-left: 4px; }
+
+.view-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.view-state {
+    margin: auto;
+    font-size: 13px;
+    color: var(--v-muted);
+}
+
+.view-text { flex: 1; min-height: 0; overflow: hidden; }
+.view-text .cm-editor { height: 100%; font-size: 13px; }
+
+.view-tools {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--v-border);
+}
+.view-tools-gap { flex: 1; }
+
+.view-table { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.view-table-scroll { flex: 1; overflow: auto; }
+.view-table table { border-collapse: collapse; font-size: 12px; }
+.view-table th {
+    position: sticky;
+    top: 0;
+    background: var(--v-surface);
+    color: var(--v-muted);
+    font-weight: 500;
+    padding: 3px 8px;
+    border: 1px solid var(--v-border);
+    z-index: 1;
+}
+.view-table tbody th { position: sticky; left: 0; top: auto; }
+.view-table td { border: 1px solid var(--v-border); padding: 0; min-width: 90px; }
+.view-table td input {
+    width: 100%;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    padding: 4px 6px;
+    outline: none;
+}
+.view-table td.view-cell-mine { outline: 2px solid var(--v-accent); outline-offset: -2px; }
+.view-more {
+    margin: 10px;
+    border: 1px solid var(--v-border);
+    background: var(--v-surface);
+    color: var(--v-text);
+    border-radius: 8px;
+    padding: 6px 10px;
+    cursor: pointer;
+}
+
+.view-image { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.view-image-stage {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    background-color: var(--v-surface);
+    background-image:
+        linear-gradient(45deg, rgba(128, 128, 128, 0.12) 25%, transparent 25%),
+        linear-gradient(-45deg, rgba(128, 128, 128, 0.12) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.12) 75%),
+        linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.12) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+}
+.view-image-box { position: relative; margin: auto; touch-action: none; user-select: none; }
+.view-image-box img { display: block; width: 100%; height: auto; }
+.view-image-fit .view-image-box { max-width: 100%; max-height: 100%; }
+.view-image-fit .view-image-box img { max-height: calc(100vh - 200px); object-fit: contain; }
+.view-image-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.view-mark-note,
+.view-mark-pin {
+    position: absolute;
+    transform: translate(0, -100%);
+    font-size: 12px;
+    line-height: 1.35;
+}
+.view-mark-note {
+    max-width: 200px;
+    padding: 6px 8px;
+    border-radius: 8px;
+    border: 2px solid;
+    background: var(--v-bg, #fff);
+    background: color-mix(in srgb, var(--v-surface) 92%, transparent);
+    min-width: 40px;
+    min-height: 18px;
+}
+.view-mark-pin { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; border: none; }
+.view-mark-pin .material-symbols-outlined { font-size: 26px; }
+.view-mark-pin .view-mark-text {
+    background: var(--v-surface);
+    border: 1px solid var(--v-border);
+    color: var(--v-text);
+    border-radius: 6px;
+    padding: 2px 6px;
+}
+.view-mark-picked { box-shadow: 0 0 0 2px var(--v-accent); }
+.view-mark-note textarea,
+.view-mark-pin textarea {
+    width: 180px;
+    min-height: 40px;
+    border: none;
+    background: transparent;
+    color: var(--v-text);
+    font: inherit;
+    resize: vertical;
+    outline: none;
+}
+.view-pointer { position: absolute; pointer-events: none; transform: translate(-3px, -3px); }
+.view-pointer-dot { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
+.view-pointer-name {
+    position: absolute;
+    left: 10px;
+    top: 6px;
+    color: #fff;
+    font-size: 11px;
+    padding: 1px 6px;
+    border-radius: 6px;
+    white-space: nowrap;
+}
+
+.view-video { flex: 1; min-height: 0; width: 100%; background: #000; }
+.view-audio { margin: auto; }
+.view-pdf { flex: 1; width: 100%; border: none; }
+.view-card {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 24px;
+    text-align: center;
+}
+.view-card .material-symbols-outlined { font-size: 40px; color: var(--v-muted); }
+.view-card-name { font-weight: 600; font-size: 14px; }
+.view-card-meta { font-size: 12px; color: var(--v-muted); }
+.view-card button {
+    margin-top: 6px;
+    border: 1px solid var(--v-border);
+    background: var(--v-surface);
+    color: var(--v-text);
+    border-radius: 8px;
+    padding: 6px 12px;
+    cursor: pointer;
+}