:root{
  --gu: #007bff;
  --gu-2: #3da2ff;
  --gu-accent: #0a2347;
  --gu-bg: #f6f8ff;
  --gu-panel: #ffffff;
  --gu-ink: #0e1b2e;
  --gu-muted: #6c7b95;
  --gu-line: #e7edf8;
  --ai-bg: #0f1b2e;
  --ai-ink: #eaf2ff;
  --me-bg: #0b4cbc;
  --me-ink: #ffffff;
  --shadow-1: 0 8px 24px rgba(7, 22, 43, .14);
  --shadow-2: 0 14px 40px rgba(7, 22, 43, .22);
  --r-lg: 16px; --r-md: 12px; --r-sm: 10px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark){
  :root{
    --gu-bg: #0a0f18;
    --gu-panel: #0f1522;
    --gu-ink: #e9f1ff;
    --gu-muted: #9fb2c9;
    --gu-line: 1px solid rgba(255, 255, 255, 0.1);
    --ai-bg: #0f1b2e;
    --ai-ink: #dfeaff;
    --me-bg: #0a58d1;
    --me-ink: #ffffff;
    --shadow-1: 0 10px 28px rgba(0,0,0,.40);
  }
}
:focus-visible{outline:2px solid var(--gu-2); outline-offset:2px}
button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}

/* Mobile-first design */
body { overscroll-behavior: none; touch-action: manipulation; }

/* Launcher */
.gu-launcher{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  width: 60px;
  height: 60px;
}
.gu-fab{
  width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--gu),var(--gu-2));
  box-shadow:var(--shadow-2);
  transform:translateZ(0);
  transition:var(--transition);
  position: relative;
  font-size: 18px;
}
.gu-fab:hover, .gu-fab:active { transform: scale(1.05); box-shadow: 0 16px 40px rgba(7, 22, 43, 0.28); }
.gu-fab::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%; border: 2px solid var(--gu-2); opacity: 0; animation: pulse 2s infinite;
}
@keyframes pulse { 0%{transform:scale(1);opacity:.8} 70%{transform:scale(1.5);opacity:0} 100%{transform:scale(1);opacity:0} }
.gu-badge{
  position:absolute; right:-2px; top:-2px; min-width:20px; height:20px; padding:0 6px;
  display:grid; place-items:center; border-radius:999px;
  background:linear-gradient(135deg, #ff375f, #ff6b8b); color:#fff; font-size:12px; font-weight:600;
  box-shadow:0 6px 14px rgba(255,55,95,.35); z-index:1; animation: bounce 1s infinite alternate;
}
@keyframes bounce { from{transform:translateY(0)} to{transform:translateY(-3px)} }

/* Sheet (default: full screen) */
.gu-sheet{
  position:fixed; left:0; right:0; bottom:0; top:0; width:100%; height:100%;
  background:var(--gu-panel); color:var(--gu-ink); border-radius:0; box-shadow:none; overflow:hidden;
  opacity:0; pointer-events:none; transform:translate3d(0,100%,0);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
  z-index: 10000; display:flex; flex-direction:column;
}
.gu-open{ opacity:1; pointer-events:auto; transform:translate3d(0,0,0); }

/* Top bar */
.gu-top{
  display:flex; align-items:center; gap:12px; padding:16px 14px; color:#fff;
  background:linear-gradient(135deg,var(--gu),var(--gu-2)); box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative; min-height: 60px; flex-shrink:0;
}
.gu-top::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); }
.gu-back,.gu-menu,.gu-x{
  width:40px; height:40px; border-radius:50%; background:#ffffff2b; color:#082045;
  display:grid; place-items:center; transition:var(--transition); font-size: 18px;
}
.gu-back:hover,.gu-menu:hover,.gu-x:hover{background:#ffffff4d;}
.gu-ava{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#00000055,#00000022);
  display:grid; place-items:center; font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,0.1); font-size:16px; }
.gu-names{display:flex;flex-direction:column; flex:1;}
.gu-title{font-weight:800;letter-spacing:0.3px; font-size: 18px;}
.gu-sub{font-size:13px;opacity:.92;display:flex;align-items:center;gap:6px}
.gu-dot{ width:10px;height:10px;border-radius:50%;background:#3ef28c; box-shadow:0 0 0 4px rgba(62,242,140,.18); position: relative; }
.gu-dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid #3ef28c; opacity:.5; animation:pulse 2s infinite; }

/* Welcome */
.gu-welcome{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
  flex:1; padding:20px; overflow-y:auto;
  background-image: radial-gradient(circle at 20% 80%, rgba(59,130,246,0.08) 0%, transparent 40%),
                    radial-gradient(circle at 80% 20%, rgba(37,99,235,0.05) 0%, transparent 40%);
}
.gu-hello{
  font-size:28px; font-weight:900; text-align:center; color:var(--gu-accent);
  background: linear-gradient(135deg, var(--gu), var(--gu-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.05); line-height: 1.3;
}
.gu-card{
  width:100%; margin-top:14px; padding:20px; border-radius:16px; background:var(--gu-panel); border:1px solid var(--gu-line);
  box-shadow:var(--shadow-1); display:flex; align-items:center; justify-content:space-between; transition:var(--transition);
}
.gu-card:hover, .gu-card:active { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7, 22, 43, 0.18); }
.gu-go{ width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--gu),var(--gu-2)); color:#fff;
  transition:var(--transition); display:grid; place-items:center; font-size:18px; }
.gu-go:hover, .gu-go:active { transform: rotate(90deg) scale(1.1); box-shadow: 0 4px 12px rgba(0,123,255,0.3); }

/* Chat */
.gu-chat{ display:none; flex:1; background:var(--gu-bg); position:relative; overflow:hidden; flex-direction: column; }
.gu-chat.active{ display: flex; }
.gu-scroll{
  overflow-y:auto; overflow-x:hidden; padding:16px; display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth; flex:1; -webkit-overflow-scrolling: touch;
  background-image: radial-gradient(circle at 15% 50%, rgba(59,130,246,0.03) 0%, transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(37,99,235,0.02) 0%, transparent 25%);
}
.gu-row{ display:flex; gap:10px; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from {opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.gu-me{justify-content:flex-end}
.gu-bub{
  max-width:85%; padding:14px; border-radius:18px; line-height:1.5; box-shadow:0 4px 12px rgba(0,0,0,.06);
  position: relative; animation: scaleIn 0.2s ease-out; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap;
}
@keyframes scaleIn{ from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.gu-ai .gu-bub{ background:var(--ai-bg); color:var(--ai-ink); border-top-left-radius: 4px; }
.gu-me .gu-bub{ background:var(--me-bg); color:var(--me-ink); border-top-right-radius: 4px; }
.gu-time{ font-size:11px; color:var(--gu-muted); margin-top:8px; text-align: right; }

/* Composer */
.gu-compose{ background:var(--gu-panel); border-top:1px solid var(--gu-line); padding:12px 16px; position: relative; z-index:2; flex-shrink: 0; }
.gu-compose::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--gu-line),transparent); }
.gu-bar{ display:flex; align-items:center; gap:10px; background:#f1f6ff1a; border:1px solid var(--gu-line); border-radius:24px; padding:8px 8px 8px 16px; transition:var(--transition); }
.gu-bar:focus-within{ border-color: var(--gu-2); box-shadow: 0 0 0 2px rgba(61,162,255,0.1); }
.gu-input{ flex:1; border:0; background:transparent; color:inherit; outline:0; font:16px/1.4 inherit; padding:8px 0; min-height:20px; max-height:120px; resize:none; overflow-y:auto; }
.gu-send{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gu),var(--gu-2)); color:#fff; transition:var(--transition); display:grid; place-items:center; font-size:16px; }
.gu-send:hover, .gu-send:active { transform: rotate(90deg) scale(1.05); box-shadow: 0 4px 12px rgba(0,123,255,0.3); }

/* Chips */
.gu-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.gu-chip{
  padding:10px 14px; border-radius:20px; border:1px solid var(--gu-line); background:var(--gu-panel); color:var(--gu-ink); font-size:14px; transition:var(--transition); cursor:pointer; white-space:nowrap;
}
.gu-chip:hover, .gu-chip:active { background: linear-gradient(135deg, var(--gu), var(--gu-2)); color:#fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,123,255,0.2); }

/* Typing indicator */
.gu-typing{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:18px; background: var(--gu-line); color: var(--gu-muted); font-size:13px; margin-top:8px; }
.gu-typing span{ width:6px; height:6px; border-radius:50%; background: var(--gu-muted); display:inline-block; margin:0 2px; animation: typing 1.4s infinite both; }
.gu-typing span:nth-child(2){ animation-delay:.2s } .gu-typing span:nth-child(3){ animation-delay:.4s }
@keyframes typing { from{transform:scale(0)} to{transform:scale(1)} }

/* Reactions disabled */
.gu-reactions, .gu-reaction-selector { display: none; }

/* Scrollbar */
.gu-scroll::-webkit-scrollbar{ width:6px } .gu-scroll::-webkit-scrollbar-track{ background:transparent } .gu-scroll::-webkit-scrollbar-thumb{ background:var(--gu-line); border-radius:3px } .gu-scroll::-webkit-scrollbar-thumb:hover{ background:var(--gu-muted) }

/* Swipe hint bar */
.gu-sheet::before{
  content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:40px; height:5px; background:var(--gu-line); border-radius:3px; opacity:0; transition:opacity .3s ease; z-index:10001;
}
.gu-open.gu-sheet::before{ opacity:1 }

/* --- MOBILE OVERRIDE: Floating right-side vertical tab (centered) --- */
@media (max-width: 480px){
  /* Launcher unchanged */

  /* Reposition the chatbox as a floating panel on the right middle */
  .gu-sheet{
    width: 92vw;                 /* comfortable width on phones */
    max-width: 380px;            /* cap width */
    height: 86vh;                /* tall “vertical tab” */
    top: 50%;                    /* vertical center */
    bottom: auto;
    right: 8px;                  /* hug right side */
    left: auto;
    border-radius: 16px;         /* floating card look */
    box-shadow: var(--shadow-2);
    transform: translateX(110%) translateY(-50%); /* start off-screen to the right */
    opacity: 0;
  }
  .gu-open{
    transform: translateX(0) translateY(-50%);  /* slide in from right, stay centered */
    opacity: 1;
  }
  /* Remove the swipe-down hint bar (not needed for side panel) */
  .gu-open.gu-sheet::before{ opacity: 0; }

  /* Slightly shrink header radius to match card */
  .gu-top{ border-top-left-radius: 16px; border-top-right-radius: 16px; }

  /* Ensure inner bubbles fit slightly narrower in the floating panel */
  .gu-bub{ max-width: 92%; }

  /* Keep inputs comfortable and avoid iOS zoom */
  .gu-input{ font-size:16px; }
}

/* Buttons min size */
button, .gu-chip { min-height: 44px; min-width: 44px; }

/* Scroll-to-bottom button */
.gu-scroll-to-bottom{
  position: absolute; right: 20px; bottom: 80px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gu); color: #fff; display:grid; place-items:center; box-shadow: var(--shadow-1);
  z-index: 10; opacity: 0; transform: translateY(20px); transition: var(--transition); cursor: pointer;
}
.gu-scroll-to-bottom.visible{ opacity:1; transform: translateY(0); }

/* Hints hidden */
.gu-nav-help, .gu-scroll-indicator { display:none; }
.gu-timestamp { font-size: 10px; color: var(--gu-muted); text-align: center; margin: 8px 0; opacity: 0.7; }