@charset "UTF-8";
/* TrilùTable · I tuoi messaggi (messages module, prefix ms-) */
.ms-page { --ms-line: #2a2d32; --ms-panel: #15171a; --ms-panel-2: #1b1e22; --ms-soft: #99a0aa; --ms-orange: var(--accent, #ff833f); --ms-orange-soft: #ffb27f; color: var(--text, #f1f2f4); width: 100%; min-width: 0; }
.ms-page h1, .ms-page h2, .ms-page h3, .ms-page p { margin-top: 0; }

/* Heading */
.ms-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.ms-heading-copy { min-width: 0; }
.ms-heading-copy .eyebrow { font-size: 9px; letter-spacing: .18em; color: #d7a07a; margin-bottom: 10px; }
.ms-heading h1 { font-size: clamp(27px, 2.6vw, 38px); letter-spacing: -.04em; margin: 0 0 8px; }
.ms-heading-copy > p { color: var(--ms-soft); font-size: 13px; margin: 0; }
.ms-serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; color: var(--ms-orange-soft); font-size: 1.08em; }
.ms-heading-side { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ms-heading-stats { display: flex; gap: 8px; }
.ms-heading-stats > span { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; border: 1px solid var(--ms-line); border-radius: 10px; background: linear-gradient(145deg, #1b1d21, #141618 70%); font-size: 10.5px; color: #8b939e; }
.ms-heading-stats strong { font-size: 22px; line-height: 1.1; letter-spacing: -.04em; color: #f1f2f4; font-weight: 600; }
.ms-heading-stats .is-alert { border-color: #7a4b2a; background: linear-gradient(145deg, #2d2017, #1a1512 70%); color: #f0b48a; }
.ms-heading-stats .is-alert strong { color: var(--ms-orange); }
.ms-new-button { min-height: 44px; padding: 11px 18px; font-size: 12.5px; }

/* Shell */
.ms-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: clamp(560px, calc(100dvh - 210px), 980px); border: 1px solid var(--ms-line); border-radius: 14px; background: var(--ms-panel); overflow: hidden; }
.ms-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--ms-line); background: #131518; }
.ms-list-tools { padding: 16px 16px 12px; border-bottom: 1px solid var(--ms-line); }
.ms-search { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border: 1px solid #343940; border-radius: 9px; background: #101214; color: #7d848f; }
.ms-search:focus-within { border-color: #b75a2e; box-shadow: 0 0 0 3px #ff833f14; }
.ms-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #f4f5f7; font-size: 12.5px; }
.ms-search input::placeholder { color: #767d88; }
.ms-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ms-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 11px; border: 1px solid #2f343b; border-radius: 999px; background: transparent; color: #a7adb6; font-size: 12px; white-space: nowrap; cursor: pointer; }
.ms-filter > span { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: #2b2f35; color: #b8bec7; font-size: 9.5px; }
.ms-filter:hover { background: #22262b; color: #f2f3f5; }
.ms-filter.is-active { background: #35241a; border-color: #6a4126; color: #ffb27f; }
.ms-filter.is-active > span { background: #5f3a21; color: #ffd2b3; }
.ms-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ms-rows { list-style: none; margin: 0; padding: 0; }
.ms-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 74px; padding: 13px 16px; border: 0; border-bottom: 1px solid #202327; background: transparent; color: inherit; text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 transparent; }
.ms-row:hover { background: #1a1d21; }
.ms-row.is-selected { background: #241a14; box-shadow: inset 3px 0 0 var(--ms-orange); }
.ms-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ms-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ms-row-top strong { font-size: 13px; font-weight: 550; color: #d9dde3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-row-top time { flex-shrink: 0; font-size: 10.5px; color: #7c838e; }
.ms-row.is-unread .ms-row-top strong { color: #fff; font-weight: 700; }
.ms-row.is-unread .ms-row-top time { color: var(--ms-orange-soft); }
.ms-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 10.5px; color: #8c949f; }
.ms-row-bottom { display: flex; align-items: center; gap: 8px; }
.ms-row-preview { flex: 1; min-width: 0; font-size: 11.5px; color: #8e96a1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-row.is-unread .ms-row-preview { color: #c9ced6; }
.ms-unread { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ms-orange); color: #1b120c; font-size: 10.5px; font-weight: 700; }
.ms-res-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 7px; border: 1px solid #4b3424; border-radius: 6px; background: #241a14; color: #f0b48a; font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-res-chip.is-muted { border-color: #343a42; background: #1c1f24; color: #a5acb6; }
.ms-list-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 22px; color: #8e96a1; }
.ms-list-empty svg { color: var(--ms-orange); margin-bottom: 4px; }
.ms-list-empty strong { color: #e6e9ed; font-size: 13.5px; }
.ms-list-empty p { font-size: 11.5px; margin: 0; max-width: 240px; }

/* Avatars */
.ms-avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #2b2f36; border: 1px solid #3c424b; color: #e3e7ec; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.ms-avatar i { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #1d2025; border: 2px solid #131518; color: #aab2bd; }
.ms-avatar-whatsapp i { color: #5fd98e; }
.ms-avatar-agent i { color: var(--ms-orange-soft); }
.ms-avatar-site i, .ms-avatar-app i { color: #8fb6ff; }
.ms-row.is-selected .ms-avatar i { border-color: #241a14; }
.ms-avatar-lg { width: 48px; height: 48px; font-size: 15px; background: #35251c; border-color: #6a4228; color: #ffc29b; font-family: Georgia, serif; font-style: italic; font-weight: 500; }

/* Thread */
.ms-thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #15171a; }
.ms-thread-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 16px 20px; border-bottom: 1px solid var(--ms-line); background: #16181c; }
.ms-back { display: none; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 4px; border: 1px solid #2f343b; border-radius: 9px; background: #1b1e22; color: #c9ced6; font-size: 12px; cursor: pointer; }
.ms-back svg { transform: scaleX(-1); }
.ms-thread-title { flex: 1 1 260px; min-width: 0; }
.ms-thread-title h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 18px; letter-spacing: -.02em; margin: 0 0 5px; overflow-wrap: anywhere; }
.ms-thread-title p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 11.5px; color: #98a1ac; }
.ms-phone { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; color: #ffcba7; font-weight: 600; }
.ms-phone:hover { color: #fff; text-decoration: underline; }
.ms-channel { display: inline-flex; align-items: center; gap: 5px; }
.ms-dot { color: #59606a; }
.ms-thread-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-thread-actions .btn { min-height: 38px; padding: 8px 11px; font-size: 11.5px; gap: 6px; }
.ms-thread-actions .ms-mark-read { border-color: #6a4126; background: #2b1f16; color: #ffcba7; }
.ms-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; background: radial-gradient(120% 60% at 100% 0%, #1d1611 0%, transparent 60%), #121417; scrollbar-width: thin; }
.ms-messages:focus-visible { outline: 2px solid var(--ms-orange); outline-offset: -2px; }
.ms-bubbles { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ms-day { align-self: center; margin: 6px 0 2px; }
.ms-day span { display: inline-block; padding: 4px 10px; border: 1px solid #2c3036; border-radius: 999px; background: #181a1e; color: #8e96a1; font-size: 10.5px; text-transform: capitalize; }
.ms-bubble { display: flex; flex-direction: column; gap: 4px; max-width: min(560px, 84%); padding: 10px 14px 8px; border-radius: 14px; border: 1px solid transparent; }
.ms-bubble p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #eef0f3; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-bubble time { align-self: flex-end; font-size: 10px; color: #7c838e; }
.ms-bubble-author { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.ms-bubble-in { align-self: flex-start; background: #23272d; border-color: #343a42; border-top-left-radius: 4px; }
.ms-bubble-in .ms-bubble-author { color: #aab1bb; }
.ms-bubble-out { align-self: flex-end; background: linear-gradient(160deg, #2e1d12, #22160f); border-color: #b8642f; border-top-right-radius: 4px; }
.ms-bubble-out .ms-bubble-author { color: #ffa36b; }
.ms-bubble-out time { color: #b08a70; }
.ms-bubble-system { border-style: dashed; }
.ms-bubble-in.ms-bubble-agent { border-color: #6a4126; }
.ms-bubble-in.ms-bubble-agent .ms-bubble-author { color: #ffa36b; }
.ms-thread-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; text-align: center; color: #98a1ac; font-size: 12.5px; }
.ms-thread-state p { margin: 0; max-width: 320px; line-height: 1.6; }
.ms-thread-state strong { color: #e6e9ed; }
.ms-thread-state svg { color: var(--ms-orange); }
.ms-thread-state.is-error { color: #f1b3a4; }
.ms-thread-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 30px; text-align: center; color: #98a1ac; background: radial-gradient(80% 50% at 50% 40%, #1d1611 0%, transparent 70%); }
.ms-thread-placeholder svg { color: var(--ms-orange); margin-bottom: 10px; }
.ms-thread-placeholder h2 { font-size: 20px; color: #f1f2f4; margin: 0 0 6px; }
.ms-thread-placeholder p { max-width: 380px; font-size: 12.5px; margin: 0; }
.ms-thread-placeholder b { color: var(--ms-orange-soft); }

/* Composer */
.ms-composer { padding: 12px 18px 14px; border-top: 1px solid var(--ms-line); background: #111316; }
.ms-quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.ms-quick::-webkit-scrollbar { display: none; }
.ms-quick-chip { flex-shrink: 0; min-height: 36px; padding: 6px 13px; border: 1px solid #3a2a20; border-radius: 999px; background: #1c1612; color: #e7c2a7; font-size: 12px; white-space: nowrap; cursor: pointer; }
.ms-quick-chip:hover:not(:disabled) { border-color: #8c5a39; background: #2a1d15; color: #ffd2b3; }
.ms-compose { display: flex; align-items: flex-end; gap: 10px; }
.ms-textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 180px; resize: vertical; padding: 12px 14px; border: 1px solid #343b45; border-radius: 11px; background: #0e1013; color: #eff1f4; font-size: 13.5px; line-height: 1.5; }
.ms-textarea:focus { border-color: var(--ms-orange); outline: 2px solid #ff833f22; outline-offset: 0; }
.ms-textarea::placeholder { color: #727b88; }
.ms-send { min-height: 48px; padding: 10px 18px; font-size: 13px; }
.ms-delivery { display: flex; align-items: center; gap: 7px; margin: 9px 2px 0; font-size: 11px; color: #8a929d; line-height: 1.5; }
.ms-delivery svg { flex-shrink: 0; color: #9aa2ad; }
.ms-delivery > span { flex: 1; min-width: 0; }
.ms-kbd { flex-shrink: 0; padding: 2px 7px; border: 1px solid #2f343b; border-radius: 5px; background: #181a1e; color: #7f8893; font: inherit; font-size: 10px; }
.ms-handoff { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #2f6b45; border-radius: 11px; background: #11241a; }
.ms-handoff p { flex: 1 1 200px; margin: 0; font-size: 11.5px; color: #b9e2c7; line-height: 1.5; }
.ms-wa-button { min-height: 44px; background: #25d366; border-color: #25d366; color: #06210f; font-weight: 700; }
.ms-wa-button:hover { background: #4be083; border-color: #4be083; }
.ms-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #8fbf9f; cursor: pointer; }
.ms-icon-button:hover { background: #193324; color: #fff; }
.ms-inline-error { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #74423a; border-radius: 8px; background: #3b2220; color: #f1b3a4; font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ms-messages .ms-inline-error { margin-top: 14px; }

/* Empty inbox */
.ms-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 24px; border: 1px dashed #3b414a; border-radius: 14px; background: radial-gradient(70% 60% at 50% 30%, #1d1611 0%, transparent 70%), #121518; }
.ms-empty svg { color: var(--ms-orange); margin-bottom: 16px; }
.ms-empty h2 { font-size: 22px; margin: 0 0 10px; }
.ms-empty p { max-width: 440px; color: var(--ms-soft); margin: 0 0 22px; font-size: 13px; }
.ms-empty .btn { min-height: 44px; }

/* Dialogs */
.ms-dialog .field { margin-bottom: 14px; }
.ms-dialog .field-label { font-size: 11px; }

/* Responsive */
@media (max-width: 1180px) { .ms-shell { grid-template-columns: 300px minmax(0, 1fr); } .ms-heading-stats { display: none; } }
@media (max-width: 900px) { .ms-shell { grid-template-columns: 270px minmax(0, 1fr); } .ms-thread-actions .btn { padding: 8px 9px; } .ms-kbd { display: none; } }
@media (max-width: 760px) {
  .ms-heading { flex-direction: column; align-items: stretch; gap: 14px; }
  .ms-heading-side { width: 100%; }
  .ms-new-button { flex: 1; }
  .ms-page[data-pane="thread"] .ms-heading { display: none; }
  .ms-shell { grid-template-columns: minmax(0, 1fr); height: auto; scroll-margin-top: 8px; }
  .ms-shell[data-pane="list"] .ms-thread-pane { display: none; }
  .ms-shell[data-pane="thread"] .ms-list-pane { display: none; }
  .ms-shell[data-pane="thread"] { height: calc(100dvh - 84px); min-height: 480px; }
  .ms-list-pane { border-right: 0; }
  .ms-list { overflow: visible; }
  .ms-list-tools { padding: 14px 14px 12px; }
  .ms-filters { flex-wrap: nowrap; overflow-x: auto; margin: 12px -14px 0; padding: 0 14px 2px; scrollbar-width: none; }
  .ms-filters::-webkit-scrollbar { display: none; }
  .ms-filter { min-height: 44px; padding: 6px 13px; flex-shrink: 0; }
  .ms-row { min-height: 78px; padding: 13px 14px; }
  .ms-back { display: inline-flex; width: 44px; padding: 0; justify-content: center; flex-shrink: 0; }
  .ms-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ms-thread-head .ms-avatar-lg { display: none; }
  .ms-thread-title p .ms-res-chip { white-space: normal; }
  .ms-thread-head { padding: 10px 12px; gap: 10px; }
  .ms-thread-head .ms-avatar-lg { width: 40px; height: 40px; font-size: 13px; }
  .ms-thread-title { flex: 1 1 0; }
  .ms-thread-title h2 { font-size: 16px; margin-bottom: 3px; }
  .ms-thread-actions { width: 100%; gap: 6px; }
  .ms-thread-actions .btn { min-height: 44px; flex: 1 1 auto; padding: 8px 10px; }
  .ms-messages { padding: 16px 12px; }
  .ms-bubble { max-width: 88%; }
  .ms-composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .ms-quick-chip { min-height: 44px; }
  .ms-send { min-width: 48px; padding: 10px 14px; }
  .ms-send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ms-icon-button, .ms-phone { min-height: 44px; min-width: 44px; }
  .ms-empty { padding: 44px 18px; }
}
@media (max-width: 360px) { .ms-heading-copy > p { font-size: 12px; } .ms-row { gap: 10px; padding: 12px; } .ms-avatar { width: 38px; height: 38px; font-size: 11px; } .ms-res-chip { font-size: 9.5px; } }
@media (prefers-reduced-motion: reduce) { .ms-row, .ms-filter, .ms-quick-chip { transition: none; } }