/* Chip, the course companion (25 Oct 2026): the approved illustrated avatar, cream assistant bubbles, blue reader
   bubbles and rounded composer from design handoff chipverdict-next-course-review/outputs/chip-avatar-preview, scoped
   to .cv-chip. Two placements share it: the directory sidebar (.cv-chip--directory, inside .cv-finder-rail) and the
   review-page companion (.cv-chip--review, a launcher in the corner that opens a panel). */

/* ---- avatar: one element, 192x208 atlas cells, shown at 154x167 (0.802) or 96x104 (0.5) ---- */
.cv-chip .cv-chip-avatar{display:block;width:154px;height:167px;background-repeat:no-repeat;background-size:auto 167px;background-position:0 0;pointer-events:none}
.cv-chip .cv-chip-slot--launch .cv-chip-avatar{width:96px;height:104px;background-size:auto 104px}
.cv-chip .cv-chip-avatar[data-state="idle"]{background-image:var(--cv-chip-idle)}
.cv-chip .cv-chip-avatar[data-state="hover"]{background-image:var(--cv-chip-hover)}
.cv-chip .cv-chip-avatar[data-state="reading"]{background-image:var(--cv-chip-reading)}
.cv-chip .cv-chip-stage{display:grid;place-items:center;height:175px;margin:8px 0 0}
.cv-chip .cv-chip-avatar-btn{appearance:none;border:0;background:none;padding:0;cursor:pointer;border-radius:22px;touch-action:manipulation}
.cv-chip .cv-chip-avatar-btn:focus-visible{outline:2px solid #E1BD5E;outline-offset:4px}
.cv-chip .cv-chip-state{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#c4ad76;text-align:center;min-height:12px;margin:5px 0 18px}
.cv-chip .cv-chip-state[data-busy="true"]{color:#E1BD5E}
.cv-chip .cv-chip-title{margin:0 0 6px;font-size:23px;line-height:1.15;letter-spacing:-.3px;color:#F5F1ED}
.cv-chip .cv-chip-course{margin:0 0 14px;font-size:12px;line-height:1.5;color:#B4ADA5}
html body .cv-chip .cv-chip-title{font-family:'CV Site D-DIN PRO',Arial,sans-serif!important;font-weight:700}

/* ---- the conversation ---- */
.cv-chip .cv-chip-log{display:flex;flex-direction:column;gap:13px;overflow-y:auto;overscroll-behavior:contain;padding:14px 6px 12px;scrollbar-width:thin;scrollbar-color:#5b5035 transparent}
.cv-chip .cv-chip-msg{position:relative;max-width:94%;padding:14px 16px;border-radius:19px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;animation:cv-chip-arrive .22s ease-out}
.cv-chip .cv-chip-msg.is-bot{align-self:flex-start;background:linear-gradient(135deg,#fbf5e6,#e5dbc3);color:#30271a;border-bottom-left-radius:5px;box-shadow:0 5px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.5);margin-top:8px}
.cv-chip .cv-chip-msg.is-bot::before{content:'';position:absolute;left:20px;top:-7px;width:15px;height:15px;transform:rotate(45deg);background:#f5eedf;border-radius:3px}
.cv-chip .cv-chip-msg.is-user{align-self:flex-end;background:linear-gradient(135deg,#234b9a,#20365e);color:#f4f6ff;border-bottom-right-radius:5px;border:1px solid rgba(69,98,156,.33)}
.cv-chip .cv-chip-msg .cv-chip-by{display:block;margin-bottom:5px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#806c44}
.cv-chip .cv-chip-msg.is-pending{min-width:170px}
.cv-chip .cv-chip-msg.is-pending::after{content:'\2022\2022\2022';letter-spacing:6px;display:block;font-size:20px;line-height:1;color:#92753e;animation:cv-chip-thinking 1.3s ease-in-out infinite}
.cv-chip .cv-chip-msg.is-error{background:linear-gradient(135deg,#f3e2d6,#e0c9b6);color:#4a2d1c}
.cv-chip .cv-chip-retry{appearance:none;border:1px solid #806c44;border-radius:14px;background:none;color:#30271a;font:inherit;font-size:12px;padding:4px 10px;margin-top:8px;cursor:pointer}
.cv-chip .cv-chip-retry:hover{border-color:#30271a}
.cv-chip .cv-chip-links{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.cv-chip .cv-chip-links li{font-size:13px;line-height:1.5}
.cv-chip .cv-chip-links .cv-chip-match{display:inline-block;margin-right:6px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#806c44}
.cv-chip .cv-chip-links a{color:#30271a;font-weight:700;border-bottom:1px solid #c9bb9a}
.cv-chip .cv-chip-links a:hover{color:#1237FF;border-color:#1237FF}
.cv-chip .cv-chip-links a::after{content:'\2197';margin-left:4px;font-weight:400;color:#806c44}
.cv-chip .cv-chip-pointer{margin:10px 0 0;font-size:13px}
.cv-chip .cv-chip-pointer a{color:#30271a;font-weight:700;border-bottom:1px solid #c9bb9a}
.cv-chip .cv-chip-pointer a:hover{color:#1237FF;border-color:#1237FF}

/* ---- composer ---- */
.cv-chip .cv-chip-form{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;border:1px solid #615334;border-radius:23px;background:#0f0e0b;box-shadow:inset 0 2px 5px rgba(0,0,0,.25);margin-top:14px}
.cv-chip .cv-chip-form:focus-within{border-color:#E1BD5E;box-shadow:0 0 0 3px rgba(226,185,77,.07)}
html body.cv-ftm .cv-chip .cv-chip-form textarea,html body .cv-chip .cv-chip-form textarea{resize:none;width:100%;min-width:0;background:none;border:0;border-radius:0;color:#f3ead5;padding:7px 0;margin:0;font-size:14px;line-height:1.4;outline:none!important;max-height:100px;box-shadow:none}
.cv-chip .cv-chip-form textarea::placeholder{color:#8e8271;opacity:1}
.cv-chip .cv-chip-form button{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:linear-gradient(135deg,#f3d47f,#c99d35);color:#211a0d;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.cv-chip .cv-chip-form button:disabled{opacity:.4;cursor:wait}
.cv-chip .cv-chip-note{margin:10px 0 0;font-size:10px;line-height:1.5;text-align:center;color:#8e8779}

/* ---- directory sidebar placement: the rail provides the frame, this is the inside ---- */
.cv-chip--directory .cv-chip-stage{height:165px;margin:14px 0 0}
.cv-chip--directory .cv-demo{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:12px;border-top:1px solid #E1BD5E}
.cv-chip--directory .cv-demo-label{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;margin-bottom:6px;min-height:16px;color:#E1BD5E;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.cv-chip--directory .cv-demo-label button{background:none;border:0;color:#B4ADA5;font:inherit;font-size:14px;letter-spacing:0;padding:0 0 2px;cursor:pointer;line-height:1}
.cv-chip--directory .cv-demo-label button:hover{color:#E1BD5E}
.cv-chip--directory .cv-chip-log{flex:1;min-height:0}
.cv-chip--directory .cv-demo-accessible{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.cv-chip--directory .cv-chip-form{flex:none}
/* after the example: two subtle pulses and a blinking cursor at the field; no focus is taken */
.cv-chip--directory .cv-demo.is-ready .cv-chip-form{animation:cv-chip-invite 1.15s ease-in-out 2}
.cv-chip--directory .cv-demo.is-ready .cv-chip-form::after{content:'';position:absolute;left:16px;top:15px;width:2px;height:19px;background:#E1BD5E;pointer-events:none;animation:cv-chip-cursor 1.1s steps(1) infinite}
.cv-chip--directory .cv-demo.is-ready .cv-chip-form{position:relative}
.cv-chip--directory .cv-demo.is-ready .cv-chip-form textarea{text-indent:10px}

/* ---- review-page placement: launcher in the corner, panel above it ---- */
.cv-chip--review{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:'CV Site Manrope',Arial,Helvetica,sans-serif;max-width:calc(100vw - 32px)}
.cv-chip--review .cv-chip-launch{appearance:none;display:flex;align-items:center;gap:10px;border:1px solid #504631;border-radius:999px;background:#171510;color:#f6efdf;padding:6px 18px 6px 6px;cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.cv-chip--review .cv-chip-launch:hover{border-color:#E1BD5E}
.cv-chip--review .cv-chip-launch:focus-visible{outline:2px solid #E1BD5E;outline-offset:3px}
.cv-chip--review .cv-chip-launch-text{font-size:13px;font-weight:700;letter-spacing:-.1px}
.cv-chip--review .cv-chip-slot--launch{display:block;width:64px;height:69px;overflow:hidden}
.cv-chip--review .cv-chip-slot--launch .cv-chip-avatar{width:64px;height:69px;background-size:auto 69px}
.cv-chip--review .cv-chip-launch[aria-expanded="true"]{display:none}
.cv-chip--review .cv-chip-panel{box-sizing:border-box;width:380px;max-width:100%;max-height:min(82vh,760px);display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#292315 0,transparent 48%),#171510;border:1px solid #504631;border-radius:24px;padding:18px 22px 20px;box-shadow:0 22px 70px rgba(0,0,0,.5);color:#f6efdf}
.cv-chip--review .cv-chip-panel[hidden]{display:none}
.cv-chip--review .cv-chip-eyebrow{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#E1BD5E}
.cv-chip--review .cv-chip-close{appearance:none;border:0;background:none;color:#aaa18e;font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.cv-chip--review .cv-chip-close:hover{color:#E1BD5E}
.cv-chip--review .cv-chip-stage{height:165px}
.cv-chip--review .cv-chip-log{flex:1;min-height:120px;max-height:300px}
@media (max-width:600px){
  .cv-chip--review{right:0;bottom:0;max-width:100vw;align-items:stretch}
  .cv-chip--review .cv-chip-launch{margin:0 12px 12px auto}
  .cv-chip--review .cv-chip-panel{width:100%;max-height:92vh;max-height:92dvh;border-radius:20px 20px 0 0;padding:14px 16px 16px}
  .cv-chip--review .cv-chip-stage{height:120px}
  .cv-chip--review .cv-chip-stage .cv-chip-avatar{width:110px;height:119px;background-size:auto 119px}
  .cv-chip--review .cv-chip-log{max-height:36vh}
}

/* ---- phones (28 Oct 2026): panel above the on-screen keyboard, no zoom on focus, more room for the answer ---- */
@media (max-width:600px){
  html body.cv-ftm .cv-chip .cv-chip-form textarea,html body .cv-chip .cv-chip-form textarea{font-size:16px}
  .cv-chip--review{bottom:var(--cv-chip-kb,0px)}
  .cv-chip--review .cv-chip-panel{max-height:min(92dvh,calc(var(--cv-chip-vh,100dvh) - 8px));overscroll-behavior:contain}
  .cv-chip--review .cv-chip-log{max-height:none;min-height:96px}
  .cv-chip--review.is-typing .cv-chip-stage,.cv-chip--review.is-typing .cv-chip-state,.cv-chip--review.is-typing .cv-chip-course,.cv-chip--review.is-typing .cv-chip-note{display:none}
  .cv-chip--review.is-typing .cv-chip-title{font-size:18px;margin:10px 0 0}
  /* once a conversation has started: only the eyebrow with the close button, the bubbles and the field */
  .cv-chip--review.is-chatting .cv-chip-stage,.cv-chip--review.is-chatting .cv-chip-state,.cv-chip--review.is-chatting .cv-chip-title,.cv-chip--review.is-chatting .cv-chip-course,.cv-chip--review.is-chatting .cv-chip-note{display:none}
  .cv-chip--review.is-chatting .cv-chip-panel{height:min(92dvh,calc(var(--cv-chip-vh,100dvh) - 8px))}
  .cv-chip--review.is-chatting .cv-chip-log{margin-top:10px}
}

/* ---- phones (28 Oct 2026): the directory sidebar while typing and once a conversation has started ---- */
@media (max-width:600px){
  .ftm .cv-chip--directory .cv-chip-stage{height:120px;margin-top:8px}
  .ftm .cv-chip--directory.is-typing,.ftm .cv-chip--directory.is-chatting{height:max(320px,calc(var(--cv-chip-vh,100dvh) - var(--cv-chip-top,0px) - 12px));padding-top:12px;padding-bottom:12px}
  .cv-chip--directory.is-typing .cv-chip-stage,.cv-chip--directory.is-typing .cv-chip-state,.cv-chip--directory.is-typing .cv-chip-course,.cv-chip--directory.is-typing .cv-chip-note,
  .cv-chip--directory.is-chatting .cv-chip-stage,.cv-chip--directory.is-chatting .cv-chip-state,.cv-chip--directory.is-chatting .cv-chip-course,
  .cv-chip--directory.is-chatting .cv-chip-title,.cv-chip--directory.is-chatting .cv-chip-note{display:none}
  .cv-chip--directory.is-typing .cv-chip-title,.cv-chip--directory.is-chatting .cv-chip-title{font-size:18px;margin:10px 0 8px}
  .cv-chip--directory .cv-chip-log{overscroll-behavior:contain}
  .cv-chip--directory.is-typing .cv-demo,.cv-chip--directory.is-chatting .cv-demo{flex:1 1 auto;min-height:0}
  .cv-chip--directory.is-typing .cv-chip-log,.cv-chip--directory.is-chatting .cv-chip-log{flex:1 1 auto;min-height:0;max-height:none}
}

@keyframes cv-chip-arrive{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes cv-chip-thinking{50%{opacity:.3}}
@keyframes cv-chip-invite{0%,100%{box-shadow:0 0 0 0 rgba(225,189,94,0)}50%{box-shadow:0 0 0 5px rgba(225,189,94,.12)}}
@keyframes cv-chip-cursor{0%,45%{opacity:1}46%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cv-chip .cv-chip-msg,.cv-chip .cv-chip-msg.is-pending::after,.cv-chip--directory .cv-demo.is-ready .cv-chip-form,.cv-chip--directory .cv-demo.is-ready .cv-chip-form::after{animation:none}
}