:root{
  --primary-color: #00D1D1;
  --primary-dark: #00B8B8;
  --bg-color: #f4f7f9;
  --card-color: #ffffff;
  --text-color: #333;
  --font-family: 'Poppins', sans-serif;
  --border-radius: 16px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family);}
body{background:var(--bg-color);color:var(--text-color);}
.container{max-width:500px;margin:0 auto;padding:20px;}

.navbar{background:var(--primary-color);color:#fff;padding:15px 20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.1);position:sticky;top:0;z-index:10;}
.navbar img { height: 32px; margin-right: 10px; display: none; border-radius: 6px; }
.navbar h2{font-weight:700;font-size:18px;}

.btn{background:var(--primary-color);color:#fff;padding:14px 20px;border:none;border-radius:var(--border-radius);cursor:pointer;font-weight:600;width:100%;margin-top:12px;transition:0.2s;font-size:15px;}
.btn:hover{background:var(--primary-dark);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color);}
.btn-outline:hover{background:var(--primary-color);color:#fff;}

.card{background:var(--card-color);padding:20px;border-radius:var(--border-radius);box-shadow:0 4px 15px rgba(0,0,0,0.06);margin-top:20px;width: 100%;overflow: hidden;}

.form-group{margin-bottom:15px;}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:14px;color:#555;}
.form-group input,.form-group select{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;font-size:15px;}
.form-group input:focus{border-color:var(--primary-color); outline:none;}

/* ===== CHAT FIX FINAL ===== */
#chatBox {
  height: 300px; 
  overflow-y: auto; 
  border: 1px solid #ddd; 
  padding: 12px; 
  border-radius: 12px;
  margin-bottom: 10px;
  display: flex; 
  flex-direction: column; 
  gap: 8px;
  background: #f9fafb;
}

.chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center; /* BIAR SEJAJAR TENGAH */
  width: 100%;
}

.chat-input-wrap input {
  flex: 1 1 0%; /* KUNCI 1: BIAR MAU MENGECIL */
  min-width: 0; /* KUNCI 2: BIAR GA JEBOL */
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 15px;
}
.chat-input-wrap input:focus {border-color: var(--primary-color); outline: none;}

.btn-kirim {
  flex: 0 0 auto; /* KUNCI 3: JANGAN DIKECILIN */
  padding: 12px 18px; /* KASIH PADDING ATAS BAWAH BIAR TINGGI SAMA */
  border-radius: 12px;
  border: none;
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-kirim:hover { background: var(--primary-dark); }

/* Bubble Chat */
.chat-bubble { padding: 10px 12px; border-radius: 16px; max-width: 75%; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.05);}
.chat-bubble.me { background: #dcfce7; align-self: flex-end; border-bottom-right-radius: 4px;}
.chat-bubble.lawan { background: #dbeafe; align-self: flex-start; border-bottom-left-radius: 4px;}
.chat-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; gap: 6px; font-weight: 600;}
.chat-time { color: #666; font-weight: 400; }
.chat-text { font-size: 14px; line-height: 1.4; }
.chat-ceklis { text-align: right; font-size: 12px; color: #0ea5e9; margin-top: 2px; }

/* HAPUS YG LAMA */
.chat-saya, .chat-lain { display: none; }

.stat-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.stat-box { cursor: pointer; transition: 0.2s; }
.stat-box:hover { transform: scale(1.03); background: #eef; }
.stat-box.ijo { border-left: 5px solid #28a745; }
.stat-box.ijo i { color: #28a745; }

.popup { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.popup-content { background: white; margin: 15% auto; padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; }
.close { float: right; font-size: 28px; cursor: pointer; }
#popupList p { padding: 8px; border-bottom: 1px solid #eee; }