/* HCET Assistant widget */
.hxc { --hxc-navy: #0a2d6e; --hxc-deep: #061a40; --hxc-crimson: #be1d3e; --hxc-gold: #e8b84a; --hxc-ink: #12182b; --hxc-muted: #566078; --hxc-line: #e3e8f1; --hxc-paper: #f6f8fc;
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; color: var(--hxc-ink); }
body.hxc-on .cds-scroll-top { bottom: 96px; }

.hxc__launcher { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--hxc-navy); color: #fff; font: inherit; font-weight: 600; cursor: pointer; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 30px -10px rgba(10,45,110,.7), 0 2px 6px rgba(0,0,0,.2); transition: transform .2s ease, box-shadow .2s ease; }
.hxc__launcher:hover { transform: translateY(-2px); background: #0f3f95; box-shadow: 0 18px 34px -10px rgba(10,45,110,.75), 0 2px 6px rgba(0,0,0,.22); }
.hxc__launcher:focus-visible, .hxc__close:focus-visible, .hxc__send:focus-visible, .hxc__chip:focus-visible, .hxc__link:focus-visible { outline: 3px solid var(--hxc-gold); outline-offset: 3px; }
.hxc__launcher svg { width: 24px; height: 24px; flex: none; }
.hxc__ping { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--hxc-gold); border: 2px solid #fff; }
.hxc.is-open .hxc__launcher, .hxc.is-open .hxc__ping { display: none; }

.hxc__panel { position: absolute; right: 0; bottom: 0; width: min(390px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px)); height: min(620px, calc(100dvh - 48px)); display: none; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(6,26,64,.55), 0 4px 12px rgba(6,26,64,.12); border: 1px solid var(--hxc-line); transform-origin: bottom right; }
.hxc.is-open .hxc__panel { display: flex; animation: hxcIn .25s ease; }
@keyframes hxcIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.hxc__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; background: linear-gradient(135deg, var(--hxc-navy), var(--hxc-deep)); color: #fff; }
.hxc__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; flex: none; overflow: hidden; }
.hxc__avatar img { width: 34px; height: 34px; object-fit: contain; }
.hxc__title { flex: 1; min-width: 0; }
.hxc__title strong { display: block; font-size: 1rem; line-height: 1.2; }
.hxc__title span { display: flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .85; }
.hxc__title span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #42d392; }
.hxc__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background .2s; }
.hxc__close:hover { background: rgba(255,255,255,.28); }
.hxc__close svg { width: 18px; height: 18px; }

.hxc__log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px; background: var(--hxc-paper); scroll-behavior: smooth; }
.hxc__msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; animation: hxcMsg .2s ease; }
@keyframes hxcMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hxc__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--hxc-line); border-bottom-left-radius: 5px; box-shadow: 0 2px 6px rgba(6,26,64,.05); }
.hxc__msg--me { align-self: flex-end; background: var(--hxc-navy); color: #fff; border-bottom-right-radius: 5px; }
.hxc__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(10,45,110,.08); color: var(--hxc-navy) !important; font-weight: 600; font-size: .86rem; text-decoration: none !important; white-space: normal; transition: background .2s, color .2s; }
.hxc__link:hover { background: var(--hxc-navy); color: #fff !important; }
.hxc__link svg { width: 14px; height: 14px; }
.hxc__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--hxc-line); border-radius: 16px; border-bottom-left-radius: 5px; }
.hxc__typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6c0; animation: hxcDot 1s infinite ease-in-out; }
.hxc__typing i:nth-child(2) { animation-delay: .15s; } .hxc__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hxcDot { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

.hxc__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; background: var(--hxc-paper); }
.hxc__chips:empty { display: none; }
.hxc__chip { padding: 8px 13px; border: 1px solid #c9d4ea; border-radius: 999px; background: #fff; color: var(--hxc-navy); font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer; text-align: left; transition: background .15s, color .15s, border-color .15s; }
.hxc__chip:hover { background: var(--hxc-navy); border-color: var(--hxc-navy); color: #fff; }

.hxc__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; background: #fff; border-top: 1px solid var(--hxc-line); }
.hxc__input { flex: 1; resize: none; max-height: 96px; padding: 11px 14px; border: 1.5px solid #cfd7e6; border-radius: 16px; font: inherit; color: var(--hxc-ink); background: #fff; }
.hxc__input:focus { outline: none; border-color: var(--hxc-navy); box-shadow: 0 0 0 3px rgba(10,45,110,.14); }
.hxc__send { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--hxc-navy); color: #fff; cursor: pointer; flex: none; transition: background .2s; }
.hxc__send:hover { background: #0f3f95; }
.hxc__send:disabled { background: #c6cfe0; cursor: not-allowed; }
.hxc__send svg { width: 20px; height: 20px; }
.hxc__note { padding: 0 16px 12px; background: #fff; color: var(--hxc-muted); font-size: .72rem; text-align: center; }

@media (max-width: 520px) {
  .hxc { right: 14px; bottom: 14px; }
  .hxc__launcher { height: 52px; padding: 0 16px; }
  .hxc__launcher span { display: none; }
  .hxc.is-open { right: 0; bottom: 0; }
  .hxc__panel { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  body.hxc-on .cds-scroll-top { bottom: 80px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hxc__panel, .hxc__msg { animation: none; } .hxc__launcher, .hxc__log { transition: none; scroll-behavior: auto; } .hxc__typing i { animation: none; } }

/* Suggestions: one scrollable row so the conversation keeps its space */
.hxc__chips { flex-wrap: nowrap; overflow-x: auto; padding: 6px 16px 12px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.hxc__chip { flex: none; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .hxc__input { font-size: 16px; } }

/* Responsive refinements */
.hxc { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); }
.hxc__panel { overscroll-behavior: contain; }
.hxc__log { overscroll-behavior: contain; }
.hxc__head { flex: none; }
@media (max-width: 520px) {
  .hxc { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .hxc.is-open { right: 0; bottom: 0; }
  .hxc__panel { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; }
  .hxc__head { padding-top: max(16px, env(safe-area-inset-top)); }
  .hxc__form { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .hxc__note { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .hxc__msg { max-width: 92%; }
  .hxc__close { width: 44px; height: 44px; }
  html.hxc-lock, html.hxc-lock body { overflow: hidden; }
}
/* Short landscape phones & small tablets: use the full screen height */
@media (max-height: 480px) and (orientation: landscape) {
  .hxc.is-open { right: 0; bottom: 0; }
  .hxc__panel { position: fixed; right: 0; bottom: 0; top: 0; width: min(420px, 100vw); height: 100vh; height: 100dvh; border-radius: 0; }
  .hxc__head { padding: 8px 14px; }
  .hxc__avatar { width: 34px; height: 34px; }
  .hxc__log { padding-top: 10px; }
  .hxc__note { display: none; }
  .hxc__launcher { height: 48px; }
}
@media (min-width: 1600px) { .hxc__panel { width: 420px; height: min(680px, calc(100dvh - 64px)); } .hxc { font-size: 16px; } }

/* Header logo: the HCET logo is rectangular, so show it in a clean white badge (not a circle) */
.hxc__avatar { width: 78px; height: 46px; border-radius: 8px; padding: 3px 5px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.hxc__avatar img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 380px) { .hxc__avatar { width: 66px; height: 40px; } }
@media (max-height: 480px) and (orientation: landscape) { .hxc__avatar { width: 62px; height: 36px; } }
.hxc__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hxc__title span::before { display: inline-block; flex: none; margin-right: 7px; vertical-align: middle; }

/* Apply-for-admission flow chips */
.hxc__chip--apply { background: #0a2d6e; color: #fff; border-color: #0a2d6e; font-weight: 600; }
.hxc__chip--apply:hover { background: #061a40; color: #fff; }
.hxc__chip--skip { background: #fff; color: #566078; border-style: dashed; }
.hxc__chips { max-height: 38vh; overflow-y: auto; }
.hxc__chips.is-list { flex-wrap: wrap !important; overflow-x: hidden !important; }
.hxc__chips.is-list .hxc__chip { white-space: normal; flex: 0 1 auto; max-width: 100%; }
