/* Messages: one inbox for customers, the team and AI bots (messages.js). */
.ms-root { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ms-root .material-symbols-outlined { font-size: 18px; line-height: 1; vertical-align: middle; flex-shrink: 0; }
.ms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 24px; }
.ms-head h1 { margin: 4px 0 0; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; }
.ms-head p { margin: 6px 0 0; font-size: 14px; color: var(--sh-on-surface-variant); max-width: 640px; }
.ms-kicker { display: flex; gap: 8px; font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); text-transform: uppercase; letter-spacing: .06em; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--sh-surface-container); }
.ms-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--sh-primary-container); }
.ms-root .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; font-family: var(--sh-font); font-weight: 600; cursor: pointer; }
.ms-root .btn-sm { font-size: 12px; padding: 7px 12px; }
.ms-root .btn-secondary { background: var(--sh-surface-lowest); color: var(--sh-on-surface); border: none; box-shadow: var(--sh-shadow); }
.ms-root .btn-ghost { background: transparent; color: var(--sh-on-surface-variant); border: none; }
.ms-root .btn-ghost:hover { background: var(--sh-surface-low); }
.ms-root .ms-gold { background: var(--sh-primary-container); color: var(--sh-on-primary-container); border: none; font-weight: 700; box-shadow: 0 1px 3px rgba(133,83,0,.2); }
.ms-root .ms-gold:hover { filter: brightness(.97); }
.ms-root .btn:disabled { opacity: .6; cursor: not-allowed; }
.ms-root .ms-danger:hover { color: var(--sh-error); }

.ms-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-kpi { position: relative; overflow: hidden; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ms-kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sh-surface-high); }
.ms-kpi.ms-accent::before { background: var(--sh-primary-container); }
.ms-lbl { font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); text-transform: uppercase; letter-spacing: .06em; }
.ms-val { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.02em; }

.ms-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: stretch; height: min(72vh, 760px); min-height: 460px; }
.ms-side, .ms-main { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ms-side { padding: 12px; gap: 10px; }
.ms-tabs { display: flex; gap: 2px; padding: 3px; background: var(--sh-surface-low); border-radius: 10px; flex-wrap: wrap; }
.ms-tabs button { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: 8px; color: var(--sh-on-surface-variant); cursor: pointer; white-space: nowrap; }
.ms-tabs button:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.ms-tabs button.active { background: var(--sh-surface-lowest); color: var(--sh-on-surface); font-weight: 700; box-shadow: var(--sh-shadow); }
.ms-root .fi { width: 100%; box-sizing: border-box; border: 1px solid var(--sh-outline-variant); border-radius: 10px; padding: 9px 12px; font-family: var(--sh-font); font-size: 13px; background: var(--sh-surface-lowest); color: var(--sh-on-surface); }
.ms-root .fi:focus { outline: 2px solid var(--sh-primary-container); border-color: transparent; }
.ms-root .fi[hidden] { display: none; }
.ms-list, .ms-pick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; flex: 1; }
.ms-pick { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.ms-pick-head { display: flex; justify-content: space-between; align-items: center; }

.ms-row { display: flex; gap: 10px; text-align: left; width: 100%; border: none; background: transparent; padding: 10px; border-radius: 10px; cursor: pointer; font-family: inherit; color: inherit; }
.ms-row:hover { background: var(--sh-surface-low); }
.ms-row.is-active { background: #fff4d6; }
.ms-av { width: 36px; height: 36px; border-radius: 50%; background: var(--sh-surface-container); color: var(--sh-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.ms-av-lg { width: 40px; height: 40px; }
.ms-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ms-row-top { display: flex; align-items: center; gap: 6px; }
.ms-row-top strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ms-row-top time { font-size: 11px; color: var(--sh-on-surface-variant); flex-shrink: 0; }
.ms-row-prev { font-size: 12px; color: var(--sh-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-row-foot { display: flex; align-items: center; gap: 6px; }
.ms-row-foot .material-symbols-outlined { font-size: 14px; color: var(--sh-outline); }
.ms-bot { font-size: 15px; color: var(--sh-primary); }
.ms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--sh-surface-container); color: var(--sh-on-surface-variant); }
.ms-badge-warn { background: #fff4d6; color: var(--sh-on-primary-container); }
.ms-badge-reply { background: #e0f2fe; color: #075985; }
.ms-none, .ms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; font-size: 13px; color: var(--sh-on-surface-variant); }
.ms-empty { flex: 1; }
.ms-none .material-symbols-outlined, .ms-empty .material-symbols-outlined { font-size: 32px; color: var(--sh-outline); }

.ms-thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sh-surface-container); }
.ms-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ms-who strong { font-size: 15px; }
.ms-who span { font-size: 12px; color: var(--sh-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-root .ms-back { display: none; }
.ms-items { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ms-msg { display: flex; flex-direction: column; gap: 3px; max-width: 78%; }
.ms-msg.in { align-self: flex-start; }
.ms-msg.out { align-self: flex-end; align-items: flex-end; }
.ms-bub { white-space: pre-wrap; font-size: 13px; line-height: 20px; padding: 10px 14px; border-radius: 12px; overflow-wrap: anywhere; }
.ms-msg.in .ms-bub { background: var(--sh-surface-low); border-top-left-radius: 4px; }
.ms-msg.out .ms-bub { background: #fff4d6; border-top-right-radius: 4px; }
.ms-subj { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--sh-on-surface-variant); }
.ms-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sh-on-surface-variant); }
.ms-meta .material-symbols-outlined { font-size: 13px; }

.ms-draft { align-self: stretch; border: 1px dashed var(--sh-primary-container); background: #fffbf0; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ms-draft.ms-rejected, .ms-draft.ms-blocked, .ms-draft.ms-failed { border-color: var(--sh-outline-variant); background: var(--sh-surface-low); }
.ms-draft-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--sh-on-surface-variant); }
.ms-draft-head .material-symbols-outlined { color: var(--sh-primary); }
.ms-draft .ms-bub { background: var(--sh-surface-lowest); }
.ms-edit { resize: vertical; min-height: 84px; }
.ms-effects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--sh-on-surface-variant); }
.ms-effects li { display: flex; align-items: center; gap: 6px; }
.ms-effects .material-symbols-outlined { color: var(--sh-primary); font-size: 16px; }
.ms-error { font-size: 12px; color: var(--sh-error); background: var(--sh-error-container); padding: 8px 12px; border-radius: 8px; }
.ms-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ms-composer { border-top: 1px solid var(--sh-surface-container); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ms-composer.ms-none { padding: 16px; }
.ms-comp-top { display: flex; align-items: center; gap: 10px; }
.ms-comp-top select { width: auto; min-width: 120px; }
.ms-to { font-size: 12px; color: var(--sh-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-composer textarea { resize: vertical; min-height: 64px; }
.ms-comp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-hint { font-size: 11px; color: var(--sh-on-surface-variant); }

@media (max-width: 900px) {
  .ms-kpis { grid-template-columns: minmax(0, 1fr); }
  .ms-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .ms-side { height: 70vh; }
  .ms-layout.has-thread .ms-side { display: none; }
  .ms-layout:not(.has-thread) .ms-main { display: none; }
  .ms-main { height: 78vh; }
  .ms-root .ms-back { display: inline-flex; }
  .ms-msg { max-width: 92%; }
  .ms-comp-foot { flex-direction: column; align-items: stretch; }
}

.ms-badge { white-space: nowrap; }
.ms-thread-head .ms-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }