/* SCIL Control Panel — Mobile Responsive Overrides */
@media (max-width:900px){
  body{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto}
  body::before{position:fixed}
  #app{min-height:100vh}
  .app-body{flex-direction:column;flex:1 1 auto;min-height:0}
  header{padding:8px 12px;height:auto;min-height:52px;flex-wrap:wrap;gap:6px}
  .logo{flex:1 1 auto;min-width:0;gap:8px}
  .logo-mark{width:30px;height:30px;font-size:12px}
  .logo-text h1{font-size:14px;letter-spacing:2px}
  .logo-text p{font-size:8px}
  .tabs{margin-left:6px;padding:1px}
  .tab{padding:4px 8px;font-size:9px}
  .header-right{gap:6px;margin-left:auto}
  .conn-badges{display:none}
  .settings-btn{padding:5px 10px;font-size:10px}
  .user-chip{padding:4px 8px}
  aside{width:100%;max-height:170px;border-right:none;border-bottom:1px solid var(--border);flex-shrink:0}
  .sidebar-head{padding:8px 14px 6px}
  .agents-list{max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px 8px;gap:6px;-webkit-overflow-scrolling:touch}
  .agent-btn{min-width:190px;flex-shrink:0}
  .sidebar-history{display:none}
  .main-area{width:100%;flex:1 1 auto;min-height:60vh}
  .chat-header{padding:10px 14px;flex-wrap:wrap}
  .chat-agent-icon{font-size:20px}
  .chat-agent-name{font-size:15px;letter-spacing:2px}
  .chat-agent-name-ar{font-size:11px}
  .chat-head-actions{flex-wrap:wrap;gap:4px}
  .chat-status{font-size:8px}
  .messages{padding:14px;gap:12px}
  .msg-bubble{max-width:88%;font-size:13px;padding:10px 14px}
  .chat-input-area{padding:10px 14px}
  .input-row{gap:8px}
  textarea#msg-input{font-size:16px;padding:10px 12px;min-height:42px}
  .send-btn{padding:0 14px;font-size:11px;height:42px}
  .input-hint{font-size:9px}
  .welcome{padding:24px 14px;gap:14px}
  .welcome h2{font-size:22px;letter-spacing:3px}
  .welcome p{font-size:12px}
  .quick-btn{font-size:10px;padding:6px 12px}
  .login-screen{padding:20px;gap:20px}
  .login-screen .logo-mark-lg{width:60px;height:60px;font-size:22px}
  .login-screen h1{font-size:26px;letter-spacing:4px}
  .login-screen p.sub{font-size:9px;letter-spacing:2px}
  .login-box{width:100%;max-width:380px;padding:22px 20px}
  .login-box input{font-size:16px}
  .login-hint{font-size:10px;padding:0 10px}
  .overlay{padding:10px}
  .settings-panel{width:100%;max-width:620px;max-height:92vh}
  .sp-head{padding:14px 16px 10px;font-size:15px;letter-spacing:2px}
  .sp-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sp-tab{padding:8px 10px;font-size:9px}
  .sp-body{padding:16px 16px;gap:16px}
  .form-row{flex-direction:column;gap:0}
  .form-group input,.form-group select,.form-group textarea{font-size:14px;padding:9px 12px}
  .mc-modal{padding:10px}
  .mc-box{width:100%;max-width:460px;padding:18px}
  .mc-btns{flex-direction:column}
  .inbox-header{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .inbox-header h2{font-size:15px;letter-spacing:2px}
  .inbox-filter{width:100%;margin-left:0}
  .inbox-list{padding:12px;gap:10px}
  .result-card{padding:12px 14px}
  .rc-head{gap:6px}
  .rc-time{margin-left:0}
  .rc-reply{font-size:12.5px;max-height:280px}
  .users-table .user-row{flex-wrap:wrap;gap:6px;padding:10px}
  .sched-row .sr-grid{grid-template-columns:1fr;gap:4px}
  #toast{left:12px;right:12px;bottom:12px;max-width:none}
}
@media (max-width:480px){
  header{padding:6px 10px}
  .logo-mark{width:26px;height:26px;font-size:11px}
  .logo-text h1{font-size:13px;letter-spacing:1px}
  .logo-text p{display:none}
  .tabs{margin-left:4px}
  .tab{padding:3px 6px;font-size:8.5px;letter-spacing:.5px}
  .settings-btn{padding:4px 8px;font-size:9px}
  .user-chip span:last-child{display:none}
  .user-chip{padding:4px}
  .user-chip .u-avatar{width:22px;height:22px}
  .agent-btn{min-width:170px;padding:8px}
  .agent-btn .a-icon{font-size:16px;width:24px}
  .agent-btn .a-info .a-name{font-size:11.5px}
  .msg-bubble{max-width:92%;font-size:12.5px;padding:9px 12px}
  .welcome h2{font-size:20px;letter-spacing:2px}
  .login-screen h1{font-size:22px;letter-spacing:3px}
}