/* CARE Fluent refresh. Brand colours remain defined by the existing theme. */
:root { --care-radius:8px; --care-shadow:0 2px 8px rgb(24 35 48 / 5%); }
body { font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif; font-size:14px; }
button,input,select,textarea { font-family:inherit; }
.btn { border-radius:var(--care-radius); min-height:36px; font-weight:600; padding:8px 14px; line-height:1.3; }
.btn.sm { min-height:32px; padding:6px 12px; }
.btn:disabled { cursor:default; opacity:.55; box-shadow:none; }
.btn.primary { box-shadow:0 1px 2px rgb(0 0 0 / 10%); }
.btn.ghost,.btn.secondary { border:1px solid var(--ca-border); }
.btn:hover:not(:disabled) { filter:brightness(.97); }
.btn:focus-visible,.nav:focus-visible { outline:2px solid var(--ca-blue); outline-offset:3px; }
input,select,textarea { border-radius:6px; }
.card,.settings-card,.session-card { border-radius:12px; box-shadow:var(--care-shadow); }
.modal { border-radius:12px; }
.modal-actions { background:#f8fafc; gap:10px; flex-wrap:wrap; }
.sidebar { background:#fafbfc; border-right:1px solid #cdd8e4; }
.brand-wrap { border-bottom:1px solid var(--ca-border); margin-bottom:14px; }
.nav { border-radius:6px; min-height:40px; }
.nav.active { box-shadow:inset 0 0 0 1px rgb(13 99 173 / 5%); }
.nav.active:before { left:0; width:3px; height:22px; border-radius:3px; }
.nav-icon { background:transparent; }
.topbar { background:#fafbfc; }
.topbar h2 { font-weight:600; letter-spacing:-.02em; }
.page-head h3 { font-weight:600; }
.actions { gap:10px; }
.health-dot,.timeline-dot { flex-shrink:0; border-radius:50%; }

/* A bounded inbox: selecting a contact scrolls only the right-hand pane. */
.inbox-shell.whatsapp-inbox-v2 {
  height:var(--care-inbox-height,calc(100dvh - 192px)); min-height:0; max-height:var(--care-inbox-height,calc(100dvh - 192px));
  overflow:hidden; grid-template-columns:200px 300px minmax(0,1fr);
  border-radius:12px; box-shadow:var(--care-shadow);
}
.whatsapp-inbox-v2 > .conversation-list,
.whatsapp-inbox-v2 > .inbox-filters {
  height:100%; min-height:0; max-height:none; overflow-y:auto;
  overscroll-behavior:contain; scrollbar-gutter:stable;
}
.whatsapp-inbox-v2 #conversationPane {
  height:100% !important; max-height:100% !important; min-height:0 !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  padding:0 12px !important; overscroll-behavior:contain; scrollbar-gutter:stable;
}
#conversationPane .conv-header { gap:12px; flex-wrap:wrap; border-radius:8px; }
#conversationPane .message-area { overflow-anchor:none; }
#conversationPane .composer.care-composer {
  position:sticky !important; bottom:0 !important; z-index:5 !important;
  margin:12px 0 0 !important; padding:12px !important;
  border:1px solid var(--ca-border) !important; border-radius:10px 10px 0 0;
  box-shadow:0 -3px 12px rgb(24 35 48 / 4%) !important;
}
#conversationPane .care-composer .composer-row {
  display:flex !important; align-items:flex-end !important;
  gap:8px !important; margin:0;
}
#conversationPane .care-composer .composer-row > .btn {
  height:40px !important; min-height:40px !important; margin:0;
  flex:0 0 auto !important; border-radius:8px; white-space:nowrap;
}
#conversationPane .care-composer .care-icon-button {
  width:40px !important; padding:9px !important;
  display:inline-flex; align-items:center; justify-content:center;
}
#conversationPane .care-composer #composerText {
  flex:1 1 0 !important; min-width:0 !important;
  min-height:40px !important; height:40px; max-height:144px !important;
  overflow-y:auto !important; border-radius:8px !important; padding:9px 12px !important;
}
.care-conversation-actions {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid var(--ca-border);
}
#conversationPane .care-conversation-actions .btn {
  min-height:34px; padding:7px 12px; font-size:12px; font-weight:600 !important;
  white-space:normal !important; border-radius:7px; margin:0;
}
#conversationPane #whatsappAttachmentName {
  display:block; max-width:100% !important; margin-top:8px;
}
#conversationPane #whatsappAttachmentName:empty { display:none; }
.care-attachment-preview {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px;
  margin-bottom:10px; background:#f4f7fb; border:1px solid var(--ca-border); border-radius:8px;
}
.care-attachment-preview img { width:72px; height:64px; object-fit:contain; border-radius:5px; background:white; }
.care-attachment-preview span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:12px; }
.care-attachment-preview .btn { flex-shrink:0; }
.care-image-caption { flex-basis:100%; margin:0; font-size:12px; }
#conversationPane .care-image-caption textarea {
  display:block; width:100%; min-height:44px; max-height:96px; margin-top:5px;
  resize:vertical; padding:9px 12px; font-size:14px; border-radius:8px;
}
#conversationPane .care-composer #composerText.hidden { display:none !important; }
#conversationPane .care-composer .composer-row > .btn.primary { margin-left:auto; }
#conversationPane.care-drop-active { outline:3px dashed var(--ca-blue); outline-offset:-5px; }
#conversationPane.care-drop-active .care-composer { background:#eaf4ff !important; }
@media(max-width:450px) {
  .care-attachment-preview { flex-wrap:wrap; gap:8px; }
  .care-attachment-preview .btn { margin-left:auto; }
}
@media (max-width:1350px) {
  .inbox-shell.whatsapp-inbox-v2 { grid-template-columns:160px 250px minmax(0,1fr); }
}
@media (max-width:1100px) {
  .inbox-shell.whatsapp-inbox-v2 { grid-template-columns:240px minmax(0,1fr); }
  .whatsapp-inbox-v2 > .inbox-filters { display:none; }
}
@media (max-width:700px) {
  .inbox-shell.whatsapp-inbox-v2 {
    display:grid; grid-template-columns:1fr; grid-template-rows:180px minmax(0,1fr);
    height:var(--care-inbox-height,calc(100dvh - 192px)); max-height:none; min-height:380px;
  }
  .whatsapp-inbox-v2 > .conversation-list { max-height:180px; border-bottom:1px solid var(--ca-border); }
  .whatsapp-inbox-v2 #conversationPane { padding:0 6px !important; }
  #conversationPane .composer.care-composer { padding:8px !important; }
  #conversationPane .care-composer .composer-row { flex-wrap:wrap; gap:6px !important; }
  #conversationPane .care-composer #composerText { order:-1; flex-basis:100% !important; }
  #conversationPane .care-composer .composer-row > .btn.primary { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}