/* AJAF Chat v1.0 - Client interface */

/* Layout */
.chat-app{display:grid;grid-template-rows:auto 1fr;height:100vh}
.main-content{display:grid;grid-template-columns:1fr;height:calc(100vh - 60px);overflow:hidden}

/* Login */
.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background:var(--soft)}
.login-card{background:var(--white);border-radius:12px;padding:40px;box-shadow:var(--shadow-md);border:1px solid var(--line);width:100%;max-width:400px}
.login-card h2{font-size:24px;font-weight:300;margin:0 0 8px;color:var(--ink);display:flex;align-items:center;gap:12px}
.login-card .lock-icon{font-size:20px;color:var(--blue)}
.login-card p{color:var(--muted);margin:0 0 32px}
.forgot-password{text-align:center;margin:16px 0 0}
.forgot-password a{color:var(--muted);text-decoration:none;font-size:14px}
.forgot-password a:hover{color:var(--blue);text-decoration:underline}

/* Info Box */
.info-box{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:24px;box-shadow:var(--shadow-sm);width:100%;max-width:400px}
.info-box.info{border-left:4px solid var(--blue);background:linear-gradient(90deg,rgba(0,0,145,.05),var(--white))}
.info-box h3{font-size:18px;font-weight:400;margin:0 0 12px;color:var(--blue)}
.info-box p{margin:0;color:var(--ink);line-height:1.6}

/* Chat */
.chat-container{display:grid;grid-template-rows:auto 1fr auto;height:100%;background:var(--white)}
.chat-header{padding:16px 24px;background:var(--white);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.quota-info{font-size:13px;color:var(--muted)}
.quota-info.visible{color:var(--ink)}

.chat-messages{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:var(--soft);scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-track{background:var(--soft)}
.chat-messages::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* Messages */
.message{display:flex;gap:12px;max-width:85%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;animation:slideIn .3s ease-out}
.message.user{margin-left:auto;flex-direction:row-reverse}
.message-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.message.user .message-avatar{background:var(--blue);color:var(--white)}
.message.bot .message-avatar{background:var(--white);border:2px solid var(--line);color:var(--ink)}
.message-content{background:var(--white);border-radius:12px;padding:16px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.message.user .message-content{background:var(--blue);color:var(--white);border-color:var(--blue)}
.message-content p{margin:0 0 12px}
.message-content p:last-child{margin:0}
.message-content strong{font-weight:600}

/* Loading */
.loading-indicator{display:flex;align-items:center;gap:12px;padding:16px 24px;margin:8px 0}
.loading-indicator .robot-emoji{font-size:20px}
.loading-text{color:#999;font-size:14px;font-weight:400}
.loading-dots{display:inline-block}
.loading-dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%,20%{content:''}40%{content:'.'}60%{content:'..'}80%,100%{content:'...'}}

/* Input */
.chat-input-area{padding:24px;background:var(--white);border-top:1px solid var(--line)}
.input-container{position:relative;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.input-container:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,0,145,.1)}
.chat-textarea{width:100%;border:none;background:transparent;padding:16px;font-size:15px;resize:none;min-height:60px;max-height:150px;font-family:inherit;line-height:1.5}
.chat-textarea:focus{outline:none}
.chat-textarea::placeholder{color:var(--muted)}
.input-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 12px 12px}
.char-counter{font-size:12px;color:var(--muted)}
.char-counter.warning{color:var(--warning)}
.char-counter.danger{color:var(--danger)}
.input-actions{display:flex;gap:8px}

/* Status */
.status-message{font-size:13px;padding:8px 0;text-align:center}
.status-message.error{color:var(--danger)}
.status-message.success{color:var(--success)}
.status-message.info{color:var(--blue)}

/* Nav info */
.nav-info{display:flex;align-items:center;gap:16px}
.nav-links{display:flex;gap:8px}
.org-info{font-size:14px}
.org-name{font-weight:500;color:var(--ink)}
.org-type{color:var(--muted);font-size:12px}

/* Animations */
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:768px){
  .chat-messages{padding:16px}
  .message{max-width:95%}
  .chat-input-area{padding:16px}
  .login-container{padding:20px}
  .login-card{padding:24px}
  .info-box{margin-top:16px;padding:20px}
  .nav-info{flex-direction:column;align-items:flex-end;gap:8px}
  .nav-links{order:1}
  .org-info{text-align:right;font-size:12px;order:2}
}
@media(max-width:480px){
  .logo-text p{display:none}
  .nav-links{gap:4px}
  .nav-links .btn{padding:6px 12px;font-size:12px}
  .input-footer{flex-direction:column;align-items:stretch;gap:8px}
  .input-actions{justify-content:space-between}
}