/* =========================================================
   Professional AI Workspace UI
   Visual layer only. No workflow/backend logic lives here.
   ========================================================= */

:root {
  --app-bg: #f7f7f8;
  --surface: #ffffff;
  --surface-subtle: #f7f7f8;
  --surface-hover: #f1f1f2;
  --sidebar: #f3f3f3;
  --text: #171717;
  --text-soft: #676767;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --brand: #076db5;
  --brand-hover: #075e9b;
  --brand-soft: #eaf4fb;
  --success: #198754;
  --danger: #b42318;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-float: 0 18px 50px rgba(15, 23, 42, 0.16);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

.app-main {
  width: 100%;
  height: 100vh;
}

/* =========================================================
   Main application shell
   ========================================================= */

.app-shell {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  min-width: 0;
  background: var(--surface);
}

.app-shell.schedule-open {
  grid-template-columns: 246px minmax(0, 1fr) 390px;
}

/* =========================================================
   Sidebar
   ========================================================= */

.app-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 12px 14px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 20px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #171717;
  color: #fff;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.brand-copy strong {
  font-size: 0.94rem;
  font-weight: 700;
}

.brand-copy span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 0.76rem;
}

.sidebar-section-label {
  padding: 0 10px 7px;
  color: #8a8a8f;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: grid;
  gap: 5px;
}

.sidebar-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #2a2a2a;
  font-size: 0.875rem;
  font-weight: 550;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sidebar-action:hover,
.sidebar-action:focus-visible {
  background: #e9e9eb;
  outline: none;
}

.sidebar-action:active {
  transform: translateY(1px);
}

.sidebar-action-primary {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sidebar-action-primary:hover,
.sidebar-action-primary:focus-visible {
  background: #fff;
  border-color: var(--border-strong);
}

.sidebar-action-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.sidebar-action-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-status {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 10px 8px;
  border-top: 1px solid var(--border);
}

.sidebar-status > div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sidebar-status strong {
  font-size: 0.78rem;
  font-weight: 650;
}

.sidebar-status span:not(.status-dot) {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #22a06b;
  box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.1);
}

/* =========================================================
   Chat area
   ========================================================= */

.chat-container {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.assistant-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.chat-header h1 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chat-header p {
  margin: 3px 0 0;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.chat-header-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #545454;
  background: #fafafa;
  font-size: 0.76rem;
  font-weight: 600;
}

.chat-header-status .status-dot {
  margin-top: 0;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 34px max(24px, calc((100% - 860px) / 2));
  background: #fff;
}

.messages::-webkit-scrollbar,
.schedule-panel-body::-webkit-scrollbar,
.calendar-main::-webkit-scrollbar,
.calendar-post-details::-webkit-scrollbar {
  width: 9px;
}

.messages::-webkit-scrollbar-thumb,
.schedule-panel-body::-webkit-scrollbar-thumb,
.calendar-main::-webkit-scrollbar-thumb,
.calendar-post-details::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #d8d8dc;
  background-clip: content-box;
}

.message {
  position: relative;
  width: fit-content;
  max-width: min(78%, 720px);
  margin: 0;
  line-height: 1.58;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.assistant-message {
  align-self: flex-start;
  width: min(100%, 760px);
  max-width: min(100%, 760px);
  padding: 2px 0 2px 46px;
  border: 0;
  background: transparent;
  color: var(--text);
}

.assistant-message::before {
  content: "AI";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 750;
}

.user-message {
  align-self: flex-end;
  padding: 11px 15px;
  border: 1px solid #ececef;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  background: #f4f4f4;
  color: #171717;
}

.error-message {
  align-self: flex-start;
  max-width: min(100%, 760px);
  padding: 11px 14px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  color: #9b1c1c;
}

.message-text {
  white-space: pre-wrap;
}

/* Generated and uploaded chat images */
#messages .generated-chat-image,
#messages .chat-message-image,
#messages .chat-message-video {
  display: block;
  border: 1px solid var(--border);
  background: #f5f5f5;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#messages .generated-chat-image {
  width: min(560px, 100%);
  max-height: 520px;
  margin-top: 12px;
  border-radius: 16px;
  object-fit: contain;
}

.chat-message-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

#messages .chat-message-image,
.chat-message-images .chat-message-image,
#messages .chat-message-video,
.chat-message-images .chat-message-video {
  width: 180px !important;
  height: 180px !important;
  max-width: 180px !important;
  max-height: 180px !important;
  border-radius: 12px;
}

#messages .chat-message-video,
.chat-message-images .chat-message-video {
  object-fit: contain;
  background: #111;
}

.user-message .chat-message-images {
  justify-items: end;
}

.generated-post-details {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fafafa;
}

.generated-detail-row {
  margin-bottom: 13px;
}

.generated-detail-row:last-of-type {
  margin-bottom: 0;
}

.generated-detail-row strong,
.generated-detail-row span {
  display: block;
}

.generated-detail-row strong {
  margin-bottom: 4px;
  color: #575757;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.generated-detail-row span {
  line-height: 1.5;
  white-space: pre-wrap;
}

.generated-detail-note {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.82rem;
}

/* =========================================================
   Composer
   ========================================================= */

.chat-footer {
  padding: 10px max(20px, calc((100% - 860px) / 2)) 18px;
  border-top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 20%, #fff 100%);
}

.chat-form {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input-row:focus-within {
  border-color: #b9b9bf;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07), 0 12px 32px rgba(15, 23, 42, 0.06);
}

.chat-input-row #messageInput {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 8px 7px;
  border: 0;
  box-shadow: none !important;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
}

.chat-input-row #messageInput:focus {
  outline: none;
}

.chat-input-row #messageInput::placeholder {
  color: #9a9a9f;
}

#attachChatImageButton {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5d5d63;
  font-size: 1rem;
}

#attachChatImageButton:hover,
#attachChatImageButton:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
  outline: none;
}

#sendButton {
  min-width: 72px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #171717;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 650;
}

#sendButton:hover,
#sendButton:focus-visible {
  background: #2b2b2b;
  color: #fff;
  outline: none;
}

#sendButton:disabled,
#attachChatImageButton:disabled {
  opacity: 0.55;
}

.chat-attachment-preview {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 860px;
  margin: 0 auto 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fafafa;
}

.chat-attachment-preview img,
.chat-attachment-preview video {
  display: block;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 10px;
  object-fit: cover;
}

.chat-attachment-preview video {
  background: #111;
}

.chat-attachment-details {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#chatAttachmentName {
  min-width: 0;
  overflow: hidden;
  color: #4b4b50;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#removeChatImageButton {
  border-color: #e5a7a2;
  color: var(--danger);
  font-size: 0.76rem;
}

/* Loading state retained for existing JS */
.loading-dots {
  display: inline-flex;
  margin-left: 2px;
}

.loading-dots span {
  display: inline-block;
  animation: loading-dot 1.2s infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* =========================================================
   Schedule panel
   ========================================================= */

.schedule-panel {
  display: none;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: #fff;
  box-shadow: -10px 0 28px rgba(15, 23, 42, 0.04);
}

.app-shell.schedule-open .schedule-panel {
  display: flex;
}

.schedule-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.panel-eyebrow {
  margin-bottom: 4px;
  color: #8a8a8f;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-panel-header h2 {
  color: var(--text);
  font-weight: 700;
}

.schedule-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 28px;
}

.schedule-panel .form-label {
  margin-bottom: 6px;
  color: #333;
  font-size: 0.8rem;
  font-weight: 650;
}

.schedule-panel .form-control,
.schedule-panel .form-select {
  border-color: var(--border-strong);
  border-radius: 10px;
  font-size: 0.86rem;
  box-shadow: none;
}

.schedule-panel .form-control:focus,
.schedule-panel .form-select:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(7, 109, 181, 0.08);
}

.schedule-panel .form-text {
  color: #85858a;
  font-size: 0.75rem;
}

.schedule-panel .btn-primary,
.calendar-dialog .btn-primary {
  border-color: var(--brand);
  background: var(--brand);
}

.schedule-panel .btn-primary:hover,
.calendar-dialog .btn-primary:hover {
  border-color: var(--brand-hover);
  background: var(--brand-hover);
}

.schedule-panel .btn-outline-primary,
.calendar-dialog .btn-outline-primary {
  border-color: #9bc4df;
  color: #075d99;
}

.schedule-panel .btn-outline-primary:hover,
.calendar-dialog .btn-outline-primary:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: #064a7c;
}

.image-preview-wrapper {
  width: 100%;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
  text-align: center;
}

.image-preview,
.video-preview {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 9px;
}

.video-preview {
  background: #111;
}

.scheduled-post-card {
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

.scheduled-post-card .card-body {
  padding: 14px;
}

.scheduled-post-file-id {
  overflow-wrap: anywhere;
}

.scheduled-post-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.scheduled-post-actions .btn {
  min-width: 108px;
}

.scheduled-status-badge {
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* =========================================================
   Calendar overlay
   ========================================================= */

body.calendar-open {
  overflow: hidden;
}

.calendar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 18, 20, 0.54);
  backdrop-filter: blur(7px);
}

.calendar-dialog {
  display: flex;
  flex-direction: column;
  width: min(1480px, 100%);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-float);
}

.calendar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px 16px;
  border-bottom: 1px solid var(--border);
}

.calendar-header h2 {
  color: var(--text);
  font-weight: 720;
  letter-spacing: -0.02em;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.calendar-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.calendar-legend-dot.scheduled { background: var(--brand); }
.calendar-legend-dot.posted { background: var(--success); }

.calendar-message {
  margin: 13px 22px 0;
}

.calendar-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  min-height: 0;
  flex: 1;
}

.calendar-main {
  position: relative;
  min-width: 0;
  overflow: auto;
  padding: 20px;
}

.calendar-post-details {
  overflow-y: auto;
  padding: 20px;
  border-left: 1px solid var(--border);
  background: #fafafa;
}

.calendar-detail-row {
  margin-bottom: 16px;
}

.calendar-detail-row strong,
.calendar-detail-row span {
  display: block;
}

.calendar-detail-row strong {
  margin-bottom: 4px;
  color: #77777d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-detail-row span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.calendar-detail-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.calendar-detail-actions .btn {
  width: 100%;
}

#postsCalendar {
  min-width: 760px;
}

#postsCalendar .fc-toolbar-title {
  padding: 4px 8px;
  border-radius: 8px;
  color: #222;
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#postsCalendar .fc-toolbar-title:hover,
#postsCalendar .fc-toolbar-title:focus {
  background: #f1f1f2;
  outline: none;
}

#postsCalendar .fc-button-primary {
  border-color: #d4d4d8;
  background: #fff;
  color: #333;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 600;
}

#postsCalendar .fc-button-primary:hover,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active {
  border-color: #bdbdc2;
  background: #f4f4f5;
  color: #171717;
}

#postsCalendar .fc-button-primary:focus,
#postsCalendar .fc-button-primary:not(:disabled):active:focus,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active:focus {
  box-shadow: none !important;
}

#postsCalendar .fc a,
#postsCalendar .fc-col-header-cell-cushion,
#postsCalendar .fc-daygrid-day-number,
#postsCalendar .fc-list-day-text,
#postsCalendar .fc-list-day-side-text {
  color: inherit;
  text-decoration: none !important;
}

#postsCalendar .fc-col-header-cell-cushion,
#postsCalendar .fc-daygrid-day-number,
#postsCalendar .fc-list-day-text,
#postsCalendar .fc-list-day-side-text {
  color: #313135 !important;
}

#postsCalendar .fc-event {
  cursor: pointer;
  border-width: 0;
  border-radius: 6px;
  padding: 1px 3px;
}

#postsCalendar .calendar-event-scheduled {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

#postsCalendar .calendar-event-posted {
  background: var(--success) !important;
  color: #fff !important;
}

#postsCalendar .fc-list-event.calendar-event-scheduled td,
#postsCalendar .fc-list-event.calendar-event-scheduled:hover td {
  background: #e7f2f9 !important;
  color: #064a7c !important;
}

#postsCalendar .fc-list-event.calendar-event-scheduled a,
#postsCalendar .fc-list-event.calendar-event-scheduled .fc-list-event-time,
#postsCalendar .fc-list-event.calendar-event-scheduled .fc-list-event-title {
  color: #064a7c !important;
}

#postsCalendar .fc-list-event.calendar-event-scheduled .fc-list-event-dot {
  border-color: var(--brand) !important;
}

#postsCalendar .fc-list-event.calendar-event-posted td,
#postsCalendar .fc-list-event.calendar-event-posted:hover td {
  background: #e8f5ee !important;
  color: #0f5132 !important;
}

#postsCalendar .fc-list-event.calendar-event-posted .fc-list-event-dot {
  border-color: var(--success) !important;
}

.calendar-date-picker {
  position: absolute;
  top: 68px;
  left: 50%;
  z-index: 25;
  width: min(430px, calc(100% - 32px));
  padding: 14px;
  transform: translateX(-50%);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-float);
}

.calendar-date-picker-fields {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto minmax(100px, 1fr);
  align-items: center;
  gap: 8px;
}

.calendar-date-picker-fields label {
  margin: 0;
  color: #4d4d52;
  font-size: 0.76rem;
  font-weight: 650;
}

.calendar-date-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* =========================================================
   Auth screen (login / create account)
   ========================================================= */

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;

  align-items: flex-start;
  justify-content: center;

  padding: 24px;

  overflow-y: auto;
  overflow-x: hidden;

  background: var(--app-bg);
}

.auth-screen.d-none {
  display: none;
}

.auth-card {
  width: 100%;
  max-width: 420px;

  margin-top: auto;
  margin-bottom: auto;

  padding: 28px 26px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-subtle);
}

.auth-tab {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.84rem;
  font-weight: 650;
}

.auth-tab.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.auth-form.d-none {
  display: none;
}

/* =========================================================
   Sidebar account block
   ========================================================= */

.sidebar-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 12px;
  border-top: 1px solid var(--border);
}

.sidebar-account-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.sidebar-account-name span {
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-name small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* =========================================================
   Unified Inbox
   ========================================================= */

.inbox-dialog {
  display: flex;
  flex-direction: column;

  width: min(1500px, 96vw);
  height: min(900px, 94vh);

  overflow-y: auto;
  overflow-x: hidden;

  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-float);
}
.inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.inbox-summary {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#inboxSearchInput {
  width: 260px;
}

.inbox-layout {
  display: grid;

  grid-template-columns:
    190px
    minmax(300px, 390px)
    minmax(0, 1fr);


  flex: 0 0 600px;
  height: 600px;
  min-height: 600px;
}

.inbox-filters {
  overflow-y: auto;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: #fafafa;
}

.inbox-filter-title {
  margin: 0 8px 8px;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inbox-filter {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 0.86rem;
  text-align: left;
}

.inbox-filter:hover {
  background: #f0f0f2;
}

.inbox-filter.active {
  background: #e9eefb;
  font-weight: 650;
}

.inbox-conversations {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.inbox-column-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 700;
}

.inbox-conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.inbox-conversation-list::-webkit-scrollbar {
  width: 8px;
}

.inbox-conversation-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #cfd1d5;
  background-clip: content-box;
}

.inbox-conversation-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: inherit;
  text-align: left;
}

.inbox-conversation-item:hover {
  background: #f8f9fb;
}

.inbox-conversation-item.is-unread {
  background: #f5f8ff;
}

.inbox-conversation-item.is-unread strong {
  font-weight: 750;
}

.inbox-conversation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inbox-conversation-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.inbox-platform-badge {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #eeeeF2;
  font-size: 0.66rem;
  font-weight: 750;
}

.inbox-conversation-time {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.inbox-conversation-preview {
  overflow: hidden;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-conversation-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 0.7rem;
}

.inbox-primary-label {
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef1f5;
  font-weight: 600;
}
.inbox-empty-state {
  padding: 30px 20px;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: center;
}

.inbox-detail {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.inbox-conversation-item.active {
  background: #eef3ff;
}

.inbox-thread-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    250px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.inbox-thread-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.inbox-thread-header {
  display: flex;
  min-height: 65px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.inbox-thread-contact-meta {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 0.75rem;
  text-transform: capitalize;
}

.inbox-thread-messages {
  min-height: 0;
  overflow-y: auto;
  flex: 1;
  padding: 20px;
  background: #fafafa;
}

.inbox-reply-box {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: #fff;
}

.inbox-reply-input {
  display: block;
  width: 100%;
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.4;
}

.inbox-reply-input:focus {
  border-color: #aab7d4;
}

.inbox-reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.inbox-reply-secondary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-message-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.inbox-message-row.is-outbound {
  justify-content: flex-end;
}

.inbox-message-bubble {
  max-width: 72%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.inbox-message-row.is-outbound
.inbox-message-bubble {
  background: #eef3ff;
}

.inbox-message-sender {
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.inbox-message-text {
  white-space: pre-wrap;
  font-size: 0.86rem;
  line-height: 1.45;
}

.inbox-message-time {
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 0.66rem;
  text-align: right;
}

.inbox-context-panel {
  overflow-y: auto;
  padding: 18px;
  border-left: 1px solid var(--border);
  background: #fff;
}

.inbox-context-panel h4 {
  margin: 0 0 12px;
  font-size: 0.82rem;
}

.inbox-context-panel h4:not(:first-child) {
  margin-top: 24px;
}

.inbox-context-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.75rem;
}

.inbox-context-item span {
  color: var(--text-soft);
}

.inbox-context-item strong {
  text-align: right;
}

.inbox-recommendation {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}
.inbox-context-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.inbox-context-actions .btn {
  width: 100%;
}
.inbox-detail-empty {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--text-soft);
  text-align: center;
}

.inbox-detail-empty h3 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1rem;
}

.inbox-detail-empty p {
  max-width: 380px;
  margin: 0;
  font-size: 0.85rem;
}
/* =========================================================
   Settings dialog
   ========================================================= */

.settings-dialog {
  max-width: 640px;
}

.settings-body {
  overflow-y: auto;
  padding: 20px 22px 24px;
}

/* =========================================================
   Responsive behavior
   ========================================================= */

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .app-shell.schedule-open {
    grid-template-columns: 220px minmax(0, 1fr) 350px;
  }

  .chat-header p {
    display: none;
  }
}

@media (max-width: 960px) {
  .app-shell,
  .app-shell.schedule-open {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app-sidebar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 9px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-brand {
    padding: 0;
    margin-right: 6px;
  }

  .brand-copy span,
  .sidebar-section-label,
  .sidebar-spacer,
  .sidebar-status {
    display: none;
  }

  .sidebar-nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }

  .sidebar-action {
    width: auto;
    min-height: 40px;
    padding: 8px 10px;
  }

  .schedule-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    width: min(390px, 100vw);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 50px rgba(15, 23, 42, 0.18);
  }

  .calendar-overlay {
    padding: 0;
  }

  .calendar-dialog {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .calendar-content {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .calendar-main {
    overflow: visible;
  }

  .calendar-post-details {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .brand-copy,
  .chat-header-status {
    display: none;
  }

  .app-sidebar {
    min-height: 58px;
  }

  .sidebar-nav {
    flex: 1;
    justify-content: flex-end;
  }

  .sidebar-action span:last-child {
    display: none;
  }

  .sidebar-action {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .chat-header {
    min-height: 60px;
    padding: 10px 14px;
  }

  .assistant-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .messages {
    gap: 18px;
    padding: 24px 16px;
  }

  .message,
  .assistant-message {
    max-width: 94%;
  }

  .assistant-message {
    padding-left: 40px;
  }

  .assistant-message::before {
    width: 28px;
    height: 28px;
  }

  .chat-footer {
    padding: 8px 12px 12px;
  }

  .chat-input-row {
    min-height: 54px;
    border-radius: 18px;
  }

  #sendButton {
    min-width: 60px;
    padding: 0 11px;
  }

  #messages .chat-message-image,
  .chat-message-images .chat-message-image,
  #messages .chat-message-video,
  .chat-message-images .chat-message-video {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }

  .calendar-header,
  .calendar-main,
  .calendar-post-details {
    padding: 14px;
  }

  #postsCalendar {
    min-width: 680px;
  }

  .calendar-date-picker-fields {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Inbox scrolling
========================================================= */



.inbox-conversation-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef1f5;
  color: var(--text-soft);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.inbox-conversation-type.is-comment {
  background: #fff3e8;
  color: #9a4b00;
}

.inbox-conversation-item.is-comment-conversation {
  border-left: 3px solid #e7a14a;
}

/* =========================================================
   Engagement
========================================================= */

.engagement-dialog {
  display: flex;
  flex-direction: column;
  width: min(1450px, 96vw);
  height: min(900px, 94vh);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-float);
}

.engagement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.engagement-header h2 {
  color: var(--text);
  font-weight: 720;
  letter-spacing: -0.02em;
}

.engagement-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}

#engagementPlatformFilter {
  width: 180px;
}

.engagement-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.engagement-body::-webkit-scrollbar {
  width: 9px;
}

.engagement-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #d8d8dc;
  background-clip: content-box;
}

.engagement-performance-panel {
  margin-bottom: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.engagement-performance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px 14px;
}

.engagement-performance-heading h3 {
  margin: 0;
  color: #102f56;
  font-size: 1.25rem;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.engagement-performance-subtitle {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.engagement-performance-insight {
  max-width: 360px;
  padding-top: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
  text-align: right;
}

.engagement-performance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px 24px 0;
}

.engagement-performance-metric {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 108px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 16px 18px;
  border: 0;
  border-right: 1px solid #edf0f3;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background 0.15s ease;
}

.engagement-performance-metric:last-child {
  border-right: 0;
}

.engagement-performance-metric:hover,
.engagement-performance-metric:focus-visible {
  background: #f7fbfd;
  outline: none;
}

.engagement-performance-metric.active {
  background: #e8f4f8;
}

.engagement-performance-metric.active::after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 2px;
  border-radius: 999px;
  background: #089dcf;
  content: "";
}

.engagement-performance-label {
  margin-bottom: 6px;
  color: #61758e;
  font-size: 0.76rem;
  font-weight: 650;
}

.engagement-performance-metric strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #102f56;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 760;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engagement-performance-metric.active strong {
  color: #089dcf;
}

.engagement-performance-change {
  display: block;
  min-height: 18px;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.3;
}

.engagement-performance-change.is-positive {
  color: #168766;
}

.engagement-performance-change.is-negative {
  color: #c04444;
}

.engagement-performance-change.is-neutral {
  color: var(--text-soft);
}

.engagement-performance-chart-wrap {
  position: relative;
  height: 275px;
  margin: 14px 24px 22px;
}

#engagementPerformanceChart {
  width: 100% !important;
  height: 100% !important;
}

.engagement-performance-chart-empty {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border-top: 1px solid #edf0f3;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-align: center;
}

.engagement-post-summary-heading {
  margin-bottom: 12px;
}

.engagement-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.engagement-summary-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.engagement-summary-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--text-soft);
  font-size: 0.76rem;
}

.engagement-summary-card strong {
  display: block;
  overflow: hidden;
  font-size: 1.45rem;
  font-weight: 720;
  text-overflow: ellipsis;
}

.engagement-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.engagement-post-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.engagement-post-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.engagement-post-image {
  width: 130px;
  height: 100%;
  min-height: 150px;
  overflow: hidden;
  background: #f1f1f3;
}

.engagement-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.engagement-post-image.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 1.1rem;
  font-weight: 700;
}

.engagement-post-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px 14px;
}

.engagement-post-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.engagement-platform {
  font-size: 0.72rem;
  font-weight: 700;
}

.engagement-post-date {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 0.68rem;
}

.engagement-post-caption {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 12px;
  color: #3f3f43;
  font-size: 0.8rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.engagement-post-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: auto;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.engagement-post-metrics strong {
  color: var(--text);
}

.engagement-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
}

.engagement-post-footer a {
  color: var(--brand);
  text-decoration: none;
}

.engagement-post-footer a:hover {
  text-decoration: underline;
}

.engagement-rate {
  color: var(--text-soft);
}

.engagement-empty {
  grid-column: 1 / -1;
  padding: 50px;
  color: var(--text-soft);
  text-align: center;
}

@media (max-width: 900px) {
  .engagement-performance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .engagement-performance-metric:nth-child(2) {
    border-right: 0;
  }

  .engagement-performance-metric:nth-child(-n + 2) {
    border-bottom: 1px solid #edf0f3;
  }
}

@media (max-width: 1050px) {
  .engagement-summary-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .engagement-performance-heading {
    flex-direction: column;
    padding: 18px 16px 10px;
  }

  .engagement-performance-insight {
    max-width: none;
    padding-top: 0;
    text-align: left;
  }

  .engagement-performance-metrics {
    padding: 6px 16px 0;
  }

  .engagement-performance-metric {
    min-height: 96px;
    padding: 12px 10px 16px;
  }

  .engagement-performance-chart-wrap {
    height: 230px;
    margin: 12px 16px 18px;
  }

  .engagement-dialog {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .engagement-header,
  .engagement-toolbar,
  .engagement-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .engagement-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #engagementPlatformFilter {
    width: 100%;
  }

  .engagement-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .engagement-post-grid {
    grid-template-columns: 1fr;
  }

  .engagement-post-card {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .engagement-post-image {
    width: 100px;
  }
}

/* =========================================================
   Main workspace navigation
   Inbox / Engagement / Calendar / Agent pages
========================================================= */

/*
 * The sidebar now owns navigation. Main tools render in the
 * application content area rather than in modal/backdrop overlays.
 */
.app-shell,
.app-shell.schedule-open {
  grid-template-columns:
    246px minmax(0, 1fr);
}

.sidebar-action.active {
  border-color: var(--border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-weight: 650;
}

.sidebar-agent-group {
  display: grid;
  gap: 3px;
}

.sidebar-subnav {
  display: grid;
  gap: 3px;
  margin: 1px 0 4px 31px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--border-strong);
}

.sidebar-subaction {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #55555b;
  font-size: 0.78rem;
  font-weight: 550;
  text-align: left;
}

.sidebar-subaction:hover,
.sidebar-subaction:focus-visible {
  background: #e9e9eb;
  color: var(--text);
  outline: none;
}

.sidebar-subaction.active {
  background: #fff;
  color: var(--text);
  font-weight: 650;
}

.sidebar-subaction-icon {
  display: inline-flex;
  width: 15px;
  flex: 0 0 15px;
  align-items: center;
  justify-content: center;
  color: #77777d;
  font-size: 0.8rem;
}

/*
 * These elements keep their existing IDs and all existing JS logic,
 * but become normal workspace pages once JS moves them into appShell.
 */
.workspace-page {
  position: static;
  inset: auto;
  z-index: auto;

  display: flex;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;

  align-items: stretch;
  justify-content: stretch;

  padding: 0;

  overflow: hidden;

  background: #fff;
  backdrop-filter: none;
}

.workspace-page.d-none {
  display: none !important;
}

.workspace-page .inbox-dialog,
.workspace-page .engagement-dialog,
.workspace-page .calendar-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  min-height: 0;

  margin: 0;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}

.workspace-page .settings-dialog {
  max-width: none;
}

.workspace-page .settings-body {
  width: min(860px, 100%);
  margin: 0 auto;
}

/*
 * Schedule Post is also a full main-area Agent tool now,
 * not a third column beside the chat.
 */
.schedule-panel.workspace-main-panel {
  position: static;
  inset: auto;

  width: auto;
  min-width: 0;
  height: 100%;

  border-left: 0;

  box-shadow: none;
}

.app-shell.schedule-open
.schedule-panel.workspace-main-panel {
  display: flex;
}

/*
 * Keep the manual composer comfortable when it owns the full
 * workspace instead of the old narrow right-side panel.
 */
.schedule-panel.workspace-main-panel
.schedule-panel-body {
  width: min(900px, 100%);
  margin: 0 auto;
}

.schedule-panel.workspace-main-panel
.schedule-panel-header {
  padding-left: max(
    20px,
    calc((100% - 900px) / 2)
  );

  padding-right: max(
    20px,
    calc((100% - 900px) / 2)
  );
}

/*
 * In-place pages should use the available width rather than
 * the former modal viewport measurements.
 */
.workspace-page .inbox-dialog {
  overflow-y: auto;
  overflow-x: hidden;
}

.workspace-page .engagement-dialog {
  overflow: hidden;
}

.workspace-page .calendar-content {
  min-height: 0;
}

/*
 * Existing close buttons still work as "Back to Agent" controls,
 * but the pages themselves are no longer popups.
 */
.workspace-page .btn-close {
  opacity: 0.7;
}

@media (max-width: 1180px) {
  .app-shell,
  .app-shell.schedule-open {
    grid-template-columns:
      220px minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .app-shell,
  .app-shell.schedule-open {
    grid-template-columns: 1fr;
    grid-template-rows:
      auto minmax(0, 1fr);
  }

  .sidebar-agent-group {
    display: contents;
  }

  .sidebar-subnav {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    border-left: 0;
  }

  .sidebar-subaction {
    width: auto;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
  }

  .schedule-panel.workspace-main-panel {
    position: static;
    width: auto;
    max-width: none;
    border-left: 0;
    box-shadow: none;
  }
}

@media (max-width: 680px) {
  .sidebar-subaction {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .sidebar-subaction span:last-child {
    display: none;
  }

  .workspace-page .inbox-dialog,
  .workspace-page .engagement-dialog,
  .workspace-page .calendar-dialog {
    width: 100%;
    height: 100%;
  }
}


/* =========================================================
   Subscription / billing gate
========================================================= */

.app-shell[aria-hidden="true"] {
  visibility: hidden;
}

.subscription-screen {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 28px;
  background: var(--app-bg);
}

.subscription-screen.d-none {
  display: none;
}

.subscription-card {
  width: min(880px, 100%);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-float);
}

.subscription-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.subscription-current-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}

.subscription-current-summary > div {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
}

.subscription-current-summary span,
.subscription-current-summary strong {
  display: block;
}

.subscription-current-summary span {
  margin-bottom: 4px;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.subscription-current-summary strong {
  font-size: 0.9rem;
}

.subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.subscription-plan-card {
  display: flex;
  min-height: 285px;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.subscription-plan-card-featured {
  border-color: #acd1e8;
  background: #fbfdff;
}

.subscription-plan-card h2 {
  margin: 5px 0 8px;
  font-size: 1.25rem;
}

.subscription-plan-card p {
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}

.subscription-plan-kicker {
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.subscription-agency-notice {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #f1d6a8;
  border-radius: 12px;
  background: #fffaf0;
}

.subscription-agency-notice strong {
  display: block;
  margin-bottom: 5px;
}

.subscription-agency-notice p {
  color: #735b30;
  font-size: 0.84rem;
}

.subscription-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.sidebar-account-tools-label {
  margin-top: 10px;
}

.sidebar-account-tools {
  margin-bottom: 8px;
}

/* =========================================================
   Agency users
========================================================= */

.agency-dialog {
  overflow: hidden;
}

.agency-body {
  width: min(1100px, 100%);
  margin: 0 auto;
  overflow-y: auto;
  padding: 22px;
}

.agency-add-card,
.agency-users-card {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.agency-add-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agency-user-prompt-field,
.agency-user-kb-field,
.agency-add-actions {
  grid-column: 1 / -1;
}

.agency-add-actions {
  display: flex;
  justify-content: flex-end;
}

.agency-users-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.agency-users-list {
  display: grid;
  gap: 9px;
}

.agency-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
}

.agency-user-info {
  min-width: 0;
}

.agency-user-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-user-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.agency-user-kb-field {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
}

.agency-user-kb-field .form-text + .form-text {
  margin-top: 4px;
}

.agency-user-row {
  flex-wrap: wrap;
}

.agency-user-remove-confirmation {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  padding: 13px 14px;
  border: 1px solid #efb2ac;
  border-radius: 10px;
  background: #fff7f6;
}

.agency-user-remove-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.agency-user-remove-copy strong {
  color: #8f2119;
  font-size: 0.82rem;
}

.agency-user-remove-copy span {
  color: #6f4b47;
  font-size: 0.76rem;
}

.agency-user-remove-confirmation-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

@media (max-width: 760px) {
  .subscription-screen {
    align-items: flex-start;
    padding: 0;
  }

  .subscription-card {
    min-height: 100vh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 20px 16px 28px;
  }

  .subscription-current-summary,
  .subscription-plan-grid,
  .agency-add-form {
    grid-template-columns: 1fr;
  }

  .subscription-actions {
    justify-content: stretch;
  }

  .subscription-actions .btn {
    flex: 1 1 100%;
  }

  .agency-user-row {
    align-items: stretch;
    flex-direction: column;
  }

  .agency-user-actions {
    width: 100%;
  }

  .agency-user-actions .btn {
    flex: 1;
  }

  .agency-user-remove-confirmation {
    align-items: stretch;
    flex-direction: column;
  }

  .agency-user-remove-confirmation-actions {
    width: 100%;
  }

  .agency-user-remove-confirmation-actions .btn {
    flex: 1;
  }
}

/* =========================================================
   SCOCHAT AI BRAND SYSTEM — visual overrides only
   Palette derived from the supplied Scochat icon.
   No application logic is changed here.
========================================================= */

:root {
  --scochat-navy-950: #00133f;
  --scochat-navy-900: #002265;
  --scochat-navy-800: #00357d;
  --scochat-blue-700: #005f9f;
  --scochat-cyan-600: #008fb7;
  --scochat-cyan-500: #00a7d1;
  --scochat-cyan-400: #22c4df;
  --scochat-aqua-300: #6fe6f2;
  --scochat-ice-100: #e8f9fd;
  --scochat-ice-50: #f4fbfd;

  --app-bg: #f4f9fc;
  --surface: #ffffff;
  --surface-subtle: #f4f9fc;
  --surface-hover: #eaf6fa;
  --sidebar: var(--scochat-navy-900);
  --text: #10233f;
  --text-soft: #60758c;
  --border: #d9e9f0;
  --border-strong: #bfd8e4;
  --brand: var(--scochat-cyan-500);
  --brand-hover: #008caf;
  --brand-soft: #e6f8fc;
  --success: #16866f;
  --danger: #b42318;
  --shadow-soft: 0 1px 2px rgba(0,34,101,.04), 0 8px 26px rgba(0,34,101,.07);
  --shadow-float: 0 22px 60px rgba(0,34,101,.16);
  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
}

html { background: var(--scochat-ice-50); }
body {
  background:
    radial-gradient(circle at 86% 4%, rgba(0,167,209,.10), transparent 27%),
    radial-gradient(circle at 15% 92%, rgba(0,34,101,.06), transparent 30%),
    var(--app-bg);
  color: var(--text);
}
::selection { background: rgba(0,167,209,.22); color: var(--scochat-navy-950); }

/* Brand logo */
.brand-mark { border-radius: 12px; }
.brand-mark-logo {
  overflow: hidden;
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,249,253,.95));
  box-shadow: 0 7px 22px rgba(0,20,63,.22), inset 0 0 0 1px rgba(0,167,209,.08);
}
.brand-mark-logo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  object-fit: contain;
}

/* Forms */
.form-control,
.form-select,
.inbox-reply-input {
  border-color: var(--border-strong);
  border-radius: 11px;
  color: var(--text);
  background-color: #fff;
  box-shadow: none;
}
.form-control:hover,
.form-select:hover,
.inbox-reply-input:hover { border-color: #9cc8d9; }
.form-control:focus,
.form-select:focus,
.inbox-reply-input:focus {
  border-color: var(--scochat-cyan-500);
  box-shadow: 0 0 0 3px rgba(0,167,209,.13) !important;
}
.form-control::placeholder,
.inbox-reply-input::placeholder { color: #91a2b2; }

/* Buttons */
.btn {
  border-radius: 10px;
  font-weight: 650;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn:not(:disabled):active { transform: translateY(1px); }
.btn-primary,
.schedule-panel .btn-primary,
.calendar-dialog .btn-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--scochat-navy-900) 0%, #0068a8 48%, var(--scochat-cyan-500) 100%) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(0,92,151,.20);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.schedule-panel .btn-primary:hover,
.calendar-dialog .btn-primary:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, #001c54 0%, #005f9f 48%, #009bc3 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0,92,151,.27);
}
.btn-outline-primary,
.schedule-panel .btn-outline-primary,
.calendar-dialog .btn-outline-primary {
  border-color: #79cadd !important;
  color: var(--scochat-navy-800) !important;
  background: #fff;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.schedule-panel .btn-outline-primary:hover,
.calendar-dialog .btn-outline-primary:hover {
  border-color: var(--scochat-cyan-500) !important;
  background: var(--scochat-ice-100) !important;
  color: var(--scochat-navy-900) !important;
}
.btn-outline-secondary {
  border-color: #b9d0dc;
  color: #526a7d;
  background: #fff;
}
.btn-outline-secondary:hover {
  border-color: #91b7c8;
  background: #edf7fa;
  color: var(--scochat-navy-900);
}

/* Auth and subscription backgrounds */
.auth-screen,
.subscription-screen {
  background:
    radial-gradient(circle at 84% 8%, rgba(0,167,209,.18), transparent 26%),
    radial-gradient(circle at 10% 92%, rgba(0,34,101,.10), transparent 30%),
    linear-gradient(145deg, #f7fcfe 0%, #eef8fb 52%, #f8fbfd 100%);
}
.auth-card,
.subscription-card {
  position: relative;
  border: 1px solid rgba(0,132,176,.17);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,254,255,.98));
  box-shadow: 0 26px 70px rgba(0,34,101,.16);
}
.auth-card {
  overflow: hidden;
  max-width: 440px;
  padding: 31px 29px 32px;
  border-radius: 24px;
}
.auth-card::before,
.subscription-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--scochat-navy-900), #0078b4, var(--scochat-cyan-500), #43d8e9);
  content: "";
}
.auth-card .sidebar-brand { margin-bottom: 4px; }
.auth-card .brand-copy strong { color: var(--scochat-navy-900); font-size: 1.02rem; }
.auth-tabs {
  margin-top: 4px;
  padding: 5px;
  border: 1px solid #e1edf2;
  background: #edf7fa;
}
.auth-tab { color: #63798b; }
.auth-tab.active {
  color: var(--scochat-navy-900);
  box-shadow: 0 5px 16px rgba(0,34,101,.09);
}

/* Sidebar */
.app-shell { background: #f8fbfc; }
.app-sidebar {
  position: relative;
  overflow: hidden;
  border-right: 0;
  background:
    radial-gradient(circle at 24% 0%, rgba(0,167,209,.24), transparent 30%),
    linear-gradient(180deg, #001846 0%, #002265 48%, #003876 100%);
  box-shadow: 8px 0 28px rgba(0,34,101,.10);
}
.app-sidebar::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,201,231,.13), transparent 68%);
  pointer-events: none;
  content: "";
}
.app-sidebar .brand-copy strong,
.app-sidebar .sidebar-account-name span,
.app-sidebar .sidebar-status strong { color: #fff; }
.app-sidebar .brand-copy span,
.app-sidebar .sidebar-account-name small,
.app-sidebar .sidebar-status span:not(.status-dot),
.app-sidebar .sidebar-section-label { color: rgba(224,247,252,.66); }
.app-sidebar .sidebar-section-label { letter-spacing: .12em; }
.app-sidebar .sidebar-action,
.app-sidebar .sidebar-subaction { color: rgba(239,250,253,.86); }
.app-sidebar .sidebar-action-icon,
.app-sidebar .sidebar-subaction-icon { color: #79d8e9; }
.app-sidebar .sidebar-action:hover,
.app-sidebar .sidebar-action:focus-visible,
.app-sidebar .sidebar-subaction:hover,
.app-sidebar .sidebar-subaction:focus-visible {
  border-color: rgba(104,222,239,.10);
  background: rgba(0,167,209,.13);
  color: #fff;
}
.app-sidebar .sidebar-action.active,
.app-sidebar .sidebar-subaction.active {
  border-color: rgba(93,221,239,.30);
  background: linear-gradient(90deg, rgba(0,167,209,.26), rgba(0,167,209,.10));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--scochat-cyan-400);
}
.app-sidebar .sidebar-subnav { border-left-color: rgba(116,222,239,.24); }
.app-sidebar .sidebar-account,
.app-sidebar .sidebar-status {
  position: relative;
  z-index: 1;
  border-top-color: rgba(199,237,245,.16);
}
.app-sidebar .sidebar-account .btn-outline-secondary {
  border-color: rgba(172,225,237,.32);
  background: rgba(255,255,255,.04);
  color: #e9f9fc;
}
.app-sidebar .sidebar-account .btn-outline-secondary:hover {
  border-color: rgba(107,226,242,.55);
  background: rgba(0,167,209,.18);
  color: #fff;
}
.app-sidebar .status-dot {
  background: #43e4ca;
  box-shadow: 0 0 0 3px rgba(67,228,202,.12);
}

/* Chat */
.chat-container { background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%); }
.chat-header {
  min-height: 74px;
  border-bottom-color: #e2eef3;
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(244,251,253,.96));
  box-shadow: 0 1px 0 rgba(0,34,101,.03);
}
.assistant-avatar,
.assistant-message::before {
  background: linear-gradient(145deg, var(--scochat-navy-900), #006a9e 58%, var(--scochat-cyan-500));
  box-shadow: 0 7px 18px rgba(0,78,129,.18);
}
.chat-header h1 { color: var(--scochat-navy-900); }
.chat-header-status {
  border-color: #cee5ed;
  color: #3d667a;
  background: #f1fbfd;
}
.messages { background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%); }
.user-message {
  border-color: #cfeaf1;
  background: linear-gradient(145deg, #eefafd, #e3f5f9);
  color: var(--scochat-navy-950);
}
.chat-input-row {
  border-color: #c7dde7;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,34,101,.09);
}
.chat-input-row:focus-within {
  border-color: var(--scochat-cyan-500);
  box-shadow: 0 0 0 3px rgba(0,167,209,.10), 0 16px 42px rgba(0,34,101,.11);
}
#sendButton {
  border-radius: 13px;
  background: linear-gradient(135deg, var(--scochat-navy-900), #006fa8 54%, var(--scochat-cyan-500));
  box-shadow: 0 7px 18px rgba(0,105,161,.19);
}
#sendButton:hover,
#sendButton:focus-visible {
  background: linear-gradient(135deg, #001b52, #005f9b 54%, #009abe);
}
#attachChatImageButton { color: var(--scochat-navy-800); }
#attachChatImageButton:hover,
#attachChatImageButton:focus-visible {
  background: var(--scochat-ice-100);
  color: var(--scochat-cyan-600);
}

/* Main workspace surfaces */
.workspace-page,
.schedule-panel.workspace-main-panel { background: linear-gradient(180deg, #fff 0%, #fafdfe 100%); }
.calendar-header,
.engagement-header,
.inbox-header,
.schedule-panel-header {
  border-bottom-color: #dfeef3;
  background: linear-gradient(90deg, #fff, #f4fbfd);
}
.calendar-header h2,
.engagement-header h2,
.schedule-panel-header h2,
.inbox-header h2 { color: var(--scochat-navy-900); }
.panel-eyebrow,
.sidebar-section-label,
.subscription-plan-kicker { color: var(--scochat-cyan-600); }

/* Cards */
.card,
.scheduled-post-card,
.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card,
.agency-add-card,
.agency-users-card {
  border-color: #dcebf1 !important;
  box-shadow: 0 8px 26px rgba(0,34,101,.055) !important;
}
.card,
.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card,
.agency-add-card,
.agency-users-card {
  background: linear-gradient(180deg, #fff, #fcfeff);
}
.engagement-summary-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.engagement-summary-card:hover {
  transform: translateY(-2px);
  border-color: #b9e0ea !important;
  box-shadow: 0 13px 30px rgba(0,34,101,.09) !important;
}

/* Subscription */
.subscription-card {
  overflow-y: auto;
  box-shadow: 0 28px 80px rgba(0,34,101,.16);
}
.subscription-header h1 {
  color: var(--scochat-navy-900);
  font-weight: 760;
}
.subscription-current-summary > div {
  border-color: #dcebf1;
  background: linear-gradient(145deg, #f9fdfe, #eef9fc);
}
.subscription-current-summary strong { color: var(--scochat-navy-900); }
.subscription-plan-card {
  border-color: #d7e7ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,34,101,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.subscription-plan-card:hover {
  transform: translateY(-3px);
  border-color: #a8d8e4;
  box-shadow: 0 18px 40px rgba(0,34,101,.10);
}
.subscription-plan-card-featured {
  border-color: #76cde0;
  background: linear-gradient(145deg, #fff 0%, #f0fbfd 100%);
  box-shadow: 0 14px 36px rgba(0,140,181,.10);
}
.subscription-plan-card h2 {
  color: var(--scochat-navy-900);
  font-weight: 760;
}
.subscription-agency-notice {
  border-color: #a9dce7;
  background: #effafd;
}
.subscription-agency-notice p { color: #3f6577; }

/* Agency */
.agency-body { background: linear-gradient(180deg, #fbfdfe, #f5fbfd); }
.agency-add-card,
.agency-users-card { border-radius: 18px; }
.agency-add-card h3,
.agency-users-card h3 { color: var(--scochat-navy-900); }
.agency-user-kb-field {
  border-color: #cce4ec;
  background: linear-gradient(145deg, #f8fdfe, #eefafd);
}
.agency-user-row {
  border-color: #d8e8ef;
  background: linear-gradient(90deg, #fff, #f8fcfd);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.agency-user-row:hover {
  border-color: #b8dce6;
  box-shadow: 0 8px 22px rgba(0,34,101,.06);
}

/* Settings */
.settings-body { background: linear-gradient(180deg, #fff, #fbfdfe); }
.settings-body .border.rounded {
  border-color: #d9e9ef !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff, #f7fcfd);
  box-shadow: 0 5px 18px rgba(0,34,101,.04);
}

/* Inbox */
.inbox-dialog { border-color: #d8e8ef; }
.inbox-filters {
  border-right-color: #dcebf1;
  background: linear-gradient(180deg, #f7fcfd, #f2f9fb);
}
.inbox-filter { color: #486174; }
.inbox-filter:hover {
  background: #e7f6fa;
  color: var(--scochat-navy-900);
}
.inbox-filter.active {
  background: linear-gradient(90deg, rgba(0,167,209,.15), rgba(0,167,209,.06));
  color: var(--scochat-navy-900);
  box-shadow: inset 3px 0 0 var(--scochat-cyan-500);
}
.inbox-conversation-item { border-bottom-color: #e3eef2; }
.inbox-conversation-item:hover { background: #f3fbfd; }
.inbox-conversation-item.active,
.inbox-conversation-item.is-unread { background: linear-gradient(90deg, #edf9fc, #f7fdfe); }
.inbox-platform-badge {
  background: #e5f6fa;
  color: var(--scochat-navy-800);
}
.inbox-thread-messages { background: linear-gradient(180deg, #f8fcfd, #f3f9fb); }
.inbox-message-row.is-outbound .inbox-message-bubble {
  border-color: #c9e7ee;
  background: linear-gradient(145deg, #e8f8fb, #ddf3f7);
}

/* Engagement */
.engagement-toolbar {
  border-bottom-color: #dcebf1;
  background: linear-gradient(90deg, #f8fcfd, #f1f9fb);
}
.engagement-performance-heading h3,
.engagement-performance-metric strong { color: var(--scochat-navy-900); }
.engagement-performance-metric.active { background: linear-gradient(180deg, #edfafd, #e5f6fa); }
.engagement-performance-metric.active::after {
  background: linear-gradient(90deg, var(--scochat-navy-800), var(--scochat-cyan-500));
}
.engagement-performance-metric.active strong { color: var(--scochat-cyan-600); }
.engagement-platform,
.engagement-post-footer a { color: var(--scochat-blue-700); }

/* Calendar */
.calendar-overlay { background: rgba(0,21,62,.48); }
.calendar-dialog { border-color: #d9eaf0; }
#postsCalendar .fc-toolbar-title { color: var(--scochat-navy-900); }
#postsCalendar .fc-button-primary {
  border-color: #c8dde6;
  background: #fff;
  color: var(--scochat-navy-800);
}
#postsCalendar .fc-button-primary:hover,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active {
  border-color: #8fc8d8;
  background: #eaf8fb;
  color: var(--scochat-navy-900);
}
#postsCalendar .calendar-event-scheduled {
  background: linear-gradient(135deg, #006da6, var(--scochat-cyan-500)) !important;
  border-color: var(--scochat-cyan-500) !important;
}
.calendar-legend-dot.scheduled { background: var(--scochat-cyan-500); }

/* Schedule composer */
.schedule-panel { border-left-color: #dbeaf0; }
.schedule-panel-body { background: linear-gradient(180deg, #fff, #fbfdfe); }
.image-preview-wrapper,
.chat-attachment-preview {
  border-color: #d4e7ee;
  background: linear-gradient(145deg, #fbfeff, #f0f9fb);
}

/* Alerts, statuses, scrollbars */
.alert-info {
  border-color: #9edcea;
  background: #e9f9fc;
  color: #174f68;
}
.alert-success {
  border-color: #a9ddd2;
  background: #effaf7;
  color: #17604f;
}
.status-dot { background: #18b79c; }
.messages::-webkit-scrollbar-thumb,
.schedule-panel-body::-webkit-scrollbar-thumb,
.calendar-main::-webkit-scrollbar-thumb,
.calendar-post-details::-webkit-scrollbar-thumb,
.engagement-body::-webkit-scrollbar-thumb,
.inbox-conversation-list::-webkit-scrollbar-thumb {
  background: #a9cfda;
  background-clip: content-box;
}

a { color: var(--scochat-blue-700); }
a:hover { color: var(--scochat-cyan-600); }

@media (max-width: 960px) {
  .app-sidebar {
    background: linear-gradient(90deg, #001846 0%, #002b70 55%, #005b8c 100%);
    box-shadow: 0 5px 20px rgba(0,34,101,.13);
  }
}

@media (max-width: 680px) {
  .brand-mark-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .auth-card { border-radius: 20px; }
}

/* =========================================================
   SCOCHAT AI — PREMIUM BRAND SYSTEM V6
   Exact user-provided palette:
   Deep navy:        #00205C / #001336
   Cyan accent:      #06ADD2
   Mist surfaces:    #EAFAFF / #EFF2FA / #F7FAFF
   Text:             #101827
   Secondary text:   #4B5B73

   Visual intent:
   premium, cinematic, high-trust, restrained glass,
   subtle glow, confident typography, code-native precision.
   CSS-only visual override. No application logic changed.
========================================================= */

:root {
  --scochat-navy: #00205C;
  --scochat-navy-deep: #001336;
  --scochat-cyan: #06ADD2;

  --scochat-mist-cyan: #EAFAFF;
  --scochat-mist-blue: #EFF2FA;
  --scochat-mist-white: #F7FAFF;

  --scochat-text: #101827;
  --scochat-muted: #4B5B73;

  --app-bg: #F7FAFF;
  --surface: #FFFFFF;
  --surface-subtle: #F7FAFF;
  --surface-hover: #EAFAFF;
  --sidebar: #001336;

  --text: #101827;
  --text-soft: #4B5B73;

  --border: #D9E5F0;
  --border-strong: #C7D7E6;

  --brand: #06ADD2;
  --brand-hover: #0799BA;
  --brand-soft: #EAFAFF;

  --shadow-soft:
    0 1px 2px rgba(0, 19, 54, 0.04),
    0 10px 28px rgba(0, 32, 92, 0.07);

  --shadow-float:
    0 24px 70px rgba(0, 19, 54, 0.18);

  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
}

/* ---------- Overall cinematic canvas ---------- */

html {
  background: #F7FAFF;
}

body {
  background:
    radial-gradient(
      circle at 88% 3%,
      rgba(6, 173, 210, 0.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 6% 93%,
      rgba(0, 32, 92, 0.07),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #F7FAFF 0%,
      #EFF2FA 56%,
      #F7FAFF 100%
    );
  color: #101827;
  letter-spacing: -0.006em;
}

::selection {
  background: rgba(6, 173, 210, 0.22);
  color: #001336;
}

/* ---------- Confident type ---------- */

h1,
h2,
h3,
h4,
h5,
h6,
.chat-header h1,
.calendar-header h2,
.engagement-header h2,
.subscription-header h1,
.subscription-plan-card h2,
.agency-add-card h3,
.agency-users-card h3 {
  color: #001336;
  letter-spacing: -0.025em;
}

.chat-header h1,
.subscription-header h1 {
  font-weight: 780;
}

.brand-copy strong {
  letter-spacing: -0.018em;
}

/* ---------- Brand mark ---------- */

.brand-mark-logo {
  border: 1px solid rgba(6, 173, 210, 0.16);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(234,250,255,0.98)
    );
  box-shadow:
    0 10px 30px rgba(0, 19, 54, 0.20),
    0 0 0 1px rgba(255,255,255,0.62) inset;
}

/* ---------- Premium button language ---------- */

.btn-primary,
.schedule-panel .btn-primary,
.calendar-dialog .btn-primary {
  border-color: transparent !important;
  background:
    linear-gradient(
      135deg,
      #001336 0%,
      #00205C 58%,
      #06ADD2 135%
    ) !important;
  color: #fff !important;
  box-shadow:
    0 10px 24px rgba(0, 32, 92, 0.20);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.schedule-panel .btn-primary:hover,
.calendar-dialog .btn-primary:hover {
  border-color: transparent !important;
  background:
    linear-gradient(
      135deg,
      #00102D 0%,
      #001B4E 56%,
      #0799BA 135%
    ) !important;
  box-shadow:
    0 14px 32px rgba(0, 32, 92, 0.28);
  transform: translateY(-1px);
}

.btn-outline-primary,
.schedule-panel .btn-outline-primary,
.calendar-dialog .btn-outline-primary {
  border-color: rgba(6, 173, 210, 0.44) !important;
  background: rgba(255,255,255,0.88);
  color: #00205C !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.schedule-panel .btn-outline-primary:hover,
.calendar-dialog .btn-outline-primary:hover {
  border-color: #06ADD2 !important;
  background: #EAFAFF !important;
  color: #001336 !important;
}

.btn-outline-secondary {
  border-color: #C7D7E6;
  background: rgba(255,255,255,0.86);
  color: #4B5B73;
}

.btn-outline-secondary:hover {
  border-color: #AABFD2;
  background: #F7FAFF;
  color: #00205C;
}

/* ---------- Form precision ---------- */

.form-control,
.form-select,
.inbox-reply-input {
  border-color: #C7D7E6;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  color: #101827;
}

.form-control:hover,
.form-select:hover,
.inbox-reply-input:hover {
  border-color: #A9C2D5;
}

.form-control:focus,
.form-select:focus,
.inbox-reply-input:focus {
  border-color: #06ADD2;
  box-shadow:
    0 0 0 3px rgba(6, 173, 210, 0.12) !important,
    0 8px 24px rgba(0, 32, 92, 0.06);
}

.form-control::placeholder,
.inbox-reply-input::placeholder {
  color: #8592A5;
}

/* ---------- Auth / subscription glass ---------- */

.auth-screen,
.subscription-screen {
  background:
    radial-gradient(
      circle at 82% 6%,
      rgba(6, 173, 210, 0.16),
      transparent 27%
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(0, 32, 92, 0.10),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #F7FAFF 0%,
      #EFF2FA 48%,
      #F7FAFF 100%
    );
}

.auth-card,
.subscription-card {
  border: 1px solid rgba(6, 173, 210, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.94),
      rgba(247,250,255,0.93)
    );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 28px 80px rgba(0, 19, 54, 0.17);
}

.auth-card::before,
.subscription-card::before {
  background:
    linear-gradient(
      90deg,
      #001336 0%,
      #00205C 56%,
      #06ADD2 100%
    );
}

.auth-card .brand-copy strong,
.subscription-header h1 {
  color: #001336;
}

.auth-tabs {
  border: 1px solid rgba(0, 32, 92, 0.07);
  background: #EFF2FA;
}

.auth-tab {
  color: #4B5B73;
}

.auth-tab.active {
  color: #001336;
  background: #FFFFFF;
  box-shadow:
    0 6px 18px rgba(0, 32, 92, 0.09);
}

/* ---------- Deep-navy cinematic sidebar ---------- */

.app-sidebar {
  border-right: 0;
  background:
    radial-gradient(
      circle at 28% 0%,
      rgba(6, 173, 210, 0.20),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #001336 0%,
      #001A4A 48%,
      #00205C 100%
    );
  box-shadow:
    10px 0 34px rgba(0, 19, 54, 0.13);
}

.app-sidebar::after {
  width: 170px;
  height: 170px;
  background:
    radial-gradient(
      circle,
      rgba(6, 173, 210, 0.12),
      transparent 70%
    );
}

.app-sidebar .brand-copy strong,
.app-sidebar .sidebar-account-name span,
.app-sidebar .sidebar-status strong {
  color: #FFFFFF;
}

.app-sidebar .brand-copy span,
.app-sidebar .sidebar-account-name small,
.app-sidebar .sidebar-status span:not(.status-dot),
.app-sidebar .sidebar-section-label {
  color: rgba(234, 250, 255, 0.66);
}

.app-sidebar .sidebar-action,
.app-sidebar .sidebar-subaction {
  color: rgba(247, 250, 255, 0.87);
}

.app-sidebar .sidebar-action-icon,
.app-sidebar .sidebar-subaction-icon {
  color: #8BE2F3;
}

.app-sidebar .sidebar-action:hover,
.app-sidebar .sidebar-action:focus-visible,
.app-sidebar .sidebar-subaction:hover,
.app-sidebar .sidebar-subaction:focus-visible {
  border-color: rgba(6, 173, 210, 0.11);
  background: rgba(6, 173, 210, 0.11);
  color: #FFFFFF;
}

.app-sidebar .sidebar-action.active,
.app-sidebar .sidebar-subaction.active {
  border-color: rgba(6, 173, 210, 0.26);
  background:
    linear-gradient(
      90deg,
      rgba(6, 173, 210, 0.22),
      rgba(6, 173, 210, 0.07)
    );
  color: #FFFFFF;
  box-shadow:
    inset 3px 0 0 #06ADD2,
    0 8px 22px rgba(0, 19, 54, 0.08);
}

.app-sidebar .sidebar-subnav {
  border-left-color: rgba(234, 250, 255, 0.20);
}

.app-sidebar .sidebar-account,
.app-sidebar .sidebar-status {
  border-top-color: rgba(234, 250, 255, 0.13);
}

.app-sidebar .sidebar-account .btn-outline-secondary {
  border-color: rgba(234, 250, 255, 0.24);
  background: rgba(255,255,255,0.035);
  color: #EAFAFF;
}

.app-sidebar .sidebar-account .btn-outline-secondary:hover {
  border-color: rgba(6, 173, 210, 0.48);
  background: rgba(6, 173, 210, 0.13);
  color: #FFFFFF;
}

/* ---------- Chat: clean white with restrained cyan glow ---------- */

.chat-container {
  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F7FAFF 100%
    );
}

.chat-header {
  border-bottom-color: #DFE8F1;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.98),
      rgba(247,250,255,0.97)
    );
  box-shadow:
    0 1px 0 rgba(0, 19, 54, 0.025);
}

.chat-header h1 {
  color: #001336;
}

.assistant-avatar,
.assistant-message::before {
  background:
    linear-gradient(
      145deg,
      #001336,
      #00205C 72%,
      #06ADD2 145%
    );
  box-shadow:
    0 10px 24px rgba(0, 32, 92, 0.18);
}

.chat-header-status {
  border-color: #CFE3EC;
  background: #EAFAFF;
  color: #31546A;
}

.messages {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(6, 173, 210, 0.035),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FCFDFF 100%
    );
}

.user-message {
  border-color: #D0E6EE;
  background:
    linear-gradient(
      145deg,
      #F7FAFF,
      #EAFAFF
    );
  color: #101827;
}

.chat-input-row {
  border-color: #C7D7E6;
  background: rgba(255,255,255,0.97);
  box-shadow:
    0 12px 36px rgba(0, 19, 54, 0.09);
}

.chat-input-row:focus-within {
  border-color: #06ADD2;
  box-shadow:
    0 0 0 3px rgba(6, 173, 210, 0.10),
    0 18px 44px rgba(0, 19, 54, 0.11);
}

#sendButton {
  background:
    linear-gradient(
      135deg,
      #001336,
      #00205C 68%,
      #06ADD2 145%
    );
  box-shadow:
    0 9px 22px rgba(0, 32, 92, 0.19);
}

#attachChatImageButton {
  color: #00205C;
}

#attachChatImageButton:hover,
#attachChatImageButton:focus-visible {
  background: #EAFAFF;
  color: #06ADD2;
}

/* ---------- Main workspace surfaces ---------- */

.workspace-page,
.schedule-panel.workspace-main-panel,
.settings-body,
.schedule-panel-body {
  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F7FAFF 100%
    );
}

.calendar-header,
.engagement-header,
.inbox-header,
.schedule-panel-header {
  border-bottom-color: #DCE6EF;
  background:
    linear-gradient(
      90deg,
      #FFFFFF 0%,
      #F7FAFF 100%
    );
}

.panel-eyebrow,
.subscription-plan-kicker {
  color: #06ADD2;
}

/* ---------- Cards: premium, restrained elevation ---------- */

.card,
.scheduled-post-card,
.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card,
.agency-add-card,
.agency-users-card,
.subscription-plan-card,
.subscription-current-summary > div {
  border-color: #DCE6EF !important;
  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FCFDFF 100%
    );
  box-shadow:
    0 10px 30px rgba(0, 19, 54, 0.055) !important;
}

.subscription-plan-card,
.engagement-summary-card,
.agency-user-row {
  transition:
    transform 0.17s ease,
    box-shadow 0.17s ease,
    border-color 0.17s ease;
}

.subscription-plan-card:hover,
.engagement-summary-card:hover,
.agency-user-row:hover {
  transform: translateY(-2px);
  border-color: #B8D7E4 !important;
  box-shadow:
    0 18px 44px rgba(0, 19, 54, 0.095) !important;
}

/* ---------- Subscription ---------- */

.subscription-current-summary > div {
  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #F7FAFF
    );
}

.subscription-current-summary strong {
  color: #001336;
}

.subscription-plan-card-featured {
  border-color: rgba(6, 173, 210, 0.50) !important;
  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #EAFAFF 100%
    );
  box-shadow:
    0 18px 42px rgba(6, 173, 210, 0.09) !important;
}

.subscription-agency-notice {
  border-color: rgba(6, 173, 210, 0.30);
  background: #EAFAFF;
}

.subscription-agency-notice p {
  color: #4B5B73;
}

/* ---------- Agency ---------- */

.agency-body {
  background:
    linear-gradient(
      180deg,
      #F7FAFF 0%,
      #EFF2FA 100%
    );
}

.agency-user-kb-field {
  border-color: #CEE2EA;
  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #EAFAFF
    );
}

.agency-user-row {
  border-color: #DCE6EF;
  background:
    linear-gradient(
      90deg,
      #FFFFFF,
      #F7FAFF
    );
}

/* ---------- Inbox ---------- */

.inbox-filters {
  border-right-color: #DCE6EF;
  background:
    linear-gradient(
      180deg,
      #F7FAFF,
      #EFF2FA
    );
}

.inbox-filter {
  color: #4B5B73;
}

.inbox-filter:hover {
  background: #EAFAFF;
  color: #00205C;
}

.inbox-filter.active {
  background:
    linear-gradient(
      90deg,
      rgba(6, 173, 210, 0.14),
      rgba(6, 173, 210, 0.04)
    );
  color: #001336;
  box-shadow:
    inset 3px 0 0 #06ADD2;
}

.inbox-conversation-item {
  border-bottom-color: #E3EAF2;
}

.inbox-conversation-item:hover {
  background: #F7FAFF;
}

.inbox-conversation-item.active,
.inbox-conversation-item.is-unread {
  background:
    linear-gradient(
      90deg,
      #EAFAFF,
      #F7FAFF
    );
}

.inbox-platform-badge {
  background: #EAFAFF;
  color: #00205C;
}

.inbox-thread-messages {
  background:
    linear-gradient(
      180deg,
      #F7FAFF,
      #EFF2FA
    );
}

.inbox-message-row.is-outbound
.inbox-message-bubble {
  border-color: #CFE6EE;
  background:
    linear-gradient(
      145deg,
      #F7FAFF,
      #EAFAFF
    );
}

/* ---------- Engagement ---------- */

.engagement-toolbar {
  border-bottom-color: #DCE6EF;
  background:
    linear-gradient(
      90deg,
      #F7FAFF,
      #EFF2FA
    );
}

.engagement-performance-heading h3,
.engagement-performance-metric strong {
  color: #001336;
}

.engagement-performance-metric.active {
  background:
    linear-gradient(
      180deg,
      #EAFAFF,
      #F7FAFF
    );
}

.engagement-performance-metric.active::after {
  background:
    linear-gradient(
      90deg,
      #00205C,
      #06ADD2
    );
}

.engagement-performance-metric.active strong,
.engagement-platform,
.engagement-post-footer a {
  color: #06ADD2;
}

/* ---------- Calendar ---------- */

.calendar-overlay {
  background: rgba(0, 19, 54, 0.52);
}

#postsCalendar .fc-toolbar-title {
  color: #001336;
}

#postsCalendar .fc-button-primary {
  border-color: #C7D7E6;
  background: #FFFFFF;
  color: #00205C;
}

#postsCalendar .fc-button-primary:hover,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active {
  border-color: #9EC5D4;
  background: #EAFAFF;
  color: #001336;
}

#postsCalendar .calendar-event-scheduled {
  background:
    linear-gradient(
      135deg,
      #00205C,
      #06ADD2
    ) !important;
  border-color: #06ADD2 !important;
}

.calendar-legend-dot.scheduled {
  background: #06ADD2;
}

/* ---------- Media / attachment glass ---------- */

.image-preview-wrapper,
.chat-attachment-preview {
  border-color: #D2E2EA;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.96),
      rgba(234,250,255,0.90)
    );
  box-shadow:
    0 8px 24px rgba(0, 19, 54, 0.045);
}

/* ---------- High-trust system states ---------- */

.alert-info {
  border-color: rgba(6, 173, 210, 0.34);
  background: #EAFAFF;
  color: #294F63;
}

.alert-success {
  border-color: #A8DDD3;
  background: #F0FBF8;
  color: #205E52;
}

.status-dot {
  background: #23BDA0;
  box-shadow: 0 0 0 3px rgba(35, 189, 160, 0.12);
}

/* ---------- Refined scrollbar ---------- */

.messages::-webkit-scrollbar-thumb,
.schedule-panel-body::-webkit-scrollbar-thumb,
.calendar-main::-webkit-scrollbar-thumb,
.calendar-post-details::-webkit-scrollbar-thumb,
.engagement-body::-webkit-scrollbar-thumb,
.inbox-conversation-list::-webkit-scrollbar-thumb {
  background: #AEC7D4;
  background-clip: content-box;
}

/* ---------- Focus accessibility ---------- */

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(6, 173, 210, 0.24);
  outline-offset: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .app-sidebar {
    background:
      linear-gradient(
        90deg,
        #001336 0%,
        #00205C 72%,
        #04356F 100%
      );
    box-shadow:
      0 6px 24px rgba(0, 19, 54, 0.14);
  }
}

/* =========================================================
   Billing workspace page
   ---------------------------------------------------------
   The subscription component remains a full-screen access gate
   for users without access. These styles apply only when an
   entitled user opens Billing from the sidebar.
========================================================= */

.subscription-screen.billing-workspace-page {
  grid-column: 2;
  grid-row: 1;

  position: static;
  inset: auto;
  z-index: auto;

  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  align-items: stretch;
  justify-content: stretch;

  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(6, 173, 210, 0.07),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #F7FAFF 0%,
      #EFF2FA 100%
    );

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.subscription-screen.billing-workspace-page.d-none {
  display: none !important;
}

.subscription-screen.billing-workspace-page
.subscription-card {
  position: relative;

  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 100%;

  margin: 0;
  overflow: visible;

  padding:
    36px
    max(
      30px,
      calc((100% - 1120px) / 2)
    )
    56px;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.subscription-screen.billing-workspace-page
.subscription-card::before {
  display: none;
}

.subscription-screen.billing-workspace-page
.subscription-header {
  margin-bottom: 24px;
  padding-bottom: 21px;
  border-bottom: 1px solid #DCE6EF;
}

.subscription-screen.billing-workspace-page
.subscription-header h1 {
  font-size: clamp(
    1.8rem,
    2.3vw,
    2.45rem
  );
  line-height: 1.08;
}

.subscription-screen.billing-workspace-page
.subscription-header p {
  max-width: 700px;
  margin-top: 8px;
  color: #4B5B73 !important;
  font-size: 0.96rem;
  line-height: 1.6;
}

/* Page navigation replaces modal-style closing. */
.subscription-screen.billing-workspace-page
#subscriptionCloseButton {
  display: none !important;
}

.subscription-screen.billing-workspace-page
.subscription-current-summary {
  gap: 14px;
  margin: 22px 0 30px;
}

.subscription-screen.billing-workspace-page
.subscription-current-summary > div {
  min-height: 94px;
  padding: 18px 19px;
  border-radius: 16px;
}

.subscription-screen.billing-workspace-page
.subscription-current-summary span {
  margin-bottom: 7px;
  color: #4B5B73;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.subscription-screen.billing-workspace-page
.subscription-current-summary strong {
  color: #001336;
  font-size: 1.03rem;
}

.subscription-screen.billing-workspace-page
.subscription-plan-grid {
  gap: 20px;
}

.subscription-screen.billing-workspace-page
.subscription-plan-card {
  min-height: 310px;
  padding: 26px;
  border-radius: 19px;
}

.subscription-screen.billing-workspace-page
.subscription-plan-card h2 {
  font-size: 1.45rem;
}

.subscription-screen.billing-workspace-page
.subscription-actions {
  margin-top: 30px;
  padding-top: 22px;
}

/* Billing behaves like the other selected sidebar pages. */
.app-sidebar #openBillingButton.active {
  border-color: rgba(6, 173, 210, 0.26);
  background:
    linear-gradient(
      90deg,
      rgba(6, 173, 210, 0.22),
      rgba(6, 173, 210, 0.07)
    );
  color: #FFFFFF;
  box-shadow:
    inset 3px 0 0 #06ADD2,
    0 8px 22px rgba(0, 19, 54, 0.08);
}

@media (max-width: 960px) {
  .subscription-screen.billing-workspace-page {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .subscription-screen.billing-workspace-page
  .subscription-card {
    padding: 24px 16px 38px;
  }

  .subscription-screen.billing-workspace-page
  .subscription-current-summary,
  .subscription-screen.billing-workspace-page
  .subscription-plan-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Inbox — Scochat AI draft status
========================================================= */

.inbox-draft-status {
  margin-top: 8px;
  padding: 0 2px;
  color: #4B5B73;
  font-size: 0.72rem;
  line-height: 1.4;
}

.inbox-draft-status.text-danger {
  color: #B42318 !important;
}

.inbox-reply-actions > .btn:first-child:not(:disabled) {
  border-color: rgba(6, 173, 210, 0.35);
  background: #F7FAFF;
  color: #00205C;
}

.inbox-reply-actions > .btn:first-child:not(:disabled):hover,
.inbox-reply-actions > .btn:first-child:not(:disabled):focus-visible {
  border-color: #06ADD2;
  background: #EAFAFF;
  color: #001336;
}


/* =========================================================
   SCOCHAT AI — DESIGN SYSTEM V7  ·  "Inset Console"
   ---------------------------------------------------------
   Visual layer only. Appended after every existing rule so
   nothing above is deleted or reordered: no IDs, classes,
   markup hooks or scripts are touched, and every selector
   here already exists in the app.

   Concept
   -------
   The workspace stops being a set of edge-to-edge panes and
   becomes a cool paper canvas with floating sheets: a navy
   navigation rail on the left, the working surface inset
   beside it. One accent (Scochat cyan) is spent on state —
   what is active, focused or live — and nothing else.

   Palette      ink #071A3D · navy #00205C · cyan #06ADD2
                canvas #EDF2F9 · sheet #FFFFFF · line #E2E9F3
   Type         Manrope (headings, brand, numerals)
                Inter (interface + body)
   Motion       two moments only: a message arriving, and a
                surface responding to a click. Reduced-motion
                honoured.
   ========================================================= */

:root {
  --v7-ink: #071A3D;
  --v7-navy: #00205C;
  --v7-navy-deep: #001336;
  --v7-cyan: #06ADD2;
  --v7-cyan-deep: #0490B3;
  --v7-cyan-wash: #E8F8FD;

  --v7-canvas: #EDF2F9;
  --v7-sheet: #FFFFFF;
  --v7-line: #E2E9F3;
  --v7-line-strong: #CFDBEA;
  --v7-muted: #5B6C86;
  --v7-muted-soft: #8194AD;

  --v7-posted: #0E9F6E;
  --v7-draft: #D98A1A;
  --v7-alert: #D6455B;

  --v7-radius-sheet: 20px;
  --v7-radius-card: 14px;
  --v7-radius-control: 12px;

  --v7-shadow-sheet:
    0 1px 2px rgba(7, 26, 61, 0.05),
    0 14px 34px -16px rgba(7, 26, 61, 0.22);

  --v7-shadow-lift:
    0 2px 4px rgba(7, 26, 61, 0.05),
    0 22px 48px -20px rgba(7, 26, 61, 0.32);

  --v7-focus: 0 0 0 3px rgba(6, 173, 210, 0.28);

  /* Re-point the original tokens so untouched components inherit V7. */
  --app-bg: #EDF2F9;
  --surface: #FFFFFF;
  --surface-subtle: #F5F8FC;
  --surface-hover: #EDF4FA;
  --text: #071A3D;
  --text-soft: #5B6C86;
  --border: #E2E9F3;
  --border-strong: #CFDBEA;
  --brand: #06ADD2;
  --brand-hover: #0490B3;
  --brand-soft: #E8F8FD;
  --shadow-soft: var(--v7-shadow-sheet);
  --shadow-float: var(--v7-shadow-lift);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 11px;
}

/* ---------------------------------------------------------
   1 · Typography
   Manrope carries headings, the brand and every figure;
   Inter runs the interface at small sizes where it is more
   legible. Both are loaded from index.html with a full
   system fallback stack, so nothing breaks offline.
--------------------------------------------------------- */

body {
  font-family: Inter, "Segoe UI", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--v7-ink);
}

h1, h2, h3, h4, h5, h6,
.brand-copy strong,
.chat-header h1,
.calendar-header h2,
.engagement-header h2,
.inbox-header h2,
.subscription-header h1,
.subscription-plan-card h2,
.agency-add-card h3,
.agency-users-card h3,
.agency-users-heading,
.engagement-performance-heading h3 {
  font-family: Manrope, Inter, ui-sans-serif, sans-serif;
  color: var(--v7-ink);
  font-weight: 750;
  letter-spacing: -0.028em;
}

.chat-header h1 {
  font-size: 1.02rem;
}

.chat-header p,
.form-text,
.text-muted,
small {
  color: var(--v7-muted) !important;
}

/* Figures read as data, not prose. */
.engagement-performance-metric strong,
.engagement-summary-card strong,
.engagement-post-metrics,
.engagement-rate,
.inbox-summary,
.inbox-conversation-time,
.inbox-message-time,
.scheduled-post-file-id,
.calendar-detail-row span {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.panel-eyebrow,
.subscription-plan-kicker,
.sidebar-section-label,
.inbox-filter-title,
.inbox-column-header {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--v7-muted-soft);
}

::selection {
  background: rgba(6, 173, 210, 0.24);
  color: var(--v7-navy-deep);
}

/* ---------------------------------------------------------
   2 · The frame
   The shell becomes a canvas; the rail and the working
   surface float on it as separate sheets. Grid columns and
   every JS-driven class (.schedule-open, .d-none) are left
   exactly as they were.
--------------------------------------------------------- */

html {
  background: var(--v7-canvas);
}

body {
  background: var(--v7-canvas);
}

.app-shell {
  gap: 12px;
  padding: 12px;
  background:
    radial-gradient(
      1100px 460px at 78% -8%,
      rgba(6, 173, 210, 0.10),
      transparent 70%
    ),
    radial-gradient(
      900px 420px at 0% 108%,
      rgba(0, 32, 92, 0.08),
      transparent 68%
    ),
    linear-gradient(165deg, #EFF4FA 0%, #E7EEF8 58%, #EDF2F9 100%);
}

.chat-container,
.workspace-page,
.schedule-panel.workspace-main-panel {
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius-sheet);
  background: var(--v7-sheet);
  box-shadow: var(--v7-shadow-sheet);
}

.chat-container,
.workspace-page {
  overflow: hidden;
}

/* ---------------------------------------------------------
   3 · Navigation rail
--------------------------------------------------------- */

.app-sidebar {
  overflow: hidden;
  padding: 16px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--v7-radius-sheet);
  background:
    radial-gradient(
      420px 200px at 20% -6%,
      rgba(6, 173, 210, 0.26),
      transparent 72%
    ),
    linear-gradient(185deg, #001336 0%, #001B4B 46%, #00205C 100%);
  box-shadow:
    0 18px 40px -22px rgba(0, 19, 54, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar-brand {
  gap: 12px;
  padding: 6px 8px 22px;
}

.brand-mark-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(139, 226, 243, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 8px 20px -8px rgba(0, 19, 54, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.brand-mark-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.app-sidebar .brand-copy strong {
  color: #FFFFFF;
  font-size: 0.97rem;
}

.app-sidebar .brand-copy span {
  color: rgba(213, 235, 248, 0.62);
  font-size: 0.75rem;
}

.app-sidebar .sidebar-section-label {
  padding: 14px 10px 8px;
  color: rgba(198, 224, 240, 0.5);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.app-sidebar .sidebar-action {
  position: relative;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgba(226, 240, 250, 0.84);
  font-size: 0.86rem;
  font-weight: 550;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    transform 0.12s ease;
}

.app-sidebar .sidebar-action:hover,
.app-sidebar .sidebar-action:focus-visible {
  border-color: transparent;
  background: rgba(139, 226, 243, 0.12);
  color: #FFFFFF;
}

.app-sidebar .sidebar-action.active {
  border-color: rgba(139, 226, 243, 0.22);
  background: linear-gradient(
    90deg,
    rgba(6, 173, 210, 0.26),
    rgba(6, 173, 210, 0.05)
  );
  color: #FFFFFF;
  font-weight: 700;
  box-shadow:
    inset 3px 0 0 var(--v7-cyan),
    0 10px 24px -14px rgba(6, 173, 210, 0.9);
}

.app-sidebar .sidebar-action-icon svg {
  width: 17px;
  height: 17px;
}

.app-sidebar .sidebar-action-icon {
  color: rgba(139, 226, 243, 0.78);
}

.app-sidebar .sidebar-action.active .sidebar-action-icon {
  color: #8BE2F3;
}

.app-sidebar .sidebar-subnav {
  margin-left: 26px;
  padding-left: 12px;
  border-left: 1px solid rgba(139, 226, 243, 0.2);
}

.app-sidebar .sidebar-subaction {
  border-radius: 9px;
  color: rgba(213, 235, 248, 0.72);
  font-size: 0.79rem;
}

.app-sidebar .sidebar-subaction:hover,
.app-sidebar .sidebar-subaction:focus-visible {
  background: rgba(139, 226, 243, 0.1);
  color: #FFFFFF;
}

.app-sidebar .sidebar-subaction.active {
  background: rgba(6, 173, 210, 0.18);
  color: #FFFFFF;
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--v7-cyan);
}

.app-sidebar .sidebar-account,
.app-sidebar .sidebar-status {
  border-top-color: rgba(198, 224, 240, 0.12);
}

.app-sidebar .sidebar-status {
  margin-top: 6px;
  padding: 12px 10px 4px;
}

.app-sidebar .sidebar-status strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #E9F6FC;
}

.status-dot {
  background: #2BE0A8;
  box-shadow: 0 0 0 3px rgba(43, 224, 168, 0.18);
}

.app-sidebar .sidebar-account .btn-outline-secondary {
  border-radius: 9px;
  border-color: rgba(198, 224, 240, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: #E9F6FC;
  font-size: 0.76rem;
  font-weight: 600;
}

.app-sidebar .sidebar-account .btn-outline-secondary:hover {
  border-color: rgba(6, 173, 210, 0.6);
  background: rgba(6, 173, 210, 0.16);
  color: #FFFFFF;
}

/* ---------------------------------------------------------
   4 · Conversation
--------------------------------------------------------- */

.chat-container {
  background: var(--v7-sheet);
}

.chat-header {
  min-height: 68px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--v7-line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.assistant-avatar,
.assistant-message::before {
  background: linear-gradient(145deg, #001336, #00205C 60%, #06ADD2 150%);
  box-shadow:
    0 10px 22px -12px rgba(0, 32, 92, 0.85),
    inset 0 0 0 1px rgba(139, 226, 243, 0.28);
}

.chat-header-status {
  border-color: #D5E6F1;
  border-radius: 999px;
  background: #F3F8FC;
  color: var(--v7-muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.messages {
  gap: 24px;
  padding: 36px max(26px, calc((100% - 820px) / 2)) 28px;
  background:
    radial-gradient(
      700px 280px at 96% 0%,
      rgba(6, 173, 210, 0.05),
      transparent 70%
    ),
    #FFFFFF;
}

.message {
  font-size: 0.95rem;
  animation: v7MessageIn 0.26s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes v7MessageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.assistant-message::before {
  width: 30px;
  height: 30px;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.assistant-message {
  padding-left: 44px;
  color: #12233F;
}

.user-message {
  padding: 12px 16px;
  border-color: transparent;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(145deg, #00205C 0%, #073B82 100%);
  color: #F4FAFF;
  box-shadow: 0 14px 30px -18px rgba(0, 32, 92, 0.85);
}

.user-message a {
  color: #9BE6F8;
}

.error-message {
  border-color: #F3C8CE;
  border-radius: var(--v7-radius-card);
  background: #FEF5F6;
  color: #9C2233;
}

.loading-dots {
  color: var(--v7-cyan);
  letter-spacing: 0.12em;
}

#messages .generated-chat-image,
#messages .chat-message-image,
#messages .chat-message-video {
  border-color: var(--v7-line);
  box-shadow: 0 10px 26px -18px rgba(7, 26, 61, 0.5);
}

.generated-post-details {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  background: linear-gradient(180deg, #F8FBFE, #F2F7FC);
}

.generated-detail-row strong {
  color: var(--v7-muted);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ---------------------------------------------------------
   5 · Composer — the one loud element
--------------------------------------------------------- */

.chat-footer {
  padding: 8px max(22px, calc((100% - 820px) / 2)) 20px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    #FFFFFF 24%
  );
}

.chat-input-row {
  min-height: 56px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--v7-line-strong);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 38px -24px rgba(7, 26, 61, 0.55);
}

.chat-input-row:focus-within {
  border-color: var(--v7-cyan);
  box-shadow:
    var(--v7-focus),
    0 22px 46px -26px rgba(7, 26, 61, 0.6);
}

.chat-input-row #messageInput::placeholder {
  color: var(--v7-muted-soft);
}

#attachChatImageButton {
  border-radius: 11px;
  color: var(--v7-navy);
}

#attachChatImageButton:hover,
#attachChatImageButton:focus-visible {
  background: var(--v7-cyan-wash);
  color: var(--v7-cyan-deep);
}

#sendButton {
  padding: 10px 20px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(140deg, #00205C 0%, #0490B3 130%) !important;
  color: #FFFFFF !important;
  font-weight: 650;
  box-shadow: 0 12px 26px -14px rgba(0, 32, 92, 0.95);
  transition: transform 0.12s ease, box-shadow 0.16s ease;
}

#sendButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -14px rgba(0, 32, 92, 1);
}

#sendButton:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px -10px rgba(0, 32, 92, 0.9);
}

.chat-attachment-preview,
.image-preview-wrapper,
.media-preview-wrapper {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  background: #F6FAFD;
}

/* ---------------------------------------------------------
   6 · Controls: buttons, fields, badges, system messages
--------------------------------------------------------- */

.btn {
  border-radius: var(--v7-radius-control);
  font-weight: 600;
  letter-spacing: -0.006em;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.16s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary,
.schedule-panel .btn-primary,
.calendar-dialog .btn-primary {
  border-color: transparent !important;
  background: linear-gradient(140deg, #00205C 0%, #0490B3 135%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px -16px rgba(0, 32, 92, 0.9);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.schedule-panel .btn-primary:hover,
.calendar-dialog .btn-primary:hover {
  background: linear-gradient(140deg, #001B4E 0%, #067FA0 135%) !important;
  box-shadow: 0 16px 30px -16px rgba(0, 32, 92, 1);
  transform: translateY(-1px);
}

.btn-outline-primary,
.schedule-panel .btn-outline-primary,
.calendar-dialog .btn-outline-primary {
  border-color: var(--v7-line-strong) !important;
  background: #FFFFFF;
  color: var(--v7-navy) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.schedule-panel .btn-outline-primary:hover,
.calendar-dialog .btn-outline-primary:hover {
  border-color: var(--v7-cyan) !important;
  background: var(--v7-cyan-wash) !important;
  color: var(--v7-navy-deep) !important;
}

.btn-outline-secondary {
  border-color: var(--v7-line-strong);
  background: #FFFFFF;
  color: var(--v7-muted);
}

.btn-outline-secondary:hover {
  border-color: #B4C7DC;
  background: #F4F8FC;
  color: var(--v7-navy);
}

.btn-outline-danger {
  border-color: #F0C4CB;
  color: #B93A4C;
}

.btn-outline-danger:hover {
  border-color: var(--v7-alert);
  background: #FDF3F5;
  color: #9C2233;
}

.form-label {
  margin-bottom: 5px;
  color: var(--v7-ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.form-control,
.form-select,
.inbox-reply-input {
  border-color: var(--v7-line-strong);
  border-radius: var(--v7-radius-control);
  background: #FFFFFF;
  color: var(--v7-ink);
}

.form-control:hover,
.form-select:hover,
.inbox-reply-input:hover {
  border-color: #B4C7DC;
}

.form-control:focus,
.form-select:focus,
.inbox-reply-input:focus {
  border-color: var(--v7-cyan);
  box-shadow: var(--v7-focus) !important;
}

.form-control::placeholder,
.inbox-reply-input::placeholder {
  color: var(--v7-muted-soft);
}

.alert {
  border: 1px solid var(--v7-line);
  border-left: 3px solid var(--v7-muted-soft);
  border-radius: var(--v7-radius-control);
  font-size: 0.86rem;
}

.alert-success {
  border-left-color: var(--v7-posted);
  background: #EFFAF5;
  color: #0A6B4B;
}

.alert-danger {
  border-left-color: var(--v7-alert);
  background: #FDF3F5;
  color: #9C2233;
}

.alert-info,
.alert-primary {
  border-left-color: var(--v7-cyan);
  background: var(--v7-cyan-wash);
  color: #0A4A63;
}

.alert-warning {
  border-left-color: var(--v7-draft);
  background: #FDF7EC;
  color: #7C5310;
}

.card {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  box-shadow: none;
}

/* ---------------------------------------------------------
   7 · Composer panel (Schedule Post)
--------------------------------------------------------- */

.schedule-panel-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--v7-line);
  background: #FFFFFF;
}

.schedule-panel-body,
.schedule-panel.workspace-main-panel,
.settings-body {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
}

.scheduled-post-card {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  background: #FFFFFF;
  box-shadow: 0 10px 26px -22px rgba(7, 26, 61, 0.55);
}

.scheduled-status-badge {
  border-radius: 999px;
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.scheduled-post-file-id {
  color: var(--v7-muted-soft);
  font-size: 0.72rem;
}

/* ---------------------------------------------------------
   8 · Inbox
--------------------------------------------------------- */

.inbox-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--v7-line);
  background: #FFFFFF;
}

.inbox-filters {
  border-right-color: var(--v7-line);
  background: linear-gradient(180deg, #F8FBFD 0%, #F2F6FB 100%);
}

.inbox-filter {
  border-radius: 10px;
  color: var(--v7-muted);
  font-size: 0.84rem;
  font-weight: 550;
}

.inbox-filter:hover {
  background: #E9F1F8;
  color: var(--v7-navy);
}

.inbox-filter.active {
  background: linear-gradient(
    90deg,
    rgba(6, 173, 210, 0.16),
    rgba(6, 173, 210, 0.02)
  );
  color: var(--v7-navy-deep);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--v7-cyan);
}

.inbox-conversation-item {
  border-bottom-color: #ECF1F7;
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.inbox-conversation-item:hover {
  background: #F6FAFD;
}

.inbox-conversation-item.is-unread {
  background: #FFFFFF;
  box-shadow: inset 3px 0 0 rgba(6, 173, 210, 0.45);
}

.inbox-conversation-item.active,
.inbox-conversation-item.is-unread.active {
  background: linear-gradient(90deg, #E8F8FD, #F8FCFE);
  box-shadow: inset 3px 0 0 var(--v7-cyan);
}

.inbox-conversation-item.is-unread .inbox-conversation-identity {
  font-weight: 700;
  color: var(--v7-ink);
}

.inbox-conversation-time {
  color: var(--v7-muted-soft);
  font-size: 0.72rem;
}

.inbox-platform-badge {
  border-radius: 999px;
  background: var(--v7-cyan-wash);
  color: #0A4A63;
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
}

.inbox-conversation-type,
.inbox-primary-label {
  color: var(--v7-muted);
  font-size: 0.72rem;
}

.inbox-thread-header {
  border-bottom: 1px solid var(--v7-line);
  background: #FFFFFF;
}

.inbox-thread-messages {
  background: linear-gradient(180deg, #F7FAFD 0%, #F1F6FB 100%);
}

.inbox-message-bubble {
  border-radius: 16px;
  border-color: var(--v7-line);
  background: #FFFFFF;
  box-shadow: 0 8px 22px -20px rgba(7, 26, 61, 0.6);
}

.inbox-message-row.is-outbound .inbox-message-bubble {
  border-color: transparent;
  background: linear-gradient(145deg, #00205C, #0A3F86);
  color: #F4FAFF;
}

.inbox-message-row.is-outbound .inbox-message-sender,
.inbox-message-row.is-outbound .inbox-message-time {
  color: rgba(226, 243, 252, 0.72);
}

.inbox-reply-box {
  border-top: 1px solid var(--v7-line);
  background: #FFFFFF;
}

.inbox-draft-status {
  color: var(--v7-muted);
  font-size: 0.75rem;
}

.inbox-recommendation {
  border-left: 3px solid var(--v7-cyan);
  border-radius: 10px;
  background: var(--v7-cyan-wash);
  color: #0A4A63;
}

.inbox-context-panel {
  border-left-color: var(--v7-line);
  background: #FBFDFE;
}

.inbox-context-item {
  border-color: var(--v7-line);
  border-radius: 10px;
  background: #FFFFFF;
}

.inbox-empty-state,
.inbox-detail-empty,
.engagement-empty {
  color: var(--v7-muted);
  font-size: 0.88rem;
}

.is-positive {
  color: var(--v7-posted);
}

.is-negative {
  color: var(--v7-alert);
}

.is-neutral {
  color: var(--v7-muted);
}

/* ---------------------------------------------------------
   9 · Engagement
--------------------------------------------------------- */

.engagement-header,
.engagement-toolbar {
  border-bottom-color: var(--v7-line);
  background: #FFFFFF;
}

.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  background: #FFFFFF;
  box-shadow: 0 12px 28px -24px rgba(7, 26, 61, 0.55);
}

.engagement-post-card {
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}

.engagement-post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--v7-shadow-lift);
}

.engagement-summary-card strong,
.engagement-performance-metric strong {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--v7-ink);
}

.engagement-performance-label,
.engagement-performance-subtitle {
  color: var(--v7-muted);
}

.engagement-performance-metric {
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.engagement-performance-metric.active {
  background: linear-gradient(180deg, var(--v7-cyan-wash), #FFFFFF);
}

.engagement-performance-metric.active strong {
  color: var(--v7-navy);
}

.engagement-performance-metric.active::after {
  background: linear-gradient(90deg, var(--v7-navy), var(--v7-cyan));
}

.engagement-performance-change.is-positive {
  color: var(--v7-posted);
}

.engagement-performance-change.is-negative {
  color: var(--v7-alert);
}

.engagement-platform {
  color: var(--v7-cyan-deep);
  font-family: Manrope, Inter, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
}

.engagement-post-caption {
  color: #26384F;
}

.engagement-post-date,
.engagement-post-footer {
  color: var(--v7-muted-soft);
  font-size: 0.74rem;
}

.engagement-post-image {
  border-radius: 10px;
}

.engagement-performance-insight {
  border-left: 3px solid var(--v7-cyan);
  border-radius: 10px;
  background: #F6FBFD;
  color: #26384F;
}

/* ---------------------------------------------------------
   10 · Calendar
--------------------------------------------------------- */

.calendar-header {
  padding: 16px 22px;
  border-bottom-color: var(--v7-line);
  background: #FFFFFF;
}

.calendar-overlay {
  background: rgba(7, 26, 61, 0.48);
  backdrop-filter: blur(3px);
}

.calendar-dialog,
.inbox-dialog,
.engagement-dialog,
.settings-dialog,
.agency-dialog {
  border-radius: var(--v7-radius-sheet);
}

.calendar-legend {
  color: var(--v7-muted);
  font-size: 0.76rem;
}

.calendar-legend-dot.scheduled {
  background: var(--v7-cyan);
}

.calendar-legend-dot.posted {
  background: var(--v7-posted);
}

#postsCalendar .fc-toolbar-title {
  font-family: Manrope, Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.028em;
  color: var(--v7-ink);
}

#postsCalendar .fc-button-primary {
  border-color: var(--v7-line-strong);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--v7-navy);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  box-shadow: none;
}

#postsCalendar .fc-button-primary:hover,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active {
  border-color: var(--v7-cyan);
  background: var(--v7-cyan-wash);
  color: var(--v7-navy-deep);
}

#postsCalendar .fc-theme-standard td,
#postsCalendar .fc-theme-standard th,
#postsCalendar .fc-scrollgrid {
  border-color: #E6ECF4;
}

#postsCalendar .fc-col-header-cell-cushion {
  color: var(--v7-muted);
  font-size: 0.74rem;
  font-weight: 650;
  text-decoration: none;
}

#postsCalendar .fc-daygrid-day-number {
  color: #43556E;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

#postsCalendar .fc-day-today {
  background: #F2F9FD !important;
}

#postsCalendar .fc-day-today .fc-daygrid-day-number {
  color: var(--v7-navy);
  font-weight: 750;
}

#postsCalendar .calendar-event-scheduled,
#postsCalendar .calendar-event-posted {
  border-radius: 7px !important;
  padding: 2px 6px !important;
  font-size: 0.73rem;
  font-weight: 600;
}

#postsCalendar .calendar-event-scheduled {
  background: linear-gradient(135deg, #00205C, #0490B3) !important;
  border-color: transparent !important;
}

#postsCalendar .calendar-event-posted {
  background: linear-gradient(135deg, #0B7F59, #0E9F6E) !important;
  border-color: transparent !important;
}

.calendar-post-details,
.calendar-date-picker {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  background: #FFFFFF;
}

.calendar-detail-row strong {
  color: var(--v7-muted);
  font-size: 0.72rem;
}

/* ---------------------------------------------------------
   11 · Billing, agency, settings
--------------------------------------------------------- */

.subscription-card,
.subscription-plan-card,
.agency-add-card,
.agency-users-card {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-sheet);
  background: #FFFFFF;
  box-shadow: var(--v7-shadow-sheet);
}

.subscription-plan-card {
  transition: transform 0.16s ease, box-shadow 0.18s ease,
    border-color 0.16s ease;
}

.subscription-plan-card:hover {
  transform: translateY(-3px);
  border-color: var(--v7-line-strong);
  box-shadow: var(--v7-shadow-lift);
}

.subscription-plan-card-featured {
  border-color: rgba(6, 173, 210, 0.45);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4FBFE 100%);
  box-shadow:
    0 0 0 1px rgba(6, 173, 210, 0.16),
    var(--v7-shadow-lift);
}

.subscription-plan-kicker {
  color: var(--v7-cyan-deep);
}

.subscription-current-summary,
.subscription-agency-notice {
  border-radius: var(--v7-radius-card);
  background: #F6FAFD;
  color: #26384F;
}

.agency-user-row {
  border-color: var(--v7-line);
  border-radius: var(--v7-radius-card);
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.agency-user-row:hover {
  border-color: var(--v7-line-strong);
  box-shadow: 0 12px 26px -22px rgba(7, 26, 61, 0.6);
}

.agency-user-remove-confirmation {
  border-left: 3px solid var(--v7-alert);
  border-radius: 10px;
  background: #FDF4F6;
}

/* ---------------------------------------------------------
   12 · Sign in — the first screen anyone sees
--------------------------------------------------------- */

.auth-screen,
.subscription-screen:not(.billing-workspace-page) {
  align-items: center;
  padding: 28px;
  background:
    radial-gradient(
      760px 420px at 76% 4%,
      rgba(6, 173, 210, 0.30),
      transparent 68%
    ),
    radial-gradient(
      620px 420px at 8% 96%,
      rgba(6, 173, 210, 0.14),
      transparent 66%
    ),
    linear-gradient(168deg, #001336 0%, #00205C 62%, #012E79 100%);
}

.auth-card {
  max-width: 432px;
  padding: 30px 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 40px 90px -40px rgba(0, 10, 32, 0.85),
    0 2px 6px rgba(0, 10, 32, 0.12);
}

.auth-card .sidebar-brand {
  padding: 0 0 22px;
}

.auth-card .brand-copy strong {
  color: var(--v7-ink);
  font-size: 1.05rem;
}

.auth-card .brand-copy span {
  color: var(--v7-muted);
  font-size: 0.78rem;
}

.auth-card .brand-mark-logo {
  border-color: var(--v7-line-strong);
  background: #FFFFFF;
  box-shadow: 0 10px 24px -14px rgba(7, 26, 61, 0.55);
}

.auth-tabs {
  gap: 4px;
  padding: 4px;
  background: #EEF3F9;
}

.auth-tab {
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--v7-muted);
}

.auth-tab.active {
  background: #FFFFFF;
  color: var(--v7-navy);
  box-shadow: 0 6px 16px -10px rgba(7, 26, 61, 0.6);
}

.auth-form .btn-primary {
  padding: 11px 18px;
  font-size: 0.94rem;
}

/* ---------------------------------------------------------
   13 · Quality floor: scrollbars, focus, motion, small screens
--------------------------------------------------------- */

.messages::-webkit-scrollbar,
.schedule-panel-body::-webkit-scrollbar,
.calendar-main::-webkit-scrollbar,
.calendar-post-details::-webkit-scrollbar,
.inbox-conversation-list::-webkit-scrollbar,
.inbox-thread-messages::-webkit-scrollbar,
.engagement-body::-webkit-scrollbar,
.agency-body::-webkit-scrollbar,
.settings-body::-webkit-scrollbar {
  width: 10px;
}

.messages::-webkit-scrollbar-thumb,
.schedule-panel-body::-webkit-scrollbar-thumb,
.calendar-main::-webkit-scrollbar-thumb,
.calendar-post-details::-webkit-scrollbar-thumb,
.inbox-conversation-list::-webkit-scrollbar-thumb,
.inbox-thread-messages::-webkit-scrollbar-thumb,
.engagement-body::-webkit-scrollbar-thumb,
.agency-body::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #C3D2E3;
  background-clip: content-box;
}

.messages:hover::-webkit-scrollbar-thumb,
.inbox-conversation-list:hover::-webkit-scrollbar-thumb {
  background: #A9BDD4;
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid var(--v7-cyan);
  outline-offset: 2px;
}

.app-sidebar :focus-visible {
  outline-color: #8BE2F3;
}

.form-control:focus-visible,
.form-select:focus-visible,
.inbox-reply-input:focus-visible {
  outline: none;
}

@media (max-width: 1180px) {
  .app-shell {
    gap: 10px;
    padding: 10px;
  }
}

@media (max-width: 960px) {
  .app-shell {
    gap: 8px;
    padding: 8px;
  }

  .app-sidebar {
    padding: 8px 12px;
    border-radius: 16px;
    background: linear-gradient(92deg, #001336 0%, #00205C 70%, #033C7C 100%);
  }

  .chat-container,
  .workspace-page,
  .schedule-panel.workspace-main-panel {
    border-radius: 16px;
  }

  .messages {
    padding: 22px 16px;
  }

  .chat-footer {
    padding: 8px 14px 14px;
  }
}

@media (max-width: 680px) {
  .app-shell {
    gap: 6px;
    padding: 6px;
  }

  .auth-card {
    padding: 24px 20px 26px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message,
  .engagement-post-card,
  .subscription-plan-card,
  .btn,
  #sendButton {
    animation: none !important;
    transition: none !important;
  }

  .engagement-post-card:hover,
  .subscription-plan-card:hover,
  #sendButton:hover,
  .btn-primary:hover {
    transform: none !important;
  }
}


/* =========================================================
   SCOCHAT AI — DESIGN SYSTEM V8
   Refinements over V7, plus a rebuilt Post performance view.
   Still visual-only: appended last, nothing above removed,
   no IDs, classes or scripts touched.

   What changed
   -------------
   · Post performance rebuilt: posts breathe, each card has a
     clear three-band rhythm (who + when / what was said /
     how it did), metrics become readable chips.
   · Video and transparent thumbnails sit on a navy plate, so
     a white play icon is finally visible.
   · Headers, section rhythm and empty states tightened
     across the workspace.
   ========================================================= */

/* ---------------------------------------------------------
   1 · Engagement page rhythm
--------------------------------------------------------- */

.engagement-header {
  padding: 18px 26px;
}

.engagement-toolbar {
  padding: 12px 26px;
  border-bottom: 1px solid var(--v7-line);
  background: #FBFDFE;
}

.engagement-body {
  padding: 26px 28px 34px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 220px, #F7FAFD 100%);
}

.engagement-performance-panel {
  margin-bottom: 34px;
  border-radius: var(--v7-radius-sheet);
}

.engagement-performance-heading {
  padding: 24px 26px 12px;
}

.engagement-performance-heading h3 {
  font-size: 1.22rem;
}

.engagement-performance-metrics {
  padding: 10px 18px 0;
  gap: 6px;
}

.engagement-performance-metric {
  padding: 16px 16px 20px;
  border-right: 0;
  border-radius: 14px;
}

.engagement-performance-metric:hover,
.engagement-performance-metric:focus-visible {
  background: #F4F9FC;
}

.engagement-performance-metric.active {
  background: linear-gradient(180deg, var(--v7-cyan-wash), #FFFFFF);
  box-shadow: inset 0 0 0 1px rgba(6, 173, 210, 0.22);
}

.engagement-performance-metric.active::after {
  right: 18px;
  left: 18px;
  bottom: 8px;
  height: 3px;
}

.engagement-performance-label {
  color: var(--v7-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.engagement-performance-change {
  font-size: 0.72rem;
  font-weight: 600;
}

.engagement-performance-chart-wrap {
  margin: 18px 26px 26px;
}

.engagement-performance-chart-empty {
  border-top-color: var(--v7-line);
}

.engagement-section-header {
  align-items: baseline;
  margin-bottom: 18px;
}

.engagement-post-summary-heading,
.engagement-section-header h3,
.engagement-section-header h4 {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 750;
  letter-spacing: -0.028em;
  color: var(--v7-ink);
}

.engagement-summary-grid {
  gap: 16px;
  margin-bottom: 34px;
}

.engagement-summary-card {
  padding: 18px 18px 20px;
  border-radius: var(--v7-radius-card);
}

.engagement-summary-card span {
  margin-bottom: 8px;
  color: var(--v7-muted);
  font-size: 0.75rem;
  font-weight: 550;
}

.engagement-summary-card strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--v7-ink);
}

/* ---------------------------------------------------------
   2 · Post performance cards
   Wider gutters, a taller media plate, and three clearly
   separated bands inside each card.
--------------------------------------------------------- */

.engagement-post-grid {
  grid-template-columns: repeat(auto-fill, minmax(392px, 1fr));
  gap: 22px;
}

.engagement-post-card {
  grid-template-columns: 158px minmax(0, 1fr);
  min-height: 186px;
  border: 1px solid var(--v7-line) !important;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 14px 32px -26px rgba(7, 26, 61, 0.6) !important;
  transition:
    transform 0.16s ease,
    box-shadow 0.18s ease,
    border-color 0.16s ease;
}

.engagement-post-card:hover {
  transform: translateY(-2px);
  border-color: var(--v7-line-strong) !important;
  box-shadow: 0 26px 50px -30px rgba(7, 26, 61, 0.7) !important;
}

/* Media plate — navy, so white / transparent video glyphs read */
.engagement-post-image {
  position: relative;
  width: 158px;
  min-height: 186px;
  background:
    radial-gradient(
      120px 90px at 50% 34%,
      rgba(6, 173, 210, 0.26),
      transparent 72%
    ),
    linear-gradient(160deg, #001336 0%, #00205C 62%, #063C7D 100%);
}

.engagement-post-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #001336;
}

.engagement-post-image.is-placeholder {
  color: #9BE6F8;
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px rgba(0, 10, 32, 0.5);
}

.engagement-post-content {
  padding: 18px 20px 16px;
}

.engagement-post-top {
  align-items: center;
  margin-bottom: 11px;
}

.engagement-platform {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--v7-cyan-wash);
  color: #0A4A63 !important;
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.engagement-post-date {
  color: var(--v7-muted-soft);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.engagement-post-caption {
  margin: 0 0 16px;
  color: #33465F;
  font-size: 0.86rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}

/* Metrics as chips: each figure gets its own quiet container */
.engagement-post-metrics {
  gap: 8px;
  margin-top: auto;
  color: var(--v7-muted);
  font-size: 0.73rem;
}

.engagement-post-metrics > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid #E8EEF6;
  border-radius: 999px;
  background: #F7FAFD;
  line-height: 1.2;
  white-space: nowrap;
}

.engagement-post-metrics strong {
  color: var(--v7-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.engagement-post-footer {
  align-items: center;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--v7-line);
  font-size: 0.74rem;
}

.engagement-post-footer strong {
  color: var(--v7-ink);
  font-family: Manrope, Inter, sans-serif;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.engagement-post-footer a {
  color: var(--v7-cyan-deep);
  font-weight: 600;
}

.engagement-rate {
  padding: 4px 9px;
  border-radius: 999px;
  background: #EFFAF5;
  color: #0A6B4B !important;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.engagement-empty {
  padding: 62px 30px;
  color: var(--v7-muted);
  font-size: 0.9rem;
}

@media (max-width: 1150px) {
  .engagement-post-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .engagement-body {
    padding: 20px 18px 28px;
  }

  .engagement-post-card {
    grid-template-columns: 124px minmax(0, 1fr);
    min-height: 168px;
  }

  .engagement-post-image {
    width: 124px;
    min-height: 168px;
  }

  .engagement-post-content {
    padding: 15px 16px 14px;
  }
}

@media (max-width: 700px) {
  .engagement-post-grid {
    gap: 16px;
  }

  .engagement-header,
  .engagement-toolbar {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------------------------------------------------------
   3 · Workspace polish carried across the other views
--------------------------------------------------------- */

.inbox-header h2,
.calendar-header h2,
.engagement-header h2 {
  font-size: 1.1rem;
}

.inbox-summary {
  color: var(--v7-muted);
  font-size: 0.78rem;
}

.inbox-column-header {
  border-bottom: 1px solid var(--v7-line);
  background: #FBFDFE;
}

.inbox-conversation-preview {
  color: var(--v7-muted);
  font-size: 0.79rem;
  line-height: 1.45;
}

.scheduled-post-card:hover {
  border-color: var(--v7-line-strong);
}

.settings-dialog,
.agency-dialog,
.calendar-dialog,
.inbox-dialog,
.engagement-dialog {
  border-color: var(--v7-line);
  box-shadow: var(--v7-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
  .engagement-post-card,
  .engagement-post-card:hover {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Engagement Post Performance — media + equal card sizing
   ---------------------------------------------------------
   Fixes:
   1. Video posts are visually distinct from image posts.
   2. Every Post Performance card uses the same dimensions.
   3. The media plate no longer stretches differently from row to row.
========================================================= */

.engagement-post-grid {
  align-items: stretch;
  grid-auto-rows: 236px;
}

.engagement-post-card {
  width: 100%;
  height: 236px;
  min-height: 236px;
  max-height: 236px;
  align-self: stretch;
}

.engagement-post-image {
  position: relative;
  width: 158px;
  height: 236px;
  min-height: 236px;
  max-height: 236px;
  overflow: hidden;
}

.engagement-post-image img,
.engagement-post-image video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.engagement-post-image video {
  background: #001336;
}

.engagement-post-image.is-video::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 19, 54, 0.04) 0%,
      rgba(0, 19, 54, 0.04) 48%,
      rgba(0, 19, 54, 0.30) 100%
    );
  content: "";
}

.engagement-video-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.engagement-video-play-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding-left: 3px;
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 50%;
  background:
    rgba(0, 19, 54, 0.74);
  color: #FFFFFF;
  box-shadow:
    0 10px 30px rgba(0, 19, 54, 0.30),
    0 0 0 6px rgba(6, 173, 210, 0.10);
  font-size: 1rem;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.engagement-video-label {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 19, 54, 0.72);
  color: #EAFAFF;
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.engagement-post-image.is-video-placeholder {
  background:
    radial-gradient(
      110px 90px at 50% 42%,
      rgba(6, 173, 210, 0.30),
      transparent 70%
    ),
    linear-gradient(
      155deg,
      #001336 0%,
      #00205C 65%,
      #063C7D 100%
    );
}

.engagement-post-content {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.engagement-post-caption {
  min-height: 2.6em;
}

.engagement-post-metrics {
  align-content: flex-start;
}

.engagement-post-footer {
  flex: 0 0 auto;
}

/* Keep the compact version equal-sized too. */
@media (max-width: 900px) {
  .engagement-post-grid {
    grid-auto-rows: 220px;
  }

  .engagement-post-card {
    height: 220px;
    min-height: 220px;
    max-height: 220px;
  }

  .engagement-post-image {
    width: 124px;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
  }
}

/* On small phones, allow natural card height so content never clips. */
@media (max-width: 700px) {
  .engagement-post-grid {
    grid-auto-rows: auto;
  }

  .engagement-post-card {
    height: auto;
    min-height: 190px;
    max-height: none;
  }

  .engagement-post-image {
    height: auto;
    min-height: 190px;
    max-height: none;
  }
}



/* =========================================================
   Engagement video preview refinement V11
   ---------------------------------------------------------
   - No play icon.
   - VIDEO label sits at the top.
   - Video media URL is shown as its actual paused first frame.
========================================================= */

.engagement-video-indicator,
.engagement-video-play-icon {
  display: none !important;
}

.engagement-post-image
.engagement-video-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 4px 8px;

  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 999px;

  background: rgba(0, 19, 54, 0.76);
  color: #EAFAFF;

  font-family: Manrope, Inter, sans-serif;
  font-size: 0.60rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  box-shadow:
    0 5px 16px rgba(0, 19, 54, 0.18);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.engagement-post-image.is-video::after {
  /*
   * Keep only a very subtle readability gradient.
   * The video frame stays fully visible.
   */
  background:
    linear-gradient(
      180deg,
      rgba(0, 19, 54, 0.12) 0%,
      transparent 27%,
      transparent 100%
    );
}

.engagement-post-image video {
  object-fit: cover;
  background: #EFF2FA;
}

/*
 * This fallback is used only if the backend supplies neither
 * a thumbnail nor a usable video media URL.
 */
.engagement-post-image.is-video-placeholder {
  background:
    linear-gradient(
      145deg,
      #EFF2FA,
      #EAFAFF
    );
}


/* =========================================================
   Plans, brands, clients and multi-profile connections v13
========================================================= */
.subscription-card-wide { width: min(1180px, 100%); }
.subscription-current-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subscription-section-heading,
.subscription-plan-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.subscription-usage-section { margin: 4px 0 24px; }
.subscription-usage-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px;
}
.subscription-usage-card {
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: #f8fcfe;
}
.subscription-usage-card span { display: block; color: var(--text-soft); font-size: .72rem; margin-bottom: 4px; }
.subscription-usage-card strong { display: block; color: var(--scochat-navy-900); font-size: .92rem; }
.subscription-plan-toolbar { margin: 12px 0 14px; }
.subscription-billing-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: #f1f8fb; }
.subscription-billing-option { border: 0; border-radius: 999px; padding: 7px 13px; background: transparent; color: var(--text-soft); font-size: .78rem; font-weight: 700; }
.subscription-billing-option.active { background: #fff; color: var(--scochat-navy-900); box-shadow: var(--shadow-soft); }
.subscription-plan-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subscription-plan-card { min-height: 470px; }
.subscription-plan-price { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 2px; }
.subscription-plan-price strong { color: var(--scochat-navy-900); font-size: 1.75rem; line-height: 1; }
.subscription-plan-price span, .subscription-plan-billing-note { color: var(--text-soft); font-size: .74rem; }
.subscription-plan-limits { margin: 16px 0 0; padding-left: 18px; color: #4c6378; font-size: .78rem; line-height: 1.6; }

.sidebar-brand-switcher { margin: 0 6px 16px; padding: 10px; border: 1px solid rgba(111,230,242,.22); border-radius: 11px; background: rgba(255,255,255,.07); }
.sidebar-brand-switcher label { display: block; margin-bottom: 5px; color: rgba(224,247,252,.66); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-brand-switcher .form-select { border-color: rgba(111,230,242,.22); background-color: rgba(255,255,255,.96); color: var(--scochat-navy-900); font-size: .76rem; }

.social-platform-card { padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.social-platform-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.social-profile-list { display: grid; gap: 8px; margin-top: 12px; }
.social-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; background: #f8fcfe; }
.social-profile-info { min-width: 0; }
.social-profile-info strong, .social-profile-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-profile-info strong { font-size: .82rem; }
.social-profile-info span, .social-profile-empty { color: var(--text-soft); font-size: .72rem; }
.social-profile-empty { padding: 8px 0 2px; }

@media (max-width: 1180px) {
  .subscription-plan-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .subscription-current-summary, .subscription-usage-grid, .subscription-plan-grid-four { grid-template-columns: 1fr; }
  .subscription-plan-toolbar { align-items: stretch; flex-direction: column; }
  .subscription-billing-toggle { align-self: flex-start; }
  .social-platform-heading, .social-profile-row { align-items: stretch; flex-direction: column; }
}

/* =========================================================
   v25 – Full-page professional workspace refresh
   ========================================================= */
:root {
  --page-shell-bg: #eaf3f5;
  --page-surface: #ffffff;
  --page-surface-soft: #f5fafb;
  --page-border: #d9e7eb;
  --page-text: #0f2746;
  --page-muted: #648096;
  --page-shadow: 0 12px 30px rgba(18, 42, 66, 0.08);
}

html,
body,
.app-main,
.app-shell {
  background: var(--page-shell-bg) !important;
}

body {
  color: var(--page-text);
}

.app-shell {
  width: 100%;
  height: 100vh;
}

.schedule-panel.workspace-main-panel,
.settings-body,
.engagement-body,
.agency-body,
.subscription-screen,
.subscription-card,
.subscription-card-wide,
.workspace-page,
.workspace-page .calendar-dialog {
  background: var(--page-shell-bg) !important;
}

.schedule-panel.workspace-main-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 28px 32px 34px !important;
}

.calendar-overlay {
  padding: 16px !important;
  background: rgba(15, 24, 38, 0.28) !important;
  backdrop-filter: blur(8px);
}

.calendar-dialog,
.agency-dialog {
  width: min(1760px, calc(100vw - 32px)) !important;
  max-width: none !important;
  height: calc(100vh - 32px) !important;
  border-radius: 28px !important;
  border: 1px solid var(--page-border) !important;
  background: var(--page-shell-bg) !important;
  box-shadow: 0 28px 60px rgba(13, 31, 50, 0.16) !important;
}

.calendar-header {
  padding: 24px 28px 18px !important;
  border-bottom: 1px solid var(--page-border) !important;
  background: rgba(255, 255, 255, 0.56);
}

.calendar-header h2,
.page-title,
.workspace-page h1,
.workspace-page h2,
.workspace-page h3 {
  color: var(--page-text);
}

.agency-body {
  width: 100% !important;
  max-width: none !important;
  padding: 26px !important;
  overflow-y: auto;
}

.agency-add-card,
.agency-users-card,
.settings-body .border.rounded,
.workspace-page .border.rounded,
.card,
.plan-card,
.subscription-card,
.subscription-card-wide {
  border-radius: 24px !important;
  border: 1px solid var(--page-border) !important;
  background: var(--page-surface) !important;
  box-shadow: var(--page-shadow) !important;
}

.agency-add-card,
.agency-users-card {
  padding: 24px !important;
}

.agency-add-form {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
}

.agency-add-form .form-control,
.agency-add-form .form-select,
.settings-body .form-control,
.settings-body .form-select,
.workspace-page .form-control,
.workspace-page .form-select,
.workspace-page .form-control:focus,
.workspace-page .form-select:focus {
  border-radius: 16px !important;
}

.workspace-page,
.settings-body,
.engagement-body {
  width: 100%;
  max-width: none !important;
}

#agencyClientsList.agency-clients-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.agency-client-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 270px;
  padding: 18px 18px 16px;
  border: 1px solid var(--page-border);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(14, 36, 59, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.agency-client-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(14, 36, 59, 0.1);
  border-color: #cfdfe5;
}

.agency-client-card-disabled {
  opacity: 0.93;
}

.agency-client-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.agency-client-card-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.agency-client-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, #183c73 0%, #0e78a3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  flex-shrink: 0;
}

.agency-client-title-wrap {
  min-width: 0;
}

.agency-client-title {
  margin: 2px 0 4px;
  font-family: Manrope, Inter, sans-serif;
  font-size: 1.26rem;
  font-weight: 800;
  line-height: 1.15;
  color: #16304d;
}

.agency-client-subtitle {
  color: var(--page-muted);
  font-size: 0.9rem;
}

.agency-client-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.agency-client-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.95;
}

.agency-client-status-active {
  color: #249c72;
  background: rgba(36, 156, 114, 0.08);
  border-color: rgba(36, 156, 114, 0.2);
}

.agency-client-status-attention {
  color: #b06f12;
  background: rgba(237, 162, 26, 0.09);
  border-color: rgba(176, 111, 18, 0.18);
}

.agency-client-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.agency-client-metric {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding-top: 2px;
}

.agency-client-metric-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a90a3;
}

.agency-client-metric-value {
  font-family: Manrope, Inter, sans-serif;
  font-size: 1.28rem;
  line-height: 1;
  color: #16304d;
}

.agency-client-health {
  display: grid;
  gap: 8px;
}

.agency-client-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #5a7387;
  font-size: 0.92rem;
}

.agency-client-health-row strong {
  color: #17314c;
}

.agency-client-health-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #d8e8ed;
  overflow: hidden;
}

.agency-client-health-bar {
  height: 100%;
  border-radius: 999px;
}

.agency-client-health-bar-good {
  background: linear-gradient(90deg, #1f9770 0%, #27b286 100%);
}

.agency-client-health-bar-warning {
  background: linear-gradient(90deg, #c77f23 0%, #de9a38 100%);
}

.agency-client-health-bar-attention {
  background: linear-gradient(90deg, #d24a52 0%, #ef5b64 100%);
}

.agency-client-footer {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding-top: 4px;
}

.agency-client-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #5e788b;
  font-size: 0.9rem;
}

.agency-client-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agency-client-actions .btn {
  border-radius: 999px;
  padding-inline: 14px;
}

/* Wider, cleaner main pages */
.workspace-page > .container,
.workspace-page > .container-fluid,
.settings-body > .container,
.settings-body > .container-fluid {
  max-width: none !important;
  width: 100% !important;
}

.workspace-page .row,
.settings-body .row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

@media (max-width: 991.98px) {
  .schedule-panel.workspace-main-panel {
    padding: 18px 18px 26px !important;
  }

  .calendar-overlay {
    padding: 8px !important;
  }

  .calendar-dialog,
  .agency-dialog {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    border-radius: 20px !important;
  }

  .agency-body {
    padding: 18px !important;
  }

  #agencyClientsList.agency-clients-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v25.2 – requested cleanup
   ========================================================= */

/* No shadow around the outer page/dialog border. */
.calendar-dialog,
.agency-dialog,
.workspace-page .calendar-dialog,
.subscription-card-wide {
  box-shadow: none !important;
}


/* =========================================================
   v25.3 – true full-width workspace pages
   ========================================================= */

/* ---------------------------------------------------------
   Shared full-page treatment
--------------------------------------------------------- */
.workspace-page,
.settings-body,
.schedule-panel.workspace-main-panel,
.subscription-screen.billing-workspace-page {
  background: var(--page-shell-bg) !important;
}

/* Settings should use the complete available main workspace. */
.workspace-page .settings-body,
.settings-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 32px 40px !important;
}

#settingsForm {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.settings-dialog,
.workspace-page .settings-dialog {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--page-shell-bg) !important;
  box-shadow: none !important;
}

.settings-dialog .calendar-header {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.52) !important;
}

/* ---------------------------------------------------------
   Schedule Post
   Remove the old narrow 900px centered composer and side-box feel.
--------------------------------------------------------- */
.schedule-panel.workspace-main-panel {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--page-shell-bg) !important;
  box-shadow: none !important;
}

.schedule-panel.workspace-main-panel .schedule-panel-header {
  width: 100% !important;
  padding: 24px 32px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--page-border) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.52) !important;
}

.schedule-panel.workspace-main-panel .schedule-panel-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 32px 40px !important;
  background: var(--page-shell-bg) !important;
}

.schedule-panel.workspace-main-panel #schedulePostForm {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid var(--page-border) !important;
  border-radius: 24px !important;
  background: var(--page-surface) !important;
  box-shadow: none !important;
}

.schedule-panel.workspace-main-panel hr.my-4 {
  margin: 28px 0 !important;
  border-color: var(--page-border) !important;
  opacity: 1;
}

.schedule-panel.workspace-main-panel #scheduledPostsList {
  width: 100%;
  min-height: 92px;
  padding: 20px 22px;
  border: 1px solid var(--page-border);
  border-radius: 22px;
  background: var(--page-surface);
}

/* ---------------------------------------------------------
   Billing & subscription
   Keep the same blue-gray canvas used by the other workspace pages.
--------------------------------------------------------- */
.subscription-screen.billing-workspace-page {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 !important;
  background: var(--page-shell-bg) !important;
}

.subscription-screen.billing-workspace-page .subscription-card,
.subscription-screen.billing-workspace-page .subscription-card-wide {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 28px 32px 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--page-shell-bg) !important;
  box-shadow: none !important;
}

.subscription-screen.billing-workspace-page .subscription-header {
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 0 20px !important;
  background: transparent !important;
}

.subscription-screen.billing-workspace-page .subscription-current-summary,
.subscription-screen.billing-workspace-page .subscription-usage-section,
.subscription-screen.billing-workspace-page #subscriptionPlansWrap,
.subscription-screen.billing-workspace-page .subscription-actions,
.subscription-screen.billing-workspace-page .subscription-agency-notice {
  width: 100% !important;
  max-width: none !important;
}

.subscription-screen.billing-workspace-page .subscription-current-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.subscription-screen.billing-workspace-page .subscription-usage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* The useful information cards can stay white, but the PAGE is blue-gray. */
.subscription-screen.billing-workspace-page .subscription-current-summary > div,
.subscription-screen.billing-workspace-page .subscription-usage-item,
.subscription-screen.billing-workspace-page .subscription-plan-card {
  background: var(--page-surface) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   Responsive spacing
--------------------------------------------------------- */
@media (max-width: 991.98px) {
  .workspace-page .settings-body,
  .settings-body,
  .schedule-panel.workspace-main-panel .schedule-panel-body,
  .subscription-screen.billing-workspace-page .subscription-card,
  .subscription-screen.billing-workspace-page .subscription-card-wide {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .schedule-panel.workspace-main-panel .schedule-panel-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .subscription-screen.billing-workspace-page .subscription-current-summary,
  .subscription-screen.billing-workspace-page .subscription-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .subscription-screen.billing-workspace-page .subscription-current-summary,
  .subscription-screen.billing-workspace-page .subscription-usage-grid {
    grid-template-columns: 1fr !important;
  }

  .schedule-panel.workspace-main-panel #schedulePostForm {
    padding: 18px !important;
    border-radius: 18px !important;
  }
}

/* =========================================================
   ScoChat application dialogs — v25.6
   Keep confirmations/prompts above the workspace as true modals.
   ========================================================= */

.app-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
}

.app-dialog-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(7, 26, 52, 0.42);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 140ms ease;
}

.app-dialog-backdrop.is-visible {
  opacity: 1;
}

.app-dialog {
  width: min(100%, 470px);
  margin: auto;
  padding: 24px;
  border: 1px solid #d7e3ef;
  border-radius: 20px;
  background: #ffffff;
  color: #071c3a;
  transform: translateY(8px) scale(0.985);
  transition: transform 140ms ease;
}

.app-dialog-backdrop.is-visible .app-dialog {
  transform: translateY(0) scale(1);
}

.app-dialog-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.app-dialog-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: #eef7fb;
  color: #0878a7;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.app-dialog-danger .app-dialog-icon {
  background: #fff0f1;
  color: #c83d4d;
}

.app-dialog-warning .app-dialog-icon {
  background: #fff7e6;
  color: #b86d00;
}

.app-dialog-success .app-dialog-icon {
  background: #eaf8f1;
  color: #178357;
}

.app-dialog-heading {
  min-width: 0;
  flex: 1;
}

.app-dialog-title {
  margin: 1px 0 6px;
  color: #071c3a;
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.app-dialog-message {
  margin: 0;
  color: #56708f;
  font-size: 0.92rem;
  line-height: 1.55;
}

.app-dialog-field {
  margin-top: 20px;
}

.app-dialog-label {
  display: block;
  margin-bottom: 7px;
  color: #10284a;
  font-size: 0.82rem;
  font-weight: 650;
}

.app-dialog-input {
  width: 100%;
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.app-dialog-button {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 11px;
  font-weight: 700;
}

.app-dialog .btn-outline-secondary {
  border: 1px solid #cad9e8;
  background: #ffffff;
  color: #4b6481;
}

.app-dialog .btn-outline-secondary:hover,
.app-dialog .btn-outline-secondary:focus-visible {
  border-color: #abc1d7;
  background: #f5f9fc;
}

.app-dialog .btn-danger {
  border: 1px solid #ef4e5f;
  background: #ef4055;
  color: #ffffff;
}

.app-dialog .btn-danger:hover,
.app-dialog .btn-danger:focus-visible {
  border-color: #d93649;
  background: #d93649;
}

.app-dialog .btn-primary {
  border: 1px solid #168bb8;
  background: #168bb8;
  color: #ffffff;
}

.app-dialog .btn-primary:hover,
.app-dialog .btn-primary:focus-visible {
  border-color: #10789f;
  background: #10789f;
}

.app-dialog button:focus-visible,
.app-dialog input:focus-visible {
  outline: 3px solid rgba(22, 139, 184, 0.2);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .app-dialog-backdrop {
    align-items: flex-end;
    padding: 12px;
  }

  .app-dialog {
    width: 100%;
    padding: 20px;
    border-radius: 18px;
  }

  .app-dialog-actions {
    flex-direction: column-reverse;
  }

  .app-dialog-button {
    width: 100%;
  }
}

/* =========================================================
   Unified Inbox — independent right-panel scrolling fix
   ---------------------------------------------------------
   Removes the nested outer Inbox scroll and makes the
   AI Classification / Lead Score sidebar independently
   scrollable with a persistent scrollbar.
   ========================================================= */

.workspace-page .inbox-dialog {
  min-height: 0;
  overflow: hidden;
}

.inbox-layout {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.inbox-detail {
  min-height: 0;
  overflow: hidden;
}

.inbox-thread-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.inbox-thread-main {
  min-height: 0;
  overflow: hidden;
}

.inbox-context-panel {
  height: 100%;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #9fb4c9 transparent;
}

.inbox-context-panel::-webkit-scrollbar {
  width: 10px;
}

.inbox-context-panel::-webkit-scrollbar-track {
  background: transparent;
}

.inbox-context-panel::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #9fb4c9;
  background-clip: content-box;
}

.inbox-context-panel::-webkit-scrollbar-thumb:hover {
  background: #7f9ab5;
  background-clip: content-box;
}



/* =========================================================
   Marketing Dashboard reference alignment — 2026-09-30
   -----------------------------------------------------------------
   Visual-only adaptation of the supplied marketing-dashboard UI.
   Existing IDs, forms, API hooks and backend-backed features remain
   unchanged. No unsupported product surfaces are introduced here.
   ========================================================= */

:root {
  --md-radius: 14px;
  --md-radius-lg: 18px;
  --md-radius-xl: 22px;
  --md-navy-deep: #0b1f3a;
  --md-navy: #15345d;
  --md-navy-soft: #294c73;
  --md-cyan: #2aa9c9;
  --md-cyan-soft: #8ad8e7;
  --md-mist: #f5fafb;
  --md-bg: #f5f8fa;
  --md-card: #ffffff;
  --md-secondary: #edf4f6;
  --md-border: rgba(21, 52, 93, 0.13);
  --md-border-strong: rgba(21, 52, 93, 0.20);
  --md-text: #15345d;
  --md-muted: #65788e;
  --md-success: #278a68;
  --md-warning: #a66a1e;
  --md-danger: #c74957;
  --md-shadow: 0 18px 48px -34px rgba(11, 31, 58, 0.42);
  --md-shadow-soft: 0 1px 0 rgba(255,255,255,.55) inset, 0 10px 30px -26px rgba(11,31,58,.44);

  --app-bg: var(--md-bg);
  --surface: var(--md-card);
  --surface-subtle: var(--md-mist);
  --surface-hover: var(--md-secondary);
  --sidebar: var(--md-navy-deep);
  --text: var(--md-text);
  --text-soft: var(--md-muted);
  --border: var(--md-border);
  --border-strong: var(--md-border-strong);
  --brand: var(--md-cyan);
  --brand-hover: #218ca9;
  --brand-soft: #e7f6f9;
  --success: var(--md-success);
  --danger: var(--md-danger);
  --shadow-soft: var(--md-shadow-soft);
  --shadow-float: var(--md-shadow);

  --page-shell-bg: var(--md-bg);
  --page-surface: var(--md-card);
  --page-surface-soft: var(--md-mist);
  --page-border: var(--md-border);
  --page-text: var(--md-text);
  --page-muted: var(--md-muted);
  --page-shadow: var(--md-shadow-soft);
}

html,
body {
  background: var(--md-bg) !important;
  color: var(--md-text);
  font-family: "IBM Plex Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-copy strong,
.agency-client-title,
.subscription-plan-price strong {
  font-family: "Space Grotesk", Manrope, Inter, sans-serif !important;
  letter-spacing: -0.028em;
}

.panel-eyebrow,
.subscription-plan-kicker,
.sidebar-section-label,
.inbox-filter-title,
.inbox-column-header,
.engagement-platform,
.agency-client-metric-label,
.scheduled-post-file-id {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .12em;
}

/* ----- Application shell: flush dark rail + editorial workspace ----- */
.app-main,
.app-shell {
  width: 100%;
  height: 100vh;
  background: var(--md-bg) !important;
}

.app-shell,
.app-shell.schedule-open {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
}

.app-sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  padding: 18px 12px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(138,216,231,.12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(420px 260px at 4% -6%, rgba(42,169,201,.18), transparent 68%),
    linear-gradient(180deg, #0b1f3a 0%, #0a1b34 100%) !important;
  box-shadow: none !important;
}

.sidebar-brand {
  padding: 4px 10px 18px !important;
  gap: 11px !important;
}

.app-sidebar .brand-mark-logo {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 1px solid rgba(138,216,231,.22) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.75) !important;
}

.app-sidebar .brand-mark-logo img {
  width: 25px !important;
  height: 25px !important;
}

.app-sidebar .brand-copy strong {
  color: #fff !important;
  font-size: .96rem !important;
  font-weight: 650 !important;
}

.app-sidebar .brand-copy span {
  margin-top: 2px;
  color: rgba(226,241,248,.58) !important;
  font-size: .72rem !important;
}

.sidebar-brand-switcher {
  margin: 0 6px 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(138,216,231,.15) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.sidebar-brand-switcher label,
.app-sidebar .sidebar-section-label {
  color: rgba(211,232,243,.52) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .64rem !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.sidebar-brand-switcher .form-select {
  border-color: rgba(138,216,231,.15) !important;
  border-radius: 10px !important;
  background-color: rgba(255,255,255,.97) !important;
  color: var(--md-navy-deep) !important;
}

.sidebar-nav-reference {
  display: block !important;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(138,216,231,.2) transparent;
}

.sidebar-nav-reference::-webkit-scrollbar { width: 6px; }
.sidebar-nav-reference::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(138,216,231,.2);
}

.sidebar-nav-group + .sidebar-nav-group { margin-top: 12px; }
.sidebar-nav-group .sidebar-section-label { padding: 0 10px 6px !important; }

.app-sidebar .sidebar-action,
.app-sidebar .sidebar-subaction {
  position: relative;
  color: rgba(231,241,247,.72) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-sidebar .sidebar-action {
  min-height: 42px;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
}

.app-sidebar .sidebar-action-icon {
  color: rgba(210,233,243,.7) !important;
}

.app-sidebar .sidebar-action:hover,
.app-sidebar .sidebar-action:focus-visible,
.app-sidebar .sidebar-subaction:hover,
.app-sidebar .sidebar-subaction:focus-visible {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  outline: none !important;
}

.app-sidebar .sidebar-action.active {
  background: rgba(42,169,201,.14) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--md-cyan) !important;
}

.app-sidebar .sidebar-action.active .sidebar-action-icon {
  color: var(--md-cyan-soft) !important;
}

.sidebar-agent-group { display: block !important; }
.sidebar-subnav {
  display: grid !important;
  gap: 3px !important;
  margin: 4px 0 0 20px !important;
  padding: 4px 0 2px 11px !important;
  border-left: 1px solid rgba(138,216,231,.13) !important;
}

.app-sidebar .sidebar-subaction {
  min-height: 34px;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  font-size: .79rem !important;
}

.app-sidebar .sidebar-subaction.active {
  background: rgba(42,169,201,.1) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--md-cyan) !important;
}

.app-sidebar .sidebar-subaction-icon { color: rgba(138,216,231,.72) !important; }

.sidebar-account-tools-label {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(138,216,231,.1);
}

.sidebar-account-tools { display: grid !important; gap: 4px !important; }
.sidebar-spacer { min-height: 10px; }

.sidebar-account {
  margin-top: auto;
  padding: 12px 10px !important;
  border-top: 1px solid rgba(138,216,231,.1) !important;
}

.sidebar-account-name span { color: #fff !important; }
.sidebar-account-name small { color: rgba(220,237,246,.56) !important; }
.sidebar-account .btn {
  border-color: rgba(138,216,231,.18) !important;
  color: rgba(233,244,249,.74) !important;
  background: rgba(255,255,255,.04) !important;
}
.sidebar-account .btn:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

.sidebar-status {
  margin: 0 2px;
  padding: 12px 8px 4px !important;
  border-top: 1px solid rgba(138,216,231,.08) !important;
}
.sidebar-status strong { color: rgba(240,248,251,.88) !important; }
.sidebar-status span:not(.status-dot) { color: rgba(220,237,246,.48) !important; }
.status-dot { background: #42b788 !important; box-shadow: 0 0 0 3px rgba(66,183,136,.12) !important; }

/* ----- Main views ----- */
.chat-container,
.workspace-page,
.schedule-panel.workspace-main-panel,
.subscription-screen.billing-workspace-page {
  min-width: 0;
  min-height: 0;
  height: 100vh !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--md-bg) !important;
  box-shadow: none !important;
}

.chat-container {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
}

.chat-header,
.calendar-header,
.inbox-header,
.engagement-header,
.schedule-panel.workspace-main-panel .schedule-panel-header,
.settings-dialog .calendar-header,
.agency-dialog .calendar-header,
.subscription-screen.billing-workspace-page .subscription-header {
  min-height: 70px;
  padding: 15px 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-border) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

.chat-header-title { gap: 12px; }
.assistant-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 1px solid rgba(42,169,201,.25);
  border-radius: 12px !important;
  background: linear-gradient(145deg, var(--md-navy), var(--md-navy-deep)) !important;
  box-shadow: 0 10px 26px -17px rgba(11,31,58,.8);
  color: #fff !important;
}

.chat-header h1,
.calendar-header h2,
.inbox-header h2,
.engagement-header h2,
.subscription-header h1,
.agency-dialog h2,
.settings-dialog h2 {
  color: var(--md-text) !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
}
.chat-header p,
.calendar-header small,
.engagement-header .small,
.settings-dialog .text-muted,
.agency-dialog .text-muted { color: var(--md-muted) !important; }

.chat-header-status {
  border: 1px solid var(--md-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--md-muted) !important;
  box-shadow: var(--md-shadow-soft);
}

/* ----- Shared content page rhythm ----- */
.workspace-page .inbox-dialog,
.workspace-page .engagement-dialog,
.workspace-page .calendar-dialog,
.workspace-page .settings-dialog,
.workspace-page .agency-dialog,
.subscription-screen.billing-workspace-page .subscription-card,
.subscription-screen.billing-workspace-page .subscription-card-wide {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--md-bg) !important;
  box-shadow: none !important;
}

.calendar-content,
.engagement-body,
.settings-body,
.agency-body,
.subscription-screen.billing-workspace-page .subscription-card,
.subscription-screen.billing-workspace-page .subscription-card-wide {
  background: var(--md-bg) !important;
}

.calendar-main,
.engagement-body,
.settings-body,
.agency-body,
.subscription-screen.billing-workspace-page .subscription-card,
.subscription-screen.billing-workspace-page .subscription-card-wide {
  padding: 24px 28px 34px !important;
}

.workspace-page .settings-body {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* ----- Reference cards ----- */
.card,
.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card,
.agency-add-card,
.agency-users-card,
.agency-client-card,
.social-platform-card,
.subscription-current-summary > div,
.subscription-usage-card,
.subscription-plan-card,
.settings-body .border.rounded,
.workspace-page .border.rounded,
#scheduledPostsList,
.schedule-panel.workspace-main-panel #schedulePostForm,
.calendar-post-details,
.inbox-filters,
.inbox-conversations,
.inbox-detail {
  border-color: var(--md-border) !important;
  background: var(--md-card) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset !important;
}

.card,
.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card,
.agency-add-card,
.agency-users-card,
.agency-client-card,
.social-platform-card,
.subscription-current-summary > div,
.subscription-usage-card,
.subscription-plan-card,
.settings-body .border.rounded,
.workspace-page .border.rounded,
#scheduledPostsList,
.schedule-panel.workspace-main-panel #schedulePostForm {
  border-radius: var(--md-radius-lg) !important;
}

.card:hover,
.engagement-post-card:hover,
.agency-client-card:hover {
  border-color: var(--md-border-strong) !important;
  box-shadow: var(--md-shadow-soft) !important;
}

/* ----- Buttons and inputs match reference pills/rounded controls ----- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.btn-primary,
.schedule-panel .btn-primary,
.calendar-dialog .btn-primary,
.app-dialog .btn-primary {
  border-color: var(--md-cyan) !important;
  background: var(--md-cyan) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -18px rgba(42,169,201,.85) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.schedule-panel .btn-primary:hover,
.calendar-dialog .btn-primary:hover,
.app-dialog .btn-primary:hover {
  border-color: #218ca9 !important;
  background: #218ca9 !important;
  color: #fff !important;
}

.btn-outline-primary {
  border-color: rgba(42,169,201,.32) !important;
  background: #fff !important;
  color: #167f9a !important;
}
.btn-outline-primary:hover {
  border-color: var(--md-cyan) !important;
  background: #eaf7fa !important;
  color: var(--md-navy-deep) !important;
}
.btn-outline-secondary,
.btn-secondary {
  border-color: var(--md-border-strong) !important;
  background: #fff !important;
  color: var(--md-muted) !important;
}
.btn-outline-secondary:hover,
.btn-secondary:hover {
  border-color: var(--md-border-strong) !important;
  background: var(--md-secondary) !important;
  color: var(--md-text) !important;
}

.form-control,
.form-select {
  min-height: 42px;
  border-color: var(--md-border-strong) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  color: var(--md-text) !important;
  box-shadow: none !important;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(42,169,201,.62) !important;
  box-shadow: 0 0 0 3px rgba(42,169,201,.13) !important;
}
.form-label { color: rgba(21,52,93,.78) !important; font-size: .82rem !important; font-weight: 600 !important; }
.form-text, .text-muted { color: var(--md-muted) !important; }

/* ----- AI Studio / chat ----- */
.messages {
  gap: 22px !important;
  padding: 32px max(26px, calc((100% - 920px) / 2)) !important;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(42,169,201,.05), transparent 62%),
    var(--md-bg) !important;
}

.assistant-message {
  width: min(100%, 780px) !important;
  max-width: min(100%, 780px) !important;
  padding-left: 46px !important;
  color: var(--md-text) !important;
}
.assistant-message::before {
  content: "AI";
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: var(--md-navy-deep) !important;
  color: #fff !important;
}
.user-message {
  max-width: min(76%, 720px) !important;
  padding: 11px 15px !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 17px 17px 5px 17px !important;
  background: #fff !important;
  color: var(--md-text) !important;
  box-shadow: var(--md-shadow-soft);
}
.generated-post-details {
  border-color: var(--md-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.chat-footer {
  padding: 10px max(22px, calc((100% - 920px) / 2)) 20px !important;
  background: linear-gradient(to bottom, rgba(245,248,250,0), var(--md-bg) 24%, var(--md-bg) 100%) !important;
}
.chat-form { max-width: 920px !important; }
.chat-input-row {
  min-height: 60px !important;
  padding: 8px 8px 8px 10px !important;
  border: 1px solid var(--md-border-strong) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--md-shadow) !important;
}
.chat-input-row:focus-within {
  border-color: rgba(42,169,201,.54) !important;
  box-shadow: 0 0 0 3px rgba(42,169,201,.10), var(--md-shadow) !important;
}
#attachChatImageButton {
  border-radius: 12px !important;
  color: var(--md-muted) !important;
}
#sendButton {
  min-width: 78px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, var(--md-navy), var(--md-navy-deep)) !important;
  color: #fff !important;
}
#sendButton:hover { filter: brightness(1.08); }
.chat-attachment-preview {
  max-width: 920px !important;
  border-color: var(--md-border) !important;
  border-radius: 15px !important;
  background: #fff !important;
}

/* ----- Schedule post: full content page instead of side drawer ----- */
.schedule-panel.workspace-main-panel .schedule-panel-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 28px 38px !important;
  overflow-y: auto;
}
.schedule-panel.workspace-main-panel #schedulePostForm {
  width: min(980px, 100%) !important;
  margin: 0 auto !important;
  padding: 24px !important;
}
.schedule-panel.workspace-main-panel hr.my-4,
.schedule-panel.workspace-main-panel #scheduledPostsList,
.schedule-panel.workspace-main-panel > .schedule-panel-body > .d-flex {
  width: min(980px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.schedule-panel.workspace-main-panel #scheduledPostsList { padding: 18px !important; }

/* ----- Inbox: same card-first workspace language ----- */
.workspace-page .inbox-dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
#inboxAnalyticsPanel {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--md-border) !important;
  background: var(--md-bg) !important;
}
#inboxAnalyticsPanel .card {
  min-height: 110px;
  border-radius: 16px !important;
}
#inboxAnalyticsPanel .fs-4 {
  margin-top: 7px;
  color: var(--md-text) !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.7rem !important;
  font-weight: 600 !important;
}
.inbox-layout {
  margin: 0 28px 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: var(--md-shadow-soft);
}
.inbox-filters {
  background: #fbfdfe !important;
  border-right-color: var(--md-border) !important;
}
.inbox-filter {
  border-radius: 10px !important;
  color: var(--md-muted) !important;
}
.inbox-filter:hover { background: var(--md-secondary) !important; color: var(--md-text) !important; }
.inbox-filter.active {
  background: rgba(42,169,201,.10) !important;
  color: var(--md-text) !important;
  font-weight: 600 !important;
}
.inbox-conversation-item {
  border-bottom-color: var(--md-border) !important;
  background: #fff !important;
}
.inbox-conversation-item:hover { background: #f7fbfc !important; }
.inbox-conversation-item.active,
.inbox-conversation-item.is-unread { background: #eef9fb !important; }
.inbox-platform-badge,
.inbox-conversation-type,
.inbox-primary-label {
  border: 1px solid var(--md-border);
  background: var(--md-secondary) !important;
  color: var(--md-muted) !important;
}
.inbox-thread-messages { background: #f8fbfc !important; }
.inbox-message-bubble { border-color: var(--md-border) !important; border-radius: 14px !important; }
.inbox-message-row.is-outbound .inbox-message-bubble { background: #eaf7fa !important; }
.inbox-context-panel { border-left-color: var(--md-border) !important; }

/* ----- Engagement analytics ----- */
.engagement-toolbar {
  padding: 12px 28px !important;
  border-bottom: 1px solid var(--md-border) !important;
  background: #fbfdfe !important;
}
.engagement-body { padding: 24px 28px 34px !important; }
.engagement-performance-panel { overflow: hidden; }
.engagement-performance-heading { padding: 22px 24px 14px !important; }
.engagement-performance-heading h3 {
  color: var(--md-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
}
.engagement-performance-insight {
  border: 1px solid var(--md-border) !important;
  border-left: 3px solid var(--md-cyan) !important;
  border-radius: 12px !important;
  background: #f7fbfc !important;
  color: var(--md-muted) !important;
  padding: 10px 12px !important;
}
.engagement-performance-metrics { padding: 8px 24px 0 !important; }
.engagement-performance-metric {
  min-height: 112px !important;
  border-right-color: var(--md-border) !important;
}
.engagement-performance-metric:hover { background: #f7fbfc !important; }
.engagement-performance-metric.active { background: rgba(42,169,201,.09) !important; }
.engagement-performance-metric.active::after { background: var(--md-cyan) !important; }
.engagement-performance-metric strong,
.engagement-summary-card strong {
  color: var(--md-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
}
.engagement-summary-grid { gap: 12px !important; }
.engagement-summary-card { padding: 17px 18px !important; }
.engagement-post-grid { gap: 14px !important; }
.engagement-post-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.engagement-post-card:hover { transform: translateY(-1px); }

/* ----- Calendar ----- */
.calendar-content { background: var(--md-bg) !important; }
.calendar-main { padding: 24px 28px !important; }
.calendar-post-details {
  margin: 24px 28px 24px 0;
  padding: 20px !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
}
#postsCalendar {
  padding: 18px;
  border: 1px solid var(--md-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--md-shadow-soft);
}
#postsCalendar .fc-button-primary {
  border-color: var(--md-border-strong) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--md-text) !important;
}
#postsCalendar .fc-button-primary:hover,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active {
  border-color: rgba(42,169,201,.45) !important;
  background: #eaf7fa !important;
  color: var(--md-navy-deep) !important;
}
#postsCalendar .fc-theme-standard td,
#postsCalendar .fc-theme-standard th,
#postsCalendar .fc-scrollgrid { border-color: var(--md-border) !important; }
#postsCalendar .fc-day-today { background: #eef9fb !important; }
#postsCalendar .calendar-event-scheduled { background: var(--md-cyan) !important; border-color: var(--md-cyan) !important; }
#postsCalendar .calendar-event-posted { background: var(--md-success) !important; }

/* ----- Clients, brands, users ----- */
.agency-body { padding: 24px 28px 34px !important; }
.agency-add-card,
.agency-users-card { padding: 22px !important; }
#agencyClientsList.agency-clients-grid { gap: 14px !important; }
.agency-client-card {
  min-height: 250px !important;
  padding: 19px !important;
  border-radius: 18px !important;
}
.agency-client-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, var(--md-navy), var(--md-cyan)) !important;
}
.agency-client-title { color: var(--md-text) !important; font-size: 1.08rem !important; font-weight: 600 !important; }
.agency-client-subtitle,
.agency-client-health-row { color: var(--md-muted) !important; }
.agency-client-status { font-family: "IBM Plex Mono", monospace !important; letter-spacing: .08em !important; }
.agency-client-health-track { background: var(--md-secondary) !important; }

/* ----- Settings & social connections ----- */
.settings-body { padding-top: 24px !important; }
.settings-body form { display: grid; gap: 2px; }
.social-platform-card { padding: 16px !important; }
.social-profile-row {
  border-color: var(--md-border) !important;
  border-radius: 12px !important;
  background: #fbfdfe !important;
}

/* ----- Billing ----- */
.subscription-screen.billing-workspace-page .subscription-card,
.subscription-screen.billing-workspace-page .subscription-card-wide {
  overflow-y: auto;
}
.subscription-current-summary { gap: 12px !important; }
.subscription-current-summary > div,
.subscription-usage-card { padding: 16px !important; }
.subscription-plan-grid-four { gap: 14px !important; }
.subscription-plan-card {
  min-height: 450px !important;
  padding: 20px !important;
}
.subscription-plan-card-featured {
  border-color: rgba(42,169,201,.46) !important;
  box-shadow: 0 0 0 2px rgba(42,169,201,.08), var(--md-shadow-soft) !important;
}
.subscription-billing-toggle {
  border-color: var(--md-border) !important;
  background: var(--md-secondary) !important;
}
.subscription-billing-option.active { color: var(--md-text) !important; }

/* ----- Authentication ----- */
.auth-screen {
  align-items: center !important;
  padding: 28px !important;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(42,169,201,.11), transparent 65%),
    linear-gradient(135deg, #eef6f8 0%, #f8fbfc 56%, #edf4f7 100%) !important;
}
.auth-card {
  max-width: 440px !important;
  padding: 28px !important;
  border-color: var(--md-border) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 28px 80px -44px rgba(11,31,58,.58) !important;
}
.auth-card .sidebar-brand { padding: 0 0 22px !important; }
.auth-card .brand-mark-logo {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: var(--md-navy-deep) !important;
}
.auth-card .brand-mark-logo img { width: 26px !important; height: 26px !important; }
.auth-card .brand-copy strong { color: var(--md-text) !important; }
.auth-tabs {
  border: 1px solid var(--md-border) !important;
  background: var(--md-secondary) !important;
}
.auth-tab { color: var(--md-muted) !important; }
.auth-tab.active { color: var(--md-text) !important; background: #fff !important; }

/* ----- Dialogs ----- */
.app-dialog-backdrop { background: rgba(11,31,58,.58) !important; backdrop-filter: blur(8px); }
.app-dialog {
  border-color: var(--md-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 90px -42px rgba(11,31,58,.66) !important;
}
.app-dialog-icon { background: #eaf7fa !important; color: #167f9a !important; }
.app-dialog-title { color: var(--md-text) !important; }
.app-dialog-message { color: var(--md-muted) !important; }

/* ----- Focus / accessibility ----- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(42,169,201,.18) !important;
  outline-offset: 2px;
}

/* ----- Responsive behavior ----- */
@media (max-width: 1180px) {
  .app-shell,
  .app-shell.schedule-open { grid-template-columns: 224px minmax(0,1fr) !important; }
}

@media (max-width: 960px) {
  .app-shell,
  .app-shell.schedule-open {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0,1fr) !important;
  }
  .app-sidebar {
    height: auto;
    min-height: 66px;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(138,216,231,.12) !important;
  }
  .app-sidebar .sidebar-brand { padding: 0 !important; }
  .app-sidebar .brand-copy span,
  .sidebar-brand-switcher,
  .sidebar-section-label,
  .sidebar-subnav,
  .sidebar-account-tools-label,
  .sidebar-account,
  .sidebar-status,
  .sidebar-spacer { display: none !important; }
  .sidebar-nav-reference,
  .sidebar-account-tools {
    display: flex !important;
    margin-left: auto;
    overflow: visible;
    gap: 5px !important;
  }
  .sidebar-nav-group { display: contents; }
  .app-sidebar .sidebar-action {
    width: auto !important;
    min-width: 40px;
    justify-content: center;
    padding: 9px 10px !important;
  }
  .app-sidebar .sidebar-action.active { box-shadow: none !important; }
  .sidebar-agent-group { display: contents !important; }
  .chat-container,
  .workspace-page,
  .schedule-panel.workspace-main-panel,
  .subscription-screen.billing-workspace-page { height: calc(100vh - 66px) !important; }
  .calendar-content { grid-template-columns: 1fr !important; }
  .calendar-post-details { margin: 0 18px 18px !important; }
}

@media (max-width: 720px) {
  .app-sidebar .brand-copy { display: none; }
  .app-sidebar .sidebar-action span:last-child { display: none; }
  .app-sidebar .sidebar-action { width: 40px !important; padding: 0 !important; }
  .chat-header,
  .calendar-header,
  .inbox-header,
  .engagement-header,
  .schedule-panel.workspace-main-panel .schedule-panel-header,
  .settings-dialog .calendar-header,
  .agency-dialog .calendar-header { padding: 12px 16px !important; }
  .messages { padding: 24px 16px !important; }
  .chat-footer { padding: 8px 12px 14px !important; }
  .engagement-body,
  .settings-body,
  .agency-body,
  .calendar-main,
  #inboxAnalyticsPanel,
  .schedule-panel.workspace-main-panel .schedule-panel-body { padding-left: 16px !important; padding-right: 16px !important; }
  .inbox-layout { margin: 0 16px 16px !important; }
  .engagement-performance-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding: 8px 16px 0 !important; }
  .engagement-performance-metric:nth-child(2) { border-right: 0 !important; }
  .subscription-plan-grid-four { grid-template-columns: 1fr !important; }
}

/* =========================================================
   Inbox page scrolling fix — 2026-09-30
   Keep the conversation columns independently scrollable,
   while allowing the Inbox workspace itself to scroll past
   the analytics section on shorter screens.
   ========================================================= */
.workspace-page .inbox-dialog {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

#inboxAnalyticsPanel {
  flex: 0 0 auto;
}

.workspace-page .inbox-layout {
  flex: 0 0 600px;
  height: 600px;
  min-height: 600px;
  overflow: hidden !important;
}

@media (max-height: 760px) {
  .workspace-page .inbox-layout {
    flex-basis: 540px;
    height: 540px;
    min-height: 540px;
  }
}

@media (max-width: 960px) {
  .workspace-page .inbox-dialog {
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   Marketing Dashboard reference match — v3
   Mirrors the reference application's design system and page
   rhythm while keeping ScoChat's existing backend-connected UI.
   ========================================================= */
:root {
  /* Exact reference design-system tokens where browser support permits. */
  --ref-navy-deep: oklch(0.19 0.075 258);
  --ref-navy: oklch(0.28 0.098 259);
  --ref-navy-soft: oklch(0.35 0.075 255);
  --ref-cyan: oklch(0.60 0.13 222);
  --ref-cyan-soft: oklch(0.79 0.09 210);
  --ref-mist: oklch(0.98 0.012 214);
  --ref-background: oklch(0.985 0.008 215);
  --ref-foreground: oklch(0.26 0.085 259);
  --ref-card: oklch(1 0 0);
  --ref-secondary: oklch(0.955 0.016 216);
  --ref-muted: oklch(0.50 0.045 250);
  --ref-border: oklch(0.28 0.098 259 / 0.13);
  --ref-border-strong: oklch(0.28 0.098 259 / 0.20);
  --ref-success: oklch(0.60 0.12 165);
  --ref-warning: oklch(0.66 0.13 68);
  --ref-danger: oklch(0.58 0.19 22);
  --ref-radius: 14px;
  --ref-shadow-panel: 0 24px 60px -40px oklch(0.19 0.075 258 / .48);

  --md-navy-deep: var(--ref-navy-deep);
  --md-navy: var(--ref-navy);
  --md-navy-soft: var(--ref-navy-soft);
  --md-cyan: var(--ref-cyan);
  --md-cyan-soft: var(--ref-cyan-soft);
  --md-mist: var(--ref-mist);
  --md-bg: var(--ref-background);
  --md-card: var(--ref-card);
  --md-secondary: var(--ref-secondary);
  --md-border: var(--ref-border);
  --md-border-strong: var(--ref-border-strong);
  --md-text: var(--ref-foreground);
  --md-muted: var(--ref-muted);
  --md-success: var(--ref-success);
  --md-warning: var(--ref-warning);
  --md-danger: var(--ref-danger);
  --brand: var(--ref-cyan);
  --brand-hover: oklch(0.55 0.13 222);
  --brand-soft: oklch(0.94 0.028 214);
  --text: var(--ref-foreground);
  --text-soft: var(--ref-muted);
  --border: var(--ref-border);
  --border-strong: var(--ref-border-strong);
  --surface: var(--ref-card);
  --surface-subtle: var(--ref-secondary);
  --app-bg: var(--ref-background);
}

html, body {
  background: var(--ref-background) !important;
  color: var(--ref-foreground) !important;
}
body,
button,
input,
textarea,
select {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.chat-header h1,
.calendar-header h2,
.inbox-header h2,
.engagement-header h2,
.subscription-header h1,
.subscription-plan-card h2,
.agency-client-title,
.engagement-performance-heading h3,
.engagement-performance-metric strong,
.engagement-summary-card strong {
  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
  letter-spacing: -0.025em;
}

.sidebar-section-label,
.panel-eyebrow,
.subscription-plan-kicker,
.agency-client-status,
.inbox-filter-title,
.engagement-performance-label,
.calendar-detail-row strong,
.generated-detail-row strong,
.badge,
.scheduled-status-badge {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: .13em;
}

/* Shell: exact reference proportions. */
.app-shell,
.app-shell.schedule-open {
  grid-template-columns: 258px minmax(0, 1fr) !important;
  background: color-mix(in oklab, var(--ref-secondary) 35%, var(--ref-background)) !important;
}

.app-sidebar {
  width: 258px;
  padding: 16px 12px 14px !important;
  background: var(--ref-navy-deep) !important;
  border-right: 1px solid oklch(1 0 0 / .07) !important;
}

/* Reference brand block: white card inside the navy rail. */
.app-sidebar > .sidebar-brand {
  min-height: 64px;
  margin: 0 2px 14px;
  padding: 10px 13px !important;
  gap: 10px !important;
  border: 1px solid oklch(1 0 0 / .78);
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 16px 34px -24px oklch(0 0 0 / .85);
}
.app-sidebar > .sidebar-brand .brand-mark-logo {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ref-navy-deep) !important;
  box-shadow: none !important;
}
.app-sidebar > .sidebar-brand .brand-mark-logo img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
}
.app-sidebar > .sidebar-brand .brand-copy strong {
  color: var(--ref-navy-deep) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}
.app-sidebar > .sidebar-brand .brand-copy span {
  margin-top: 2px !important;
  color: color-mix(in oklab, var(--ref-navy-deep) 68%, white) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .58rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sidebar-brand-switcher {
  margin: 0 3px 13px !important;
  padding: 9px 10px !important;
  border-color: oklch(1 0 0 / .10) !important;
  border-radius: 13px !important;
  background: oklch(1 0 0 / .045) !important;
}
.sidebar-brand-switcher label,
.app-sidebar .sidebar-section-label {
  color: oklch(0.83 0.035 218 / .62) !important;
  font-size: .69rem !important;
  letter-spacing: .16em !important;
}
.sidebar-nav-group + .sidebar-nav-group { margin-top: 16px !important; }
.sidebar-nav-group .sidebar-section-label { padding: 0 12px 6px !important; }

.app-sidebar .sidebar-action {
  min-height: 42px !important;
  padding: 9px 12px !important;
  gap: 11px !important;
  border-radius: 12px !important;
  color: oklch(0.88 0.025 215 / .72) !important;
  font-size: .935rem !important;
  font-weight: 500 !important;
}
.app-sidebar .sidebar-action-icon {
  width: 19px !important;
  height: 19px !important;
  color: oklch(0.82 0.035 215 / .72) !important;
}
.app-sidebar .sidebar-action-icon svg { width: 18px !important; height: 18px !important; }
.app-sidebar .sidebar-action:hover,
.app-sidebar .sidebar-action:focus-visible,
.app-sidebar .sidebar-subaction:hover,
.app-sidebar .sidebar-subaction:focus-visible {
  background: oklch(1 0 0 / .055) !important;
  color: #fff !important;
}
.app-sidebar .sidebar-action.active {
  background: color-mix(in oklab, var(--ref-cyan) 15%, transparent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.app-sidebar .sidebar-action.active .sidebar-action-icon { color: var(--ref-cyan-soft) !important; }

.sidebar-subnav {
  margin: 4px 0 0 20px !important;
  padding: 4px 0 2px 12px !important;
  border-left-color: oklch(1 0 0 / .08) !important;
}
.app-sidebar .sidebar-subaction {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  color: oklch(0.86 0.025 215 / .62) !important;
  font-size: .80rem !important;
}
.app-sidebar .sidebar-subaction.active {
  background: color-mix(in oklab, var(--ref-cyan) 12%, transparent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sidebar-account-tools-label {
  margin-top: 16px !important;
  padding: 14px 12px 6px !important;
  border-top-color: oklch(1 0 0 / .08) !important;
}
.sidebar-account {
  margin: 10px 2px 0 !important;
  padding: 12px !important;
  border: 1px solid oklch(1 0 0 / .08) !important;
  border-radius: 14px;
  background: oklch(1 0 0 / .04);
}
.sidebar-account .btn {
  border-radius: 999px !important;
  border-color: oklch(1 0 0 / .12) !important;
  background: oklch(1 0 0 / .04) !important;
}
.sidebar-status {
  margin: 8px 4px 0 !important;
  border-top: 0 !important;
  padding: 8px 6px 2px !important;
}

/* Page chrome / reference header rhythm. */
.chat-container,
.workspace-page,
.schedule-panel.workspace-main-panel,
.subscription-screen.billing-workspace-page {
  background: color-mix(in oklab, var(--ref-secondary) 34%, var(--ref-background)) !important;
}

.chat-header,
.calendar-header,
.inbox-header,
.engagement-header,
.schedule-panel.workspace-main-panel .schedule-panel-header,
.settings-dialog .calendar-header,
.agency-dialog .calendar-header,
.subscription-screen.billing-workspace-page .subscription-header {
  min-height: 64px !important;
  padding: 12px 28px !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 70%, transparent) !important;
  background: color-mix(in oklab, var(--ref-background) 86%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}
.chat-header h1,
.calendar-header h2,
.inbox-header h2,
.engagement-header h2,
.settings-dialog h2,
.agency-dialog h2,
.subscription-header h1 {
  color: var(--ref-foreground) !important;
  font-size: 1.12rem !important;
  font-weight: 600 !important;
}
.chat-header p,
.engagement-header .small,
.settings-dialog .text-muted,
.calendar-header .text-muted,
.agency-dialog .text-muted {
  color: var(--ref-muted) !important;
  font-size: .82rem !important;
}
.chat-header-status {
  padding: 6px 11px !important;
  border-color: var(--ref-border) !important;
  background: oklch(1 0 0 / .72) !important;
  color: var(--ref-muted) !important;
}

/* AI Studio: reference card-based chat rather than a flat full-canvas chat. */
.chat-container { grid-template-rows: auto minmax(0, 1fr) auto !important; }
.messages {
  width: auto !important;
  max-width: none !important;
  margin: 26px 28px 0 !important;
  padding: 28px max(24px, calc((100% - 860px) / 2)) !important;
  border: 1px solid var(--ref-border) !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--ref-card) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset !important;
}
.chat-footer {
  margin: 0 28px 26px !important;
  padding: 13px max(20px, calc((100% - 860px) / 2)) 18px !important;
  border: 1px solid var(--ref-border) !important;
  border-top: 1px solid color-mix(in oklab, var(--ref-border) 65%, transparent) !important;
  border-radius: 0 0 18px 18px !important;
  background: var(--ref-card) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset !important;
}
.assistant-avatar {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ref-navy-deep) !important;
}
.assistant-message {
  padding-left: 43px !important;
  color: var(--ref-foreground) !important;
}
.assistant-message::before {
  width: 31px !important;
  height: 31px !important;
  border-radius: 10px !important;
  background: var(--ref-navy-deep) !important;
  font-family: "Space Grotesk", sans-serif !important;
}
.user-message {
  padding: 11px 15px !important;
  border: 0 !important;
  border-radius: 16px 16px 5px 16px !important;
  background: var(--ref-cyan) !important;
  color: #fff !important;
}
.chat-input-row {
  min-height: 58px !important;
  padding: 7px 8px 7px 10px !important;
  border-color: var(--ref-border-strong) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px oklch(0 0 0 / .03) !important;
}
.chat-input-row:focus-within {
  border-color: color-mix(in oklab, var(--ref-cyan) 55%, var(--ref-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ref-cyan) 12%, transparent) !important;
}
#sendButton {
  min-width: 76px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: var(--ref-cyan) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -14px var(--ref-cyan) !important;
}
#sendButton:hover { filter: brightness(1.05); }
#attachChatImageButton { border-radius: 999px !important; }

/* Buttons: reference uses rounded pills and cyan primary actions. */
.btn-primary,
.schedule-panel .btn-primary,
.calendar-dialog .btn-primary,
.engagement-dialog .btn-primary,
.settings-dialog .btn-primary,
.agency-dialog .btn-primary,
.subscription-card .btn-primary {
  border-color: var(--ref-cyan) !important;
  border-radius: 999px !important;
  background: var(--ref-cyan) !important;
  color: #fff !important;
  font-weight: 500 !important;
  box-shadow: 0 10px 24px -15px var(--ref-cyan) !important;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary {
  border-radius: 999px !important;
}
.btn-outline-primary {
  border-color: var(--ref-border-strong) !important;
  background: var(--ref-card) !important;
  color: var(--ref-foreground) !important;
}
.btn-outline-primary:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 48%, var(--ref-border)) !important;
  background: var(--ref-secondary) !important;
  color: var(--ref-foreground) !important;
}

.form-control,
.form-select,
textarea.form-control,
input.form-control {
  border-color: var(--ref-border-strong) !important;
  border-radius: 11px !important;
  background-color: var(--ref-card) !important;
  color: var(--ref-foreground) !important;
  box-shadow: none !important;
}
.form-control:focus,
.form-select:focus {
  border-color: color-mix(in oklab, var(--ref-cyan) 55%, var(--ref-border-strong)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ref-cyan) 10%, transparent) !important;
}
.form-label {
  color: color-mix(in oklab, var(--ref-foreground) 78%, white) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
}

/* All workspace pages use the reference 28px editorial gutter. */
.calendar-main,
.engagement-body,
.settings-body,
.agency-body,
.subscription-screen.billing-workspace-page .subscription-card,
.subscription-screen.billing-workspace-page .subscription-card-wide {
  padding: 28px !important;
}

/* Cards mirror the reference card primitive. */
.card,
.engagement-performance-panel,
.engagement-summary-card,
.engagement-post-card,
.agency-add-card,
.agency-users-card,
.agency-client-card,
.social-platform-card,
.subscription-current-summary > div,
.subscription-usage-card,
.subscription-plan-card,
.settings-body .border.rounded,
.workspace-page .border.rounded,
#scheduledPostsList,
.schedule-panel.workspace-main-panel #schedulePostForm,
.calendar-post-details {
  border: 1px solid color-mix(in oklab, var(--ref-border) 70%, transparent) !important;
  border-radius: 16px !important;
  background: var(--ref-card) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset !important;
}
.card-body { padding: 20px !important; }

/* Inbox: preserve its real backend content, but render it like the reference workspace page. */
.workspace-page .inbox-dialog {
  background: color-mix(in oklab, var(--ref-secondary) 34%, var(--ref-background)) !important;
}
#inboxAnalyticsPanel {
  margin: 0 !important;
  padding: 28px 28px 18px !important;
  border: 0 !important;
  background: transparent !important;
}
#inboxAnalyticsPanel > .d-flex:first-child strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
#inboxAnalyticsPanel > .d-flex:first-child .small { font-size: .91rem !important; }
#inboxAnalyticsPanel .card {
  border-color: color-mix(in oklab, var(--ref-border) 70%, transparent) !important;
  border-radius: 16px !important;
}
#inboxAnalyticsPanel .fs-4 {
  margin-top: 6px;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.65rem !important;
  font-weight: 600 !important;
}
.inbox-layout {
  margin: 0 28px 28px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 70%, transparent) !important;
  border-radius: 16px !important;
  background: var(--ref-card) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset !important;
}
.inbox-filters {
  border-radius: 16px 0 0 16px !important;
  background: color-mix(in oklab, var(--ref-secondary) 55%, white) !important;
}
.inbox-filter {
  min-height: 38px !important;
  border-radius: 10px !important;
}
.inbox-filter.active {
  background: color-mix(in oklab, var(--ref-cyan) 12%, white) !important;
  color: var(--ref-foreground) !important;
}
.inbox-conversation-item.active,
.inbox-conversation-item.is-unread {
  background: color-mix(in oklab, var(--ref-cyan) 7%, white) !important;
}
.inbox-message-row.is-outbound .inbox-message-bubble {
  border-color: transparent !important;
  background: var(--ref-cyan) !important;
  color: #fff !important;
}
.inbox-thread-messages { background: color-mix(in oklab, var(--ref-secondary) 40%, white) !important; }

/* Analytics/engagement: reference report surfaces + compact toolbar. */
.engagement-toolbar {
  padding: 12px 28px !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 70%, transparent) !important;
  background: transparent !important;
}
.engagement-toolbar .btn-group {
  padding: 4px;
  border-radius: 999px;
  background: var(--ref-secondary);
}
.engagement-toolbar .btn-group .btn {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ref-muted) !important;
}
.engagement-toolbar .btn-group .btn.active {
  background: var(--ref-card) !important;
  color: var(--ref-foreground) !important;
  box-shadow: 0 1px 3px oklch(0 0 0 / .08) !important;
}
#engagementPlatformFilter { width: 180px !important; border-radius: 999px !important; }
.engagement-performance-panel { overflow: hidden !important; }
.engagement-performance-heading { padding: 24px 26px 15px !important; }
.engagement-performance-heading h3 {
  color: var(--ref-foreground) !important;
  font-size: 1.42rem !important;
  font-weight: 600 !important;
}
.engagement-performance-metrics { padding: 8px 26px 0 !important; }
.engagement-performance-metric {
  border-right-color: color-mix(in oklab, var(--ref-border) 65%, transparent) !important;
}
.engagement-performance-metric.active { background: color-mix(in oklab, var(--ref-cyan) 9%, white) !important; }
.engagement-performance-metric.active::after { background: var(--ref-cyan) !important; }
.engagement-performance-label {
  color: var(--ref-muted) !important;
  font-size: .71rem !important;
  text-transform: uppercase;
}
.engagement-summary-grid { gap: 12px !important; }
.engagement-summary-card { padding: 18px !important; }
.engagement-summary-card span { color: var(--ref-muted) !important; font-size: .79rem !important; }
.engagement-summary-card strong { font-size: 1.65rem !important; }

/* Calendar: quiet report surface rather than modal chrome. */
.calendar-content { background: transparent !important; }
#postsCalendar {
  padding: 18px !important;
  border-color: color-mix(in oklab, var(--ref-border) 70%, transparent) !important;
  border-radius: 16px !important;
  background: var(--ref-card) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset !important;
}
#postsCalendar .fc-toolbar-title {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
}
#postsCalendar .fc-button-primary {
  border-color: var(--ref-border) !important;
  border-radius: 999px !important;
  background: var(--ref-card) !important;
  color: var(--ref-foreground) !important;
}
#postsCalendar .fc-button-primary:hover,
#postsCalendar .fc-button-primary:not(:disabled).fc-button-active {
  border-color: color-mix(in oklab, var(--ref-cyan) 45%, var(--ref-border)) !important;
  background: var(--ref-secondary) !important;
}
#postsCalendar .calendar-event-scheduled { background: var(--ref-cyan) !important; border-color: var(--ref-cyan) !important; }
.calendar-post-details {
  margin: 28px 28px 28px 0 !important;
  padding: 20px !important;
}

/* Settings / integrations: spacious reference cards. */
.workspace-page .settings-body { max-width: 1180px !important; }
.settings-body form > .mb-3,
.settings-body form > .mb-4 {
  padding: 20px;
  border: 1px solid color-mix(in oklab, var(--ref-border) 70%, transparent);
  border-radius: 16px;
  background: var(--ref-card);
}
.settings-body form > hr { margin: 6px 0 !important; opacity: 0; }
.social-platform-card {
  padding: 18px !important;
  border-radius: 16px !important;
}
.social-platform-heading strong {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1rem;
}
.social-profile-row { border-radius: 12px !important; background: color-mix(in oklab, var(--ref-secondary) 42%, white) !important; }

/* Agency/clients: match the reference client-card visual language. */
.agency-client-card {
  min-height: 230px !important;
  padding: 20px !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.agency-client-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--ref-cyan) 38%, var(--ref-border)) !important;
  box-shadow: 0 18px 36px -32px var(--ref-navy-deep) !important;
}
.agency-client-avatar {
  border-radius: 14px !important;
  background: var(--ref-navy-deep) !important;
}
.agency-client-status {
  border-radius: 999px !important;
  font-size: .68rem !important;
}

/* Billing: same restrained card system. */
.subscription-plan-card { padding: 22px !important; border-radius: 16px !important; }
.subscription-plan-card-featured {
  border-color: color-mix(in oklab, var(--ref-cyan) 45%, var(--ref-border)) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ref-cyan) 8%, transparent) !important;
}
.subscription-plan-kicker { color: var(--ref-muted) !important; font-size: .68rem !important; text-transform: uppercase; }
.subscription-plan-price strong {
  font-family: "Space Grotesk", sans-serif !important;
  color: var(--ref-foreground) !important;
}
.subscription-billing-toggle {
  padding: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ref-secondary) !important;
}
.subscription-billing-option { border-radius: 999px !important; }
.subscription-billing-option.active { background: var(--ref-card) !important; box-shadow: 0 1px 3px oklch(0 0 0 / .08) !important; }

/* Auth matches the same editorial/cyan system. */
.auth-screen {
  background:
    radial-gradient(85% 65% at 82% 0%, color-mix(in oklab, var(--ref-cyan) 13%, transparent) 0%, transparent 62%),
    radial-gradient(70% 55% at 0% 0%, color-mix(in oklab, var(--ref-mist) 92%, transparent) 0%, transparent 68%),
    var(--ref-background) !important;
}
.auth-card {
  border-color: color-mix(in oklab, var(--ref-border) 75%, transparent) !important;
  border-radius: 18px !important;
  box-shadow: var(--ref-shadow-panel) !important;
}
.auth-card .sidebar-brand { padding-bottom: 18px !important; }
.auth-card .brand-mark-logo { background: var(--ref-navy-deep) !important; border-radius: 12px !important; }
.auth-card .brand-copy strong { font-family: "Space Grotesk", sans-serif !important; color: var(--ref-foreground) !important; }
.auth-card .brand-copy span { font-family: "IBM Plex Mono", monospace !important; letter-spacing: .10em; text-transform: uppercase; }
.auth-tabs { padding: 4px !important; border: 0 !important; border-radius: 999px !important; background: var(--ref-secondary) !important; }
.auth-tab { border-radius: 999px !important; }
.auth-tab.active { background: var(--ref-card) !important; box-shadow: 0 1px 3px oklch(0 0 0 / .08) !important; }

/* Dialogs use the reference navy veil. */
.app-dialog-backdrop {
  background: color-mix(in oklab, var(--ref-navy-deep) 60%, transparent) !important;
  backdrop-filter: blur(8px) !important;
}
.app-dialog { border-radius: 16px !important; box-shadow: var(--ref-shadow-panel) !important; }

/* Keep the Inbox scroll correction in the final reference styling. */
.workspace-page .inbox-dialog {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}
.workspace-page .inbox-layout {
  flex: 0 0 600px !important;
  height: 600px !important;
  min-height: 600px !important;
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  .app-shell,
  .app-shell.schedule-open { grid-template-columns: 224px minmax(0,1fr) !important; }
  .app-sidebar { width: 224px; }
}

@media (max-width: 960px) {
  .app-sidebar { width: auto; }
  .app-sidebar > .sidebar-brand {
    min-height: 44px;
    margin: 0 !important;
    padding: 4px 8px !important;
    background: #fff !important;
  }
  .messages { margin: 18px 18px 0 !important; }
  .chat-footer { margin: 0 18px 18px !important; }
  #inboxAnalyticsPanel { padding: 20px 18px 14px !important; }
  .inbox-layout { margin: 0 18px 18px !important; }
}

@media (max-width: 720px) {
  .chat-header,
  .calendar-header,
  .inbox-header,
  .engagement-header,
  .schedule-panel.workspace-main-panel .schedule-panel-header,
  .settings-dialog .calendar-header,
  .agency-dialog .calendar-header,
  .subscription-screen.billing-workspace-page .subscription-header {
    padding: 11px 16px !important;
  }
  .messages { margin: 12px 12px 0 !important; padding: 20px 16px !important; }
  .chat-footer { margin: 0 12px 12px !important; padding: 10px 12px 14px !important; }
  .calendar-main,
  .engagement-body,
  .settings-body,
  .agency-body,
  .subscription-screen.billing-workspace-page .subscription-card,
  .subscription-screen.billing-workspace-page .subscription-card-wide { padding: 18px 16px !important; }
  #inboxAnalyticsPanel { padding: 18px 16px 12px !important; }
  .inbox-layout { margin: 0 16px 16px !important; }
}


/* =========================================================
   Agent settings navigation visibility fix
   Keeps the existing backend-connected settings view visible
   as a first-class AI & Automation navigation item.
   ========================================================= */
.app-sidebar .sidebar-settings-action {
  margin-top: 4px !important;
}

@media (min-width: 961px) {
  .sidebar-nav-reference {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  #openSettingsButton {
    display: flex !important;
  }
}

/* =========================================================
   Schedule composer — reference dashboard parity v5
   Mirrors the reference New Post composer visual system while
   preserving the existing ScoChat scheduling backend and IDs.
   ========================================================= */

.app-shell.schedule-open {
  grid-template-columns: 224px minmax(0, 1fr) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page,
.schedule-panel.schedule-composer-page {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  border-left: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(85% 58% at 82% 0%, color-mix(in oklab, var(--ref-cyan) 7%, transparent) 0%, transparent 58%),
    var(--ref-background) !important;
  box-shadow: none !important;
}

.app-shell.schedule-open .schedule-panel.schedule-composer-page {
  display: flex !important;
}

.schedule-composer-header {
  min-height: 92px !important;
  padding: 20px 30px 18px !important;
  align-items: center !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent) !important;
  background: color-mix(in oklab, #fff 92%, var(--ref-mist)) !important;
}

.schedule-composer-header h2 {
  margin: 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  color: var(--ref-foreground) !important;
  font-size: clamp(1.5rem, 2vw, 2rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
}

.schedule-composer-subtitle {
  max-width: 660px;
  margin-top: 5px !important;
  color: var(--ref-muted) !important;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .9rem;
  line-height: 1.45;
}

.schedule-composer-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-timezone-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, var(--ref-border) 82%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--ref-muted) !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .05em;
  white-space: nowrap;
}

.schedule-close-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent);
  border-radius: 10px;
  background: #fff;
  color: var(--ref-muted);
  font-size: 1.45rem;
  line-height: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.schedule-close-button:hover,
.schedule-close-button:focus-visible {
  border-color: color-mix(in oklab, var(--ref-cyan) 45%, var(--ref-border));
  background: var(--ref-secondary);
  color: var(--ref-foreground);
  outline: none;
}

.schedule-composer-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 28px 30px 48px !important;
  background: transparent !important;
}

.schedule-composer-message {
  max-width: 1240px;
  margin: 0 auto 18px !important;
  border-radius: 12px !important;
}

.schedule-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 24px;
  width: min(1240px, 100%);
  margin: 0 auto;
  align-items: start;
}

.schedule-composer-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.schedule-composer-card {
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent);
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), var(--ref-shadow-panel);
}

.schedule-form-card {
  padding: 24px;
}

.schedule-preview-card,
.schedule-queue-card {
  padding: 20px;
}

.schedule-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.schedule-card-heading-compact {
  margin-bottom: 16px;
}

.schedule-card-heading h3 {
  margin: 3px 0 0;
  font-family: "Space Grotesk", sans-serif;
  color: var(--ref-foreground);
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.schedule-section-kicker,
.schedule-generated-heading .schedule-section-kicker {
  display: block;
  color: var(--ref-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.schedule-step-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 32%, var(--ref-border));
  border-radius: 9px;
  background: color-mix(in oklab, var(--ref-cyan) 8%, #fff);
  color: var(--ref-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 600;
}

.schedule-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.schedule-field {
  min-width: 0;
  margin-bottom: 18px;
}

.schedule-fields-grid .schedule-field {
  margin-bottom: 18px;
}

.schedule-form-card .form-label {
  margin-bottom: 7px !important;
  color: var(--ref-foreground) !important;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .82rem !important;
  font-weight: 600 !important;
}

.schedule-form-card .form-control,
.schedule-form-card .form-select {
  min-height: 44px;
  border: 1px solid color-mix(in oklab, var(--ref-input) 88%, transparent) !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--ref-foreground) !important;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .88rem !important;
  box-shadow: none !important;
}

.schedule-form-card .form-control:focus,
.schedule-form-card .form-select:focus {
  border-color: color-mix(in oklab, var(--ref-cyan) 62%, var(--ref-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ref-cyan) 12%, transparent) !important;
}

.schedule-form-card .form-text {
  margin-top: 6px;
  color: var(--ref-muted) !important;
  font-size: .74rem !important;
  line-height: 1.4;
}

.schedule-caption-input {
  min-height: 158px !important;
  padding: 12px 13px !important;
  resize: vertical;
  line-height: 1.55;
}

.schedule-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.schedule-field-label-row > span {
  margin-bottom: 7px;
  color: var(--ref-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem;
  letter-spacing: .04em;
}

.schedule-native-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.schedule-media-field {
  position: relative;
}

.schedule-upload-dropzone {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 82px;
  padding: 14px 15px;
  border: 1px dashed color-mix(in oklab, var(--ref-cyan) 42%, var(--ref-border));
  border-radius: 13px;
  background: color-mix(in oklab, var(--ref-mist) 54%, #fff);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.schedule-upload-dropzone:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 72%, var(--ref-border));
  background: color-mix(in oklab, var(--ref-cyan) 7%, #fff);
}

.schedule-upload-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: var(--ref-navy-deep);
  color: var(--ref-cyan-soft);
}

.schedule-upload-icon svg {
  width: 20px;
  height: 20px;
}

.schedule-upload-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.schedule-upload-copy strong {
  color: var(--ref-foreground);
  font-size: .86rem;
  font-weight: 600;
}

.schedule-upload-copy small {
  color: var(--ref-muted);
  font-size: .73rem;
}

.schedule-upload-action {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid color-mix(in oklab, var(--ref-border) 82%, transparent);
  border-radius: 9px;
  background: #fff;
  color: var(--ref-foreground);
  font-size: .75rem;
  font-weight: 600;
}

.schedule-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
  padding: 15px 16px;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 24%, var(--ref-border));
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--ref-cyan) 7%, #fff), #fff 72%);
}

.schedule-ai-row p {
  max-width: 510px;
  margin: 4px 0 0;
  color: var(--ref-muted);
  font-size: .77rem;
  line-height: 1.45;
}

.schedule-ai-button {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px !important;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 46%, var(--ref-border)) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ref-foreground) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.schedule-ai-button:hover,
.schedule-ai-button:focus-visible {
  background: color-mix(in oklab, var(--ref-cyan) 8%, #fff) !important;
  border-color: color-mix(in oklab, var(--ref-cyan) 68%, var(--ref-border)) !important;
}

.schedule-generated-details {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid color-mix(in oklab, var(--ref-border) 76%, transparent);
  border-radius: 13px;
  background: var(--ref-secondary);
}

.schedule-generated-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.schedule-generated-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid color-mix(in oklab, var(--ref-success, #2f9d77) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ref-success, #2f9d77) 8%, #fff);
  color: #28795f;
  font-family: "IBM Plex Mono", monospace;
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.schedule-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--ref-border) 74%, transparent);
}

.schedule-cancel-button,
.schedule-refresh-button {
  min-height: 40px;
  padding: 8px 13px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 86%, transparent) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ref-foreground) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
}

.schedule-primary-button {
  min-height: 40px;
  padding: 8px 16px !important;
  border: 1px solid var(--ref-navy-deep) !important;
  border-radius: 10px !important;
  background: linear-gradient(120deg, var(--ref-navy) 0%, var(--ref-navy-deep) 100%) !important;
  color: #fff !important;
  font-size: .8rem !important;
  font-weight: 650 !important;
  box-shadow: 0 8px 20px -14px color-mix(in oklab, var(--ref-navy-deep) 65%, transparent) !important;
}

.schedule-primary-button:hover:not(:disabled),
.schedule-primary-button:focus-visible:not(:disabled) {
  filter: brightness(1.08);
  color: #fff !important;
}

.schedule-primary-button:disabled {
  opacity: .42 !important;
  cursor: not-allowed;
}

.schedule-live-preview {
  position: relative;
  display: grid;
  min-height: 310px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ref-border) 72%, transparent);
  border-radius: 15px;
  background:
    linear-gradient(45deg, color-mix(in oklab, var(--ref-secondary) 82%, #fff) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in oklab, var(--ref-secondary) 82%, #fff) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in oklab, var(--ref-secondary) 82%, #fff) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in oklab, var(--ref-secondary) 82%, #fff) 75%),
    #fff;
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0px;
}

.schedule-preview-placeholder {
  display: flex;
  max-width: 240px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 30px 20px;
  color: var(--ref-muted);
  text-align: center;
}

.schedule-preview-placeholder-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 2px;
  border-radius: 14px;
  background: var(--ref-navy-deep);
  color: var(--ref-cyan-soft);
}

.schedule-preview-placeholder-icon svg {
  width: 24px;
  height: 24px;
}

.schedule-preview-placeholder strong {
  color: var(--ref-foreground);
  font-family: "Space Grotesk", sans-serif;
  font-size: .9rem;
  font-weight: 600;
}

.schedule-preview-placeholder span:last-child {
  font-size: .73rem;
  line-height: 1.45;
}

.schedule-live-preview:has(#imagePreviewContainer:not(.d-none)) .schedule-preview-placeholder {
  display: none;
}

.schedule-live-preview #imagePreviewContainer {
  width: 100%;
  margin: 0 !important;
}

.schedule-live-preview .image-preview-wrapper {
  display: grid;
  width: 100% !important;
  min-height: 310px;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f5f8fa !important;
}

.schedule-live-preview .image-preview,
.schedule-live-preview .video-preview {
  width: 100% !important;
  max-height: 420px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.schedule-preview-note {
  margin-top: 12px !important;
  color: var(--ref-muted);
  font-size: .72rem;
  line-height: 1.5;
}

.schedule-refresh-button {
  min-height: 34px;
  padding: 6px 10px !important;
  font-size: .72rem !important;
}

.schedule-posts-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 0 !important;
}

.schedule-empty-copy {
  padding: 16px;
  border: 1px dashed color-mix(in oklab, var(--ref-border) 78%, transparent);
  border-radius: 12px;
  background: var(--ref-secondary);
  color: var(--ref-muted) !important;
  font-size: .76rem;
  text-align: center;
}

.schedule-posts-list .scheduled-post-card,
#scheduledPostsList .scheduled-post-card {
  margin: 0 !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 78%, transparent) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.schedule-posts-list .scheduled-post-card:hover,
#scheduledPostsList .scheduled-post-card:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 30%, var(--ref-border)) !important;
  transform: none !important;
}

@media (max-width: 1180px) {
  .schedule-composer-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

@media (max-width: 1040px) {
  .schedule-composer-grid {
    grid-template-columns: 1fr;
  }

  .schedule-composer-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .app-shell.schedule-open {
    grid-template-columns: 1fr !important;
  }

  .schedule-panel.workspace-main-panel.schedule-composer-page,
  .schedule-panel.schedule-composer-page {
    grid-column: 1 !important;
    height: calc(100vh - 64px) !important;
  }

  .schedule-composer-header {
    padding: 16px 20px !important;
  }

  .schedule-composer-body {
    padding: 22px 20px 36px !important;
  }
}

@media (max-width: 720px) {
  .schedule-composer-header {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .schedule-composer-header-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
  }

  .schedule-timezone-pill {
    display: none;
  }

  .schedule-composer-body {
    padding: 16px 12px 30px !important;
  }

  .schedule-form-card,
  .schedule-preview-card,
  .schedule-queue-card {
    padding: 16px;
    border-radius: 15px;
  }

  .schedule-fields-grid,
  .schedule-composer-side {
    grid-template-columns: 1fr;
  }

  .schedule-field-label-row,
  .schedule-ai-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-ai-button {
    width: 100%;
    justify-content: center;
  }

  .schedule-upload-action {
    display: none;
  }

  .schedule-composer-actions {
    flex-direction: column-reverse;
  }

  .schedule-composer-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   v6 — Brand logo contrast fix
   The two-tone ScoChat mark contains a deep-navy stroke.
   Keep the tile light so the full S remains visible.
   ========================================================= */
.app-sidebar > .sidebar-brand .brand-mark-logo,
.auth-card .brand-mark-logo {
  background: #eefbff !important;
  border: 1px solid rgba(10, 187, 219, 0.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

.app-sidebar > .sidebar-brand .brand-mark-logo img,
.auth-card .brand-mark-logo img {
  filter: none !important;
  opacity: 1 !important;
}

/* =========================================================
   v8 — Current workspace identity
   Compact, non-interactive, high-contrast sidebar treatment.
   ========================================================= */
.app-sidebar .sidebar-brand-switcher {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 7px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  margin: 2px 8px 18px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(115, 166, 208, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  overflow: hidden !important;
}

.app-sidebar .sidebar-brand-switcher::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(50, 205, 231, 0.025), transparent 52%);
}

.app-sidebar .sidebar-brand-switcher.d-none {
  display: none !important;
}

.sidebar-active-brand-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(72, 207, 229, 0.26);
  border-radius: 11px;
  background: rgba(45, 194, 221, 0.10);
  color: #69deef !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-active-brand-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sidebar-active-brand-kicker {
  display: block;
  overflow: hidden;
  color: #7892b0 !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-active-brand-copy strong,
.app-sidebar .sidebar-active-brand-copy strong {
  display: block;
  overflow: hidden;
  color: #f7fbff !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-active-brand-status {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #49d7e9 !important;
  box-shadow: 0 0 0 4px rgba(73, 215, 233, 0.09);
}

#brandSelect,
#brandSelect[hidden] {
  display: none !important;
}

@media (max-width: 960px) {
  .app-sidebar .sidebar-brand-switcher {
    display: none !important;
  }
}


/* =========================================================
   v9 — Schedule composer: professional editorial layout
   Uses only existing ScoChat scheduling capabilities.
   ========================================================= */

.schedule-panel.workspace-main-panel.schedule-composer-page,
.schedule-panel.schedule-composer-page {
  background:
    radial-gradient(80% 58% at 96% 0%, color-mix(in oklab, var(--ref-cyan) 9%, transparent), transparent 62%),
    var(--ref-background) !important;
}

.schedule-composer-header {
  min-height: 104px !important;
  padding: 22px clamp(24px, 3.2vw, 48px) 20px !important;
  align-items: center !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent) !important;
  background: color-mix(in oklab, var(--ref-background) 92%, white) !important;
  backdrop-filter: blur(18px);
}

.schedule-title-block {
  min-width: 0;
}

.schedule-composer-header .panel-eyebrow {
  margin-bottom: 7px !important;
  color: color-mix(in oklab, var(--ref-cyan) 72%, var(--ref-muted)) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: .64rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}

.schedule-composer-header h2 {
  margin: 0 !important;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}

.schedule-composer-subtitle {
  margin-top: 5px !important;
  color: var(--ref-muted) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

.schedule-composer-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.schedule-timezone-pill {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 86%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--ref-muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.schedule-close-button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 86%, transparent) !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--ref-muted) !important;
  box-shadow: 0 6px 18px -16px var(--ref-navy-deep) !important;
}

.schedule-close-button:hover,
.schedule-close-button:focus-visible {
  border-color: color-mix(in oklab, var(--ref-cyan) 42%, var(--ref-border)) !important;
  background: color-mix(in oklab, var(--ref-cyan) 6%, #fff) !important;
  color: var(--ref-foreground) !important;
}

.schedule-composer-body {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 30px clamp(24px, 3.2vw, 48px) 56px !important;
}

.schedule-composer-message {
  margin: 0 0 18px !important;
  border-radius: 12px !important;
}

.schedule-composer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 22px;
  align-items: start;
}

.schedule-editor-card,
.schedule-preview-card-v9,
.schedule-queue-card-v9 {
  border: 1px solid color-mix(in oklab, var(--ref-border) 82%, transparent);
  background: rgba(255,255,255,.94);
  box-shadow:
    0 18px 48px -38px color-mix(in oklab, var(--ref-navy-deep) 46%, transparent),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.schedule-editor-card {
  overflow: hidden;
  border-radius: 20px;
}

.schedule-editor-card #schedulePostForm {
  display: block !important;
  padding: 0 !important;
}

.schedule-form-section {
  padding: 26px 28px;
}

.schedule-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.schedule-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: color-mix(in oklab, var(--ref-cyan) 78%, var(--ref-muted)) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: .61rem !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  line-height: 1.2;
  text-transform: uppercase;
}

.schedule-section-header h3,
.schedule-preview-header-v9 h3,
.schedule-queue-header-v9 h3 {
  margin: 0 !important;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

.schedule-section-number {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 30%, var(--ref-border));
  border-radius: 9px;
  background: color-mix(in oklab, var(--ref-cyan) 7%, white);
  color: var(--ref-navy-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .63rem;
  font-weight: 600;
}

.schedule-section-divider {
  height: 1px;
  margin: 0 28px;
  background: color-mix(in oklab, var(--ref-border) 72%, transparent);
}

.schedule-fields-grid.schedule-publishing-grid,
.schedule-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.schedule-field {
  min-width: 0;
}

.schedule-form-section .form-label,
.schedule-generated-details .form-label {
  margin-bottom: 7px !important;
  color: color-mix(in oklab, var(--ref-foreground) 92%, #000) !important;
  font-size: .75rem !important;
  font-weight: 620 !important;
  letter-spacing: -.01em;
}

.schedule-form-section .form-control,
.schedule-form-section .form-select,
.schedule-generated-details .form-control {
  min-height: 45px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in oklab, var(--ref-input) 88%, transparent) !important;
  border-radius: 11px !important;
  background-color: color-mix(in oklab, #fff 94%, var(--ref-secondary)) !important;
  color: var(--ref-foreground) !important;
  font-size: .82rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.schedule-form-section .form-control:hover,
.schedule-form-section .form-select:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 26%, var(--ref-input)) !important;
}

.schedule-form-section .form-control:focus,
.schedule-form-section .form-select:focus,
.schedule-generated-details .form-control:focus {
  border-color: color-mix(in oklab, var(--ref-cyan) 70%, var(--ref-input)) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ref-cyan) 10%, transparent) !important;
}

.schedule-form-section .form-text {
  margin-top: 6px !important;
  color: var(--ref-muted) !important;
  font-size: .68rem !important;
  line-height: 1.4 !important;
}

.schedule-field-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.schedule-field-label-row > span {
  color: var(--ref-muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: .60rem !important;
  letter-spacing: .045em !important;
}

.schedule-media-field {
  margin-top: 2px !important;
}

.schedule-upload-dropzone {
  display: flex !important;
  min-height: 96px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px dashed color-mix(in oklab, var(--ref-cyan) 46%, var(--ref-border)) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--ref-cyan) 5%, #fff), #fff 68%) !important;
  cursor: pointer !important;
}

.schedule-upload-dropzone:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 76%, var(--ref-border)) !important;
  background: color-mix(in oklab, var(--ref-cyan) 6%, #fff) !important;
  transform: translateY(-1px);
}

.schedule-upload-icon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 13px !important;
  background: var(--ref-navy-deep) !important;
  color: var(--ref-cyan-soft) !important;
  box-shadow: 0 12px 24px -18px var(--ref-navy-deep) !important;
}

.schedule-upload-copy strong {
  color: var(--ref-foreground) !important;
  font-size: .82rem !important;
  font-weight: 620 !important;
}

.schedule-upload-copy small {
  margin-top: 2px;
  color: var(--ref-muted) !important;
  font-size: .69rem !important;
}

.schedule-upload-action {
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: .7rem !important;
}

.schedule-native-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.schedule-caption-field {
  margin-top: 20px !important;
}

.schedule-caption-input {
  min-height: 168px !important;
  padding: 13px 14px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
}

.schedule-caption-input::placeholder {
  color: color-mix(in oklab, var(--ref-muted) 76%, white) !important;
}

.schedule-ai-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 18px !important;
  padding: 14px 15px !important;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 22%, var(--ref-border)) !important;
  border-radius: 13px !important;
  background: color-mix(in oklab, var(--ref-mist) 70%, #fff) !important;
}

.schedule-ai-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.schedule-ai-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in oklab, var(--ref-cyan) 12%, #fff);
  color: var(--ref-cyan);
  font-size: .85rem;
}

.schedule-ai-copy strong {
  display: block;
  color: var(--ref-foreground);
  font-size: .76rem;
  font-weight: 650;
}

.schedule-ai-row p {
  margin: 2px 0 0 !important;
  color: var(--ref-muted) !important;
  font-size: .68rem !important;
  line-height: 1.4 !important;
}

.schedule-ai-button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 42%, var(--ref-border)) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ref-foreground) !important;
  font-size: .72rem !important;
  font-weight: 620 !important;
  box-shadow: 0 7px 18px -16px var(--ref-navy-deep) !important;
}

.schedule-generated-details {
  margin-top: 18px !important;
  padding: 16px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent) !important;
  border-radius: 13px !important;
  background: var(--ref-secondary) !important;
}

.schedule-composer-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 18px 28px 22px !important;
  border-top: 1px solid color-mix(in oklab, var(--ref-border) 74%, transparent) !important;
  background: color-mix(in oklab, var(--ref-secondary) 36%, #fff) !important;
}

.schedule-cancel-button,
.schedule-refresh-button {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 88%, transparent) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ref-foreground) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.schedule-primary-button {
  min-height: 40px !important;
  padding: 8px 17px !important;
  border: 1px solid var(--ref-navy-deep) !important;
  border-radius: 10px !important;
  background: linear-gradient(120deg, var(--ref-navy) 0%, var(--ref-navy-deep) 100%) !important;
  color: #fff !important;
  font-size: .75rem !important;
  font-weight: 650 !important;
  box-shadow: 0 12px 28px -18px var(--ref-navy-deep) !important;
}

.schedule-primary-button:hover:not(:disabled),
.schedule-primary-button:focus-visible:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.schedule-primary-button:disabled {
  border-color: color-mix(in oklab, var(--ref-navy-deep) 34%, white) !important;
  background: color-mix(in oklab, var(--ref-navy-deep) 36%, white) !important;
  opacity: 1 !important;
  color: rgba(255,255,255,.88) !important;
}

.schedule-preview-column {
  position: sticky;
  top: 16px;
  min-width: 0;
}

.schedule-preview-card-v9 {
  overflow: hidden;
  border-radius: 20px;
}

.schedule-preview-header-v9 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
}

.schedule-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid color-mix(in oklab, var(--ref-success, #2f9d77) 24%, var(--ref-border));
  border-radius: 999px;
  background: color-mix(in oklab, var(--ref-success, #2f9d77) 7%, #fff);
  color: #28795f;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.schedule-preview-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f9d77;
}

.schedule-live-preview {
  min-height: 390px !important;
  margin: 0 16px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 76%, transparent) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,249,251,.94)),
    var(--ref-secondary) !important;
}

.schedule-preview-placeholder {
  max-width: 235px !important;
  gap: 9px !important;
  padding: 34px 20px !important;
}

.schedule-preview-placeholder-icon {
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 4px !important;
  border-radius: 16px !important;
  background: var(--ref-navy-deep) !important;
  color: var(--ref-cyan-soft) !important;
  box-shadow: 0 18px 32px -23px var(--ref-navy-deep) !important;
}

.schedule-preview-placeholder strong {
  color: var(--ref-foreground) !important;
  font-size: .84rem !important;
  font-weight: 650 !important;
}

.schedule-preview-placeholder span:last-child {
  color: var(--ref-muted) !important;
  font-size: .69rem !important;
  line-height: 1.5 !important;
}

.schedule-live-preview .image-preview-wrapper {
  min-height: 390px !important;
  background: #f7f9fa !important;
}

.schedule-live-preview .image-preview,
.schedule-live-preview .video-preview {
  max-height: 480px !important;
}

.schedule-preview-footer-v9 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 20px 18px;
}

.schedule-preview-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--ref-cyan);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ref-cyan) 10%, transparent);
}

.schedule-preview-note {
  margin: 0 !important;
  color: var(--ref-muted) !important;
  font-size: .67rem !important;
  line-height: 1.48 !important;
}

.schedule-queue-card-v9 {
  margin-top: 22px;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
}

.schedule-queue-header-v9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 70%, transparent);
}

.schedule-queue-header-v9 p {
  margin: 4px 0 0;
  color: var(--ref-muted);
  font-size: .7rem;
}

.schedule-refresh-button {
  min-height: 36px !important;
  padding: 7px 11px !important;
  font-size: .69rem !important;
}

.schedule-posts-list.schedule-posts-grid-v9 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 16px 18px 20px !important;
}

.schedule-posts-grid-v9 > .schedule-empty-copy {
  grid-column: 1 / -1;
}

.schedule-posts-grid-v9 .scheduled-post-card,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card {
  height: 100%;
  margin: 0 !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px -30px var(--ref-navy-deep) !important;
}

.schedule-posts-grid-v9 .scheduled-post-card:hover,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 36%, var(--ref-border)) !important;
}

@media (max-width: 1180px) {
  .schedule-composer-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .schedule-posts-list.schedule-posts-grid-v9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .schedule-composer-layout {
    grid-template-columns: 1fr;
  }

  .schedule-preview-column {
    position: static;
  }

  .schedule-preview-card-v9 {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }

  .schedule-preview-header-v9,
  .schedule-preview-footer-v9 {
    grid-column: 1;
  }

  .schedule-live-preview {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 300px !important;
    margin: 14px !important;
  }

  .schedule-live-preview .image-preview-wrapper {
    min-height: 300px !important;
  }
}

@media (max-width: 720px) {
  .schedule-composer-header {
    min-height: auto !important;
    padding: 16px !important;
  }

  .schedule-composer-body {
    padding: 16px 12px 32px !important;
  }

  .schedule-form-section {
    padding: 20px 16px;
  }

  .schedule-section-divider {
    margin: 0 16px;
  }

  .schedule-fields-grid.schedule-publishing-grid,
  .schedule-fields-grid {
    grid-template-columns: 1fr !important;
  }

  .schedule-field-label-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .schedule-upload-action {
    display: none !important;
  }

  .schedule-ai-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .schedule-ai-button {
    width: 100%;
  }

  .schedule-composer-actions {
    padding: 16px !important;
  }

  .schedule-composer-actions .btn {
    flex: 1 1 0;
  }

  .schedule-preview-card-v9 {
    display: block;
  }

  .schedule-live-preview {
    min-height: 280px !important;
    margin: 0 14px !important;
  }

  .schedule-live-preview .image-preview-wrapper {
    min-height: 280px !important;
  }

  .schedule-posts-list.schedule-posts-grid-v9 {
    grid-template-columns: 1fr;
    padding: 14px !important;
  }

  .schedule-queue-header-v9 {
    align-items: flex-start;
    padding: 18px 16px 14px;
  }
}

/* =========================================================
   v10 — Schedule spacing / legacy override cleanup
   Neutralizes older high-specificity Schedule Post rules that
   were still affecting the redesigned composer and queue.
   ========================================================= */

/* The panel is mounted with .workspace-main-panel by app.js.
   These selectors intentionally outrank the older legacy rules. */
.schedule-panel.workspace-main-panel.schedule-composer-page {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-composer-header {
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px clamp(22px, 3vw, 42px) 17px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 80%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in oklab, var(--ref-background) 94%, white) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-composer-body {
  width: 100% !important;
  max-width: 1360px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 22px clamp(22px, 3vw, 42px) 38px !important;
  overflow-y: auto !important;
  background: transparent !important;
}

/* Remove the old form-as-card styling. The actual visual card is
   .schedule-editor-card now. */
.schedule-panel.workspace-main-panel.schedule-composer-page #schedulePostForm {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.schedule-composer-layout {
  grid-template-columns: minmax(0, 1fr) minmax(290px, 340px) !important;
  gap: 18px !important;
}

.schedule-editor-card,
.schedule-preview-card-v9,
.schedule-queue-card-v9 {
  border-radius: 16px !important;
}

.schedule-form-section {
  padding: 21px 22px !important;
}

.schedule-section-header {
  margin-bottom: 15px !important;
}

.schedule-section-divider {
  margin: 0 22px !important;
}

.schedule-fields-grid.schedule-publishing-grid,
.schedule-fields-grid {
  gap: 14px !important;
}

.schedule-form-section .form-text {
  margin-top: 5px !important;
}

.schedule-upload-dropzone {
  min-height: 82px !important;
  padding: 13px 14px !important;
}

.schedule-upload-icon {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}

.schedule-caption-field {
  margin-top: 16px !important;
}

.schedule-caption-input {
  min-height: 132px !important;
}

.schedule-ai-row {
  margin-top: 14px !important;
  padding: 12px 13px !important;
}

.schedule-composer-actions {
  padding: 14px 22px 17px !important;
}

.schedule-preview-header-v9 {
  padding: 17px 17px 13px !important;
}

.schedule-live-preview {
  min-height: 310px !important;
  margin: 0 13px !important;
}

.schedule-live-preview .image-preview-wrapper {
  min-height: 310px !important;
}

.schedule-preview-footer-v9 {
  padding: 12px 17px 15px !important;
}

/* Queue owns its border. The old #scheduledPostsList styling created
   an unnecessary second card with extra padding and poor alignment. */
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-queue-card-v9 {
  margin-top: 18px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 82%, transparent) !important;
  background: rgba(255,255,255,.94) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-queue-header-v9 {
  padding: 17px 20px 14px !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledPostsList.schedule-posts-grid-v9 {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 16px 17px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* Scheduled post cards: tighter rhythm and predictable heights. */
.schedule-posts-grid-v9 .scheduled-post-card,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

.schedule-posts-grid-v9 .scheduled-post-card .card-body,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card .card-body {
  padding: 15px !important;
}

.schedule-posts-grid-v9 .scheduled-post-card .card-body > .d-flex:first-child,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card .card-body > .d-flex:first-child {
  margin-bottom: 9px !important;
  gap: 10px !important;
}

.schedule-posts-grid-v9 .scheduled-post-card .card-body > .d-flex:first-child > strong,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card .card-body > .d-flex:first-child > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: .86rem !important;
  line-height: 1.32 !important;
}

.schedule-posts-grid-v9 .scheduled-post-card .badge,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card .badge {
  flex: 0 0 auto;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: .59rem !important;
  letter-spacing: .08em !important;
}

.schedule-posts-grid-v9 .scheduled-post-card .small,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card .small {
  margin-bottom: 6px !important;
  font-size: .72rem !important;
  line-height: 1.4 !important;
}

.schedule-posts-grid-v9 .scheduled-post-card p.small.text-muted,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card p.small.text-muted {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 8px !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: color-mix(in oklab, var(--ref-muted) 92%, var(--ref-foreground)) !important;
}

.schedule-posts-grid-v9 .scheduled-post-file-id,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-file-id {
  overflow: hidden !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid color-mix(in oklab, var(--ref-border) 66%, transparent) !important;
  color: var(--ref-muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: .61rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.schedule-posts-grid-v9 .scheduled-post-actions,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-actions {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.schedule-posts-grid-v9 .scheduled-post-actions .btn,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-actions .btn {
  min-width: 0 !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: .68rem !important;
}

@media (max-width: 1180px) {
  .schedule-panel.workspace-main-panel.schedule-composer-page #scheduledPostsList.schedule-posts-grid-v9 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .schedule-composer-layout {
    grid-template-columns: 1fr !important;
  }

  .schedule-preview-column {
    position: static !important;
  }
}

@media (max-width: 720px) {
  .schedule-panel.workspace-main-panel.schedule-composer-page .schedule-composer-header {
    padding: 15px 14px !important;
  }

  .schedule-panel.workspace-main-panel.schedule-composer-page .schedule-composer-body {
    padding: 14px 12px 28px !important;
  }

  .schedule-form-section {
    padding: 18px 15px !important;
  }

  .schedule-section-divider {
    margin: 0 15px !important;
  }

  .schedule-panel.workspace-main-panel.schedule-composer-page #scheduledPostsList.schedule-posts-grid-v9 {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
}

/* =========================================================
   v11 — Schedule caption/input border clarity
   Makes the caption textarea and related composer input lines
   clearer and more professional.
   ========================================================= */
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-caption-input,
.schedule-panel.workspace-main-panel.schedule-composer-page textarea.schedule-caption-input,
.schedule-panel.workspace-main-panel.schedule-composer-page #postCaption {
  border: 1.5px solid color-mix(in oklab, var(--ref-border) 62%, var(--ref-navy-soft)) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,252,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(13, 27, 60, 0.03) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-caption-input:hover,
.schedule-panel.workspace-main-panel.schedule-composer-page #postCaption:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 34%, var(--ref-navy-soft)) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-caption-input:focus,
.schedule-panel.workspace-main-panel.schedule-composer-page #postCaption:focus {
  border-color: color-mix(in oklab, var(--ref-cyan) 72%, var(--ref-navy-soft)) !important;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ref-cyan) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-caption-field .form-label,
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-field .form-label {
  color: color-mix(in oklab, var(--ref-foreground) 92%, #000) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-section-divider {
  background: color-mix(in oklab, var(--ref-border) 94%, var(--ref-navy-soft)) !important;
}

/* =========================================================
   v12 — Schedule control clarity / equal card sizing
   ========================================================= */

/* Make platform and datetime controls look like real, clear inputs */
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .schedule-field {
  display: flex !important;
  flex-direction: column !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-select,
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-control,
.schedule-panel.workspace-main-panel.schedule-composer-page #postPlatform,
.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledAt {
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 16px !important;
  border: 1.5px solid color-mix(in oklab, var(--ref-border) 68%, var(--ref-navy-soft)) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.98)) !important;
  color: var(--ref-foreground) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 2px rgba(11, 33, 72, 0.03) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page #postPlatform {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in oklab, var(--ref-muted) 78%, var(--ref-foreground)) 50%),
    linear-gradient(135deg, color-mix(in oklab, var(--ref-muted) 78%, var(--ref-foreground)) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.98)) !important;
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px),
    0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledAt {
  padding-right: 46px !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-select:hover,
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-control:hover,
.schedule-panel.workspace-main-panel.schedule-composer-page #postPlatform:hover,
.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledAt:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 42%, var(--ref-navy-soft)) !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-select:focus,
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-control:focus,
.schedule-panel.workspace-main-panel.schedule-composer-page #postPlatform:focus,
.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledAt:focus {
  border-color: color-mix(in oklab, var(--ref-cyan) 78%, var(--ref-navy-soft)) !important;
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--ref-cyan) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  outline: none !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledAt::-webkit-calendar-picker-indicator {
  opacity: .82;
  cursor: pointer;
}

/* Remove the file-type helper area visually and tighten the upload header */
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-field-label-row {
  margin-bottom: 10px !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-field-label-row > span {
  display: none !important;
}

/* Keep scheduled post cards uniform and cleaner */
.schedule-panel.workspace-main-panel.schedule-composer-page #scheduledPostsList.schedule-posts-grid-v9 {
  grid-auto-rows: 1fr !important;
}

.schedule-posts-grid-v9 .scheduled-post-card,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card {
  display: flex !important;
  height: 100% !important;
}

.schedule-posts-grid-v9 .scheduled-post-card .card-body,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card .card-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.schedule-posts-grid-v9 .scheduled-post-actions,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-actions {
  margin-top: auto !important;
}

/* Reduce oversized look in first queue card content blocks */
.schedule-posts-grid-v9 .scheduled-post-card p.small.text-muted,
#scheduledPostsList.schedule-posts-grid-v9 .scheduled-post-card p.small.text-muted {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* =========================================================
   v13 — Responsive hardening
   CSS-only responsiveness pass. Keeps all existing IDs,
   event hooks and backend-connected controls intact.
   ========================================================= */

/* ---------- Global layout safety ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body {
  overflow: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.app-main,
.app-shell {
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

.app-shell > *,
.workspace-page,
.chat-container,
.schedule-panel.workspace-main-panel,
.subscription-screen.billing-workspace-page {
  min-width: 0;
  min-height: 0;
}

/* Prevent long API data, media IDs and generated copy from widening pages. */
.workspace-page *,
.schedule-panel.workspace-main-panel *,
.subscription-screen.billing-workspace-page * {
  min-width: 0;
}

.schedule-posts-grid-v9 .scheduled-post-card,
.engagement-post-card,
.social-profile-row,
.agency-client-card,
.agency-users-list,
.inbox-conversation-item {
  overflow-wrap: anywhere;
}

/* ---------- Large laptops / small desktops ---------- */
@media (max-width: 1280px) {
  .schedule-composer-body {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  .engagement-body,
  .agency-body,
  #inboxAnalyticsPanel {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .inbox-layout {
    margin-left: 22px !important;
    margin-right: 22px !important;
  }

  #agencyClientsList.agency-clients-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }
}

/* ---------- Tablet / compact navigation ---------- */
@media (max-width: 960px) {
  body {
    overflow: hidden;
  }

  .app-shell,
  .app-shell.schedule-open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* The desktop sidebar becomes a safe horizontally-scrollable app bar.
     This keeps every existing navigation action available without new JS. */
  .app-sidebar {
    position: relative !important;
    z-index: 1200;
    display: flex !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(138, 216, 231, .15) !important;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar::-webkit-scrollbar {
    display: none;
  }

  .app-sidebar .sidebar-brand {
    position: sticky;
    left: 0;
    z-index: 4;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    background: var(--ref-navy-deep) !important;
  }

  .app-sidebar .brand-mark-logo {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .app-sidebar .brand-copy span,
  .sidebar-brand-switcher,
  .sidebar-section-label,
  .sidebar-account-tools-label,
  .sidebar-account,
  .sidebar-status,
  .sidebar-spacer {
    display: none !important;
  }

  .sidebar-nav-reference,
  .sidebar-account-tools {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sidebar-nav-group,
  .sidebar-agent-group {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Critical: keep Schedule Post reachable on tablet/mobile. */
  .sidebar-subnav {
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .sidebar-subaction,
  .app-sidebar .sidebar-action {
    min-height: 44px !important;
    height: 44px !important;
    flex: 0 0 auto !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  .sidebar-subaction {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 11px !important;
  }

  .sidebar-subaction-icon {
    flex: 0 0 auto !important;
  }

  .chat-container,
  .workspace-page,
  .schedule-panel.workspace-main-panel,
  .subscription-screen.billing-workspace-page {
    height: calc(100vh - 68px) !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
  }

  /* All non-chat pages remain independently scrollable. */
  .workspace-page,
  .schedule-panel.workspace-main-panel,
  .subscription-screen.billing-workspace-page,
  .workspace-page .calendar-dialog,
  .workspace-page .inbox-dialog,
  .workspace-page .engagement-dialog,
  .workspace-page .agency-dialog,
  .workspace-page .settings-dialog {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Schedule */
  .schedule-composer-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .schedule-preview-column {
    position: static !important;
  }

  .schedule-preview-card-v9 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr) !important;
    align-items: stretch !important;
  }

  .schedule-preview-header-v9,
  .schedule-preview-footer-v9 {
    grid-column: 1 !important;
  }

  .schedule-live-preview {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-height: 260px !important;
    margin: 12px !important;
  }

  .schedule-live-preview .image-preview-wrapper {
    min-height: 260px !important;
  }

  .schedule-panel.workspace-main-panel.schedule-composer-page #scheduledPostsList.schedule-posts-grid-v9 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Inbox: 2 columns first, thread below. */
  .workspace-page .inbox-layout {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    grid-template-areas:
      "filters conversations"
      "detail detail" !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .inbox-filters {
    grid-area: filters;
    max-height: 430px;
  }

  .inbox-conversations {
    grid-area: conversations;
    min-height: 430px;
    max-height: 430px;
  }

  .inbox-detail {
    grid-area: detail;
    min-height: 520px;
    border-top: 1px solid var(--ref-border) !important;
  }

  .inbox-thread-layout {
    grid-template-columns: minmax(0, 1fr) 220px !important;
  }

  /* Engagement */
  .engagement-performance-heading {
    flex-wrap: wrap !important;
  }

  .engagement-performance-insight {
    max-width: 100% !important;
    text-align: left !important;
  }

  .engagement-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .engagement-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Calendar */
  .calendar-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .calendar-main {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .calendar-post-details {
    margin: 0 18px 18px !important;
    border-left: 1px solid var(--ref-border) !important;
    border-top: 1px solid var(--ref-border) !important;
  }

  /* Settings / clients */
  .agency-add-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #agencyClientsList.agency-clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Billing */
  .subscription-screen.billing-workspace-page .subscription-plan-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- Phones / portrait tablets ---------- */
@media (max-width: 720px) {
  /* Prevent mobile Safari from zooming form controls on focus. */
  input,
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  .app-sidebar {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 8px !important;
  }

  .app-sidebar .sidebar-brand {
    padding-right: 4px !important;
  }

  .app-sidebar .brand-mark-logo {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .app-sidebar .brand-copy {
    display: none !important;
  }

  .chat-container,
  .workspace-page,
  .schedule-panel.workspace-main-panel,
  .subscription-screen.billing-workspace-page {
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
  }

  .app-sidebar .sidebar-action,
  .sidebar-subaction {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .app-sidebar .sidebar-action > span:last-child,
  .sidebar-subaction > span:last-child:not(.sidebar-subaction-icon) {
    display: none !important;
  }

  .sidebar-action-icon {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  /* Chat */
  .chat-header {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .chat-header p,
  .chat-header-status {
    display: none !important;
  }

  .assistant-avatar {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .messages {
    gap: 16px !important;
    padding: 18px 12px 22px !important;
  }

  .message,
  .assistant-message,
  .user-message {
    max-width: 96% !important;
  }

  .assistant-message {
    padding-left: 39px !important;
  }

  .assistant-message::before {
    width: 29px !important;
    height: 29px !important;
  }

  .chat-footer {
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .chat-input-row {
    min-height: 54px !important;
    padding: 5px 6px !important;
    border-radius: 16px !important;
  }

  #attachChatImageButton {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  #sendButton {
    min-width: 62px !important;
    height: 42px !important;
    padding: 0 11px !important;
  }

  .chat-attachment-preview {
    margin: 0 0 7px !important;
  }

  /* Common page headers */
  .calendar-header,
  .inbox-header,
  .engagement-header,
  .schedule-composer-header,
  .subscription-header {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .calendar-header h2,
  .inbox-header h2,
  .engagement-header h2,
  .schedule-composer-header h2,
  .subscription-header h1 {
    font-size: 1.25rem !important;
  }

  /* Schedule */
  .schedule-composer-header-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .schedule-timezone-pill {
    max-width: calc(100% - 48px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .schedule-composer-body {
    padding: 12px 10px 28px !important;
  }

  .schedule-form-section {
    padding: 18px 14px !important;
  }

  .schedule-section-divider {
    margin: 0 14px !important;
  }

  .schedule-section-header {
    gap: 12px !important;
  }

  .schedule-fields-grid.schedule-publishing-grid,
  .schedule-fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  .schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-select,
  .schedule-panel.workspace-main-panel.schedule-composer-page .schedule-publishing-grid .form-control,
  .schedule-panel.workspace-main-panel.schedule-composer-page #postPlatform,
  .schedule-panel.workspace-main-panel.schedule-composer-page #scheduledAt {
    min-height: 52px !important;
  }

  .schedule-upload-dropzone {
    min-height: 88px !important;
    align-items: flex-start !important;
    padding: 13px !important;
  }

  .schedule-upload-copy {
    flex: 1 1 auto !important;
  }

  .schedule-upload-action {
    display: none !important;
  }

  .schedule-caption-input {
    min-height: 150px !important;
  }

  .schedule-ai-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .schedule-ai-button {
    width: 100% !important;
  }

  .schedule-composer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 13px 14px 16px !important;
  }

  .schedule-composer-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .schedule-preview-card-v9 {
    display: block !important;
  }

  .schedule-live-preview {
    min-height: 240px !important;
    margin: 0 12px !important;
  }

  .schedule-live-preview .image-preview-wrapper {
    min-height: 240px !important;
  }

  .schedule-panel.workspace-main-panel.schedule-composer-page #scheduledPostsList.schedule-posts-grid-v9 {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  .schedule-queue-header-v9 {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding: 15px 14px 12px !important;
  }

  /* Inbox */
  .inbox-header-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #inboxSearchInput {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  #inboxAnalyticsPanel {
    padding: 14px 10px !important;
  }

  #inboxAnalyticsPanel > .d-flex:first-child {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .workspace-page .inbox-layout {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    margin: 0 10px 14px !important;
    overflow: hidden !important;
  }

  .inbox-filters {
    display: flex !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ref-border) !important;
    scrollbar-width: none;
  }

  .inbox-filters::-webkit-scrollbar {
    display: none;
  }

  .inbox-filter-title {
    display: none !important;
  }

  .inbox-filter {
    width: auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    flex: 0 0 auto !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  .inbox-conversations {
    min-height: 300px !important;
    max-height: 360px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ref-border) !important;
  }

  .inbox-detail {
    min-height: 460px !important;
  }

  .inbox-thread-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .inbox-context-panel {
    max-height: none !important;
    border-left: 0 !important;
    border-top: 1px solid var(--ref-border) !important;
  }

  .inbox-message-bubble {
    max-width: 88% !important;
  }

  /* Engagement */
  .engagement-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
  }

  #engagementPlatformFilter {
    width: 100% !important;
  }

  .engagement-body {
    padding: 14px 10px 24px !important;
  }

  .engagement-performance-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 16px 14px 10px !important;
  }

  .engagement-performance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 6px 10px 0 !important;
  }

  .engagement-performance-metric {
    min-height: 92px !important;
    padding: 11px 10px 14px !important;
  }

  .engagement-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .engagement-summary-card {
    padding: 13px !important;
  }

  .engagement-post-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Calendar */
  .calendar-overlay {
    padding: 0 !important;
  }

  .calendar-dialog,
  .agency-dialog,
  .settings-dialog,
  .inbox-dialog,
  .engagement-dialog {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .calendar-main {
    padding: 12px 10px !important;
    overflow-x: auto !important;
  }

  #postsCalendar {
    min-width: 620px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .calendar-post-details {
    margin: 0 10px 12px !important;
    padding: 14px !important;
  }

  .calendar-date-picker {
    top: 58px !important;
    width: calc(100% - 20px) !important;
  }

  .calendar-date-picker-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Settings and social connections */
  .settings-body,
  .agency-body {
    padding: 14px 10px 24px !important;
  }

  .settings-body .d-flex.gap-2.mb-3 {
    flex-wrap: wrap !important;
  }

  #knowledgeBaseFileInput {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  #knowledgeBaseUploadButton {
    width: 100% !important;
  }

  .social-platform-heading,
  .social-profile-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .social-platform-heading .btn,
  .social-profile-row .btn {
    width: 100% !important;
  }

  .agency-add-card,
  .agency-users-card {
    padding: 15px !important;
    border-radius: 16px !important;
  }

  .agency-add-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .agency-add-actions,
  .agency-users-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #agencyClientsList.agency-clients-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .agency-client-card {
    min-height: 0 !important;
    padding: 15px !important;
    border-radius: 16px !important;
  }

  /* Billing */
  .subscription-screen.billing-workspace-page .subscription-card,
  .subscription-screen.billing-workspace-page .subscription-card-wide {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    padding: 14px 10px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .subscription-current-summary,
  .subscription-usage-grid,
  .subscription-screen.billing-workspace-page .subscription-current-summary,
  .subscription-screen.billing-workspace-page .subscription-usage-grid,
  .subscription-screen.billing-workspace-page .subscription-plan-grid-four {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .subscription-plan-toolbar,
  .subscription-section-heading,
  .subscription-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .subscription-billing-toggle {
    width: 100% !important;
  }

  .subscription-billing-option {
    flex: 1 1 0 !important;
  }

  .subscription-plan-card {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .subscription-actions .btn {
    width: 100% !important;
  }

  /* Auth */
  .auth-screen {
    align-items: flex-start !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
  }

  .auth-card {
    width: 100% !important;
    max-width: 440px !important;
    margin: auto !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  /* App dialogs */
  .app-dialog-backdrop {
    align-items: flex-end !important;
    padding: 10px !important;
  }

  .app-dialog {
    width: 100% !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .messages {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .chat-header-title {
    gap: 8px !important;
  }

  .chat-header h1 {
    font-size: .92rem !important;
  }

  .user-message {
    padding: 10px 12px !important;
  }

  #sendButton {
    min-width: 56px !important;
    padding: 0 9px !important;
  }

  .schedule-section-number {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .schedule-upload-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .schedule-upload-copy small {
    display: none !important;
  }

  .schedule-composer-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .engagement-performance-metrics,
  .engagement-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .inbox-summary {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .inbox-conversations {
    min-height: 280px !important;
    max-height: 320px !important;
  }

  .inbox-detail {
    min-height: 420px !important;
  }

  #postsCalendar {
    min-width: 560px !important;
  }

  .calendar-header .d-flex,
  .engagement-header .d-flex {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .social-platform-card {
    padding: 12px !important;
  }

  .subscription-plan-price strong {
    font-size: 1.55rem !important;
  }
}

/* ---------- Short-height screens / landscape phones ---------- */
@media (max-height: 620px) and (max-width: 960px) {
  .app-sidebar {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .app-sidebar .brand-mark-logo,
  .app-sidebar .sidebar-action,
  .sidebar-subaction {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .chat-container,
  .workspace-page,
  .schedule-panel.workspace-main-panel,
  .subscription-screen.billing-workspace-page {
    height: calc(100vh - 54px) !important;
    height: calc(100dvh - 54px) !important;
  }
}

/* Reduced motion stays respectful on mobile and desktop. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   v14 — Flush workspace alignment + Agent Settings redesign
   Based on the reference project's PageHead + Card settings language.
   ========================================================= */

/* Remove the artificial centered gutter between the desktop sidebar and
   Schedule Post / Agent Settings content. Keep only normal page padding. */
.schedule-panel.workspace-main-panel.schedule-composer-page .schedule-composer-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(18px, 2.1vw, 32px) !important;
  padding-right: clamp(18px, 2.1vw, 32px) !important;
}

.workspace-page .settings-dialog.settings-dialog-v14,
.settings-dialog.settings-dialog-v14 {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(70% 44% at 98% 0%, color-mix(in oklab, var(--ref-cyan) 7%, transparent), transparent 68%),
    var(--ref-background) !important;
  box-shadow: none !important;
}

.settings-dialog-v14 {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.settings-header-v14 {
  display: flex !important;
  min-height: 112px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 22px clamp(18px, 2.1vw, 32px) 20px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in oklab, var(--ref-border) 78%, transparent) !important;
  background: color-mix(in oklab, var(--ref-background) 94%, white) !important;
  backdrop-filter: blur(16px);
}

.settings-title-v14 {
  min-width: 0;
}

.settings-kicker-v14,
.settings-card-kicker-v14 {
  display: block;
  color: color-mix(in oklab, var(--ref-cyan) 78%, var(--ref-muted));
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.settings-title-v14 h2 {
  margin: 7px 0 0 !important;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: clamp(1.6rem, 2.35vw, 2.05rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.04em !important;
  line-height: 1.08 !important;
}

.settings-title-v14 p {
  max-width: 740px;
  margin: 8px 0 0;
  color: var(--ref-muted);
  font-size: .84rem;
  line-height: 1.55;
}

.settings-close-v14 {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 86%, transparent) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  box-shadow: 0 8px 20px -18px var(--ref-navy-deep) !important;
}

.settings-message-v14 {
  margin: 16px clamp(18px, 2.1vw, 32px) 0 !important;
}

.workspace-page .settings-body.settings-body-v14,
.settings-body.settings-body-v14 {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 24px clamp(18px, 2.1vw, 32px) 36px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
}

.settings-form-v14 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.settings-grid-v14 {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.22fr);
  gap: 18px;
  align-items: stretch;
}

.settings-card-v14 {
  min-width: 0;
  padding: 22px;
  border: 1px solid color-mix(in oklab, var(--ref-border) 76%, transparent);
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 18px 44px -40px color-mix(in oklab, var(--ref-navy-deep) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.settings-card-v14 + .settings-card-v14,
.settings-grid-v14 + .settings-card-v14,
.settings-card-v14 + .settings-actions-v14 {
  margin-top: 18px;
}

.settings-grid-v14 .settings-card-v14 + .settings-card-v14 {
  margin-top: 0;
}

.settings-card-head-v14 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.settings-card-head-wide-v14 {
  margin-bottom: 18px;
}

.settings-card-head-v14 h3 {
  margin: 5px 0 0 !important;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

.settings-card-description-v14 {
  max-width: 680px;
  margin: 6px 0 0 !important;
  color: var(--ref-muted) !important;
  font-size: .74rem !important;
  line-height: 1.5 !important;
}

.settings-card-badge-v14 {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--ref-cyan) 30%, var(--ref-border));
  border-radius: 10px;
  background: color-mix(in oklab, var(--ref-cyan) 7%, white);
  color: var(--ref-navy-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .62rem;
  font-weight: 600;
}

.settings-field-v14 + .settings-field-v14 {
  margin-top: 18px;
}

.settings-card-v14 .form-label {
  margin-bottom: 7px !important;
  color: var(--ref-foreground) !important;
  font-size: .76rem !important;
  font-weight: 620 !important;
}

.settings-card-v14 .form-control,
.settings-card-v14 .form-select {
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 13px !important;
  border: 1.5px solid color-mix(in oklab, var(--ref-border) 70%, var(--ref-navy-soft)) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.99)) !important;
  color: var(--ref-foreground) !important;
  font-size: .82rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94) !important;
}

.settings-card-v14 .form-control:hover,
.settings-card-v14 .form-select:hover {
  border-color: color-mix(in oklab, var(--ref-cyan) 38%, var(--ref-navy-soft)) !important;
}

.settings-card-v14 .form-control:focus,
.settings-card-v14 .form-select:focus {
  border-color: color-mix(in oklab, var(--ref-cyan) 78%, var(--ref-navy-soft)) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ref-cyan) 11%, transparent) !important;
  outline: none !important;
}

.settings-card-v14 .form-text {
  margin-top: 6px !important;
  color: var(--ref-muted) !important;
  font-size: .68rem !important;
  line-height: 1.45 !important;
}

.settings-prompt-field-v14,
.settings-prompt-field-v14 textarea {
  height: 100%;
}

#settingsSystemPrompt {
  min-height: 188px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
}

.settings-social-grid-v14 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.settings-social-card-v14 {
  min-width: 0;
  min-height: 168px;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 78%, transparent) !important;
  border-radius: 15px !important;
  background: color-mix(in oklab, var(--ref-secondary) 30%, white) !important;
  box-shadow: none !important;
}

.settings-social-head-v14 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.settings-social-identity-v14 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.settings-social-mark-v14 {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.settings-social-instagram-v14 { background: linear-gradient(135deg, #7c3aed, #ec4899 55%, #f59e0b); }
.settings-social-facebook-v14 { background: #1877f2; font-size: 1rem; }
.settings-social-linkedin-v14 { background: #0a66c2; }

.settings-social-head-v14 strong {
  display: block;
  color: var(--ref-foreground) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
}

.settings-social-head-v14 .small {
  margin-top: 2px;
  font-size: .66rem !important;
}

.settings-social-head-v14 .btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  font-size: .66rem !important;
}

.settings-social-list-v14 {
  margin-top: 14px;
}

.settings-social-list-v14 .social-profile-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 64%, transparent) !important;
  border-radius: 11px !important;
  background: #fff !important;
}

.settings-social-list-v14 .social-profile-empty {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px dashed color-mix(in oklab, var(--ref-border) 72%, transparent);
  border-radius: 11px;
  color: var(--ref-muted);
  font-size: .68rem;
  text-align: center;
}

.settings-upload-v14 {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px dashed color-mix(in oklab, var(--ref-cyan) 38%, var(--ref-border));
  border-radius: 14px;
  background: color-mix(in oklab, var(--ref-mist) 50%, white);
}

.settings-upload-copy-v14 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.settings-upload-icon-v14 {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--ref-navy-deep);
  color: var(--ref-cyan-soft);
}

.settings-upload-icon-v14 svg {
  width: 20px;
  height: 20px;
}

.settings-upload-copy-v14 strong,
.settings-upload-copy-v14 span {
  display: block;
}

.settings-upload-copy-v14 strong {
  color: var(--ref-foreground);
  font-size: .78rem;
  font-weight: 650;
}

.settings-upload-copy-v14 span {
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: .67rem;
  line-height: 1.4;
}

.settings-upload-actions-v14 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.settings-upload-actions-v14 #knowledgeBaseFileInput {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-upload-actions-v14 #knowledgeBaseUploadButton {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 8px 13px !important;
  border-radius: 10px !important;
}

.settings-knowledge-list-v14 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin-top: 14px;
}

.settings-knowledge-list-v14 > .border.rounded {
  margin: 0 !important;
  padding: 13px !important;
  border: 1px solid color-mix(in oklab, var(--ref-border) 72%, transparent) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.settings-empty-v14 {
  margin-top: 14px;
  padding: 15px;
  border: 1px dashed color-mix(in oklab, var(--ref-border) 72%, transparent);
  border-radius: 12px;
  color: var(--ref-muted);
  font-size: .7rem;
  text-align: center;
}

.settings-actions-v14 {
  position: sticky;
  bottom: -1px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--ref-border) 78%, transparent);
  border-radius: 15px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 -12px 34px -30px var(--ref-navy-deep);
  backdrop-filter: blur(16px);
}

.settings-actions-copy-v14 strong,
.settings-actions-copy-v14 span {
  display: block;
}

.settings-actions-copy-v14 strong {
  color: var(--ref-foreground);
  font-size: .76rem;
  font-weight: 650;
}

.settings-actions-copy-v14 span {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: .66rem;
}

.settings-actions-buttons-v14 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-actions-buttons-v14 .btn {
  min-height: 40px;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
}

@media (max-width: 1180px) {
  .settings-grid-v14 {
    grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.1fr);
  }

  .settings-social-grid-v14 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-social-card-v14:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .schedule-panel.workspace-main-panel.schedule-composer-page .schedule-composer-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .settings-header-v14 {
    min-height: auto !important;
    padding: 16px 14px !important;
  }

  .workspace-page .settings-body.settings-body-v14,
  .settings-body.settings-body-v14 {
    padding: 16px 14px 28px !important;
  }

  .settings-grid-v14 {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-grid-v14 .settings-card-v14 + .settings-card-v14 {
    margin-top: 0;
  }

  .settings-social-grid-v14 {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-social-card-v14:last-child {
    grid-column: auto;
  }

  .settings-upload-v14 {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-knowledge-list-v14 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .settings-title-v14 p {
    font-size: .76rem;
  }

  .settings-card-v14 {
    padding: 16px;
    border-radius: 15px;
  }

  .settings-social-head-v14 {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .settings-social-head-v14 .btn {
    width: 100% !important;
  }

  .settings-upload-actions-v14 {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-upload-actions-v14 #knowledgeBaseUploadButton {
    width: 100% !important;
  }

  .settings-actions-v14 {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-actions-buttons-v14 {
    width: 100%;
  }

  .settings-actions-buttons-v14 .btn {
    flex: 1 1 0;
  }
}

/* =========================================================
   v15 — Settings overlap, upload alignment, no numbering,
   and automatic-refresh presentation
   ========================================================= */

/* Remove any numbered step badges that survive older markup. */
.schedule-section-number,
.settings-card-badge-v14 {
  display: none !important;
}

/* Do not force the AI guidance card/textarea to stretch beyond its card. */
.settings-grid-v14 {
  align-items: start !important;
}

.settings-agent-card-v14,
.settings-prompt-field-v14,
.settings-prompt-field-v14 textarea {
  height: auto !important;
  min-height: 0 !important;
}

#settingsSystemPrompt {
  display: block !important;
  width: 100% !important;
  min-height: 210px !important;
  height: 210px !important;
  max-height: 520px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

.settings-prompt-field-v14 .form-text {
  position: static !important;
  display: block !important;
  margin-top: 8px !important;
}

/* Center upload glyphs exactly inside their dark tiles. */
.schedule-upload-icon,
.settings-upload-icon-v14 {
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
}

.schedule-upload-icon svg,
.settings-upload-icon-v14 svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* Refresh actions are automatic in v15; keep the elements in the DOM
   so existing JS references remain safe, but remove manual buttons. */
#refreshScheduledPostsButton,
#refreshInboxButton,
#refreshEngagementButton,
#refreshCalendarButton,
#refreshBrandsButton,
#refreshAgencyClientsButton,
#refreshBrandUsersButton {
  display: none !important;
}

/* Keep headings balanced after their old right-side refresh buttons disappear. */
.schedule-queue-header-v9,
.inbox-header,
.engagement-header,
.calendar-header,
.brands-header,
.agency-header,
.brand-users-header {
  column-gap: 14px !important;
}

@media (max-width: 720px) {
  #settingsSystemPrompt {
    min-height: 180px !important;
    height: 180px !important;
  }
}

/* v17 — center client metrics under labels */
.agency-client-metrics {
  align-items: start;
}

.agency-client-metric {
  justify-items: center !important;
  text-align: center !important;
}

.agency-client-metric-label,
.agency-client-metric-value {
  display: block;
  width: 100%;
  text-align: center !important;
}


/* =========================================================
   v21 — stable analytics canvases
   ========================================================= */

.analytics-chart-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  contain: layout paint;
}

.analytics-chart-shell-inbox {
  height: 280px;
  min-height: 280px;
  max-height: 280px;
}

.analytics-chart-shell canvas,
.engagement-performance-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.engagement-performance-chart-wrap {
  min-height: 275px;
  max-height: 275px;
  overflow: hidden;
  contain: layout paint;
}


/* =========================================================
   v21 — schedule composer refinement
   ========================================================= */

.schedule-composer-body {
  padding: 24px 28px 38px !important;
}

.schedule-composer-layout {
  width: min(1380px, 100%);
  margin: 0 auto;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(310px, 370px) !important;
  gap: 26px !important;
}

.schedule-editor-card {
  border-radius: 22px !important;
  border-color:
    color-mix(
      in oklab,
      var(--ref-border) 72%,
      var(--ref-cyan) 8%
    ) !important;
  box-shadow:
    0 22px 54px -42px
      color-mix(
        in oklab,
        var(--ref-navy-deep) 52%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.schedule-form-section {
  padding: 28px 30px !important;
}

.schedule-publishing-section {
  background:
    linear-gradient(
      180deg,
      color-mix(
        in oklab,
        var(--ref-cyan) 3.5%,
        #fff
      ),
      #fff 72%
    );
}

.schedule-section-titleline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.schedule-section-titleline .schedule-section-number {
  margin-top: 1px;
}

.schedule-section-titleline .schedule-section-kicker {
  margin-bottom: 4px;
}

.schedule-publishing-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
  gap: 18px 20px !important;
}

.schedule-account-field {
  grid-column: 1 / -1;
}

.schedule-platform-select,
#scheduledAt {
  min-height: 48px !important;
}

.schedule-account-combobox {
  position: relative;
  width: 100%;
}

.schedule-account-search {
  min-height: 52px !important;
  padding:
    11px 46px 11px 46px !important;
  border-radius: 13px !important;
  background: #fff !important;
  font-weight: 560;
}

.schedule-account-search.has-selection {
  border-color:
    color-mix(
      in oklab,
      var(--ref-cyan) 42%,
      var(--ref-input)
    ) !important;
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 3%,
      #fff
    ) !important;
}

.schedule-account-search::-webkit-search-cancel-button {
  display: none;
}

.schedule-account-search-icon,
.schedule-account-chevron {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  pointer-events: none;
  color: color-mix(
    in oklab,
    var(--ref-muted) 88%,
    var(--ref-navy)
  );
}

.schedule-account-search-icon {
  left: 14px;
}

.schedule-account-chevron {
  right: 14px;
  transition: transform .16s ease;
}

.schedule-account-search-icon svg,
.schedule-account-chevron svg {
  width: 18px;
  height: 18px;
}

.schedule-account-combobox.is-open
.schedule-account-chevron {
  transform:
    translateY(-50%)
    rotate(180deg);
}

.schedule-account-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 120;
  width: 100%;
  max-height: 286px;
  overflow-y: auto;
  padding: 7px;
  border:
    1px solid
    color-mix(
      in oklab,
      var(--ref-border) 80%,
      var(--ref-cyan) 12%
    );
  border-radius: 14px;
  background: rgba(255,255,255,.985);
  box-shadow:
    0 20px 46px -18px
      rgba(12, 33, 58, .24),
    0 4px 12px
      rgba(12, 33, 58, .08);
  backdrop-filter: blur(12px);
}

.schedule-account-option {
  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ref-foreground);
  text-align: left;
}

.schedule-account-option:hover,
.schedule-account-option.is-active {
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 7%,
      var(--ref-secondary)
    );
}

.schedule-account-option.is-selected {
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 9%,
      #fff
    );
}

.schedule-account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border:
    1px solid
    color-mix(
      in oklab,
      var(--ref-cyan) 20%,
      var(--ref-border)
    );
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in oklab,
        var(--ref-cyan) 11%,
        #fff
      ),
      color-mix(
        in oklab,
        var(--ref-navy) 7%,
        #fff
      )
    );
  color: var(--ref-navy);
  font-family:
    "Space Grotesk",
    sans-serif;
  font-size: .78rem;
  font-weight: 700;
}

.schedule-account-option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.schedule-account-option-copy strong {
  overflow: hidden;
  color: var(--ref-foreground);
  font-size: .81rem;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-account-option-copy > span {
  overflow: hidden;
  color: var(--ref-muted);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    monospace;
  font-size: .61rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.schedule-account-option-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border:
    1px solid
    color-mix(
      in oklab,
      var(--ref-cyan) 22%,
      var(--ref-border)
    );
  border-radius: 999px;
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 6%,
      #fff
    );
  color: var(--ref-navy-soft);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    monospace;
  font-size: .55rem;
  font-weight: 600;
  white-space: nowrap;
}

.schedule-account-empty {
  padding: 18px 14px;
  color: var(--ref-muted);
  font-size: .75rem;
  text-align: center;
}

.schedule-account-hint {
  min-height: 18px;
  margin-top: 7px !important;
}

.schedule-content-section {
  background: #fff;
}

.schedule-caption-input {
  min-height: 170px !important;
  line-height: 1.58 !important;
}

.schedule-ai-row {
  margin-top: 18px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(
      105deg,
      color-mix(
        in oklab,
        var(--ref-cyan) 6%,
        #fff
      ),
      color-mix(
        in oklab,
        var(--ref-navy) 4%,
        #fff
      )
    ) !important;
}

.schedule-preview-card-v9 {
  border-radius: 22px !important;
  box-shadow:
    0 22px 54px -42px
      rgba(12, 33, 58, .5) !important;
}

.schedule-preview-column {
  top: 22px !important;
}

.schedule-composer-actions {
  margin-top: 0 !important;
  padding:
    18px 30px 22px !important;
  border-top:
    1px solid
    color-mix(
      in oklab,
      var(--ref-border) 72%,
      transparent
    ) !important;
  background:
    color-mix(
      in oklab,
      #fff 94%,
      var(--ref-secondary)
    );
}

.schedule-primary-button {
  min-height: 44px !important;
  min-width: 138px;
}

.schedule-cancel-button {
  min-height: 44px !important;
}

.schedule-queue-card-v9 {
  width: min(1380px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 20px !important;
}

@media (max-width: 980px) {
  .schedule-composer-layout {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .schedule-preview-column {
    position: static !important;
  }

  .schedule-preview-card-v9 {
    max-width: 720px;
  }
}

@media (max-width: 720px) {
  .schedule-composer-body {
    padding:
      16px 14px 28px !important;
  }

  .schedule-form-section {
    padding:
      22px 18px !important;
  }

  .schedule-publishing-grid {
    grid-template-columns:
      1fr !important;
  }

  .schedule-account-field {
    grid-column: auto;
  }

  .schedule-composer-actions {
    padding:
      16px 18px 18px !important;
  }

  .schedule-composer-actions
  .btn {
    flex: 1 1 0;
  }

  .schedule-account-option {
    grid-template-columns:
      34px minmax(0, 1fr);
  }

  .schedule-account-option-badge {
    display: none;
  }

  .schedule-account-avatar {
    width: 34px;
    height: 34px;
  }
}


/* =========================================================
   v22 — schedule account field alignment
   ========================================================= */

/*
 * Older schedule rules use a higher-specificity !important padding.
 * Override them here so the search text always clears the search icon.
 */
.schedule-panel.workspace-main-panel.schedule-composer-page
.schedule-publishing-grid
.schedule-account-search {
  padding-left: 54px !important;
  padding-right: 48px !important;
  text-indent: 0 !important;
}

.schedule-panel.workspace-main-panel.schedule-composer-page
.schedule-account-search-icon {
  left: 16px !important;
}

.schedule-section-titleline-compact {
  align-items: center !important;
}

.schedule-section-titleline-compact
.schedule-section-number {
  margin-top: 0 !important;
}

.schedule-section-titleline-compact
.schedule-section-kicker {
  margin: 0 !important;
}


/* =========================================================
   v22 — password visibility icon inside every password input
   ========================================================= */

.password-field-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.password-field-wrap .password-field-input,
.password-field-wrap input.form-control {
  width: 100% !important;
  padding-right: 48px !important;
}

.password-visibility-button {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #111827;
  box-shadow: none;
  cursor: pointer;
}

.password-visibility-button:hover {
  background: rgba(15, 23, 42, 0.06);
}

.password-visibility-button:focus-visible {
  outline: 2px solid
    color-mix(
      in oklab,
      var(--ref-cyan, #089dcf) 62%,
      transparent
    );
  outline-offset: 1px;
}

.password-visibility-button svg {
  display: block;
  width: 21px;
  height: 21px;
}

/*
 * Keep Bootstrap/legacy form styling from turning the embedded-eye wrapper
 * into a split input-group control.
 */
.password-field-wrap .form-control {
  border-radius: inherit;
}

/* Auth inputs */
.auth-form .password-field-wrap
.form-control {
  padding-right: 48px !important;
}

/* Brand user / settings / workspace forms */
.workspace-page .password-field-wrap
.form-control,
.agency-add-form .password-field-wrap
.form-control,
.settings-body .password-field-wrap
.form-control {
  padding-right: 48px !important;
}


/* =========================================================
   Analytics follower totals — 2026-10-02
   Main value = latest total followers.
   Secondary lines = selected-period net change + gained/lost.
   ========================================================= */
.engagement-followers-details {
  display: block;
  min-height: 16px;
  margin-top: 3px;
  color: var(--ref-muted, var(--text-soft)) !important;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.engagement-performance-metric[data-engagement-metric="followers"] {
  min-height: 124px !important;
}

@media (max-width: 720px) {
  .engagement-performance-metric[data-engagement-metric="followers"] {
    min-height: 108px !important;
  }

  .engagement-followers-details {
    font-size: 0.65rem;
  }
}

/* =========================================================
   Part 4 hotfix – Settings social-profile action buttons
   Keep action labels on one line and let account copy truncate.
   ========================================================= */
.settings-social-list-v14 .social-profile-info {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-social-list-v14 .social-profile-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* =========================================================
   Part 7 — multi-account Schedule Post selector
   ========================================================= */

.schedule-account-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.schedule-account-selected.d-none {
  display: none !important;
}

.schedule-account-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid
    color-mix(
      in oklab,
      var(--ref-cyan) 24%,
      var(--ref-border)
    );
  border-radius: 999px;
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 6%,
      #fff
    );
  color: var(--ref-navy-soft);
  font-size: .7rem;
  font-weight: 600;
}

.schedule-account-chip-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-account-chip-remove {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ref-muted);
  font-size: 1rem;
  line-height: 1;
}

.schedule-account-chip-remove:hover,
.schedule-account-chip-remove:focus-visible {
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 10%,
      #fff
    );
  color: var(--ref-navy);
  outline: none;
}

.schedule-account-dropdown-tools {
  position: sticky;
  top: -7px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -7px -7px 6px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--ref-border);
  background: rgba(255, 255, 255, .985);
  backdrop-filter: blur(12px);
}

.schedule-account-dropdown-count {
  color: var(--ref-muted);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    monospace;
  font-size: .62rem;
  font-weight: 600;
  white-space: nowrap;
}

.schedule-account-dropdown-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.schedule-account-dropdown-action {
  min-height: 28px;
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ref-navy-soft);
  font-size: .66rem;
  font-weight: 650;
  white-space: nowrap;
}

.schedule-account-dropdown-action:hover:not(:disabled),
.schedule-account-dropdown-action:focus-visible:not(:disabled) {
  background:
    color-mix(
      in oklab,
      var(--ref-cyan) 8%,
      var(--ref-secondary)
    );
  color: var(--ref-navy);
  outline: none;
}

.schedule-account-dropdown-action:disabled {
  opacity: .42;
}

.schedule-account-option-trailing {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 28px;
}

.schedule-account-option-check {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--ref-border-strong, var(--ref-border));
  border-radius: 7px;
  background: #fff;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.schedule-account-option.is-selected
.schedule-account-option-check {
  border-color:
    color-mix(
      in oklab,
      var(--ref-cyan) 70%,
      var(--ref-navy)
    );
  background: var(--ref-cyan);
}

@media (max-width: 720px) {
  .schedule-account-dropdown-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-account-option {
    grid-template-columns:
      34px minmax(0, 1fr) auto;
  }

  .schedule-account-option-trailing
  .schedule-account-option-badge {
    display: none !important;
  }
}


/*
|--------------------------------------------------------------------------
| Part 9 - Cross-platform account groups
|--------------------------------------------------------------------------
*/
.schedule-account-group {
  position: sticky;
  top: 49px;
  z-index: 2;
  padding: 8px 12px 6px;
  margin: 2px 0 4px;
  border-top: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
  background: var(--surface-color, #fff);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.schedule-account-dropdown-tools + .schedule-account-group {
  border-top: 0;
  margin-top: 0;
}


/* =========================================================
   Part 10 — account selector, Settings identity, Calendar UX
   ========================================================= */

/* Platform headings should scroll with their own group. This prevents the
   previous heading (for example Instagram) peeking above Facebook. */
.schedule-account-group {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: #fff !important;
}

/* Scheduled queue: make the exact publishing account obvious. */
#scheduledPostsList .scheduled-post-account {
  color: var(--ref-navy-soft, var(--ref-foreground)) !important;
  font-weight: 650 !important;
}

/* Calendar month cells: render time and title as separate rows so FullCalendar
   never lets them collide in narrow day columns. */
#postsCalendar .fc-daygrid-event,
#postsCalendar .fc-timegrid-event {
  overflow: hidden !important;
}

#postsCalendar .fc-event-main {
  min-width: 0 !important;
  overflow: hidden !important;
}

.calendar-event-content-v10 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 2px 4px;
  line-height: 1.15;
}

.calendar-event-time-v10,
.calendar-event-title-v10 {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-time-v10 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .58rem;
  font-weight: 700;
  opacity: .92;
}

.calendar-event-title-v10 {
  font-size: .66rem;
  font-weight: 650;
}

/* Selected calendar item media preview. */
.calendar-media-preview-v10 {
  display: grid;
  width: 100%;
  min-height: 120px;
  max-height: 290px;
  place-items: center;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ref-border) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--ref-secondary) 58%, #fff);
}

.calendar-media-preview-element {
  display: block;
  width: 100%;
  max-height: 290px;
  object-fit: contain;
  background: #0f172a08;
}

.calendar-media-preview-loading,
.calendar-media-preview-unavailable {
  padding: 24px 16px;
  color: var(--ref-muted);
  font-size: .72rem;
  text-align: center;
}

@media (max-width: 720px) {
  .calendar-media-preview-v10,
  .calendar-media-preview-element {
    max-height: 230px;
  }
}


/* =========================================================
   Part 12 — Multi-account Inbox
   ========================================================= */
.inbox-account-filter {
  width: min(280px, 28vw);
  min-width: 210px;
}

.inbox-conversation-account {
  overflow: hidden;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-thread-account-meta {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 650;
}

.inbox-reply-account-warning {
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid #f0d8a8;
  border-radius: 9px;
  background: #fff9ec;
  color: #6e531b;
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .inbox-account-filter {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   SCOCHAT INBOX — FINAL MODERATE LAYOUT V3
   Scoped ONLY to #inboxOverlay.
   ========================================================= */

/* Entire Inbox page can scroll when Analytics is expanded. */
#inboxOverlay.workspace-page,
#inboxOverlay {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#inboxOverlay .inbox-dialog {
  display: flex;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overscroll-behavior: contain;
}

#inboxOverlay .inbox-header,
#inboxOverlay #inboxAnalyticsPanel {
  flex: 0 0 auto;
}

/* =========================================================
   Filter / navigation row — like the supplied third image
   ========================================================= */

#inboxOverlay .inbox-layout {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  grid-template-columns: minmax(340px, 39%) minmax(0, 61%) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "filters filters"
    "conversations detail" !important;
  column-gap: 18px !important;
  row-gap: 16px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 14px 20px 28px !important;
  overflow: visible !important;
}

#inboxOverlay .inbox-filters {
  grid-area: filters !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(0, 32, 92, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 32, 92, 0.025) !important;
  scrollbar-width: none;
}

#inboxOverlay .inbox-filters::-webkit-scrollbar {
  display: none;
}

#inboxOverlay .inbox-filter-title,
#inboxOverlay .inbox-filter-title.mt-4 {
  flex: 0 0 auto !important;
  margin: 0 2px 0 11px !important;
  padding: 0 !important;
  color: #72849a !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  line-height: 40px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#inboxOverlay .inbox-filter-title:first-child {
  margin-left: 2px !important;
}

#inboxOverlay .inbox-filter {
  display: inline-flex !important;
  width: auto !important;
  min-width: max-content !important;
  height: 34px !important;
  min-height: 34px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid #d7e3ec !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #526a82 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#inboxOverlay .inbox-filter:hover {
  border-color: #9bcfe0 !important;
  background: #f7fcfe !important;
  color: #123b62 !important;
}

#inboxOverlay .inbox-filter.active {
  border-color: #31a8ce !important;
  background: #eaf9fd !important;
  color: #113b61 !important;
  box-shadow: 0 0 0 3px rgba(6, 173, 210, 0.07) !important;
}

/* =========================================================
   Left conversation list — like supplied second image
   ========================================================= */

#inboxOverlay .inbox-conversations {
  grid-area: conversations !important;
  display: flex !important;
  width: 100% !important;
  height: 620px !important;
  min-width: 0 !important;
  min-height: 620px !important;
  max-height: 620px !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #d7e5ed !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(0, 32, 92, 0.045) !important;
}

#inboxOverlay .inbox-conversation-search {
  flex: 0 0 auto !important;
  padding: 14px 14px 8px !important;
  background: #ffffff !important;
}

#inboxOverlay .inbox-conversation-search .form-control {
  width: min(260px, 100%) !important;
  min-height: 42px !important;
  padding-inline: 14px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

#inboxOverlay .inbox-column-header {
  flex: 0 0 auto !important;
  padding: 4px 16px 10px !important;
  border-bottom: 1px solid #e5edf3 !important;
  color: #73879d !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#inboxOverlay .inbox-conversation-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 12px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#inboxOverlay .inbox-conversation-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 14px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef3 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  text-align: left !important;
}

#inboxOverlay .inbox-conversation-item:hover {
  background: #f8fcfd !important;
}

#inboxOverlay .inbox-conversation-item.active,
#inboxOverlay .inbox-conversation-item.is-unread.active {
  margin: 3px 0 !important;
  border-bottom-color: transparent !important;
  border-radius: 16px !important;
  background: #eaf8fc !important;
  box-shadow: inset 3px 0 0 #06add2 !important;
}

#inboxOverlay .inbox-conversation-top {
  align-items: center !important;
}

#inboxOverlay .inbox-conversation-identity {
  gap: 10px !important;
}

#inboxOverlay .inbox-platform-badge,
#inboxOverlay .inbox-contact-avatar {
  display: inline-flex !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 0.69rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#inboxOverlay .inbox-contact-avatar.is-instagram,
#inboxOverlay .inbox-thread-avatar.is-instagram {
  background: #e1306c !important;
  color: #ffffff !important;
}

#inboxOverlay .inbox-contact-avatar.is-facebook,
#inboxOverlay .inbox-thread-avatar.is-facebook {
  background: #1877f2 !important;
  color: #ffffff !important;
}

#inboxOverlay .inbox-conversation-identity strong {
  color: #082d5d !important;
  font-size: 0.91rem !important;
  font-weight: 760 !important;
}

#inboxOverlay .inbox-conversation-time {
  color: #70869a !important;
  font-size: 0.7rem !important;
}

#inboxOverlay .inbox-conversation-type,
#inboxOverlay .inbox-conversation-account,
#inboxOverlay .inbox-conversation-bottom > span {
  display: inline-flex !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border: 1px solid #d8e5ec !important;
  border-radius: 999px !important;
  background: #f8fbfd !important;
  color: #587189 !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
}

#inboxOverlay .inbox-conversation-account {
  margin: 7px 0 0 44px !important;
}

#inboxOverlay .inbox-conversation-preview {
  margin: 7px 0 0 44px !important;
  color: #4e6983 !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

#inboxOverlay .inbox-conversation-bottom {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 8px 0 0 44px !important;
}

/* =========================================================
   Right detail: moderate chat + AI on its right
   ========================================================= */

#inboxOverlay .inbox-detail {
  grid-area: detail !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 620px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

#inboxOverlay .inbox-thread-layout {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 620px !important;
  grid-template-columns: minmax(0, 1fr) 275px !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Chat box: clean, moderate, not oversized. */
#inboxOverlay .inbox-thread-main {
  display: flex !important;
  width: 100% !important;
  height: 620px !important;
  min-width: 0 !important;
  min-height: 620px !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #d7e5ed !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(0, 32, 92, 0.04) !important;
}

/* Header more balanced than the current tall/empty version. */
#inboxOverlay .inbox-thread-header {
  display: flex !important;
  min-height: 76px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 15px 18px !important;
  border-bottom: 1px solid #e5edf3 !important;
  background: #ffffff !important;
}

#inboxOverlay .inbox-thread-contact-wrap {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 11px !important;
}

#inboxOverlay .inbox-thread-avatar {
  display: inline-flex !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
}

#inboxOverlay .inbox-thread-contact-info {
  min-width: 0 !important;
}

#inboxOverlay .inbox-thread-header strong {
  display: block !important;
  overflow: hidden !important;
  color: #082d5d !important;
  font-size: 0.98rem !important;
  font-weight: 770 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inboxOverlay .inbox-thread-contact-meta,
#inboxOverlay .inbox-thread-account-meta {
  margin-top: 3px !important;
  color: #58718a !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

#inboxOverlay .inbox-thread-account-meta {
  font-weight: 650 !important;
}

#inboxOverlay .inbox-thread-status {
  display: inline-flex !important;
  min-height: 28px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border: 1px solid #a7ddec !important;
  border-radius: 999px !important;
  background: #eaf9fd !important;
  color: #08718f !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

#inboxOverlay .inbox-thread-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
}

#inboxOverlay .inbox-message-row {
  margin-bottom: 11px !important;
}

#inboxOverlay .inbox-message-bubble {
  max-width: min(76%, 620px) !important;
  padding: 10px 13px 9px !important;
  border: 1px solid #d9e7ed !important;
  border-radius: 17px 17px 17px 7px !important;
  background: #f1fafc !important;
  box-shadow: none !important;
}

#inboxOverlay .inbox-message-row.is-outbound .inbox-message-bubble {
  border-radius: 17px 17px 7px 17px !important;
  background: #e5f7fb !important;
}

#inboxOverlay .inbox-reply-box {
  flex: 0 0 auto !important;
  padding: 12px 16px 14px !important;
  border-top: 1px solid #e5edf3 !important;
  background: #ffffff !important;
}

#inboxOverlay .inbox-reply-input {
  min-height: 48px !important;
  max-height: 96px !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  background: #f7fbfd !important;
}

/* =========================================================
   AI panel on the RIGHT of the chat
   ========================================================= */

#inboxOverlay .inbox-ai-below {
  display: flex !important;
  width: 100% !important;
  height: 620px !important;
  min-width: 0 !important;
  min-height: 620px !important;
  max-height: 620px !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  border: 1px solid #d7e5ed !important;
  border-radius: 20px !important;
  background: #fbfdfe !important;
  box-shadow: 0 10px 26px rgba(0, 32, 92, 0.035) !important;
}

#inboxOverlay .inbox-ai-below h4 {
  margin: 0 0 10px !important;
  color: #2b4e70 !important;
  font-size: 0.71rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#inboxOverlay .inbox-ai-below h4:not(:first-child) {
  margin-top: 18px !important;
}

#inboxOverlay .inbox-ai-below .inbox-context-item {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  padding: 9px 10px !important;
  border: 1px solid #e0eaf0 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
}

#inboxOverlay .inbox-ai-below .inbox-context-item span {
  color: #75889d !important;
  font-size: 0.68rem !important;
}

#inboxOverlay .inbox-ai-below .inbox-context-item strong {
  max-width: 60% !important;
  color: #173b61 !important;
  font-size: 0.71rem !important;
  font-weight: 750 !important;
  text-align: right !important;
  word-break: break-word !important;
}

#inboxOverlay .inbox-ai-below .inbox-recommendation {
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid #ccebf3 !important;
  border-radius: 12px !important;
  background: #eefafe !important;
  color: #49677f !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
}

#inboxOverlay .inbox-ai-below .inbox-context-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

#inboxOverlay .inbox-ai-below .inbox-context-actions .btn {
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 999px !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
}

/* Empty right-side state should still look balanced. */
#inboxOverlay .inbox-detail-empty {
  min-height: 620px !important;
  border: 1px solid #d7e5ed !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

/* Responsive fallback */
@media (max-width: 1180px) {
  #inboxOverlay .inbox-layout {
    grid-template-columns: minmax(310px, 40%) minmax(0, 60%) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #inboxOverlay .inbox-thread-layout {
    grid-template-columns: minmax(0, 1fr) 240px !important;
  }
}

@media (max-width: 900px) {
  #inboxOverlay .inbox-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "filters"
      "conversations"
      "detail" !important;
  }

  #inboxOverlay .inbox-conversations {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
  }

  #inboxOverlay .inbox-thread-layout {
    grid-template-columns: 1fr !important;
  }

  #inboxOverlay .inbox-thread-main,
  #inboxOverlay .inbox-ai-below {
    height: auto !important;
    min-height: 520px !important;
    max-height: none !important;
  }

  #inboxOverlay .inbox-ai-below {
    min-height: 0 !important;
  }
}

/* =========================================================
   SCOCHAT INBOX — NAVBAR + AI SCROLL CORRECTION V4
   Scoped only to #inboxOverlay.
   ========================================================= */

/* The overall Inbox grid must not carry a white/card background. */
#inboxOverlay .inbox-layout {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/*
 * Navbar white background is limited to one compact row only.
 * It must not visually extend downward behind the Inbox cards.
 */
#inboxOverlay .inbox-filters {
  box-sizing: border-box !important;
  align-self: start !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex-basis: 44px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(0, 32, 92, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  background-clip: padding-box !important;
  box-shadow: 0 4px 14px rgba(0, 32, 92, 0.025) !important;
}

/* Keep the individual filter buttons vertically centered inside that row. */
#inboxOverlay .inbox-filter-title,
#inboxOverlay .inbox-filter-title.mt-4 {
  line-height: 34px !important;
}

#inboxOverlay .inbox-filter {
  height: 34px !important;
  min-height: 34px !important;
}

/*
 * IMPORTANT:
 * AI Classification panel is no longer an inner scroll container.
 * Mouse-wheel events over it now scroll the overall Inbox/page.
 */
#inboxOverlay .inbox-ai-below {
  height: auto !important;
  min-height: 620px !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  align-self: stretch !important;
}

/* Make sure the right-side detail wrapper also doesn't trap the wheel. */
#inboxOverlay .inbox-detail,
#inboxOverlay .inbox-thread-layout {
  overflow: visible !important;
  overscroll-behavior: auto !important;
}

/*
 * The actual page-level Inbox scroller remains the only vertical scroller
 * for Analytics + navbar + chat/detail content.
 */
#inboxOverlay .inbox-dialog {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

/* =========================================================
   SCOCHAT — GLOBAL CUSTOM DROPDOWNS V1
   ========================================================= */

.sco-select {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.sco-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}

.sco-select-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px 0 15px;
  border: 1px solid #d3e1e9;
  border-radius: 14px;
  outline: 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  color: #173b61;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 5px 15px rgba(18,61,91,.035);
  cursor: pointer;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

.sco-select-trigger:hover:not(:disabled) {
  border-color: #99cfdf;
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(6,173,210,.045),
    0 7px 18px rgba(18,61,91,.05);
}

.sco-select-trigger:focus-visible,
.sco-select.is-open .sco-select-trigger {
  border-color: #06add2;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(6,173,210,.11);
}

.sco-select-trigger:disabled {
  opacity: .62;
  cursor: not-allowed;
  background: #f4f7f9;
}

.sco-select-sm .sco-select-trigger {
  min-height: 39px;
  padding-left: 13px;
  padding-right: 11px;
  border-radius: 12px;
  font-size: 0.79rem;
}

.sco-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sco-select-chevron {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: #526f88;
  transition: transform .16s ease;
}

.sco-select-chevron svg {
  width: 18px;
  height: 18px;
}

.sco-select.is-open .sco-select-chevron {
  transform: rotate(180deg);
}

.sco-select-menu {
  position: fixed;
  z-index: 40000;
  min-width: 190px;
  max-width: min(360px, calc(100vw - 20px));
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d7e4eb;
  border-radius: 14px;
  background: rgba(255,255,255,.985);
  box-shadow:
    0 18px 45px rgba(9,42,67,.18),
    0 4px 12px rgba(9,42,67,.08);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
  scrollbar-color: #cadbe4 transparent;
}

.sco-select-menu.d-none {
  display: none !important;
}

.sco-select-group-label {
  padding: 8px 10px 5px;
  color: #7890a5;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.sco-select-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #294a68;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 580;
  text-align: left;
  cursor: pointer;
  transition:
    background .13s ease,
    color .13s ease,
    transform .13s ease;
}

.sco-select-option:hover:not(:disabled),
.sco-select-option:focus-visible {
  outline: 0;
  background: #eef9fc;
  color: #075e78;
}

.sco-select-option.is-selected {
  background: #e4f7fc;
  color: #075f79;
  font-weight: 750;
}

.sco-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sco-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sco-select-option-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #06add2;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
}

.sco-select.is-disabled {
  opacity: .72;
}

/*
 * Keep custom selects compact in specific toolbars.
 */
.engagement-toolbar .sco-select {
  width: auto;
  min-width: 156px;
}

.engagement-toolbar #engagementAccountFilter + .sco-select,
.engagement-toolbar .sco-select:has(#engagementAccountFilter) {
  min-width: 220px;
}

.inbox-header-actions .sco-select {
  width: 215px;
  min-width: 215px;
}

.calendar-date-picker-fields .sco-select {
  min-width: 125px;
}

.settings-field-v14 .sco-select,
.agency-client-modal-form .sco-select,
.brand-users-add-card .sco-select,
.auth-card .sco-select,
.schedule-field .sco-select {
  width: 100%;
}

/* =========================================================
   ANALYTICS SECTION TABS — CLEAR ACTIVE STATE
   ========================================================= */

#engagementScopeTabs {
  gap: 14px !important;
}

#engagementScopeTabs .analytics-scope-buttons {
  display: inline-flex;
  gap: 10px;
}

#engagementScopeTabs .analytics-scope-buttons > .btn {
  min-height: 40px;
  margin: 0 !important;
  padding: 0.48rem 1rem;
  border: 1px solid #cbdce6 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #193b5f !important;
  font-weight: 720;
  box-shadow: 0 4px 12px rgba(18,61,91,.035);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

#engagementScopeTabs .analytics-scope-buttons > .btn:hover {
  border-color: #7fc9dc !important;
  background: #f3fbfd !important;
  color: #08647f !important;
  transform: translateY(-1px);
}

#engagementScopeTabs .analytics-scope-buttons > .btn.active,
#engagementScopeTabs .analytics-scope-buttons > .btn[aria-pressed="true"] {
  border-color: #069fc3 !important;
  background:
    linear-gradient(135deg, #06add2 0%, #088fb5 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 7px 18px rgba(6,173,210,.22),
    0 0 0 3px rgba(6,173,210,.08) !important;
}

#engagementScopeTabs .analytics-scope-buttons > .btn.active:hover,
#engagementScopeTabs .analytics-scope-buttons > .btn[aria-pressed="true"]:hover {
  color: #ffffff !important;
  transform: none;
}

/* =========================================================
   AGENCY OWNER — PAGE CLIENT PICKER V1
   ========================================================= */

.agency-page-client-picker {
  position: relative;
  display: inline-flex;
  min-width: 210px;
  max-width: 290px;
  flex: 0 1 250px;
  align-items: center;
}

.agency-page-client-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 5px 11px 5px 6px;
  border: 1px solid #cfe0e9;
  border-radius: 14px;
  outline: 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  color: #173b61;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 5px 15px rgba(18,61,91,.035);
  cursor: pointer;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.agency-page-client-trigger:hover,
.agency-page-client-trigger:focus-visible,
.agency-page-client-trigger.is-open {
  border-color: #70c5db;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(6,173,210,.09),
    0 7px 18px rgba(18,61,91,.05);
}

.agency-page-client-trigger-avatar,
.agency-page-client-avatar {
  display: inline-flex;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background:
    var(--agency-page-client-color, #0799bf);
  color: #ffffff;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .02em;
  box-shadow:
    0 4px 10px rgba(18,61,91,.08);
}

.agency-page-client-trigger-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: .81rem;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-page-client-trigger-chevron {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: #58728b;
  transition: transform .15s ease;
}

.agency-page-client-trigger-chevron svg {
  width: 18px;
  height: 18px;
}

.agency-page-client-trigger.is-open
.agency-page-client-trigger-chevron {
  transform: rotate(180deg);
}

.agency-page-client-menu {
  position: fixed;
  z-index: 45000;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #d4e2ea;
  border-radius: 16px;
  background: rgba(255,255,255,.99);
  box-shadow:
    0 20px 52px rgba(9,42,67,.20),
    0 5px 14px rgba(9,42,67,.08);
  backdrop-filter: blur(14px);
}

.agency-page-client-menu.d-none {
  display: none !important;
}

.agency-page-client-search-wrap {
  padding: 3px 3px 8px;
}

.agency-page-client-search {
  width: 100%;
  min-height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid #d5e3ea;
  border-radius: 12px;
  outline: 0;
  background:
    #f8fcfd
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23677f95' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E")
    no-repeat 12px center;
  color: #173b61;
  font-size: .8rem;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

.agency-page-client-search:focus {
  border-color: #67c4dc;
  background-color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(6,173,210,.09);
}

.agency-page-client-list {
  display: grid;
  max-height: 310px;
  gap: 4px;
  overflow-y: auto;
  padding: 1px;
  scrollbar-width: thin;
  scrollbar-color: #cbdce5 transparent;
}

.agency-page-client-option {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #173b61;
  text-align: left;
  cursor: pointer;
  transition:
    background .13s ease,
    transform .13s ease;
}

.agency-page-client-option:hover:not(:disabled),
.agency-page-client-option:focus-visible {
  outline: 0;
  background: #eef9fc;
}

.agency-page-client-option.is-selected {
  background: #e4f7fc;
}

.agency-page-client-option.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.agency-page-client-option-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agency-page-client-option-copy strong {
  overflow: hidden;
  font-size: .8rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-page-client-option-copy small {
  overflow: hidden;
  color: #73899f;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-page-client-option-marker {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0799bf;
  font-size: .78rem;
  font-weight: 900;
}

.agency-page-client-empty {
  padding: 18px 12px;
  color: #71869b;
  font-size: .76rem;
  text-align: center;
}

/*
 * Page-specific header integration.
 */
#agentView .chat-header {
  gap: 14px;
}

#agentView .agency-page-client-picker {
  margin-left: auto;
}

#agentView .chat-header-status {
  flex: 0 0 auto;
}

.schedule-composer-header-actions
.agency-page-client-picker,
.inbox-header-actions
.agency-page-client-picker,
.calendar-header-actions
.agency-page-client-picker,
.engagement-header
.agency-page-client-picker {
  margin-right: 2px;
}

.settings-header-v14
.agency-page-client-picker {
  margin-left: auto;
  margin-right: 10px;
}

@media (max-width: 900px) {
  .agency-page-client-picker {
    width: min(100%, 290px);
    min-width: 180px;
    flex-basis: 220px;
  }

  #agentView .chat-header {
    flex-wrap: wrap;
  }

  #agentView .agency-page-client-picker {
    order: 3;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}



/* =========================================================
   AGENCY OWNER — SIDEBAR + HEADER POLISH V2
   ========================================================= */

/*
 * Hard-stop the old Agent Settings sidebar destination for agency owners.
 * Internal users do not get .agency-owner-mode, so their sidebar is unchanged.
 */
.agency-owner-mode #openSettingsButton,
.agency-owner-mode #sidebarUserTheme {
  display: none !important;
}

/* ---------- Schedule Post header ---------- */

.schedule-composer-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

.schedule-composer-header-actions {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.schedule-composer-header-actions .agency-page-client-picker {
  width: 205px !important;
  min-width: 180px !important;
  max-width: 220px !important;
  flex: 0 1 205px !important;
  margin-right: 0 !important;
}

.schedule-timezone-pill {
  max-width: none !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.schedule-close-button {
  flex: 0 0 38px !important;
}

/* ---------- Calendar header ---------- */

.calendar-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

.calendar-header-actions {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.calendar-header-actions .agency-page-client-picker {
  width: 200px !important;
  min-width: 170px !important;
  max-width: 215px !important;
  flex: 0 1 200px !important;
  margin-right: 0 !important;
}

.calendar-new-post-button {
  display: inline-flex !important;
  min-width: 112px !important;
  min-height: 42px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0.58rem 1.05rem !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.calendar-new-post-button > span:last-child {
  display: inline-block !important;
  white-space: nowrap !important;
}

#closeCalendarButton {
  flex: 0 0 auto !important;
}

/*
 * On narrower layouts, wrap the complete action group cleanly instead of
 * truncating the timezone or splitting "New post" onto two lines.
 */
@media (max-width: 980px) {
  .schedule-composer-header,
  .calendar-header {
    grid-template-columns: 1fr !important;
  }

  .schedule-composer-header-actions,
  .calendar-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .schedule-composer-header-actions .agency-page-client-picker,
  .calendar-header-actions .agency-page-client-picker {
    width: min(100%, 260px) !important;
    max-width: 260px !important;
    flex: 1 1 200px !important;
  }

  .schedule-timezone-pill {
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  .schedule-composer-header-actions,
  .calendar-header-actions {
    align-items: stretch !important;
  }

  .schedule-composer-header-actions .agency-page-client-picker,
  .calendar-header-actions .agency-page-client-picker {
    width: 100% !important;
    max-width: none !important;
    flex-basis: 100% !important;
  }

  .calendar-new-post-button {
    min-width: 108px !important;
  }
}



/* =========================================================
   AGENCY CLIENT SETTINGS — WORKSPACE DETAIL V1
   ========================================================= */

.agency-client-settings-mode.settings-workspace-v14 {
  background: #eef9fc;
}

.agency-client-settings-mode .settings-dialog-v14 {
  width: 100%;
  max-width: none;
  background: #eef9fc;
}

.agency-client-settings-mode .settings-header-v14 {
  min-height: 56px;
  padding: 13px 18px 5px;
  border: 0;
  background: transparent;
}

.agency-client-settings-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: #4e6983;
  font-size: .78rem;
  font-weight: 650;
  cursor: pointer;
}

.agency-client-settings-back:hover {
  color: #0799bf;
}

.agency-client-settings-hero {
  display: flex;
  min-height: 164px;
  margin: 8px 18px 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #031536 0%, #031d48 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(3,21,54,.10);
}

.agency-client-settings-hero-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 20px;
}

.agency-client-settings-avatar {
  display: inline-flex;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--agency-client-settings-color, #0799bf);
  color: #fff;
  font-size: 1rem;
  font-weight: 850;
}

.agency-client-settings-kicker,
.agency-client-overview-kicker {
  display: block;
  color: #2bc8e9;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.agency-client-settings-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.agency-client-settings-name-row h2 {
  margin: 0;
  color: #fff;
  font-size: 1.85rem;
  font-weight: 780;
}

.agency-client-settings-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(64,220,171,.4);
  border-radius: 999px;
  background: rgba(40,190,145,.10);
  color: #5ee0b9;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.agency-client-settings-status::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.agency-client-settings-status.is-disabled {
  border-color: rgba(255,145,145,.35);
  color: #ff9b9b;
}

.agency-client-settings-hero-copy p {
  margin: 8px 0 0;
  color: #b8c9dc;
  font-size: .82rem;
}

.agency-client-create-content {
  display: inline-flex;
  min-height: 46px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-inline: 18px;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #2bc9e7, #22b4d4) !important;
  color: #082d4f !important;
  font-weight: 760;
  box-shadow: 0 12px 24px rgba(37,193,221,.22);
}

.agency-client-settings-tabs {
  display: flex;
  margin: 18px 18px 0;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid #d4e3eb;
  scrollbar-width: none;
}

.agency-client-settings-tabs::-webkit-scrollbar {
  display: none;
}

.agency-client-settings-tab {
  position: relative;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: #4e6983;
  font-size: .81rem;
  font-weight: 650;
  cursor: pointer;
}

.agency-client-settings-tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.agency-client-settings-tab.active {
  color: #082d5d;
  font-weight: 780;
}

.agency-client-settings-tab.active::after {
  background: #0799bf;
}

.agency-client-settings-mode .settings-body-v14 {
  max-width: none;
  padding: 20px 18px 34px;
}

.agency-client-settings-mode
[data-client-settings-section].d-none {
  display: none !important;
}

/* Overview */
.agency-client-overview {
  padding: 20px 18px 34px;
}

.agency-client-overview-grid {
  display: grid;
  grid-template-columns: minmax(330px, 1.45fr) repeat(2, minmax(180px, .8fr));
  gap: 16px;
}

.agency-client-health-card,
.agency-client-overview-stat {
  border: 1px solid #d8e5ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(14,51,78,.035);
}

.agency-client-health-card {
  grid-row: span 2;
  padding: 24px;
}

.agency-client-health-card h3 {
  margin: 5px 0 0;
  color: #082d5d;
  font-size: 1rem;
  font-weight: 760;
}

.agency-client-overview-kicker {
  color: #244f7c;
}

.agency-client-health-layout {
  display: flex;
  min-height: 165px;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
}

.agency-client-health-ring {
  position: relative;
  display: grid;
  width: 124px;
  height: 124px;
  flex: 0 0 124px;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      #0799bf calc(var(--client-health, 0) * 1%),
      #e8f1f5 0
    );
}

.agency-client-health-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
}

.agency-client-health-ring-inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.agency-client-health-ring-inner strong {
  color: #082d5d;
  font-size: 1.5rem;
  font-weight: 790;
}

.agency-client-health-ring-inner span {
  color: #73899f;
  font-size: .68rem;
}

.agency-client-health-copy strong {
  color: #123b61;
  font-size: .9rem;
  font-weight: 740;
}

.agency-client-health-copy p {
  max-width: 430px;
  margin: 8px 0 0;
  color: #58738d;
  font-size: .81rem;
  line-height: 1.55;
}

.agency-client-overview-stat {
  display: flex;
  min-height: 142px;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}

.agency-client-overview-stat > strong {
  margin-top: 14px;
  color: #082d5d;
  font-size: 1.68rem;
  font-weight: 790;
}

.agency-client-overview-stat small {
  margin-top: 7px;
  color: #71869b;
  font-size: .71rem;
}

/* Brand Brain */
.agency-client-settings-mode
[data-client-settings-section="brain"] {
  margin-bottom: 16px;
}

.agency-client-settings-mode .settings-card-v14 {
  border-color: #d8e5ec;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(14,51,78,.03);
}

/* Social account cards */
.agency-client-settings-mode
[data-client-settings-section="social"] {
  padding: 20px;
}

.agency-client-settings-mode .settings-social-grid-v14 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.agency-client-settings-mode .settings-social-card-v14 {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e5ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

.agency-client-settings-mode .settings-social-head-v14 {
  min-height: 78px;
  padding: 15px 18px;
}

.agency-client-settings-mode
.settings-social-head-v14 .btn {
  min-width: 96px;
  min-height: 38px;
  border-radius: 999px;
  font-weight: 720;
}

.agency-client-settings-mode .settings-social-list-v14 {
  border-top: 1px solid #edf2f5;
}

.agency-client-settings-mode .social-profile-row {
  padding: 12px 18px;
  border-bottom: 1px solid #edf2f5;
  background: #fbfdfe;
}

/* Team */
.agency-client-team-panel {
  padding: 22px;
  border: 1px solid #d8e5ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14,51,78,.03);
}

.agency-client-team-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5edf2;
}

.agency-client-team-head h3 {
  margin: 4px 0 0;
  color: #082d5d;
  font-size: 1rem;
}

.agency-client-team-head p {
  margin: 6px 0 0;
  color: #71869b;
  font-size: .76rem;
}

.agency-client-team-user {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 2px;
  border-bottom: 1px solid #edf2f5;
}

.agency-client-team-avatar {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0a789e;
  color: #fff;
  font-size: .68rem;
  font-weight: 820;
}

.agency-client-team-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.agency-client-team-copy strong {
  overflow: hidden;
  color: #082d5d;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-client-team-copy span {
  overflow: hidden;
  color: #71869b;
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-client-team-state {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #bde5d9;
  border-radius: 999px;
  background: #effaf6;
  color: #188765;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.agency-client-team-state.is-disabled {
  border-color: #ecd7d7;
  background: #fff5f5;
  color: #ba5a5a;
}

.agency-client-team-empty {
  padding: 28px 10px;
  color: #71869b;
  font-size: .77rem;
  text-align: center;
}

@media (max-width: 1050px) {
  .agency-client-overview-grid {
    grid-template-columns: minmax(300px, 1.3fr) minmax(180px, 1fr);
  }
}

@media (max-width: 760px) {
  .agency-client-settings-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .agency-client-create-content {
    width: 100%;
    justify-content: center;
  }

  .agency-client-overview-grid {
    grid-template-columns: 1fr;
  }

  .agency-client-health-card {
    grid-row: auto;
  }

  .agency-client-health-layout {
    align-items: flex-start;
    flex-direction: column;
  }

  .agency-client-team-head {
    flex-direction: column;
  }

  .agency-client-team-user {
    grid-template-columns: 38px minmax(0,1fr);
  }

  .agency-client-team-state {
    grid-column: 2;
    justify-self: start;
  }
}



/* =========================================================
   AGENCY CLIENT SETTINGS — DESIGN MATCH V2
   Closer to the supplied workspace reference.
   ========================================================= */

/* Overall page spacing: roomy like the supplied reference, not cramped. */
.agency-client-settings-mode .settings-header-v14 {
  padding: 18px 22px 8px !important;
}

.agency-client-settings-mode .agency-client-settings-back {
  color: #49657f !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

.agency-client-settings-mode .agency-client-settings-hero {
  width: calc(100% - 44px) !important;
  min-height: 176px !important;
  margin: 10px 22px 0 !important;
  padding: 30px 34px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, #031536 0%, #021a40 100%) !important;
  box-shadow: none !important;
}

/* Keep the workspace identity aligned like the reference. */
.agency-client-settings-mode .agency-client-settings-hero-main {
  gap: 20px !important;
}

.agency-client-settings-mode .agency-client-settings-avatar {
  width: 64px !important;
  height: 64px !important;
  flex-basis: 64px !important;
  border-radius: 18px !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

.agency-client-settings-mode .agency-client-settings-kicker {
  margin-bottom: 7px !important;
  color: #29cff1 !important;
  font-size: .65rem !important;
  font-weight: 850 !important;
  letter-spacing: .18em !important;
}

.agency-client-settings-mode .agency-client-settings-name-row {
  margin-top: 0 !important;
  gap: 11px !important;
}

/*
 * Existing global heading rules were overriding the hero name.
 * Force the client name to the white workspace-title treatment.
 */
.agency-client-settings-mode #agencyClientSettingsName {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 2rem !important;
  font-weight: 780 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
}

.agency-client-settings-mode .agency-client-settings-status {
  min-height: 25px !important;
  padding: 3px 10px !important;
  border-color: rgba(73, 224, 179, .42) !important;
  background: rgba(34, 184, 140, .10) !important;
  color: #58ddb5 !important;
}

.agency-client-settings-mode #agencyClientSettingsMeta {
  margin-top: 9px !important;
  color: #c0d0e1 !important;
  font-size: .82rem !important;
}

.agency-client-settings-mode .agency-client-create-content {
  min-width: 150px !important;
  min-height: 46px !important;
  padding: 0 19px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, #2bc9e9 0%, #25b8da 100%) !important;
  color: #072641 !important;
  font-size: .82rem !important;
  font-weight: 760 !important;
  box-shadow: 0 12px 25px rgba(33, 192, 220, .20) !important;
  white-space: nowrap !important;
}

/* Tabs: closer to reference — more breathing room, clear active underline. */
.agency-client-settings-mode .agency-client-settings-tabs {
  margin: 20px 22px 0 !important;
  gap: 6px !important;
}

.agency-client-settings-mode .agency-client-settings-tab {
  min-height: 50px !important;
  padding: 0 17px !important;
  font-size: .81rem !important;
}

.agency-client-settings-mode .agency-client-settings-tab::after {
  left: 8px !important;
  right: 8px !important;
  height: 3px !important;
}

/* =========================================================
   SOCIAL ACCOUNTS
   More separation + bolder borders as requested.
   ========================================================= */

.agency-client-settings-mode
[data-client-settings-section="social"] {
  padding: 24px !important;
  border: 2px solid #cfdde6 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
}

/* More space between Instagram / Facebook / LinkedIn. */
.agency-client-settings-mode .settings-social-grid-v14 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  margin-top: 18px !important;
}

/*
 * Each platform is a distinct, stronger card — closer to the TikTok
 * reference the user supplied.
 */
.agency-client-settings-mode .settings-social-card-v14 {
  overflow: hidden !important;
  border: 2px solid #cbdbe5 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 14px rgba(17, 57, 85, .025) !important;
}

/* Stronger hover without changing functionality. */
.agency-client-settings-mode .settings-social-card-v14:hover {
  border-color: #afcbd8 !important;
}

/* Compact platform header row like the reference card. */
.agency-client-settings-mode .settings-social-head-v14 {
  min-height: 88px !important;
  padding: 18px 20px !important;
  border-bottom: 0 !important;
  background: #ffffff !important;
}

.agency-client-settings-mode .settings-social-identity-v14 {
  gap: 13px !important;
}

.agency-client-settings-mode .settings-social-mark-v14 {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 12px !important;
}

.agency-client-settings-mode
.settings-social-head-v14 strong {
  color: #092e5b !important;
  font-size: .92rem !important;
  font-weight: 760 !important;
}

.agency-client-settings-mode
.settings-social-head-v14 .text-muted {
  margin-top: 4px !important;
  color: #637c94 !important;
  font-size: .72rem !important;
}

/* Connect / Connect another buttons remain functional but look like the reference. */
.agency-client-settings-mode
.settings-social-head-v14 .btn {
  min-width: 100px !important;
  min-height: 40px !important;
  padding: .45rem 1rem !important;
  border-width: 2px !important;
  border-radius: 999px !important;
  font-size: .76rem !important;
  font-weight: 760 !important;
}

/* Connected account rows get their own clear separator and stronger outline. */
.agency-client-settings-mode .settings-social-list-v14 {
  padding: 10px 16px 16px !important;
  border-top: 2px solid #e1e9ee !important;
  background: #fbfdfe !important;
}

.agency-client-settings-mode .social-profile-row {
  margin-top: 8px !important;
  padding: 13px 14px !important;
  border: 1.5px solid #d6e2e9 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
}

.agency-client-settings-mode .social-profile-row + .social-profile-row {
  margin-top: 10px !important;
}

/* If a platform has no profiles, preserve a clean compact empty area. */
.agency-client-settings-mode
.settings-social-list-v14:empty {
  display: none !important;
}

/* Social section heading gets slightly stronger hierarchy. */
.agency-client-settings-mode
[data-client-settings-section="social"]
.settings-card-kicker-v14 {
  color: #0a789c !important;
}

.agency-client-settings-mode
[data-client-settings-section="social"]
#socialConnectionsTitle {
  color: #082d5d !important;
  font-size: 1.02rem !important;
  font-weight: 780 !important;
}

.agency-client-settings-mode
[data-client-settings-section="social"]
.settings-card-description-v14 {
  color: #637b92 !important;
}

/* Wider desktop layout keeps Create Content visible. */
@media (min-width: 761px) {
  .agency-client-settings-mode .agency-client-settings-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .agency-client-settings-mode .agency-client-create-content {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 760px) {
  .agency-client-settings-mode .agency-client-settings-hero {
    width: calc(100% - 28px) !important;
    margin-inline: 14px !important;
    padding: 22px !important;
  }

  .agency-client-settings-mode #agencyClientSettingsName {
    font-size: 1.55rem !important;
  }

  .agency-client-settings-mode
  [data-client-settings-section="social"] {
    padding: 16px !important;
  }

  .agency-client-settings-mode .settings-social-grid-v14 {
    gap: 18px !important;
  }
}



/* =========================================================
   CLIENT SETTINGS — TEAM SEPARATORS + FAST-SWITCH POLISH V3
   ========================================================= */

/*
 * Team card uses edge-to-edge list rows so separator lines do not stop
 * short at the left or right.
 */
.agency-client-settings-mode .agency-client-team-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

.agency-client-settings-mode .agency-client-team-head {
  margin: 0 !important;
  padding: 22px !important;
  border-bottom: 2px solid #d5e1e8 !important;
}

.agency-client-settings-mode .agency-client-team-list {
  margin: 0 !important;
  padding: 0 !important;
}

.agency-client-settings-mode .agency-client-team-user {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  border-bottom: 2px solid #d9e4ea !important;
  background: #ffffff !important;
}

.agency-client-settings-mode .agency-client-team-user:last-child {
  border-bottom: 0 !important;
}

.agency-client-settings-mode .agency-client-team-user:hover {
  background: #f9fcfd !important;
}

.agency-client-settings-mode .agency-client-team-empty {
  margin: 0 !important;
  padding: 30px 22px !important;
}

/*
 * Small visual feedback while a page-level client is changing.
 * The selected client name/avatar changes immediately; data follows without
 * making the old client look like it is still selected.
 */
.agency-page-client-trigger {
  will-change: border-color, box-shadow;
}

.agency-page-client-option {
  contain: layout paint;
}



/* =========================================================
   CLIENT SETTINGS / ADD CLIENT — STABILITY + PROFILE IMAGE V4
   ========================================================= */

/* Switching tabs always presents content from the top cleanly. */
.agency-client-settings-mode .settings-body-v14 {
  scroll-behavior: auto !important;
}

/* Give Social Accounts a clean separation from the tab bar. */
.agency-client-settings-mode
[data-client-settings-section="social"]:not(.d-none) {
  margin-top: 0 !important;
}

/* Real client photos fully cover every avatar surface. */
.agency-client-avatar.has-profile-image,
.agency-page-client-avatar.has-profile-image,
.agency-page-client-trigger-avatar.has-profile-image,
.agency-client-settings-avatar.has-profile-image {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}

/* Add Client — optional profile picture. */
.agency-client-profile-picture-field {
  display: grid;
  gap: 8px;
}

.agency-client-profile-picture-control {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid #d4e2ea;
  border-radius: 16px;
  background: #f9fcfd;
}

.agency-client-profile-picture-preview {
  display: inline-flex;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #c9dce6;
  border-radius: 17px;
  background-color: #0799bf;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #ffffff;
  font-size: .83rem;
  font-weight: 850;
  letter-spacing: .03em;
  box-shadow: 0 7px 16px rgba(9, 61, 89, .08);
}

.agency-client-profile-picture-preview.has-image {
  border-color: #9bcbd9;
}

.agency-client-profile-picture-actions {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.agency-client-profile-picture-button {
  margin: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.agency-client-profile-picture-remove {
  margin: 0 !important;
  color: #b24e5a !important;
  text-decoration: none !important;
  font-weight: 680 !important;
}

.agency-client-profile-picture-actions small {
  width: 100%;
  color: #73899e;
  font-size: .68rem;
  line-height: 1.4;
}

/* Keep Add Client modal comfortable after adding the image field. */
.agency-client-modal {
  max-height: min(86vh, 790px) !important;
}

.agency-client-modal-form {
  overflow-y: auto;
}

/* Billing wording/cards remain clean after active-client AI cards are removed. */
.subscription-usage-grid {
  align-items: stretch;
}



/* =========================================================
   CLIENT SETTINGS — AVATAR FALLBACK + UNIFORM TABS V5
   ========================================================= */

/*
 * All four section tabs use the same footprint so Brand Brain and
 * Social accounts do not get longer active lines than Overview / Team.
 */
.agency-client-settings-mode .agency-client-settings-tabs {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.agency-client-settings-mode .agency-client-settings-tab {
  width: 132px !important;
  min-width: 132px !important;
  flex: 0 0 132px !important;
  justify-content: center !important;
  text-align: center !important;
  padding-inline: 8px !important;
}

/* Same active indicator length for every tab. */
.agency-client-settings-mode .agency-client-settings-tab::after {
  left: 50% !important;
  right: auto !important;
  width: 72px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 620px) {
  .agency-client-settings-mode .agency-client-settings-tab {
    width: 118px !important;
    min-width: 118px !important;
    flex-basis: 118px !important;
  }

  .agency-client-settings-mode .agency-client-settings-tab::after {
    width: 66px !important;
  }
}



/* =========================================================
   CLIENT SETTINGS — EXACT SAME TAB LINE V6
   ========================================================= */

/*
 * Previous versions still used a pseudo-element for the cyan line.
 * Remove that completely and use the bottom border of an IDENTICAL
 * fixed-width tab instead. This guarantees Overview, Brand Brain,
 * Social accounts and Team have exactly the same active-line width.
 */
.agency-client-settings-mode .agency-client-settings-tabs {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  border-bottom: 1px solid #d4e3eb !important;
}

.agency-client-settings-mode .agency-client-settings-tab {
  position: relative !important;
  box-sizing: border-box !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 50px !important;
  min-height: 50px !important;
  flex: 0 0 132px !important;
  margin: 0 0 -1px 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

/* Kill every older underline implementation. */
.agency-client-settings-mode .agency-client-settings-tab::before,
.agency-client-settings-mode .agency-client-settings-tab::after {
  content: none !important;
  display: none !important;
}

/* The active line is now exactly the 132px tab width for EVERY section. */
.agency-client-settings-mode .agency-client-settings-tab.active {
  border-bottom-color: #0799bf !important;
  color: #082d5d !important;
  font-weight: 780 !important;
}

@media (max-width: 620px) {
  .agency-client-settings-mode .agency-client-settings-tab {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    flex-basis: 118px !important;
  }
}



/* =========================================================
   CLIENT SETTINGS — INTERNAL USER + TAB CONTENT TOP FIX V7
   ========================================================= */

/*
 * The modern Client Settings body is the ONLY vertical scroller for tab
 * content. Give every section a clean top inset so Social accounts never
 * appears visually cut under the tab bar.
 */
.agency-client-settings-mode .settings-body-v14 {
  padding-top: 28px !important;
  scroll-padding-top: 28px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.agency-client-settings-mode
[data-client-settings-section="social"]:not(.d-none),
.agency-client-settings-mode
[data-client-settings-section="brain"]:not(.d-none),
.agency-client-settings-mode
[data-client-settings-section="team"]:not(.d-none) {
  margin-top: 0 !important;
  scroll-margin-top: 28px !important;
}

/*
 * Make sure the Social Connections card itself cannot be pulled upward by
 * any older global card rule.
 */
.agency-client-settings-mode
.settings-connections-card-v14 {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin-top: 0 !important;
}

/*
 * Internal users use exactly the same polished workspace-detail design.
 * They simply do not get All clients, Team, or an agency page selector.
 */
.internal-client-settings-mode
.agency-client-settings-back,
.internal-client-settings-mode
[data-client-settings-tab="team"],
.internal-client-settings-mode
[data-client-settings-section="team"] {
  display: none !important;
}

/*
 * With Team removed, keep the remaining three tabs evenly presented.
 * Their active-line behavior still comes from the exact uniform-tab V6 rules.
 */
.internal-client-settings-mode
.agency-client-settings-tabs {
  justify-content: flex-start !important;
}

/*
 * Do not leave extra room for a hidden page-level agency client selector in
 * internal-user Settings.
 */
.internal-client-settings-mode
.settings-header-v14
.agency-page-client-picker {
  display: none !important;
}



/* =========================================================
   CLIENT SETTINGS — RESPONSIVE + CANONICAL HEALTH V8
   ========================================================= */

/*
 * Keep the tab content area stable when connected social accounts make the
 * Social section much taller. The modern Settings page uses one controlled
 * content scroller; old parent containers must not introduce a second scroll.
 */
.agency-client-settings-mode.settings-workspace-v14,
.agency-client-settings-mode .settings-dialog-v14 {
  min-height: 0 !important;
  overflow: hidden !important;
}

.agency-client-settings-mode .settings-body-v14 {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-top: 24px !important;
  scroll-padding-top: 24px !important;
}

/* Social account content must always begin fully below the tabs. */
.agency-client-settings-mode
[data-client-settings-section="social"]:not(.d-none) {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  padding-top: 22px !important;
}

.agency-client-settings-mode
.settings-connections-card-v14 {
  top: auto !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* Long account names/buttons wrap instead of widening or clipping cards. */
.agency-client-settings-mode .settings-social-card-v14,
.agency-client-settings-mode .settings-social-head-v14,
.agency-client-settings-mode .social-profile-row {
  min-width: 0 !important;
}

.agency-client-settings-mode .settings-social-head-v14 {
  flex-wrap: wrap !important;
  row-gap: 12px !important;
}

.agency-client-settings-mode .settings-social-identity-v14 {
  min-width: 0 !important;
  flex: 1 1 220px !important;
}

.agency-client-settings-mode .social-profile-row {
  overflow-wrap: anywhere !important;
}

/*
 * On shorter laptop screens the original large hero consumed too much of the
 * viewport. Compact it while keeping the same design.
 */
@media (max-height: 820px) and (min-width: 761px) {
  .agency-client-settings-mode .settings-header-v14 {
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }

  .agency-client-settings-mode .agency-client-settings-hero {
    min-height: 126px !important;
    margin-top: 6px !important;
    padding: 18px 26px !important;
    border-radius: 20px !important;
  }

  .agency-client-settings-mode .agency-client-settings-avatar {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    border-radius: 15px !important;
  }

  .agency-client-settings-mode #agencyClientSettingsName {
    font-size: 1.55rem !important;
  }

  .agency-client-settings-mode #agencyClientSettingsMeta {
    margin-top: 5px !important;
    font-size: .75rem !important;
  }

  .agency-client-settings-mode .agency-client-settings-tabs {
    margin-top: 10px !important;
  }

  .agency-client-settings-mode .agency-client-settings-tab {
    height: 44px !important;
    min-height: 44px !important;
  }

  .agency-client-settings-mode .settings-body-v14 {
    padding-top: 18px !important;
    scroll-padding-top: 18px !important;
  }

  .agency-client-settings-mode
  [data-client-settings-section="social"]:not(.d-none) {
    padding-top: 16px !important;
  }
}

/* Tablet/mobile: hero, tabs and social account cards stack cleanly. */
@media (max-width: 760px) {
  .agency-client-settings-mode .settings-header-v14 {
    min-height: 48px !important;
    padding: 10px 14px 4px !important;
  }

  .agency-client-settings-mode .agency-client-settings-hero {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    margin: 6px 12px 0 !important;
    padding: 18px !important;
    gap: 16px !important;
    border-radius: 18px !important;
  }

  .agency-client-settings-mode .agency-client-settings-hero-main {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .agency-client-settings-mode .agency-client-settings-avatar {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .agency-client-settings-mode #agencyClientSettingsName {
    font-size: 1.4rem !important;
  }

  .agency-client-settings-mode .agency-client-settings-tabs {
    margin: 10px 12px 0 !important;
    overflow-x: auto !important;
  }

  .agency-client-settings-mode .settings-body-v14 {
    padding: 16px 12px 28px !important;
    scroll-padding-top: 16px !important;
  }

  .agency-client-settings-mode
  [data-client-settings-section="social"]:not(.d-none) {
    padding: 14px !important;
  }

  .agency-client-settings-mode .settings-social-head-v14 {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .agency-client-settings-mode
  .settings-social-head-v14 .btn {
    width: 100% !important;
  }
}



/* =========================================================
   ROLE + PLAN CONSISTENCY V9
   ========================================================= */

.agency-client-settings-mode
[data-client-settings-section="overview"],
.agency-client-settings-mode
[data-client-settings-section="brain"],
.agency-client-settings-mode
[data-client-settings-section="social"],
.agency-client-settings-mode
[data-client-settings-section="team"] {
  min-width: 0 !important;
}

.internal-client-settings-mode
[data-client-settings-tab="team"],
.internal-client-settings-mode
[data-client-settings-section="team"] {
  display: none !important;
}

.app-shell:not(.agency-owner-mode)
.settings-header-v14
.agency-page-client-picker {
  display: none !important;
}

/* =========================================================
   CLIENT SETTINGS — SOCIAL ACCOUNTS TOP-CLIP FIX V10
   Keep the fixed client header/hero/tabs from shrinking when the
   Social accounts panel becomes taller than the available viewport.
   ========================================================= */
.agency-client-settings-mode .agency-client-settings-hero,
.agency-client-settings-mode .agency-client-settings-tabs {
  flex-shrink: 0 !important;
}

.agency-client-settings-mode .settings-body-v14 {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

/* Inbox outbound replies — legible text on the existing pale-blue bubble.
   Scoped to Inbox only; no background, layout, or other page changes. */
#inboxOverlay .inbox-message-row.is-outbound .inbox-message-bubble,
#inboxOverlay .inbox-message-row.is-outbound .inbox-message-text,
#inboxOverlay .inbox-message-row.is-outbound .inbox-message-sender {
  color: #0B1F3A !important;
}
#inboxOverlay .inbox-message-row.is-outbound .inbox-message-time {
  color: #526A7D !important;
}