.opponent-thinking {
  position:fixed;z-index:140;left:50%;top:50%;transform:translate(-50%,-50%);
  width:280px;max-width:calc(100vw - 32px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:8px 16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);box-shadow:0 8px 32px #20201e26;
  font-family:var(--font-ui);pointer-events:none;
}
.opponent-thinking[hidden] { display:none!important }
.thinking-copy strong { font-size:17px;font-weight:600;line-height:1.5 }
.thinking-copy p { margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--text-soft) }
.thinking-dots { display:flex;gap:4px }
.thinking-dots i { width:5px;height:5px;border-radius:50%;background:var(--primary);animation:thinking-breathe 1.4s ease-in-out infinite }
.thinking-dots i:nth-child(2) { animation-delay:.18s }.thinking-dots i:nth-child(3) { animation-delay:.36s }
.thinking-clock { font-size:12px;color:var(--text-soft);font-variant-numeric:tabular-nums }
.opponent-thinking .thinking-toggle { grid-column:2;min-height:28px;padding:3px 6px;border:0;background:transparent;color:var(--text-soft);font-size:12px;font-weight:400;pointer-events:auto }
.opponent-thinking.is-collapsed { width:auto;min-width:200px;padding:9px 12px;gap:6px 12px }
.opponent-thinking.is-collapsed .thinking-copy strong { font-size:13px }
.opponent-thinking.is-collapsed .thinking-copy p,.opponent-thinking.is-collapsed .thinking-clock,.opponent-thinking.is-collapsed .thinking-dots { display:none }
.opponent-thinking.is-collapsed .thinking-toggle { grid-row:1 }
.opponent-thinking.is-disconnected .thinking-dots { visibility:hidden }
@keyframes thinking-breathe { 0%,80%,100% { opacity:.25;transform:translateY(0) } 40% { opacity:1;transform:translateY(-3px) } }
@media(max-width:900px),(max-width:1180px) and (max-height:600px) {
  .opponent-thinking { width:252px;padding:12px 14px;gap:6px 12px;border-radius:9px }
  .thinking-copy strong { font-size:16px }
  .opponent-thinking .thinking-toggle { min-height:36px;padding:5px 6px }
}
@media(max-height:500px) and (orientation:landscape) {
  .opponent-thinking { top:45%;padding:10px 14px }
}
@media(prefers-reduced-motion:reduce) { .thinking-dots i { animation:none;opacity:.6 } }