/* SMARTSOFT AI - App Styles (RTL + Cairo)
-------------------------------------------------- */
:root{
  --primary:#1B2E3F;
  --accent1:#A0D9D9;
  --accent2:#00FFFF;
  --bg:#F0F4F8;
  --card:#FFFFFF;
  --muted:#6b7280;
  --danger:#b91c1c;
  --success:#065f46;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#0f172a;
  direction: rtl;
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(240,244,248,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(27,46,63,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--primary)}
.brand img{width:40px;height:40px;border-radius:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:14px; border:1px solid rgba(27,46,63,.15);
  background:var(--card); cursor:pointer;
  transition:.2s transform, .2s box-shadow, .2s background;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-primary{
  border:none;
  color:var(--primary);
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow:0 10px 24px rgba(0,255,255,.14);
}
.btn-danger{border-color:rgba(185,28,28,.25); color:var(--danger)}
.card{
  background:var(--card);
  border:1px solid rgba(27,46,63,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
.hero{
  padding:34px 0;
}
.hero h1{
  margin:0 0 8px;
  font-size:clamp(24px,3vw,40px);
  color:var(--primary);
}
.hero p{margin:0;color:var(--muted);line-height:1.8}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(160,217,217,.35);
  color:var(--primary);
  border:1px solid rgba(27,46,63,.10);
  margin-bottom:12px;
}
.form{padding:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{color:var(--primary);font-weight:700}
.input{
  padding:12px 14px;border-radius:14px;border:1px solid rgba(27,46,63,.15);
  background:#fff; outline:none;
}
.input:focus{border-color:rgba(0,255,255,.6); box-shadow:0 0 0 4px rgba(0,255,255,.12)}
.help{color:var(--muted);font-size:14px}
.alert{padding:10px 12px;border-radius:14px;border:1px solid rgba(27,46,63,.12);margin:12px 0}
.alert-danger{border-color:rgba(185,28,28,.25); color:var(--danger); background:rgba(185,28,28,.06)}
.alert-success{border-color:rgba(6,95,70,.25); color:var(--success); background:rgba(6,95,70,.06)}

/* Chat Layout */
.app-shell{height:calc(100vh - 72px); display:flex; gap:12px; padding:12px}
.sidebar{
  width:320px; min-width:280px; max-width:360px;
  padding:12px; overflow:auto;
}
.chat-main{flex:1; display:flex; flex-direction:column; overflow:hidden}
.chat-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid rgba(27,46,63,.10);
}
.status{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.dot{width:10px;height:10px;border-radius:999px;background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.dot.off{background:#f97316; box-shadow:0 0 0 4px rgba(249,115,22,.15)}
.messages{
  flex:1; padding:14px; overflow:auto;
  background: linear-gradient(180deg, rgba(160,217,217,.10), rgba(240,244,248,0));
}
.msg{max-width:720px;margin:10px 0; padding:12px 14px; border-radius:18px; border:1px solid rgba(27,46,63,.10)}
.msg.user{margin-right:auto; background:rgba(27,46,63,.06)}
.msg.ai{margin-left:auto; background:linear-gradient(135deg, rgba(160,217,217,.22), rgba(0,255,255,.10))}
.msg .meta{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px}
.msg .actions{display:flex;gap:8px}
.icon-btn{
  border:none;background:transparent; cursor:pointer;
  color:var(--primary); opacity:.75;
}
.icon-btn:hover{opacity:1}
.composer{
  padding:12px; border-top:1px solid rgba(27,46,63,.10);
  display:flex; gap:10px; align-items:flex-end;
}
textarea{
  width:100%; min-height:48px; max-height:160px; resize:vertical;
}
.drawer-toggle{display:none}
@media (max-width:860px){
  .app-shell{padding:8px}
  .sidebar{
    position:fixed; inset:72px 0 0 auto;
    width:min(90vw,360px);
    transform:translateX(110%);
    transition:.25s transform;
    z-index:20;
  }
  .sidebar.open{transform:translateX(0)}
  .drawer-toggle{display:inline-flex}
}
.conv-item{padding:10px;border-radius:14px;border:1px solid rgba(27,46,63,.10);margin-bottom:10px;cursor:pointer;background:#fff}
.conv-item.active{border-color:rgba(0,255,255,.5); box-shadow:0 0 0 4px rgba(0,255,255,.08)}
.conv-title{font-weight:800;color:var(--primary)}
.conv-sub{color:var(--muted);font-size:12px;margin-top:4px}
.small{font-size:12px;color:var(--muted)}
.hr{height:1px;background:rgba(27,46,63,.10);margin:12px 0}

/* Admin */
.admin-shell{display:flex; gap:12px; padding:12px}
.admin-nav{width:260px; padding:12px}
.admin-content{flex:1; padding:12px}
.kpi{padding:14px}
.kpi .n{font-size:26px;font-weight:900;color:var(--primary)}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{color:var(--muted);font-size:12px;text-align:right}
.table td{background:#fff;border:1px solid rgba(27,46,63,.10); padding:10px;border-right:none;border-left:none}
.table tr td:first-child{border-right:1px solid rgba(27,46,63,.10); border-radius:14px 0 0 14px}
.table tr td:last-child{border-left:1px solid rgba(27,46,63,.10); border-radius:0 14px 14px 0}
code.inline{background:rgba(27,46,63,.06);padding:2px 6px;border-radius:8px}