@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
:root{--ep:#1a5276;--epl:#2471a3;--epd:#0e3a55;--eg:#c9942e;--egd:#a87a24;--ew:#fff;--et:#2c3e50;--ets:#5d6d7e;--ebg:#f4f6f8;--ebw:#fafbfc;--eb:#e5e8eb;--ebl:#eef1f4;--tr:0.25s cubic-bezier(0.4,0,0.2,1)}

.ethraa-bot-btn,.ethraa-bot-btn *,.ethraa-popup-bubble,.ethraa-popup-bubble *,.ethraa-chat-container,.ethraa-chat-container *,.ethraa-chat-container *::before,.ethraa-chat-container *::after{margin:0;padding:0;box-sizing:border-box;font-family:'IBM Plex Sans Arabic','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}

/* BUTTON - LEFT */
.ethraa-bot-btn{position:fixed;bottom:36px;left:28px;width:60px;height:60px;background:var(--ep);border-radius:50%;box-shadow:0 4px 20px rgba(26,82,118,0.35);cursor:pointer;z-index:999999;display:flex;align-items:center;justify-content:center;transition:all var(--tr);border:none;outline:none}
.ethraa-bot-btn::before{content:'';position:absolute;top:-2px;left:-2px;width:15px;height:15px;background:var(--eg);border-radius:50%;border:2.5px solid var(--ew);animation:epulse 2.5s ease-in-out infinite}
.ethraa-bot-btn:hover{transform:scale(1.08);box-shadow:0 6px 25px rgba(26,82,118,0.45)}
.ethraa-bot-btn:active{transform:scale(0.96)}
.ethraa-bot-btn svg{width:28px;height:28px}
@keyframes epulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

/* POPUP BUBBLE */
.ethraa-popup-bubble{position:fixed;bottom:106px;left:28px;background:var(--ew);border-radius:14px;padding:14px 18px;box-shadow:0 6px 24px rgba(0,0,0,0.12);z-index:999999;max-width:250px;opacity:0;transform:translateY(10px) scale(0.95);transition:all 0.35s cubic-bezier(0.16,1,0.3,1);pointer-events:none;border:1px solid var(--ebl)}
.ethraa-popup-bubble.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ethraa-popup-bubble::after{content:'';position:absolute;bottom:-7px;left:28px;width:14px;height:14px;background:var(--ew);border-radius:2px;transform:rotate(45deg);border-right:1px solid var(--ebl);border-bottom:1px solid var(--ebl)}
.ethraa-popup-bubble .bubble-close{position:absolute;top:6px;left:8px;width:22px;height:22px;background:var(--ebg);border:none;border-radius:50%;color:var(--ets);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr);line-height:1}
.ethraa-popup-bubble .bubble-close:hover{background:var(--eb);color:var(--et)}
.ethraa-popup-bubble .bubble-text{font-size:14.5px;font-weight:600;color:var(--et);line-height:1.7;direction:rtl;text-align:right;padding-left:18px}
.ethraa-popup-bubble .bubble-text span{color:var(--eg);font-weight:700}

/* CHAT CONTAINER - LEFT */
.ethraa-chat-container{position:fixed;bottom:106px;left:28px;width:390px;max-height:600px;background:var(--ew);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.16);z-index:999998;display:none;flex-direction:column;overflow:hidden;border:1px solid var(--ebl)}
.ethraa-chat-container.show{display:flex;animation:eslide 0.35s cubic-bezier(0.16,1,0.3,1)}
@keyframes eslide{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* HEADER */
.ethraa-chat-header{background:var(--ep);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;position:relative}
.ethraa-chat-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--eg)}
.ethraa-chat-header-content h2{color:var(--ew);font-size:17px;font-weight:700;line-height:1.4}
.ethraa-chat-header-content p{margin-top:2px;color:rgba(255,255,255,0.75);font-size:13.5px;font-weight:400}
.ethraa-close{width:32px;height:32px;background:rgba(255,255,255,0.12);border:none;border-radius:8px;color:var(--ew);font-size:20px;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.ethraa-close:hover{background:rgba(255,255,255,0.22)}

/* BODY */
.ethraa-chat-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;background:var(--ebg);max-height:460px;scroll-behavior:smooth}
.ethraa-chat-body::-webkit-scrollbar{width:4px}
.ethraa-chat-body::-webkit-scrollbar-track{background:transparent}
.ethraa-chat-body::-webkit-scrollbar-thumb{background:var(--eb);border-radius:4px}

/* WELCOME */
.ethraa-welcome-box{background:var(--ew);padding:16px;border-radius:12px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.06);border-right:3px solid var(--ep)}
.ethraa-welcome-box h3{margin-bottom:6px;color:var(--ep);font-size:16.5px;font-weight:700}
.ethraa-welcome-box p{color:var(--ets);line-height:1.65;font-size:14.5px}

/* MENU */
.ethraa-menu-grid{display:flex;flex-direction:column;gap:8px}
.ethraa-menu-item{background:var(--ew);border:1px solid var(--eb);border-radius:12px;padding:12px 14px;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;gap:10px;direction:rtl;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.ethraa-menu-item:hover{border-color:var(--epl);box-shadow:0 2px 8px rgba(26,82,118,0.1);transform:translateY(-1px)}
.ethraa-menu-item:active{transform:translateY(0)}
.ethraa-menu-num{width:30px;height:30px;min-width:30px;background:var(--ep);color:var(--ew);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;transition:all var(--tr)}
.ethraa-menu-item:hover .ethraa-menu-num{background:var(--eg)}
.ethraa-menu-icon{font-size:20px;line-height:1;flex-shrink:0}
.ethraa-menu-text{color:var(--et);font-size:15px;font-weight:600;line-height:1.4;flex:1}
.ethraa-menu-arrow{color:var(--eb);font-size:16px;transition:all var(--tr);flex-shrink:0;margin-right:auto}
.ethraa-menu-item:hover .ethraa-menu-arrow{color:var(--ep);transform:translateX(-3px)}

/* BACK */
.ethraa-back-btn{background:var(--ew);border:1px solid var(--eb);color:var(--ets);padding:10px 14px;border-radius:12px;font-size:14.5px;font-weight:500;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;width:100%;box-shadow:0 1px 3px rgba(0,0,0,0.06);font-family:'IBM Plex Sans Arabic',sans-serif}
.ethraa-back-btn:hover{border-color:var(--epl);color:var(--ep)}

/* SECTION HEADER */
.ethraa-section-header{background:var(--ep);color:var(--ew);padding:14px 16px;border-radius:12px;margin-bottom:12px;text-align:center;position:relative;overflow:hidden}
.ethraa-section-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.06),transparent 60%);pointer-events:none}
.ethraa-section-header h3{margin-bottom:4px;font-size:16px;font-weight:700;color:var(--ew)}
.ethraa-section-header p{font-size:13px;opacity:0.75;color:var(--ew)}

/* QUESTIONS */
.ethraa-question-card{background:var(--ew);border:1px solid var(--eb);border-radius:12px;padding:11px 14px;margin-bottom:6px;cursor:pointer;transition:all var(--tr);box-shadow:0 1px 3px rgba(0,0,0,0.06);display:flex;align-items:center;gap:10px;direction:rtl}
.ethraa-question-num{width:28px;height:28px;min-width:28px;background:var(--ebg);color:var(--ep);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all var(--tr);border:1px solid var(--eb)}
.ethraa-question-card:hover{border-color:var(--epl);box-shadow:0 2px 8px rgba(26,82,118,0.08)}
.ethraa-question-card:hover .ethraa-question-num{background:var(--ep);color:var(--ew);border-color:var(--ep)}
.ethraa-question-text{color:var(--et);font-size:14.5px;font-weight:500;text-align:right;line-height:1.5;flex:1}

/* ANSWER */
.ethraa-answer-box{background:var(--ew);border-right:3px solid var(--eg);padding:14px 16px;border-radius:12px;margin:6px 0 8px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.ethraa-answer-box h4{margin-bottom:10px;color:var(--ep);font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:5px}
.ethraa-answer-content{direction:rtl;text-align:right}
.ethraa-answer-content p{color:var(--et);line-height:1.7;font-size:14px;margin-bottom:8px}
.ethraa-answer-content p:last-child{margin-bottom:0}
.ethraa-answer-content strong{color:var(--ep);font-weight:600}
.ethraa-answer-box ul{list-style:none}
.ethraa-answer-box li{padding:5px 18px 5px 0;position:relative;color:var(--et);line-height:1.6;font-size:14px}
.ethraa-answer-box li::before{content:'';position:absolute;right:0;top:12px;width:6px;height:6px;background:var(--eg);border-radius:50%}
.ethraa-answer-box li+li{border-top:1px solid var(--ebl)}
.ethraa-answer-box a{color:var(--ep);text-decoration:none;font-weight:500}
.ethraa-answer-box a:hover{color:var(--eg)}

/* ACTIONS */
.ethraa-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ethraa-action-btn{flex:1;background:var(--ew);border:1.5px solid var(--ep);color:var(--ep);padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--tr);font-family:'IBM Plex Sans Arabic',sans-serif;text-align:center;min-width:100px}
.ethraa-action-btn:hover{background:var(--ep);color:var(--ew)}
.ethraa-action-btn.primary{background:var(--ep);color:var(--ew);border-color:var(--ep)}
.ethraa-action-btn.primary:hover{background:var(--epd)}
.ethraa-action-btn.gold{background:var(--eg);border-color:var(--eg);color:var(--ew)}
.ethraa-action-btn.gold:hover{background:var(--egd)}

/* INPUT */
.ethraa-chat-input{background:var(--ew);padding:12px 16px;border-top:1px solid var(--ebl);display:flex;gap:8px;align-items:center;flex-shrink:0}
.ethraa-chat-input input{flex:1;border:1.5px solid var(--eb);padding:10px 14px;border-radius:24px;font-size:14.5px;outline:none;transition:all var(--tr);font-family:'IBM Plex Sans Arabic',sans-serif;color:var(--et);background:var(--ebw);direction:rtl}
.ethraa-chat-input input::placeholder{color:var(--ets);font-size:14px}
.ethraa-chat-input input:focus{border-color:var(--epl);box-shadow:0 0 0 3px rgba(26,82,118,0.08);background:var(--ew)}
.ethraa-send-btn{width:40px;height:40px;min-width:40px;background:var(--ep);border:none;border-radius:50%;color:var(--ew);cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center}
.ethraa-send-btn:hover{background:var(--epd);transform:scale(1.05)}

/* FORM */
.ethraa-form-container{background:var(--ew);border-radius:12px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.ethraa-form-group{margin-bottom:14px}
.ethraa-form-group:last-of-type{margin-bottom:18px}
.ethraa-form-group label{display:block;font-size:14px;font-weight:600;color:var(--et);margin-bottom:6px;direction:rtl}
.ethraa-form-group input,.ethraa-form-group select,.ethraa-form-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--eb);border-radius:8px;font-size:14.5px;font-family:'IBM Plex Sans Arabic',sans-serif;color:var(--et);background:var(--ebw);outline:none;transition:all var(--tr);direction:rtl;-webkit-appearance:none;appearance:none}
.ethraa-form-group input:focus,.ethraa-form-group select:focus,.ethraa-form-group textarea:focus{border-color:var(--epl);box-shadow:0 0 0 3px rgba(26,82,118,0.06);background:var(--ew)}
.ethraa-form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6d7e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;padding-left:30px}
.ethraa-form-group textarea{min-height:65px;resize:vertical;line-height:1.5}
.ethraa-form-submit{width:100%;padding:12px;background:var(--ep);color:var(--ew);border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all var(--tr);font-family:'IBM Plex Sans Arabic',sans-serif}
.ethraa-form-submit:hover{background:var(--epd)}

@media(max-width:480px){
.ethraa-chat-container{width:calc(100vw - 16px);left:8px;right:8px;bottom:104px;max-height:calc(100vh - 120px)}
.ethraa-bot-btn{width:56px;height:56px;bottom:24px;left:20px}
.ethraa-popup-bubble{left:20px;bottom:90px;max-width:220px}
.ethraa-actions{flex-direction:column}
}