/* /assets/jobtl-gemini-live-direct.css — v19 */
.jobtl-live-direct-widget{
  position:fixed;
  right:18px;
  bottom:92px;
  z-index:99998;
  font-family:Arial,"Segoe UI",sans-serif;
}

.jobtl-live-direct-open{
  width:62px;
  height:62px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#111114,#e22424);
  color:#fff;
  font-size:27px;
  cursor:pointer;
  box-shadow:0 18px 38px rgba(17,17,20,.26),0 10px 22px rgba(226,36,36,.18);
  
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
}
.jobtl-live-direct-open{
  animation: none;
}

.jobtl-live-direct-open:hover{
  animation: jobtlBtnWave 1.2s ease-out infinite;
}

@keyframes jobtlBtnWave{
  0%{
    box-shadow:
      0 0 0 0 rgba(226, 36, 36, .55),
      0 0 0 0 rgba(226, 36, 36, .35);
  }

  70%{
    box-shadow:
      0 0 0 12px rgba(226, 36, 36, 0),
      0 0 0 22px rgba(226, 36, 36, 0);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(226, 36, 36, 0),
      0 0 0 0 rgba(226, 36, 36, 0);
  }
}
.jobtl-live-direct-panel{
  width:min(410px,calc(100vw - 24px));
  height:min(650px,calc(100vh - 36px));
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(226,36,36,.14);
  box-shadow:0 24px 70px rgba(17,17,20,.28),0 10px 30px rgba(226,36,36,.16);
}

.jobtl-live-direct-header{
  background:linear-gradient(135deg,#111114,#e22424);
  color:#fff;
  padding:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.jobtl-live-direct-header strong{
  display:block;
  font-size:15px;
  font-weight:900;
}

.jobtl-live-direct-header span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.78);
  font-size:12px;
}

.jobtl-live-direct-close{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  font-weight:900;
}

.jobtl-live-direct-messages{
  flex:1;
  overflow:auto;
  padding:16px;
  background:#f8f4f3;
}

.jobtl-live-direct-msg{
  max-width:84%;
  margin:0 0 11px;
  padding:12px 14px;
  border-radius:18px;
  line-height:1.45;
  font-size:14px;
  white-space:pre-wrap;
  word-break:break-word;
}

.jobtl-live-direct-msg.bot{
  background:#fff;
  color:#111114;
  border-bottom-left-radius:6px;
  border:1px solid rgba(226,36,36,.08);
  box-shadow:0 7px 18px rgba(17,17,20,.06);
}

.jobtl-live-direct-msg.user{
  margin-left:auto;
  background:linear-gradient(135deg,#e22424,#111114);
  color:#fff;
  border-bottom-right-radius:6px;
}

.jobtl-live-direct-link{
  color:#e22424;
  font-weight:900;
  text-decoration:underline;
  word-break:break-all;
}

.jobtl-live-direct-msg.user .jobtl-live-direct-link{
  color:#fff;
}

.jobtl-live-direct-caption{
  min-height:24px;
  padding:6px 13px;
  color:#6f6464;
  font-size:12px;
  text-align:center;
  background:#fff;
  border-top:1px solid #ead7d7;
}

.jobtl-live-direct-redirect{
  padding:10px 13px;
  background:#fff0f0;
  border-top:1px solid #ead7d7;
  color:#111114;
  font-size:13px;
  font-weight:800;
}

.jobtl-live-direct-redirect-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.jobtl-live-direct-redirect-actions button{
  flex:1;
  border:none;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  font-weight:900;
}

.jobtl-live-direct-redirect-actions [data-yes]{
  background:#e22424;
  color:#fff;
}

.jobtl-live-direct-redirect-actions [data-no]{
  background:#fff;
  color:#111114;
  border:1px solid #ead7d7;
}

.jobtl-live-direct-controls{
  padding:12px;
  display:grid;
  grid-template-columns:1fr 46px;
  gap:8px;
  background:#fff;
  border-top:1px solid #ead7d7;
}

.jobtl-live-direct-mic{
  grid-column:1 / -1;
  border:none;
  border-radius:16px;
  padding:14px;
  background:linear-gradient(135deg,#e22424,#111114);
  color:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:15px;
}

.jobtl-live-direct-mic.recording{
  background:#e22424;
  animation:jobtlLiveDirectPulse 1s infinite;
}

.jobtl-live-direct-controls textarea{
  min-height:46px;
  max-height:120px;
  resize:none;
  border:1px solid #ead7d7;
  border-radius:18px;
  padding:13px 14px;
  outline:none;
  font-size:14px;
  font-family:inherit;
}

.jobtl-live-direct-send{
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:#111114;
  color:#fff;
  font-weight:900;
}

@keyframes jobtlLiveDirectPulse{
  0%{box-shadow:0 0 0 0 rgba(226,36,36,.45)}
  70%{box-shadow:0 0 0 13px rgba(226,36,36,0)}
  100%{box-shadow:0 0 0 0 rgba(226,36,36,0)}
}

@media (max-width:600px){
  .jobtl-live-direct-widget{
    right:12px;
  }
  .jobtl-live-direct-panel{
    width:calc(100vw - 24px);
    height:calc(85vh - 24px);
  }
}

/* =========================================================
   JOB.TL — REALISTIC ANIMATED AI LAUNCHER
   Visual-only override. Existing assistant functionality unchanged.
========================================================= */

.jobtl-live-direct-widget{
  right:18px;
  bottom:92px;
  overflow:visible;
}

.jobtl-live-direct-open{
  position:relative;
  width:96px;
  height:96px;
  min-width:96px;
  min-height:96px;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:inherit;
  line-height:1;
  isolation:isolate;
  animation:none;
  -webkit-tap-highlight-color:transparent;
}

.jobtl-live-direct-open:hover{
  animation:none;
}

/* Realistic portrait launcher */
.jobtl-ai-launcher-avatar-wrap{
  position:relative;
  z-index:4;
  display:block;
  width:88px;
  height:88px;
  border-radius:50%;
  background:#111114;
  border:2px solid rgba(255,255,255,.96);
  box-shadow:
    0 18px 42px rgba(17,17,20,.28),
    0 8px 22px rgba(226,36,36,.22),
    0 0 0 5px rgba(226,36,36,.10);
  transform:translateZ(0);
  transition:transform .28s ease, box-shadow .28s ease;
  animation:jobtlAiAvatarBreath 4.8s ease-in-out infinite;
}

.jobtl-ai-launcher-avatar{
  position:absolute;
  inset:5px;
  border-radius:50%;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(0,0,0,0) 64%,rgba(0,0,0,.14) 100%),
    url('/assets/jobtl-ai-woman-avatar.png') center center/cover no-repeat,
    #111114;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -10px 20px rgba(0,0,0,.14);
  transform:scale(1.015) translate3d(0,0,0);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  animation:jobtlAiPortraitAlive 7.8s ease-in-out infinite;
}

.jobtl-ai-launcher-avatar-wrap::before{
  content:"";
  position:absolute;
  inset:2px;
  z-index:2;
  border-radius:50%;
  border:2px solid rgba(226,36,36,.78);
  box-shadow:
    inset 0 0 16px rgba(226,36,36,.24),
    0 0 18px rgba(226,36,36,.18);
  pointer-events:none;
}

.jobtl-ai-launcher-shine{
  position:absolute;
  z-index:3;
  inset:6px;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
}

.jobtl-ai-launcher-shine::before{
  content:"";
  position:absolute;
  top:-25%;
  left:-62%;
  width:40%;
  height:150%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  animation:jobtlAiShine 7.8s ease-in-out infinite;
}

/* Attention rings */
.jobtl-ai-launcher-pulse{
  position:absolute;
  inset:-7px;
  z-index:-1;
  border-radius:50%;
  border:2px solid rgba(226,36,36,.58);
  opacity:0;
  pointer-events:none;
  animation:jobtlAiPulseRing 4.4s ease-out infinite;
}

.jobtl-ai-launcher-pulse.pulse-two{
  inset:-12px;
  border-color:rgba(226,36,36,.26);
  animation-delay:.48s;
}

/* Professional AI badge */
.jobtl-ai-launcher-badge{
  position:absolute;
  z-index:7;
  top:-5px;
  right:-7px;
  width:31px;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:3px solid #fff;
  background:linear-gradient(145deg,#ff3434 0%,#e22424 54%,#b81717 100%);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(226,36,36,.32),0 3px 8px rgba(17,17,20,.16);
  animation:jobtlAiBadgeAttention 5.4s ease-in-out infinite;
}

/* Speech bubble — deliberately wide enough for Georgian copy */
.jobtl-ai-launcher-bubble{
  position:absolute;
  z-index:3;
  right:83px;
  top:50%;
  width:max-content;
  min-width:0;
  max-width:min(380px,calc(100vw - 120px));
  min-height:54px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  padding:12px 20px 12px 18px;
  border:1px solid rgba(226,36,36,.26);
  border-radius:21px;
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 34px rgba(17,17,20,.12),0 6px 16px rgba(226,36,36,.08);
  color:#111114;
  transform:translate3d(12px,-50%,0) scale(.98);
  transform-origin:right center;
  opacity:0;
  pointer-events:none;
  overflow:visible;
  animation:jobtlAiBubbleCycle 9.6s cubic-bezier(.2,.8,.2,1) infinite;
}

.jobtl-ai-launcher-bubble::after{
  content:"";
  position:absolute;
  right:-7px;
  top:50%;
  width:14px;
  height:14px;
  background:#fff;
  border-top:1px solid rgba(226,36,36,.26);
  border-right:1px solid rgba(226,36,36,.26);
  transform:translateY(-50%) rotate(45deg);
}

.jobtl-ai-launcher-dot{
  position:relative;
  z-index:2;
  flex:0 0 9px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e22424;
  box-shadow:0 0 0 6px rgba(226,36,36,.09);
  animation:jobtlAiDot 1.8s ease-in-out infinite;
}

.jobtl-ai-launcher-text{
  position:relative;
  z-index:2;
  display:block;
  min-width:0;
  max-width:100%;
  color:#111114;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:15px;
  font-weight:800;
  line-height:1.28;
  letter-spacing:0;
  text-align:left;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

.jobtl-ai-launcher-swap .jobtl-ai-launcher-text{
  animation:jobtlAiTextSwap .38s ease both;
}

/* Hover: more obvious, but still premium */
.jobtl-live-direct-open:hover .jobtl-ai-launcher-avatar-wrap{
  transform:translateY(-3px) scale(1.055);
  box-shadow:
    0 22px 48px rgba(17,17,20,.30),
    0 10px 26px rgba(226,36,36,.27),
    0 0 0 7px rgba(226,36,36,.13);
}

.jobtl-live-direct-open:hover .jobtl-ai-launcher-avatar{
  transform:scale(1.055) translate3d(-1px,-1px,0);
}

.jobtl-live-direct-open:hover .jobtl-ai-launcher-bubble{
  opacity:1;
  transform:translate3d(0,-50%,0) scale(1);
  animation:none;
}

/* periodic subtle “look at me” movement */
@keyframes jobtlAiAvatarBreath{
  0%,68%,100%{transform:translateY(0) scale(1)}
  73%{transform:translateY(-3px) scale(1.022)}
  78%{transform:translateY(-1px) scale(1.012)}
  83%{transform:translateY(-3px) scale(1.024)}
  88%{transform:translateY(0) scale(1)}
}

@keyframes jobtlAiPortraitAlive{
  0%,58%,100%{transform:scale(1.015) translate3d(0,0,0)}
  64%{transform:scale(1.045) translate3d(-1px,-1px,0)}
  72%{transform:scale(1.035) translate3d(1px,0,0)}
  80%{transform:scale(1.02) translate3d(0,0,0)}
}

@keyframes jobtlAiPulseRing{
  0%,55%{opacity:0;transform:scale(.94)}
  61%{opacity:.64;transform:scale(.98)}
  82%{opacity:0;transform:scale(1.30)}
  100%{opacity:0;transform:scale(1.30)}
}

@keyframes jobtlAiBadgeAttention{
  0%,62%,100%{transform:translateY(0) scale(1)}
  68%{transform:translateY(-3px) scale(1.06)}
  75%{transform:translateY(0) scale(1)}
  82%{transform:translateY(-2px) scale(1.04)}
  88%{transform:translateY(0) scale(1)}
}

@keyframes jobtlAiShine{
  0%,64%{left:-62%;opacity:0}
  68%{opacity:.9}
  79%{left:125%;opacity:.1}
  100%{left:125%;opacity:0}
}

@keyframes jobtlAiBubbleCycle{
  0%,9%{opacity:0;transform:translate3d(12px,-50%,0) scale(.98)}
  14%,43%{opacity:1;transform:translate3d(0,-50%,0) scale(1)}
  49%,100%{opacity:0;transform:translate3d(7px,-50%,0) scale(.985)}
}

@keyframes jobtlAiDot{
  0%,100%{transform:scale(1);box-shadow:0 0 0 6px rgba(226,36,36,.08)}
  50%{transform:scale(1.16);box-shadow:0 0 0 9px rgba(226,36,36,.02)}
}

@keyframes jobtlAiTextSwap{
  0%{opacity:0;transform:translateX(5px)}
  100%{opacity:1;transform:translateX(0)}
}

/* Existing panel remains untouched; only launcher dimensions/placement adapt. */
@media (max-width:768px){
  .jobtl-live-direct-widget{
    right:12px;
    bottom:calc(92px + env(safe-area-inset-bottom));
  }

  .jobtl-live-direct-open{
    width:82px;
    height:82px;
    min-width:82px;
    min-height:82px;
  }

  .jobtl-ai-launcher-avatar-wrap{
    width:76px;
    height:76px;
  }

  .jobtl-ai-launcher-badge{
    top:-4px;
    right:-5px;
    width:27px;
    height:27px;
    font-size:10px;
    border-width:3px;
  }

  .jobtl-ai-launcher-bubble{
    right:70px;
    width:max-content;
    min-width:0;
    max-width:calc(100vw - 100px);
    min-height:48px;
    padding:10px 16px 10px 15px;
    gap:9px;
    border-radius:18px;
  }

  .jobtl-ai-launcher-text{
    font-size:13.5px;
    line-height:1.22;
  }

  .jobtl-ai-launcher-dot{
    flex-basis:8px;
    width:8px;
    height:8px;
  }
}

@media (max-width:390px){
  .jobtl-ai-launcher-bubble{
    right:67px;
    width:max-content;
    min-width:0;
    max-width:calc(100vw - 92px);
    min-height:48px;
    padding:9px 13px 9px 13px;
    gap:8px;
  }

  .jobtl-ai-launcher-text{
    font-size:12.5px;
    white-space:normal;
    line-height:1.18;
  }
}

@media (prefers-reduced-motion:reduce){
  .jobtl-ai-launcher-avatar-wrap,
  .jobtl-ai-launcher-avatar,
  .jobtl-ai-launcher-pulse,
  .jobtl-ai-launcher-shine::before,
  .jobtl-ai-launcher-badge,
  .jobtl-ai-launcher-bubble,
  .jobtl-ai-launcher-dot,
  .jobtl-ai-launcher-text{
    animation:none !important;
  }

  .jobtl-ai-launcher-bubble{
    opacity:1;
    transform:translate3d(0,-50%,0) scale(1);
  }
}


/* =========================================================
   JOB.TL AI ASSISTANT — HEADER IDENTITY + ONLINE STATUS
   Visual-only addition. No assistant functionality changed.
========================================================= */

.jobtl-live-direct-header-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}

.jobtl-live-direct-header-avatar{
  position:relative;
  flex:0 0 42px;
  width:42px;
  height:42px;
  margin:0 !important;
  border-radius:50%;
  background:
    url('/assets/jobtl-ai-woman-avatar.png') center center/cover no-repeat,
    #111114;
  border:2px solid rgba(255,255,255,.90);
  box-shadow:
    0 6px 16px rgba(0,0,0,.22),
    0 0 0 3px rgba(255,255,255,.08);
  overflow:visible;
}

.jobtl-live-direct-header-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
}

.jobtl-live-direct-header-copy strong{
  display:block;
  margin:0;
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:.05px;
  white-space:nowrap;
}

.jobtl-live-direct-online{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  width:auto;
  margin:0 !important;
  color:rgba(255,255,255,.82) !important;
  font-size:11px !important;
  font-weight:700;
  line-height:1 !important;
}

.jobtl-live-direct-online i{
  position:relative;
  display:block;
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#43d17a;
  box-shadow:0 0 0 3px rgba(67,209,122,.16);
}

.jobtl-live-direct-online i::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(67,209,122,.48);
  border-radius:50%;
  animation:jobtlHeaderOnlinePulse 2.2s ease-out infinite;
}

@keyframes jobtlHeaderOnlinePulse{
  0%{
    opacity:.75;
    transform:scale(.65);
  }
  70%{
    opacity:0;
    transform:scale(1.55);
  }
  100%{
    opacity:0;
    transform:scale(1.55);
  }
}

@media (max-width:600px){
  .jobtl-live-direct-header-avatar{
    flex-basis:38px;
    width:38px;
    height:38px;
  }

  .jobtl-live-direct-header-copy strong{
    font-size:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .jobtl-live-direct-online i::after{
    animation:none !important;
  }
}

/* =========================================================
   JOB.TL AI CHAT — SOFT OPEN / CLOSE MOTION
   Motion-only enhancement. Existing chat design is unchanged.
========================================================= */

.jobtl-live-direct-panel{
  transform-origin:bottom right;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.jobtl-live-direct-panel.jobtl-chat-entering{
  animation:jobtlChatSoftOpen .46s cubic-bezier(.22,.86,.28,1) both;
  will-change:transform,opacity,filter;
}

.jobtl-live-direct-panel.jobtl-chat-closing{
  animation:jobtlChatSoftClose .30s cubic-bezier(.4,0,.2,1) both;
  will-change:transform,opacity,filter;
  pointer-events:none;
}

@keyframes jobtlChatSoftOpen{
  0%{
    opacity:0;
    transform:translate3d(14px,18px,0) scale(.925);
    filter:blur(4px);
  }
  58%{
    opacity:1;
    transform:translate3d(-1px,-2px,0) scale(1.012);
    filter:blur(0);
  }
  78%{
    transform:translate3d(0,0,0) scale(.997);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

@keyframes jobtlChatSoftClose{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
  30%{
    opacity:1;
    transform:translate3d(1px,2px,0) scale(.992);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translate3d(13px,16px,0) scale(.91);
    filter:blur(3px);
  }
}

@media (max-width:600px){
  .jobtl-live-direct-panel{
    transform-origin:bottom right;
  }
}

@media (prefers-reduced-motion:reduce){
  .jobtl-live-direct-panel.jobtl-chat-entering,
  .jobtl-live-direct-panel.jobtl-chat-closing{
    animation-duration:.01ms !important;
    filter:none !important;
  }
}