/* Scoped to the homepage assistant and its installation dialog. */
:is(#assistant, #install-dialog) {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #7c3aed;
  --soft: #f5f3ff;
  color: var(--ink);
  color-scheme: light;
}
:is(#assistant, #install-dialog) [hidden] { display: none !important; }
:is(#assistant, #install-dialog) button { cursor: pointer; }
:is(#assistant, #install-dialog) button:disabled { cursor: default; opacity: .45; }
:is(#assistant, #install-dialog) :is(button, a, select):focus-visible,
#assistant .messages:focus-visible, .assistant-hero-cta:focus-visible, .assistant-hero-app:focus-visible {
  outline: 3px solid #a78bfa; outline-offset: 4px;
}
.assistant-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.assistant-hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 15px 21px; border-radius: 12px; background: #0f172a; color: white;
  font-size: 14px; font-weight: 650; line-height: 1.5; text-decoration: none;
  box-shadow: 0 5px 14px #0f172a12; transition: background .15s, transform .15s;
}
.assistant-hero-cta:hover { background: #334155; transform: translateY(-1px); }
.assistant-hero-cta span { font-size: 20px; line-height: 1; }
.assistant-hero-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 20px; border: 1px solid #cbd5e1; border-radius: 12px;
  background: #fff; color: #0f172a; font-size: 14px; font-weight: 650;
  line-height: 1.5; text-decoration: none; transition: background .15s, border-color .15s, transform .15s;
}
.assistant-hero-app:hover { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); }
.assistant-hero-app span { font-size: 20px; line-height: 1; }
#assistant { padding: 64px 0 72px; border-top: 1px solid #e9e6f3; background: linear-gradient(150deg, #faf9ff, #f8fafc 65%); scroll-margin-top: 16px; outline: none; }
#assistant .assistant-container { max-width: 1184px; margin: 0 auto; padding: 0 32px; }
#assistant .assistant-intro { text-align: center; margin-bottom: 30px; }
#assistant .assistant-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; letter-spacing: .12em; color: var(--accent); margin: 0 0 14px; }
#assistant .assistant-eyebrow span { font-size: 17px; }
#assistant-title { font-size: clamp(29px, 3vw, 38px); font-weight: 750; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 12px; outline: none; }
#assistant-title span { color: #6d28d9; }
#assistant .assistant-intro > p:not(.assistant-eyebrow) { color: #526176; font-size: 15px; line-height: 1.7; margin: 0; }
#assistant .free-label { display: inline-block; color: #6d28d9; background: #ede9fe; border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 650; margin-top: 14px; }
#assistant .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
#assistant .chat-card { min-width: 0; overflow: hidden; border: 1px solid #e0ddeb; border-radius: 24px; background: white; box-shadow: 0 16px 48px #35235a0c, 0 2px 8px #35235a04; }
#assistant .chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #eae7f0; }
#assistant .chat-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
#assistant .chat-brand { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; overflow: hidden; background: white; border: 1px solid #e8e1f9; border-radius: 15px; }
#assistant .chat-brand img, #assistant .avatar img { object-fit: contain; transform: scale(2.5); }
#assistant .chat-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#assistant .chat-toolbar strong { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
#assistant .ai-label { padding: 3px 7px; border-radius: 5px; background: #f1edf9; color: #6d28d9; font-size: 9px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
#assistant .chat-subtitle { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--muted); }
#assistant .quota { display: block; margin-top: 5px; font-size: 10px; line-height: 1.5; color: var(--muted); }
#assistant .text-button { flex-shrink: 0; border: 1px solid #e8e1f4; border-radius: 10px; background: #faf8ff; padding: 8px 11px; text-align: center; color: #6d28d9; font-size: 11px; font-weight: 600; }
#assistant .text-button:not(:disabled):not([aria-disabled=true]):hover { background: #ede9fe; border-color: #c4b5fd; }
#assistant .new-chat-icon { font-size: 17px; vertical-align: -1px; }
#new-chat { display: grid; }
#new-chat > span { grid-area: 1 / 1; align-self: center; }
#new-chat .new-chat-exhausted { visibility: hidden; }
#assistant #new-chat[aria-disabled=true] { opacity: .55; cursor: default; }
#new-chat[data-quota-exhausted=true]:is(:hover, :focus-visible) .new-chat-default { visibility: hidden; }
#new-chat[data-quota-exhausted=true]:is(:hover, :focus-visible) .new-chat-exhausted { visibility: visible; }
@media (hover: none) {
  #new-chat[data-quota-exhausted=true] .new-chat-default { visibility: hidden; }
  #new-chat[data-quota-exhausted=true] .new-chat-exhausted { visibility: visible; }
}
#assistant .chat-thread { background: #f6f5fa; }
#assistant .conversation-date { display: flex; justify-content: center; padding: 20px 16px 0; }
#assistant .conversation-date span { padding: 4px 11px; border-radius: 20px; background: #eeecf4; color: #777086; font-size: 10px; line-height: 1.5; }
#assistant .messages { padding: 22px 24px 0; max-height: 440px; min-height: 188px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#assistant .message { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 20px; animation: assistant-message-in .18s ease-out; }
#assistant .avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; background: white; border: 1px solid #e5e1ed; border-radius: 12px; }
#assistant .bubble { max-width: calc(100% - 50px); padding: 16px 19px; border-radius: 18px 18px 18px 5px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; background: white; border: 1px solid #e9e5f0; box-shadow: 0 2px 3px #35235a03; }
#assistant .bubble p { margin: 7px 0 0; white-space: pre-wrap; }
#assistant .bubble .welcome-greeting { font-size: 16px; font-weight: 650; letter-spacing: -.015em; margin-top: 8px; }
#assistant .speaker { color: #77658e; font-size: 10px; letter-spacing: .025em; font-weight: 650; }
#assistant .user-message { justify-content: flex-end; }
#assistant .user-message .bubble { max-width: 82%; background: #7c3aed; border-color: transparent; color: white; border-radius: 18px 18px 5px 18px; box-shadow: 0 3px 8px #7c3aed14; }
#assistant .user-message .speaker { color: white; opacity: .9; }
#assistant .examples { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 24px 24px 68px; }
#assistant .examples-label { flex-basis: 100%; margin: 0 0 2px; font-size: 10px; color: #777086; text-align: right; }
#assistant .examples button { display: inline-flex; align-items: center; max-width: 100%; padding: 10px 14px; border: 1px solid #cfc2e7; border-radius: 16px 16px 5px 16px; background: #faf8ff; color: #64468c; font-size: 12px; line-height: 1.5; text-align: left; transition: background .15s, border-color .15s; }
#assistant .examples button:hover { background: #ede9fe; border-color: #a78bfa; }
#assistant .composer { padding: 18px 24px; border-top: 1px solid #eae7f0; }
#assistant .composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 11px; }
#assistant .composer-meta label { font-weight: 650; }
#assistant .composer-meta label span { font-weight: 400; color: var(--muted); }
#assistant select { max-width: 54%; min-height: 36px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; color: var(--ink); font-size: 12px; }
#assistant .input-wrap { border: 1px solid #dad5e5; border-radius: 16px; background: #fff; transition: border-color .15s; box-shadow: 0 3px 10px #35235a04; }
#assistant .input-wrap:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 3px #8b5cf614; }
#assistant textarea { display: block; width: 100%; min-height: 64px; max-height: 180px; padding: 14px 16px 0; border: 0; border-radius: 16px; resize: vertical; background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5; }
#assistant textarea:focus { outline: none; }
#assistant textarea::placeholder { color: #7c8796; }
#assistant .input-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px 16px; }
#assistant .input-hints { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 10px; }
#assistant .enter-hint { color: #7b8190; }
#assistant .primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 18px; border: 0; border-radius: 11px; background: var(--accent); color: white; font-size: 12px; font-weight: 650; }
#assistant .primary-button:not(:disabled):hover { background: #6d28d9; }
#assistant .primary-button > span { font-size: 19px; line-height: 1; }
#assistant .chat-status { min-height: 18px; margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
#assistant .privacy-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
#assistant .privacy-note a { text-decoration: underline; text-underline-offset: 2px; }
#assistant .error { padding: 12px; border: 1px solid #f4d5c5; border-radius: 8px; margin: 10px 0; color: #904221; background: #fff4ef; font-size: 12px; line-height: 1.6; }
#assistant .composer[aria-busy=true] .chat-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; animation: assistant-pulse 1.2s ease-in-out infinite; }
#assistant .app-card { padding: 26px 23px; border-radius: 20px; background: #0f172a; color: white; }
#assistant .app-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
#assistant .app-icon { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border: 1px solid #475569; border-radius: 12px; font-size: 24px; }
:is(#assistant, #install-dialog) .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; margin: 0 0 12px; }
#assistant .app-card .eyebrow { color: #c4b5fd; margin: 0; }
#assistant .app-card h3 { font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 16px; }
#assistant .app-card > p:not(.eyebrow) { font-size: 13px; color: #cbd5e1; line-height: 1.7; }
#assistant .app-card ul { list-style: none; padding: 4px 0; margin: 16px 0 22px; counter-reset: assistant-steps; }
#assistant .app-card li { counter-increment: assistant-steps; display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 12px; }
#assistant .app-card li::before { content: counter(assistant-steps); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #475569; border-radius: 50%; color: #c4b5fd; font-size: 10px; }
#assistant .light-button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 13px 15px; border: 0; border-radius: 9px; background: white; color: var(--ink); font-size: 12px; font-weight: 700; }
#assistant .light-button:hover { background: #ede9fe; }
#assistant .app-card > p.app-cost { font-size: 10px; line-height: 1.6; color: #aebcd0; margin-top: 14px; }
#assistant .legal-note { margin: 16px 8px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
#assistant .case-suggestion { padding: 15px; border: 1px solid #ddd6fe; border-radius: 11px; margin-top: 16px; background: var(--soft); }
#assistant .case-suggestion h3 { margin: 0 0 5px; font-size: 14px; font-weight: 700; }
#assistant .case-suggestion p { margin: 0 0 12px; font-size: 12px; }
#assistant .case-suggestion button { padding: 10px 13px; border: 0; border-radius: 8px; background: var(--accent); color: white; font-size: 12px; font-weight: 650; }
#assistant .case-suggestion button:hover { background: #6d28d9; }
#assistant .case-suggestion small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
#install-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 25px 90px #0003; }
#install-dialog::backdrop { background: #0f172a99; backdrop-filter: blur(3px); }
#install-dialog .eyebrow { color: var(--accent); margin-right: 22px; }
#install-dialog h2 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 10px; }
#install-dialog .close-dialog { position: absolute; right: 12px; top: 8px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); font-size: 28px; }
#install-dialog .dialog-intro { font-size: 14px; line-height: 1.6; color: var(--muted); }
#install-dialog .store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
#install-dialog .store-option { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; text-decoration: none; }
#install-dialog .store-option:hover { background: var(--soft); border-color: #a78bfa; }
#install-dialog .qr-code { width: 148px; height: 148px; object-fit: contain; }
#install-dialog .store-option strong { font-size: 15px; }
#install-dialog .store-option > span { font-size: 11px; line-height: 1.5; color: var(--muted); }
#install-dialog :is(.qr-hint, .dialog-note) { font-size: 11px; line-height: 1.6; color: var(--muted); }
#install-dialog .qr-hint { text-align: center; margin: 15px 0; }
#install-dialog .dialog-note { padding-top: 15px; border-top: 1px solid var(--line); margin: 16px 0 0; }
@keyframes assistant-pulse { 50% { opacity: .3; } }
@keyframes assistant-message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
#assistant .loading-message .bubble { display: flex; align-items: center; gap: 12px; background: #f5f3ff; color: #6d28d9; border: 1px solid #ede9fe; min-height: 58px; }
#assistant .chat-spinner { display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; border: 3px solid #ddd6fe; border-top-color: #8b5cf6; border-radius: 50%; animation: assistant-spin .8s linear infinite; }
@keyframes assistant-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth { scroll-behavior: auto; }
  .assistant-hero-cta, .assistant-hero-app { transition: none; }
  #assistant .composer[aria-busy=true] .chat-status::before { animation: none; }
  #assistant .chat-spinner { animation: none; }
  #assistant .message { animation: none; }
  #assistant .examples button { transition: none; }
}
@media (max-width: 900px) {
  #assistant .workspace { grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; }
  #assistant .app-card { padding: 24px 20px; }
  #assistant .chat-toolbar { flex-wrap: wrap; gap: 12px; }
  #assistant .text-button { margin-left: auto; }
}
@media (max-width: 700px) {
  #assistant { padding: 40px 0 42px; scroll-margin-top: 0; }
  #assistant .assistant-container { padding: 0 16px; }
  #assistant .assistant-intro { margin-bottom: 24px; padding: 0 4px; }
  #assistant-title { max-width: 360px; font-size: 30px; margin-left: auto; margin-right: auto; }
  #assistant .assistant-intro > p:not(.assistant-eyebrow) { font-size: 14px; }
  #assistant .workspace { grid-template-columns: minmax(0, 1fr); }
  #assistant .chat-card { border-radius: 20px; }
  #assistant .chat-toolbar { flex-wrap: nowrap; align-items: center; padding: 16px 14px; gap: 8px; }
  #assistant .chat-identity { gap: 8px; }
  #assistant .chat-brand { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; }
  #assistant .chat-brand img { width: 25px; height: 25px; }
  #assistant .chat-name { gap: 5px; }
  #assistant .chat-toolbar strong { font-size: 15px; }
  #assistant .ai-label { font-size: 8px; padding: 3px 5px; }
  #assistant .chat-subtitle { font-size: 10px; }
  #assistant .text-button { max-width: 95px; padding: 7px 8px; font-size: 10px; line-height: 1.5; }
  #assistant .messages { padding: 18px 14px 0; max-height: 45dvh; min-height: 180px; }
  #assistant .conversation-date { padding-top: 16px; }
  #assistant .avatar { width: 28px; height: 28px; flex-basis: 28px; border-radius: 10px; }
  #assistant .avatar img { width: 20px; height: 20px; }
  #assistant .message { gap: 7px; margin-bottom: 16px; }
  #assistant .bubble { max-width: calc(100% - 35px); padding: 13px 15px; font-size: 13px; }
  #assistant .bubble .welcome-greeting { font-size: 15px; }
  #assistant .examples { padding: 0 14px 20px 49px; gap: 7px; }
  #assistant .examples button { padding: 9px 12px; font-size: 11px; }
  #assistant .composer { padding: 15px 14px; }
  #assistant .composer-meta { font-size: 10px; gap: 8px; }
  #assistant select { font-size: 16px; width: 54%; }
  #assistant .enter-hint { display: none; }
  #assistant .app-card { padding: 24px; }
  #assistant .app-card-header { margin-bottom: 12px; }
  #assistant .app-card h3 { font-size: 24px; }
  #assistant .app-card h3 br { display: none; }
  #assistant .app-card :is(.app-icon, ul) { display: none; }
  #assistant .light-button { margin-top: 18px; }
  #assistant .legal-note { font-size: 10px; }
  #install-dialog { padding: 30px 21px 24px; }
  #install-dialog h2 { font-size: 25px; }
  #install-dialog :is(.qr-code, .qr-hint) { display: none; }
  #install-dialog .store-grid { gap: 10px; }
  #install-dialog .store-option { padding: 22px 12px; }
}