/* droguia-widget/widget-droguia.css */

#chat-widget {
    /* --- Variables de Color ESPECÍFICAS para el Widget --- */
    --brand-pink: #FF40B4;
    --brand-cyan: #00F0FF;
    --brand-cyan-light: #A7F5FF; /* Color de burbuja AI */
    --brand-green: #2ECC71;
    --brand-green-hover: #27AE60;
    --brand-green-border: rgba(46, 204, 113, 0.7);
    --brand-green-bg-light: rgba(46, 204, 113, 0.15);
    --brand-green-bg-light-hover: rgba(46, 204, 113, 0.3);
    --text-light: #e0e0e0;
    --text-medium: #bdbdbd;
    --text-dark: #121212; /* Color texto en burbujas AI/User */
    --bg-dark-1: #121212;
    --bg-dark-2: #1f1f1f;
    --bg-dark-3: #1a1a1a;
    --bg-dark-4: #2a2a2a;
    --bg-dark-4-hover: #333;
    --border-dark: #333;
    --border-dark-light: #444;

    font-family: 'Poppins', sans-serif;
    color: var(--text-medium);
    line-height: 1.7;
}


/* --- ESTILOS WIDGET --- */
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
@keyframes levitate { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { translateY(0px); } }
@keyframes spin-border { 100% { transform: rotate(360deg); } }

#chat-widget *{box-sizing:border-box;}
#chat-widget{position:fixed;bottom:20px;right:20px;z-index:10000}

#chat-widget .chat-bubble {
  background-color: #000; color: var(--brand-pink); width: 60px; height: 60px;
  border-radius: 50%; display: flex; justify-content: center; align-items: center;
  cursor: pointer; border: 2px solid var(--brand-pink);
  position: relative;
  font-size: 24px; overflow: visible;
  z-index: 2;
}
#chat-widget .chat-bubble::before {
  content: ''; position: absolute; width: calc(100% + 8px); height: calc(100% + 8px);
  top: -4px; left: -4px; z-index: 0; border-radius: 50%;
  background: conic-gradient( from 0deg, transparent 0%, transparent 60%, var(--brand-green) 90%, var(--brand-green-hover) 95%, var(--brand-green) 100% );
  animation: spin-border 2.5s linear infinite; transition: opacity 0.3s ease;
}
#chat-widget .chat-bubble span { position: relative; z-index: 1; }

#chat-widget .idle-message {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .9);
    color: var(--brand-cyan);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    border: 1px solid var(--brand-cyan);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
#chat-widget .idle-message.visible {
    opacity: 1;
}
#chat-widget .idle-message::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 7px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 0, 0, .9);
}

#chat-widget .chat-window{
  width:772px; height:434px; background:#000; border:2px solid var(--brand-cyan);
  border-radius:8px; position:absolute; bottom:0; right:0; display:none;
  flex-direction:row; box-shadow:0 0 15px rgba(0,240,255,.4); overflow:hidden;
  font-family:'Poppins',sans-serif; transition: height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  z-index: 1;
}
#chat-widget .chat-window.minimized { height: 48px; opacity: 0.95; box-shadow: 0 0 8px rgba(0, 240, 255, 0.3); }
#chat-widget .chat-window.minimized .chat-image-container,
#chat-widget .chat-window.minimized .chat-messages,
#chat-widget .chat-window.minimized .chat-input-area { display: none; }
#chat-widget .chat-window.minimized .chat-content-container { height: 100%; }

#chat-widget .chat-image-container{width:280px;height:100%;position:relative;overflow:hidden;background-color:#000;border-right:2px solid var(--brand-cyan); display: block;}
#chat-widget .chat-image-container.is-levitating { animation: levitate 3.5s ease-in-out infinite alternate; }
#chat-widget .mood-image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: opacity 0.15s ease-in-out; background-color: transparent; }
#chat-widget #mood-image-a { opacity: 1; z-index: 2; }
#chat-widget #mood-image-b { opacity: 0; z-index: 1; }
#chat-widget #ping-indicator{position:absolute;top:8px;right:8px;font-family:'Poppins',sans-serif;font-size:9px;color:var(--brand-cyan);letter-spacing:.5px;z-index:10;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:2px}
#chat-widget .chat-content-container{flex:1;height:100%;display:flex;flex-direction:column;background:#000}

#chat-widget .chat-header{background:#000;padding:8px 15px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--brand-cyan);flex-shrink:0;position:relative;z-index:3; height: 48px;}
#chat-widget .chat-header-left{display:flex;align-items:center;gap:10px}
#chat-widget .chat-icon{width:32px;height:32px;flex-shrink:0}
#chat-widget .chat-title-container{display:flex;flex-direction:column; align-items: flex-start;}
#chat-widget .chat-title{font-family:'Inter',sans-serif;color:var(--brand-cyan);font-size:22px;font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:.5px; display: inline-block; }
#chat-widget .terms-link-widget { color: var(--brand-green); font-size: 10px; margin-left: 0px; margin-top: 3px; text-decoration: none; font-weight: bold; vertical-align: text-top; transition: color 0.2s ease, text-shadow 0.2s ease; cursor: pointer; }
#chat-widget .terms-link-widget:hover { color: var(--brand-green-hover); text-shadow: 0 0 4px rgba(46, 204, 113, 0.6); }
#chat-widget .chat-header-right{display:flex;align-items:center; gap: 8px;}
#chat-widget .minimize-chat { background: transparent; border: none; color: var(--brand-cyan); font-size: 22px; font-weight: bold; cursor: pointer; padding: 0 5px; line-height: 20px; transition: color 0.2s ease, transform 0.2s ease; }
#chat-widget .minimize-chat:hover { color: var(--brand-pink); transform: scale(1.1); }
#chat-widget .info-icon-widget { background: transparent; border: none; color: var(--brand-green); font-size: 20px; font-weight: bold; cursor: pointer; padding: 0 5px; line-height: 20px; transition: color 0.2s ease, text-shadow 0.2s ease; }
#chat-widget .info-icon-widget:hover { color: var(--brand-green-hover); text-shadow: 0 0 4px rgba(46, 204, 113, 0.6); }
#chat-widget .close-chat{background:var(--brand-cyan);border:none;color:#000;font-size:18px;font-weight:bold;cursor:pointer;width:22px;height:22px;line-height:20px;text-align:center;border-radius:3px;padding:0;transition:background-color .2s ease}
#chat-widget .close-chat:hover{background-color:var(--brand-pink);color:#000}

#chat-widget .chat-messages{flex:1;padding:15px;overflow-y:auto;color:#fff;display:flex;flex-direction:column;gap:12px;position:relative;z-index:3; background-color: transparent;}
#chat-widget .chat-messages::-webkit-scrollbar{width:8px;background-color:#111}
#chat-widget .chat-messages::-webkit-scrollbar-thumb{background-color:var(--brand-cyan);border-radius:4px}
#chat-widget .chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--brand-pink)}

#chat-widget .chat-message{padding:10px 14px;border-radius:6px;max-width:80%;word-wrap:break-word;font-size:13px;line-height:1.5;font-family:'Poppins',sans-serif;font-weight:500;color:#000;position:relative;border:1px solid #000}
#chat-widget .chat-message.welcome{
    background-color: transparent !important; color: var(--brand-cyan) !important;
    max-width: 100%; padding: 5px 0 10px 0; font-size: 14px; font-weight: 500;
    border: none !important; text-align: left; border-radius: 0; margin-right: 0;
    align-self: stretch;
}
#chat-widget .chat-message.user{background:var(--brand-pink);align-self:flex-end;margin-left:auto; color: #fff;}
#chat-widget .chat-message.ai{background:var(--brand-cyan-light);align-self:flex-start;margin-right:auto; color: var(--text-dark);}
#chat-widget .chat-message.ai.typing-indicator,
#chat-widget .chat-message.ai.waiting-indicator { background:#333;color:var(--brand-cyan);font-style:italic;font-size:11px;padding:6px 12px;border:none; align-self:flex-start; margin-right: auto; }
#chat-widget .chat-message.ai.connecting {}


#chat-widget .chat-buttons-container { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 5px 0; align-items: flex-start; margin-top: 5px; justify-content: flex-start; }
#chat-widget .chat-interaction-btn { background-color: rgba(0, 240, 255, 0.15); color: var(--brand-cyan); border: 1px solid rgba(0, 240, 255, 0.6); padding: 8px 15px; border-radius: 18px; cursor: pointer; font-size: 12px; font-family: 'Poppins', sans-serif; font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s; display: inline-block; max-width: fit-content; text-align: center; line-height: 1.4; white-space: nowrap; }
#chat-widget .chat-interaction-btn:hover { background-color: rgba(0, 240, 255, 0.35); border-color: var(--brand-cyan); color: #fff; transform: translateY(-1px); }
#chat-widget .chat-interaction-btn:active { transform: translateY(0px); }
#chat-widget .accept-btn { background-color: var(--brand-green-bg-light); color: var(--brand-green); border-color: var(--brand-green-border); }
#chat-widget .accept-btn:hover { background-color: var(--brand-green-bg-light-hover); border-color: var(--brand-green); color: #fff; }
#chat-widget .decline-btn { background-color: rgba(255, 64, 180, 0.15); color: var(--brand-pink); border-color: rgba(255, 64, 180, 0.6); }
#chat-widget .decline-btn:hover { background-color: rgba(255, 64, 180, 0.3); border-color: var(--brand-pink); color: #fff; }
#chat-widget .terms-link-message { color: var(--brand-green); text-decoration: underline; font-weight: bold; cursor: pointer; }
#chat-widget .terms-link-message:hover { color: var(--brand-green-hover); }

#chat-widget .chat-input-area{display:flex;align-items:center;border-top:2px solid var(--brand-cyan);padding:10px 15px;background:#000;flex-shrink:0;position:relative;z-index:3}
#chat-widget .chat-input-area input{flex:1;border:none;padding:9px 12px;background:#000;color:#fff;outline:none;font-size:13px;font-family:'Poppins',sans-serif;font-weight:400;border-radius:0;margin-right:10px;border-bottom:1px solid #555}
#chat-widget .chat-input-area input::placeholder{color:#888;font-style:italic}
#chat-widget .chat-input-area input:focus{border-bottom-color:var(--brand-cyan)}
#chat-widget .chat-input-area input:disabled { background-color: #1a1a1a; color: #555; cursor: not-allowed; }
#chat-widget .chat-input-area button{background:var(--brand-pink);border:1px solid #000;border-radius:3px;color:#000;padding:8px 20px;cursor:pointer;font-weight:700;transition:background .2s, opacity 0.2s;font-size:14px;font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:1px;line-height:1.3}
#chat-widget .chat-input-area button:hover{background:#FF60C4}
#chat-widget .chat-input-area button:disabled { background-color: #555; color: #999; border-color: #444; cursor: not-allowed; opacity: 0.7; }
#chat-widget .chat-input-area button:disabled:hover { background-color: #555; }

@media (max-width: 768px) {
    #chat-widget .idle-message { display: none !important; }
    #chat-widget .chat-window { position:fixed;top:0;left:0;width:100%;height:100%!important;border:none;border-radius:0;bottom:auto;right:auto;z-index:9999; flex-direction:column;background-color:#000;overflow:hidden }
    #chat-widget .chat-window.minimized { height: 48px !important; }
    #chat-widget .chat-image-container{ position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:1;display:block;background-color:#000; }
    #chat-widget .chat-image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); z-index: 5; pointer-events: none; }
    #chat-widget .mood-image-layer { width: 100%; height: 100%; }
    #chat-widget #ping-indicator{display:none}
    #chat-widget .chat-content-container{ position:relative; z-index:6; width:100%; height:100%; background-color:transparent; flex:1; }
    #chat-widget .chat-header{ padding:10px 15px; background-color:transparent; border-bottom:1px solid var(--brand-cyan); height: 52px; }
    #chat-widget .chat-title{font-size:18px}
    #chat-widget .terms-link-widget { font-size: 9px; margin-left: 0px; margin-top: 2px; }
    #chat-widget .info-icon-widget { font-size: 18px; padding: 0 3px; }
    #chat-widget .minimize-chat { font-size: 20px; padding: 0 3px; }
    #chat-widget .chat-header-right { gap: 5px; }
    #chat-widget .chat-icon{width:28px;height:28px}
    #chat-widget .close-chat{width:24px;height:24px;font-size:16px;line-height:22px}
    #chat-widget .chat-messages{padding:15px; background-color:transparent}
    #chat-widget .chat-message{max-width:85%;font-size:14px}
    #chat-widget .chat-message.welcome{font-size:14px;padding:5px 5px 10px 5px}
    #chat-widget .chat-buttons-container { justify-content: center; }
    #chat-widget .chat-interaction-btn { font-size: 11px; padding: 7px 12px; }
    #chat-widget .chat-input-area{ padding:10px 15px; background-color:transparent; border-top:1px solid var(--brand-cyan); }
    #chat-widget .chat-input-area input{font-size:14px;background-color:rgba(20,20,20,.7);border-bottom-color:transparent}
    #chat-widget .chat-input-area input:focus{border-bottom-color:var(--brand-cyan)}
    #chat-widget .chat-input-area button{font-size:14px;padding:8px 18px}
}