127 lines
8.0 KiB
CSS
127 lines
8.0 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: Inter, 'Segoe UI', sans-serif;
|
|
color: #142921;
|
|
background: #f3f5ef;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
--green: #15583e;
|
|
--dark-green: #103a2c;
|
|
--border: #d9e2d9;
|
|
--muted: #4f6257;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
[hidden] { display: none !important; }
|
|
body { margin: 0; }
|
|
.topbar { background: var(--dark-green); color: #fff; }
|
|
.topbar-inner { max-width: 1440px; padding: 15px clamp(16px, 4vw, 56px); margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
|
|
.product { font-weight: 750; letter-spacing: .015em; }
|
|
.header-actions, .queue-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
|
|
.mode { font-size: .82rem; border: 1px solid #7da894; color: #f1fff4; padding: 3px 10px; border-radius: 20px; text-align: center; }
|
|
main { max-width: 1440px; padding: clamp(24px, 4vw, 54px) clamp(16px, 4vw, 56px); margin: auto; }
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 770; letter-spacing: -.045em; line-height: 1.06; margin-bottom: 12px; }
|
|
h2 { font-size: 1.2rem; letter-spacing: -.015em; margin-bottom: 16px; }
|
|
h3 { font-size: 1.15rem; margin-bottom: 8px; }
|
|
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
|
|
.workspace { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
|
|
.panel { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: clamp(15px, 2vw, 26px); }
|
|
label { display: block; font-size: .87rem; font-weight: 650; margin-bottom: 5px; }
|
|
select, textarea, button { font: inherit; }
|
|
select, textarea { display: block; width: 100%; padding: 8px 11px; border: 1px solid #a7b9ad; border-radius: 7px; background: #fff; color: inherit; margin-bottom: 12px; }
|
|
select { min-height: 43px; }
|
|
textarea { resize: vertical; min-height: 90px; }
|
|
select:disabled, textarea:disabled { color: var(--muted); background: #f6f8f3; }
|
|
textarea::placeholder { color: #64796b; }
|
|
button, .secondary { border-radius: 7px; padding: 8px 13px; text-decoration: none; cursor: pointer; font-weight: 700; font-size: .88rem; }
|
|
button { background: var(--green); color: #fff; border: 1px solid var(--green); }
|
|
button:hover:not(:disabled) { background: var(--dark-green); }
|
|
button:disabled { cursor: wait; opacity: .64; }
|
|
.header-button { color: #fff; background: transparent; border-color: #7da894; }
|
|
.header-button:hover:not(:disabled) { background: #265b46; }
|
|
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #45816b; outline-offset: 3px; }
|
|
.intake button { width: 100%; }
|
|
.secondary { background: #fff; color: var(--green); border: 1px solid #a7b9ad; white-space: nowrap; }
|
|
.secondary:hover, button.secondary:hover:not(:disabled) { background: #eef4ec; }
|
|
.note, .feedback { color: var(--muted); font-size: .84rem; }
|
|
.note { margin-bottom: 12px; }
|
|
.feedback { margin: 10px 0 0; }
|
|
.feedback:empty { display: none; }
|
|
.feedback[data-error="true"] { color: #942c20; }
|
|
.queue-header { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 12px; }
|
|
.queue-header h2 { margin-bottom: 1px; }
|
|
.queue-header p { margin: 0; }
|
|
.clear-button { color: #9a3223; border-color: #d6a99f; }
|
|
button.clear-button:hover:not(:disabled) { background: #fbeeea; }
|
|
.queue-filters { display: flex; gap: 6px; margin-bottom: 12px; }
|
|
.queue-filter { background: #fff; color: var(--green); border-color: var(--border); }
|
|
.queue-filter:hover:not(:disabled) { background: #eef4ec; }
|
|
.queue-filter[aria-pressed="true"], .queue-filter[aria-pressed="true"]:hover:not(:disabled) { background: var(--green); color: #fff; border-color: var(--green); }
|
|
.empty { padding: 27px 16px; border: 1px dashed #adbdad; background: #f7faf4; border-radius: 8px; text-align: center; }
|
|
.empty p { font-weight: 700; margin: 0 0 3px; }
|
|
.empty span { color: var(--muted); font-size: .87rem; }
|
|
.table-scroll { overflow: auto; }
|
|
table { width: 100%; border-collapse: collapse; min-width: 485px; text-align: left; font-size: .85rem; }
|
|
thead { background: #eef4eb; }
|
|
th, td { padding: 9px 10px; vertical-align: top; }
|
|
tbody tr { border-bottom: 1px solid var(--border); }
|
|
tbody tr:has(button[aria-expanded="true"]) { background: #f2f7ef; }
|
|
.ticket-button { padding: 0; border: 0; background: transparent; color: var(--green); font-size: .9rem; text-align: left; overflow-wrap: anywhere; }
|
|
.ticket-button:hover:not(:disabled) { background: transparent; color: var(--dark-green); text-decoration: underline; }
|
|
.ticket-meta { display: block; color: var(--muted); margin-top: 3px; }
|
|
.tag { display: inline-block; border-radius: 20px; white-space: nowrap; padding: 2px 7px; font-weight: 650; background: #e9f3e7; color: #20533a; }
|
|
.tag[data-category="urgent"] { background: #fce9e2; color: #872f23; }
|
|
.tag[data-category="spam"] { background: #edf0ee; color: #45544b; }
|
|
.ticket-detail { padding: 16px; margin-top: 14px; border: 1px solid var(--border); background: #fbfdf9; border-radius: 8px; }
|
|
.detail-meta { color: var(--muted); font-size: .85rem; }
|
|
.source-id { overflow-wrap: anywhere; }
|
|
.detail-text { overflow-wrap: anywhere; white-space: pre-wrap; margin-bottom: 12px; }
|
|
.review { color: #76471a; background: #fff4d7; padding: 5px 8px; border-radius: 5px; width: fit-content; }
|
|
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
.checkbox { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
|
|
.checkbox input { accent-color: var(--green); }
|
|
.site-shell { max-width: 760px; }
|
|
.site-shell h1 { margin-bottom: 20px; }
|
|
.chat-panel-header, .chat-compose, .reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
.chat-panel-header { min-height: 39px; margin-bottom: 10px; }
|
|
.chat-panel-header p { margin: 0; font-weight: 650; }
|
|
.chat-window { min-height: 145px; max-height: 48vh; overflow: auto; overscroll-behavior: contain; background: #f6f8f4; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 15px; }
|
|
.chat-empty { color: var(--muted); margin: 0; padding: 25px 15px; }
|
|
.chat-log { display: grid; gap: 10px; margin: 0; padding: 12px; list-style: none; }
|
|
.chat-log li { justify-self: start; max-width: 88%; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow-wrap: anywhere; }
|
|
.chat-log li[data-role="customer"], .chat-log li[data-role="staff"] { justify-self: end; background: #e7f3e9; }
|
|
.chat-log li[data-role="moderator"] { background: #fff7e6; border-color: #e8d9b5; }
|
|
.chat-log p { margin: 3px 0 0; white-space: pre-wrap; }
|
|
.chat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; color: var(--muted); font-size: .8rem; }
|
|
.chat-meta strong { color: #234539; }
|
|
.chat-compose { align-items: end; }
|
|
.chat-compose textarea { margin-bottom: 0; }
|
|
.ticket-chat { margin: 15px 0; padding-top: 13px; border-top: 1px solid var(--border); }
|
|
.ticket-chat h4 { margin: 0 0 8px; }
|
|
.ticket-chat .chat-window { min-height: 0; max-height: 340px; }
|
|
.ticket-chat .chat-log li { justify-self: start; }
|
|
.ticket-chat .chat-log li[data-role="operator"] { justify-self: end; }
|
|
.reply-actions { justify-content: start; flex-wrap: wrap; }
|
|
.exit-view { max-width: 520px; }
|
|
.exit-view h1 { margin-bottom: 20px; }
|
|
|
|
@media (max-width: 880px) {
|
|
.workspace { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
@media (max-width: 540px) {
|
|
.chat-compose { flex-direction: column; align-items: stretch; }
|
|
.chat-log li { max-width: 96%; }
|
|
table { min-width: 0; }
|
|
thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
tbody { display: block; }
|
|
tbody tr { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, auto); gap: 5px 9px; padding: 10px 8px; }
|
|
td { padding: 0; overflow-wrap: anywhere; }
|
|
td:first-child { grid-column: 1 / -1; }
|
|
td:last-child { text-align: right; }
|
|
}
|
|
@media (max-width: 400px) {
|
|
.queue-header { align-items: stretch; flex-direction: column; }
|
|
.queue-actions { justify-content: start; }
|
|
}
|