.order-comment-entry { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; margin:20px 0; border:1px solid #dfe5ec; border-radius:16px; background:var(--surface, #fff); min-width:0; font-size:17px; font-weight:600; line-height:1.75; }
.order-comment-entry > div { display:grid; gap:7px; min-width:0; }
.order-comment-entry code, .order-comment-entry small { overflow-wrap:anywhere; font-size:15px; color:#596579; }
.order-comment-entry button { flex-shrink:0; }
dialog.order-comments-dialog { box-sizing:border-box; width:min(720px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 48px); padding:0; margin:auto; border:1px solid #dfe5ec; border-radius:22px; background:#fff; color:#243044; font-size:17px; font-weight:500; line-height:1.75; box-shadow:0 24px 90px #15263b30; overflow:auto; }
.order-comments-dialog::backdrop { background:#15263b66; backdrop-filter:blur(3px); }
.order-comments-content { padding:26px; min-width:0; }
.order-comments-heading, .order-comment-toolbar, .order-comments-dialog footer, .order-comment header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.order-comments-heading h2 { margin:6px 0 0; font-size:24px; font-weight:700; }
.order-comments-dialog button { font:inherit; font-size:17px; font-weight:650; border:1px solid #d7dee7; border-radius:10px; background:#f6f8fb; color:inherit; padding:9px 14px; cursor:pointer; min-height:48px; }
.order-comments-dialog button:disabled { opacity:.5; cursor:wait; }
.order-comments-dialog button:focus-visible, .order-comments-dialog textarea:focus-visible { outline:3px solid #93b6e6; outline-offset:3px; }
.order-comments-dialog [type=submit] { color:white; background:var(--primary, #375882); border-color:transparent; }
.order-comments-dialog p, .order-comment code { overflow-wrap:anywhere; }
.order-comment-note, .order-comment-toolbar small, .order-comments-dialog footer small, .order-comment time, .order-comment code { color:#596579; font-size:15px; line-height:1.7; }
.order-comments-dialog [data-comment-list] { list-style:none; margin:12px 0 20px; padding:0; }
.order-comment { padding:18px 0; border-bottom:1px solid #e6ebf0; }
.order-comment header { margin-bottom:8px; font-size:17px; font-weight:650; }
.order-comment p { white-space:pre-wrap; line-height:1.85; margin:12px 0 0; font-size:18px; font-weight:600; }
.order-comments-dialog form { border-top:1px solid #e6ebf0; padding-top:20px; margin-top:20px; }
.order-comments-dialog textarea { box-sizing:border-box; display:block; width:100%; min-height:110px; resize:vertical; border:1px solid #cad4e1; border-radius:12px; padding:12px; margin:10px 0; font:inherit; font-size:18px; font-weight:500; line-height:1.8; }
.order-comments-dialog [data-comment-status] { font-size:15px; line-height:1.7; }
.order-comments-dialog [data-comment-discard] { padding:14px; margin-top:16px; background:#fff4df; border-radius:12px; }
.order-comments-dialog [hidden] { display:none !important; }
@media (max-width:560px) { .order-comments-content { padding:18px; } .order-comment-entry { align-items:stretch; flex-direction:column; padding:16px; } .order-comment-entry button { width:100%; } .order-comment header { align-items:flex-start; flex-direction:column; gap:3px; } }

.order-comments-heading > div, .order-comment-toolbar > div { min-width:0; }
.order-comments-dialog label { font-size:17px; font-weight:600; }
.order-comment-note, .order-comment-toolbar small, .order-comments-dialog footer small, .order-comment time, .order-comment code { font-weight:500; }
@media (max-width:560px) { .order-comments-dialog footer > button { flex:1 1 140px; } .order-comments-heading { align-items:flex-start; } .order-comments-heading > div { flex:1 1 170px; } }