.application-state { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 900px; padding: 12px 0; }
.application-state-resume { display: grid; flex: none; width: 96px; height: 120px; align-content: start; gap: 9px; padding: 18px 16px; border: 1px solid #262626; border-radius: 18px; background: linear-gradient(180deg, #1a1a1b, #121213); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.application-state-resume i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2a2a2a 0 40%, #3a3a3a 50%, #2a2a2a 60%) 0 0 / 300% 100%; animation: application-resume-shimmer 1.9s linear infinite; }
.application-state-resume i:first-child { width: 24px; height: 24px; margin-bottom: 6px; border-radius: 50%; }
.application-state-resume i:nth-child(2) { width: 80%; }
.application-state-resume i:nth-child(4) { width: 60%; }
.application-state-caption { display: grid; gap: 8px; min-width: 0; }
.application-state-caption strong { font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.application-state-caption span { color: #8f8f8f; font-size: 22px; }
.application-state[data-state="sending"] .application-state-caption strong { background: linear-gradient(110deg, #7c7c7c 35%, #f0f0f0 48%, #7c7c7c 61%) 0 0 / 260% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: application-caption-shimmer 2.6s ease-in-out infinite; }
.application-state[data-state="sent"] .application-state-resume i { animation: none; background: #2c2c2c; }
.application-state.is-just-sent .application-state-caption span { animation: ai-text-in .45s ease both; }
@keyframes application-resume-shimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .application-state-resume i, .application-state-caption strong { animation: none !important; }
}
@keyframes application-caption-shimmer { to { background-position: -160% 0; } }
.vacancies-page .vacancy-detail[data-stage="application"]:has(.application-state) .stage-dock { margin-bottom: 24px; }
.application-state-caption strong { overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .application-state { gap: 20px; }
  .application-state-resume { width: 76px; height: 96px; gap: 7px; padding: 14px 12px; border-radius: 15px; }
  .application-state-resume i:first-child { width: 20px; height: 20px; margin-bottom: 4px; }
  .application-state-caption strong { font-size: 22px; }
  .application-state-caption span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .application-state.is-just-sent .application-state-caption span { animation: none; }
}
.application-receipt { display: grid; width: 100%; gap: 32px; align-content: start; }
.application-material-nav { display: inline-flex; justify-self: start; max-width: 100%; gap: 2px; padding: 4px; border-radius: 999px; background: #151515; }
.application-material-tab { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #999; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.15; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.application-material-tab:hover { color: #eee; }
.application-material-tab[aria-pressed="true"] { background: #e9e9e9; color: #080808; }
.application-material { display: grid; width: 100%; gap: 24px; animation: application-material-in .25s ease both; }
.application-letter .application-message { max-width: min(88%, 760px); }
.application-letter h3 { margin: 0; color: #aaa; font-size: 18px; font-weight: 500; }
.application-question-progress { display: grid; gap: 8px; }
.application-question-position { display: flex; align-items: baseline; gap: 8px; color: #aaa; font-size: 18px; }
.application-question-position strong { color: #fff; font-size: 28px; font-weight: 600; }
.application-question-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(16px, 1fr)); gap: 8px; }
.application-question-bar { position: relative; height: 28px; padding: 0; border: 0; background: transparent; }
.application-question-bar::before { content: ""; position: absolute; inset: 10px 0; border-radius: 999px; background: rgba(255,209,102,.58); transition: background .2s ease, box-shadow .2s ease; }
.application-question-bar:hover::before { background: #ffd166; }
.application-question-bar[aria-current="step"]::before { background: #ffd166; }
@keyframes application-material-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .application-material-tab, .application-question-bar::before { transition: none; }
  .application-material { animation: none; }
}
@media (max-width: 820px) {
  .application-material-tab { min-height: 36px; padding-inline: 14px; font-size: 15px; }
}
.application-question h4 { max-width: 75%; margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 550; line-height: 1.4; letter-spacing: -.015em; }

.application-receipt { margin-top: 28px; }
.application-receipt [hidden] { display: none !important; }
.application-question-progress { margin-bottom: 24px; }
/* answers read as the candidate's own messages in the HR dialogue;
   min-width keeps a one-word answer like «Да» from being easy to miss */
.application-message { width: fit-content; min-width: 160px; max-width: 75%; margin-left: auto; padding: 17px 24px; border-radius: 28px 28px 8px 28px; background: #333; color: #f0f0f0; overflow-wrap: anywhere; }
.application-message p { margin: 0; white-space: pre-wrap; font-size: 22px; line-height: 1.45; }
.vacancies-page .application-empty h3 { margin: 28px 0 16px; font-size: clamp(34px, 3.6vw, 48px); font-weight: 590; line-height: 1.12; letter-spacing: -.035em; }
.application-empty p { color: #b8b8b8; font-size: clamp(23px, 2vw, 28px); line-height: 1.5; }
@media (max-width: 820px) {
  .application-question h4 { max-width: none; }
  .application-message { max-width: 86%; }
  .application-letter .application-message { max-width: 94%; }
  .application-message p { font-size: 19px; }
}

.application-panel [data-answer-editor][hidden], .application-panel [data-saved-answer][hidden] { display: none !important; }
.application-panel .saved-answer { margin: 0; padding: 22px 26px; border-radius: 30px; background: #171717; color: #d5d5d5; font-size: clamp(20px, 2vw, 24px); line-height: 1.5; }
.answer-reopen { margin-top: 24px; padding: 16px 26px; border: 0; border-radius: 999px; background: #fff; color: #080808; font-size: 22px; font-weight: 650; cursor: pointer; }
.answer-reopen:hover { background: #e8e8e8; }
.answer-reopen:focus-visible { outline: 2px solid #ffd166; outline-offset: 4px; }

.answer-custom { position: relative; min-width: 0; border-radius: 32px; background: #202020; overflow: hidden; }
.vacancies-page .answer-custom:has(.answer-compose:not([hidden])) > [data-custom-answer] { display: none; }
.vacancies-page .answer-custom:has(.answer-compose:not([hidden])) > [data-custom-answer].is-selected { position: absolute; z-index: 1; top: 31px; left: 28px; display: flex; width: 42px; min-height: 42px; padding: 0; border: 0; background: transparent; }
.answer-custom:has(.answer-compose:not([hidden])) > [data-custom-answer] span { display: none; }
.answer-custom .answer-compose { min-height: 104px; margin: 0; padding: 21px 28px; border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.answer-custom:has([data-custom-answer].is-selected) .answer-compose { padding-left: 88px; }
.answer-custom .answer-compose:focus-within { background: transparent; }
.answer-custom .answer-compose.is-expanded { grid-template-columns: minmax(0, 1fr) auto; }
.answer-custom .answer-compose.is-expanded .chat-composer-actions { grid-column: 2; grid-row: 1; }
.answer-custom .chat-ai, .answer-custom .chat-send { min-height: 60px; }
.answer-custom .chat-send { width: 60px; height: 60px; min-width: 60px; }
@media (max-width: 820px) {
  .answer-custom { border-radius: 24px; }
  .answer-custom .answer-compose { min-height: 92px; padding: 15px 24px; }
  .answer-custom:has([data-custom-answer].is-selected) .answer-compose { padding-left: 84px; }
  .vacancies-page .answer-custom:has(.answer-compose:not([hidden])) > [data-custom-answer].is-selected { top: 25px; left: 24px; }
}
@media (max-width: 480px) {
  .answer-custom .answer-compose, .answer-custom .answer-compose.is-expanded { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 20px; gap: 14px; }
  .answer-custom:has([data-custom-answer].is-selected) .answer-compose { padding-left: 80px; }
  .answer-custom .answer-compose .chat-composer-actions, .answer-custom .answer-compose.is-expanded .chat-composer-actions { grid-column: 1; grid-row: 2; }
  .vacancies-page .answer-custom:has(.answer-compose:not([hidden])) > [data-custom-answer].is-selected { top: 20px; left: 20px; }
}

.vacancies-page .answer-custom .chat-ai { font-size: 20px; font-weight: 650; }
.vacancies-page .answer-custom textarea { font-size: 21px; line-height: 1.5; }
.vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer]).is-selected::before { background: radial-gradient(circle, #090909 0 5px, #ffd166 5px); box-shadow: none; }
@media (max-width: 820px) {
  .vacancies-page .answer-custom textarea { font-size: 18px; }
}