/* Globie on ecobelt.eco and the portal: he replaces the round chat button (kept in the page,
   hidden, so the assistant's own code is untouched), and the panel opens just above him. */
.globie-on #ecb-fab { display: none !important; }
.globie-on #ecb-panel { bottom: 116px; }
@media (max-width: 600px) { .globie-on #ecb-panel { bottom: 92px; } }

/* his face in the assistant's header */
.ecb-globie { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 50% 35%, #fff 0%, #e9f6ef 60%, #dceefa 100%); box-shadow: 0 0 0 2px #fff; }

/* while the panel is open, his ring turns blue like his hover */
.globie--open .globie__ring { box-shadow: 0 10px 28px rgba(11, 45, 91, .28), 0 0 0 3px #fff, 0 0 0 5px var(--g-blue); }

/* portal: the "Ask Globie" card sits at the bottom of the sidebar */
#portal-globie { margin-top: auto; padding-top: 12px; border-top: 1px solid #eaeef3; }
#portal-globie .globie--sidebar { font-size: 14px; }
#portal-globie .globie__bubble { display: none; }
@media (max-width: 760px) {
  #portal-globie .globie__text { display: none; }
  #portal-globie .globie--sidebar { justify-content: center; padding: 6px 0; }
  #portal-globie .globie--sidebar .globie__ring { width: 40px; height: 40px; }
}
.globie-on #ecb-panel { height: min(560px, calc(100vh - 150px)); }
/* The portal is always light: keep the card's words dark even when the computer is in dark mode
   (Globie's own styles turn them white for dark pages, which made them vanish on the white sidebar). */
#portal-globie .globie__text strong { color: #0b2d5b !important; font-weight: 700; font-size: 14px; }
#portal-globie .globie__text small { color: #4a5a6b !important; font-size: 12.5px; }

/* ---- portal: Globie's welcome after signing in (globie-intro.js) ---- */
.gi { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; padding: 16px; background: rgba(11, 45, 91, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .5s, backdrop-filter .5s, -webkit-backdrop-filter .5s; font-family: Inter, system-ui, sans-serif; }
.gi--in { background: rgba(11, 45, 91, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gi--out { background: rgba(11, 45, 91, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); pointer-events: none; }
.gi__card { position: relative; width: min(400px, 84vw, 60vh); display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(60px) scale(.55); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; }
.gi--in .gi__card { opacity: 1; transform: none; }
.gi--out .gi__card { transition: transform .65s cubic-bezier(.55, 0, .75, .2), opacity .65s ease-in; }
.gi__stage { width: 100%; aspect-ratio: 1; border-radius: 34px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff 0%, #e9f6ef 60%, #dceefa 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 5px #fff, 0 0 0 9px #15a75a; }
.gi__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gi__words { margin: 6px 0 0; width: 100%; min-height: 4.4em; padding: 14px 18px; border-radius: 18px; background: #fff; color: #0b2d5b; font-size: 16.5px; font-weight: 600; line-height: 1.45; text-align: center; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); }
.gi__skip { position: absolute; top: -46px; right: 0; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: 600 14px Inter, system-ui, sans-serif; cursor: pointer; }
.gi__skip:hover { background: rgba(255, 255, 255, .28); }
.gi__sound { padding: 10px 20px; border: 0; border-radius: 999px; background: #15a75a; color: #fff; font: 700 15px Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(21, 167, 90, .45); }
.gi__sound[hidden] { display: none; }
.gi--still .gi__card { transform: none !important; transition: opacity .4s; }
.gi-land .globie__ring { animation: gi-land .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gi-land { 40% { transform: scale(1.3); } }
@media (max-height: 640px) { .gi__words { font-size: 15px; min-height: 0; } }
/* Globie's chat box: a livelier look for the existing Ecobelt assistant panel (website and portal).
   Only looks change here; the assistant itself is untouched. Everything is under .globie-on, so
   without Globie the old look stays. Brand: green #15A75A, blue #125AA7, navy #0B2D5B. */
.globie-on #ecb-panel { border: 0; border-radius: 26px; background: #fff; box-shadow: 0 30px 70px -18px rgba(11, 45, 91, .5), 0 0 0 1px rgba(11, 45, 91, .06); transform-origin: bottom right; transform: translateY(18px) scale(.94); transition: opacity .28s, transform .38s cubic-bezier(.34, 1.4, .64, 1), visibility .28s; }
.globie-on #ecb-panel.open { transform: none; }

/* header: Globie, his name, a live dot, over the brand gradient */
.globie-on .ecb-head { position: relative; overflow: hidden; gap: 13px; padding: 16px 16px 16px 18px; background: linear-gradient(125deg, #0b2d5b 0%, #125aa7 62%, #15a75a 135%); }
.globie-on .ecb-head::before { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 232, 172, .35), transparent 65%); pointer-events: none; }
.globie-on .ecb-head::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px); background-size: 14px 14px; pointer-events: none; }
.globie-on .ecb-head > * { position: relative; z-index: 1; }
.ecb-face { position: relative; flex: none; width: 48px; height: 48px; }
.ecb-face .ecb-globie { width: 48px; height: 48px; box-shadow: 0 0 0 2.5px #fff, 0 6px 16px rgba(0, 0, 0, .25); }
.ecb-face::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #3ee08a; box-shadow: 0 0 0 2.5px #0f3f78; }
.globie-on .ecb-head-t strong { font-size: 1.08rem; letter-spacing: -.01em; }
.globie-on .ecb-head-t span { color: rgba(255, 255, 255, .8); }
.globie-on #ecb-close { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; }
.globie-on #ecb-close:hover { background: rgba(255, 255, 255, .26); }

/* the conversation */
.globie-on #ecb-log { padding: 18px 16px 14px; gap: 12px; background: linear-gradient(180deg, #f2faf6 0%, #f6f9fd 55%, #fff 100%); scroll-behavior: smooth; }
.globie-on .ecb-msg { font-size: .92rem; border-radius: 18px; animation: ecb-pop .32s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes ecb-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.globie-on .ecb-user { background: linear-gradient(135deg, #15a75a, #0e8a4a); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 16px -6px rgba(21, 167, 90, .55); }
.globie-on .ecb-bot { position: relative; margin-left: 38px; max-width: calc(86% - 38px); background: #fff; color: #10233a; border: 0; border-bottom-left-radius: 5px; box-shadow: 0 4px 18px -6px rgba(11, 45, 91, .18), 0 0 0 1px rgba(11, 45, 91, .05); }
.globie-on .ecb-bot::before { content: ""; position: absolute; left: -38px; bottom: 0; width: 30px; height: 30px; border-radius: 50%; background: url(/assets/globie/avatar/globie-avatar-idle-128.webp) center / cover, #e9f6ef; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(11, 45, 91, .18); }
.globie-on .ecb-bot a { color: #125aa7; }
.globie-on .ecb-typing span { background: #15a75a; opacity: .6; }
.globie-on .ecb-typing::before { background-image: url(/assets/globie/avatar/globie-avatar-talk-128.webp); }

/* welcome: Globie waving, a hello, and quick questions */
.ecb-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 6px 6px; animation: ecb-pop .45s cubic-bezier(.34, 1.4, .64, 1) both; }
.ecb-welcome img { width: 92px; height: auto; margin: -4px 0 0; transition: width .35s; filter: drop-shadow(0 10px 14px rgba(11, 45, 91, .18)); }
@media (prefers-reduced-motion: no-preference) { .ecb-welcome img { animation: ecb-wave-in .9s .1s cubic-bezier(.34, 1.56, .64, 1) both; } }
@keyframes ecb-wave-in { from { opacity: 0; transform: translateY(24px) scale(.8) rotate(-6deg); } }
.ecb-welcome h3 { margin: 4px 0 4px; font-family: 'Archivo', Inter, system-ui, sans-serif; font-size: 1.22rem; font-weight: 800; color: #0b2d5b; letter-spacing: -.02em; }
.ecb-welcome p { margin: 0 0 12px; max-width: 280px; font-size: .9rem; line-height: 1.5; color: #4a5a6b; }
.ecb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ecb-chips button { padding: 8px 13px; border: 1.5px solid rgba(21, 167, 90, .35); border-radius: 999px; background: #fff; color: #0b6b3a; font: 600 .8rem/1.2 inherit; font-family: inherit; cursor: pointer; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.ecb-chips button:hover { background: #15a75a; border-color: #15a75a; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(21, 167, 90, .7); }
.ecb-welcome.asked .ecb-chips { display: none; }
.ecb-welcome.asked img { width: 56px; }
.ecb-welcome.asked h3 { font-size: 1rem; }
.ecb-welcome.asked p { display: none; }
.ecb-chips button { padding: 7px 12px; }
@media (max-width: 600px) { .ecb-welcome img { width: 80px; } .ecb-welcome h3 { font-size: 1.12rem; } }

/* typing box and send button */
.globie-on .ecb-input { gap: 10px; padding: 12px 12px 10px; border-top: 1px solid #eef2f6; }
.globie-on #ecb-text { border: 1.5px solid #e1e7ee; border-radius: 22px; background: #f6f8fb; padding-left: 16px; transition: border-color .18s, background .18s, box-shadow .18s; }
.globie-on #ecb-text:focus { background: #fff; border-color: #15a75a; box-shadow: 0 0 0 4px rgba(21, 167, 90, .12); }
.globie-on #ecb-send { width: 42px; height: 42px; background: linear-gradient(135deg, #15a75a, #125aa7); box-shadow: 0 8px 18px -8px rgba(18, 90, 167, .8); transition: transform .18s, box-shadow .18s, filter .18s; }
.globie-on #ecb-send:hover { transform: translateY(-1px) rotate(-8deg); filter: brightness(1.08); }
.globie-on .ecb-foot { font-size: .66rem; color: #8592a0; padding-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .globie-on .ecb-msg, .ecb-welcome { animation: none; } .globie-on #ecb-panel { transition: opacity .2s, visibility .2s; } }
@media (max-width: 600px) { .ecb-chips button:nth-child(n+4) { display: none; } }

/* replies: even line breaks, a little wider, and contact details as small cards */
.globie-on .ecb-bot { max-width: calc(100% - 44px); line-height: 1.55; text-wrap: pretty; overflow-wrap: break-word; }
.globie-on .ecb-user { text-wrap: pretty; }
.ecb-mail { color: #125aa7 !important; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.ecb-mail:hover { text-decoration: underline !important; }
.ecb-contact { display: flex; flex-direction: column; gap: 1px; margin: 6px 0; padding: 9px 12px; border-radius: 12px; background: #f1f6fc; border: 1px solid #e1ebf6; }
.ecb-contact small { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5d6b7a; }
.ecb-contact .ecb-mail { font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
.ecb-contact + .ecb-contact { margin-top: 0; }

/* ---- every reply, shaped (shapeReply in globie-assistant.js) ---- */
.globie-on .ecb-bot.eb-shaped { padding: 13px 15px 14px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #cfeedd, #dbe8f8 60%, #eef3f8) border-box; box-shadow: 0 8px 24px -12px rgba(11, 45, 91, .28); }
.eb-p { margin: 0; color: #13263b; }
.eb-p + .eb-p, .eb-p + .eb-list, .eb-list + .eb-p, .ecb-contact + .eb-p, .eb-p + .ecb-contact { margin-top: 9px; }
.eb-p strong, .eb-li-d strong { color: #0b2d5b; font-weight: 700; }
.globie-on .ecb-bot.eb-shaped a:not(.eb-chip):not(.ecb-mail) { color: #125aa7; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(18, 90, 167, .3); text-underline-offset: 3px; }

.eb-list { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 2px; }
.eb-list li { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 4px 8px 30px; border-radius: 10px; }
.eb-list li + li { border-top: 1px dashed #e3eaf1; }
.eb-list li::before { content: "✓"; position: absolute; left: 4px; top: 9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #15a75a, #0e8a4a); box-shadow: 0 3px 8px -3px rgba(21, 167, 90, .7); }
.eb-li-t { font-weight: 700; color: #0b2d5b; font-size: .9rem; line-height: 1.3; }
.eb-li-t a { color: inherit !important; text-decoration: none !important; }
.eb-li-d { font-size: .84rem; line-height: 1.45; color: #4a5a6b; }
.eb-li-only { font-size: .88rem; color: #13263b; }

.eb-note { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px; padding: 4px 10px 4px 5px; border-radius: 999px; background: #fff4e0; color: #8a5a00; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.eb-note b { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #e9a23b; color: #fff; font: italic 800 10px/1 Georgia, serif; }

.eb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #eef2f6; }
.eb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 12px; border-radius: 999px; background: #eaf7f0; border: 1px solid #cdeedb; color: #0b6b3a !important; font-size: .78rem; font-weight: 700; text-decoration: none !important; transition: background .18s, transform .18s, box-shadow .18s; }
.eb-chip i { font-style: normal; transition: transform .18s; }
.eb-chip:hover { background: #15a75a; border-color: #15a75a; color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(21, 167, 90, .7); }
.eb-chip:hover i { transform: translateX(3px); }

/* each part slides in after the one before */
@media (prefers-reduced-motion: no-preference) {
  .globie-on .ecb-bot.eb-shaped { animation: none; }
  .eb-in { opacity: 0; transform: translateY(7px); animation: eb-in .42s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--d, 0ms); }
  @keyframes eb-in { to { opacity: 1; transform: none; } }
}

/* "Globie is typing…" */
.globie-on .ecb-typing { gap: 5px; }
.globie-on .ecb-typing::after { content: var(--typing, "Globie is typing"); margin-left: 6px; font-size: .74rem; font-weight: 600; color: #6b7a89; }
.eb-li-d::first-letter { text-transform: uppercase; }