/* style.css — Kurumsal tema: beyaz / siyah / #a81c24 */
:root{
  --brand:#a81c24;
  --black:#000;
  --white:#fff;
  --muted:#f1f1f1;
  --inbound-bg:#f5f6f7;
  --inbound-stripe:#a81c24;
  --outbound-bg:#000;
  --outbound-color:#fff;
  --max-width:1200px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial; background:var(--white);color:#111}

/* Header */
.app-header{height:64px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.app-header .brand{font-weight:700}
.user-actions{display:flex;align-items:center;gap:12px}
.user-name{opacity:0.95}
.logout-btn{background:var(--black);color:var(--white);padding:6px 10px;border-radius:6px;text-decoration:none}

/* Layout */
.app-main{display:flex;height:calc(100vh - 64px);max-width:var(--max-width);margin:0 auto}
.rooms-panel{width:280px;border-right:1px solid var(--muted);background:var(--white);overflow:auto}
.rooms-header{padding:14px;font-weight:600;border-bottom:1px solid var(--muted)}
.rooms-list{list-style:none;margin:0;padding:0}
.room-item{padding:12px 14px;border-bottom:1px solid #f8f8f8;cursor:pointer;display:flex;flex-direction:column}
.room-item[data-active="1"]{background:linear-gradient(90deg, rgba(168,28,36,0.06), transparent)}
.room-name{font-weight:600}
.room-type{font-size:12px;color:#666;margin-top:4px}

/* Chat panel */
.chat-panel{flex:1;display:flex;flex-direction:column}
.chat-window{flex:1;padding:18px;overflow:auto;background:var(--white)}
.msg-form{display:flex;padding:12px;border-top:1px solid var(--muted);gap:8px;background:var(--white)}
#msg-input{flex:1;padding:12px;border-radius:8px;border:1px solid #ddd;font-size:15px}
.send-btn{background:var(--black);color:var(--white);padding:10px 14px;border-radius:8px;border:none}

/* Message styles */
.message{max-width:78%;margin-bottom:12px;padding:10px;border-radius:10px;position:relative;word-break:break-word}
.message .meta{font-size:12px;color:#333;margin-bottom:6px}
.inbound{background:var(--inbound-bg);align-self:flex-start;border-left:6px solid var(--inbound-stripe)}
.outbound{background:var(--outbound-bg);color:var(--outbound-color);align-self:flex-end}

/* Auth pages */
.auth-page{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--white)}
.auth-card{width:100%;max-width:420px;padding:24px;border-radius:10px;box-shadow:0 6px 30px rgba(0,0,0,0.06);background:var(--white)}
.auth-card h1{margin:0 0 16px}
.auth-form label{display:block;margin-bottom:10px;font-size:14px}
.auth-form input{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd}
.btn-primary{background:var(--brand);color:var(--white);padding:10px 14px;border-radius:8px;border:none}
.link{color:var(--brand);text-decoration:none}
.alert{padding:10px;border-radius:8px;margin-bottom:12px}
.alert-error{background:#fff0f0;border:1px solid #f3c1c3;color:#7a1a1a}
.alert-success{background:#f0fff6;border:1px solid #c7f0df;color:#1a6f3a}

/* PWA install banner */
.pwa-install-banner{position:fixed;left:16px;right:16px;bottom:20px;padding:12px;background:var(--white);border:1px solid #eee;border-radius:8px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 24px rgba(0,0,0,0.08);z-index:9999}
.install-btn{background:var(--brand);color:var(--white);padding:8px 12px;border-radius:8px;border:none}

/* Responsive */
@media (max-width:900px){
  .rooms-panel{display:none}
  .app-main{height:calc(100vh - 64px)}
  .message{max-width:92%}
}

@media (max-width:420px){
  .auth-card{padding:18px;margin:12px;border-radius:12px}
  .app-header{padding:0 10px}
}