:root{ --spc-primary:#6f00ee; --spc-accent:#fa6400; --spc-error:#e5484d; --spc-ok:#2ecc71;}
.spc-root *{box-sizing:border-box; font-family: Arial, Helvetica, sans-serif !important}
/* ### MODIFIED: Added gradient to bubble button ### */
.spc-bubble{ position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(to right, var(--spc-primary), var(--spc-accent)); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:2147483647; }
/* ### MODIFIED: Increased width from 380px to 480px and height from 520px to 700px ### */
.spc-panel{ position:fixed; right:16px; bottom:84px; width:min(480px, calc(100vw - 32px)); height:700px; border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.35); display:none; z-index:2147483647;}
.spcLight{ --spc-bg:#ffffff; --spc-fg:#111; --spc-border:#e6e6e6; --spc-input:#f6f6f7; --spc-bot:#f1f0f0; --spc-bot-fg:#111; --spc-me:#d8c8ff; --spc-me-fg:#1a0033; --spc-me-border:#bfa9ff;}
.spcDark{  --spc-bg:#0e0f12; --spc-fg:#f2f3f5; --spc-border:#2a2c31; --spc-input:#1719f; --spc-bot:#1d2027; --spc-bot-fg:#f2f3f5; --spc-me:#6f00ee; --spc-me-fg:#fff; --spc-me-border:#5a00c0;}
.spc-wrap{background:var(--spc-bg); color:var(--spc-fg); height:100%; display:flex; flex-direction:column; border:1px solid var(--spc-border)}
.spc-header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--spc-border)}
.spc-title{font-weight:700}
.spc-actions{display:flex; gap:8px; align-items:center}
.spc-theme,.spc-close{border:0; background:transparent; color:var(--spc-fg); cursor:pointer; font-size:16px; transition:none; outline:none;}
.spc-theme:hover,.spc-close:hover{ background:transparent; color:var(--spc-fg); }
.spc-theme:focus,.spc-close:focus,.spc-theme:active,.spc-close:active{ background:transparent; outline:none; box-shadow:none; }
.spc-body{flex:1; overflow:auto; padding:12px}
.spc-lead label{font-size:12px; display:block; margin:8px 0 4px}
.spc-input, .spc-btn{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--spc-border); background:var(--spc-input); color:var(--spc-fg); transition:border-color .15s, background .15s}
.spc-input.invalid{ border-color: var(--spc-error); }
.spc-hint{font-size:12px; margin:4px 2px 0; opacity:.9}
.spc-hint.error{ color: var(--spc-error); }
.spc-hint.ok{ color: var(--spc-ok); }
.spc-checkbox{display:flex; gap:8px; align-items:center; font-size:12px; margin:8px 0}
/* ### MODIFIED: Added gradient to "Start" button ### */
.spc-btn{background:linear-gradient(to right, var(--spc-primary), var(--spc-accent)); color:#fff; border:none; cursor:pointer}
/* ### MODIFIED: Added reverse gradient to button hover ### */
.spc-btn:hover{background:linear-gradient(to right, var(--spc-accent), var(--spc-primary))}

/* ### هذا هو السطر الذي تم تعديله ### */
.spc-footer{padding:10px; border-top:1px solid var(--spc-border); display:flex; gap:8px; align-items: flex-end;}

.spc-text{flex:1; padding:12px 14px; border-radius:16px; border:1px solid var(--spc-border); background:var(--spc-input); color:var(--spc-fg);
    resize: none;
    max-height: 100px;
    direction: auto;
}
/* ### MODIFIED: Added gradient to "Send" button ### */
.spc-send{padding:12px 16px; border-radius:14px; background:linear-gradient(to right, var(--spc-primary), var(--spc-accent)); color:#fff; border:none; cursor:pointer; transition: background .15s}
/* ### MODIFIED: Added reverse gradient to button hover ### */
.spc-send:hover{ background: linear-gradient(to right, var(--spc-accent), var(--spc-primary)); }
.spc-end{padding:10px 12px; border-radius:10px; background:var(--spc-border); color:var(--spc-fg); border:none; cursor:pointer; margin-left:8px; transition: background .15s}
/* ### MODIFIED: Changed hover from solid orange to the reverse gradient ### */
.spc-end:hover{ background: linear-gradient(to right, var(--spc-accent), var(--spc-primary)); color:#fff; }
.spc-chat{display:flex; flex-direction:column; gap:10px}
.spc-msg{max-width:78%; padding:10px 12px; border-radius:16px; position:relative; line-height:1.4; word-wrap:break-word}
.spc-msg.bot{align-self:flex-start; background:var(--spc-bot); color:var(--spc-bot-fg); border:1px solid var(--spc-border)}
/* ### MODIFIED: Added gradient to "me" bubbles and set text to white ### */
.spc-msg.me{align-self:flex-end; background:linear-gradient(135deg, var(--spc-primary), var(--spc-accent)); color:#fff; border:none;}
.spc-msg.bot::after{content:''; position:absolute; left:-6px; bottom:0; width:12px; height:12px; background:var(--spc-bot); border-left:1px solid var(--spc-border); border-bottom:1px solid var(--spc-border); border-bottom-left-radius:10px; transform:translateY(2px) rotate(45deg)}
.spc-msg.me::after{content:''; position:absolute; right:-6px; bottom:0; width:12px; height:12px; background:var(--spc-accent); border-right:1px solid var(--spc-accent); border-bottom:1px solid var(--spc-accent); border-bottom-right-radius:10px; transform:translateY(2px) rotate(-45deg)}
/* ### MODIFIED: Adjusted media query for new panel width (512px = 480 + 32) and height (80vh) ### */
@media (max-width:512px){ .spc-panel{height:80vh;} }
.spc-try{ position:fixed; right:16px; bottom:84px; transform: translateX(-4px); background:#000; color:#fff; padding:6px 10px; border-radius:12px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:2147483647; display:flex; align-items:center; gap:6px; opacity:0.95; }
.spc-try .arrow{ position:absolute; left:50%; transform:translateX(-50%); bottom:-7px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #000; }
.spc-root{ pointer-events:none } .spc-root .spc-bubble,.spc-root .spc-panel,.spc-root .spc-try,.spc-root .spc-wrap,.spc-root button,.spc-root input,.spc-root textarea{ pointer-events:auto }
.spc-toast{ position:absolute; right:12px; bottom:12px; background:#111; color:#fff; padding:8px 10px; border-radius:10px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
@keyframes spc-shake{ 10%, 90% {{ transform: translateX(-1px); }} 20%, 80% {{ transform: translateX(2px); }} 30%, 50%, 70% {{ transform: translateX(-4px); }} 40%, 60% {{ transform: translateX(4px); }} }
.spc-shake{ animation: spc-shake .4s ease both; }