/* 吉吉 (Jiji) chat — the jin.cr homepage, styled after Meta's Muse:
   off-white / near-black canvas, gray agent bubbles, blue user bubbles,
   22px-radius bubbles and a pill composer. Follows the system color scheme. */

:root{
  --bg:#fcfcfc;
  --glass:rgba(255,255,255,.62);
  --glass-edge:rgba(255,255,255,.75);
  --glass-shadow:0 6px 20px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --text:#111112;
  --text-2:rgba(0,4,9,.59);
  --text-3:rgba(0,7,17,.37);
  --agent:#e9eaeb;
  --fill:#f3f4f5;
  --fill-hover:#e9eaeb;
  --divider:rgba(0,0,0,.06);
  --accent:#0064d4;
  --accent-hover:#0057b8;
  --on-accent:#fff;
  --online:#31a24c;
  --font:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#181819;
    --glass:rgba(48,49,52,.55);
    --glass-edge:rgba(255,255,255,.12);
    --glass-shadow:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
    --text:#fff;
    --text-2:rgba(241,246,255,.6);
    --text-3:rgba(241,246,255,.38);
    --agent:#232425;
    --fill:#28292b;
    --fill-hover:#323435;
    --divider:rgba(255,255,255,.08);
    --accent:#1a7cff;
    --accent-hover:#3a8dff;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.45;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  height:100dvh;overflow:hidden;position:relative;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.col{width:100%;max-width:740px;margin:0 auto;padding:0 20px}

/* ---------- avatar (looping video, round) ---------- */
.ava{display:block;flex:none;border-radius:50%;overflow:hidden;background:#fff;position:relative;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.ava video,.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ava video{opacity:0;transition:opacity .2s}
.ava video.on{opacity:1}
.ava video::-webkit-media-controls,.ava video::-webkit-media-controls-start-playback-button,
.ava video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.ava-sm{width:36px;height:36px}

/* ---------- top bar: iOS 27 Messages / Muse style ----------
   Centered avatar + a liquid-glass name pill floating over the thread;
   messages scroll underneath a soft progressive blur. */
.bar{
  position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 16px 22px;padding-top:max(10px,env(safe-area-inset-top));
}
.bar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--bg) 35%,color-mix(in srgb,var(--bg) 0%,transparent));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);
}
.bar > *{pointer-events:auto}
.bar-ava{position:relative}
.bar-ava .ava{width:48px;height:48px;box-shadow:var(--glass-shadow)}
.bar-ava i{position:absolute;right:0;bottom:7px;z-index:2;width:12px;height:12px;border-radius:50%;
  background:var(--online);box-shadow:0 0 0 2.5px var(--bg)} /* sits above the name pill's overlap */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:var(--glass-shadow),inset 0 0 0 .5px var(--glass-edge),inset 0 1px 0 var(--glass-edge);
}
.bar-name{
  font-weight:600;font-size:13px;line-height:1;letter-spacing:-.01em;
  padding:6px 12px;border-radius:999px;display:flex;align-items:center;
  position:relative;z-index:1;margin-top:-7px; /* tucks just over the avatar's chin */
}
.bar-row{display:flex;justify-content:center}
/* email (left) and language (right) sit in the top corners, level with the avatar */
.bar-btn{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 6px)}
#jiji-mail{left:max(16px,env(safe-area-inset-left))}
#jiji-lang{right:max(16px,env(safe-area-inset-right))}
.bar-btn{
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:-.01em;transition:transform .12s;
}
.bar-btn svg{width:19px;height:19px}
.bar-btn:hover{transform:scale(1.06)}
.bar-btn:active{transform:scale(.94)}

/* ---------- feed ---------- */
.feed{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.feed .col{display:flex;flex-direction:column;min-height:100%;
  padding-top:calc(max(10px,env(safe-area-inset-top)) + 96px);
  padding-bottom:calc(var(--dock-h,150px) + 8px)}

/* suggested questions above the composer: always there, horizontally scrollable */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}
.chips button:disabled{opacity:.45;cursor:default;transform:none}
.chips button{
  flex:none;border:none;background:var(--fill);border-radius:999px;white-space:nowrap;
  padding:8px 15px;font-size:14.5px;font-weight:500;cursor:pointer;transition:background .15s,transform .1s;
  animation:pop .25s ease-out backwards;
}
.chips button:hover{background:var(--fill-hover)}
.chips button:active{transform:scale(.97)}

/* messages: consecutive bubbles from one side group together, like Muse */
.log{display:flex;flex-direction:column}
.log:empty{display:none}
.msg{display:flex;align-items:flex-end;gap:8px;margin-top:12px;animation:pop .22s ease-out}
.msg + .msg.same{margin-top:3px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.msg .bubble{
  max-width:min(76%,520px);padding:9px 14px;border-radius:22px;
  font-size:16px;line-height:1.45;overflow-wrap:anywhere;
}
.msg.agent .bubble{background:var(--agent);color:var(--text)}
.msg.user{justify-content:flex-end}
.msg.user .bubble{background:var(--accent);color:var(--on-accent)}
.msg .bubble p+p{margin-top:.6em}
.msg .bubble strong{font-weight:600}
.msg .bubble a{text-decoration:underline;text-underline-offset:2px}
.msg.agent .bubble a{color:var(--accent)}
.msg .bubble .photo{display:block;width:min(260px,100%);aspect-ratio:1;object-fit:cover;border-radius:16px;margin:4px 0}

/* typing dots */
.dots{display:inline-flex;gap:4px;padding:5px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:blink 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- composer ---------- */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 0 max(12px,env(safe-area-inset-bottom))}
.dock::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 45%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%);
}
.composer{
  display:flex;align-items:center;gap:8px;
  background:var(--glass);border-radius:22px;padding:5px 5px 5px 18px;
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:var(--glass-shadow),inset 0 0 0 .5px var(--glass-edge);
  transition:box-shadow .15s;
}
.composer:focus-within{box-shadow:var(--glass-shadow),inset 0 0 0 1.5px var(--accent)}
.composer input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text);
  font:inherit;font-size:16px;padding:8px 0;
}
.composer input::placeholder{color:var(--text-3)}
.composer button{
  flex:none;width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s,transform .1s;
}
.composer button svg{width:18px;height:18px}
.composer button:hover{background:var(--accent-hover)}
.composer button:active{transform:scale(.94)}
.composer button:disabled{opacity:.3;cursor:default;transform:none;background:var(--accent)}

.note{margin-top:8px;text-align:center;font-size:12px;color:var(--text-3)}
.note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

@media (max-width:560px){
  .col{padding:0 14px}
  .msg .bubble{max-width:82%}
}
@media (prefers-reduced-motion:reduce){
  .msg,.dots i,.chips button{animation:none}
}