/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ===== 3D LIVE LAPTOP FOR BLA7ELSHAM HERO ===== */
.scene-wrap {
  --w: min(580px, 48vw);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .scene-wrap {
    --w: min(94vw, 500px);
    margin-top: 20px;
  }
}
.scene{position:relative;width:var(--w);height:calc(var(--w)*.75);perspective:1500px;perspective-origin:50% 32%;display:flex;align-items:center;justify-content:center;margin-top:50px;transform:translateY(25px)}
.ground-shadow{position:absolute;left:4%;width:92%;bottom:4%;height:22%;background:radial-gradient(ellipse at center,rgba(0,0,0,0.92) 0%,rgba(5,7,20,0.5) 50%,transparent 75%);filter:blur(16px);border-radius:50%;pointer-events:none}
.glow{position:absolute;left:10%;width:80%;bottom:8%;height:20%;background:rgba(100,112,255,0.38);filter:blur(40px);border-radius:50%;opacity:0;transition:opacity .8s ease}
.rig{position:absolute;left:0;width:100%;height:0;transform-style:preserve-3d;will-change:transform}
.base,.lip,.lid,.front,.back{position:absolute}

/* Base / Bottom Chassis */
.base{--d:calc(var(--w)*.62);left:0;top:0;width:100%;height:var(--d);transform-origin:50% 0;transform:rotateX(90deg);
background:linear-gradient(180deg,#242638 0%,#161726 40%,#0e0f1b 100%);
border-radius:calc(var(--w)*.016) calc(var(--w)*.016) calc(var(--w)*.038) calc(var(--w)*.038);
padding:4% 5% 3%;
box-shadow:inset 0 1px 2px rgba(255,255,255,0.22),inset 0 -2px 4px rgba(0,0,0,0.8),0 20px 45px rgba(0,0,0,0.8)}
.base::before{content:"";position:absolute;left:0;right:0;top:0;height:3%;background:linear-gradient(90deg,#0d0e18,#202235 50%,#0d0e18);border-radius:calc(var(--w)*.016) calc(var(--w)*.016) 0 0}

/* Front Lip & Notch */
.lip{left:0;top:0;width:100%;height:calc(var(--w)*.019);transform:translate3d(0,0,calc(var(--w)*.62));
background:linear-gradient(180deg,#2a2c3f 0%,#131422 100%);
border-radius:0 0 calc(var(--w)*.032) calc(var(--w)*.032);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 3px 8px rgba(0,0,0,0.6)}
.lip::after{content:"";position:absolute;left:42%;width:16%;top:0;height:48%;background:#090a12;border-radius:0 0 calc(var(--w)*.01) calc(var(--w)*.01);box-shadow:inset 0 1px 2px rgba(0,0,0,0.8)}

/* Keyboard Deck */
.kb{height:65%;display:flex;flex-direction:column;gap:calc(var(--w)*.0045);padding:calc(var(--w)*.009);
background:#07070e;border-radius:calc(var(--w)*.008);margin-top:1.5%;
box-shadow:inset 0 2px 6px rgba(0,0,0,0.9),0 1px 0 rgba(255,255,255,0.06)}
.kb div{display:flex;gap:calc(var(--w)*.0045)}
.kb i{background:#151624;border-radius:calc(var(--w)*.0035);box-shadow:inset 0 -2px 0 #07070d,0 1px 2px rgba(0,0,0,0.8),inset 0 0 calc(var(--w)*.008) rgba(100,112,255,0.4);transition:background .12s}
.kb i.k{background:#4b55c8;box-shadow:inset 0 0 8px #8892ff,0 0 6px #6470ff}

/* Trackpad */
.pad{width:33%;height:21%;margin:2.5% auto 0;border:1px solid rgba(255,255,255,0.08);border-radius:calc(var(--w)*.009);background:linear-gradient(180deg,#1b1c2d,#121320);box-shadow:inset 0 1px 2px rgba(0,0,0,0.6),0 1px 0 rgba(255,255,255,0.05)}

/* Display Lid */
.lid{left:0;top:calc(var(--w)*-.62);width:100%;height:calc(var(--w)*.62);transform-origin:50% 100%;transform-style:preserve-3d}
.front,.back{inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--w)*.022) calc(var(--w)*.022) calc(var(--w)*.006) calc(var(--w)*.006)}
.front{background:#000003;padding:calc(var(--w)*.014) calc(var(--w)*.014) calc(var(--w)*.022);transform:translateZ(1px);box-shadow:0 0 0 1px #222336;transition:box-shadow .6s}
.front.on{box-shadow:0 0 0 1px #2f3148,0 0 calc(var(--w)*.12) rgba(100,112,255,0.45)}

/* Webcam & Bezel */
.cam{position:absolute;top:calc(var(--w)*.0045);left:50%;transform:translateX(-50%);width:calc(var(--w)*.012);height:calc(var(--w)*.012);background:#050508;border-radius:50%;display:grid;place-items:center;z-index:7;box-shadow:inset 0 0 1px #000}
.cam::after{content:"";width:40%;height:40%;background:#1d2948;border-radius:50%}

.back{background:linear-gradient(135deg,#242639,#141524 55%,#1c1d2e);transform:rotateX(180deg) translateZ(calc(var(--w)*.011));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.15),0 10px 30px rgba(0,0,0,0.7);display:grid;place-items:center}
.back svg{width:16%;color:#3f415c;filter:drop-shadow(0 0 calc(var(--w)*.015) rgba(100,112,255,0.75))}

/* Screen App (Discord Theme for Bla7ElSham) */
.scr{position:relative;height:100%;background:#090a12;font-size:calc(var(--w)/48);overflow:hidden;border-radius:calc(var(--w)*.01);display:grid;grid-template-columns:3.2em 12.5em 1fr;font-family:system-ui,-apple-system,sans-serif}
.scr::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(115deg,rgba(255,255,255,0.06) 0 22%,transparent 22.2%)}
.boot{position:absolute;inset:0;background:#030307;z-index:5;display:grid;place-items:center;color:#6470ff;font-weight:700;font-size:1.4em;letter-spacing:1px;transition:opacity .7s .1s}
.boot b{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:0}}
.on .boot{opacity:0;pointer-events:none}

/* Left Server Rail */
.rail{background:#04040a;border-right:1px solid #141525;display:flex;flex-direction:column;align-items:center;gap:.7em;padding:.9em 0}
.rail-icon{width:2.2em;height:2.2em;border-radius:50%;background:#18192c;display:grid;place-items:center;color:#cfd3ff;font-weight:700;font-size:.85em;transition:.2s}
.rail-icon.active{background:#6470ff;border-radius:.8em .8em .8em 0;color:#fff;box-shadow:0 0 12px rgba(100,112,255,0.6)}
.rail-sep{width:1.5em;height:1px;background:#18192c;margin:.2em 0}

/* Channels Sidebar */
.chs{background:#0b0c16;border-right:1px solid #16172a;padding:.9em .7em;overflow:hidden;display:flex;flex-direction:column;font-size:.9em}
.chs-head{display:flex;align-items:center;justify-content:space-between;padding:.2em .5em .8em;border-bottom:1px solid #17182c;margin-bottom:.8em}
.chs-head h6{font-size:1.05em;font-weight:700;color:#fff;letter-spacing:-.01em;display:flex;align-items:center;gap:.4em}
.chs-head .badge-v{width:1.2em;height:1.2em;color:#4ade80}
.chs-cat{font-size:.72em;text-transform:uppercase;color:#6b6b88;font-weight:700;padding:.4em .6em .2em;letter-spacing:.06em}
.chs a{display:flex;justify-content:space-between;align-items:center;padding:.4em .6em;margin-bottom:.15em;color:#9494ab;border-radius:.4em;text-decoration:none;font-weight:500;font-size:.92em}
.chs a.on{color:#fff;background:#181932;font-weight:600}
.chs a span.tag{font-size:.72em;background:#6470ff;color:#fff;border-radius:1em;padding:.08em .55em;font-weight:700}
.chs a span.tag.hot{background:#ef4444}
.vu{display:flex;gap:.5em;align-items:center;padding:.3em .6em;color:#85859e;font-size:.85em}
.vu i{width:1.4em;height:1.4em;border-radius:50%;background:#1e1f38;position:relative;flex:none}
.vu.sp i{background:#2b2d56}
.vu.sp i::after{content:"";position:absolute;inset:-.2em;border-radius:50%;border:2px solid #22c55e;animation:rp 1.2s infinite}
@keyframes rp{from{transform:scale(.85);opacity:1}to{transform:scale(1.25);opacity:0}}

/* Chat Area */
.chat{position:relative;display:flex;flex-direction:column;min-width:0;background:#0d0e1a}
.hd{padding:.8em 1.1em;border-bottom:1px solid #16172a;font-weight:700;display:flex;align-items:center;justify-content:space-between;font-size:.95em}
.hd .title{color:#fff;display:flex;align-items:center;gap:.5em}
.hd .sub{color:#4ade80;font-weight:500;font-size:.8em;background:rgba(74,222,128,0.12);padding:.15em .6em;border-radius:1em}
.feed{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:1em 1.1em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.msg{display:flex;gap:.7em;margin-top:.85em;animation:pop .35s both}
@keyframes pop{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}
.av{flex:none;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8em}
.msg-body{flex:1;min-width:0}
.msg b{font-size:.92em;color:#fff}.msg em{font-style:normal;color:#6b6b8a;font-size:.78em;margin-left:.5em}
.msg .role-badge{font-size:.7em;padding:.1em .45em;border-radius:.3em;margin-left:.4em;font-weight:700;text-transform:uppercase}
.role-owner{background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#000}
.role-bot{background:#5865f2;color:#fff}
.msg p{font-size:.9em;color:#d5d5e8;margin-top:.15em;line-height:1.35;word-break:break-word}
.typing{display:flex;gap:.3em;padding:.5em 0 0 2.7em}.typing i{width:.45em;height:.45em;border-radius:50%;background:#6470ff;animation:ty 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{50%{transform:translateY(-.35em);opacity:.4}}
.cmp{margin:0 1.1em .9em;border:1px solid #1a1b32;background:#101122;padding:.65em .9em;color:#787896;font-size:.9em;display:flex;align-items:center;gap:.4em;border-radius:6px}
.cmp i{width:1px;height:1.1em;background:#6470ff;animation:bl 1s steps(2) infinite}