/* The sender's portal sets the message colour in every TRIQ chat view. */
.chat-message.role-oem,.o-chat-room .chat-message.role-oem{background:#e7f2ff;border-color:#b8d5fa;color:#173b67}
.chat-message.role-processor,.o-chat-room .chat-message.role-processor{background:#e6f5e9;border-color:#b8dfc3;color:#174a32}
.chat-message.role-employee,.o-chat-room .chat-message.role-employee{background:#fff0e1;border-color:#f3cfaa;color:#713b17}
.chat-message.role-other,.o-chat-room .chat-message.role-other{background:#f1f3f7;border-color:#d9e0e9;color:#33445d}
.chat-message.role-oem .chat-message-head,.chat-message.role-oem .chat-message-head strong,.chat-message.role-oem small{color:#173b67}
.chat-message.role-processor .chat-message-head,.chat-message.role-processor .chat-message-head strong,.chat-message.role-processor small{color:#174a32}
.chat-message.role-employee .chat-message-head,.chat-message.role-employee .chat-message-head strong,.chat-message.role-employee small{color:#713b17}
.chat-message.role-other .chat-message-head,.chat-message.role-other .chat-message-head strong,.chat-message.role-other small{color:#33445d}
.chat-message .chat-message-actions .btn{background:#fff;color:#243d56;border:1px solid #ccdae7}

/* Keep the redesigned composer and the attach button on one baseline. */
.o-chat-room,.o-composer,.o-composer #biz-chat-message{min-width:0}
.o-composer{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:end;gap:8px;padding:10px 12px}
.o-composer .o-attach-menu{width:40px;min-width:40px;align-self:end;margin:0}
.o-composer .o-attach-menu>summary{width:40px;height:40px;line-height:1}
.o-composer #biz-chat-message{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:end;column-gap:8px;width:100%;padding:7px 9px;flex:none}
.o-composer #biz-chat-message .fields{display:contents}
.o-composer #biz-chat-message .field.full{grid-column:1;min-width:0;margin:0}
.o-composer #biz-chat-message textarea{box-sizing:border-box;width:100%;min-height:44px;height:44px;max-height:160px;margin:0}
.o-composer #biz-chat-message .form-footer{grid-column:2;align-self:end;margin:0;padding:0}
.o-composer #biz-chat-message .form-footer button{width:40px;height:40px;min-width:40px;min-height:40px;margin:0}
.o-composer #biz-chat-message .chat-pending,.o-composer #biz-chat-message .chat-reply-context{grid-column:1/-1;order:-1;width:100%;min-width:0}
.o-composer .o-attach-popover{box-sizing:border-box;width:min(320px,calc(100vw - 52px));max-width:calc(100vw - 52px);padding:12px;overflow-x:hidden;overflow-y:auto}
.o-attach-popover *{box-sizing:border-box;min-width:0}
.o-attach-popover #biz-chat-upload,.o-attach-popover #biz-chat-upload .fields,.o-attach-popover #biz-chat-upload input[type=file],.o-attach-popover .card{width:100%;max-width:100%}
.o-attach-popover #biz-chat-upload input[type=file]{overflow:hidden;text-overflow:ellipsis}
.o-main .o-attachment-choices,.processor-reference .o-main .o-attachment-choices{display:grid;grid-template-columns:1fr;gap:3px;padding:0}
.o-main .o-attachment-choices .btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:left;padding:6px 8px}
.o-attachment-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#e7f2ff;color:#225da3}
.o-attachment-choices .btn:nth-child(2) .o-attachment-icon{background:#e6f5e9;color:#247248}
.o-attachment-choices .btn:nth-child(3) .o-attachment-icon{background:#fff0e1;color:#a65a20}
.o-attachment-choices .btn:nth-child(4) .o-attachment-icon{background:#f1eafa;color:#714ab1}
.o-attachment-icon .o-icon{width:18px;height:18px}

/* Employee and Admin use the shared attachment panel. */
.chat-attachment-menu{min-width:0;max-width:100%;overflow-x:hidden}
.chat-attachment-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.chat-attachment-choice{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;text-align:left}
.chat-attachment-choice svg{width:20px;height:20px;flex:none;color:#295d98}
.chat-attachment-choice:nth-child(2) svg{color:#247248}
.chat-attachment-choice:nth-child(3) svg{color:#a65a20}
.chat-attachment-choice:nth-child(4) svg{color:#714ab1}
.chat-attachment-menu #biz-chat-upload,.chat-attachment-menu #biz-chat-upload input[type=file]{min-width:0;max-width:100%}
.chat-attachment-menu #biz-chat-upload input[type=file]{width:100%}
@media(max-width:600px){.o-composer{padding:8px;gap:6px}.o-composer #biz-chat-message{padding:6px}.chat-attachment-choices{grid-template-columns:1fr 1fr}}

/* A held ticket can only be resumed by its service team. */
.o-main .btn.on-hold,.o-main .btn.on-hold:disabled{background:#e8ebef;border:1px solid #c9d0da;color:#596473;opacity:1;box-shadow:none}
.o-main .btn.on-hold:not(:disabled):hover{background:#dce2e8;color:#344253}
.o-chat-paused{margin:0;padding:16px;border-top:1px solid #e6eaf0;background:#f6f7f9;color:#596473}
.o-progress-dialog #biz-ticket-hold{display:grid;gap:11px}
.o-progress-dialog #biz-ticket-hold textarea{min-height:95px;width:100%;box-sizing:border-box}

/* Individual message receipts are visible only to the sender. */
.chat-receipt-line{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:8px;font-size:12px;color:#475569}
.chat-receipt-link{border:0;background:none;padding:3px 2px;color:#1764ca;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.chat-receipt-link:hover{color:#104891}
.chat-receipt-link:focus-visible,.chat-receipt-close:focus-visible{outline:3px solid #1764ca;outline-offset:3px}
/* Keep the receipt list next to the selected message and inside the chat pane. */
.chat-main{position:relative}
.chat-receipts-popover{position:absolute;z-index:35;box-sizing:border-box;width:min(330px,calc(100% - 16px));max-height:min(290px,calc(100% - 16px));margin:0;padding:0;border:1px solid #ccd8e7;border-radius:11px;background:#fff;color:#243349;box-shadow:0 12px 32px rgba(21,44,78,.22);overflow:auto}
.chat-receipt-heading{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #e3e9f2;background:#f6f8fb}
.chat-receipt-heading h2{margin:0;color:#243349;font-size:14px;line-height:1.4}
.chat-receipt-close{display:grid;place-items:center;width:26px;height:26px;border:1px solid #d1deec;border-radius:7px;background:#fff;color:#243349;font-size:18px;cursor:pointer}
.chat-receipt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.chat-receipt-grid section{min-width:0;padding:10px 9px 12px}
.chat-receipt-grid section+section{border-left:1px solid #e3e9f2}
.chat-receipt-grid h3{margin:0 0 9px;color:#1c2c43;font-size:12px;font-weight:700}
.chat-receipt-people{display:grid;gap:7px;list-style:none;margin:0;padding:0}
.chat-receipt-people li{display:flex;align-items:center;gap:10px;min-width:0}
.chat-receipt-avatar{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#e8f2ff;color:#194f91;font-size:13px;font-weight:700}
.chat-receipt-people strong,.chat-receipt-people small{display:block;overflow-wrap:anywhere;line-height:1.35}
.chat-receipt-people strong{color:#243349;font-size:13px}
.chat-receipt-people small{color:#536379;font-size:11px}
.chat-receipt-empty{margin:0;color:#637388;font-size:13px}
@media(max-width:500px){.chat-receipt-grid{grid-template-columns:1fr}.chat-receipt-grid section+section{border-left:0;border-top:1px solid #e3e9f2}}