/* PAGE WRAPPER — sidebar + content */
.page-wrapper { display:flex; min-height:100vh; }
.main-content { flex:1; display:flex; flex-direction:column; min-width:0; overflow-x:hidden; }
.content-area { padding:28px; flex:1; }

/* STATS GRID */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }

/* TWO COLUMN */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* CARDS GRID */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }

/* TICKET LIST */
.tickets-list { display:flex; flex-direction:column; gap:10px; }

/* TABLE WRAPPER */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }

/* LOGIN PAGE */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); }
.login-logo { display:flex; align-items:center; gap:14px; margin-bottom:32px; }
.login-logo-mark { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--violet)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px; font-family:'Poppins',sans-serif; box-shadow:0 8px 24px rgba(99,102,241,0.35); }
.login-title { font-family:'Poppins',sans-serif; font-size:22px; font-weight:700; color:var(--text); }
.login-sub { font-size:12px; color:var(--muted); margin-top:2px; }

/* CHAT LAYOUT */
.chat-page { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg); }
.chat-header { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; height:60px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; box-shadow:var(--shadow-sm); }
.chat-body { display:flex; flex:1; overflow:hidden; }
.chat-panel { width:320px; border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; background:var(--surface); }
.chat-panel-header { padding:16px 18px; border-bottom:1px solid var(--border); }
.chat-panel-list { flex:1; overflow-y:auto; }
.chat-main { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--surface-2); }
.chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
.chat-input-area { border-top:1px solid var(--border); padding:16px 20px; background:var(--surface); flex-shrink:0; }

/* MESSAGE BUBBLES */
.msg { display:flex; gap:10px; align-items:flex-start; }
.msg-bubble { max-width:70%; padding:12px 16px; border-radius:16px; font-size:13px; line-height:1.6; }
.msg-user .msg-bubble { background:linear-gradient(135deg,var(--primary),var(--violet)); color:#fff; border-bottom-right-radius:4px; }
.msg-bot { flex-direction:row-reverse; }
.msg-bot .msg-bubble { background:var(--surface); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; }
.msg-time { font-size:10px; color:var(--muted); margin-top:4px; }

/* RESPONSIVE */
@media (max-width:1200px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .sidebar { width:220px; }
  .content-area { padding:20px; }
}
@media (max-width:768px) {
  .page-wrapper { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:relative; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .content-area { padding:16px; }
  .topbar { padding:0 16px; height:56px; }
  .cards-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .grid-3 { grid-template-columns:1fr; }
  .login-card { padding:28px 20px; }
  .content-area { padding:12px; }
}