.account.customer-message-account-index .column.main, .account.customer-message-order-contact .column.main { background: transparent; padding: 0 !important; } .esun-conversation-layout { background: #fff; border-radius: 7px; display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 720px; overflow: hidden; } .esun-conversation-layout.is-order-conversation { display: block; } .esun-conversation-sidebar { border-right: 1px solid #e1e1e1; min-width: 0; } .esun-conversation-new { display: block; margin: 22px; text-align: center; } .esun-conversation-thread { border-top: 1px solid #ededed; color: #333; display: block; min-height: 78px; padding: 17px 48px 17px 22px; position: relative; text-decoration: none; } .esun-conversation-thread:hover, .esun-conversation-thread.is-active { background: #f3faf6; color: #222; text-decoration: none; } .esun-conversation-thread strong, .esun-conversation-thread span, .esun-conversation-thread small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .esun-conversation-thread span, .esun-conversation-thread small { color: #999; font-size: 13px; margin-top: 5px; } .esun-conversation-thread b { background: #18aa59; border-radius: 99px; color: #fff; font-size: 12px; min-width: 19px; padding: 2px 6px; position: absolute; right: 17px; text-align: center; top: 18px; } .esun-conversation-main { display: flex; flex-direction: column; min-width: 0; } .esun-conversation-main > header { align-items: center; border-bottom: 1px solid #e1e1e1; display: flex; justify-content: space-between; padding: 24px 30px; } .esun-conversation-main > header h1 { font-size: 27px; font-weight: 500; margin: 0; } .esun-conversation-main > header a { color: #18aa59; } .esun-conversation-messages { flex: 1; max-height: 650px; min-height: 420px; overflow-y: auto; padding: 30px; } .esun-conversation-entry { margin-bottom: 27px; max-width: 72%; } .esun-conversation-entry.is-customer { margin-left: auto; } .esun-conversation-entry > small { color: #888; display: block; margin-bottom: 8px; } .esun-conversation-entry.is-customer > small { text-align: right; } .esun-conversation-bubble { background: #f5f5f5; border-radius: 26px; line-height: 1.6; min-height: 24px; padding: 18px 23px; } .esun-conversation-entry.is-customer .esun-conversation-bubble { background: #e4f6ed; } .esun-conversation-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; } .esun-conversation-images img { background: #fff; border-radius: 7px; height: 110px; object-fit: cover; width: 110px; } .esun-conversation-empty { color: #999; padding: 80px 20px; text-align: center; } .esun-conversation-compose { border-top: 1px solid #e1e1e1; padding: 22px 30px 25px; } .esun-conversation-compose > label > span { display: block; margin-bottom: 7px; } .esun-conversation-compose input.input-text, .esun-conversation-compose textarea { box-sizing: border-box; margin-bottom: 15px; width: 100%; } .esun-conversation-compose__actions { align-items: center; display: flex; gap: 13px; } .esun-conversation-compose__actions > button { margin-left: auto; min-width: 120px; } .esun-conversation-upload { align-items: center; color: #18aa59; cursor: pointer; display: inline-flex; gap: 7px; } .esun-conversation-upload input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; } .esun-conversation-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .esun-conversation-preview img { border-radius: 5px; height: 72px; object-fit: cover; width: 72px; } @media (max-width: 900px) { .esun-conversation-layout { grid-template-columns: 260px minmax(0, 1fr); } .esun-conversation-entry { max-width: 88%; } } @media (max-width: 767px) { .esun-conversation-layout { display: block; min-height: 0; } .esun-conversation-sidebar { border-bottom: 1px solid #ddd; border-right: 0; max-height: 300px; overflow-y: auto; } .esun-conversation-main > header { padding: 20px; } .esun-conversation-main > header h1 { font-size: 22px; } .esun-conversation-messages { min-height: 330px; padding: 20px; } .esun-conversation-compose { padding: 20px; } .esun-conversation-compose__actions { align-items: flex-start; flex-wrap: wrap; } .esun-conversation-compose__actions > button { width: 100%; } }