/* =========================================================
   Digi Idle — Digivice Chat / D-COM (complete layout)
   ========================================================= */

.chat-digi-overlay,
.chat-digi{
  --dd-orange:#ff9a2e;
  --dd-orange-2:#ff6b1a;
  --dd-cyan:#4fd6ff;
  --dd-bg:#0a101c;
  --dd-panel:#101828;
  --dd-text:#eaf2ff;
  --dd-muted:#8b9bb3;
  --dd-line:rgba(79,214,255,.22);
  --dd-font:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --dd-display:"Orbitron","Rajdhani",system-ui,sans-serif;
}

/* Fallback até o JS medir a sidebar (unit-hud docked).
   --hud-* = folga total do lado (sidebar e/ou rail da toolbar) — uma única fonte. */
:root{
  --hud-left:0px;
  --hud-right:0px;
}

.chat-overlay.chat-digi-overlay{
  /* À direita da folga esquerda (sidebar/rail já em --hud-left) */
  left:max(
    12px,
    env(safe-area-inset-left, 0px),
    calc(var(--hud-left, 0px) + 12px)
  );
  right:auto;
  bottom:max(14px, calc(var(--bar-bottom, 0px) + 8px), env(safe-area-inset-bottom, 0px));
  width:clamp(280px, 32vw, 480px);
  max-width:calc(
    100vw
    - 24px
    - var(--hud-left, 0px)
    - var(--hud-right, 0px)
    - env(safe-area-inset-left, 0px)
    - env(safe-area-inset-right, 0px)
  );
  /* Mesmo patamar das demais abas (float-win) — pode sobrepor e ser sobreposto */
  z-index:60;
  font-family:var(--dd-font);
}
.chat-overlay.chat-digi-overlay.is-front{
  z-index:95;
}

.chat-overlay.chat-digi-overlay.collapsed{
  width:auto;
  max-width:none;
}

.chat-overlay.chat-digi-overlay.is-sized:not(.collapsed){
  /* Deslocamento aplicado ao redimensionar pelas bordas oeste/norte/sul —
     independente do left/top/bottom controlados pelo React (evita conflito). */
  transform:translate(var(--chat-ox, 0px), var(--chat-oy, 0px));
  width:var(--chat-w, clamp(280px, 32vw, 480px));
  max-width:min(
    var(--chat-w, 480px),
    calc(
      100vw
      - 24px
      - var(--hud-left, 0px)
      - var(--hud-right, 0px)
      - env(safe-area-inset-left, 0px)
      - env(safe-area-inset-right, 0px)
    )
  );
}

/* —— Collapsed toggle (Digivice chip) —— */
.chat-digi-overlay .chat-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 10px;
  border-radius:14px;
  border:1px solid var(--dd-line);
  color:var(--dd-text);
  background:
    linear-gradient(180deg,rgba(255,154,46,.14),transparent 55%),
    linear-gradient(180deg,#152033,var(--dd-bg));
  box-shadow:
    0 0 0 1px rgba(255,154,46,.08) inset,
    0 12px 28px rgba(0,0,0,.5),
    0 0 20px rgba(79,214,255,.1);
  backdrop-filter:blur(12px) saturate(1.2);
  font-family:var(--dd-font);
  transition:border-color .14s, box-shadow .14s, transform .12s;
}
.chat-digi-overlay .chat-toggle:hover{
  border-color:rgba(255,154,46,.45);
  box-shadow:
    0 0 0 1px rgba(255,154,46,.12) inset,
    0 12px 28px rgba(0,0,0,.5),
    0 0 24px rgba(255,154,46,.18);
}
.chat-digi-overlay .chat-toggle-core{
  width:12px;
  height:12px;
  border-radius:50%;
  flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%,#fff6e8 0 22%,var(--dd-orange) 23% 48%,#132033 49% 100%);
  box-shadow:
    0 0 0 2px rgba(79,214,255,.45),
    0 0 10px rgba(255,154,46,.5);
  animation:chatCorePulse 2.6s ease-in-out infinite;
}
@keyframes chatCorePulse{
  0%,100%{box-shadow:0 0 0 2px rgba(79,214,255,.4),0 0 8px rgba(255,154,46,.4)}
  50%{box-shadow:0 0 0 3px rgba(79,214,255,.7),0 0 14px rgba(255,154,46,.7)}
}
.chat-digi-overlay .chat-toggle-meta{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  gap:1px;
}
.chat-digi-overlay .chat-toggle-title{
  font-family:var(--dd-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--dd-orange);
  text-shadow:0 0 10px rgba(255,154,46,.35);
}
.chat-digi-overlay .chat-toggle-sub{
  font-family:var(--dd-display);
  font-size:7px;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--dd-cyan);
}

/* —— Expanded panel —— */
.chat-overlay .chat.chat-digi,
.panel.chat.chat-digi{
  position:relative;
  height:min(380px, 54vh);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:16px !important;
  border:1px solid var(--dd-line) !important;
  background:
    linear-gradient(180deg,rgba(255,154,46,.1),transparent 22%),
    linear-gradient(180deg,#152033 0%,var(--dd-bg) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,154,46,.08) inset,
    0 18px 42px rgba(0,0,0,.55),
    0 0 28px rgba(79,214,255,.08) !important;
  backdrop-filter:blur(14px) saturate(1.25);
  color:var(--dd-text);
  font-family:var(--dd-font);
}
.chat-overlay.chat-digi-overlay.is-sized:not(.collapsed) .chat.chat-digi,
.chat-overlay.chat-digi-overlay.is-sized:not(.collapsed) .panel.chat.chat-digi{
  height:var(--chat-h, min(380px, 54vh));
  min-height:200px;
  max-height:min(var(--chat-h, 720px), calc(var(--vvh, 100dvh) - 24px));
}
.chat-digi:focus{ outline:none; }

/* Head / brand */
.chat-digi .chat-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px 6px;
  flex-shrink:0;
  border-bottom:1px solid rgba(79,214,255,.12);
  background:linear-gradient(90deg,rgba(255,154,46,.08),transparent 55%);
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.chat-digi .chat-head:active{ cursor:grabbing; }
.chat-digi .chat-head .chat-collapse{ cursor:pointer; }
.chat-digi .chat-brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.chat-digi .chat-brand-core{
  width:11px;
  height:11px;
  border-radius:50%;
  flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%,#fff6e8 0 22%,var(--dd-orange) 23% 48%,#132033 49% 100%);
  box-shadow:0 0 0 2px rgba(79,214,255,.4),0 0 10px rgba(255,154,46,.45);
  animation:chatCorePulse 2.6s ease-in-out infinite;
}
.chat-digi .chat-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  gap:1px;
}
.chat-digi .chat-brand-text > span{
  font-family:var(--dd-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--dd-orange);
  text-shadow:0 0 10px rgba(255,154,46,.3);
}
.chat-digi .chat-brand-text > small{
  font-family:var(--dd-display);
  font-size:7px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--dd-cyan);
}

.chat-digi .chat-collapse{
  margin-left:auto;
  width:26px;
  height:24px;
  border-radius:8px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(79,214,255,.2);
  color:var(--dd-muted);
  font-size:12px;
  line-height:1;
  display:grid;
  place-items:center;
  transition:color .12s, background .12s, border-color .12s;
}
.chat-digi .chat-collapse:hover{
  color:var(--dd-text);
  background:rgba(79,214,255,.1);
  border-color:rgba(79,214,255,.4);
}

/* Channel tabs */
.chat-digi .chat-tabs{
  display:flex;
  align-items:center;
  padding:4px 8px 0;
  flex-shrink:0;
  border-bottom:1px solid rgba(79,214,255,.14);
  cursor:grab;
  user-select:none;
  touch-action:none;
  background:rgba(0,0,0,.18);
}
.chat-digi .chat-tabs:active{ cursor:grabbing; }
.chat-digi .chat-tab-list{
  display:flex;
  gap:4px;
  overflow-x:auto;
  flex:1;
  min-width:0;
  scrollbar-width:none;
  padding-bottom:0;
}
.chat-digi .chat-tab-list::-webkit-scrollbar{ display:none; }

.chat-digi .chat-tab{
  position:relative;
  margin:0;
  padding:7px 10px 8px;
  font-family:var(--dd-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dd-muted);
  background:transparent;
  border:1px solid transparent;
  border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  white-space:nowrap;
  transition:color .12s, background .12s, border-color .12s;
}
.chat-digi .chat-tab:hover{
  color:var(--dd-text);
  background:rgba(79,214,255,.06);
}
.chat-digi .chat-tab.on{
  color:var(--dd-orange);
  background:rgba(255,154,46,.1);
  border-color:rgba(255,154,46,.2);
  border-bottom-color:var(--dd-orange);
  text-shadow:0 0 8px rgba(255,154,46,.25);
}

.chat-digi .chat-badge,
.chat-digi-overlay .chat-badge{
  margin-left:6px;
  padding:0 6px;
  font-family:var(--dd-display);
  font-size:9px;
  font-weight:700;
  line-height:15px;
  color:#1a0e05;
  background:linear-gradient(180deg,#ffb35a,var(--dd-orange));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 2px 8px rgba(255,154,46,.35);
}

/* Feed */
.chat-digi .chat-feed{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  background:
    linear-gradient(180deg,rgba(79,214,255,.03),transparent 40%),
    rgba(0,0,0,.42);
}
.chat-digi .chat-feed::-webkit-scrollbar{ width:3px; }
.chat-digi .chat-feed::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:99px;
}
.chat-digi .chat-feed:hover::-webkit-scrollbar-thumb,
.chat-digi .chat-feed.is-scrolling::-webkit-scrollbar-thumb{
  background:rgba(79,214,255,.4);
}

.chat-digi .chat-empty{
  color:var(--dd-muted);
  font-size:12px;
  padding:10px 6px;
  font-style:italic;
  text-align:center;
  letter-spacing:.02em;
}

.chat-digi .chat-row{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-size:12.5px;
  line-height:1.4;
  padding:3px 6px;
  border-radius:6px;
  transition:background .1s;
}
.chat-digi .chat-row:hover{
  background:rgba(79,214,255,.04);
}

.chat-digi .chat-time{
  color:rgba(234,242,255,.32);
  font-size:10px;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  font-family:var(--dd-display);
  letter-spacing:.04em;
}

.chat-digi .chat-author{
  color:var(--dd-orange);
  font-weight:700;
  flex-shrink:0;
  font-family:var(--dd-font);
}
.chat-digi .chat-author-admin{
  color:#ffd27a;
  text-shadow:0 0 8px rgba(255,210,122,.35);
}

.chat-digi .chat-txt{
  color:#c8d4e8;
  word-break:break-word;
  min-width:0;
  flex:1 1 auto;
}

.chat-digi .chat-row.has-reply .chat-txt{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.chat-digi .chat-reply-quote{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:5px;
  max-width:100%;
  margin:0 0 2px;
  padding:3px 7px;
  border-radius:6px;
  border-left:2px solid rgba(79,214,255,.55);
  background:rgba(79,214,255,.08);
  color:rgba(139,155,179,.95) !important;
  font-size:11px;
  line-height:1.3;
  font-style:normal;
  font-weight:500;
}
.chat-digi .chat-reply-label{
  color:var(--dd-cyan) !important;
  font-weight:700;
}
.chat-digi .chat-reply-author{
  color:var(--dd-orange) !important;
  font-weight:700;
}
.chat-digi .chat-reply-snip{
  color:rgba(200,212,232,.78) !important;
  font-style:italic;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:min(100%, 220px);
}

.chat-digi .chat-reply-btn{
  flex-shrink:0;
  align-self:center;
  width:22px;
  height:22px;
  margin-left:2px;
  padding:0;
  border-radius:7px;
  border:1px solid rgba(79,214,255,.2);
  background:rgba(0,0,0,.25);
  color:var(--dd-cyan);
  font-size:12px;
  line-height:1;
  display:grid;
  place-items:center;
  opacity:0;
  cursor:pointer;
  transition:opacity .12s, background .12s, border-color .12s, color .12s;
}
.chat-digi .chat-row:hover .chat-reply-btn,
.chat-digi .chat-row:focus-within .chat-reply-btn{
  opacity:1;
}
.chat-digi .chat-reply-btn:hover{
  background:rgba(79,214,255,.12);
  border-color:rgba(79,214,255,.45);
  color:#eaf2ff;
}
@media (hover:none){
  .chat-digi .chat-reply-btn{ opacity:.75; }
}

.chat-digi .chat-reply-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 0;
  flex-shrink:0;
  border-top:1px solid rgba(79,214,255,.14);
  background:linear-gradient(180deg,rgba(79,214,255,.06),rgba(0,0,0,.2));
}
.chat-digi .chat-reply-bar-meta{
  min-width:0;
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  font-size:11px;
  color:var(--dd-muted);
}
.chat-digi .chat-reply-bar-label{
  font-family:var(--dd-display);
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dd-cyan);
}
.chat-digi .chat-reply-bar-meta b{
  color:var(--dd-orange);
  font-weight:700;
}
.chat-digi .chat-reply-bar-snip{
  color:rgba(200,212,232,.75);
  font-style:italic;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.chat-digi .chat-reply-cancel{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:var(--dd-muted);
  font-size:12px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.chat-digi .chat-reply-cancel:hover{
  color:#ff8a96;
  border-color:rgba(255,93,108,.35);
}

/* Event colors — Digimon palette */
.chat-digi .chat-row.say .chat-txt{ color:#ffe2a8; }
.chat-digi .chat-row.kill .chat-txt{ color:#7dffb0; }
.chat-digi .chat-row.catch .chat-txt{ color:var(--dd-cyan); }
.chat-digi .chat-row.loot .chat-txt{ color:#9dffc0; }
.chat-digi .chat-row.level .chat-txt{
  color:var(--dd-orange);
  font-weight:700;
}
.chat-digi .chat-row.legendaryShiny .chat-txt{
  color:#ffd54f;
  font-weight:700;
  text-shadow:0 0 8px rgba(255,213,79,.55);
}
.chat-digi .chat-row.global .chat-txt{
  color:#ffc56b;
  font-weight:700;
}
.chat-digi .chat-row.trade .chat-txt{ color:#ffb35a; }
.chat-digi .chat-row.help .chat-txt{ color:var(--dd-cyan); }
.chat-digi .chat-row.sysAnnounce .chat-author{ color:#9bb8c9; }
.chat-digi .chat-row.sysAnnounce .chat-txt{
  color:#a9d4bc;
  font-style:italic;
}
.chat-digi .chat-row.sysAnnounce .chat-txt a{
  color:var(--dd-cyan);
  text-decoration:underline;
}
.chat-digi .chat-row.sysAnnounce.beta .chat-author{
  color:#ffc56b;
}
.chat-digi .chat-row.sysAnnounce.beta .chat-txt{
  color:#ffe2a8;
  font-style:normal;
}

/* Input bar */
.chat-digi .chat-input{
  display:flex;
  gap:8px;
  padding:8px 10px;
  flex-shrink:0;
  border-top:1px solid rgba(79,214,255,.14);
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35));
}
.chat-digi .chat-input input{
  flex:1;
  min-width:0;
  padding:8px 12px;
  font-size:13px;
  font-family:var(--dd-font);
  font-weight:500;
  color:var(--dd-text);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(79,214,255,.2);
  border-radius:10px;
  transition:border-color .12s, box-shadow .12s;
}
.chat-digi .chat-input input::placeholder{
  color:rgba(139,155,179,.75);
}
.chat-digi .chat-input input:focus{
  outline:none;
  border-color:rgba(255,154,46,.55);
  box-shadow:0 0 0 2px rgba(255,154,46,.12);
}
.chat-digi .chat-input input:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.chat-digi .chat-input button{
  flex-shrink:0;
  min-width:56px;
  padding:8px 14px;
  font-family:var(--dd-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:#1a0e05;
  background:linear-gradient(180deg,#ffb35a,var(--dd-orange-2));
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(255,107,26,.35);
  transition:filter .12s, transform .1s;
}
.chat-digi .chat-input button:hover:not(:disabled){
  filter:brightness(1.06);
}
.chat-digi .chat-input button:active:not(:disabled){
  transform:translateY(1px);
}
.chat-digi .chat-input button:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
}

.chat-digi .chat-hint{
  flex-shrink:0;
  padding:4px 12px 8px;
  font-size:11px;
  color:var(--dd-muted);
  font-family:var(--dd-font);
  letter-spacing:.02em;
}
.chat-digi .chat-hint.chat-error{
  color:#ff8a96;
}

/* Resize handles — múltiplas bordas + cantos (body-level, sincronizado via JS).
   z-index real é definido via JS a cada sync, sempre 1 acima do painel atual
   (que agora pode subir dinamicamente ao ganhar foco, como as demais abas). */
#chat-resize-handles{
  position:fixed;
  z-index:61;
  pointer-events:none;
}
#chat-resize-handles[hidden]{
  display:none !important;
}

#chat-resize-handles .chat-resize-edge{
  position:absolute;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  pointer-events:auto;
  touch-action:none;
  transition:background .12s;
}
#chat-resize-handles .chat-resize-edge:hover,
#chat-resize-handles .chat-resize-edge.is-dragging{
  background:rgba(79,214,255,.16);
}
#chat-resize-handles .edge-n,
#chat-resize-handles .edge-s{
  left:16px;
  right:16px;
  height:9px;
  cursor:ns-resize;
}
#chat-resize-handles .edge-n{ top:-4px; }
#chat-resize-handles .edge-s{ bottom:-4px; }
#chat-resize-handles .edge-e,
#chat-resize-handles .edge-w{
  top:16px;
  bottom:16px;
  width:9px;
  cursor:ew-resize;
}
#chat-resize-handles .edge-e{ right:-4px; }
#chat-resize-handles .edge-w{ left:-4px; }

#chat-resize-handles .chat-resize-corner{
  position:absolute;
  margin:0;
  padding:0;
  border:none;
  width:18px;
  height:18px;
  pointer-events:auto;
  touch-action:none;
  opacity:.75;
  transition:opacity .12s;
}
#chat-resize-handles .chat-resize-corner:hover,
#chat-resize-handles .chat-resize-corner.is-dragging{
  opacity:1;
}
#chat-resize-handles .edge-se{
  right:-3px;
  bottom:-3px;
  cursor:nwse-resize;
  border-radius:0 0 14px 0;
  background:
    linear-gradient(135deg, transparent 42%, rgba(79,214,255,.35) 43% 52%, transparent 53%),
    linear-gradient(135deg, transparent 58%, rgba(79,214,255,.5) 59% 68%, transparent 69%),
    linear-gradient(135deg, transparent 74%, rgba(255,154,46,.75) 75%);
}
#chat-resize-handles .edge-sw{
  left:-3px;
  bottom:-3px;
  cursor:nesw-resize;
  border-radius:0 0 0 14px;
  background:
    linear-gradient(225deg, transparent 42%, rgba(79,214,255,.35) 43% 52%, transparent 53%),
    linear-gradient(225deg, transparent 58%, rgba(79,214,255,.5) 59% 68%, transparent 69%),
    linear-gradient(225deg, transparent 74%, rgba(255,154,46,.75) 75%);
  opacity:.65;
}
#chat-resize-handles .edge-ne{
  right:-3px;
  top:-3px;
  cursor:nesw-resize;
  opacity:.35;
}
#chat-resize-handles .edge-nw{
  left:-3px;
  top:-3px;
  cursor:nwse-resize;
  opacity:.35;
}

@media (max-width:560px){
  #chat-resize-handles .edge-e,
  #chat-resize-handles .edge-w{ width:14px; }
  #chat-resize-handles .edge-n,
  #chat-resize-handles .edge-s{ height:14px; }
}

/* Responsive */
@media (max-width:720px){
  .chat-overlay.chat-digi-overlay:not(.is-sized){
    width:min(100vw - 16px, 520px);
  }
  .chat-overlay.chat-digi-overlay:not(.is-sized) .chat.chat-digi{
    height:min(320px, 48vh);
  }
  .chat-digi .chat-tab{
    padding:6px 8px 7px;
    font-size:8px;
  }
}
@media (max-width:480px){
  .chat-digi .chat-brand-text > small{ display:none; }
  .chat-digi .chat-input button{ min-width:48px; padding:8px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .chat-digi-overlay .chat-toggle-core,
  .chat-digi .chat-brand-core{
    animation:none;
  }
}