:root {
  --cb-accent: #F96D00;
  --cb-accent-2: #ffb238;
  --cb-dark: #1b1b1f;
  --cb-dark-2: #2a2a30;
  --cb-panel-width: clamp(360px, 25vw, 480px);
}

/* Docked, not overlaid: carve out room for the chat panel from
   #colorlib-main's right side, instead of letting the panel just cover
   whatever was underneath it. #colorlib-main is float: right inside
   #colorlib-page { overflow: hidden }, and a right-floated box always docks
   its margin-box against the container's right edge — so width and
   margin-right each fix only one edge:
     - width alone leaves margin-right at 0, so the box still docks flush
       against the page's right edge, i.e. right under the panel (the
       previous version of this fix got this backwards).
     - margin-right alone (the original version, pre-fix) leaves width
       unchanged, so the box's left edge gets pushed left by the full panel
       width, sliding it under the fixed #colorlib-aside nav on desktop, or
       off the left edge of the viewport entirely on tablet.
   Reducing width AND adding margin-right by the same amount moves the
   right edge to clear the panel while holding the left edge exactly where
   it already was. Only on desktop/tablet widths — below 700px the panel
   goes full-screen (see its own media query) and there's no "page" left to
   shrink. */
@media (min-width: 992px) {
  body.chatbot-open #colorlib-main {
    width: calc(75% - var(--cb-panel-width));
    margin-right: var(--cb-panel-width);
  }
}

@media (min-width: 701px) and (max-width: 991.98px) {
  body.chatbot-open #colorlib-main {
    width: calc(100% - var(--cb-panel-width));
    margin-right: var(--cb-panel-width);
  }
}

/* Bootstrap's grid breakpoints (col-md-*) key off the actual window width,
   not #colorlib-main's own (now-shrunk) width — so narrowing #colorlib-main
   above doesn't make the grid reflow the way it would if the window itself
   had gotten narrower. The Contact page's 4-column info row is the case
   that shows it: each .col-md-3 keeps its normal fixed share of the
   (smaller) container instead of stacking, so long text like an email or
   URL no longer fits and spills into the next column. Force that row to
   stack full-width while the panel is open and #colorlib-main is actually
   narrowed, so nothing overlaps. */
@media (min-width: 701px) {
  body.chatbot-open .contact-info > .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1em;
  }
}

@keyframes cb-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cb-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes cb-status-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

#chatbot-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 76px;
  height: 76px;
  background: none;
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#chatbot-toggle:hover {
  transform: scale(1.08) rotate(-4deg);
}

#chatbot-toggle:active {
  transform: scale(0.94);
}

#chatbot-toggle .cb-icon {
  display: flex;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

#chatbot-toggle .cb-icon svg {
  width: 24px;
  height: 24px;
}

/* The 3D robot sits above the emoji fallback and fully covers the round
   toggle button; if the model/WebGL fails to load, robot-avatar.js hides
   this mount and the emoji underneath shows through untouched.
   Unclipped (no border-radius/overflow:hidden) so the full mascot — not
   just whatever fits inside an inscribed circle — is visible; the render
   itself has a transparent background so there's no visible square edge. */
.robot-avatar-mount {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#robot-avatar-canvas-wrap {
  width: 100%;
  height: 100%;
}

#robot-avatar-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.chatbot-header-avatar {
  overflow: visible;
}

/* A docked sidebar, not a popover: full viewport height, ~1/4 width, flush
   against the right edge — enough room for the cards and history to breathe
   instead of a cramped floating bubble. */
#chatbot-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--cb-panel-width);
  height: 100vh;
  /* dvh accounts for the browser's own chrome (URL bar) collapsing —
     doesn't touch the on-screen keyboard, that's handled in JS below by
     pinning this to window.visualViewport's height instead. */
  height: 100dvh;
  background: #fff;
  border-radius: 0;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  font-family: 'Poppins', sans-serif;
  opacity: 0;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.28s;
}

#chatbot-panel.open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* Below ~700px, a 1/3-width dock would be a sliver — take the full screen
   instead, the standard mobile chat-sheet pattern. */
@media (max-width: 700px) {
  #chatbot-panel {
    width: 100vw;
  }
}

#chatbot-header {
  background: linear-gradient(135deg, var(--cb-dark), var(--cb-dark-2));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chatbot-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chatbot-header-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.chatbot-header-avatar svg {
  width: 18px;
  height: 18px;
}

.chatbot-header-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chatbot-header-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.chatbot-header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.chatbot-header-status .cb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #37d67a;
  animation: cb-status-blink 2.2s ease-in-out infinite;
}

#chatbot-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

#chatbot-close svg {
  width: 14px;
  height: 14px;
}

#chatbot-close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);
}

#chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  font-size: 13px;
  background: radial-gradient(circle at 15% 0%, rgba(249, 109, 0, 0.05), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(37, 211, 102, 0.04), transparent 45%), #fafafa;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

#chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

#chatbot-messages::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 6px;
}

.chatbot-msg {
  margin-bottom: 12px;
  line-height: 1.45;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: cb-msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chatbot-msg.user {
  justify-content: flex-end;
}

.chatbot-msg.bot,
.chatbot-msg.error {
  justify-content: flex-start;
}

.chatbot-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cb-accent), var(--cb-accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.chatbot-avatar svg {
  width: 14px;
  height: 14px;
}

.chatbot-msg.user .bubble {
  background: linear-gradient(135deg, var(--cb-accent), var(--cb-accent-2));
  color: #fff;
  border-radius: 14px 14px 3px 14px;
  box-shadow: 0 3px 10px rgba(249, 109, 0, 0.25);
}

.chatbot-msg.bot .bubble {
  background: #fff;
  color: #262626;
  border: 1px solid #ececec;
  border-radius: 14px 14px 14px 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.chatbot-msg .bubble {
  display: inline-block;
  padding: 9px 12px;
  max-width: 78%;
  white-space: pre-wrap;
  word-break: break-word;
}

.chatbot-msg.error .bubble {
  background: #fdecea;
  color: #b3261e;
  border-radius: 14px 14px 14px 3px;
  border: 1px solid #f6cbc6;
}

.cb-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 1px;
}

.cb-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9b9b9;
  animation: cb-dot-bounce 1.1s ease-in-out infinite;
}

.cb-typing span:nth-child(2) { animation-delay: 0.15s; }
.cb-typing span:nth-child(3) { animation-delay: 0.3s; }

/* Glass-elevated card system, shared by the resume attachment and the
   contact rows: frosted translucent surface, a large glowing icon medallion,
   and a border that lights up with a color-matched halo on hover. */
.chatbot-attachment,
.chatbot-contact-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.68));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 10px 24px rgba(20, 20, 20, 0.07);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease,
    border-color 0.22s ease, background 0.22s ease;
}

.chatbot-attachment:hover,
.chatbot-contact-action:hover {
  transform: translateY(-2px);
  background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8));
}

.chatbot-attachment {
  margin: -4px 0 12px;
  max-width: 88%;
}

.chatbot-attachment:hover {
  border-color: rgba(249, 109, 0, 0.35);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 14px 30px rgba(249, 109, 0, 0.22);
}

.chatbot-attachment-icon,
.chatbot-contact-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.chatbot-attachment-icon svg,
.chatbot-contact-icon svg {
  width: 19px;
  height: 19px;
}

.chatbot-attachment-icon {
  background: linear-gradient(135deg, var(--cb-accent), var(--cb-accent-2));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 0 0 8px rgba(249, 109, 0, 0.08);
}

.chatbot-attachment-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.chatbot-attachment-name {
  font-size: 12.5px;
  color: #1c1c1c;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-attachment-action {
  font-size: 11px;
  color: var(--cb-accent);
  font-weight: 500;
}

.chatbot-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -4px 0 14px;
  max-width: 92%;
  animation: cb-msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chatbot-contact-action.email .chatbot-contact-icon {
  background: linear-gradient(135deg, var(--cb-dark), var(--cb-dark-2));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 0 0 8px rgba(27, 27, 31, 0.07);
}

.chatbot-contact-action.email:hover {
  border-color: rgba(27, 27, 31, 0.28);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 14px 30px rgba(27, 27, 31, 0.18);
}

.chatbot-contact-action.whatsapp .chatbot-contact-icon {
  background: linear-gradient(135deg, #25d366, #128c4a);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 0 8px rgba(37, 211, 102, 0.1);
}

.chatbot-contact-action.whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.4);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 14px 30px rgba(37, 211, 102, 0.24);
}

.chatbot-contact-action.call .chatbot-contact-icon {
  background: linear-gradient(135deg, var(--cb-accent), var(--cb-accent-2));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 0 8px rgba(249, 109, 0, 0.08);
}

.chatbot-contact-action.call:hover {
  border-color: rgba(249, 109, 0, 0.35);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 14px 30px rgba(249, 109, 0, 0.22);
}

.chatbot-contact-action .chatbot-contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.chatbot-contact-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #1c1c1c;
}

.chatbot-contact-sub {
  font-size: 11px;
  color: #8a8a8a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.chatbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 14px;
  max-width: 95%;
  animation: cb-msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chatbot-suggestion-chip {
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cb-accent);
  background: rgba(249, 109, 0, 0.07);
  border: 1px solid rgba(249, 109, 0, 0.22);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease,
    color 0.18s ease;
}

.chatbot-suggestion-chip:hover {
  background: linear-gradient(135deg, var(--cb-accent), var(--cb-accent-2));
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}

.chatbot-suggestion-chip:active {
  transform: translateY(0) scale(0.97);
}

#chatbot-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid #eee;
  padding: 10px;
  background: #fff;
  flex-shrink: 0;
}

#chatbot-input {
  flex: 1;
  border: 1px solid #e2e2e2;
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  resize: none;
  max-height: 90px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#chatbot-input:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px rgba(249, 109, 0, 0.12);
}

#chatbot-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cb-accent), var(--cb-accent-2));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

#chatbot-send:hover:not(:disabled) {
  transform: scale(1.08);
}

#chatbot-send:active:not(:disabled) {
  transform: scale(0.92);
}

#chatbot-send:disabled {
  opacity: 0.45;
  cursor: default;
}

#chatbot-send svg {
  width: 15px;
  height: 15px;
}