.complaint-page { margin:0; background:#f8f3e9; color:#373329; font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif; }
.complaint-page * { box-sizing:border-box; }
.desk-nav { max-width:1160px; margin:auto; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.desk-nav a { font-weight:900; font-size:20px; text-decoration:none; }
.desk-nav>span,.desk-eyebrow { font-size:10px; font-weight:800; letter-spacing:1.5px; }
.desk-nav>span { color:#797464; }
.desk-layout { max-width:1100px; margin:26px auto 0; padding:0 24px; display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.desk-intro { padding-top:22px; }
.desk-eyebrow { display:inline-block; background:#e4eacb; border:1.5px solid #373329; border-radius:6px; padding:8px 12px; transform:rotate(-3deg); }
.desk-intro h1 { font-size:clamp(38px,4.5vw,60px); font-weight:900; letter-spacing:-2.5px; line-height:1.08; margin:24px 0 18px; }
.desk-intro h1 em { font-style:normal; color:#88669d; }
.desk-intro>p { font-size:14px; line-height:1.8; color:#756d60; }
.clerk-scene { position:relative; height:255px; max-width:350px; margin:32px auto 0; }
.clerk-sigh { position:absolute; top:4px; left:20px; border:2px solid #373329; border-radius:18px 18px 4px 18px; background:#fffdf6; padding:9px 14px; font-size:12px; transform:rotate(-6deg); }
.clerk { position:absolute; left:50%; bottom:51px; width:126px; height:139px; transform:translateX(-50%); }
.clerk-face { position:absolute; top:10px; left:13px; width:100px; height:93px; border:2.5px solid #373329; border-radius:40% 42% 46% 46%; background:#e0d1ed; z-index:2; }
.clerk-hair { position:absolute; width:33px; height:23px; border:2.5px solid #373329; border-bottom:0; border-radius:90% 0; top:-5px; left:55px; transform:rotate(-20deg); }
.eye { position:absolute; top:37px; width:23px; height:10px; border-top:3px solid #373329; }
.eye:after { content:''; display:block; width:5px; height:7px; background:#373329; margin:0 0 0 9px; border-radius:0 0 4px 4px; }
.eye.left { left:15px; transform:rotate(7deg); }.eye.right { right:15px; transform:rotate(-7deg); }
.clerk-mouth { position:absolute; width:17px; height:6px; border-top:2px solid #373329; left:39px; top:67px; transform:rotate(-7deg); }
.blush { position:absolute; top:54px; width:16px; height:7px; background:#eaaeb6; border-radius:50%; }.blush.left { left:9px; }.blush.right { right:9px; }
.clerk-shirt { position:absolute; bottom:0; width:126px; height:58px; border:2.5px solid #373329; border-radius:45px 45px 0 0; background:#9eab86; }
.clerk-desk { position:absolute; bottom:10px; left:5%; width:90%; height:52px; border:2.5px solid #373329; border-radius:5px 5px 12px 12px; background:#e5b77e; box-shadow:4px 4px 0 #373329; text-align:center; padding-top:11px; }
.clerk-desk span { background:#fff3d6; border:1.5px solid #373329; padding:4px 13px; font-size:10px; font-weight:800; letter-spacing:1px; }
.desk-mug { position:absolute; bottom:61px; left:12%; border:2px solid #373329; background:#fff3c2; border-radius:3px 3px 10px 10px; padding:12px 6px 8px; font-size:11px; transform:rotate(-7deg); }
.desk-mug:after { content:''; position:absolute; right:-11px; top:6px; width:10px; height:16px; border:2px solid #373329; border-radius:0 9px 9px 0; }
.paper-stack { position:absolute; right:10%; bottom:62px; width:55px; height:14px; border:2px solid #373329; background:repeating-linear-gradient(#fffcf0 0 3px,#b4aa92 3px 4px); transform:rotate(4deg); }
.scene-star { position:absolute; color:#af8554; font-size:28px; }.star-one { right:18px; top:38px; }.star-two { left:10px; top:100px; }
.desk-note { border:1.5px dashed #b8ae99; padding:16px 18px; border-radius:12px; margin-top:25px; display:grid; gap:6px; }
.desk-note span { font-size:9px; letter-spacing:1.8px; font-weight:800; }.desk-note strong { font-size:13px; }.desk-note small { font-size:11px; color:#756d60; }
.chat-window { background:#fffdf8; border:2px solid #373329; border-radius:20px; box-shadow:7px 7px 0 #d9ceba; overflow:hidden; min-width:0; }
.chat-header { display:flex; gap:12px; align-items:center; padding:19px 22px; background:#eee6f5; border-bottom:2px solid #373329; }
.dot-avatar { background:#d5c3e5; border:2px solid #373329; border-radius:15px; width:43px; height:43px; display:grid; place-items:center; font-weight:900; flex-shrink:0; }
.chat-header h2 { margin:0; font-size:16px; font-weight:800; }.chat-header p { font-size:10px; margin:4px 0 0; color:#6f6179; }
.online-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#768c54; margin-right:4px; }.window-stars { margin-left:auto; font-size:24px; }
.chat-transcript { height:365px; overflow-y:auto; padding:23px 20px 10px; overscroll-behavior:contain; scrollbar-width:thin; }
.chat-message { margin:0 0 17px; max-width:91%; animation:bubble-in .2s ease-out; }
.message-label { font-size:9px; letter-spacing:.7px; font-weight:800; color:#857b6c; margin:0 0 5px 4px; }
.message-bubble { border:1.5px solid #d7cebb; background:#f4f0e5; border-radius:3px 16px 16px 16px; padding:12px 14px; font-size:13px; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-message.user { margin-left:auto; }.user .message-label { text-align:right; }.user .message-bubble { background:#ede4f7; border-color:#cebbdf; border-radius:16px 3px 16px 16px; }
.typing-status { min-height:19px; margin:0 24px 7px; font-size:10px; color:#7d6c88; }
.quick-replies { display:flex; flex-wrap:wrap; gap:7px; padding:0 20px 17px; }
.quick-replies button { border:1px solid #cfc4b0; border-radius:20px; padding:7px 10px; font-size:10px; background:#fffdf8; text-align:left; }
.quick-replies button:hover { background:#eee6f5; border-color:#9f85b3; }
.chat-composer { border-top:1px solid #ded5c4; padding:15px 20px; background:#faf7ef; }
.vibe-picker { border:0; display:flex; flex-wrap:wrap; gap:12px; margin:0 0 12px; padding:0; }.vibe-picker legend { font-size:10px; font-weight:700; padding:0 0 6px; }.vibe-picker label { font-size:11px; display:flex; align-items:center; gap:4px; }.vibe-picker input { accent-color:#88669d; }
.composer-label { display:block; font-size:11px; font-weight:700; margin-bottom:7px; }.composer-row { display:flex; gap:8px; align-items:stretch; }
.composer-row textarea { min-width:0; width:100%; resize:vertical; max-height:140px; background:white; border:1.5px solid #c9bfae; border-radius:10px; padding:10px; font:inherit; font-size:12px; line-height:1.6; }
.composer-row button,.ticket-actions button { border:1.5px solid #373329; background:#decdeb; color:#373329; border-radius:10px; padding:9px 15px; font-weight:800; font-size:12px; box-shadow:2px 2px 0 #373329; }
.composer-row button { white-space:nowrap; align-self:center; }.composer-hint { margin:8px 0 0; font-size:9px; color:#857b6c; }.input-error { color:#9e3636; font-size:11px; margin:5px 0; }.input-error:empty { display:none; }
.complaint-page button { cursor:pointer; }.complaint-page button:disabled { cursor:wait; opacity:.55; }.complaint-page :focus-visible { outline:3px solid #9470b4; outline-offset:3px; }
.ticket-message { max-width:100%; }.comic-ticket { border:2px solid #373329; border-radius:14px; background:#fff3d6; padding:20px; color:#373329; overflow-wrap:anywhere; }
.receipt-top { display:flex; justify-content:space-between; gap:8px; padding-bottom:12px; border-bottom:1.5px dashed #b8a681; font-size:9px; font-weight:800; letter-spacing:1px; }
.receipt-hero { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:15px 0; }.http-label { font-size:10px; letter-spacing:3px; font-weight:800; }.http-code { font-size:66px; line-height:1; font-weight:900; letter-spacing:-4px; color:#866399; text-shadow:2px 2px 0 #d6bfdc; }
.receipt-clerk { position:relative; width:116px; height:134px; flex-shrink:0; }.receipt-clerk .clerk { bottom:0; transform:translateX(-50%) scale(.8); transform-origin:bottom; }.receipt-clerk>span { position:absolute; top:0; right:0; font-size:10px; transform:rotate(8deg); }
.comic-ticket h3 { font-size:19px; font-weight:900; line-height:1.3; margin:0 0 12px; }.receipt-quote { background:#fffaf0; border:1px solid #e0cda7; border-radius:8px; padding:11px; font-size:12px; line-height:1.6; white-space:pre-wrap; margin:0; }.receipt-quote small { display:block; font-size:9px; letter-spacing:1px; margin-bottom:4px; font-weight:800; }
.receipt-bottom { margin-top:17px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; }.filed-stamp { display:inline-block; border:2px solid #9c6673; color:#9c6673; padding:4px 7px; font-weight:900; letter-spacing:1px; transform:rotate(-7deg); }
.ticket-actions { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 5px; }.ticket-actions button { font-size:10px; padding:8px 11px; background:#fffdf8; }.ticket-actions button:first-child { background:#e5eacb; }
.desk-footer { text-align:center; color:#8b8172; font-size:10px; margin:38px 0 24px; }
@keyframes bubble-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) { .desk-nav { padding:20px; }.desk-nav>span { font-size:8px; max-width:145px; text-align:right; }.desk-layout { grid-template-columns:1fr; gap:24px; max-width:560px; margin-top:0; padding:0 16px; }.desk-intro { padding-top:10px; }.desk-intro h1 { font-size:42px; margin:18px 0 10px; }.desk-intro>p { font-size:12px; }.clerk-scene,.desk-intro .desk-note { display:none; }.chat-transcript { height:340px; }.chat-header { padding:16px; }.chat-window { box-shadow:4px 4px 0 #d9ceba; }.desk-footer { margin-top:28px; } }
@media(max-width:360px) { .chat-composer,.chat-transcript { padding-left:12px; padding-right:12px; }.comic-ticket { padding:13px; }.http-code { font-size:54px; }.receipt-clerk { width:95px; }.chat-header p { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .chat-message { animation:none; } }