.chat-workspace{display:grid;grid-template-columns:minmax(245px,300px) minmax(300px,1fr) 260px;min-height:65vh;gap:14px}.chat-pane{min-width:0;border:1px solid var(--line,#343235);border-radius:12px;background:var(--panel,#1b1c20);overflow:hidden}.chat-pane-head{padding:16px;border-bottom:1px solid var(--line,#343235)}.chat-pane-head input,.chat-pane-head select{width:100%;margin-top:10px}.chat-list{max-height:64vh;overflow:auto}.chat-conversation{display:block;text-align:left;width:100%;padding:15px;border:0;border-bottom:1px solid #343235;background:transparent;color:inherit;cursor:pointer}.chat-conversation:hover,.chat-conversation.selected{background:rgba(203,168,84,.12)}.chat-conversation.selected{box-shadow:inset 3px 0 #cba854}.chat-list-line{display:flex;justify-content:space-between;gap:8px}.chat-conversation p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:9px 0;color:#bbb}.chat-conversation small,.chat-message small,.chat-order-card small{color:#aaa;font-size:11px}.chat-unread{background:#cba854;color:#201d16;padding:2px 7px;border-radius:12px}.chat-thread{display:flex;flex-direction:column}.chat-customer{background:none;border:0;padding:0;color:#dfc178;font:inherit;font-weight:700;cursor:pointer}.chat-messages{height:48vh;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}.chat-message{max-width:85%;padding:12px 14px;background:#2b2c31;border-radius:12px;align-self:flex-start;overflow-wrap:anywhere}.chat-message div{white-space:pre-wrap;margin-top:5px}.chat-message.staff{align-self:flex-end;background:#3a3324;border:1px solid #655637}.chat-compose{border-top:1px solid #343235;padding:14px}.chat-compose textarea{width:100%;min-height:80px;resize:vertical}.chat-compose .chat-compose-actions{display:flex;justify-content:space-between;gap:8px;margin-top:8px}.chat-details{padding:17px}.chat-details label{display:block;margin:16px 0}.chat-details select,.chat-details input[type=text]{width:100%;margin-top:7px}.chat-details .btn{margin-bottom:10px}.chat-details p{line-height:1.6;color:#b7b4ad;font-size:12px}.chat-order-card{border:1px solid #655637;border-radius:9px;padding:12px;margin-top:12px;display:grid;gap:7px}.chat-alert{color:#e7b1a3;margin-bottom:12px;min-height:20px}.chat-pagination{display:flex;justify-content:space-between;align-items:center;padding:12px;font-size:12px}@media(max-width:1200px){.chat-workspace{grid-template-columns:260px minmax(300px,1fr)}.chat-details{grid-column:1/-1}}@media(max-width:700px){.chat-workspace{display:flex;flex-direction:column}.chat-list{max-height:250px}.chat-messages{height:45vh}}
.chat-attachment{display:block;margin-top:8px;padding:0;border:1px solid #444;border-radius:9px;background:#18191c;overflow:hidden;cursor:zoom-in;max-width:100%}
.chat-attachment img{display:block;max-width:min(260px,100%);max-height:260px;width:auto;height:auto;object-fit:contain}
.chat-attachment.failed{padding:12px 14px;color:#e7b1a3;font:inherit;font-size:12px;cursor:pointer}
.chat-image-draft{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:8px;border:1px dashed #655637;border-radius:9px}
.chat-image-draft img{width:64px;height:64px;object-fit:cover;border-radius:6px;cursor:zoom-in}
.chat-image-draft[hidden],.chat-image-draft img[hidden]{display:none}
.chat-image-draft div{flex:1;min-width:0;display:grid;gap:3px}
.chat-image-draft small{color:#aaa;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-compose-actions .note{margin-right:auto}
.chat-image-viewer{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:48px 24px 24px}
.chat-image-viewer[hidden]{display:none}
.chat-image-viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;cursor:default}
.chat-image-viewer button{position:absolute;top:12px;right:16px}
/* Full-width inbox with a temporary conversation drawer. */
.chat-workspace{display:block;min-height:65vh}
.chat-list-toolbar{display:flex;align-items:center;gap:16px;padding:18px 20px}
.chat-list-toolbar strong{margin-right:auto;white-space:nowrap;color:#dfc178}
.chat-list-toolbar strong .note{display:block;margin-top:5px;font-weight:400;color:#aaa}
.chat-list-toolbar input{width:min(380px,40%);margin:0;min-height:40px}
.chat-list-toolbar select{width:160px;margin:0;min-height:40px}
.chat-list{max-height:66vh;min-height:220px;overflow:auto;scrollbar-color:#655637 #1b1c20}
.chat-conversation{display:flex;align-items:center;gap:14px;padding:0 18px;min-height:80px;border-bottom:1px solid rgba(203,168,84,.13)}
.chat-row-open{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,2fr) 132px 100px minmax(90px,.6fr);gap:16px;align-items:center;flex:1;min-width:0;padding:12px 0;text-align:left;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.chat-row-open>span{min-width:0}
.chat-row-customer,.chat-row-preview,.chat-row-status{display:grid;gap:4px}
.chat-row-customer strong{font-size:14px;color:#e5d7b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-customer small,.chat-row-preview>span,.chat-row-staff{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-customer small{font-size:11px;line-height:1.35;color:#aaa}
.chat-row-id{max-width:100%;font-variant-numeric:tabular-nums}
.chat-row-preview small{font-size:11px;color:#aaa}
.chat-row-preview>span{font-size:13px;color:#d0cbc0}
.chat-row-time{font-size:11px;color:#aaa;line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.chat-row-staff{font-size:12px;color:#c1b59d}
.chat-status{justify-self:start;border:1px solid #655637;border-radius:5px;padding:4px 9px;font-size:11px;color:#dfc178;background:rgba(203,168,84,.06)}
.chat-unread{justify-self:start;font-size:10px}
.chat-row-pin{flex:0 0 62px;min-width:62px;white-space:nowrap}
.chat-pagination{padding:14px 20px;background:rgba(203,168,84,.025)}
.chat-row-open:focus-visible,.chat-row-pin:focus-visible{outline:2px solid #dfc178;outline-offset:3px}
.chat-drawer{position:fixed;inset:0;z-index:40;background:rgba(6,7,9,.72);display:flex;justify-content:flex-end}
.chat-drawer[hidden]{display:none}
.chat-drawer-panel{width:min(1000px,96vw);height:100dvh;background:#18191d;border-left:1px solid #655637;box-shadow:-24px 0 90px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:auto}
.chat-drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid #655637;color:#dfc178}
.chat-drawer-content{display:grid;grid-template-columns:minmax(0,1fr) 270px;flex:1;min-height:0;gap:0}
.chat-drawer .chat-pane{border:0;border-radius:0}
.chat-drawer .chat-thread{min-height:0;border-right:1px solid #343235}
.chat-drawer .chat-messages{height:auto;min-height:180px;flex:1;overflow:auto}
.chat-drawer .chat-details{overflow:auto;grid-column:auto}
.chat-compose-actions{flex-wrap:wrap;align-items:center}
@media(max-width:1100px){
 .chat-row-open{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 100px 95px;gap:12px}
 .chat-row-staff{grid-column:2;grid-row:2}
 .chat-row-preview small{display:none}
 .chat-row-open{padding:12px 0;row-gap:5px}
 .chat-row-customer{grid-row:1/3}
 .chat-row-time,.chat-row-status{grid-row:1/3}
}
@media(max-width:700px){
 .chat-list-toolbar{flex-wrap:wrap;gap:12px;padding:16px}
 .chat-list-toolbar strong{width:100%}
 .chat-list-toolbar input{width:auto;flex:1 1 150px;min-width:0;max-width:100%}
 .chat-list-toolbar select{width:125px}
 .chat-list{max-height:70vh}
 .chat-conversation{padding:0 14px;gap:10px}
 .chat-row-open{grid-template-columns:minmax(0,1fr) 80px;gap:6px 8px;padding:12px 0}
 .chat-row-customer{grid-column:1;grid-row:1}
 .chat-row-preview{grid-column:1;grid-row:2}
 .chat-row-time{grid-column:2;grid-row:1}
 .chat-row-status{grid-column:2;grid-row:2/4}
 .chat-row-staff{grid-column:1;grid-row:3}
 .chat-row-pin{flex-basis:50px;min-width:50px;padding:8px}
 .chat-drawer-panel{width:100%}
 .chat-drawer-content{display:flex;flex-direction:column;overflow:auto;min-height:0}
 .chat-drawer .chat-thread{flex:none;border-right:0}
 .chat-drawer .chat-messages{height:45dvh;flex:none}
 .chat-drawer .chat-details{overflow:visible;border-top:1px solid #655637}
}
.chat-drawer .chat-alert{flex:none;margin:0;padding:0 22px}
.chat-drawer .chat-alert:not(:empty){padding:12px 22px}
@media(prefers-reduced-motion:no-preference){.chat-drawer-panel{animation:chatDrawerIn .18s ease-out}@keyframes chatDrawerIn{from{transform:translateX(24px);opacity:.5}to{transform:translateX(0);opacity:1}}}

@media(max-width:380px){
 .chat-conversation{padding:0 10px;gap:8px}
 .chat-row-open{grid-template-columns:minmax(0,1fr)}
 .chat-row-customer,.chat-row-preview,.chat-row-time,.chat-row-status,.chat-row-staff{grid-column:1;grid-row:auto}
 .chat-row-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
 .chat-pagination{padding:12px 10px;gap:8px;flex-wrap:wrap}
}