/* Caps & Gowns Help launcher and panel (CapsGowns_Assistant). Brand tokens from tradition.css; burgundy is the only
   accent (green only for the "available" dot and confirmations). Logical properties throughout, so everything sits
   bottom right in English and mirrors to bottom left in Arabic (dir="rtl"). */
.cgh { --cgh-accent: var(--cgt-burgundy, #6B1E2E); --cgh-accent-deep: var(--cgt-burgundy-deep, #4E1420); --cgh-ink: var(--cgt-black, #0B0B0B);
    --cgh-muted: #5B5B60; --cgh-faint: #8A8A8F; --cgh-line: #EFEAE2; --cgh-line-2: #E4DED4; --cgh-soft: #F6F4EF; --cgh-hover: #FAF7F2;
    --cgh-dot: #B9AE9E; --cgh-green: #2E8B57; --cgh-green-ink: #1F5130; --cgh-bg: var(--cgt-white, #fff);
    --cgh-sans: var(--cgt-sans, Figtree, "Helvetica Neue", Arial, sans-serif); --cgh-display: var(--cgt-serif, "Playfair Display", Georgia, serif);
    font: 400 15px/1.5 var(--cgh-sans); color: var(--cgh-ink); }
html[dir="rtl"] .cgh { --cgh-display: var(--cgt-arabic, "Noto Naskh Arabic", serif); }

/* launcher: white pill, burgundy round chat icon; icon only on phones; hidden while the panel is open */
.cgh__open { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 10px;
    height: 52px; padding-block: 0; padding-inline: 8px 20px; border: 1px solid var(--cgh-line-2); border-radius: 999px; background: var(--cgh-bg);
    color: var(--cgh-ink); font: 600 14px/1 var(--cgh-sans); cursor: pointer; box-shadow: 0 10px 30px -8px rgba(11, 11, 11, .28);
    transition: transform .15s ease, box-shadow .15s ease; }
.cgh__open:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -8px rgba(11, 11, 11, .34); }
.cgh__open-i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cgh-accent); color: #fff; }
.cgh--open .cgh__open { display: none; }

/* panel */
.cgh__panel { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 901; display: flex; flex-direction: column;
    width: min(390px, calc(100vw - 40px)); height: min(600px, calc(100vh - 40px)); box-sizing: border-box; background: var(--cgh-bg);
    border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(11, 11, 11, .35), 0 0 0 1px rgba(11, 11, 11, .06);
    animation: cgh-in .18s ease-out; }
.cgh__panel[hidden] { display: none; }
@keyframes cgh-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cgh__head { flex: none; display: flex; align-items: center; gap: 12px; padding-block: 14px; padding-inline: 16px 12px; background: var(--cgh-bg);
    border-block-end: 1px solid var(--cgh-line); }
/* The store's header logo; the file is white, brightness(0) shows it black (as the theme header does). */
.cgh__logo { flex: none; display: block; height: 30px; width: auto; filter: brightness(0); }
.cgh__brand { flex: none; font: 400 18px/1.1 var(--cgh-display); color: var(--cgh-ink); white-space: nowrap; }
.cgh__rule { flex: none; align-self: stretch; width: 1px; margin-block: 4px; background: var(--cgh-line-2); }
.cgh__id { flex: 1; min-width: 0; }
.cgh__title { margin: 0; font: 400 17px/1.2 var(--cgh-display); }
.cgh__title:focus { outline: none; }
.cgh__status { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font: 400 12px/1.3 var(--cgh-sans); color: var(--cgh-muted); }
.cgh__status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cgh-green); }
.cgh__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
    color: var(--cgh-muted); cursor: pointer; }
.cgh__close:hover { background: var(--cgh-soft); color: var(--cgh-ink); }

.cgh__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; }

/* welcome and starters */
.cgh__hi[hidden] { display: none; }
.cgh__hello { margin: 2px 0 6px; font: 400 24px/1.2 var(--cgh-display); }
.cgh__intro { margin: 0 0 14px; color: var(--cgh-muted); font-size: 14px; }
.cgh__start { list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid var(--cgh-line); border-radius: 14px; overflow: hidden; }
.cgh__start li + li { border-block-start: 1px solid var(--cgh-line); }
.cgh__start button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: var(--cgh-bg);
    color: var(--cgh-ink); font: 500 15px/1.3 var(--cgh-sans); text-align: start; cursor: pointer; }
.cgh__start button:hover { background: var(--cgh-hover); }
.cgh__start svg { flex: none; color: var(--cgh-accent); }
.cgh__start span { flex: 1; }
.cgh__chev { display: grid; color: var(--cgh-dot); font-style: normal; }
.cgh__chev svg { color: var(--cgh-dot); }
html[dir="rtl"] .cgh__chev svg, html[dir="rtl"] .cgh__send svg { transform: scaleX(-1); }

/* conversation */
.cgh__log { display: flex; flex-direction: column; gap: 10px; }
.cgh__log:empty { display: none; }
.cgh__msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.cgh__msg--assistant, .cgh__msg--team { align-self: flex-start; background: var(--cgh-soft); border-end-start-radius: 4px; }
.cgh__msg--student { align-self: flex-end; background: var(--cgh-accent); color: #fff; border-end-end-radius: 4px; }
.cgh__who { display: block; margin-block-end: 2px; font: 600 12px/1.3 var(--cgh-sans); color: var(--cgh-muted); }
.cgh__text { margin: 0; white-space: pre-line; }
.cgh__note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--cgh-muted); }
.cgh__note::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--cgh-dot); }
.cgh__fb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--cgh-muted); }
.cgh__fb span { margin-inline-end: 2px; }
.cgh__fb button { border: 1px solid var(--cgh-line-2); border-radius: 999px; background: var(--cgh-bg); padding: 3px 10px; cursor: pointer;
    font: 500 12px/1.4 var(--cgh-sans); color: var(--cgh-ink); }
.cgh__fb button:hover { border-color: var(--cgh-accent); }

/* confirmations (case sent, signed in): white inner card, green bold first line */
.cgh__ok { display: block; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--cgh-bg); font-size: 14px; }
.cgh__msg > .cgh__ok:first-of-type { margin-top: 0; }
.cgh__ok b { display: block; color: var(--cgh-green-ink); }
.cgh__ok p { margin: 2px 0 0; white-space: pre-line; }

/* typing indicator */
.cgh__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; border-end-start-radius: 4px; background: var(--cgh-soft); }
.cgh__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cgh-dot); animation: cgh-dot 1s infinite; }
.cgh__typing i:nth-child(2) { animation-delay: .15s; }
.cgh__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cgh-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* sign-in and hand-over cards */
.cgh__card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--cgh-line); border-radius: 14px; background: var(--cgh-soft); font-size: 14px; }
.cgh__card[hidden], .cgh__err[hidden], .cgh__field[hidden] { display: none; }
.cgh__card p { margin: 0; }
.cgh__field { display: grid; gap: 4px; }
.cgh__handover label { font: 600 12px/1.2 var(--cgh-sans); color: var(--cgh-muted); }
.cgh__handover textarea, .cgh__handover input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--cgh-line-2);
    border-radius: 10px; background: var(--cgh-bg); font: 400 15px/1.4 var(--cgh-sans); color: var(--cgh-ink); }
.cgh__handover textarea { resize: vertical; min-height: 72px; }
.cgh__handover input { height: 42px; }
.cgh__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cgh__act { justify-self: start; display: inline-flex; align-items: center; border: 1px solid var(--cgh-accent); border-radius: 999px;
    background: var(--cgh-bg); color: var(--cgh-accent); font: 600 13px/1.2 var(--cgh-sans); padding: 8px 14px; cursor: pointer; }
.cgh__act:hover, .cgh__act--solid { background: var(--cgh-accent); color: #fff; }
.cgh__act--solid:hover { background: var(--cgh-accent-deep); }
.cgh__act:disabled { opacity: .6; cursor: wait; }
.cgh__link { background: none; border: 0; padding: 0; color: var(--cgh-accent); text-decoration: underline; font: 500 13px/1.4 var(--cgh-sans); cursor: pointer; }
.cgh__err { margin: 0; color: var(--cgh-accent); font-size: 13px; font-weight: 600; }

/* question box: rounded pill with a round burgundy send button */
.cgh__ask { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 12px 6px; padding-block: 5px; padding-inline: 16px 5px;
    border: 1px solid transparent; border-radius: 999px; background: var(--cgh-soft); }
.cgh__ask:focus-within { border-color: var(--cgh-accent); background: var(--cgh-bg); }
.cgh__ask input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; font: 400 15px var(--cgh-sans); color: var(--cgh-ink); }
.cgh__ask input:focus, .cgh__ask input:focus-visible { outline: none; }
.cgh__send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cgh-accent);
    color: #fff; cursor: pointer; }
.cgh__send:hover { background: var(--cgh-accent-deep); }
.cgh__send:disabled { opacity: .6; cursor: wait; }

/* footnote */
.cgh__foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 16px 12px; text-align: center; }
.cgh__small { margin: 0; font: 400 11px/1.4 var(--cgh-sans); color: var(--cgh-faint); }
.cgh__foot .cgh__link { font-size: 12px; }

.cgh__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cgh button:focus-visible, .cgh input:focus-visible, .cgh textarea:focus-visible { outline: 2px solid var(--cgh-accent); outline-offset: 2px; }

/* phones: icon-only launcher, full-screen panel */
@media (max-width: 520px) {
    .cgh__open { inset-inline-end: 16px; height: 56px; padding-inline: 8px; }
    .cgh__open-i { width: 40px; height: 40px; }
    .cgh__open-t { display: none; }
    .cgh__panel { inset: 0; width: auto; height: auto; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cgh__panel, .cgh__typing i { animation: none; }
    .cgh__open { transition: none; }
    .cgh__open:hover { transform: none; }
    .cgh__typing i { opacity: .6; }
}
@media print { .cgh { display: none; } }