.mail-layout{display:grid;grid-template-columns:280px minmax(0,1fr);border:1px solid var(--line);border-radius:15px;background:white;overflow:hidden;min-height:610px}.mail-customers{border-right:1px solid var(--line);background:#fbfcf8}.mail-search{padding:20px 17px;border-bottom:1px solid var(--line)}.mail-search .search{width:100%;background:white}.customer-list{padding:9px}.customer-button{display:block;width:100%;border:0;border-radius:9px;text-align:left;background:none;padding:17px 13px;color:var(--ink);margin-bottom:3px}.customer-button.selected{background:#eaf1e5}.customer-button strong{display:block;font-size:13px}.customer-button span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.customer-button small{font-size:10px;color:#839377}.mail-head{padding:22px 27px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.mail-head h2{margin:0 0 4px;font-size:21px}.mail-head p{font-size:11px}.mail-thread{height:345px;overflow:auto;padding:23px 28px;background:#fff}.mail-day{font-size:10px;color:#95a189;text-align:center;margin-bottom:20px}.mail-message{max-width:78%;margin:0 0 20px}.mail-message.team{margin-left:auto}.mail-message .meta{font-size:10px;color:#86967a;margin-bottom:5px}.mail-message.team .meta{text-align:right}.mail-bubble{background:#f1f4ec;border:1px solid #edf0e7;border-radius:0 12px 12px 12px;padding:13px 16px}.mail-message.team .mail-bubble{background:#eaf1e4;border-color:#e4ecdc;border-radius:12px 0 12px 12px}.mail-bubble p{font-size:13px;color:#42573a;line-height:1.65;white-space:pre-wrap}.case-chip{display:inline-block;font-size:9px;color:#778e67;border:1px solid #d5e0ca;border-radius:4px;padding:2px 6px;margin-bottom:8px}.mail-compose{padding:18px 26px 20px;border-top:1px solid var(--line);background:#fcfdf9}.mail-compose label{font-size:11px;color:#718366}.mail-compose select{padding:7px 10px;font-size:11px;margin-left:10px;max-width:80%}.mail-compose textarea{display:block;margin:12px 0;width:100%;min-height:76px;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:13px;resize:vertical}.mail-actions{display:flex;justify-content:space-between;align-items:center;gap:15px}.mail-actions .secondary{font-size:11px;padding:9px 13px}.mail-upload-hint{font-size:10px;color:#8b997e;margin-top:10px}.mail-feedback{font-size:11px;color:#637d52;margin-top:8px}.mail-feedback.error{color:#a34a3d}.previews{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.image-preview{border:1px solid var(--line);border-radius:8px;padding:7px;display:flex;gap:10px;align-items:center;background:white}.image-preview img{width:50px;height:50px;object-fit:contain}.image-preview small{display:block;font-size:10px;color:#87947b}.image-preview strong{font-size:11px;font-weight:500}.image-preview button{border:0;background:#f1f4ed;border-radius:50%;height:24px;width:24px;margin-left:8px}.attachment{display:inline-block;border:0;background:none;cursor:pointer;margin:10px 8px 0 0;padding:0;text-align:left;vertical-align:top}.attachment img{width:160px;height:110px;object-fit:contain;background:white;border:1px solid var(--line);border-radius:7px}.attachment small{display:block;color:#87977a;font-size:9px;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-dialog{border:1px solid var(--line);border-radius:15px;padding:20px;max-width:90vw;max-height:90vh}.image-dialog::backdrop{background:#19342888}.image-dialog img{max-width:80vw;max-height:70vh;display:block}.image-dialog .secondary{margin-top:15px}.mail-customer-view{grid-template-columns:1fr;max-width:920px;margin:auto}.mail-customer-view .mail-thread{height:390px}.customer-notice{font-size:11px;background:#edf3e6;border:1px solid #dfe9d6;border-radius:7px;padding:10px 14px;margin-bottom:20px;color:#6c825b}.mail-mode-link{font-size:11px;color:#7d906c}.mail-empty{font-size:12px;color:#91a080;padding:25px;text-align:center}.img-missing{font-size:10px;color:#929c87}.mail-case-link{font-size:11px;color:var(--g)}@media(max-width:800px){.mail-layout{grid-template-columns:215px minmax(0,1fr)}.mail-message{max-width:92%}.mail-compose,.mail-head,.mail-thread{padding-left:18px;padding-right:18px}.mail-customer-view{grid-template-columns:1fr}.mail-head{flex-wrap:wrap}}@media(max-width:600px){.mail-layout{grid-template-columns:1fr}.mail-customers{border-right:0;border-bottom:1px solid var(--line)}.customer-list{display:flex;overflow:auto;max-height:110px}.customer-button{flex:0 0 170px;padding:10px}.mail-search{padding:12px}.mail-thread{height:340px}.mail-head{padding:17px}.mail-compose select{margin:7px 0;display:block;max-width:100%;width:100%}.mail-upload-hint{line-height:1.6}.image-preview{max-width:100%}.attachment img{width:135px}.mail-customer-view{grid-template-columns:1fr}}
.mail-case-select{padding:13px 27px;background:#f5f8f0;border-bottom:1px solid var(--line)}.mail-case-select label{font-size:11px;color:#738568;display:block;margin-bottom:6px}.mail-case-select select{width:100%;max-width:420px}.mail-case-select p{font-size:10px;margin-top:7px;color:#89977e}.mail-recipient{font-size:11px;color:#627b51;margin-bottom:8px}

.mail-message.incoming .mail-bubble{background:#edf2f7;border-color:#e1e8f0}.mail-message.incoming .mail-bubble p{color:#344e60}.mail-message.outgoing .mail-bubble{background:#eaf1e4;border-color:#e4ecdc}