/* Message layout shared by system notifications and repair conversations. */
.notification-list{display:flex;flex-direction:column;gap:16px;padding-top:16px}
#customer .notification-message,#owner .notification-message{display:block;padding:18px;border:1px solid #d4dfec;border-radius:12px;background:#f7f9fc;margin:0}
#customer .notification-message.unread,#owner .notification-message.unread{border-left:4px solid #2563eb;background:#eef5ff}
.notification-message>strong{display:block;font-size:16px;line-height:1.4}
.notification-message p,.chat-message p{font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 18px}
.notification-message footer{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.notification-message footer>span{font-size:13px;color:#53647a}.notification-message footer button{margin:0;min-height:44px}
.notification-message time,.chat-message time,.conversation-preview time{display:block;font-size:12px;line-height:1.5;color:#526078;text-align:right;margin-left:auto}
#customer .appointment-notice.notification-message:last-child{padding-bottom:18px;border-bottom:1px solid #d4dfec}
.message-toolbar{display:flex;justify-content:flex-end;margin:12px 0}.message-toolbar button{min-height:44px}
.message-dialog{width:min(640px,calc(100% - 24px));max-height:90dvh;border:1px solid #cbd5e1;border-radius:16px;padding:22px;color:#152d47;box-sizing:border-box}
.message-dialog::backdrop{background:#10243e88}.message-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.message-heading h2{font-size:22px;margin:0;overflow-wrap:anywhere}.message-heading button{margin:0;min-height:44px}
#messageError{color:#9b2525;font-size:16px;line-height:1.5}#messageError:empty{display:none}
#messageHistory{display:flex;flex-direction:column;gap:16px;max-height:42dvh;overflow-y:auto;padding:14px 4px;overscroll-behavior:contain}
.chat-message{align-self:flex-start;max-width:90%;min-width:45%;border:1px solid #d4dfec;border-radius:14px;padding:14px 16px;background:#f3f6fa;box-sizing:border-box}.chat-message.mine{align-self:flex-end;background:#e9f2ff;border-color:#b6ceee}.chat-message strong{font-size:14px}
#messageForm label{font-size:14px;font-weight:600}#messageText{box-sizing:border-box;width:100%;font:16px/1.5 system-ui;margin:8px 0;padding:12px;border:1px solid #b9c6d8;border-radius:8px}#messageForm .primary{min-height:46px}
.conversation-preview{display:block;width:100%;text-align:left;background:#f7f9fc;color:#152d47;border:1px solid #d4dfec;border-radius:12px;padding:16px;margin:12px 0;cursor:pointer;font-size:16px}.conversation-preview strong,.conversation-preview span{display:block;margin-bottom:8px}.conversation-preview p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
#currentRepairStatus{border-top:4px solid #2563eb}#currentRepairStatus .status-track{margin-bottom:14px}#currentRepairStatus .status-update{white-space:pre-wrap;line-height:1.6}#customer .tabs{flex-wrap:wrap}
@media(max-width:480px){.message-dialog{padding:16px}.chat-message{max-width:95%}.notification-message footer{gap:6px}#currentRepairStatus .status-track:not(.special){grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}#currentRepairStatus .status-step{display:flex;flex-direction:column;text-align:center;gap:6px}#currentRepairStatus .status-step small{font-size:12px}#currentRepairStatus .status-step span{width:26px;height:26px}}

#currentRepairStatus .status-step{min-width:0}#currentRepairStatus .status-step small{overflow-wrap:anywhere}@media(max-width:360px){#currentRepairStatus .status-track:not(.special){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}}