/* =========================================================
   ZENNIT — Simulasi Interview AI
   Memakai komponen dari cv-review.css (hero, kartu, tombol, skor),
   file ini hanya berisi bagian khusus interview: form persiapan & chat.
   ========================================================= */

/* hero: contoh percakapan */
.iv-hero-chat{background:rgba(255,255,255,.97);border-radius:20px;padding:var(--sp-6);box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:340px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-2);animation:cvFloat 6s ease-in-out infinite}
.iv-hero-chat .cv-hero-preview-label{margin-bottom:var(--sp-1)}
.iv-hero-chat .iv-bubble{font-size:var(--fs-xs)}
.iv-hero-float-label{font-size:var(--fs-2xs);font-family: var(--font-display); font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--so-600);margin-bottom:var(--sp-2)}
@media(prefers-reduced-motion:reduce){.iv-hero-chat{animation:none}}

/* setup */
.iv-field-first{margin-top:0}
.iv-resume{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;background:var(--gold-soft);border:1.5px solid var(--gold);border-radius:16px;padding:var(--sp-4) var(--sp-4);margin-bottom:var(--sp-6)}
.iv-resume>div{flex:1;min-width:180px}
.iv-resume-icon{flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--white);color:#c77c00;display:flex;align-items:center;justify-content:center}
.iv-resume-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--so-900)}
.iv-resume-sub{font-size:var(--fs-xs);color:var(--gray-700);margin-top:2px}
.iv-resume .cv-btn-primary{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}

.iv-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media(max-width:560px){.iv-type-grid{grid-template-columns:1fr}}
.iv-type{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-3);row-gap:3px;align-items:center;border:1.5px solid var(--gray-200);border-radius:16px;padding:var(--sp-4) var(--sp-4);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.iv-type:hover{border-color:var(--so-400)}
.iv-type input{position:absolute;opacity:0;pointer-events:none}
.iv-type-icon{grid-row:span 2;width:38px;height:38px;border-radius:11px;background:var(--so-50);color:var(--so-600);display:flex;align-items:center;justify-content:center;transition:.2s}
.iv-type-label{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--so-900)}
.iv-type-desc{font-size:var(--fs-xs);color:var(--gray-500);line-height:var(--lh-normal)}
.iv-type:has(input:checked){border-color:var(--so-600);background:var(--so-50);box-shadow:0 0 0 3px rgba(18,147,159,.1)}
.iv-type:has(input:checked) .iv-type-icon{background:var(--so-700);color:var(--white)}
.iv-type:has(input:focus-visible){outline:2px solid var(--so-500);outline-offset:2px}

.iv-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-6);align-items:start}
@media(max-width:640px){.iv-row{grid-template-columns:1fr;gap:0}}
.iv-lang{margin-bottom:0}
.iv-lang-option{display:flex;cursor:pointer}
.iv-lang-option input{position:absolute;opacity:0;pointer-events:none}
.iv-lang-option input:checked+.cv-tab{background:var(--so-800);color:#fff}
.iv-lang-option input:focus-visible+.cv-tab{outline:2px solid var(--so-500);outline-offset:2px}
select.cv-role-input{appearance:auto;background:var(--white);cursor:pointer}
.iv-hint{font-size:var(--fs-sm);color:var(--gray-500);line-height:var(--lh-normal)}

.iv-inline-error{margin-top:var(--sp-4);font-size:var(--fs-sm);color:#b23a3a;background:#fde6e6;border:1.5px solid #f6c6c6;border-radius:12px;padding:var(--sp-2) var(--sp-4);line-height:var(--lh-normal)}

/* chat */
.iv-chat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.iv-chat-who{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.iv-avatar{flex-shrink:0;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--so-700),var(--so-400));color:var(--white);display:flex;align-items:center;justify-content:center}
.iv-chat-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--so-900)}
.iv-chat-sub{font-size:var(--fs-xs);color:var(--gray-500)}
.iv-progress-label{font-size:var(--fs-xs);font-family: var(--font-display); font-weight:700;letter-spacing:var(--ls-wide);color:var(--so-700);background:var(--so-50);border:1.5px solid var(--so-100);border-radius:100px;padding:var(--sp-1) var(--sp-3)}
.iv-progress{height:6px;border-radius:4px;background:var(--so-50);overflow:hidden;margin:var(--sp-4) 0 var(--sp-1)}
.iv-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--so-500),var(--gold));border-radius:4px;transition:width .6s cubic-bezier(.2,.8,.2,1)}

.iv-messages{display:flex;flex-direction:column;gap:var(--sp-3);max-height:440px;overflow-y:auto;padding:var(--sp-4) 2px;scroll-behavior:smooth}
.iv-messages.is-static{max-height:none;padding-bottom:0}
.iv-bubble{max-width:84%;padding:var(--sp-3) var(--sp-4);border-radius:18px;font-size:var(--fs-md);line-height:var(--lh-normal);white-space:pre-wrap;word-wrap:break-word}
.iv-bubble.is-interviewer{align-self:flex-start;background:var(--so-50);border:1.5px solid var(--so-100);color:var(--so-900);border-bottom-left-radius:6px}
.iv-bubble.is-candidate{align-self:flex-end;background:var(--so-800);color:var(--white);border-bottom-right-radius:6px}
.iv-bubble.is-typing{display:inline-flex;gap:var(--sp-1);padding:var(--sp-4) var(--sp-4)}
.iv-bubble.is-typing span{width:7px;height:7px;border-radius:50%;background:var(--so-400);animation:ivDot 1.2s ease-in-out infinite}
.iv-bubble.is-typing span:nth-child(2){animation-delay:.15s}
.iv-bubble.is-typing span:nth-child(3){animation-delay:.3s}
@keyframes ivDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.iv-composer{border-top:1.5px dashed var(--gray-200);padding-top:var(--sp-4)}
.iv-answer{min-height:120px}
.iv-answer:disabled{background:var(--so-50);cursor:wait}
.iv-composer-bar{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2);flex-wrap:wrap}
.iv-count{margin-left:auto;font-size:var(--fs-xs);color:var(--gray-400);font-variant-numeric:tabular-nums}
.iv-mic{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--so-700);background:var(--white);border:1.5px solid var(--so-100);border-radius:100px;padding:var(--sp-2) var(--sp-4);cursor:pointer;transition:.2s}
.iv-mic:hover{border-color:var(--so-400)}
.iv-mic[hidden]{display:none}
.iv-mic.is-on{background:#fde6e6;border-color:#d64545;color:#b23a3a}
.iv-mic.is-on .icon{animation:ivPulse 1s ease-in-out infinite}
@keyframes ivPulse{50%{opacity:.35}}
.iv-mic:disabled{opacity:.5;cursor:not-allowed}

.iv-retry{text-align:center;border-top:1.5px dashed var(--gray-200);padding:var(--sp-5) var(--sp-2) var(--sp-1)}
.iv-retry p{font-size:var(--fs-md);color:var(--gray-500);margin-bottom:var(--sp-4)}

.iv-chat-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--gray-500)}
.iv-chat-foot kbd{font-family:inherit;font-size:var(--fs-2xs);background:var(--so-50);border:1px solid var(--so-100);border-radius:5px;padding:1px var(--sp-1)}
.iv-link-btn{border:none;background:none;font-family:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--so-700);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.iv-link-btn[hidden]{display:none}
@media(max-width:600px){
  .iv-bubble{max-width:92%}
  .iv-composer-bar .cv-btn-primary{width:100%;justify-content:center}
  .iv-chat-foot>span{display:none}
}

/* hasil: per jawaban */
.iv-answer-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.iv-answer-item{background:var(--white);border:1.5px solid rgba(18,147,159,.14);border-radius:16px;box-shadow:var(--shadow-sm)}
.iv-answer-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4)}
.iv-answer-item summary::-webkit-details-marker{display:none}
.iv-answer-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--so-800);color:var(--white);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center}
.iv-answer-q{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--so-900);line-height:var(--lh-normal)}
.iv-answer-body{padding:0 var(--sp-4) var(--sp-4) var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-2)}
@media(max-width:600px){.iv-answer-body{padding-left:var(--sp-4)}}
.iv-answer-good,.iv-answer-fix{display:flex;gap:var(--sp-2);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-700)}
.iv-answer-good .ico,.iv-answer-fix .ico{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.iv-answer-good .ico{background:#e3f6eb;color:#1f9d55}
.iv-answer-fix .ico{background:var(--gold-soft);color:#c77c00}
.iv-answer-good strong,.iv-answer-fix strong{color:var(--so-900)}
.iv-better{position:relative;background:var(--so-50);border:1.5px solid var(--so-400);border-radius:14px;padding:var(--sp-4) var(--sp-4) var(--sp-12);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--so-900)}
.iv-better .cv-rewrite-tag{color:var(--so-600)}

.iv-transcript summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--so-700)}
.iv-transcript summary::-webkit-details-marker{display:none}