:root{--canvas:#f7f2eb;--surface:#fffdf9;--ink:#30251f;--muted:#786b61;--line:#e4d9cd;--accent:#b94e2d;--soft:#efe5d9;--base-size:16px;color-scheme:light;font-family:'Avenir Next','Segoe UI',sans-serif;font-size:var(--base-size);color:var(--ink);background:var(--canvas)}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit;transition:background .2s,box-shadow .2s;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button:hover:not(:disabled){background-color:var(--soft)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}a{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em}h1{font-size:clamp(2.3rem,4vw,3.7rem);line-height:1.12;margin-bottom:18px}h2{font-size:1.75rem;line-height:1.2;margin-bottom:12px}h3{font-size:1.05rem;font-weight:600;margin-bottom:8px}p{line-height:1.65}small,.fine{font-size:.79rem;line-height:1.6;color:var(--muted)}.muted{color:var(--muted)}.eyebrow,.side-caption{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--muted)}.eyebrow{margin-bottom:16px}.brand{text-decoration:none;font-family:Georgia,serif;font-size:2.25rem;letter-spacing:-.09em;display:inline-flex;align-items:baseline;width:fit-content}.brand span{color:#d56b43;font-family:Arial,sans-serif;font-size:.58rem;margin-left:5px}.primary,.secondary,.danger{border-radius:12px;padding:11px 20px;font-weight:600;font-size:.87rem}.primary{background:var(--accent);color:#fff}.primary:hover:not(:disabled){background:#983f25}.secondary{border:1px solid var(--line);background:var(--surface)}.danger{background:var(--danger);color:var(--danger-ink)}.text-button{font-size:.85rem;color:var(--accent);padding:8px 10px;border-radius:8px}.icon-button{min-width:42px;border-radius:10px;font-size:1.2rem}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip{position:fixed;top:-60px;left:12px;z-index:99;background:var(--surface);padding:12px}.skip:focus{top:8px}#preview-banner{background:#382c24;color:#fff3e8;text-align:center;font-size:11px;line-height:1.5;padding:7px 12px;letter-spacing:.03em;min-height:31px}#preview-banner[hidden]{display:none}.loading{padding:20vh 20px;text-align:center}.signin{min-height:calc(100dvh - 31px);display:grid;grid-template-columns:1.15fr 1fr}.signin-story{background:var(--story);padding:42px 11%;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:720px}.signin-story>div{position:relative;z-index:1;margin:70px 0 80px}.signin-story h1{font-size:clamp(2.8rem,4.6vw,4.6rem)}.signin-story p:not(.eyebrow){max-width:350px;font-size:.94rem;color:var(--muted)}.quiet-mark{font-family:Georgia,serif;font-size:220px;line-height:.7;color:#c9ab91;letter-spacing:-.1em;position:absolute;right:-20px;bottom:-130px;opacity:.45;z-index:-1}.quiet-mark span{font-family:Arial;font-size:50px;color:#c36943}.signin-form{align-self:center;max-width:470px;width:100%;margin:50px auto;padding:0 40px}.signin-form h2{font-size:2.4rem}.signin-form form>.primary{width:100%;display:flex;justify-content:space-between;align-items:center}.signin-form>.text-button{margin:12px -10px}.signin-form label,dialog label,.settings-panel label{display:flex;flex-direction:column;gap:8px;font-size:.85rem;margin:20px 0}input,select,textarea{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;outline-offset:2px}textarea{resize:vertical;line-height:1.6}input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.form-state{font-size:.85rem;color:var(--accent);min-height:0}.form-state:empty{display:none}.preview-help{background:var(--soft);padding:17px;border-radius:13px;font-size:.76rem;margin-top:26px}.preview-help p{margin:6px 0 0}.app{display:grid;grid-template-columns:264px minmax(0,1fr);height:calc(100dvh - 31px);min-height:460px}body:has(#preview-banner[hidden]) .app{height:100dvh}.sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:28px 18px 0;overflow-y:auto;display:flex;flex-direction:column;gap:0}.sidebar>.brand{margin:0 14px 32px}.side-caption{margin:0 14px 13px}.work-label{margin-top:22px}.agent-item{display:flex;align-items:center;text-align:left;width:100%;padding:11px 12px;gap:11px;border-radius:12px;position:relative;margin:3px 0}.agent-item>span:nth-child(2){flex:1;min-width:0}.agent-item strong,.account-foot strong{font-size:.84rem;font-weight:600;display:block}.agent-item small,.account-foot small{font-size:.66rem;display:block;margin-top:3px}.agent-item.selected{background:var(--surface);box-shadow:0 2px 8px #38201405}.avatar{display:inline-grid;place-items:center;flex-shrink:0;width:38px;height:38px;background:#e2c3b0;color:#69402d;border-radius:13px;font-family:Georgia,serif;font-size:1.4rem}.avatar.large{width:78px;height:78px;border-radius:25px;font-size:2.9rem;background:#e7c7b4}.status-dot{width:6px;height:6px;border-radius:100%;background:#5d7e63;flex-shrink:0}.status-dot.offline{background:#9d958d}.side-links{margin-top:30px;border-top:1px solid var(--line);padding:17px 0}.side-links button{display:flex;gap:14px;align-items:center;text-align:left;width:100%;padding:8px 14px;border-radius:9px;font-size:.8rem}.side-links button>span{font-size:1.2rem;width:20px;color:var(--muted)}.side-links .active{background:var(--active)}.account-foot{margin-top:auto;display:flex;gap:10px;align-items:center;padding:19px 2px;border-top:1px solid var(--line)}.account-foot>span:nth-child(2){flex:1;min-width:0}.main{overflow-y:auto;padding:0 6%;background:var(--canvas)}.page-header{padding:56px 0 24px;max-width:1000px;margin:auto}.page-header>.muted{font-size:.94rem}.home-cards{max-width:1000px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:22px}.welcome-card{border-radius:24px;text-align:left;padding:30px 32px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 30px #51371d04;display:flex;flex-direction:column;align-items:flex-start;min-height:370px}.welcome-card.personal{background:var(--personal);border-color:var(--line)}.welcome-card.quick .avatar{background:#e2e4d8;color:#4c604f}.card-top{display:flex;justify-content:space-between;width:100%;gap:15px;align-items:baseline;margin-bottom:25px}.card-top>span:last-child{font-size:1.4rem;color:var(--muted)}.welcome-card h2{margin-top:22px}.welcome-card p{font-size:.86rem;color:var(--muted);max-width:360px}.card-link{font-size:.78rem;font-weight:600;width:100%;display:flex;justify-content:space-between;margin-top:auto;padding-top:20px}.home-note{display:flex;gap:22px;max-width:1000px;margin:32px auto 0;padding:30px 5px;border-bottom:1px solid var(--line)}.home-note>span{font-size:2rem;color:var(--accent)}.home-note p{font-size:.85rem;color:var(--muted);max-width:620px;margin-bottom:4px}.home-note .text-button{margin-left:-10px}.privacy-note{font-size:.68rem;color:var(--muted);text-align:center;margin:24px 0}.mobile-back{display:none}.chat-main{padding:0;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;gap:12px;padding:22px 30px 14px;border-bottom:1px solid var(--line)}.chat-identity{display:flex;align-items:center;gap:12px;flex:1}.chat-identity h2{font-family:inherit;letter-spacing:0;font-size:1rem;font-weight:600;margin-bottom:2px}.chat-identity small{font-size:.7rem}.chat-controls{display:flex;gap:10px;align-items:center;padding:13px 30px;flex-wrap:wrap}.compact-label{margin:0;font-size:.76rem}.compact-label select{padding:8px 10px;width:auto;border-radius:20px;max-width:220px}.chat-controls .text-button{margin-left:auto}.chat-controls .text-button+.text-button{margin-left:0}.model-tag{font-size:.78rem}.cost-warning{background:var(--warning);color:var(--warning-ink);padding:8px 30px;font-size:.8rem}.cost-warning .text-button{font-size:.78rem}.messages{flex:1;overflow-y:auto;padding:20px max(24px,calc((100% - 760px)/2));min-height:100px}.chat-empty{text-align:center;max-width:600px;margin:5vh auto 20px}.chat-empty>.eyebrow{margin-top:28px}.chat-empty h1{font-size:2.7rem}.chat-empty>p:not(.eyebrow){color:var(--muted);font-size:.9rem}.suggestions{display:grid;gap:9px;max-width:370px;margin:26px auto}.suggestions button{text-align:left;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:12px 15px;font-size:.78rem;display:flex;justify-content:space-between}.suggestions button span{color:var(--muted)}.composer-wrap{width:min(100%,820px);padding:12px 28px 16px;margin:auto}.scenario{display:flex;align-items:center;gap:12px;font-size:.65rem;color:var(--muted);justify-content:flex-end;margin-bottom:8px}.scenario select{padding:5px 10px;width:auto;font-size:.65rem}.composer-wrap form{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:12px;box-shadow:0 4px 14px #4c2c1805}.composer-wrap textarea{border:0;background:transparent;resize:none;padding:8px 10px;font-size:.9rem;min-height:66px;max-height:160px}.composer-actions{display:flex;align-items:center;gap:12px}.composer-actions small{flex:1;font-size:.63rem}.composer-actions .primary{min-height:38px;padding:9px 16px;font-size:.76rem}.composer-note{font-size:.62rem;text-align:center;color:var(--muted);margin:10px 0 0}.message{padding:18px 0;margin-bottom:12px;overflow-wrap:anywhere}.message.user{background:var(--bubble);border-radius:17px;padding:17px 21px;margin-left:18%}.message-author{font-size:.72rem;font-weight:600;color:var(--muted);display:block;margin-bottom:8px}.message-content{white-space:pre-wrap;font-size:.92rem;line-height:1.8}.message-meta{font-size:.66rem;display:block;margin-top:10px}.tool-events{font-size:.73rem;color:var(--muted);border-left:2px solid var(--line);padding-left:14px;margin-top:16px}.tool-events p{margin-bottom:4px}.inline-error{background:var(--soft);border-radius:12px;padding:15px;font-size:.8rem;margin-top:12px}.page-content{max-width:1000px;margin:0 auto 50px}.search-row{display:flex;gap:20px;align-items:center;margin-bottom:25px}.search{flex:1}.check,.toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important;font-size:.8rem}.history-row{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:14px 0;gap:12px}.history-open{flex:1;text-align:left;display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:12px}.history-open strong{font-size:.95rem;font-weight:500}.history-open small{font-size:.72rem}.empty-card{padding:40px 25px;border:1px dashed var(--line);border-radius:20px;text-align:center;color:var(--muted)}.empty-card h2{color:var(--ink)}.empty-card p{font-size:.86rem}.personality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.personality-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}.personality-card.chosen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.portrait-slot{height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#dfb9a6;color:#66422f}.portrait-slot>span{font-family:Georgia,serif;font-size:4rem}.portrait-slot small{font-size:.6rem;color:inherit}.portrait-slot.formal{background:#d5dbe0;color:#34445b}.portrait-slot.lovely{background:#ecd4d5;color:#8b565c}.portrait-slot.flirty{background:#ded0df;color:#6e466d}.portrait-slot.efficient{background:#cbded8;color:#34625c}.personality-copy{padding:22px}.personality-copy .eyebrow{font-size:.57rem}.personality-copy p{font-size:.8rem;min-height:40px}.personality-copy button{width:100%;font-size:.72rem;padding:10px}.personality-grid+.fine{margin:24px 0}.soft-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:25px;margin:24px 0}.soft-card p{color:var(--muted);font-size:.85rem}.soft-card p:last-child{margin-bottom:0}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:25px}.metrics>div{display:flex;flex-direction:column;gap:13px;padding:0 24px;border-left:1px solid var(--line)}.metrics>div:first-child{border:0;padding-left:0}.metrics strong{font-family:Georgia,serif;font-size:2.4rem;font-weight:400}.metrics small{font-size:.72rem}.table-scroll{overflow:auto;margin-bottom:28px}table{border-collapse:collapse;width:100%;text-align:left;font-size:.75rem}th{color:var(--muted);font-weight:500;font-size:.66rem;background:var(--table-head)}td,th{padding:14px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.page-content>h2{font-size:1.45rem;margin-top:30px}.billing-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px}.billing-grid .soft-card{margin-top:0}.bucket div{display:flex;justify-content:space-between;gap:12px;font-size:.75rem}.bucket progress{width:100%;height:8px;margin:15px 0;accent-color:var(--accent)}.bucket small{font-size:.67rem;display:block;margin-bottom:20px}.owner-billing{background:var(--personal);border-radius:25px;padding:45px}.owner-billing h2{font-size:2.3rem}.settings-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px;max-width:1000px;margin:0 auto 50px}.settings-nav{display:flex;flex-direction:column;gap:3px}.settings-nav button{text-align:left;border-radius:9px;padding:10px 13px;font-size:.8rem;min-height:42px}.settings-nav .active{background:var(--soft);color:var(--accent)}.settings-panel{padding:5px 10px;max-width:650px}.settings-panel label{margin:24px 0}.settings-panel .soft-card{margin:22px 0}.settings-panel .primary{margin-top:10px}.settings-panel input,.settings-panel select{max-width:480px}hr{border:0;border-top:1px solid var(--line);margin:35px 0}dialog{border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);padding:27px;width:min(520px,calc(100% - 30px));max-height:85dvh;box-shadow:0 20px 80px #21140e33}dialog::backdrop{background:#2e211b66;backdrop-filter:blur(3px)}dialog header{display:flex;align-items:flex-start;gap:18px;justify-content:space-between}dialog header h2{padding-top:8px;font-size:1.7rem}dialog p{font-size:.88rem;color:var(--muted)}dialog .danger{margin-top:14px}#notice{position:fixed;bottom:20px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:100;background:#33271f;color:#fff6ed;border-radius:14px;padding:15px 22px;font-size:.8rem;max-width:calc(100% - 30px);width:max-content;box-shadow:0 8px 30px #30251f25;transition:.2s}#notice.visible{opacity:1;transform:translate(-50%,0)}[data-text-size=large]{--base-size:18px}[data-text-size=small]{--base-size:14px}[data-accent=teal]{--accent:#336d68}[data-accent=rose]{--accent:#a4516a}[data-density=compact] .agent-item{padding-top:6px;padding-bottom:6px}[data-density=compact] td{padding:9px 12px}

@media(min-width:1500px){.main:not(.chat-main){padding-left:9%;padding-right:9%}}@media(max-width:1100px){.app{grid-template-columns:230px minmax(0,1fr)}.main{padding-left:5%;padding-right:5%}.personality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-card{padding:25px}.home-cards{gap:15px}.settings-layout{grid-template-columns:130px minmax(0,1fr);gap:18px}.metrics strong{font-size:1.9rem}.chat-main{padding:0}.chat-controls{padding-left:20px;padding-right:20px;gap:5px}}
@media(max-width:760px){.signin{display:block}.signin-story{min-height:auto;padding:28px 30px}.signin-story>div{margin:40px 0 15px}.signin-story h1{font-size:2.6rem}.signin-story h1 br:last-child{display:none}.signin-story>small,.quiet-mark{display:none}.signin-story p:not(.eyebrow){font-size:.8rem;max-width:90%}.signin-form{padding:32px 30px;margin:0 auto}.app{display:block;height:calc(100dvh - 48px)}.sidebar{display:none}.app.mobile-home .sidebar{display:flex;min-height:100%;border-right:0;padding:25px 22px 0}.app.mobile-home .main{display:none}.sidebar>.brand{margin-bottom:25px}.agent-item{padding:18px 12px}.agent-item .avatar{width:48px;height:48px;font-size:1.7rem}.agent-item strong{font-size:1rem}.agent-item small{font-size:.75rem}.side-links{margin-top:25px}.side-links button{font-size:.9rem}.account-foot{padding:24px 0}.main{height:100%;padding:0 24px;overflow-y:auto}.mobile-back{display:inline-flex;align-items:center;font-size:.8rem;padding:8px 0;margin-bottom:20px;color:var(--accent)}.page-header{padding-top:24px}.page-header h1{font-size:2.5rem}.page-header .eyebrow{margin-top:8px}.page-content{margin-bottom:35px}.chat-main{padding:0}.chat-header{padding:12px 16px}.chat-header .mobile-back{margin:0;padding:0;font-size:1.3rem}.chat-header .avatar{width:36px;height:36px}.chat-controls{padding:10px 14px;gap:6px}.chat-controls .text-button{font-size:.7rem;min-height:34px}.compact-label select{font-size:.69rem;padding:8px;max-width:190px}.messages{padding:15px 22px}.chat-empty{margin:4vh auto 10px}.chat-empty h1{font-size:2rem}.chat-empty .avatar{width:66px;height:66px}.chat-empty .eyebrow{font-size:.57rem}.chat-empty>p:not(.eyebrow){font-size:.8rem}.suggestions{margin-top:20px}.suggestions button{font-size:.72rem}.composer-wrap{padding:8px 12px 12px}.composer-actions small{font-size:.57rem}.composer-note{font-size:.55rem}.scenario{font-size:.59rem}.scenario select{font-size:.6rem}.cost-warning{padding:8px 18px;font-size:.73rem}.message-content{font-size:.87rem}.personality-grid{gap:12px}.portrait-slot{height:130px}.personality-copy{padding:17px 14px}.personality-copy h2{font-size:1.5rem}.personality-copy .eyebrow{font-size:.5rem}.personality-copy p{font-size:.72rem;min-height:48px}.personality-copy button{font-size:.65rem}.settings-layout{display:block}.settings-nav{display:flex;flex-direction:row;overflow:auto;gap:5px;margin:0 -24px 25px;padding:0 24px 12px;border-bottom:1px solid var(--line)}.settings-nav button{white-space:nowrap;flex-shrink:0}.settings-panel{padding:0}.metrics{padding:20px 15px}.metrics>div{padding:0 12px}.metrics strong{font-size:1.7rem}.metrics small{font-size:.6rem}.billing-grid{grid-template-columns:1fr;gap:0}.soft-card{padding:21px}.search-row{align-items:flex-start;flex-direction:column;gap:12px}.search{width:100%}.history-row{gap:0}.history-row>.text-button{font-size:.72rem}.history-open{padding-left:0}.history-open strong{font-size:.85rem}.history-open small{font-size:.65rem}.owner-billing{padding:30px}.owner-billing h2{font-size:2rem}#preview-banner{font-size:9px;min-height:31px}.app{height:calc(100dvh - 41px)}body:has(#preview-banner[hidden]) .app{height:100dvh}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}@media(max-width:360px){.personality-grid{grid-template-columns:1fr}.chat-controls{gap:3px}.compact-label select{max-width:170px}.metrics strong{font-size:1.35rem}.main:not(.chat-main){padding:0 18px}}

/* Assignment 2 v1.1: the written lifestyle palette governs the supplied
   dashboard reference. Reuse its quiet hierarchy, not its neon fleet colors. */
:root {
  --canvas: #FAF4EC;
  --ink: #2B201B;
  --muted: #7A6A60;
  --accent: #E8933A;
  --accent-light: #F6BC7A;
  --accent-text: #784619;
  --accent-foreground: #2B201B;
  --focus: #784619;
}
body { height: 100dvh; display: flex; flex-direction: column; }
#preview-banner { flex: none; background: #2B201B; }
#root { flex: 1; min-height: 0; overflow: auto; }
.app,
body:has(#preview-banner[hidden]) .app { height: 100%; min-height: 0; }
.signin { min-height: 100%; }
.brand span { color: #E8933A; }
.brand .theme-logo { margin-right: 10px; }
.theme-logo { display: inline-grid; vertical-align: middle; flex: none; }
.theme-logo img { grid-area: 1 / 1; object-fit: contain; }
.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }
.primary { color: var(--accent-foreground); background: var(--accent); }
.primary:hover:not(:disabled) { background: var(--accent-light); color: var(--accent-foreground); }
.text-button, .mobile-back, .settings-nav .active { color: var(--accent-text); }
:focus-visible { outline-color: var(--focus); }
.form-state { color: var(--accent-text); }
.main, .chat-identity, .chat-identity > div { min-width: 0; min-height: 0; }
.chat-identity h2, .agent-item strong, .account-foot strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-item.selected { border: 1px solid var(--line); }
.agent-item { border: 1px solid transparent; }
.status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--surface); }
.status-dot.working { background: var(--accent); }
.chat-header, .chat-controls { flex: none; }
.chat-controls { border-bottom: 1px solid var(--line); }
.model-tag { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.composer-wrap { flex: none; }
.composer-wrap form:focus-within { border-color: var(--focus); }
.composer-actions .primary, .chat-controls .text-button { min-height: 44px; }
.messages .empty-card { max-width: 620px; margin: 24px auto; }
.message-meta, .composer-note, .composer-actions small, .scenario, .scenario select {
  font-size: max(.72rem, 11px);
}
.tool-events { border-left-color: var(--accent); padding: 8px 14px; }
.tool-events p:last-child { margin-bottom: 0; }
.table-scroll { border: 1px solid var(--line); border-radius: 14px; }
.table-scroll table { margin: 0; }
.table-scroll tr:last-child td { border-bottom: 0; }
.companion-avatar { position: relative; overflow: hidden; background: var(--accent); color: var(--accent-foreground); }
.companion-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.companion-avatar.loaded > img { opacity: 1; }
.companion-avatar.loaded > span { visibility: hidden; }
.companion-settings { padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--line); }
.companion-settings label { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.companion-settings input, .companion-settings select { max-width: 480px; }
.companion-settings .check, .companion-settings .toggle { flex-direction: row; }
.chat-main[data-personality="formal"] { --accent: #22354E; --accent-text: #22354E; --accent-foreground: #FAF4EC; --focus: #22354E; }
.chat-main[data-personality="friendly"] { --accent: #F2785C; --accent-text: #8D3321; --accent-foreground: #2B201B; --focus: #8D3321; }
.chat-main[data-personality="lovely"] { --accent: #EB9AA5; --accent-text: #89404D; --accent-foreground: #2B201B; --focus: #89404D; }
.chat-main[data-personality="flirty"] { --accent: #7E2A52; --accent-text: #7E2A52; --accent-foreground: #FAF4EC; --focus: #7E2A52; }
.chat-main[data-personality="efficient"] { --accent: #14555A; --accent-text: #14555A; --accent-foreground: #FAF4EC; --focus: #14555A; }
.chat-main[data-personality] .primary:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); filter: brightness(1.08); }
@media (max-width: 760px) {
  .app.mobile-home .sidebar { height: 100%; min-height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .chat-controls .text-button { font-size: .76rem; }
  .chat-controls .compact-label { max-width: 100%; }
  .compact-label select { min-height: 44px; max-width: min(220px, 100%); }
  .composer-wrap { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .composer-actions { gap: 8px; }
  .composer-actions small { line-height: 1.45; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrics > div { min-width: 0; }
  .metrics strong { overflow-wrap: anywhere; }
  .bucket div { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .chat-controls { gap: 5px; }
  .chat-controls .compact-label { flex: 1 1 100%; }
  .chat-controls .compact-label select { width: 100%; max-width: 100%; }
  .chat-identity h2 { max-width: 170px; }
}
/* Preserve the existing contract-backed appearance preference. Chat-level
   personality colors remain local to the active conversation. */
:root[data-accent="teal"] { --accent: #14555A; --accent-light: #23696E; --accent-text: #14555A; --accent-foreground: #FAF4EC; --focus: #14555A; }
:root[data-accent="rose"] { --accent: #EB9AA5; --accent-light: #F4B6BE; --accent-text: #89404D; --accent-foreground: #2B201B; --focus: #89404D; }
.companion-avatar { border: 1px solid var(--line); }
/* Portraits come only from the approved character pack, with honest fallback. */
.portrait-slot { position: relative; overflow: hidden; }
.portrait-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.portrait-slot.loaded > img { opacity: 1; }
.portrait-slot.loaded > span, .portrait-slot.loaded > small { visibility: hidden; }

/* Theme surfaces: System uses the same palette as explicit Dark and responds
   to device changes in CSS. Explicit Light never matches the media override.
   Both supplied marks stay external SVGs; only the appropriate one is shown. */
:root {
  --canvas: #FAF4EC;
  --surface: #FFFDF9;
  --ink: #2B201B;
  --muted: #7A6A60;
  --line: #E4D9CD;
  --soft: #EFE5D9;
  --sidebar: #EEE5D9;
  --story: #EADDCC;
  --personal: #F0E1D3;
  --active: #E2D6C7;
  --bubble: #EDE3D7;
  --table-head: #EEE5DB;
  --warning: #F5E5CB;
  --warning-ink: #735221;
  --danger: #F3E2DD;
  --danger-ink: #8F3027;
  --surface-muted: #65564A;
  --logo-light: inline-block;
  --logo-dark: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --canvas: #2B201B;
  --surface: #352A23;
  --ink: #FAF4EC;
  --muted: #D0BBA9;
  --line: #69564A;
  --soft: #44362C;
  --sidebar: #30241E;
  --story: #35281F;
  --personal: #3C3027;
  --active: #4A382C;
  --bubble: #44362C;
  --table-head: #3C3027;
  --warning: #49371F;
  --warning-ink: #F6D6A6;
  --danger: #4F2D29;
  --danger-ink: #FFD1C8;
  --accent-text: #F6BC7A;
  --focus: #F6BC7A;
  --surface-muted: #D0BBA9;
  --logo-light: none;
  --logo-dark: inline-block;
  color-scheme: dark;
}
:root[data-theme="dark"] .chat-main[data-personality] { --accent-text: #FAF4EC; --focus: #FAF4EC; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
  --canvas: #2B201B;
  --surface: #352A23;
  --ink: #FAF4EC;
  --muted: #D0BBA9;
  --line: #69564A;
  --soft: #44362C;
  --sidebar: #30241E;
  --story: #35281F;
  --personal: #3C3027;
  --active: #4A382C;
  --bubble: #44362C;
  --table-head: #3C3027;
  --warning: #49371F;
  --warning-ink: #F6D6A6;
  --danger: #4F2D29;
  --danger-ink: #FFD1C8;
  --accent-text: #F6BC7A;
  --focus: #F6BC7A;
  --surface-muted: #D0BBA9;
  --logo-light: none;
  --logo-dark: inline-block;
  color-scheme: dark;
  }
  :root[data-theme="system"] .chat-main[data-personality] { --accent-text: #FAF4EC; --focus: #FAF4EC; }
}
.cost-warning .text-button { color: var(--warning-ink); text-decoration: underline; text-underline-offset: 3px; }
.cost-warning .text-button:focus-visible { outline-color: var(--warning-ink); }
.cost-warning .text-button:hover:not(:disabled) { background: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-ink); }

.sidebar, .signin-story, .welcome-card.personal, .owner-billing, .message.user, th { --muted: var(--surface-muted); }

/* Curated look selection is real form state, never a generated face. */
.look-picker { border: 0; padding: 0; min-width: 0; margin: 22px 0; }
.look-picker legend { padding: 0; font-size: .85rem; font-weight: 600; }
.look-picker > p { margin: 7px 0 12px; }
.look-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.settings-panel .look-option, dialog .look-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; min-width: 0; }
.look-option input[type=radio] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--accent); }
.look-option:has(input:checked) { outline: 2px solid var(--focus); outline-offset: 1px; }
.look-option:focus-within { box-shadow: 0 0 0 4px var(--soft); }
.look-option strong { font-size: .8rem; font-weight: 600; }
.look-option > small { grid-column: 1 / -1; font-size: .66rem; }
.look-preview { grid-column: 1 / -1; grid-row: 1; display: grid; place-items: center; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--soft); border-radius: 9px; font-family: Georgia, serif; font-size: 2rem; color: var(--ink); }
.look-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.look-preview.loaded img { opacity: 1; }
.look-preview.loaded > span, .look-option:has(.loaded) > small { visibility: hidden; }
@media (max-width: 360px) { .look-options { gap: 7px; } .settings-panel .look-option, dialog .look-option { padding: 7px; } }