/* Shared, illustrative conversation. Chrome follows the observed ChatGPT light UI. */
.mdone-gpt { padding:80px 0 44px; background:#fff; scroll-margin-top:90px; }
.mdone-gpt .container-wide { max-width:1280px; }
.cgpt-section-head { display:flex; justify-content:space-between; align-items:center; gap:40px; margin-bottom:36px; }
.cgpt-eyebrow { margin:0 0 14px; color:#606060; font-size:12px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; }
.cgpt-section-head h2 { font-size:clamp(32px,4vw,48px); line-height:1.15; font-weight:400; color:#171717; margin:0 0 18px; letter-spacing:-1px; }
.cgpt-section-head p:not(.cgpt-eyebrow) { font-size:18px; color:#5c5c63; line-height:1.65; max-width:730px; margin:0; }
.cgpt-install { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:20px; background:#171717; color:#fff; border:1px solid #171717; border-radius:999px; padding:16px 24px; font-size:15px; font-weight:500; text-decoration:none; min-height:52px; }
.cgpt-install:hover { background:#333; color:#fff; }
.cgpt-install:focus-visible,.cgpt-composer:focus-visible { outline:3px solid #ea580c; outline-offset:5px; }
.cgpt-window { display:grid; grid-template-columns:230px minmax(0,1fr); overflow:hidden; border:1px solid #dedede; border-radius:18px; background:#fff; color:#171717; box-shadow:0 16px 45px #00000008; font-family:Arial,Helvetica,system-ui,sans-serif; font-weight:400; text-align:left; }
.cgpt-window * { box-sizing:border-box; }
.cgpt-window svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.cgpt-sidebar { position:relative; display:flex; flex-direction:column; padding:24px 14px 16px; background:#f9f9f9; border-right:1px solid #eee; font-size:13px; }
.cgpt-brand { display:flex; align-items:center; justify-content:space-between; padding:0 10px; margin-bottom:30px; font-size:19px; font-weight:600; letter-spacing:-.5px; }
.cgpt-brand > span { color:#777; font-size:18px; font-weight:400; }
.cgpt-side-item { display:flex; gap:12px; align-items:center; padding:10px; color:#292929; }
.cgpt-side-item > span { display:inline-block; width:18px; text-align:center; font-size:20px; line-height:1; }
.cgpt-side-label { margin:36px 10px 10px; font-size:12px; color:#737373; }
.cgpt-side-chat { padding:11px 10px; border-radius:8px; font-size:12px; line-height:1.45; }
.cgpt-side-selected { background:#ececec; }
.cgpt-side-bottom { display:flex; align-items:center; gap:10px; margin-top:auto; padding:32px 10px 0; font-size:12px; }
.cgpt-avatar { display:grid; place-items:center; width:28px; height:28px; border:1px solid #ddd; border-radius:50%; font-size:11px; background:white; }
.cgpt-main { min-width:0; }
.cgpt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:16px 26px; font-size:19px; font-weight:500; }
.cgpt-chevron { margin-left:5px; color:#888; font-size:17px; }
.cgpt-example-tag { padding:5px 10px; border:1px solid #e7e7e7; border-radius:999px; color:#737373; font-size:10px; font-weight:400; white-space:nowrap; }
.cgpt-thread { max-width:740px; padding:20px 40px 16px; margin:0 auto; }
.cgpt-user { width:fit-content; max-width:86%; margin-left:auto; padding:16px 20px; background:#f4f4f4; border-radius:22px; font-size:16px; line-height:1.55; }
.cgpt-mention { font-weight:600; }
.cgpt-response { padding:30px 0 12px; }
.cgpt-used { display:flex; align-items:center; gap:8px; margin-bottom:16px; color:#666; font-size:12px; }
.cgpt-used img { width:20px; height:20px; border-radius:5px; }
.cgpt-used > span { margin-left:2px; }
.cgpt-response > p { font-size:16px; line-height:1.65; color:#171717; margin:0 0 18px; }
.cgpt-response strong { font-weight:600; }
.cgpt-result { border:1px solid #e3e3e3; border-radius:12px; overflow:hidden; margin-bottom:18px; }
.cgpt-result-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; background:#fafafa; font-size:13px; }
.cgpt-result-heading > span { color:#737373; font-size:11px; }
.cgpt-result-row { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid #eee; font-size:13px; }
.cgpt-result-row > span:last-child { border:1px solid #e0e0e0; border-radius:5px; padding:3px 7px; font-size:11px; color:#555; }
.cgpt-result-note { padding:12px 18px; border-top:1px solid #eee; font-size:11px; line-height:1.5; color:#737373; }
.cgpt-response > .cgpt-followup { font-size:14px; margin:0 0 12px; }
.cgpt-composer { display:flex; align-items:center; gap:14px; padding:12px 14px; margin-top:8px; border:1px solid #ddd; border-radius:30px; color:#737373; text-decoration:none; box-shadow:0 3px 10px #00000005; font-size:14px; }
.cgpt-composer:hover { border-color:#999; color:#555; }
.cgpt-plus { font-size:23px; color:#292929; line-height:1; }
.cgpt-mic { margin-left:auto; color:#292929; }
.cgpt-send { display:grid; place-items:center; background:#a8a8a8; color:#fff; width:30px; height:30px; border-radius:50%; }
.cgpt-send svg { width:17px; height:17px; }
.cgpt-thread > .cgpt-preview-note { font-size:10px; color:#777; text-align:center; line-height:1.6; margin:10px 0 0; }
.cgpt-section-foot { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-top:24px; font-size:13px; line-height:1.6; color:#5c5c63; }
.cgpt-section-foot p { margin:0; }
.cgpt-section-foot a { color:#292929; text-underline-offset:4px; white-space:nowrap; }
.cgpt-trademark { color:#777; font-size:11px; line-height:1.6; margin:16px 0 0; }
@media(max-width:1000px) {
 .cgpt-window { grid-template-columns:190px minmax(0,1fr); }
 .cgpt-sidebar { padding-inline:8px; }
 .cgpt-side-chat { font-size:11px; }
 .cgpt-thread { padding-inline:28px; }
 .cgpt-section-head { align-items:flex-start; }
 .cgpt-install { padding-inline:20px; }
}
@media(max-width:700px) {
 .mdone-gpt { padding:56px 0 36px; }
 .cgpt-section-head { display:block; margin-bottom:28px; }
 .cgpt-section-head p:not(.cgpt-eyebrow) { font-size:16px; }
 .cgpt-install { margin-top:24px; }
 .cgpt-window { display:block; border-radius:14px; }
 .cgpt-sidebar { display:none; }
 .cgpt-toolbar { padding:16px 18px; font-size:18px; }
 .cgpt-thread { padding:12px 18px 16px; }
 .cgpt-user { max-width:94%; padding:14px 16px; font-size:14px; }
 .cgpt-response { padding-top:26px; }
 .cgpt-response > p { font-size:14px; }
 .cgpt-result-heading { padding:13px 12px; font-size:12px; }
 .cgpt-result-heading > span { font-size:10px; }
 .cgpt-result-row { padding:12px; gap:8px; font-size:12px; }
 .cgpt-result-note { padding:12px; }
 .cgpt-response > .cgpt-followup { font-size:13px; }
 .cgpt-composer { margin-top:0; }
 .cgpt-section-foot { display:block; font-size:12px; }
 .cgpt-section-foot a { display:inline-block; margin-top:12px; white-space:normal; }
}