/* ===========================================
   IRIS CHATBOX — css/chatbox.css
   Floating widget + popup for all pages
   =========================================== */

/* ── FLOATING CHAT BUTTON ── */
#irisFloatBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a4a6b, #2d6fa3);
  border: 2px solid #3d8fc4;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(45,111,163,.55);
  transition: .25s;
  z-index: 8000;
  user-select: none;
}
#irisFloatBtn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 32px rgba(45,111,163,.75);
}
#irisFloatBtn .chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e05252;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #0a1218;
}
#irisFloatBtn .chat-badge.show { display: flex; }

/* ── FLOATING CHAT PANEL ── */
#irisChatPanel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: 540px;
  background: #0f1a24;
  border: 1px solid #1f3349;
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  display: none;
  flex-direction: column;
  z-index: 8001;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
#irisChatPanel.open { display: flex; }

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  background: #0f1820;
  border-bottom: 1px solid #1f3349;
  flex-shrink: 0;
}
.chat-panel-header .chat-title {
  font-size: 14px;
  font-weight: 700;
  color: #e7edf5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-panel-header .chat-title span {
  font-size: 16px;
}
.chat-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-refresh-btn {
  background: #1a3550;
  border: 1px solid #2a4f70;
  color: #8eb4db;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: .2s;
  flex-shrink: 0;
}
.chat-refresh-btn:hover { background: #213f5f; color: #fff; transform: rotate(180deg); }
.chat-refresh-btn.spinning { animation: spin .5s linear; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.chat-close-btn {
  background: none;
  border: none;
  color: #8fb3d1;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: .2s;
  line-height: 1;
}
.chat-close-btn:hover { color: #fff; background: #1f3349; }

/* ── MESSAGES LIST ── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: #2a4a68; border-radius: 10px; }

.chat-msg-item {
  background: #14293b;
  border: 1px solid #24405a;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 12px;
  line-height: 1.55;
  position: relative;
  animation: msgIn .25s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.chat-msg-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #b0c8e0;
}
.chat-msg-type.job_added    { color: #7be0a8; }
.chat-msg-type.status_change { color: #8ec5ff; }
.chat-msg-type.job_updated  { color: #ffd580; }
.chat-msg-type.general      { color: #b0c8e0; }

.chat-msg-sender {
  font-size: 10px;
  font-weight: 600;
  color: #6a9fc9;
  background: #14283a;
  border: 1px solid #204163;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

/* ── DATE SECTION DIVIDER ── */
.chat-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 2px;
  position: relative;
}
.chat-date-divider span {
  background: #16232f;
  border: 1px solid #223650;
  color: #9fc4e3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 1;
}
.chat-date-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #1f3349;
  z-index: 0;
}

.chat-msg-text {
  color: #f0f6fc;
  font-weight: 500;
  word-break: break-word;
}
.chat-msg-time {
  font-size: 10px;
  color: #8fb3d1;
  margin-top: 6px;
  text-align: right;
}

/* ── JOB META LINE (inspection date + vendor location, under the message text) ── */
.chat-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.chat-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #d3e6f7;
  background: #182f45;
  border: 1px solid #2a4a68;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.chat-msg-new-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cde88;
  animation: pulsedot 1.6s infinite;
}
@keyframes pulsedot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.5); }
}
.chat-empty {
  text-align: center;
  color: #7fa3c4;
  font-size: 13px;
  padding: 30px 0;
}

/* ── VIEW-JOB / DELETE ICON BUTTONS (message top row) ── */
.chat-msg-viewjob-btn,
.chat-msg-delete-btn {
  background: #182f45;
  border: 1px solid #2a4a68;
  color: #cfe3f5;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: .2s;
}
.chat-msg-viewjob-btn:hover { background: #24405a; color: #fff; }
.chat-msg-delete-btn:hover { background: #4a1e1e; border-color: #6b2d2d; color: #ff9090; }

/* ── FILE / IMAGE ATTACHMENTS ── */
.chat-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #182f45;
  border: 1px solid #2a4a68;
  border-radius: 10px;
  padding: 8px 10px;
}
.chat-file-row-compact { margin-top: 6px; padding: 6px 10px; }
.chat-file-icon { font-size: 18px; flex-shrink: 0; }
.chat-file-meta { flex: 1; min-width: 0; }
.chat-file-name {
  font-size: 12px;
  font-weight: 600;
  color: #f0f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.chat-file-size { font-size: 10.5px; color: #8fb3d1; margin-top: 2px; }
.chat-file-view,
.chat-file-dl {
  color: #cfe3f5;
  font-size: 15px;
  text-decoration: none;
  flex-shrink: 0;
  transition: .2s;
}
.chat-file-view:hover,
.chat-file-dl:hover { color: #fff; }
.chat-file-warning {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #ff9090;
  background: #3a1515;
  border: 1px solid #6b2d2d;
  border-radius: 8px;
  padding: 6px 10px;
}

.chat-img-link { display: block; margin-top: 4px; }
.chat-img-thumb {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  border: 1px solid #24405a;
  display: block;
}

/* ── VOICE MESSAGE PLAYER (inside a message bubble) ── */
.chat-voice-msg {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-voice-msg-icon { font-size: 16px; flex-shrink: 0; }
.chat-voice-msg audio { flex: 1; height: 32px; }

/* ── INPUT ROW ── */
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #0f1820;
  border-top: 1px solid #1f3349;
  flex-shrink: 0;
}
.chat-input-row input {
  flex: 1;
  background: #0b1520;
  border: 1px solid #1c2b3a;
  border-radius: 10px;
  color: #dce8f5;
  padding: 10px 13px;
  font-size: 13px;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
.chat-input-row input::placeholder { color: #6a90b3; }
.chat-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg,#1a5c9e,#2d7fc4);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  flex-shrink: 0;
}
.chat-send-btn:hover { background: linear-gradient(135deg,#2266b0,#3890d8); }

/* ── ATTACH + VOICE BUTTONS (floating panel) ── */
.chat-attach-btn,
.chat-voice-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #1a3550;
  border: 1px solid #2a4f70;
  color: #8eb4db;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  flex-shrink: 0;
  padding: 0;
}
.chat-attach-btn:hover { background: #213f5f; color: #fff; }
.chat-voice-btn:hover  { background: #213f5f; color: #fff; }
.chat-voice-btn.recording {
  background: #3a1515;
  border-color: #8d3030;
  color: #ff8080;
  animation: recPulse .9s infinite;
}
@keyframes recPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}

/* ── VOICE BAR ── */
.chat-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #1a0f0f;
  border-top: 1px solid #3a1515;
  font-size: 12px;
  color: #ff9090;
  flex-shrink: 0;
}
.chat-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e05252;
  flex-shrink: 0;
  animation: recPulse .8s infinite;
}
#chatVoiceTimer {
  margin-left: auto;
  font-size: 11px;
  color: #c07070;
  font-weight: 600;
}
.chat-voice-stop {
  background: #3a1515;
  border: 1px solid #6b2d2d;
  color: #ff9090;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .18s;
  flex-shrink: 0;
}
.chat-voice-stop:hover { background: #521a1a; color: #fff; }

/* ── REALTIME POPUP TOAST (all pages) ── */
#irisNotifToast {
  position: fixed;
  bottom: 100px;
  right: 28px;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: #0f1a24;
  border: 1px solid #1e6b3e;
  border-left: 5px solid #3ddb7a;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
  z-index: 9000;
  opacity: 0;
  transform: translateX(420px);
  transition: .4s cubic-bezier(.22,.68,0,1.2);
  font-family: 'Poppins', sans-serif;
  pointer-events: none;
}
#irisNotifToast.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
#irisNotifToast.status_change { border-left-color: #3d9fff; border-color: #1e4a7e; }
#irisNotifToast.job_updated   { border-left-color: #ffd050; border-color: #5a4a00; }

.notif-toast-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #3ddb7a;
  margin-bottom: 6px;
}
#irisNotifToast.status_change .notif-toast-type { color: #3d9fff; }
#irisNotifToast.job_updated   .notif-toast-type { color: #ffd050; }

.notif-toast-text {
  font-size: 13px;
  color: #f0f6fc;
  font-weight: 600;
  line-height: 1.5;
}
.notif-toast-time {
  font-size: 10px;
  color: #8fb3d1;
  margin-top: 6px;
}
.notif-toast-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #4a6a88;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.notif-toast-close:hover { color: #fff; }

/* ── LOADING SPINNER ── */
.chat-loading {
  text-align: center;
  padding: 20px;
  color: #7fa3c4;
  font-size: 13px;
}
.chat-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #2a4f70;
  border-top-color: #3d9fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}