viberoom 0.7.0 → 0.8.0

package/dist/persona.js

@@ -10,6 +10,7 @@ export function skillPull(reply) {
 }
 export const SKILL_WRITER_NAME = "skill-writer";
 export const ROOM_DESIGNER_NAME = "room-designer";
+export const LOOK_DESIGNER_NAME = "look-designer";
 export const NAME_PATTERN = /^[\p{L}\p{N}][\p{L}\p{N}_-]{0,23}$/u;
 export const ROOM_SETTINGS_SPEC = {
     name: { kind: "own-path", brief: true, agent: false, doc: "The room's name; changed with rename." },
@@ -247,6 +248,7 @@ function skillsSection(skills) {
     if (skills.canCreate) {
         lines.push(`You may also create skills for the shared library when a procedure is worth reusing (by you later, or by other agents): first load the built-in skill "${SKILL_WRITER_NAME}" with the viberoom ${SKILL_TOOL_NAME} tool for the rules of a good skill, then call the viberoom tools create_skill (name, description, instructions) and attach_skill to give it to yourself or to other agents. These are MCP tools of the "viberoom" server, not your own skill commands. The human sees every new skill in Settings.`);
         lines.push(`You may also design rooms: load the built-in skill "${ROOM_DESIGNER_NAME}" first, then describe_room for the facts, lint_room_design to check a draft (it previews the brief the vibemates would read), create_template to save a template the human can pick under New room, and propose_room_changes to suggest a change to this room: it becomes a card the human applies or rejects, so nothing here changes without their click.`);
+        lines.push(`You may also design looks (how the human's window is drawn: colours, shadows, corners, fonts): load the built-in skill "${LOOK_DESIGNER_NAME}" first, then describe_looks for the facts, lint_look to check a draft (it measures whether the words read), create_look to save a look the human can pick under Settings, and propose_look_changes to suggest wearing a look or fine-tuning one: a card the human applies or rejects.`);
     }
     else if (skills.items.length) {
         lines.push("Skills are created by the human or by agents that have the hub's tools; if you want a new one, describe it in the room.");

package/dist/room.js

@@ -1205,6 +1205,11 @@ export class Room extends EventEmitter {
                 const skill = this.skills?.library.get(message.skill.name);
                 if (!message.to.length)
                     targets = targets.filter((id) => this.hasSkill(this.participants.get(id), message.skill.name));
+                if (!targets.length && !message.to.length) {
+                    const alone = [...this.runtimes.keys()].filter(live);
+                    if (alone.length === 1)
+                        targets = alone;
+                }
                 if (!targets.length)
                     this.notice(`Nobody in this room has the skill "${message.skill.name}"; attach it to an agent first, or address one with @.`, "warn");
                 if (skill) {
@@ -1241,13 +1246,19 @@ export class Room extends EventEmitter {
             this.requestTurn(id, message.to.includes(id) || !!message.skill);
     }
     hasSkill(participant, name) {
+        if (this.isBuiltinSkill(name))
+            return true;
         if (!participant?.skills)
             return false;
         const lower = name.toLowerCase();
         return participant.skills.some((s) => s.toLowerCase() === lower);
     }
+    isBuiltinSkill(name) {
+        const skill = this.skills?.library.get(name);
+        return !!skill && skill.author === BUILTIN_AUTHOR && !skill.draft && !skill.problems.length;
+    }
     attachedSkills(participant) {
-        if (!this.skills || !participant.skills?.length)
+        if (!this.skills)
             return [];
         return this.skills.library.list().filter((s) => !s.problems.length && !s.draft && this.hasSkill(participant, s.name));
     }
@@ -1443,6 +1454,116 @@ export class Room extends EventEmitter {
             warnings: proposal.warnings,
         };
     }
+    async describeLooksForAgent(participantId) {
+        const participant = this.agentInRoom(participantId);
+        if (!this.skills?.looks || !this.skills.appearance)
+            throw new Error("looks are not available in this hub");
+        const described = await this.skills.looks.describe();
+        return { you: participant.name, human: this.settings.humanName, appearance: this.skills.appearance.current(), ...described };
+    }
+    async lintLookForAgent(participantId, raw) {
+        this.agentInRoom(participantId);
+        if (!this.skills?.looks)
+            throw new Error("looks are not available in this hub");
+        try {
+            const checked = await this.skills.looks.check(raw);
+            return { ok: checked.lint.ok, id: checked.spec.id, errors: checked.lint.errors.map((e) => ({ key: e.key, message: e.message })), warnings: checked.lint.warnings.map((w) => ({ key: w.key, message: w.message })), report: checked.lint.report };
+        }
+        catch (error) {
+            return { ok: false, errors: [{ key: "spec", message: error instanceof Error ? error.message : String(error) }], warnings: [], report: [] };
+        }
+    }
+    async createLookForAgent(participantId, raw, replace) {
+        const participant = this.agentInRoom(participantId);
+        if (!this.skills?.looks)
+            throw new Error("looks are not available in this hub");
+        let saved;
+        try {
+            saved = await this.skills.looks.save(raw, { author: participant.name, replace });
+        }
+        catch (error) {
+            throw new Error(`not saved: ${error instanceof Error ? error.message : String(error)}`);
+        }
+        const warnings = saved.lint.warnings.map((w) => w.message);
+        this.postSystem(`${participant.name} saved the look "${saved.spec.label}" (Settings → Appearance).`);
+        this.log.info(`${participant.name} saved look ${saved.spec.id}`);
+        return {
+            ok: true,
+            message: `Saved the look "${saved.spec.label}" (id ${saved.spec.id}) among ${this.settings.humanName}'s own looks: it is in Settings → Appearance now, after the looks viberoom ships. Nothing is worn until ${this.settings.humanName} picks it; propose_look_changes with look "${saved.spec.id}" offers it as a card.${warnings.length ? ` Warnings: ${warnings.join("; ")}` : ""}`,
+            id: saved.spec.id,
+            warnings,
+        };
+    }
+    async proposeLookChanges(participantId, why, changes) {
+        const participant = this.agentInRoom(participantId);
+        if (!this.skills?.appearance || !this.skills.looks)
+            throw new Error("looks are not available in this hub");
+        const current = this.skills.appearance.current();
+        const patch = {};
+        const rows = [];
+        if (changes.look !== undefined) {
+            const lookId = String(changes.look).trim();
+            const known = await this.skills.appearance.ownAdjustments(lookId);
+            if (!known)
+                throw new Error(`not proposed: no look "${lookId}" (the looks viberoom ships, or one of ${this.settings.humanName}'s own by its id)`);
+            patch.look = lookId;
+            if (lookId !== current.look)
+                rows.push({ key: "look", from: current.look, to: lookId });
+        }
+        if (changes.adjust !== undefined) {
+            if (!changes.adjust || typeof changes.adjust !== "object" || Array.isArray(changes.adjust))
+                throw new Error("not proposed: adjust is an object of adjustable keys and values");
+            const lookId = String(changes.look ?? current.look);
+            const own = await this.skills.appearance.ownAdjustments(lookId);
+            if (!own)
+                throw new Error(`not proposed: no look "${lookId}" to fine-tune`);
+            const merged = { ...(current.custom?.[lookId] ?? {}), ...changes.adjust };
+            patch.custom = { [lookId]: merged };
+            const previewed = this.skills.appearance.preview({ custom: { [lookId]: merged } });
+            for (const key of Object.keys(changes.adjust)) {
+                const from = current.custom?.[lookId]?.[key] ?? own.values[key] ?? "";
+                const to = previewed.custom[lookId]?.[key] ?? "";
+                if (String(from).toLowerCase() !== String(to).toLowerCase())
+                    rows.push({ key: `${key} (${own.label})`, from, to });
+            }
+        }
+        for (const key of ["chatFontSize", "font", "mono"]) {
+            if (changes[key] === undefined)
+                continue;
+            patch[key] = changes[key];
+            const previewed = this.skills.appearance.preview({ [key]: changes[key] });
+            if (String(previewed[key]) !== String(current[key]))
+                rows.push({ key: key === "chatFontSize" ? "text size" : key === "font" ? "font" : "code font", from: current[key], to: previewed[key] });
+        }
+        this.skills.appearance.preview(patch);
+        if (!rows.length)
+            throw new Error("not proposed: the change leaves the window as it is");
+        const proposal = {
+            key: randomUUID(),
+            participantId,
+            participantName: participant.name,
+            ts: Date.now(),
+            why: String(why ?? "").trim().slice(0, 600),
+            settings: [],
+            vibemates: [],
+            appearance: rows,
+            warnings: [],
+            touchesOwn: false,
+            status: "pending",
+        };
+        this.proposalPlans.set(proposal.key, { settings: [], vibemates: [], ops: [], ids: {}, appearance: patch });
+        this.proposals.set(proposal.key, proposal);
+        this.push({ type: "proposal", proposal });
+        const what = rows.map((c) => c.key).join(", ");
+        this.postSystem(`${participant.name} proposes a change to how the window looks (${what}); apply or reject it on the card.`, "human", false, { tone: "attention" });
+        this.log.info(`look proposal ${proposal.key} from ${participant.name}: ${what}`);
+        return {
+            ok: true,
+            message: `Proposal sent to ${this.settings.humanName} as a card in the room (${what}). It changes the whole window, not this room alone; nothing changes until they apply it, and you will see a room line with the outcome.`,
+            key: proposal.key,
+            warnings: [],
+        };
+    }
     async resolveProposal(key, accept) {
         const proposal = this.proposals.get(key);
         const plan = this.proposalPlans.get(key);
@@ -1450,7 +1571,7 @@ export class Room extends EventEmitter {
             throw new Error("no such pending proposal");
         if (proposal.status !== "pending")
             return proposal;
-        const what = [...proposal.settings.map((c) => c.key), ...proposal.vibemates.map((o) => `${o.op} ${o.name}`)].join(", ");
+        const what = [...proposal.settings.map((c) => c.key), ...proposal.vibemates.map((o) => `${o.op} ${o.name}`), ...(proposal.appearance ?? []).map((c) => c.key)].join(", ");
         if (!accept) {
             proposal.status = "rejected";
             this.proposalPlans.delete(key);
@@ -1505,6 +1626,16 @@ export class Room extends EventEmitter {
                 patch[c.key] = c.key === "language" ? c.to : c.to;
             this.updateSettings(patch);
         }
+        if (plan.appearance) {
+            try {
+                if (!this.skills?.appearance)
+                    throw new Error("looks are not available in this hub");
+                this.skills.appearance.apply(plan.appearance);
+            }
+            catch (error) {
+                skipped.push(`appearance (${error instanceof Error ? error.message : String(error)})`);
+            }
+        }
         proposal.status = "applied";
         proposal.skipped = skipped;
         this.proposalPlans.delete(key);
@@ -1697,10 +1828,9 @@ export class Room extends EventEmitter {
         if (!this.skills)
             return { ok: false, reason: "skills are not available in this hub" };
         const skill = this.skills.library.get(name);
-        const builtin = !!skill && skill.author === BUILTIN_AUTHOR && !skill.draft;
         const mine = this.attachedSkills(participant).filter((s) => s.agentInvocable).map((s) => s.name);
         const list = mine.length ? `your skills: ${mine.join(", ")}` : "you have no skills";
-        if (!builtin && (!this.hasSkill(participant, name) || !mine.some((s) => s.toLowerCase() === name.toLowerCase()))) {
+        if (!this.hasSkill(participant, name) || !mine.some((s) => s.toLowerCase() === name.toLowerCase())) {
             return { ok: false, reason: `"${name}" is not one of your skills (${list})` };
         }
         if (!skill || skill.problems.length)

package/dist/server.js

@@ -137,6 +137,12 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             }
             return;
         }
+        if (req.method === "GET" && path === "/looks-custom.css") {
+            const css = await hub.looks.css();
+            res.writeHead(200, { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" });
+            res.end(css);
+            return;
+        }
         if (req.method === "GET" && STATIC_FILES[path]) {
             const entry = STATIC_FILES[path];
             const body = await readFile(staticPath(entry));
@@ -360,6 +366,15 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, target.room.describeRoomForAgent(target.participantId));
             return;
         }
+        if (req.method === "GET" && path === "/api/mcp/looks") {
+            const target = hub.resolveMcpToken(url.searchParams.get("token") ?? "");
+            if (!target) {
+                sendJson(res, 403, { error: "unknown skills token (the session it belonged to is gone)" });
+                return;
+            }
+            sendJson(res, 200, await target.room.describeLooksForAgent(target.participantId));
+            return;
+        }
         if (req.method === "GET" && path === "/api/mcp/message") {
             const target = hub.resolveMcpToken(url.searchParams.get("token") ?? "");
             if (!target) {
@@ -410,6 +425,14 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, { templates: hub.templates.list() });
             return;
         }
+        if (req.method === "GET" && path === "/api/looks") {
+            sendJson(res, 200, { looks: hub.looks.list() });
+            return;
+        }
+        if (req.method === "GET" && path === "/api/looks/describe") {
+            sendJson(res, 200, await hub.looks.describe());
+            return;
+        }
         if (req.method === "GET" && path === "/api/rooms") {
             sendJson(res, 200, [...hub.rooms.values()].map((r) => r.snapshot()));
             return;
@@ -423,6 +446,29 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, { ok: true, settings: hub.updateSettings(body) });
             return;
         }
+        if (path === "/api/looks/check") {
+            const { checkLookSpec } = await import("./looks.js");
+            try {
+                const checked = await checkLookSpec(body.spec ?? body);
+                sendJson(res, 200, { ok: checked.lint.ok, id: checked.spec.id, errors: checked.lint.errors, warnings: checked.lint.warnings, report: checked.lint.report });
+            }
+            catch (error) {
+                sendJson(res, 200, { ok: false, errors: [{ level: "error", key: "spec", message: error instanceof Error ? error.message : String(error) }], warnings: [], report: [] });
+            }
+            return;
+        }
+        if (path === "/api/looks") {
+            const saved = await hub.saveLook(body.spec ?? body, { author: "human", replace: body.replace === true || body.replace === "true" });
+            sendJson(res, 200, { ok: true, look: saved.spec, warnings: saved.lint.warnings, report: saved.lint.report });
+            return;
+        }
+        if (path === "/api/looks/remove") {
+            const id = String(body.id ?? "");
+            if (!hub.removeLook(id))
+                throw new Error(`no look "${id}" of your own to remove`);
+            sendJson(res, 200, { ok: true });
+            return;
+        }
         if (path === "/api/fs/mkdir") {
             sendJson(res, 200, { ok: true, path: await createFolder(String(body.parent ?? ""), String(body.name ?? "")) });
             return;
@@ -498,6 +544,30 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, target.room.createTemplateForAgent(target.participantId, design, body.replace === true || body.replace === "true"));
             return;
         }
+        if (path === "/api/mcp/looks/lint" || path === "/api/mcp/looks/create" || path === "/api/mcp/looks/propose") {
+            const target = hub.resolveMcpToken(String(body.token ?? ""));
+            if (!target) {
+                sendJson(res, 403, { error: "unknown skills token (the session it belonged to is gone)" });
+                return;
+            }
+            if (path === "/api/mcp/looks/lint") {
+                sendJson(res, 200, await target.room.lintLookForAgent(target.participantId, body.spec ?? body));
+                return;
+            }
+            if (path === "/api/mcp/looks/create") {
+                sendJson(res, 200, await target.room.createLookForAgent(target.participantId, body.spec ?? body, body.replace === true || body.replace === "true"));
+                return;
+            }
+            const num = (v) => (v === undefined || v === null || v === "" ? undefined : Number(v));
+            sendJson(res, 200, await target.room.proposeLookChanges(target.participantId, String(body.why ?? ""), {
+                look: typeof body.look === "string" ? body.look : undefined,
+                adjust: body.adjust && typeof body.adjust === "object" && !Array.isArray(body.adjust) ? body.adjust : undefined,
+                chatFontSize: num(body.chatFontSize),
+                font: typeof body.font === "string" ? body.font : undefined,
+                mono: typeof body.mono === "string" ? body.mono : undefined,
+            }));
+            return;
+        }
         if (path === "/api/mcp/propose") {
             const target = hub.resolveMcpToken(String(body.token ?? ""));
             if (!target) {

package/dist/skills.js

@@ -4,7 +4,7 @@ import { join, resolve } from "node:path";
 import { isReservedSkillName, RESERVED_SKILL_NAMES } from "./commands.js";
 export const SKILL_NAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]{0,31}$/;
 export const SKILL_FILE = "SKILL.md";
-import { ROOM_DESIGNER_NAME } from "./persona.js";
+import { LOOK_DESIGNER_NAME, ROOM_DESIGNER_NAME } from "./persona.js";
 export const BUILTIN_AUTHOR = "viberoom";
 export const HUMAN_AUTHOR = "human";
 const DESCRIPTION_MAX = 300;
@@ -175,7 +175,28 @@ export function renderSkillBody(body, args) {
         .replace(/\r\n/g, "\n")
         .trim();
 }
-export const BUILTIN_SKILLS = [SKILL_WRITER, ROOM_DESIGNER];
+export const LOOK_DESIGNER = {
+    name: LOOK_DESIGNER_NAME,
+    description: "How to design a good viberoom look (how the window is drawn: colours, light, corners, fonts) as data that extends a shipped look. Load it before lint_look, create_look or propose_look_changes.",
+    argumentHint: "",
+    body: [
+        "A look is data, not code: which shipped look it extends, a few hues laid over that look's palette, and what it wants otherwise (corners, fonts, shadows, the chat's paper, a part of an element). Everything the window draws is derived from the palette, so a hue changed there reaches every place that wears it; start from the shipped look closest to what is asked and change as little as says it. The facts (the looks, every hue and element with what it means, the value syntax, the fonts, how the window is set now) come from describe_looks; never guess a name, a key the look does not have is refused.",
+        "",
+        "Name what a colour looks like, not what it is for: the palette says primary, ink, bg, white, lav; the elements say which part wears which hue (bubble.bg, btn.hoverInk). Prefer changing hues over changing elements: a new accent is palette.primary plus its primaryLight, primaryDeep and primaryDark steps and its tints lav and lav2; a new paper is bg with white (the panels) a shade apart from it, and soft / softer a step off white; a new ink is ink with ink2 for the words in a bubble and ink3, muted and faint growing quieter. Change an element only when a part must differ from what the palette gives it.",
+        "",
+        "You cannot see the colours; the lint can. Every look must read: the words on a bubble and on the paper at 7:1, the quiet words at 3:1 (4.5:1 on dark paper), every ink on its own paper at 3:1. Run lint_look before you save and read the report: it names every pair with its ratio. Fix the ink before the paper (a darker muted, an ink2 nearer black), keep the accent readable where it is written on (btn.onPrimary on primary at 3:1), and give a bubble that sits on paper of nearly its own shade a hairline (bubble.border) or another shade.",
+        "",
+        "Light comes from one place, top-left, and the shadows fall from it in the palette's shadowInk; a flat look sets the shadows to none, a look with volume raises a thing with a soft shadow below it and a bevel (a light gradient over its face) and sinks a pressed one with an inset shade. Say scheme dark when the paper is dark: diagrams, marks and the quiet-word floors follow it. One accent; the state colours (green ready, yellow thinking, red error, blue waiting, violet writing) keep their families, only their shades follow the paper. Fonts by id from describe_looks (they ship with viberoom and look the same on every machine); running text at lineHeight 1.45 or more; a terminal look wants the mono font everywhere and no curves (rScale 0), a soft look rounder corners (rScale 1.2-1.6) and pills for every control (rCtlMin 99px).",
+        "",
+        "When it reads: create_look saves it among the human's own looks (Settings → Appearance, after the shipped ones, with the human's name on it); one of the human's own may be replaced with replace: true, a shipped look never. Then propose_look_changes offers it as a card (look: its id), or fine-tunes any look with the adjustables describe_looks lists (a colour as #rrggbb, a scale 0-2) — the whole window changes, not this room, and only on the human's click. What a look cannot do: no CSS of its own, no layout, no icons, no fonts beyond the shipped ids; when the human asks for such a thing, say so instead of forcing a token to carry it.",
+    ].join("\n"),
+    userInvocable: true,
+    agentInvocable: true,
+    author: BUILTIN_AUTHOR,
+    reviewed: true,
+    draft: false,
+};
+export const BUILTIN_SKILLS = [SKILL_WRITER, ROOM_DESIGNER, LOOK_DESIGNER];
 export function isBuiltinSkill(name) {
     const lower = name.trim().toLowerCase();
     return BUILTIN_SKILLS.some((b) => b.name === lower);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberoom",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "viberoom: group chat rooms for a human and several coding agents over the Agent Client Protocol",
   "type": "module",
   "engines": {

package/ui/app.css

@@ -30,7 +30,7 @@
 @supports not selector(::-webkit-scrollbar) { .rail-rooms { scrollbar-width: thin; } }
 .shell.rail-open .rail-rooms { align-items: stretch; }
 .rail-room { flex: none; }
-.rail-room [data-ui="room-mark"] { width: 40px; height: 40px; border-radius: calc(13px * var(--r-scale)); font-size: 16px; opacity: 0.72; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
+.rail-room [data-ui="room-mark"] { width: 40px; height: 40px; border-radius: var(--room-mark-radius-rail); font-size: 16px; opacity: 0.72; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
 .rail-room [data-ui="room-mark"][data-kind="emoji"] { font-size: 21px; }
 .rail-room:hover [data-ui="room-mark"] { opacity: 1; transform: translateY(-1px); }
 .rail-room.active, .rail-room.active:hover { background: transparent; box-shadow: none; }
@@ -231,18 +231,18 @@
 .home-room .hr-time { color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 700; flex: none; }
 .home-room.empty-room { cursor: default; }
 .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
-.feature { border-radius: calc(18px * var(--r-scale)); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--edge); transition: transform var(--t-fast) var(--ease-out); }
+.feature { border-radius: calc(18px * var(--r-scale)); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--feature-shadow); background-image: var(--bevel); transition: transform var(--t-fast) var(--ease-out); }
 .feature:hover { transform: translateY(-2px); }
 .feature .f-emoji { width: 46px; height: 46px; border-radius: calc(14px * var(--r-scale)); background: var(--feature-emoji-bg); display: grid; place-content: center; font-size: 24px; box-shadow: var(--shadow-tile); }
 .feature h3 { font-size: calc(15px * var(--fs-scale)); margin-top: 4px; }
 .feature p { margin: 0; font-size: calc(13px * var(--fs-scale)); font-weight: 600; line-height: 1.5; color: var(--ink-2); }
-.feature.lav { background: var(--lav); }
-.feature.mint { background: var(--mint); }
-.feature.warm { background: var(--warm); }
-.feature.peach { background: var(--feature-peach-bg); }
-.feature.rose { background: var(--rose); }
-.feature.sky { background: var(--sky); }
-.feature.orchid { background: var(--orchid); }
+.feature.lav { background-color: var(--lav); }
+.feature.mint { background-color: var(--mint); }
+.feature.warm { background-color: var(--warm); }
+.feature.peach { background-color: var(--feature-peach-bg); }
+.feature.rose { background-color: var(--rose); }
+.feature.sky { background-color: var(--sky); }
+.feature.orchid { background-color: var(--orchid); }
 .home-vendors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
 .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
 .step { display: flex; gap: 14px; align-items: flex-start; background: var(--step-bg); border-radius: calc(18px * var(--r-scale)); padding: 16px 18px; box-shadow: var(--edge); }
@@ -362,6 +362,13 @@
 .look-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .look-cards [data-ui="look-card"] { width: auto; }
 #look-dialog .look-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 14px; }
+.look-own { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
+.look-own .own-only { display: inline-flex; gap: 6px; }
+.prop-window { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: calc(12px * var(--fs-scale)); font-weight: 600; }
+.prop-window .note { display: flex; align-items: center; gap: 6px; }
+.prop-window .note > .i { width: 14px; height: 14px; flex: none; }
+.prop-look { display: flex; align-items: center; gap: 10px; }
+.prop-look [data-ui="look-card"] { width: 150px; cursor: default; }
 .look-adjust { margin-top: 4px; }
 .look-adjust .adjust-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .look-adjust .adjust-head .label { font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); }
@@ -373,14 +380,10 @@
 .adjust-group.text .field.row [data-ui="number-field"] { width: 104px; flex: none; }
 .adjust-group.text .field.row select { flex: 0 1 58%; }
 .adjust-group.text #sp-chat-sample { margin-top: 4px; }
-.bubble { max-width: 100%; background: var(--bubble-bg); border-radius: calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); padding: 12px 16px; min-width: 0; font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--bubble-ink); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-shadow); }
-.msg.mine .bubble { background: var(--bubble-mine-bg); color: var(--bubble-mine-ink); border-radius: calc(18px * var(--r-scale)) calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-mine-shadow); padding: 11px 16px; }
+.bubble { max-width: 100%; background-color: var(--bubble-bg); background-image: var(--bevel); border-radius: calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); padding: 12px 16px; min-width: 0; font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--bubble-ink); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-shadow); }
+.msg.mine .bubble { background-color: transparent; background-image: var(--bevel), var(--bubble-mine-bg); color: var(--bubble-mine-ink); border-radius: calc(18px * var(--r-scale)) calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-mine-shadow); padding: 11px 16px; }
 .msg.mine .bubble .text { color: var(--bubble-mine-ink); }
 .msg.mine.waiting .bubble { background: var(--attention-grad); box-shadow: var(--attention-shadow); }
-html[data-look="plush"] .msg .bubble { background-image: var(--bevel); }
-html[data-look="plush"] .msg.mine .bubble { background-image: var(--bevel), var(--bubble-mine-bg); }
-html[data-look="plush"] .composer-box { box-shadow: var(--input-shadow); background: var(--softer); border-radius: calc(14px * var(--r-scale)); padding: 0 12px; }
-html[data-look="plush"] .feature { box-shadow: var(--shadow-card); background-image: var(--bevel); }
 .bubble .waiting { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bubble-mine-rule); font-size: calc(13px * var(--fs-scale)); font-weight: 600; color: var(--bubble-mine-waiting-ink); }
 .bubble .waiting .i { width: 14px; height: 14px; vertical-align: -2px; }
 .bubble .waiting-text { flex: 1; min-width: 160px; }
@@ -543,7 +546,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
 .composer .smile-btn { border: 0; background: transparent; color: var(--placeholder); padding: 0; display: grid; place-content: center; width: 28px; height: 28px; border-radius: calc(8px * var(--r-scale)); flex: none; }
 .composer .smile-btn .i { width: 20px; height: 20px; }
 .composer .smile-btn:hover { color: var(--primary); }
-.composer-box { flex: 1; min-width: 0; display: flex; align-items: center; }
+.composer-box { flex: 1; min-width: 0; display: flex; align-items: center; box-shadow: var(--composer-shadow); background: var(--composer-bg); border-radius: var(--composer-radius); padding: 0 var(--composer-pad-x); }
 .composer-box:has(.shots-tray:not([hidden])) { flex-direction: column; align-items: stretch; }
 .composer-box:has(.shots-tray:not([hidden])) textarea { flex: none; }
 .composer.drop-target { box-shadow: 0 0 0 2px var(--primary); }
@@ -636,6 +639,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
 #fv-tools label.search > input:not([type="checkbox"]) { flex: 1 1 auto; margin-top: 0; width: auto; height: 100%; padding: 0; border: 0; background: transparent; }
 .fv-tools .fv-hits, .fv-tools .fv-count { color: var(--faint); font-size: var(--fs-xs); font-weight: 700; }
 .fv-tools .fv-goto, .fv-tools .fv-wrap { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
+#fv-tools .fv-goto, #fv-tools .fv-wrap { margin: 0; }
 #fv-tools .fv-goto > input[type="number"] { flex: 0 0 76px; margin-top: 0; width: 76px; height: 30px; padding: 0 8px; }
 .fv-tools .fv-wrap input { accent-color: var(--primary); }
 .text [data-ui="file-card"] { margin: 8px 0 4px; }