/* ==========================================================================
   Genni AI — shared widgets: international phone field and the assistant.
   Self-contained colours, so it looks the same on the marketing pages and
   inside the platform (which has its own stylesheet).
   ========================================================================== */

/* ---------- phone field ---------- */
.phone{ position:relative; display:flex; align-items:stretch; }
.phone__btn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:0 10px 0 12px; min-height:46px;
  border:1px solid rgba(122,166,255,.28); border-right:0; border-radius:12px 0 0 12px;
  background:rgba(122,166,255,.07); color:#e9eefb; cursor:pointer;
  font:600 14px/1 'JetBrains Mono', ui-monospace, monospace;
}
.phone__btn:hover{ background:rgba(122,166,255,.13); }
.phone__btn:focus-visible, .phone__search:focus-visible{ outline:2px solid #61e8ff; outline-offset:1px; }
.phone__flag{ width:22px; height:16px; border-radius:3px; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.phone__caret{ font-size:10px; color:#8b9dc0; }
.phone .phone__input{ flex:1; min-width:0; border-radius:0 12px 12px 0; }
.phone__panel{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:min(340px, 100%);
  background:#0b1224; border:1px solid rgba(122,166,255,.28); border-radius:12px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85); overflow:hidden;
}
.phone__search{
  width:100%; border:0; border-bottom:1px solid rgba(122,166,255,.18);
  background:transparent; color:#e9eefb; padding:11px 14px; font:14px Inter, system-ui, sans-serif;
}
.phone__search::placeholder{ color:#8b9dc0; }
.phone__list{ list-style:none; margin:0; padding:4px; max-height:250px; overflow-y:auto; }
.phone__opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:14px; color:#e9eefb; }
.phone__opt.is-active{ background:rgba(122,166,255,.14); }
.phone__opt.is-current .phone__name{ color:#f6cd72; font-weight:600; }
.phone__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone__code{ color:#8b9dc0; font:13px 'JetBrains Mono', ui-monospace, monospace; }
.phone__none{ padding:12px; color:#8b9dc0; font-size:13px; }

/* ---------- assistant (chat) ---------- */
.gchat-btn{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px 11px 13px; border:0; border-radius:999px; cursor:pointer;
  color:#1a1405; font:700 14px Inter, system-ui, sans-serif;
  background:linear-gradient(158deg, #ffeab4 0%, #f6cd72 40%, #d79a30 100%);
  box-shadow:0 14px 36px -12px rgba(255,186,70,.7), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.gchat-btn:hover{ filter:brightness(1.06); }
.gchat-btn:focus-visible, .gchat__send:focus-visible, .gchat__x:focus-visible, .gchat__chip:focus-visible{ outline:2px solid #61e8ff; outline-offset:2px; }
.gchat-btn svg{ width:20px; height:20px; }
.gchat-btn[hidden]{ display:none; }

.gchat{
  position:fixed; right:18px; bottom:18px; z-index:91;
  width:min(390px, calc(100vw - 24px)); height:min(580px, calc(100dvh - 36px));
  display:flex; flex-direction:column;
  background:#0b1224; color:#e9eefb; border:1px solid rgba(122,166,255,.28); border-radius:18px;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.9); overflow:hidden;
  font:14px/1.5 Inter, system-ui, sans-serif;
}
.gchat[hidden]{ display:none; }
.gchat__head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(122,166,255,.16); background:linear-gradient(180deg, rgba(246,205,114,.10), transparent); }
.gchat__logo{ width:30px; height:34px; flex:none; }
.gchat__title{ font-weight:700; font-size:15px; line-height:1.2; }
.gchat__sub{ color:#8b9dc0; font-size:12px; }
.gchat__x{ margin-left:auto; width:32px; height:32px; border:0; border-radius:9px; background:transparent; color:#8b9dc0; font-size:20px; cursor:pointer; }
.gchat__x:hover{ background:rgba(122,166,255,.12); color:#e9eefb; }
.gchat__log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.gchat__msg{ max-width:88%; padding:9px 12px; border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.gchat__msg--bot{ align-self:flex-start; background:#101a33; border:1px solid rgba(122,166,255,.14); border-bottom-left-radius:5px; }
.gchat__msg--user{ align-self:flex-end; background:rgba(246,205,114,.16); border:1px solid rgba(246,205,114,.35); border-bottom-right-radius:5px; }
.gchat__msg--err{ align-self:flex-start; color:#ffb3bb; background:rgba(255,96,112,.08); border:1px solid rgba(255,96,112,.35); }
.gchat__msg a{ color:#61e8ff; }
.gchat__msg strong{ color:#fff; }
.gchat__typing{ align-self:flex-start; color:#8b9dc0; font-size:13px; padding:4px 6px; }
.gchat__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.gchat__chips[hidden]{ display:none; }
.gchat__chip{ border:1px solid rgba(122,166,255,.28); background:transparent; color:#b9c6e2; border-radius:999px; padding:5px 11px; font:12.5px Inter, system-ui, sans-serif; cursor:pointer; }
.gchat__chip:hover{ color:#e9eefb; border-color:#61e8ff; }
.gchat__form{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid rgba(122,166,255,.16); }
.gchat__input{
  flex:1; min-width:0; resize:none; max-height:110px;
  border:1px solid rgba(122,166,255,.28); border-radius:12px; background:#060a16; color:#e9eefb;
  padding:10px 12px; font:14px/1.4 Inter, system-ui, sans-serif;
}
.gchat__input:focus{ outline:none; border-color:#61e8ff; }
.gchat__send{ flex:none; align-self:flex-end; border:0; border-radius:12px; padding:0 14px; height:42px; font:700 14px Inter, system-ui, sans-serif; color:#1a1405; background:#f6cd72; cursor:pointer; }
.gchat__send:disabled{ opacity:.55; cursor:default; }
.gchat__note{ margin:0; padding:0 14px 10px; color:#8b9dc0; font-size:11px; line-height:1.4; }
@media (max-width:520px){
  .gchat{ right:8px; bottom:8px; width:calc(100vw - 16px); height:calc(100dvh - 16px); }
  .gchat-btn span{ display:none; }
  .gchat-btn{ padding:13px; }
}
@media (prefers-reduced-motion:no-preference){
  .gchat{ animation:gchat-in .18s ease-out; }
  @keyframes gchat-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
}