/* Approved V2 artwork and layout, connected to the existing H5 controls. */
@font-face { font-family: "Welcome Script"; src: local("SignPainter-HouseScriptSemibold"); font-style: normal; font-weight: 600; font-display: swap; }
:root { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-synthesis: none; }
body { background: #eeeffe; }
.app-shell { padding: 0 16px calc(160px + env(safe-area-inset-bottom)); background: #eeeffe url("../assets/home-background-reference-v2.webp") center top / 100% auto no-repeat; }
.app-shell .service-header { min-height: 78px; padding: max(18px, env(safe-area-inset-top)) 0 8px; gap: 8px; }
.brand-lockup { flex: 1; gap: 8px; }
.app-shell .brand-lockup h1 { color: #24215a; font-size: 18px; font-weight: 650; line-height: 1.4; letter-spacing: -.5px; }
.app-shell #consultationMenuButton { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; padding: 9px; border: 0; border-radius: 50%; background: transparent; }
#consultationMenuButton img { display: block; width: 27px; height: 27px; object-fit: contain; }
.app-shell .header-actions, .app-shell.is-agent-conversation .header-actions { display: flex; flex: 0 0 100px; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; width: 100px; max-width: none; height: 44px; padding: 0 4px; border: 1px solid #ffffffe0; border-radius: 24px; background: #ffffff5c; backdrop-filter: blur(12px); }
.app-shell .header-actions button, .app-shell.is-agent-conversation #resetButton { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; max-width: none; height: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #28225c; }
.app-shell .header-actions img { width: 25px; height: 25px; filter: none; }
.service-header button:hover { background: #ffffff66; }
.service-header button:active:not(:disabled) { background: #d6cff5; transform: scale(.96); }
.service-header button[aria-expanded=true] { background: #d6cff5; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #a38ae8; outline-offset: 3px; }
.app-shell .welcome-hero { position: relative; z-index: 1; min-height: 430px; height: calc(100dvh - 356px); margin: 100px -16px 0; overflow: visible; background: transparent; isolation: isolate; }
.welcome-hero::after { display: none; }
.app-shell .greeting-card { min-height: 430px; height: 100%; padding: 32px 24px 38px; border: 1px solid #ffffffd9; border-top-color: transparent; border-radius: 36px; background: linear-gradient(180deg,#f5f5ff2b,#f5f4ff66 48%,#f1efff38); box-shadow: 0 4px 30px #9a8bce05; }
.app-shell .greeting-card::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 37px; border: 1px solid #ffffffd9; border-bottom: 0; border-radius: 36px 36px 0 0; -webkit-mask-image: linear-gradient(to right, #000 calc(50% - 80px), transparent calc(50% - 80px), transparent calc(50% + 80px), #000 calc(50% + 80px)); mask-image: linear-gradient(to right, #000 calc(50% - 80px), transparent calc(50% - 80px), transparent calc(50% + 80px), #000 calc(50% + 80px)); pointer-events: none; }
.app-shell .greeting-card::after { content: ""; position: absolute; top: -1px; left: 50%; width: 160px; height: 18px; transform: translateX(-50%); background: url("../assets/greeting-avatar-bridge-v2.svg") center top / 160px 18px no-repeat; pointer-events: none; }
.greeting-topline { display: flex; align-items: center; height: 32px; margin: 0; }
.greeting-hi { font-family: "Welcome Script", "SignPainter-HouseScript", "SignPainter", "Brush Script MT", "Snell Roundhand", cursive; font-size: 40px; font-style: normal; font-weight: 600; color: #302879; line-height: 1; letter-spacing: 0; transform: rotate(-5deg); }
.date-badge { top: 24px; right: 24px; width: 32px; border-radius: 10px; }
.date-badge span { background: #7263e7; font-size: 9px; line-height: 16px; }
.date-badge b { display: block; font-size: 21px; line-height: 29px; font-weight: 700; }
.app-shell #welcomeHeading { margin: 0; color: #292574; font-size: 22px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.industry-info { margin: 12px 0 0; color: #393251; font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: 0; }
.industry-info span { display: block; }
.industry-example { display: block; margin-top: 3px; color: #7d728e; font-size: 11px; line-height: 1.4; }
.home-questions { margin-top: 12px; }
#quickQuestionList { display: grid; justify-items: start; gap: 9px; }
#quickQuestionList button { min-height: 44px; max-width: 100%; padding: 9px 20px; border: 1px solid #d8d3ef; border-radius: 13px; background: #ffffffed; color: #30294f; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; text-align: left; }
#quickQuestionList button:hover { background: #fff; border-color: #b4a7de; }
#quickQuestionList button:active { background: #e9e3fa; }
.app-shell .hero-stage { position: absolute; top: -106px; left: 0; width: 100%; height: 210px; z-index: 2; pointer-events: none; }
.app-shell .center-avatar { left: 50%; top: 0; width: 220px; height: 210px; margin-left: -110px; border-radius: 28px; pointer-events: auto; isolation: isolate; }
.center-avatar:active:not(:disabled) { background: transparent; transform: none; }
.person-carrier { position: absolute; left: 20px; top: -1px; width: 181px; height: 210px; transform-origin: 97.55px 43.125px; will-change: transform,clip-path; opacity: 0; z-index: 2; }
.pose-stack { position: absolute; inset: 0; mask-image: linear-gradient(#000 0 60%,#000d 68%,transparent 88%); -webkit-mask-image: linear-gradient(#000 0 60%,#000d 68%,transparent 88%); }
.pose-stack img { position: absolute; inset: 0; display: block; width: 181px; height: 210px; object-fit: contain; pointer-events: none; }
.hero-halo { z-index: 0; will-change: transform,opacity; }
.avatar-outline { position: absolute; left: 27px; top: 13px; width: 168px; height: 166px; opacity: 0; z-index: 1; }
.avatar-outline img { display: block; width: 168px; height: 166px; }
.app-shell .composer { padding: 0 16px max(20px,env(safe-area-inset-bottom)); background: transparent; }
.app-shell .composer-shell { padding: 0; border: 1px solid #fff; border-radius: 29px; background: #fffffff0; box-shadow: 0 4px 24px #66559206; }
.app-shell .composer-input-wrap { display: flex; align-items: center; gap: 0; min-height: 59px; padding: 7px 8px; border-radius: 29px; background: transparent; }
.app-shell .composer-icon { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; border-radius: 12px; }
.app-shell .composer-icon img { width: 25px; height: 25px; }
.app-shell #messageInput { flex: 1; min-width: 0; min-height: 44px; height: 44px; max-height: 118px; margin: 0; padding: 9px 0; font-size: 16px; line-height: 25px; background: transparent; }
#messageInput::placeholder { color: #a8a0c1; }
.app-shell .has-draft .composer-input-wrap { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px 60px; padding: 11px 12px 9px; }
.app-shell .has-draft #messageInput { grid-column: 1 / -1; grid-row: 1; width: 100%; padding: 7px; font-size: 17px; line-height: 26px; }
.has-draft #imageUploadButton { grid-column: 3; grid-row: 2; }
.has-draft #fileUploadButton { grid-column: 4; grid-row: 2; }
.has-draft #voiceButton, .has-draft #keyboardButton { grid-column: 1; grid-row: 2; }
.app-shell .composer-input-wrap #sendButton { align-self: end; justify-self: end; grid-column: 5; grid-row: 2; flex: none; width: 60px; min-width: 60px; height: 44px; min-height: 44px; max-height: 44px; margin: 4px 0 0; padding: 8px; border-radius: 15px; font-size: 15px; line-height: 1.4; }
.app-shell .composer-shell.attachments-open { border-color: #dcd5ed; border-radius: 28px; background: #fffffff5; overflow: hidden; }
.app-shell .attachment-menu, .app-shell .attachment-menu.is-image-only { position: static; inset: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: 100%; padding: 14px 16px 16px; border: 0; border-top: 1px solid #eee9f6; border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .attachment-menu.is-image-only { grid-template-columns: minmax(0,1fr); }
.app-shell .attachment-menu button { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 64px; padding: 14px 12px; border: 1px solid #e7e0f4; border-radius: 16px; background: #f7f4fd; color: #51436c; font-size: 15px; line-height: 1.5; }
.app-shell .attachment-menu img { width: 26px; height: 26px; margin: 0; }
#fileUploadButton[aria-expanded=true] { background: #ede7f9; }
#fileUploadButton img { transition: transform .16s ease; }
#fileUploadButton[aria-expanded=true] img { transform: rotate(45deg); }
.app-shell .faq-launch { height: auto; margin: 0 auto 14px; padding: 0; }
.app-shell .faq-launch button { min-height: 44px; gap: 8px; padding: 10px 17px; border: 1px solid #fff; border-radius: 28px; background: #ffffffa6; }
.app-shell .faq-launch strong { font-size: 14px; }
.app-shell .faq-launch .faq-launch-note { font-size: 13px; }
.app-shell .faq-launch svg { width: 20px; height: 20px; flex: none; }
.app-shell .composer-error, .app-shell #serviceAvailability, .app-shell.is-agent-conversation #serviceAvailability { position: static; inset: auto; width: auto; margin: 0 2px 12px; padding: 8px 12px; transform: none; border-radius: 14px; background: #ffffffe0; font-size: 13px; line-height: 1.6; text-align: left; }
.app-shell .composer-error:empty, .app-shell #serviceAvailability:empty { display: none; }
.app-shell .composer-status { margin:0 2px 12px; padding:8px 12px; border:1px solid #dedaf5; border-radius:14px; background:#f9f8ff; color:#5d5683; font-size:13px; line-height:1.6; text-align:left; }
.app-shell.is-conversation { padding-top: 0; padding-bottom: calc(var(--agent-composer-height,120px) + var(--keyboard-offset,0px)); }
.app-shell.is-conversation .welcome-hero { display: none; }
.app-shell.is-conversation .chat-panel { padding-top: 12px; overflow: hidden; }
.app-shell.is-conversation .chat-log { padding-bottom: 16px; }
@media (max-width:350px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .app-shell .brand-lockup { gap: 4px; }
  .app-shell .brand-lockup h1 { font-size: 16px; }
  .app-shell .header-actions { flex-basis: 96px; width: 96px; gap: 0; }
  .app-shell .welcome-hero { margin-left: -12px; margin-right: -12px; }
  .app-shell .greeting-card { padding-left: 20px; padding-right: 20px; }
  .app-shell #welcomeHeading { font-size: 22px; }
  .app-shell .composer { padding-left: 12px; padding-right: 12px; }
  .app-shell .faq-launch button { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .app-shell .faq-launch .faq-launch-note { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) { .person-carrier,.hero-halo { will-change: auto; } #fileUploadButton img { transition: none; } }

.app-shell .composer-input-wrap #sendButton.is-result-query { width:72px; min-width:72px; }
.app-shell .has-draft .composer-input-wrap:has(#sendButton.is-result-query) { grid-template-columns:44px minmax(0,1fr) 44px 44px 72px; }
/* Override the retired two-row header used by consultation history V1. */
.app-shell.has-consultations .service-header { flex-wrap:nowrap; row-gap:0; }
.app-shell.has-consultations .brand-lockup { flex:1 1 0; gap:8px; }
.app-shell.has-consultations .brand-lockup h1 { min-width:0; white-space:normal; }
.app-shell.has-consultations .header-actions { margin-left:0; }
@media(max-width:350px) { .app-shell.has-consultations .brand-lockup { gap:4px; } }
/* Let the whole welcome page grow; the measured dock reserves space for every question. */
.app-shell:not(.is-conversation) { display:flex; flex-direction:column; height:auto; min-height:100dvh; padding-bottom:calc(var(--agent-composer-height,160px) + 12px + var(--keyboard-offset,0px)); }
.app-shell:not(.is-conversation) .service-header { flex-shrink:0; }
.app-shell:not(.is-conversation) .welcome-hero { display:flex; flex-direction:column; flex:1 0 auto; min-height:430px; height:auto; }
.app-shell:not(.is-conversation) .greeting-card { flex:1 0 auto; min-height:0; height:auto; overflow:visible; }
.app-shell:has(#attachmentMenu:not([hidden])) #serviceAvailability { visibility:visible; }
.app-shell.is-agent-conversation #resetButton img { width:25px; height:25px; }
/* Large text may wrap the FAQ caption without pushing the entrance off a narrow screen. */
.app-shell .faq-launch button { max-width:100%; flex-wrap:wrap; justify-content:center; }
.app-shell .faq-launch strong, .app-shell .faq-launch .faq-launch-note { white-space:normal; }
.app-shell .composer-input-wrap #sendButton { padding:4px; }
.app-shell .composer-input-wrap #sendButton.is-result-query { width:max(72px,calc(4em + 8px)); min-width:72px; }
.app-shell .has-draft .composer-input-wrap:has(#sendButton.is-result-query) { grid-template-columns:44px minmax(0,1fr) 44px 44px max-content; }
.app-shell .composer-input-wrap #sendButton.is-result-query { max-width:none; }
/* While writing text, keep the draft and send action together. */
.app-shell #messageInput:focus { outline:0; border:0; box-shadow:none; }
.app-shell .is-text-editing .composer-input-wrap { display:flex; align-items:flex-end; gap:8px; padding:7px 8px; }
.app-shell .is-text-editing #messageInput { flex:1 1 0; width:0; padding:7px; }
.app-shell .is-text-editing :is(#voiceButton,#keyboardButton,#imageUploadButton,#fileUploadButton) { display:none; }
.app-shell .is-text-editing .composer-input-wrap #sendButton { margin:0; }