/* The chat inside the widget's frame on a school's own site (app.js adds .widget-embed
   for ?embed=1). Light, high contrast and large: many readers are older. The school's
   colors still come from /school.css. */
.widget-embed {
    color-scheme: light;
    --bg-page: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border-color: #8a94a3;
    --text-primary: #111827;
    --text-secondary: #374151;
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 70%, black);
    --brand-accent: color-mix(in srgb, var(--brand-primary) 70%, black);
    /* The pale highlight is for dark backgrounds; on white it fades "Compass" out. */
    --brand-accent-bright: var(--brand-accent);
}
.widget-embed body { background: #ffffff; color: #111827; }
.widget-embed .sidebar, .widget-embed .sidebar-float-toggle, .widget-embed .sidebar-resize-handle,
.widget-embed .sidebar-overlay, .widget-embed .skip-link, .widget-embed .main-header { display: none !important; }
.widget-embed .main-content { margin-left: 0; width: 100%; background: #ffffff; }
.widget-embed .main-content::after { display: none; }

/* Empty chat: a plain sentence instead of the big logo (the frame's header has the name). */
.widget-embed .chat-scroll-area:not(.chat-active) { overflow: hidden; }
.widget-embed .center-hub { top: 38%; bottom: auto !important; transform: translate(-50%, -50%); width: 100%; padding: 0 24px; }
.widget-embed .brand-logo-container { display: none; }
.widget-embed .center-hub::after {
    content: "Hi! Type your question about the school in the box below.";
    display: block; text-align: center; color: #1f2937; font-size: 18px; line-height: 1.5; font-weight: 500;
}

/* Use the frame's full width: thin side margins, no avatars (the sender name already
   says who is talking), and wider question bubbles. */
.widget-embed .chat-scroll-area { padding: 0 14px; }
/* Scrolling the chat to its end must not scroll the school's page behind the frame. */
.widget-embed, .widget-embed body, .widget-embed .chat-scroll-area { overscroll-behavior: contain; }
.widget-embed .chat-messages-container { max-width: none; padding: 12px 0 150px; }
.widget-embed .message-avatar { display: none; }
.widget-embed .msg-ai .message-sender { padding-left: 0; }   /* the phone layout's avatar gap */
.widget-embed .chat-message.msg-ai .message-body { flex: 1; min-width: 0; }
.widget-embed .chat-message.msg-user .message-body { max-width: 88%; }
.widget-embed .message-text { font-size: 17px; line-height: 1.6; color: #111827; }
.widget-embed .message-text h1 { font-size: 21px; }
.widget-embed .message-text h2 { font-size: 19px; }
.widget-embed .message-text h3, .widget-embed .message-text h4 { font-size: 18px; }
.widget-embed .message-text a { color: color-mix(in srgb, var(--brand-primary) 70%, black); text-decoration: underline; text-underline-offset: 3px; }
.widget-embed .chat-message.msg-user .message-body { background-color: #e5eaf0; color: #111827; }

/* The message box: pinned to the bottom, big text, a big send button. */
.widget-embed .main-content .chat-input-wrapper {
    position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important;
    transform: none !important; width: 100% !important; padding: 10px 14px 8px !important;
    background: #ffffff; border-top: 1px solid #d1d5db; transition: none;
}
.widget-embed .main-content .chat-input-wrapper { padding-top: 3px !important; }
.widget-embed .embed-credit {
    display: block; margin: 0 6px 3px; text-align: right;
    font-size: 10px; line-height: 12px; font-weight: 500; color: #4b5563; text-decoration: none;
}
.widget-embed .embed-credit:hover, .widget-embed .embed-credit:focus-visible { color: #111827; text-decoration: underline; }
.widget-embed .chat-input-container {
    display: flex; flex-direction: row; align-items: flex-end; gap: 8px;
    padding: 4px 4px 4px 12px; border: 2px solid #8a94a3; border-radius: 16px; background: #ffffff; box-shadow: none;
}
.widget-embed .chat-input-container:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent); }
/* One line is exactly as tall as the send button (24 + 2 × 7 = 38 px), so the text sits
   in the middle of the box; longer questions grow upward with the button at the bottom. */
.widget-embed .chat-textarea { height: auto; min-height: 38px; max-height: 120px; padding: 7px 0; line-height: 24px; font-size: 17px; color: #111827; }
.widget-embed .chat-textarea::placeholder { color: #4b5563; }
.widget-embed .chat-input-toolbar { padding: 0; }
.widget-embed .send-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-primary); color: #ffffff; }
.widget-embed .send-btn svg { width: 20px; height: 20px; }
.widget-embed .send-btn:disabled { background: #d1d5db; color: #4b5563; opacity: 1; }
.widget-embed .ai-disclaimer { font-size: 10px; color: #374151; opacity: 1; margin-top: 6px; }
.widget-embed .ai-disclaimer a { color: color-mix(in srgb, var(--brand-primary) 70%, black); text-decoration: underline; }
.widget-embed .pulled-info-toggle, .widget-embed .pulled-chunk-toggle { font-size: 14px; color: #374151; }