.contact-trigger { font-family:inherit; cursor:pointer; }
.contact-dialog { width:min(460px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px #0004; }
.contact-dialog::backdrop { background:#10172288; backdrop-filter:blur(3px); }
.contact-dialog h2 { margin:0 0 8px; font-size:22px; }
.contact-dialog p { font-size:13px; color:var(--muted); }
.contact-dialog form,.contact-dialog label { display:grid; gap:8px; }
.contact-dialog form { gap:14px; }.contact-dialog label { font-size:13px; }
.contact-dialog input,.contact-dialog textarea,.chat-compose input { width:100%; min-width:0; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); border-radius:7px; padding:10px; font:inherit; }
.contact-dialog textarea { resize:vertical; }.contact-dialog form>a { font-size:12px; color:var(--muted); }
.panel-close { border:0; background:transparent; color:var(--muted); font-size:25px; width:32px; height:32px; cursor:pointer; border-radius:6px; }
.contact-dialog>.panel-close { position:absolute; top:12px; right:12px; }
.chat-launcher { position:fixed; right:24px; bottom:24px; z-index:30; width:56px; height:56px; display:grid; place-items:center; padding:12px; border:1px solid var(--line-strong); border-radius:13px; background:linear-gradient(145deg,var(--surface-soft),var(--surface)); color:var(--accent-ink); box-shadow:0 5px 0 #0001,0 9px 24px #0003,inset 0 1px 0 #ffffff40; touch-action:none; cursor:grab; user-select:none; }
.chat-launcher:active { cursor:grabbing; }.chat-launcher svg { width:32px; height:32px; pointer-events:none; }
.chat-panel { position:fixed; z-index:31; height:min(470px,calc(100dvh - 24px)); display:flex; flex-direction:column; background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:14px; box-shadow:0 15px 60px #0004; overflow:hidden; }
.chat-panel[hidden] { display:none; }.chat-panel header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line); }.chat-panel h2 { font-size:16px; margin:0; }.chat-panel small { color:var(--muted); font-size:11px; }
.chat-messages { flex:1; overflow:auto; padding:14px; }.chat-bubble { padding:11px 13px; background:var(--surface-soft); border:1px solid var(--line); border-radius:10px; font-size:13px; line-height:1.7; margin:0 20px 12px 0; overflow-wrap:anywhere; }.chat-bubble--user { margin-left:20px; margin-right:0; background:var(--accent-soft); }
.chat-panel form { padding:12px; border-top:1px solid var(--line); }.chat-compose { display:flex; gap:8px; }.chat-compose input { font-size:13px; }.chat-compose button { width:36px; flex-shrink:0; border:0; border-radius:8px; background:var(--accent-ink); color:var(--bg); font-size:22px; cursor:pointer; }.chat-input-label { display:block; font-size:12px; margin-bottom:5px; }
:is(.contact-dialog,.chat-panel,.chat-launcher,.contact-trigger) :focus-visible,.chat-launcher:focus-visible,.contact-trigger:focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
@media(max-width:680px) { .contact-trigger span { display:none; } .topbar--profiles .identity > span:last-child { display:none; } .topbar--profiles .identity { grid-column:1 / 2; } .topbar--profiles .nav-profile-links { grid-column:2 / 7; } }

.chat-launcher { padding:3px; background:linear-gradient(145deg,#fffaf0,#eee6db); }
.chat-launcher img { width:48px; height:48px; object-fit:contain; pointer-events:none; user-select:none; }

.chat-launcher { border:2px solid #9caaff; padding:0; overflow:hidden; }
.chat-launcher img { width:54px; height:54px; max-width:none; transform:scale(1.08); }
.chat-hint { position:fixed; z-index:32; max-width:min(240px,calc(100vw - 20px)); padding:10px 13px; background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 5px 20px #0002; font-size:12px; line-height:1.6; pointer-events:none; }
.chat-hint[hidden] { display:none; }
.contact-dialog button:disabled { opacity:.6; cursor:wait; }
/* Mascot launcher and expanding conversation surface. */
.chat-launcher { border:2px solid #171717; box-shadow:2px 0 #171717,0 2px #171717,2px 2px #171717,4px 4px #171717,7px 9px 18px #0003; }
.chat-launcher img { width:52px; height:52px; transform:scale(1.04); }
.chat-hint { border:2px solid #252525; border-radius:14px; box-shadow:2px 3px 0 #25252522; }
.chat-hint::after { content:''; position:absolute; left:calc(var(--tail-x,80%) - 6px); bottom:-8px; width:12px; height:12px; background:var(--surface); border-right:2px solid #252525; border-bottom:2px solid #252525; transform:rotate(45deg); }
.chat-hint--below::after { bottom:auto; top:-8px; transform:rotate(225deg); }
.chat-panel { border:2px solid #171717; border-radius:16px; box-shadow:3px 3px 0 #171717,7px 10px 30px #0003; transform-origin:top left; }
.chat-panel header { border:0; padding:18px 16px 10px; gap:10px; flex-shrink:0; }
.chat-panel header>div { flex:1; }.chat-panel header h2 { font-size:19px; margin-top:2px; }
.chat-header-avatar { width:46px; height:46px; object-fit:contain; }
.chat-avatar-flight { position:fixed; z-index:40; object-fit:contain; pointer-events:none; transform-origin:top left; }
.chat-messages { min-height:0; padding-top:22px; mask-image:linear-gradient(to bottom,transparent 0,#000 22px,#000 calc(100% - 8px),transparent 100%); }
.chat-panel form { border:0; padding:12px; background:var(--surface); flex-shrink:0; }
.chat-input-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.chat-compose { align-items:flex-end; padding:8px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface-soft); box-shadow:0 3px 0 #0001,0 6px 16px #0001,inset 0 1px 0 #ffffff20; }
.chat-compose textarea { display:block; width:100%; min-width:0; resize:none; height:42px; max-height:86px; padding:10px 7px; border:0; outline-offset:0; border-radius:6px; background:transparent; color:var(--text); font:13px/22px inherit; font-family:inherit; font-size:13px; line-height:22px; overflow-y:hidden; }
.chat-compose button { height:36px; margin-bottom:3px; border:1px solid #171717; box-shadow:2px 2px 0 #171717; background:var(--accent-soft); color:var(--text); }
.chat-bubble { background:var(--surface-soft); border-radius:12px; }

/* Softer portfolio surfaces and a separate, vertically centered send action. */
.chat-launcher { border:1.5px solid #353840; border-radius:13px; box-shadow:1px 2px 0 #35384055,3px 5px 14px #1f232824,inset 0 1px 0 #fff8; padding:5px; }
.chat-launcher img { width:44px; height:44px; transform:none; }
.chat-hint { font-family:inherit; font-weight:600; font-size:13px; letter-spacing:-.15px; border:1px solid var(--line-strong); box-shadow:0 4px 15px #17203318; }
.chat-hint::after { border-width:1px; }
.chat-panel { border:1.5px solid var(--line-strong); box-shadow:1px 2px 0 #35384033,0 12px 35px #17203330; }
.chat-panel header { padding:9px 13px 3px; min-height:60px; }
.chat-header-avatar { width:40px; height:40px; }
.chat-panel header h2 { font-size:17px; }
.chat-messages { padding-top:14px; mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 6px),transparent 100%); }
.chat-bubble { width:fit-content; max-width:88%; background:linear-gradient(145deg,var(--surface),var(--surface-soft)); border:1px solid var(--line); box-shadow:0 3px 9px #1720330d; border-radius:4px 13px 13px 13px; padding:10px 12px; }
.chat-bubble--user { margin-left:auto; background:var(--accent-soft); border-color:var(--line-strong); border-radius:13px 4px 13px 13px; box-shadow:0 3px 10px #5060c914; }
.chat-compose { align-items:center; background:transparent; border:0; box-shadow:none; padding:0; gap:9px; }
.chat-compose textarea { box-sizing:border-box; height:36px; min-height:36px; max-height:76px; padding:7px 10px; line-height:20px; font-size:13px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-soft); box-shadow:inset 0 1px 2px #17203308,0 3px 8px #1720330c; }
.chat-compose button { display:grid; place-items:center; align-self:center; width:38px; height:38px; margin:0; padding:8px; border:1px solid var(--line-strong); border-radius:10px; background:var(--accent-soft); box-shadow:0 2px 0 #5060c920,0 4px 10px #17203312; }
.chat-compose button img { width:22px; height:22px; object-fit:contain; }
.chat-compose button:hover { filter:brightness(1.06); }

/* Monochrome chat: composer owns a layout row, never overlays the log. */
.chat-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#fff; color:#171717; border-color:#333; box-shadow:1px 2px 0 #0002,0 12px 35px #0003; }
.chat-panel header { background:#fff; }
.chat-panel small,.chat-panel .panel-close { color:#666; }
.chat-messages { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.chat-panel form { position:static; margin:0; background:#fff; min-width:0; }
.chat-bubble { color:#fff; background:#202020; border-color:#202020; box-shadow:0 3px 9px #0002; }
.chat-bubble--user { color:#171717; background:#f4f4f4; border-color:#d6d6d6; box-shadow:0 3px 9px #0001; }
.chat-compose textarea { color:#171717; background:#fafafa; border-color:#bdbdbd; box-shadow:inset 0 1px 2px #00000008,0 3px 8px #0000000c; }
.chat-compose textarea::placeholder { color:#777; }
.chat-compose button { background:#202020; color:#fff; border-color:#202020; box-shadow:0 2px 0 #0003,0 4px 10px #0001; }
.chat-compose button img { filter:grayscale(1) brightness(0) invert(1); }
.chat-launcher { background:linear-gradient(145deg,#fff,#eee); border-color:#333; box-shadow:1px 2px 0 #0005,3px 5px 14px #0002; }
.chat-launcher img,.chat-header-avatar,.chat-avatar-flight { filter:grayscale(1); }
.chat-hint,.chat-hint::after { background:#fff; color:#202020; border-color:#777; }
.chat-panel :focus-visible,.chat-launcher:focus-visible { outline-color:#555; }

/* Single-line tips with a continuous matching outline. */
.chat-launcher { border-width:2px; }
.chat-hint { width:max-content; max-width:none; white-space:nowrap; border:1px solid #777; }
.chat-hint::after { width:12px; height:12px; bottom:-7px; border:0; border-right:1px solid #777; border-bottom:1px solid #777; }
.chat-hint--below::after { top:-7px; bottom:auto; }

/* Keep the mascot colorful within the monochrome chat controls. */
.chat-launcher img,.chat-header-avatar,.chat-avatar-flight { filter:none; }
.chat-launcher img { transform:translateY(-1px); }
.chat-launcher { display:flex; align-items:center; justify-content:center; }
.chat-launcher img { flex-shrink:0; transform:translateY(-.5px); }

/* Compact contact details, with more room for the actual inquiry. */
.contact-dialog { padding:24px 24px 18px; }
.contact-dialog form { gap:12px; }
.contact-dialog .contact-inline-field { display:grid; grid-template-columns:108px minmax(0,1fr); align-items:center; gap:10px; }
.contact-dialog textarea { min-height:190px; max-height:38dvh; }
.contact-dialog .primary-action { justify-content:center; width:100%; }
.contact-dialog .contact-note { margin:0; font-size:11px; line-height:1.6; text-align:center; }
.contact-dialog .contact-status { margin:0; }
.contact-dialog .contact-status:empty { display:none; }
@media(max-width:400px) {
 .contact-dialog { padding:22px 18px 16px; }
 .contact-dialog .contact-inline-field { grid-template-columns:100px minmax(0,1fr); gap:8px; }
}

.contact-dialog .primary-action { font-family:inherit; font-size:15px; font-weight:600; line-height:1.4; padding:9px 16px; min-height:0; }

/* Give both conversation bubbles and floating tips visible, neutral depth. */
.chat-bubble { box-shadow:0 2px 3px #00000018,0 5px 12px #00000024; }
.chat-bubble--user { box-shadow:0 2px 3px #0000000f,0 5px 12px #0000001c; }
.chat-hint { box-shadow:none; filter:drop-shadow(0 3px 3px #0000001f) drop-shadow(0 5px 8px #00000018); }

/* Follow the mascot silhouette without adding a square image shadow. */
.chat-launcher img,.chat-header-avatar { filter:drop-shadow(0 1px 1px #00000026) drop-shadow(0 2px 2px #0000001a); }

/* Larger conversation mascot with balanced spacing above the first bubble. */
.chat-panel .chat-header-avatar { width:52px; height:52px; flex-shrink:0; }
.chat-panel header { gap:12px; padding:9px 13px 3px; }
.chat-messages { padding-top:8px; mask-image:linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 6px),transparent 100%); }
.chat-messages>.chat-bubble:first-child { margin-top:0; }

.contact-success { display:none; text-align:center; padding:36px 0 28px; }
.contact-dialog.is-sent { min-height:250px; }
.contact-dialog.is-sent>h2,.contact-dialog.is-sent>p,.contact-dialog.is-sent>form { display:none; }
.contact-dialog.is-sent .contact-success { display:block; }
.contact-success-icon { width:82px; height:82px; margin:0 auto 18px; color:#4b9b63; filter:drop-shadow(0 5px 8px #25563226); }
.contact-success-icon svg { display:block; width:100%; height:100%; }
.contact-dialog.is-sent .contact-success-icon { animation:contact-pop-spin 850ms cubic-bezier(.3,0,.2,1) both; }
.contact-success p { margin:0; color:var(--text); font-size:15px; font-weight:600; }
@keyframes contact-pop-spin {
 0% { opacity:0; transform:translateY(24px) scale(.5) rotate(-25deg); }
 40% { opacity:1; transform:translateY(-8px) scale(1.12) rotate(0); }
 78% { transform:translateY(0) scale(.97) rotate(365deg); }
 100% { opacity:1; transform:translateY(0) scale(1) rotate(360deg); }
}