/* ================================================
   DiGi Chatbot - CSS Styles (with Admin Features)
   ================================================ */

/* ---- FLOATING BUTTON ---- */
.digi-fab{
  position:fixed; top:80px; right:20px; z-index:9000;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  border:2px solid rgba(59,130,246,.4);
  box-shadow:0 4px 20px rgba(37,99,235,.35), 0 0 0 0 rgba(59,130,246,.4);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .2s,box-shadow .2s;
  animation:digiPulse 2.5s ease-in-out infinite;
  overflow:hidden; padding:0;
}
.digi-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,99,235,.5);}
.digi-fab svg{width:28px;height:28px;max-width:28px;max-height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.digi-fab .digi-badge{
  position:absolute;top:-2px;right:-2px;width:14px;height:14px;
  border-radius:50%;background:#ef4444;border:2px solid #0a0a0b;display:none;
}
.digi-fab.digi-hidden{pointer-events:none;opacity:0;transform:scale(0.5);transition:opacity .25s,transform .25s;}
@keyframes digiPulse{
  0%,100%{box-shadow:0 4px 20px rgba(37,99,235,.35),0 0 0 0 rgba(59,130,246,.3);}
  50%{box-shadow:0 4px 20px rgba(37,99,235,.35),0 0 0 8px rgba(59,130,246,0);}
}

/* ---- CHATBOX ---- */
.digi-chatbox{
  position:fixed; top:80px; right:20px; z-index:9001;
  width:370px; height:540px; max-height:calc(100vh - 100px);
  background:linear-gradient(to bottom right, rgba(9,9,11,0.92), rgba(24,24,27,0.97));
  border:1px solid #3f3f46; border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(59,130,246,.08);
  display:flex; flex-direction:column; overflow:hidden; font-family:inherit;
  opacity:0; transform:translateY(16px) scale(0.95); pointer-events:none;
  transition:opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}
.digi-chatbox.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all;}

/* Header */
.digi-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid #27272a;
  background:rgba(9,9,11,0.6);flex-shrink:0;
}
.digi-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.digi-avatar svg{width:20px;height:20px;max-width:20px;max-height:20px;fill:none;stroke:#fff;stroke-width:1.8;}
.digi-header-info{flex:1;min-width:0;}
.digi-header-name{color:#f4f4f5;font-weight:600;font-size:14px;}
.digi-header-status{color:#22c55e;font-size:11px;display:flex;align-items:center;gap:4px;}
.digi-header-status::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  display:inline-block;animation:digiOnline 1.5s ease infinite;
}
@keyframes digiOnline{0%,100%{opacity:1;}50%{opacity:.4;}}
.digi-close{
  width:30px;height:30px;border-radius:8px;
  background:rgba(63,63,70,.3);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#a1a1aa;transition:background .2s,color .2s;
}
.digi-close:hover{background:rgba(63,63,70,.6);color:#f4f4f5;}

/* ---- ADMIN TABS ---- */
.digi-admin-tabs{
  display:flex;gap:0;border-bottom:1px solid #27272a;
  background:rgba(9,9,11,0.4);flex-shrink:0;
}
.digi-tab{
  flex:1;padding:8px 4px;border:none;background:none;
  color:#71717a;font-size:11px;font-weight:600;
  cursor:pointer;transition:color .2s, border-color .2s;
  border-bottom:2px solid transparent;text-transform:uppercase;
  letter-spacing:.5px;
}
.digi-tab:hover{color:#a1a1aa;}
.digi-tab.active{color:#3b82f6;border-bottom-color:#3b82f6;}

/* Messages area */
.digi-messages{
  flex:1;overflow-y:auto;padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:#27272a transparent;
}
.digi-messages::-webkit-scrollbar{width:4px;}
.digi-messages::-webkit-scrollbar-thumb{background:#27272a;border-radius:4px;}

/* Message bubbles */
.digi-msg{display:flex;gap:8px;max-width:88%;animation:digiMsgIn .3s ease;}
@keyframes digiMsgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.digi-msg.user{align-self:flex-end;flex-direction:row-reverse;}
.digi-msg.digi{align-self:flex-start;}
.digi-msg.admin{align-self:flex-start;}
.digi-msg.system{align-self:center;max-width:100%;}

.digi-msg-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#fff;overflow:hidden;
}
.digi-msg-avatar svg{width:14px;height:14px;max-width:14px;max-height:14px;fill:none;stroke:#fff;stroke-width:1.8;}

.digi-msg-bubble{
  padding:8px 12px;border-radius:12px;
  font-size:13px;line-height:1.5;color:#e4e4e7;
  word-break:break-word;white-space:pre-wrap;
}
.digi-msg.digi .digi-msg-bubble{background:rgba(24,24,27,0.7);border:1px solid #27272a;border-bottom-left-radius:4px;}
.digi-msg.admin .digi-msg-bubble{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-bottom-left-radius:4px;}
.digi-msg.user .digi-msg-bubble{background:rgba(37,99,235,.12);border:1px solid rgba(59,130,246,.25);border-bottom-right-radius:4px;}
.digi-msg-sender{font-size:11px;color:#71717a;margin-bottom:2px;font-weight:500;}
.digi-msg.admin .digi-msg-sender{color:#f59e0b;}
.digi-msg-time{font-size:10px;color:#52525b;margin-top:2px;}
.digi-msg-bubble a{color:#3b82f6;text-decoration:underline;}
.digi-msg-bubble a:hover{color:#60a5fa;}

/* System messages */
.digi-system-msg{
  text-align:center;color:#71717a;font-size:11px;
  background:rgba(63,63,70,.15);border:1px solid #27272a;
  padding:5px 12px;border-radius:8px;margin:2px auto;
}

/* Delete button on messages (admin) */
.digi-msg-delete{
  position:absolute;top:2px;right:2px;
  width:22px;height:22px;border-radius:6px;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
  cursor:pointer;display:none;align-items:center;justify-content:center;
  color:#ef4444;transition:background .15s;
}
.digi-msg:hover .digi-msg-delete{display:flex;}
.digi-msg-delete:hover{background:rgba(239,68,68,.25);}

/* Input area */
.digi-input-area{
  display:flex;gap:8px;padding:10px 14px 14px;
  border-top:1px solid #27272a;background:rgba(9,9,11,0.5);flex-shrink:0;
}
.digi-input{
  flex:1;padding:8px 12px;
  background:rgba(24,24,27,0.6);border:1px solid #27272a;
  border-radius:10px;color:#f4f4f5;font-size:13px;
  outline:none;resize:none;font-family:inherit;
  min-height:38px;max-height:72px;transition:border-color .2s;
}
.digi-input:focus{border-color:#3b82f6;}
.digi-input::placeholder{color:#52525b;}
.digi-send{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  border:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .2s,transform .15s;
}
.digi-send:hover{transform:scale(1.05);}
.digi-send:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.digi-send svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;}

/* Clip (image attach) button */
.digi-clip{
  width:38px;height:38px;border-radius:10px;
  background:rgba(63,63,70,.3);border:1px solid #27272a;
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#a1a1aa;transition:background .2s,color .2s,border-color .2s;
}
.digi-clip:hover{background:rgba(63,63,70,.5);color:#f4f4f5;border-color:#3f3f46;}

/* Image preview */
.digi-img-preview{
  padding:6px 14px;border-top:1px solid #27272a;
  background:rgba(9,9,11,0.4);flex-shrink:0;
}

/* Typing indicator */
.digi-typing{display:flex;gap:4px;align-items:center;padding:4px 8px;}
.digi-typing span{width:5px;height:5px;border-radius:50%;background:#3b82f6;animation:digiTypeDot .8s ease infinite;}
.digi-typing span:nth-child(2){animation-delay:.15s;}
.digi-typing span:nth-child(3){animation-delay:.3s;}
@keyframes digiTypeDot{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.1);}}

/* ---- ADMIN: CONVERSATION LIST ---- */
.digi-conv-item{
  padding:12px 14px;border-bottom:1px solid #1f1f23;
  cursor:pointer;transition:background .15s;
}
.digi-conv-item:hover{background:rgba(59,130,246,.06);}
.digi-conv-item:last-child{border-bottom:none;}
.digi-conv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.digi-conv-item-name{color:#f4f4f5;font-size:13px;font-weight:600;}
.digi-conv-item-time{color:#52525b;font-size:11px;}
.digi-conv-item-preview{color:#a1a1aa;font-size:12px;line-height:1.4;margin-bottom:2px;}
.digi-conv-item-meta{color:#52525b;font-size:10px;}

/* ---- ADMIN: CONVERSATION VIEW HEADER ---- */
.digi-conv-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-bottom:1px solid #27272a;
  background:rgba(9,9,11,0.4);flex-shrink:0;
}
.digi-conv-back{
  width:28px;height:28px;border-radius:8px;border:none;
  background:rgba(63,63,70,.3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#a1a1aa;transition:background .15s;
}
.digi-conv-back:hover{background:rgba(63,63,70,.6);color:#f4f4f5;}
.digi-conv-header-name{flex:1;color:#f4f4f5;font-size:13px;font-weight:600;}
.digi-conv-actions{display:flex;gap:6px;}
.digi-conv-action-btn{
  padding:5px 10px;border-radius:6px;border:none;
  font-size:10px;font-weight:600;cursor:pointer;
  text-transform:uppercase;letter-spacing:.3px;
  transition:opacity .15s;
}
.digi-conv-action-btn:hover{opacity:.85;}
.digi-conv-action-btn.takeover{background:#2563eb;color:#fff;}
.digi-conv-action-btn.release{background:#f59e0b;color:#000;}

/* Conversation messages sub-container */
.digi-conv-msgs{
  flex:1;overflow-y:auto;padding:10px 14px;
  display:flex;flex-direction:column;gap:10px;
}

/* ---- ADMIN: TRAIN VIEW ---- */
.digi-train-view{padding:16px;overflow-y:auto;}
.digi-train-title{color:#f4f4f5;font-size:15px;font-weight:700;margin-bottom:4px;}
.digi-train-desc{color:#a1a1aa;font-size:12px;line-height:1.5;margin-bottom:16px;}
.digi-train-form{display:flex;flex-direction:column;gap:8px;}
.digi-train-label{color:#a1a1aa;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.digi-train-input{
  padding:8px 12px;background:rgba(24,24,27,0.6);
  border:1px solid #27272a;border-radius:8px;
  color:#f4f4f5;font-size:13px;outline:none;
  font-family:inherit;transition:border-color .2s;
}
.digi-train-input:focus{border-color:#3b82f6;}
.digi-train-input::placeholder{color:#52525b;}
.digi-train-btn{
  margin-top:4px;padding:10px;border:none;border-radius:8px;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;font-size:13px;font-weight:600;cursor:pointer;
  transition:opacity .15s;
}
.digi-train-btn:hover{opacity:.85;}
.digi-train-tip{
  margin-top:16px;padding:10px 12px;border-radius:8px;
  background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);
  color:#71717a;font-size:11px;line-height:1.5;
}
.digi-train-tip code{
  display:inline-block;padding:2px 6px;margin-top:4px;
  background:rgba(24,24,27,0.6);border:1px solid #27272a;
  border-radius:4px;color:#e4e4e7;font-size:11px;font-family:monospace;
}

/* ---- RESPONSIVE ---- */
@media(max-width:480px){
  .digi-chatbox{
    width:calc(100vw - 24px);height:calc(100vh - 120px);
    max-height:calc(100vh - 120px);top:80px;right:12px;
  }
  .digi-fab{top:80px;right:16px;width:48px;height:48px;}
  .digi-fab svg{width:24px;height:24px;}
}