/* dc.662.cz - SUPPORT module styles */

.dc-sup-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.dc-sup-toolbar h1 { font-size: 1.4rem; margin: 0; }

.dc-sup-table td, .dc-sup-table th { vertical-align: middle; }
.dc-sup-code { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* meta list */
.dc-sup-meta { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; }
.dc-sup-meta dt { color: #6c757d; font-weight: 500; }
.dc-sup-meta dd { margin: 0; }

/* conversation thread */
.dc-sup-thread { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.dc-sup-bubble { border-radius: .6rem; padding: .6rem .8rem; max-width: 85%; border: 1px solid #e3e6ea; }
.dc-sup-bubble--cust { align-self: flex-start; background: #f1f3f5; }
.dc-sup-bubble--staff { align-self: flex-end; background: #e7f1ff; border-color: #cfe2ff; }
.dc-sup-bubble--internal { align-self: stretch; background: #fff8e1; border-color: #ffe69c; max-width: 100%; }
.dc-sup-bubble-head { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; margin-bottom: .25rem; }
.dc-sup-who { font-weight: 600; }
.dc-sup-when { color: #6c757d; margin-left: auto; }
.dc-sup-bubble-body { white-space: normal; word-break: break-word; }

/* attachments */
.dc-sup-msg-att { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.dc-sup-thumb { max-width: 160px; max-height: 160px; border-radius: .4rem; border: 1px solid #ccc; }
.dc-sup-file-link { display: inline-flex; gap: .25rem; align-items: center; }

/* compose */
.dc-sup-compose { border: 1px dashed #ced4da; border-radius: .5rem; padding: .75rem; }
.dc-sup-compose.dc-sup-drag { border-color: #0d6efd; background: #f0f7ff; }
.dc-sup-compose-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.dc-sup-compose-hint { margin: 0; }
.dc-sup-attach-btn { cursor: pointer; }
.dc-sup-attach-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.dc-sup-attach { display: inline-flex; align-items: center; padding: .15rem; border-radius: .4rem; background: #f1f3f5; }
.dc-sup-attach--loading { opacity: .6; padding: .25rem .5rem; }
.dc-sup-attach--error { background: #f8d7da; color: #842029; padding: .25rem .5rem; }
.dc-sup-attach .dc-sup-thumb { max-width: 90px; max-height: 90px; }

/* public guest portal */
.dc-sup-public { background: #f6f8fa; min-height: 100vh; display: flex; flex-direction: column; }
.dc-sup-public-header { background: #0d1117; padding: .6rem 0; }
.dc-sup-public-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.dc-sup-public-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-right: auto; }
.dc-sup-public-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dc-sup-public-main { flex: 1 0 auto; max-width: 880px; padding: 1.5rem 1rem; }
.dc-sup-public-footer { padding: 1rem 0 1.5rem; }
.dc-sup-public-actions .dc-sup-lang .btn,
.dc-sup-public-logout { --bs-btn-color: #cdd9e5; --bs-btn-border-color: #44505d; }