:root{font-family:Arial,"Traditional Arabic",Tahoma,sans-serif;color:#172b31;background:#d9dbd5;font-synthesis:none;--green:#075e54;--muted:#596970;--line:#e9edef}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;padding:28px 16px;background:linear-gradient(#008069 0 155px,#d9dbd5 155px);min-height:100vh}button,audio,input{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}.app{max-width:800px;margin:auto;box-shadow:0 12px 48px #173a392a;border-radius:8px;overflow:hidden}.conversation{height:calc(100dvh - 56px);min-height:480px;display:flex;flex-direction:column;background:#efeae2}.chat-header{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:13px 22px;background:#075e54;color:white;box-shadow:0 1px 3px #0002;z-index:1}.avatar{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:white;display:flex;align-items:center;overflow:hidden;border:2px solid #ffffffa0}.avatar img{display:block;width:100%;height:auto}h1{font-size:21px;line-height:1.5;margin:0}.chat-header span{font-size:14px;color:#dfefeb}.chat-content{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bdc9c2 transparent;padding:23px 32px 28px;background-image:radial-gradient(#798b7d16 .8px,transparent .8px);background-size:14px 14px}.date-label{width:fit-content;margin:0 auto 23px;padding:7px 13px;background:#fffdf8e8;color:#54646b;border-radius:7px;box-shadow:0 1px 2px #0001;font-size:13px}.bubble{position:relative;width:fit-content;min-width:0;max-width:88%;margin:0 0 13px auto;background:#fff;border-radius:9px 9px 0 9px;padding:17px 19px;box-shadow:0 1px 1px #0b141a25}.bubble::before{content:'';position:absolute;right:-7px;bottom:0;border-bottom:10px solid white;border-right:8px solid transparent}.welcome{width:430px;max-width:92%;padding-bottom:0}.welcome-label{display:block;color:#008069;font-size:14px;font-weight:600;margin-bottom:7px}h2{font-size:22px;line-height:1.6;margin:0 0 7px}h3{font-size:18px;line-height:1.7;margin:0 0 10px}p{font-size:17px;line-height:1.9;margin:0 0 12px}.bubble p:last-child{margin-bottom:0}.degree-picker{display:flex;flex-direction:column;margin:17px -19px 0}.degree-picker button{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:57px;padding:13px 19px;border:0;border-top:1px solid #e9edef;background:transparent;color:#007b68;text-align:right}.degree-picker button:last-child{border-radius:0 0 0 9px}.degree-picker strong{font-size:17px;font-weight:600}.degree-hint{font-size:14px;color:#65757b}.degree-picker button:hover{background:#f0faf4}.degree-picker button[aria-pressed=true]{background:#d9fdd3;color:#075e54}.degree-picker button[aria-pressed=true] .degree-hint{color:#375f49}.student-message{position:relative;width:fit-content;max-width:85%;margin:23px auto 22px 0;padding:12px 18px;background:#d9fdd3;border-radius:9px 9px 9px 0;box-shadow:0 1px 1px #0b141a25;font-size:17px;line-height:1.8}.student-message::after{content:'';position:absolute;left:-7px;bottom:0;border-bottom:10px solid #d9fdd3;border-left:8px solid transparent}.audio-card{width:430px}.audio-card h2{font-size:18px;color:#087f69}.audio-label{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:12px}audio{width:100%;display:block;height:48px;direction:ltr}.voice-player{display:flex;align-items:center;gap:13px;direction:ltr;padding:8px 0 3px}.voice-toggle{flex:0 0 42px;height:42px;border:0;background:transparent;color:#687b82;font-size:28px;cursor:pointer;display:grid;place-items:center}.voice-track{flex:1;min-width:0}.voice-track input{width:100%;accent-color:#00a884;margin:0;height:24px;cursor:pointer}.voice-meta{display:flex;justify-content:space-between;gap:5px;font-size:12px;color:#64757a}.voice-time{font-variant-numeric:tabular-nums}.voice-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#d9fdd3;color:#168d70;font-size:26px}.cost-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);line-height:1.8;font-size:16px}.cost-row strong{color:#08735e;white-space:nowrap;font-size:18px;font-variant-numeric:tabular-nums}.total{background:#e6f6e3;border:0;border-radius:7px;padding:12px;margin-top:12px}.total strong{font-size:21px}.note{font-size:14px;line-height:1.9;color:#655b35;background:#fff8de;padding:12px;border-radius:6px;margin-top:14px!important}.general{width:500px;padding:0 18px}.section-label{font-size:14px;color:#526763;margin:23px 0 12px;text-align:center}details+details{border-top:1px solid var(--line)}summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;padding:17px 0;font-size:17px;font-weight:600;line-height:1.8}summary::-webkit-details-marker{display:none}summary::after{content:'⌄';font-size:22px;color:#008069;margin-right:auto}details[open]>summary::after{content:'⌃'}details[open]>summary{color:#08735e}.detail-body{padding-bottom:18px}ul{padding-right:22px;font-size:17px;line-height:2.1}.source-note{font-size:13px;line-height:1.9;color:#52615d;max-width:88%;margin:16px 0 0 auto;background:#fff8;padding:10px;border-radius:7px}.chat-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;background:#f0f2f5;font-size:14px;color:#54656f}#contact a{display:inline-flex;align-items:center;justify-content:center;min-height:47px;border-radius:25px;padding:11px 22px;background:#008069;color:white;font-size:16px;font-weight:600;text-decoration:none}#contact a:hover{background:#075e54}:focus-visible{outline:3px solid #a77814;outline-offset:3px}#degree-title:focus:not(:focus-visible){outline:none}@media(max-width:600px){body{padding:0;background:#efeae2}.app{border-radius:0;box-shadow:none}.conversation{height:100dvh;min-height:400px}.chat-header{padding:12px 16px}.chat-content{padding:20px 17px 24px}.bubble{max-width:94%;padding:15px}.welcome{padding-bottom:0}.degree-picker{margin-left:-15px;margin-right:-15px}.degree-picker button{padding:13px 15px}.general{padding:0 15px}.chat-footer{padding:10px 13px}.chat-footer>span:first-child{display:none}#contact{width:100%}#contact a{width:100%}.source-note{max-width:94%}}@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s}}



.chat-footer{background:#f0f2f5;padding:12px 20px;gap:12px;border-top:1px solid #dfe6e3}
.contact-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.contact-caption{color:#54656f;font-size:14px;line-height:1.7}
@media(max-width:600px){.contact-group{width:100%;flex-direction:column;gap:6px}.contact-caption{text-align:center}}
.social-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-inline-start:auto;flex:0 0 auto}
.social-links>span{color:#54656f;font-size:13px;margin-inline-end:4px}
.social-links a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#008069;color:#fff;text-decoration:none;border:0;box-shadow:0 2px 4px #075e5414}
.social-links svg{width:21px;height:21px;display:block}
.social-links a:hover{background:#075e54}
.social-links a:active{transform:scale(.96)}
@media(max-width:600px){.chat-footer{padding:10px 13px;gap:10px}.social-links{width:100%;margin:0}.social-links a{width:40px;height:40px;flex-basis:40px}}
/* Supplied information appears as consecutive incoming chat messages. */
.information-message{width:550px;margin-bottom:22px;padding:20px 22px}
.message-sender{display:block;color:#008069;font-size:14px;font-weight:600;margin-bottom:12px}
.message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.95;text-align:start}
@media(max-width:600px){.information-message{padding:17px;max-width:94%;margin-bottom:18px}.message-text{font-size:16px;line-height:1.95}}

/* Clear, consistent message headers in the existing chat palette. */
.message-heading{display:flex;align-items:center;gap:12px;background:#edf7f1;border:1px solid #d8eade;border-radius:11px;padding:13px 15px;margin-bottom:18px}
.message-heading h3,.message-heading h2{margin:0;color:#075e54;font-size:19px;font-weight:700;line-height:1.65}
.message-icon{flex:0 0 35px;height:35px;display:grid;place-items:center;background:#fff;border-radius:10px;font-size:21px;color:#008069}
.audio-card .message-heading h2{font-size:19px}.audio-card .audio-label{margin-top:2px}
.degree-picker button{flex-wrap:wrap}
@media(max-width:600px){.message-heading{padding:11px 12px;gap:10px}.message-heading h3,.message-heading h2,.audio-card .message-heading h2{font-size:17px}}

/* Arabic typography: comfortable spacing and clear heading weights. */
.message-text{font-weight:400;line-height:2.05}.degree-picker strong,.message-heading h3,.message-heading h2{font-weight:700}.degree-picker button{line-height:1.8}.chat-header h1{font-weight:700}.message-heading{min-width:0}.message-heading h3,.message-heading h2{overflow-wrap:anywhere}



/* Simple Naskh-style Arabic lettering, following the supplied reference. */
.message-text{font-family:Arial,"Traditional Arabic",Tahoma,sans-serif;font-size:18px;font-weight:400;line-height:1.85}.degree-picker strong{font-size:18px}.degree-hint,.audio-label,.welcome-label{font-size:15px;line-height:1.8}.message-heading h3,.message-heading h2,.audio-card .message-heading h2{font-size:19px;line-height:1.7}.chat-header h1{font-size:22px}.chat-header span{font-size:15px}.student-message,p{font-size:18px;line-height:1.85}.source-note{font-size:14px;line-height:1.9}#contact a{font-size:17px}@media(max-width:600px){.message-text{font-size:18px;line-height:1.85}.message-heading h3,.message-heading h2,.audio-card .message-heading h2{font-size:18px}.degree-picker strong{font-size:18px}}