/* ClearPlan Messages — messages.css v1.3 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

.cppm-wrap, .cppm-wrap * { box-sizing: border-box; }
.cppm-wrap {
  font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #1A2A3A;
  display: flex; flex-direction: column;
  min-height: 600px; max-width: 1100px; margin: 0 auto;
  border: 1px solid #D8DFE8; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
}

/* ---- Login ---- */
.cppm-login-box { text-align:center; padding:4rem 2rem; background:#F2F4F7; }
.cppm-login-box svg { width:48px;height:48px;stroke:#D4900A;display:block;margin:0 auto 1rem; }
.cppm-login-box p { color:#1A2A3A!important;font-size:1rem; }
.cppm-login-box a { color:#D4900A!important;text-decoration:underline; }

/* ---- Header ---- */
.cppm-header {
  background:#07111F!important; border-bottom:2px solid #D4900A;
  padding:.85rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-shrink:0;
}
.cppm-header-left  { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.cppm-header-right { display:flex; align-items:center; gap:.65rem; }
.cppm-header-title {
  display:flex; align-items:center; gap:.55rem;
  font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:#FFFFFF!important; font-weight:500;
}
.cppm-header-title svg { width:18px;height:18px;stroke:#F0AC28;flex-shrink:0; }
.cppm-back-link {
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:#F0AC28!important; text-decoration:none!important;
  border:1px solid rgba(240,172,40,.5); padding:.3rem .65rem; border-radius:3px;
  transition:background .15s,color .15s; white-space:nowrap;
}
.cppm-back-link:hover { background:rgba(240,172,40,.12)!important;color:#FFFFFF!important; }
.cppm-back-link svg { width:13px;height:13px;stroke:currentColor; }
.cppm-header-user { font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.08em;color:rgba(255,255,255,.8)!important;white-space:nowrap; }
.cppm-admin-tag { background:rgba(212,144,10,.2);color:#F0AC28!important;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .5rem;border-radius:10px; }
.cppm-admin-avatar-sm { width:28px;height:28px;border-radius:50%;border:2px solid rgba(240,172,40,.5);object-fit:cover; }

/* New Conversation button */
.cppm-new-thread-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(212,144,10,.18)!important; color:#F0AC28!important;
  border:1px solid rgba(212,144,10,.5)!important; border-radius:3px;
  padding:.32rem .75rem; cursor:pointer; transition:background .15s,color .15s;
}
.cppm-new-thread-btn:hover { background:rgba(212,144,10,.32)!important; color:#FFFFFF!important; }
.cppm-new-thread-btn svg { width:13px;height:13px;stroke:currentColor; }

/* ---- Empty state ---- */
.cppm-empty-state {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4rem 2rem; text-align:center; background:#F5F6F8;
}
.cppm-empty-state svg { width:56px;height:56px;stroke:#D8DFE8;display:block;margin:0 auto 1rem; }
.cppm-empty-state p { color:#5A6E85!important;font-size:.95rem;max-width:380px; }
.cppm-empty-state strong { color:#1A2A3A!important; }

/* ---- Layout ---- */
.cppm-layout { display:flex; flex:1; overflow:hidden; background:#F5F6F8; min-height:0; }

/* ---- Sidebar ---- */
.cppm-sidebar {
  width:240px; min-width:200px; flex-shrink:0;
  background:#0D1E35!important; border-right:1px solid rgba(255,255,255,.08);
  overflow-y:auto; display:flex; flex-direction:column;
}
.cppm-sidebar-label { padding:.75rem 1rem .5rem; font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)!important;border-bottom:1px solid rgba(255,255,255,.06); }
.cppm-thread-row { padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); border-left:3px solid transparent; cursor:pointer; transition:background .15s,border-left-color .15s; }
.cppm-thread-row:hover { background:rgba(255,255,255,.06)!important; }
.cppm-thread-row.active { background:rgba(212,144,10,.12)!important;border-left-color:#D4900A!important; }
.cppm-thread-row__name { display:flex;align-items:center;justify-content:space-between;gap:.4rem;font-size:.95rem;font-weight:700;color:rgba(255,255,255,.92)!important;margin-bottom:.25rem;line-height:1.2; }
.cppm-thread-row.active .cppm-thread-row__name { color:#FFFFFF!important; }
.cppm-thread-row__sub { font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)!important; }
.cppm-thread-row__address { font-family:'DM Sans','DM Mono',monospace;font-size:.8rem;letter-spacing:.01em;color:rgba(212,144,10,.75)!important;margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400; }
.cppm-thread-row.active .cppm-thread-row__address { color:rgba(240,172,40,.9)!important; }
.cppm-thread-row__client { font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.3)!important;margin-top:.15rem;font-family:'DM Mono',monospace; }
.cppm-thread-row.active .cppm-thread-row__client { color:rgba(255,255,255,.45)!important; }
.cppm-unread-badge { background:#D4900A!important;color:#FFFFFF!important;font-family:'DM Mono',monospace;font-size:.58rem;padding:.1rem .4rem;border-radius:10px;flex-shrink:0; }

/* ---- Chat panel ---- */
.cppm-chat-panel { flex:1;display:flex;flex-direction:column;overflow:hidden;background:#FFFFFF;min-width:0; }

.cppm-chat-header {
  background:#F8F9FB!important; border-bottom:1px solid #D8DFE8;
  padding:.75rem 1.25rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.cppm-chat-header-left { display:flex; align-items:baseline; gap:.75rem; min-width:0; }
.cppm-chat-header-title { font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:#1A2A3A!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cppm-chat-header-sub { font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#D4900A!important; }
.cppm-chat-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.cppm-action-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  background:#F2F4F7!important; color:#5A6E85!important; border:1px solid #D8DFE8!important;
  border-radius:3px; padding:.3rem .7rem; cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.cppm-action-btn:hover { background:#E8EDF3!important;border-color:#D4900A!important;color:#D4900A!important; }
.cppm-action-btn:disabled { opacity:.6;cursor:not-allowed; }
.cppm-action-btn svg { width:13px;height:13px;stroke:currentColor; }

/* ---- Messages area ---- */
.cppm-messages-area { flex:1;overflow-y:auto;padding:1.25rem;background:#F5F6F8;display:flex;flex-direction:column;gap:.75rem;min-height:0; }
.cppm-placeholder, .cppm-empty-chat { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem; }
.cppm-placeholder svg { width:40px;height:40px;stroke:#D8DFE8;display:block;margin:0 auto .75rem; }
.cppm-placeholder p, .cppm-empty-chat p { color:#5A6E85!important;font-size:.875rem;margin:0; }
.cppm-loading-msg { display:flex;align-items:center;justify-content:center;gap:.5rem;color:#5A6E85!important;font-size:.875rem;padding:2rem;text-align:center; }
.cppm-spinner { width:16px;height:16px;border:2px solid #D8DFE8;border-top-color:#D4900A;border-radius:50%;animation:cppm-spin .75s linear infinite; }
@keyframes cppm-spin { to { transform:rotate(360deg); } }

/* ---- Bubbles ---- */
.cppm-msg { display:flex;flex-direction:column;max-width:72%;gap:.2rem; }
.cppm-msg--mine   { align-self:flex-end;  align-items:flex-end; }
.cppm-msg--theirs { align-self:flex-start;align-items:flex-start; }
.cppm-msg-meta-top { display:flex;align-items:center;gap:.45rem;margin-bottom:.15rem; }
.cppm-msg--mine   .cppm-msg-meta-top { flex-direction:row-reverse; }
.cppm-msg-sender { font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#5A6E85!important; }
.cppm-msg-sender--mine { color:#D4900A!important; }
.cppm-msg-avatar { width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #D8DFE8;flex-shrink:0; }
.cppm-msg-bubble-wrap { display:flex;flex-direction:column;gap:.35rem; }
.cppm-bubble { padding:.65rem .95rem;border-radius:8px;font-size:.9rem;line-height:1.55;word-break:break-word; }
.cppm-msg--mine   .cppm-bubble { background:#07111F!important;color:#FFFFFF!important;border-bottom-right-radius:2px; }
.cppm-msg--theirs .cppm-bubble { background:#FFFFFF!important;color:#1A2A3A!important;border:1px solid #D8DFE8;border-bottom-left-radius:2px; }
.cppm-bubble--file { background:transparent!important;border:none!important;padding:0!important; }
.cppm-file-link { display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:6px;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.05em;text-decoration:none!important;transition:opacity .15s; }
.cppm-file-link svg { width:14px;height:14px;stroke:currentColor;flex-shrink:0; }
.cppm-msg--mine   .cppm-file-link { background:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.2); }
.cppm-msg--theirs .cppm-file-link { background:#F2F4F7!important;color:#D4900A!important;border:1px solid #D8DFE8; }
.cppm-file-link:hover { opacity:.8; }
.cppm-msg-image { display:block;max-width:280px;max-height:220px;border-radius:6px;object-fit:contain;margin-bottom:.35rem; }

/* Message footer: time + admin actions */
.cppm-msg-footer { display:flex; align-items:center; gap:.6rem; }
.cppm-msg--mine  .cppm-msg-footer { flex-direction:row-reverse; }
.cppm-msg-time { font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.05em;color:#8a9ab0!important;padding:0 .2rem; }
.cppm-edited-tag { color:#8a9ab0!important;font-style:italic; }
.cppm-msg-actions { display:flex;align-items:center;gap:.3rem;opacity:0;transition:opacity .15s; }
.cppm-msg:hover .cppm-msg-actions { opacity:1; }
.cppm-msg-act {
  font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  background:none!important; border:1px solid #D8DFE8!important; border-radius:2px;
  padding:.15rem .45rem; cursor:pointer; color:#5A6E85!important; transition:all .15s;
}
.cppm-msg-edit:hover  { border-color:#D4900A!important;color:#D4900A!important; }
.cppm-msg-delete:hover { border-color:#DC2626!important;color:#DC2626!important; }

/* Inline edit */
.cppm-inline-edit { width:100%; }
.cppm-edit-textarea {
  width:100%; border:1px solid #D4900A!important; border-radius:4px;
  padding:.55rem .75rem; font-family:'DM Sans',sans-serif; font-size:.9rem;
  color:#FFFFFF!important; background:#07111F!important;
  resize:vertical; outline:none; min-height:60px; line-height:1.5;
}
.cppm-edit-actions { display:flex;gap:.4rem;margin-top:.4rem; }
.cppm-edit-save  { background:#D4900A!important;color:#FFFFFF!important;border-color:#D4900A!important; }
.cppm-edit-cancel { color:#5A6E85!important; }

/* ---- Composer ---- */
.cppm-composer { border-top:1px solid #D8DFE8;background:#FFFFFF!important;padding:.85rem 1rem;flex-shrink:0; }
.cppm-textarea {
  display:block; width:100%; border:1px solid #D8DFE8!important; border-radius:6px;
  padding:.65rem .85rem; font-family:'DM Sans',sans-serif; font-size:.9rem;
  color:#1A2A3A!important; background:#F8F9FB!important; resize:none; outline:none;
  transition:border-color .2s,box-shadow .2s; line-height:1.5; margin-bottom:.6rem;
}
.cppm-textarea:focus { border-color:#D4900A!important;box-shadow:0 0 0 3px rgba(212,144,10,.1);background:#FFFFFF!important; }
.cppm-textarea::placeholder { color:#8a9ab0!important; }
.cppm-composer-toolbar { display:flex;align-items:center;gap:.65rem;flex-wrap:wrap; }
.cppm-attach-label {
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  color:#5A6E85!important; cursor:pointer; padding:.4rem .7rem;
  border:1px solid #D8DFE8; border-radius:3px; background:#F2F4F7!important;
  transition:border-color .15s,background .15s,color .15s; white-space:nowrap;
}
.cppm-attach-label:hover { border-color:#D4900A!important;color:#D4900A!important;background:rgba(212,144,10,.06)!important; }
.cppm-attach-label svg { width:14px;height:14px;stroke:currentColor; }
.cppm-file-chosen { font-family:'DM Mono',monospace;font-size:.65rem;color:#D4900A!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cppm-send-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  background:#D4900A!important; color:#FFFFFF!important;
  font-family:'DM Mono',monospace; font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem 1.2rem; border:none; border-radius:3px; cursor:pointer;
  transition:background .2s,transform .15s,box-shadow .2s; margin-left:auto;
  box-shadow:0 2px 10px rgba(212,144,10,.3);
}
.cppm-send-btn:hover { background:#F0AC28!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,144,10,.4); }
.cppm-send-btn:disabled { opacity:.65;cursor:not-allowed;transform:none!important; }
.cppm-send-btn svg { width:14px;height:14px;stroke:#FFFFFF; }
.cppm-send-feedback { margin-top:.5rem;font-size:.82rem;padding:.4rem .7rem;border-radius:3px; }
.cppm-feedback--error   { background:rgba(220,38,38,.08)!important;color:#991b1b!important;border:1px solid rgba(220,38,38,.2); }
.cppm-feedback--success { background:rgba(5,150,105,.08)!important;color:#065f46!important;border:1px solid rgba(5,150,105,.2); }

/* ================================================================
   NEW CONVERSATION MODAL
================================================================ */
.cppm-modal-backdrop {
  position:fixed; inset:0; background:rgba(7,17,31,.65);
  display:flex; align-items:center; justify-content:center;
  z-index:99999; padding:1rem;
}
.cppm-modal {
  background:#FFFFFF!important; border-radius:8px; width:100%; max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column;
  max-height:90vh; overflow:hidden;
}
.cppm-modal-header {
  background:#07111F!important; border-bottom:2px solid #D4900A;
  padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between;
}
.cppm-modal-title {
  font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:.06em; text-transform:uppercase;
  color:#FFFFFF!important;
}
.cppm-modal-close {
  background:none!important; border:none!important; color:rgba(255,255,255,.6)!important;
  font-size:1.5rem; cursor:pointer; line-height:1; padding:.1rem .4rem; border-radius:3px;
  transition:color .15s,background .15s;
}
.cppm-modal-close:hover { color:#FFFFFF!important;background:rgba(255,255,255,.1)!important; }

.cppm-modal-body { padding:1.25rem 1.5rem; overflow-y:auto; flex:1; }
.cppm-modal-field { margin-bottom:1rem; }
.cppm-modal-field label {
  display:block; font-family:'DM Mono',monospace; font-size:.7rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#5A6E85!important; margin-bottom:.4rem;
}
.cppm-req { color:#DC2626!important; }
.cppm-modal-input, .cppm-modal-textarea {
  width:100%; border:1px solid #D8DFE8!important; border-radius:4px;
  padding:.6rem .85rem; font-family:'DM Sans',sans-serif; font-size:.9rem;
  color:#1A2A3A!important; background:#F8F9FB!important; outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.cppm-modal-input:focus, .cppm-modal-textarea:focus {
  border-color:#D4900A!important; box-shadow:0 0 0 3px rgba(212,144,10,.1);
  background:#FFFFFF!important;
}
.cppm-modal-textarea { resize:vertical; line-height:1.5; }
.cppm-modal-input::placeholder, .cppm-modal-textarea::placeholder { color:#8a9ab0!important; }

/* User search results dropdown */
.cppm-user-results {
  position:relative; border:1px solid #D8DFE8; border-top:none;
  border-radius:0 0 4px 4px; background:#FFFFFF!important;
  max-height:180px; overflow-y:auto; z-index:10;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.cppm-user-result {
  padding:.6rem .85rem; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:.75rem; transition:background .12s;
  border-bottom:1px solid #F2F4F7;
}
.cppm-user-result:last-child { border-bottom:none; }
.cppm-user-result:hover { background:#F2F4F7!important; }
.cppm-no-results { color:#5A6E85!important;cursor:default!important;font-style:italic;font-size:.875rem; }
.cppm-ur-name  { font-weight:600;font-size:.875rem;color:#1A2A3A!important; }
.cppm-ur-email { font-family:'DM Mono',monospace;font-size:.65rem;color:#5A6E85!important; }

/* Selected user display */
.cppm-sel-user {
  display:flex; align-items:center; gap:.75rem;
  background:#F2F4F7; border:1px solid #D8DFE8; border-radius:4px;
  padding:.5rem .85rem; margin-top:.4rem;
}
.cppm-sel-name  { font-weight:600;color:#1A2A3A!important;font-size:.875rem; }
.cppm-sel-email { font-family:'DM Mono',monospace;font-size:.65rem;color:#5A6E85!important;flex:1; }
.cppm-sel-clear {
  background:none!important;border:none!important;color:#DC2626!important;
  cursor:pointer;font-size:1.1rem;line-height:1;padding:0 .2rem;
}
.cppm-modal-error { color:#DC2626!important;font-size:.82rem;background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.2);border-radius:3px;padding:.5rem .75rem; }

.cppm-modal-footer {
  border-top:1px solid #D8DFE8; padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:flex-end; gap:.75rem;
  background:#F8F9FB!important;
}
.cppm-modal-cancel {
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:none!important;border:1px solid #D8DFE8!important;border-radius:3px;
  padding:.5rem 1rem;cursor:pointer;color:#5A6E85!important;transition:all .15s;
}
.cppm-modal-cancel:hover { border-color:#1A2A3A!important;color:#1A2A3A!important; }
.cppm-modal-send {
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:'DM Mono',monospace;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:#D4900A!important;color:#FFFFFF!important;border:none!important;border-radius:3px;
  padding:.55rem 1.2rem;cursor:pointer;transition:background .2s;
  box-shadow:0 2px 8px rgba(212,144,10,.3);
}
.cppm-modal-send:hover { background:#F0AC28!important; }
.cppm-modal-send:disabled { opacity:.6;cursor:not-allowed; }
.cppm-modal-send svg { width:13px;height:13px;stroke:#FFFFFF; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 640px) {
  .cppm-wrap { min-height:500px;border-radius:0;border-left:none;border-right:none; }
  .cppm-layout { flex-direction:column; }
  .cppm-sidebar { width:100%;min-width:0;flex-direction:row;overflow-x:auto;overflow-y:hidden;height:auto;min-height:64px;border-right:none;border-bottom:1px solid rgba(255,255,255,.08); }
  .cppm-sidebar-label { display:none; }
  .cppm-thread-row { flex-shrink:0;min-width:140px;border-bottom:none;border-right:1px solid rgba(255,255,255,.06);border-left:none;border-bottom:3px solid transparent; }
  .cppm-thread-row.active { border-bottom-color:#D4900A!important;border-left:none!important; }
  .cppm-msg { max-width:88%; }
  .cppm-new-thread-btn span { display:none; }
}