.portfolio-chat-dock { position:fixed; bottom:calc(24px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); width:min(480px,calc(100vw - 32px)); z-index:10000; pointer-events:none; }
.portfolio-chat-launcher { width:100%; height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border:1px solid var(--border); border-radius:24px; background:var(--dark); color:var(--portfolio-copy); text-align:left; font:inherit; cursor:text; box-shadow:0 8px 40px #00000014; pointer-events:auto; }
.portfolio-chat-prompt { font-size:16px; }
.portfolio-chat-badge { font-size:11px; font-weight:600; letter-spacing:.04em; padding:5px 7px; border:1px solid var(--border); border-radius:7px; color:var(--portfolio-copy); }
.portfolio-chat { width:100%; height:min(520px,calc(100dvh - 64px)); padding:0; margin:0; border:1px solid var(--border); border-radius:24px; background:var(--dark); color:var(--heading); font:inherit; overflow:hidden; box-sizing:border-box; pointer-events:auto; box-shadow:0 16px 64px #0000001f; transform-origin:center bottom; }
.portfolio-chat:not([hidden]) { display:flex; flex-direction:column; }
.portfolio-chat.is-closing { animation:none; pointer-events:none; }
.portfolio-chat[hidden],.portfolio-chat-launcher[hidden] { display:none; }
.portfolio-chat-minimize { position:absolute; right:12px; top:12px; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.portfolio-chat-minimize:hover { background:rgba(128,128,128,.1); }
.portfolio-chat-dock.is-opening .portfolio-chat-launcher, .portfolio-chat-dock.is-closing .portfolio-chat-launcher { position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:1; pointer-events:none; box-shadow:none; }
@media(max-width:599px) { .portfolio-chat-dock.is-opening .portfolio-chat-launcher, .portfolio-chat-dock.is-closing .portfolio-chat-launcher { width:calc(100vw - 128px); } }
.portfolio-chat header { padding:20px 18px 16px; border-bottom:1px solid var(--border); position:relative; }
.portfolio-chat h2 { margin:0 40px 8px 0; font-size:18px; line-height:1.2; color:inherit; }
.portfolio-chat header p { margin:0; font-size:13px; color:var(--portfolio-copy); line-height:1.5; }
.portfolio-chat-log { overflow:auto; overscroll-behavior:contain; flex:1; min-height:0; padding:18px; display:flex; flex-direction:column; gap:14px; }
.portfolio-chat-message { padding:0; max-width:95%; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.portfolio-chat-message.is-user { align-self:flex-end; background:rgba(128,128,128,.12); border-radius:16px 16px 4px 16px; padding:12px 16px; }
.portfolio-chat-message a { color:var(--portfolio-link,#2453ff); display:block; width:fit-content; border:0; margin-top:10px; text-decoration:underline; text-underline-offset:3px; }
.portfolio-chat-suggestions { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 16px; }
.portfolio-chat-suggestions button,.portfolio-chat-suggestions a { border:1px solid var(--border); background:transparent; border-radius:20px; padding:8px 12px; color:inherit; font:inherit; font-size:13px; cursor:pointer; text-decoration:none; }
.portfolio-chat-form { padding:14px 18px 18px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:flex-end; }
.portfolio-chat-form textarea { resize:none; flex:1; min-width:0; height:64px; border:1px solid var(--border); border-radius:12px; background:rgba(128,128,128,.05); padding:12px; color:inherit; font:inherit; font-size:16px; }
.portfolio-chat-form button { border:0; border-radius:12px; padding:12px 16px; background:var(--heading); color:var(--dark); cursor:pointer; font:inherit; font-size:14px; }
.portfolio-chat-form button:disabled { opacity:.5; cursor:default; }
@media(max-width:599px) { .portfolio-chat header { padding:24px 20px 16px; } .portfolio-chat-log { padding:20px; } .portfolio-chat-suggestions { padding:0 20px 16px; } .portfolio-chat-form { padding:16px 20px 20px; } }
@media(prefers-reduced-motion:reduce) { .portfolio-chat:not([hidden]) { animation:none; } }

.portfolio-chat a::after { content:none; }


.portfolio-chat-form textarea { border:0; background:transparent; padding:8px 0; outline-offset:4px; height:56px; line-height:1.5; }
.portfolio-chat-form textarea::placeholder { color:var(--portfolio-copy); opacity:.75; }
@media(max-width:599px) { .portfolio-chat-dock { bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:calc(100vw - 128px); } .portfolio-chat-dock:has(.portfolio-chat:not([hidden])) { width:calc(100vw - 32px); } .portfolio-chat-launcher { height:64px; padding:16px; } .portfolio-chat-prompt { font-size:14px; } .portfolio-chat { height:min(520px,calc(100dvh - 80px)); } }

/* Keep every text region on the same inset and independent of page typography. */
.portfolio-chat { --chat-inset:24px; text-align:left; }
.portfolio-chat > header { flex:0 0 auto; display:block; width:100%; box-sizing:border-box; padding:22px var(--chat-inset) 18px; margin:0; }
.portfolio-chat > header h2 { padding:0; margin:0 32px 6px 0; font-size:18px; line-height:1.3; letter-spacing:-.02em; }
.portfolio-chat > header p { padding:0; margin:0 24px 0 0; line-height:1.5; }
.portfolio-chat-log { padding:20px var(--chat-inset); }
.portfolio-chat-message { flex:0 0 auto; margin:0; text-align:left; }
.portfolio-chat-suggestions { flex:0 0 auto; padding:0 var(--chat-inset) 18px; }
.portfolio-chat-form { flex:0 0 auto; margin:0; padding:16px var(--chat-inset); align-items:center; }
.portfolio-chat-form textarea { box-sizing:border-box; margin:0; padding:10px 0; height:64px; line-height:1.4; }
@media(max-width:599px) { .portfolio-chat { --chat-inset:20px; } }
@media(prefers-reduced-motion:reduce) { .portfolio-chat-dock.is-opening .portfolio-chat-launcher, .portfolio-chat-dock.is-closing .portfolio-chat-launcher { animation:none; } }

.portfolio-chat-form textarea {
 border:1px solid var(--border);
 border-radius:12px;
 padding:12px 14px;
 height:64px;
 background:rgba(128,128,128,.04);
 outline:none;
 transition:border-color 160ms ease, background-color 160ms ease;
}
.portfolio-chat-form textarea:focus,
.portfolio-chat-form textarea:focus-visible {
 outline:none;
 outline-offset:0;
 border-color:var(--portfolio-copy,#555);
 box-shadow:none;
}

/* Theme is chosen on home; project and About viewers inherit that choice. */
html.portfolio-viewer-open [data-theme-toggle] { display:none; }