:root { color: #09297d; background: #edf5ff; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-weight: 400; }
* { box-sizing: border-box; } body { min-height: 100vh; margin: 0; background: linear-gradient(135deg, #d9efff, #f7fbff 45%, #e6f5ff); } button, textarea { font: inherit; }
.chat-app { width: min(100%, 1080px); min-height: 100vh; margin: auto; background: rgba(255,255,255,.96); box-shadow: 0 10px 38px rgba(19,83,149,.11); overflow: hidden; }.hero { height: clamp(185px, 27vw, 300px); background: #e9f5ff; overflow: hidden; }.hero img { display: block; width: 100%; height: 100%; object-fit: cover; }.chat-content { padding: clamp(18px,2.4vw,28px) clamp(18px,2.5vw,28px) 20px; }
.messages { display: grid; gap: 14px; }.message { color: #09197b; }.welcome-message { display: flex; align-items: center; gap: clamp(13px,2vw,20px); max-width: 900px; margin-inline: auto; padding: 13px 18px 13px 0; border-radius: 18px; background: linear-gradient(110deg,#fff,#edf7ff); box-shadow: 0 8px 20px rgba(34,88,155,.07); }.mascot { flex: 0 0 auto; width: clamp(70px,8vw,100px); height: clamp(70px,8vw,100px); margin-left: 10px; object-fit: cover; border-radius: 50%; border: 5px solid #eef7ff; box-shadow: 0 5px 16px rgba(31,91,181,.12); }.message-copy h1 { margin: 0 0 6px; font-size: clamp(1.2rem,1.8vw,1.65rem); font-weight: 650; letter-spacing: -.035em; }.message-copy p { margin: 3px 0; color: #152b7a; font-size: clamp(.92rem,1.35vw,1.08rem); line-height: 1.42; font-weight: 400; }
.suggestions { margin-top: clamp(20px,2.4vw,26px); }.suggestions h2 { margin: 0 0 13px; color: #071b98; font-size: clamp(1.12rem,1.75vw,1.45rem); font-weight: 650; letter-spacing: -.03em; }.suggestions h2 span { color: #1464f4; font-size: 1.28em; }.suggestion-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.suggestion-card { --card-bg:#eef7ff; --accent:#0567df; display: grid; grid-template-columns: 68px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 110px; padding: 11px; text-align: left; color: #0a1d9a; background: linear-gradient(135deg,#fff,var(--card-bg)); border: 1px solid color-mix(in srgb,var(--accent) 14%,white); border-radius: 13px; cursor: pointer; box-shadow: 0 5px 13px rgba(26,78,156,.04); transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.suggestion-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 42%,white); box-shadow: 0 11px 20px rgba(20,69,142,.1); }.suggestion-card:focus-visible { outline: 4px solid #9ed1ff; outline-offset: 3px; }.suggestion-card img { width: 66px; height: 66px; object-fit: contain; }.suggestion-card span { display: grid; gap: 4px; }.suggestion-card strong { font-size: .98rem; font-weight: 600; letter-spacing: -.025em; }.suggestion-card small { color: #4160a4; font-size: .8rem; line-height: 1.3; font-weight: 400; }.suggestion-card b { color: var(--accent); font-size: 2rem; font-weight: 300; line-height: 1; }.green { --card-bg:#edfcf7; --accent:#07976d; }.orange { --card-bg:#fff8ee; --accent:#ff7a12; }.violet { --card-bg:#f4f1ff; --accent:#6743c9; }.rose { --card-bg:#fff2f5; --accent:#d4345a; }
.quick-tip { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 13px 17px; border-radius: 14px; background: linear-gradient(105deg,#eff8ff,#f8fcff); color: #3955a4; }.quick-tip > img { width: 42px; height: 42px; object-fit: contain; }.quick-tip p { margin: 0; font-size: clamp(.84rem,1.15vw,.96rem); line-height: 1.4; font-weight: 400; }.quick-tip strong { color: #07229d; font-size: 1.1em; font-weight: 600; }
.chat-form { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: stretch; margin: 0 clamp(18px,2.5vw,28px); padding: 0 14px; border: 2px solid #b9cdea; border-radius: 15px; transition: box-shadow .2s,border-color .2s; }.chat-form:focus-within { border-color: #2d76e9; box-shadow: 0 0 0 4px #dceeff; }.chat-form textarea { min-width: 0; height: 65px; resize: none; overflow-y: auto; padding: 12px 9px 8px 0; color: #102673; line-height: 1.4; background: transparent; border: 0; outline: 0; }.chat-form textarea::placeholder { color: #7890bd; opacity: 1; }.attachment-input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }.attachment-button { align-self:center; display:grid; width:40px; height:40px; place-items:center; border-radius:10px; cursor:pointer; transition:background .2s; }.attachment-button img { width:28px; height:28px; object-fit:contain; }.attachment-button:hover { background:#e9f3ff; }.attachment-button:focus-within { outline:3px solid #9ed1ff; }.chat-form button { min-width:132px; margin:6px; padding:0 20px; color:white; background:linear-gradient(135deg,#1869ef,#0758d9); border:0; border-radius:11px; box-shadow:0 6px 14px rgba(7,88,217,.2); cursor:pointer; font-size:1.05rem; font-weight:650; }.chat-form button img { width:27px; height:27px; margin-right:8px; object-fit:contain; vertical-align:middle; filter:brightness(0) invert(1); opacity:1; }.chat-form button:disabled { opacity:.6; cursor:wait; }.status { display:flex; align-items:center; gap:6px; min-height:1.25rem; margin:5px clamp(18px,2.5vw,28px) 14px; color:#6079a8; font-size:.84rem; }.status img { width:18px; height:18px; object-fit:contain; }.status:has(#status-text:empty) { visibility:hidden; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.messages .user,.messages .assistant:not(.welcome-message) { max-width:min(85%,720px); padding:13px 16px; border-radius:16px; line-height:1.5; white-space:pre-wrap; overflow-wrap:break-word; }.messages .user { justify-self:end; color:#fff; background:#1464e9; }.messages .assistant:not(.welcome-message) { background:#f0f6fc; color:#172b70; }.messages .message p { margin:0; }
@media (max-width:820px) { .suggestion-grid { grid-template-columns:repeat(2,1fr); }.suggestion-card { grid-template-columns:70px minmax(0,1fr) auto; min-height:115px; }.suggestion-card img { width:68px; height:68px; } } @media (max-width:560px) { .hero { height:132px; }.hero img { object-position:center; }.chat-content { padding-inline:15px; }.welcome-message { align-items:flex-start; padding:14px; gap:11px; border-radius:16px; }.mascot { width:61px; height:61px; border-width:3px; margin:0; }.message-copy h1 { font-size:1.22rem; }.message-copy p { font-size:.92rem; }.suggestion-grid { grid-template-columns:1fr; gap:10px; }.suggestion-card { grid-template-columns:62px minmax(0,1fr) auto; min-height:92px; padding:10px; border-radius:13px; }.suggestion-card img { width:59px; height:59px; }.suggestion-card strong { font-size:1rem; }.suggestion-card small { font-size:.79rem; }.suggestion-card b { font-size:2rem; }.quick-tip { margin-top:18px; padding:13px; gap:9px; }.quick-tip > span { font-size:1.45rem; }.quick-tip p { font-size:.83rem; }.chat-form { grid-template-columns:auto minmax(0,1fr); margin-inline:15px; padding-left:10px; }.chat-form textarea { height:62px; font-size:.9rem; }.attachment-button { width:36px; height:36px; font-size:1.35rem; }.chat-form button { grid-column:1 / -1; min-height:48px; margin:0 3px 3px; }.status { margin-inline:15px; } } @media (prefers-reduced-motion:reduce) { .suggestion-card { transition:none; } }