/* ────────────────────────────────────────────────────────────
   UM Libraries • Ask-Us Chat Widget – styles
   – Scoped styling via .uml-chat-root to resist host overrides
   – Pinned px font sizes; box-sizing reset inside the widget
   – Single-scroll content area; safe-areas; a11y polish
   ──────────────────────────────────────────────────────────── */

/* Prevent Android text autosizing (keeps control heights sane). */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* === Scoped isolation (everything inside the widget) ===
   Put .uml-chat-root on the modal container so host pages like LibGuides
   can’t easily override the widget’s type scale or box sizing. */
.uml-chat-root{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.35; color:#333;
  box-sizing:border-box;
}
.uml-chat-root*, .uml-chat-root*::before, .uml-chat-root*::after{
  box-sizing:inherit;
  font-family:inherit; font-size:inherit; line-height:inherit; color:inherit;
}

/* Utility: visually hidden but available to screen readers. */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}

/* Respect “reduced motion”. */
@media (prefers-reduced-motion: reduce){
  .chat-launcher-btn, .chat-close-btn{ transition:none !important; }
  .chat-widget-container{ animation:none !important; }
}

/* --------- Launcher / closer (these live outside root) ---------
   Built-in floating pill button. Hidden automatically when the modal
   opens; a “close” button appears in the same place. */
.chat-launcher-btn,.chat-close-btn{
  position:fixed; right:32px; bottom:32px; width:160px; height:64px; border:none;
  border-radius:32px; padding:0; background:transparent no-repeat center/contain;
  box-shadow:0 4px 16px rgba(0,0,0,.11); z-index:1100; cursor:pointer;
  transition:box-shadow .2s,background-image .15s;
}
.chat-launcher-btn:focus-visible,.chat-close-btn:focus-visible{
  outline:2px solid #2563eb; outline-offset:3px; border-radius:32px;
}
.chat-launcher-btn{background-image:url('/imgs/icons/toggle-chat.png');}
.chat-launcher-btn:hover{background-image:url('/imgs/icons/toggle-chat-hover.png');}
.chat-close-btn{background-image:url('/imgs/icons/toggle-chat.png');display:none;}
.chat-close-btn:hover{background-image:url('/imgs/icons/toggle-chat-hover.png');}
.chat-widget-container.active ~ .chat-launcher-btn{display:none !important;}
.chat-widget-container.active ~ .chat-close-btn{display:block !important;}

/* ------------------------ Card / modal ------------------------
   Fixed-position modal with max width/height and entry animation. */
:where(.uml-chat-root).chat-widget-container{
  display:none; flex-direction:column; position:fixed; right:24px;
  bottom:calc(112px + env(safe-area-inset-bottom, 0px));
  width:370px; max-width:95vw; height:600px; max-height:90vh; background:#fff;
  border:1px solid #e6e6e6; border-radius:8px; box-shadow:0 2px 32px rgba(0,0,0,.17);
  overflow:hidden; z-index:1200; animation:slideUp .33s cubic-bezier(.39,.58,.57,1.24);
}
@keyframes slideUp{ from{transform:translateY(60px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.chat-widget-container.active{display:flex;}

/* Header: logo + Ask Us mark + close X. */
.uml-chat-root .chat-widget-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px; background:#fff; border-radius:8px 8px 0 0;
}
.uml-chat-root .um-logo{width:42px;height:auto;margin-right:10px;}
.uml-chat-root .chat-header-main{flex:1;display:flex;justify-content:center;align-items:flex-start;gap:6px;}
.uml-chat-root .chat-header-close-btn{
  width:32px;height:32px;border:none;background:none;display:flex;align-items:center;justify-content:center;
  font-size:24px; line-height:1; color:#888; cursor:pointer; transition:color .15s;
}
.uml-chat-root .chat-header-close-btn:hover,
.uml-chat-root .chat-header-close-btn:focus{color:#555;outline:none;}
.uml-chat-root .chat-header-close-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:6px;}

/* Main content region is a single scrollable grid:
   [CTA button] / [LibChat iframe (flexes)] / [Helpful links] */
.uml-chat-root .chat-divider{border:0;border-top:1px solid #eee;margin:0 0 16px;}
.uml-chat-root .chat-widget-content{
  flex:1 1 auto; display:grid;
  grid-template-rows: auto minmax(260px, 1fr) auto; /* CTA | LibChat | Links */
  gap:16px; padding:0 22px 18px; background:#fff;
  overflow:auto; -webkit-overflow-scrolling:touch; min-height:0; overscroll-behavior:contain;
}
.uml-chat-root .chat-widget-content > * { min-height:0; }

/* CTA button: pinned sizes to avoid “ballooning” from host CSS. */
.uml-chat-root .chat-action-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box;
  background:#fbb315; color:#222;
  font-weight:600; font-size:16px; line-height:1.15;
  padding-block:12px; padding-inline:0;
  min-height:44px; max-height:56px; white-space:nowrap;
  border:0; border-radius:5px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.07); transition:background .15s; text-decoration:none;
}
.uml-chat-root .chat-action-btn:hover,
.uml-chat-root .chat-action-btn:focus{background:#fcc03d;text-decoration:none;}
.uml-chat-root .chat-action-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:6px;}
.uml-chat-root .chat-action-btn:visited{color:#222;text-decoration:none;}

/* LibChat host cell: isolates the third-party iframe and ensures
   it stretches to fill the middle grid row. */
.uml-chat-root [id^="libchat_"]{
  display:block; position:relative; z-index:2;
  align-self:stretch; min-height:260px; overflow:hidden; contain:layout paint;
}
.uml-chat-root [id^="libchat_"] iframe{ display:block; width:100%; height:100%; border:0; }

/* Helpful links list. */
.uml-chat-root .chat-links{list-style:none;margin:0;padding:0; position:relative; z-index:1;}
.uml-chat-root .chat-links li{border-left:2px solid #f2A900;padding-left:.75em;line-height:1.3;}
.uml-chat-root .chat-links a{
  color:#222;text-decoration:none; font-weight:600; font-size:14px; line-height:1.35;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; transition:color .13s;
}
.uml-chat-root .chat-links a:hover{text-decoration:underline;}
.uml-chat-root .chat-links a:focus-visible{outline:2px solid #2563eb;outline-offset:3px;border-radius:3px;}
.uml-chat-root .chat-links .arrow{width:13px;height:14px;margin-left:6px;margin-top:-2px;vertical-align:middle;transition:fill .15s;}
.uml-chat-root .chat-links a:hover .arrow path{fill:#2563eb;}

/* Fallback notice if LibChat fails to load. */
.uml-chat-root .chat-error{
  font-weight:500; font-size:14px; line-height:1.35;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#fff7d6;color:#5a4803;border:1px solid #ffe28a;padding:10px 12px;border-radius:6px;
}

/* Full-width modal on small screens. */
@media (max-width:520px){
  :where(.uml-chat-root).chat-widget-container{
    right:0;left:0;bottom:calc(96px + env(safe-area-inset-bottom, 0px));
    width:100vw;max-width:100vw;height:90vh;max-height:100vh;border-radius:0;
  }
}

/* Taller modal on short/landscape devices, with dvh fallback. */
@media (max-height:480px), (orientation: landscape) and (max-width:820px){
  :where(.uml-chat-root).chat-widget-container{ height:calc(100dvh - 96px); bottom:96px; }
}
@supports not (height:100dvh){
  :where(.uml-chat-root).chat-widget-container{ height:calc(100vh - 96px); }
}

/* Invisible box that preloads the hover image so the pill swap is instant. */
.chat-preload{
  position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
  background-image:url('/imgs/icons/toggle-chat-hover.png');
}