.mp-phone { width: 330px; max-width: 100%; height: 600px; flex: 0 0 auto; border: 8px solid #142536; border-radius: 40px; background: #f8f9fc; box-shadow: 0 16px 40px #233b5726; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; color: #182c41; font: 15px/1.5 Arial,sans-serif; }
.mp-status { display: flex; align-items: center; justify-content: space-between; padding: 9px 19px 4px; font-size: 11px; font-weight: 700; }
.mp-speaker { width: 65px; height: 15px; background: #142536; border-radius: 20px; }
.mp-phone-header { position: relative; display: flex; align-items: center; flex-direction: column; gap: 3px; padding: 12px 25px 15px; border-bottom: 1px solid #d8e0e9; background: #eef2f7; }
.mp-phone-header strong { max-width: 100%; overflow-wrap: anywhere; }
.mp-phone-header > span:last-child { font-size: 11px; color: #60738a; }
.mp-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: #7b8fa7; }
.mp-back { position: absolute; left: 12px; top: 30px; color: #1765bf; font-size: 32px; }
.mp-thread { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 14px 12px; }
.mp-timestamp { display: block; text-align: center; color: #728196; margin-bottom: 16px; font-size: 10px; }
.mp-bubble { box-sizing: border-box; display: block; width: 94%; padding: 12px 14px; margin: 0; border: 0; border-radius: 18px 18px 18px 4px; background: #e0e8f0; color: #182c41; white-space: pre-wrap; overflow-wrap: anywhere; font: 16px/1.55 Arial,sans-serif; text-align: left; }
textarea.mp-message-edit { resize: none; overflow: hidden; min-height: 120px; max-height: none; box-shadow: none; }
.mp-message-edit:focus { outline: 2px solid #3784d3; outline-offset: 2px; }
.mp-phone-recipient { border-top: 1px solid #dae2eb; padding: 8px 14px; font-size: 11px; color: #586c83; overflow-wrap: anywhere; }
.mp-home { flex-shrink: 0; margin: 10px auto 7px; height: 4px; width: 100px; background: #142536; border-radius: 6px; }
.mp-cost { border: 1px solid #b9d6ee; border-radius: 12px; background: #eef7ff; padding: 15px; display: grid; gap: 8px; overflow-wrap: anywhere; }
.mp-cost strong { font-size: 18px; color: #114f84; }
.mp-cost small { color: #526d84; line-height: 1.5; }
.mp-limit { color: #9a4800 !important; }
.mp-preview-dialog { width: min(960px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 0; border: 1px solid #d5dfeb; border-radius: 18px; box-sizing: border-box; }
.mp-preview-dialog::backdrop { background: #172b4c99; }
.mp-preview-card { padding: 22px; overflow: auto; max-height: calc(100vh - 28px); box-sizing: border-box; }
.mp-preview-card > header { display: flex; gap: 15px; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.mp-preview-card h2 { margin: 0 0 7px; }
.mp-preview-card header p { margin: 0; color: #62748a; }
.mp-preview-card footer { margin-top: 18px; text-align: right; }
.mp-preview-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 24px; align-items: center; }
.mp-preview-layout aside { display: grid; gap: 15px; }
.mp-email-meta { display: grid; gap: 7px; border: 1px solid #dce5f0; padding: 14px; border-radius: 12px 12px 0 0; overflow-wrap: anywhere; }
.mp-email-frame { display: block; width: 100%; height: 600px; max-height: 65vh; border: 1px solid #dce5f0; box-sizing: border-box; }
.mp-queue-view { width: 100%; min-width: 0; }
.mp-queue-navigation { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: end; margin: 12px 0 24px; }
.mp-queue-navigation label { min-width: 0; display: grid; gap: 7px; }
.mp-queue-navigation select { width: 100%; max-width: 100%; }
.mp-queue-content { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 28px; align-items: start; }
.mp-queue-details { display: grid; gap: 15px; min-width: 0; padding: 20px; background: #f8fbff; border: 1px solid #d6e2ef; border-radius: 16px; overflow-wrap: anywhere; }
.mp-queue-details h3, .mp-queue-details p { margin: 0; }
.mp-queue-badges, .mp-queue-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-queue-badges span { border-radius: 20px; padding: 5px 10px; font-size: 12px; background: #e4edf7; color: #27507a; }
@media (max-width: 760px) { .mp-preview-layout,.mp-queue-content { grid-template-columns: minmax(0,1fr); } .mp-phone { margin-inline: auto; } .mp-preview-card { padding: 12px; } .mp-queue-navigation { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .mp-queue-navigation label { grid-column: 1 / -1; grid-row: 1; } .mp-queue-navigation button { min-width: 0; white-space: normal; } .mp-queue-details { padding: 14px; } }