/* VILAR KPTL Credit Agents — Blue Navy Glassmorphism
   Palette: --navy:#0D2B6B  --blue:#3D7CC9  --blue-light:#6FA0D8  --white:#f4f7ff
   Font: Advocate (local) / Oswald (Google Fonts fallback)
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap');

:root {
  --navy:       #0D2B6B;
  --navy-soft:  #1B3D7A;
  --blue:       #3D7CC9;
  --blue-light: #6FA0D8;
  --blue-dim:   #2A5BAD;
  --white:      #f4f7ff;
  --white-pure: #ffffff;
  --glass:      rgba(255,255,255,.72);
  --glass-dark: rgba(230,238,255,.5);
  --dark:       #0a1628;
  --dark-soft:  #1a2e50;
  --shadow:     0 8px 32px rgba(13,43,107,.13);
  --shadow-sm:  0 2px 12px rgba(13,43,107,.09);
  --radius:     14px;
  --radius-sm:  8px;
  --blur:       blur(20px);
  --transition: .2s ease;
  --sidebar-w:  260px;
  --red:        #c0392b;
  --green:      #27ae60;
  --cyan:       #0099bb;
  --advocate:   'Advocate','Oswald','Barlow Condensed',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Inter',sans-serif;
  background:linear-gradient(135deg,#dce8f8 0%,#f4f7ff 50%,#c8daf0 100%);
  color:var(--dark);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
}

/* ===== UTILITY ===== */
.hidden{display:none!important}
.btn-link{
  background:none;border:none;color:var(--blue-dim);
  cursor:pointer;font-size:13px;padding:0;
}
.btn-link:hover{color:var(--navy);text-decoration:underline}
.btn-icon{
  background:none;border:none;color:var(--navy-soft);
  cursor:pointer;padding:6px;border-radius:var(--radius-sm);
  transition:background var(--transition);
}
.btn-icon:hover{background:rgba(61,124,201,.15)}

/* ===== OVERLAY / LOGIN ===== */
.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c8daf0,#f4f7ff,#dce8f8);
  z-index:9999;
}
.login-card{
  text-align:center;padding:48px 40px;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(61,124,201,.25);
  border-radius:24px;
  box-shadow:var(--shadow);
  max-width:380px;width:90%;
}
.login-card .logo{height:72px;margin-bottom:16px}
.login-card h1{
  font-family:var(--advocate);
  font-size:2rem;font-weight:700;
  color:var(--navy);letter-spacing:.06em;text-transform:uppercase;
}
.login-card .subtitle{
  color:rgba(13,43,107,.5);margin:8px 0 32px;font-size:13px;
}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:13px 20px;
  background:rgba(255,255,255,.9);
  color:#3c4043;
  border:1px solid rgba(61,124,201,.2);
  border-radius:var(--radius-sm);
  cursor:pointer;font-size:14px;font-weight:500;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition),background var(--transition);
}
.btn-google:hover{background:#fff;box-shadow:0 4px 20px rgba(13,43,107,.15)}

/* ===== APP SHELL ===== */
.app{display:flex;height:100vh;width:100%}

/* ===== SIDEBAR ===== */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-right:1px solid rgba(61,124,201,.18);
  display:flex;flex-direction:column;
  box-shadow:2px 0 16px rgba(13,43,107,.08);
  transition:transform var(--transition);
  z-index:100;
}
.sidebar-header{
  display:flex;align-items:center;gap:10px;
  padding:16px;
  border-bottom:1px solid rgba(61,124,201,.12);
}
.sidebar-logo{height:36px}
.sidebar-brand{
  font-family:var(--advocate);
  font-size:1rem;color:var(--navy);letter-spacing:.08em;font-weight:700;text-transform:uppercase;
}
.sidebar-user{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(61,124,201,.08);
}
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex-shrink:0;
}
.user-info{overflow:hidden;font-size:13px}
.user-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{color:rgba(13,43,107,.45);font-size:11px}
.sidebar-nav{padding:12px 8px 4px}
.nav-item{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:8px 12px;
  background:none;border:none;color:rgba(13,43,107,.55);
  cursor:pointer;border-radius:var(--radius-sm);
  font-size:13px;transition:background var(--transition),color var(--transition);
  text-align:left;
}
.nav-item:hover,.nav-item.active{
  background:rgba(61,124,201,.15);color:var(--navy);
}
.session-list{
  flex:1;overflow-y:auto;padding:4px 8px;
  display:flex;flex-direction:column;gap:2px;
}
.session-item{
  padding:8px 12px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:12px;color:rgba(13,43,107,.5);
  transition:background var(--transition);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.session-item:hover{background:rgba(61,124,201,.1)}
.session-item.active{background:rgba(61,124,201,.18);color:var(--navy);font-weight:500}
.sidebar-footer{
  padding:12px 16px;
  border-top:1px solid rgba(61,124,201,.08);
}

/* ===== CHAT AREA ===== */
.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.chat-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(61,124,201,.12);
  box-shadow:var(--shadow-sm);
}
.chat-title{flex:1;font-size:14px;color:rgba(13,43,107,.5)}
.status-indicator{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);
}
.status-indicator.disconnected{background:var(--red);box-shadow:0 0 6px var(--red)}
.messages-container{
  flex:1;overflow-y:auto;padding:20px 16px;
  display:flex;flex-direction:column;gap:16px;
  scroll-behavior:smooth;
}

/* ===== MESSAGES ===== */
.msg{display:flex;gap:10px;max-width:720px}
.msg.user{flex-direction:row-reverse;align-self:flex-end}
.msg-bubble{
  padding:11px 15px;border-radius:14px;
  line-height:1.7;font-size:14px;
  box-shadow:var(--shadow-sm);
}
.msg.assistant .msg-bubble{
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(61,124,201,.18);
  border-radius:4px 14px 14px 14px;
  color:var(--dark);
}
.msg.user .msg-bubble{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  border-radius:14px 14px 4px 14px;
}
.msg-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.msg.assistant .msg-avatar{background:rgba(61,124,201,.15);color:var(--navy)}
.msg.user .msg-avatar{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}

.cursor-blink::after{content:'|';color:var(--blue);animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.html-frame{
  border:1px solid rgba(61,124,201,.18);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.55);
  padding:16px;margin-top:8px;overflow-x:auto;
}
.html-frame table{border-collapse:collapse;width:100%;font-size:13px}
.html-frame th{
  background:rgba(61,124,201,.1);color:var(--navy);
  padding:6px 10px;text-align:left;font-weight:600;
}
.html-frame td{padding:5px 10px;border-bottom:1px solid rgba(61,124,201,.07)}

.badge-approved{
  display:inline-block;padding:4px 12px;
  background:rgba(39,174,96,.1);border:1px solid var(--green);
  color:var(--green);border-radius:20px;font-size:12px;
}
.badge-rejected{
  display:inline-block;padding:4px 12px;
  background:rgba(192,57,43,.08);border:1px solid var(--red);
  color:var(--red);border-radius:20px;font-size:12px;
}

/* ===== UPLOAD BAR ===== */
.upload-bar{
  padding:6px 16px;
  display:flex;align-items:center;gap:10px;
  border-top:1px solid rgba(61,124,201,.1);
  background:rgba(244,247,255,.6);
}
.upload-label{
  display:flex;align-items:center;gap:6px;
  color:rgba(13,43,107,.5);font-size:12px;
  cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);
  transition:color var(--transition),background var(--transition);
  white-space:nowrap;
}
.upload-label:hover{color:var(--navy);background:rgba(61,124,201,.1)}
.file-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;overflow:hidden}
.chip{
  display:flex;align-items:center;gap:4px;
  padding:3px 8px;background:rgba(61,124,201,.12);
  border-radius:20px;font-size:11px;color:var(--navy);
}
.chip .chip-remove{
  cursor:pointer;color:rgba(13,43,107,.4);
  background:none;border:none;font-size:13px;line-height:1;padding:0 0 0 2px;
}

/* ===== INPUT AREA ===== */
.input-area{
  display:flex;align-items:flex-end;gap:10px;
  padding:10px 16px 14px;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-top:1px solid rgba(61,124,201,.12);
  box-shadow:0 -2px 16px rgba(13,43,107,.06);
}
.msg-input{
  flex:1;resize:none;overflow-y:auto;max-height:140px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(61,124,201,.22);
  border-radius:var(--radius-sm);padding:10px 14px;
  color:var(--dark);font-family:'Inter',sans-serif;font-size:14px;
  outline:none;transition:border-color var(--transition),box-shadow var(--transition);
  scrollbar-width:thin;
  box-shadow:var(--shadow-sm);
}
.msg-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,124,201,.12)}
.msg-input::placeholder{color:rgba(13,43,107,.3)}
.btn-send{
  width:40px;height:40px;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;border:none;border-radius:var(--radius-sm);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:opacity var(--transition),box-shadow var(--transition);
}
.btn-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-send:not(:disabled):hover{box-shadow:0 4px 16px rgba(13,43,107,.3)}

/* ===== ADMIN STYLES ===== */
.admin-body{overflow:hidden}
.admin-app{flex-direction:column}
.admin-topnav{
  display:flex;align-items:center;gap:0;
  padding:0 16px;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(61,124,201,.18);
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
  min-height:52px;
  overflow:hidden;
}
.topnav-left{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;padding-right:12px;
  border-right:1px solid rgba(61,124,201,.15);
  margin-right:4px;
}
.topnav-left .sidebar-logo{height:30px}
.topnav-left .sidebar-brand{font-size:.9rem}
.topnav-right{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:12px;color:rgba(13,43,107,.5);
  flex-shrink:0;padding-left:8px;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:140px;
}
.admin-tabs{
  display:flex;gap:2px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;flex:1;
}
.admin-tabs::-webkit-scrollbar{display:none}
.tab-btn{
  padding:6px 12px;border:none;
  background:none;color:rgba(13,43,107,.5);
  cursor:pointer;border-radius:var(--radius-sm);font-size:13px;
  transition:background var(--transition),color var(--transition);
  white-space:nowrap;flex-shrink:0;
}
.tab-btn:hover{background:rgba(61,124,201,.1);color:var(--navy)}
.tab-btn.active{background:rgba(61,124,201,.18);color:var(--navy);font-weight:500}
.tab-panel{display:none;flex:1;overflow:auto;padding:16px}
.tab-panel.active{display:block}

.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:500px}
.data-table th{
  padding:8px 10px;text-align:left;
  color:var(--navy);font-weight:600;
  border-bottom:2px solid rgba(61,124,201,.18);
  white-space:nowrap;
}
.data-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(61,124,201,.07);
  vertical-align:middle;
}
.data-table tr:hover td{background:rgba(61,124,201,.04)}

.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:8px;
}
.panel-header h2{
  font-family:var(--advocate);
  font-size:1.4rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;
}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.select-sm,.input-sm{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(61,124,201,.2);
  color:var(--dark);border-radius:var(--radius-sm);
  padding:5px 10px;font-size:12px;outline:none;
  transition:border-color var(--transition);
}
.select-sm:focus,.input-sm:focus{border-color:var(--blue)}

.analysis-split{display:flex;gap:12px;height:calc(100vh - 120px)}
.detail-pane{
  flex:1;overflow-y:auto;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(61,124,201,.15);
  border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow-sm);
}
.detail-placeholder{color:rgba(13,43,107,.35);font-size:13px;padding:40px;text-align:center}
.admin-chat-pane{
  width:360px;flex-shrink:0;
  display:flex;flex-direction:column;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(61,124,201,.15);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.admin-chat-pane .messages-container{padding:10px}
.admin-chat-pane .input-area{padding:8px 10px 10px}

.checklist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.checklist-card{
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(61,124,201,.15);
  border-radius:var(--radius);padding:14px;
  box-shadow:var(--shadow-sm);
}
.checklist-card h4{color:var(--navy);font-size:13px;font-weight:600;margin-bottom:10px}
.check-item{
  display:flex;align-items:center;gap:8px;
  padding:4px 0;font-size:12px;color:var(--dark);
}
.check-item input[type=checkbox]{accent-color:var(--blue)}

.modal{
  position:fixed;inset:0;
  background:rgba(13,43,107,.25);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:9000;
}
.modal-card{
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(61,124,201,.25);
  border-radius:var(--radius);padding:24px;
  width:90%;max-width:460px;
  box-shadow:var(--shadow);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.modal-header h3{
  font-family:var(--advocate);
  font-size:1.1rem;color:var(--navy);font-weight:700;text-transform:uppercase;
}
.modal-body{font-size:13px;margin-bottom:18px;line-height:1.7;color:var(--dark-soft)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end}
.btn-primary{
  padding:8px 18px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;border:none;border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition);
}
.btn-primary:hover{box-shadow:0 4px 16px rgba(13,43,107,.3)}
.btn-secondary{
  padding:8px 18px;background:rgba(255,255,255,.7);
  color:rgba(13,43,107,.6);
  border:1px solid rgba(61,124,201,.2);
  border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;
  transition:background var(--transition);
}
.btn-secondary:hover{background:rgba(255,255,255,.95)}

.status-chip{
  display:inline-block;padding:2px 8px;
  border-radius:12px;font-size:11px;font-weight:500;
}
.status-open{background:rgba(0,153,187,.1);color:var(--cyan)}
.status-under_review{background:rgba(61,124,201,.15);color:var(--blue-dim)}
.status-approved{background:rgba(39,174,96,.1);color:var(--green)}
.status-rejected{background:rgba(192,57,43,.1);color:var(--red)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(61,124,201,.2);border-radius:2px}

@media(max-width:768px){
  :root{--sidebar-w:240px}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    box-shadow:4px 0 24px rgba(13,43,107,.15);
  }
  .sidebar.open{transform:translateX(0)}
  .analysis-split{flex-direction:column;height:auto;min-height:calc(100vh - 120px)}
  .admin-chat-pane{width:100%;height:380px}
  .topnav-right .admin-email{display:none}
  .tab-panel{padding:12px}
}
@media(max-width:480px){
  .login-card{padding:36px 24px}
  .messages-container{padding:14px 10px}
  .input-area{padding:8px 10px 12px}
  .upload-bar{padding:4px 10px}
}