/* Jules — graphite のチャット欄。
   色はブログと同じ：グラファイトの地、ニュートラルなグレー、紫は触れたところだけ。
   パネルは position: fixed で重ねるだけなので、ページのレイアウトは変えない。 */

.jules-open{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-size:.875rem;color:var(--accent);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;
  transition:text-decoration-color .15s}
.jules-open:hover{text-decoration-color:var(--accent)}
.jules-open[hidden]{display:none}

.jules-panel{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:20;
  width:min(380px,calc(100vw - 40px));height:min(560px,calc(100dvh - 40px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.45);font-family:var(--sans);
  animation:jp-in .28s cubic-bezier(.2,.9,.3,1)}
.jules-panel[hidden]{display:none}
@keyframes jp-in{from{opacity:0;transform:translateY(10px)}}
@media (max-width:520px){
  .jules-panel{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));width:auto;height:auto}
}

.jp-head{display:flex;align-items:center;gap:10px;padding:12px 10px 10px 14px;border-bottom:1px solid var(--line)}
.jp-head .jface{width:40px;height:40px;flex:0 0 auto}
.jp-title{flex:1;display:flex;flex-direction:column;line-height:1.4}
.jp-title strong{font-size:.9375rem;font-weight:600;letter-spacing:.02em}
.jp-title span{font-size:.75rem;color:var(--ink2)}
.jp-close{width:36px;height:36px;border:none;border-radius:8px;background:none;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.jp-close:hover{color:var(--accent)}

.jp-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:14px 14px 12px}
.jmsg{max-width:88%;padding:9px 13px;border-radius:12px;font-size:.875rem;line-height:1.85}
.jmsg .jtext{white-space:pre-wrap;word-break:break-word}
.jmsg .jtext strong{font-weight:600;color:#fff}
.jmsg .jtext .jli{display:block;padding-left:1em;text-indent:-1em}
.jmsg .jtext .jquote{display:block;margin:2px 0;padding-left:10px;border-left:2px solid var(--accent);color:var(--ink2)}
.jmsg.bot{align-self:flex-start;background:#2C2C2E;border-bottom-left-radius:4px}
.jmsg.me{align-self:flex-end;background:rgba(203,185,238,.16);border-bottom-right-radius:4px}
.jmsg.wait .jtext{display:inline-flex;gap:5px;padding:6px 2px}
.jmsg.wait i{width:5px;height:5px;border-radius:50%;background:var(--ink2);opacity:.3;animation:jdot 1.2s ease-in-out infinite}
.jmsg.wait i:nth-child(2){animation-delay:.15s}
.jmsg.wait i:nth-child(3){animation-delay:.3s}
@keyframes jdot{40%{opacity:.9;transform:translateY(-2px)}}

.jlinks{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.jlink{font-size:.8125rem;color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-soft);
  text-underline-offset:3px;text-decoration-thickness:1px}
.jlink:hover{text-decoration-color:var(--accent)}

.jp-suggest{display:flex;gap:6px;overflow-x:auto;padding:2px 14px 10px;scrollbar-width:none}
.jp-suggest::-webkit-scrollbar{display:none}
.jp-suggest[hidden]{display:none}
.jchip{flex:0 0 auto;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:none;
  color:var(--ink2);font:inherit;font-size:.75rem;cursor:pointer;transition:color .15s,border-color .15s}
.jchip:hover{color:var(--accent);border-color:var(--accent-soft)}

.jp-input{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 6px 14px;border-top:1px solid var(--line)}
.jp-input textarea{flex:1;max-height:120px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;resize:none;
  outline:none;background:#2C2C2E;color:var(--ink);font:inherit;font-size:16px;line-height:1.5}
.jp-input textarea:focus{border-color:var(--accent-soft)}
.jp-input textarea::placeholder{color:var(--faint)}
.jp-send{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:10px;background:var(--accent);color:var(--bg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.jp-send:disabled{opacity:.3;cursor:default}
.jp-note{margin:0;padding:2px 14px 10px;font-size:.6875rem;text-align:center;color:var(--ink2)}
.jp-note a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .jules-panel{animation:none}
  .jmsg.wait i{animation:none}
}