/* Siraj: a quiet, editorial companion to the school website. */
.chat-launcher { position: fixed; inset-inline-start: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 45; display: inline-flex; align-items: center; gap: 12px; min-height: 54px; max-width: calc(100vw - 112px); padding: 8px 17px 8px 9px; border: 1px solid #ffffff26; border-radius: 16px; background: #263330; color: #fff; box-shadow: 0 8px 28px #17252126; font: 500 .95rem/1.4 var(--font-body); cursor: pointer; }
.chat-launcher[hidden] { display: none; }
.siraj-launch-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #ebc49c; }
.siraj-launch-mark svg { width: 30px; height: 30px; }
.chat-launch-dot { width: 5px; height: 5px; border-radius: 50%; background: #c9b193; }
.chat-open { overflow: hidden; }
.school-chat { --chat-ink: #263330; --chat-muted: #68706c; --chat-line: #e7e9e4; width: min(460px, calc(100vw - 48px)); max-width: none; height: min(720px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); padding: 0; margin: auto; margin-inline-start: 24px; margin-block-end: 24px; border: 1px solid #d9ded8; border-radius: 20px; background: #fcfcfa; color: var(--chat-ink); box-shadow: 0 28px 100px #17252140; overflow: hidden; font-family: var(--font-body); }
.school-chat::backdrop { background: #1725213d; backdrop-filter: blur(3px); }
.school-chat[open] { display: flex; flex-direction: column; }
.school-chat [hidden] { display: none !important; }
.school-chat button, .school-chat textarea, .school-chat input, .school-chat select { font-family: inherit; }
.school-chat :focus-visible { outline: 2px solid #8b5e3c; outline-offset: 3px; }
.chat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; padding: 20px 22px; border-block-end: 1px solid var(--chat-line); background: #fff; }
.chat-brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.siraj-mark { width: 44px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--chat-ink); color: #ebc49c; flex: none; }
.siraj-mark svg { width: 32px; height: 32px; }
.chat-brand h2 { margin: 0; color: var(--chat-ink); font: 600 1.4rem/1.25 var(--font-body); letter-spacing: -.03em; }
.chat-mode { margin: 5px 0 0; font-size: .72rem; line-height: 1.6; color: var(--chat-muted); }
.chat-header-actions { display: flex; align-items: center; gap: 2px; }
.chat-icon { flex: none; display: grid; place-items: center; width: 36px; height: 40px; padding: 8px; border: 0; background: transparent; border-radius: 8px; color: #67716a; cursor: pointer; }
.chat-icon svg { width: 18px; height: 18px; }
.chat-icon:hover { background: #f0f2ed; color: var(--chat-ink); }
.chat-body { min-height: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
[data-chat-view="chat"] { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 26px 20px; scrollbar-width: thin; scrollbar-color: #cbd1c8 transparent; }
.chat-welcome { padding-block-start: 10px; }
.chat-eyebrow { font: 500 .65rem/1.8 var(--font-body); letter-spacing: .14em; color: #8b6345; margin: 0 0 16px; }
.school-chat[lang="ar"] .chat-eyebrow { letter-spacing: 0; font-size: .8rem; }
.chat-welcome h3 { margin: 0; white-space: pre-line; font: 500 2rem/1.22 var(--font-body); letter-spacing: -.045em; color: var(--chat-ink); }
.school-chat[lang="ar"] .chat-welcome h3 { letter-spacing: -.025em; font-size: 2.05rem; line-height: 1.5; }
.chat-intro { color: var(--chat-muted); font-size: .9rem; line-height: 1.8; margin: 14px 0 24px; max-width: 33ch; }
.chat-suggestions { display: flex; flex-direction: column; border-block-start: 1px solid var(--chat-line); }
.chat-suggestions button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 52px; padding: 12px 0; border: 0; border-block-end: 1px solid var(--chat-line); border-radius: 0; background: transparent; color: var(--chat-ink); text-align: start; font: 500 .87rem/1.5 var(--font-body); cursor: pointer; }
.chat-suggestions button .icon { width: 17px; height: 17px; color: #8b6345; flex: none; }
.chat-suggestions button:hover { color: #8b5e3c; background: #f5f6f1; }
.chat-messages { display: flex; flex-direction: column; gap: 24px; outline-offset: 4px; }
.chat-message { font-size: .93rem; line-height: 1.85; overflow-wrap: anywhere; }
.chat-message p { margin: 0; white-space: pre-wrap; }
.chat-message--assistant { padding-inline-end: 8px; }
.chat-message--user { padding: 12px 16px; border-radius: 14px 14px 3px 14px; background: #eef0eb; margin-inline-start: 32px; }
.chat-speaker { display: block; color: #5e6b61; font: 600 .7rem/1.5 var(--font-body); margin-block-end: 7px; }
.chat-message--user .chat-speaker { display: none; }
.chat-message a { display: inline-flex; align-items: center; min-height: 32px; color: #805539; font-size: .75rem; margin-inline-end: 12px; margin-block-start: 8px; text-underline-offset: 4px; }
.chat-footer { padding: 8px 20px 12px; background: #fcfcfa; flex: none; border-block-start: 1px solid var(--chat-line); }
.chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 5px; }
.chat-school-name { font-size: .62rem; letter-spacing: .1em; color: #596350; }
.school-chat[lang="ar"] .chat-school-name { letter-spacing: 0; font-size: .66rem; }
.chat-office { position: relative; }
.chat-office summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 2px 8px; list-style: none; color: #4e5b51; font-size: .77rem; cursor: pointer; }
.chat-office summary::-webkit-details-marker { display: none; }
.chat-office summary > span:first-child { font-size: 1.2rem; font-weight: 300; }
.chat-actions { position: absolute; z-index: 2; inset-inline-start: 0; bottom: calc(100% + 5px); min-width: 200px; padding: 6px; border: 1px solid #dce1d7; border-radius: 12px; box-shadow: 0 6px 24px #2633301c; background: #fff; }
.chat-actions button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px; color: var(--chat-ink); background: #fff; text-align: start; font: 500 .85rem/1.5 var(--font-body); cursor: pointer; }
.chat-actions button:hover { background: #f0f2ed; }
.chat-composer { display: flex; gap: 8px; align-items: end; padding: 7px; border: 1px solid #bdc6b9; border-radius: 14px; background: #fff; box-shadow: 0 2px 5px #26333004; }
.chat-composer:focus-within { border-color: #687c65; box-shadow: 0 0 0 3px #687c6510; }
.chat-composer textarea { flex: 1; min-width: 0; resize: none; min-height: 42px; max-height: 110px; border: 0; border-radius: 6px; padding: 9px 7px; background: transparent; font: 400 16px/1.5 var(--font-body); color: var(--chat-ink); }
.chat-composer textarea::placeholder { color: #747b73; opacity: 1; font-size: .85rem; }
.chat-composer textarea:focus-visible { outline: none; }
.chat-send { display: grid; place-items: center; flex: none; width: 40px; height: 42px; border: 0; border-radius: 10px; background: var(--chat-ink); color: white; cursor: pointer; }
.chat-send svg { width: 21px; height: 21px; }
.chat-send.is-streaming svg { display: none; }
.chat-send.is-streaming::after { content: ""; width: 12px; height: 12px; border-radius: 2px; background: currentColor; }
.chat-streaming p:empty::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline: 3px 22px; border-radius: 50%; background: #82917e; box-shadow: 11px 0 #aab4a6, 22px 0 #d0d6cd; animation: siraj-thinking 1s ease-in-out infinite alternate; }
.chat-streaming p:not(:empty)::after { content: ""; display: inline-block; width: 5px; height: 14px; margin-inline-start: 4px; background: #82917e; vertical-align: middle; animation: siraj-thinking .7s ease-in-out infinite alternate; }
@keyframes siraj-thinking { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .chat-streaming p::before, .chat-streaming p::after { animation: none !important; } }
.school-chat button:disabled { opacity: .55; cursor: wait; }
.chat-status { margin: 4px 0; color: var(--chat-muted); font-size: .77rem; line-height: 1.6; max-height: 64px; overflow-y: auto; }
.chat-status:empty { display: none; }
.chat-privacy { position: relative; font-size: .7rem; color: var(--chat-muted); text-align: center; }
.chat-privacy summary { cursor: pointer; min-height: 32px; padding-block: 8px 2px; list-style: none; }
.chat-privacy summary::-webkit-details-marker { display: none; }
.chat-privacy[open] { text-align: start; }
.chat-privacy[open] summary { text-align: center; }
.chat-privacy p { margin: 0; padding: 8px 12px; line-height: 1.7; color: #48544a; background: #eef1ea; }
.chat-privacy[open] { max-height: 150px; overflow-y: auto; }
[data-chat-view="request"] { overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }
#chat-request-title { font: 600 1.5rem/1.6 var(--font-body); color: var(--chat-ink); margin-block: 8px; }
.chat-back { min-height: 44px; padding: 8px 0; border: 0; background: none; color: #805539; text-underline-offset: 4px; font: 500 .82rem/1.5 var(--font-body); cursor: pointer; }
.chat-back:hover { text-decoration: underline; }
.chat-help, .chat-visit-note { margin-block: 10px 16px; font-size: .8rem; line-height: 1.8; color: var(--chat-muted); }
.chat-visit-note { padding: 12px; border-inline-start: 2px solid #a18a6e; background: #f1f2eb; border-radius: 0 6px 6px 0; }
#chat-request-form label { display: block; font-size: .83rem; font-weight: 500; margin-block: 16px 7px; }
#chat-request-form input, #chat-request-form textarea, #chat-request-form select { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #bdc6b9; border-radius: 8px; background: white; color: var(--chat-ink); font: 400 16px/1.5 var(--font-body); }
#chat-request-form textarea { resize: vertical; }
.chat-form-error { color: #a1261b; font-size: .85rem; }
.school-chat [aria-invalid="true"] { border-color: #a1261b !important; }
.school-chat .btn { white-space: normal; text-align: center; border-radius: 10px; font-size: .9rem; }
.school-chat .btn--primary { background: var(--chat-ink); border-color: var(--chat-ink); color: #fff; }
.chat-draft { font: 400 .88rem/1.8 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: #f1f3ed; border: 1px solid var(--chat-line); border-radius: 10px; }
.school-chat .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 479px) { .school-chat { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; } .chat-header { padding: max(16px, env(safe-area-inset-top)) 20px 16px; } .chat-scroll { padding: 24px; } .chat-welcome { padding-block-start: 16px; } .chat-footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); } .chat-launcher { font-size: .88rem; padding-inline: 10px 15px; } }
@media (max-width: 359px) { .chat-header { padding-inline: 14px; } .chat-brand { gap: 8px; } .chat-mode { font-size: .65rem; } .chat-icon { width: 32px; } .siraj-mark { width: 36px; height: 42px; } .chat-scroll { padding: 18px; } .chat-welcome { padding-block-start: 0; } .chat-welcome h3 { font-size: 1.7rem; } .school-chat[lang="ar"] .chat-welcome h3 { font-size: 1.75rem; } .chat-footer { padding-inline: 14px; } }
@media (max-height: 620px) { .chat-header { padding-block: 10px; } .chat-welcome { padding-block-start: 0; } .chat-eyebrow { margin-block-end: 8px; } .chat-scroll { padding-block: 18px; } .chat-intro { margin-block: 10px 14px; } .chat-suggestions button { min-height: 44px; } }
@media (max-height: 440px) { .school-chat { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); margin-block: 8px; } .chat-header { padding-block: 6px; } .chat-brand h2 { font-size: 1.1rem; } .siraj-mark { width: 34px; height: 36px; } .chat-mode { margin-block-start: 0; } .chat-footer { padding-block: 2px; } .chat-privacy summary { min-height: 26px; padding-block: 4px; } }
@media print { .chat-launcher, .school-chat { display: none !important; } }