.whitespace-nowrap { white-space: nowrap; }
.max-w-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-danger, .btn-success, .btn-warning, .btn-light {
    display: inline-flex; align-items: center; gap: .5rem; border-radius: .5rem;
    font-weight: 500; font-size: .875rem; padding: .625rem 1rem; transition: opacity .15s; border: 1px solid transparent;
}
.btn-danger:hover, .btn-success:hover, .btn-warning:hover, .btn-light:hover { opacity: .88; }
.btn-danger { background: #ef4a00; color: #fff; }
.btn-success { background: #45b369; color: #fff; }
.btn-warning { background: #ff9f29; color: #fff; }
.btn-light { background: #fff; color: #4b5563; border-color: #d1d5db; }
.dark .btn-light { background: #273142; color: #e5e7eb; border-color: #4b5563; }
button:disabled { opacity: .5; cursor: not-allowed; }

.panel-alert { border-radius: .5rem; padding: .875rem 1.125rem; margin-bottom: 1.5rem; border: 1px solid; font-size: .9375rem; }
.panel-alert-success { background: #e8f7ee; border-color: #b4e2c4; color: #1f6b3b; }
.panel-alert-danger { background: #fdecec; border-color: #f5b5b5; color: #a12020; }
.panel-alert-warning { background: #fff5e6; border-color: #ffd699; color: #8a5300; }
.panel-alert-info { background: #e8f1ff; border-color: #b3cdfa; color: #1c4fa1; }
.dark .panel-alert-success { background: rgba(69,179,105,.15); border-color: rgba(69,179,105,.4); color: #a7e3bb; }
.dark .panel-alert-danger { background: rgba(239,74,0,.15); border-color: rgba(239,74,0,.4); color: #ffb8a0; }
.dark .panel-alert-warning { background: rgba(255,159,41,.15); border-color: rgba(255,159,41,.4); color: #ffd699; }
.dark .panel-alert-info { background: rgba(72,127,255,.15); border-color: rgba(72,127,255,.4); color: #b3cdfa; }
.panel-alert ul { list-style: disc; padding-inline-start: 1.25rem; margin-top: .25rem; }

.status-badge { display: inline-block; padding: .2rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.status-neutral { background: #eef0f3; color: #4b5563; }
.status-primary { background: #e4ecff; color: #487fff; }
.status-info { background: #e1f3fb; color: #0e8fc4; }
.status-success { background: #e2f5e9; color: #2f9653; }
.status-warning { background: #fff2e0; color: #d07a0c; }
.status-danger { background: #fde7e2; color: #d63e00; }
.dark .status-neutral { background: rgba(255,255,255,.08); color: #d1d5db; }
.dark .status-primary { background: rgba(72,127,255,.2); color: #9bb8ff; }
.dark .status-info { background: rgba(14,143,196,.2); color: #7fd0f0; }
.dark .status-success { background: rgba(69,179,105,.2); color: #8fdcaa; }
.dark .status-warning { background: rgba(255,159,41,.2); color: #ffc680; }
.dark .status-danger { background: rgba(239,74,0,.2); color: #ff9f80; }

.progress-track { width: 100%; height: .75rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; display: flex; }
.dark .progress-track { background: #374151; }
.progress-seg { height: 100%; transition: width .4s; }

.panel-pagination { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.panel-pagination a, .panel-pagination span {
    min-width: 2.25rem; height: 2.25rem; padding: 0 .625rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: .5rem; font-size: .875rem; border: 1px solid #e5e7eb; background: #fff; color: #4b5563;
}
.dark .panel-pagination a, .dark .panel-pagination span { background: #273142; border-color: #4b5563; color: #d1d5db; }
.panel-pagination a:hover { border-color: #487fff; color: #487fff; }
.panel-pagination .current { background: #487fff; border-color: #487fff; color: #fff; }
.panel-pagination .disabled { opacity: .45; }

.panel-table { width: 100%; font-size: .875rem; }
.panel-table th { text-align: start; font-weight: 600; padding: .75rem 1rem; background: #f5f6fa; color: #4b5563; white-space: nowrap; }
.panel-table td { padding: .75rem 1rem; border-top: 1px solid #eef0f3; vertical-align: middle; }
.dark .panel-table th { background: #1b2431; color: #d1d5db; }
.dark .panel-table td { border-color: #374151; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { width: 100%; max-width: 440px; }

.hint { font-size: .8125rem; color: #6b7280; margin-top: .375rem; }
.dark .hint { color: #9ca3af; }
code.inline { background: rgba(72,127,255,.1); color: #487fff; padding: .1rem .375rem; border-radius: .25rem; font-size: .8125rem; }

.h-fit { height: fit-content; }
.p-8 { padding: 2rem; }
.-mt-3 { margin-top: -.75rem; }
@media (min-width: 768px) { .md\:col-span-2 { grid-column: span 2 / span 2; } }
@media (min-width: 1024px) { .lg\:col-span-2 { grid-column: span 2 / span 2; } }
.dashboard-main > * { min-width: 0; max-width: 100%; }

.dark .dark\:to-neutral-700 { --tw-gradient-to: rgb(55 65 81) var(--tw-gradient-to-position); }
.dark .progress-track { background: #1f2937; }
.menu-badge { margin-inline-start: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: #ef4a00; color: #fff; font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.inbox { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; height: calc(100vh - 210px); min-height: 520px; }
.inbox > .card { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 1023px) {
    .inbox { grid-template-columns: 1fr; height: calc(100vh - 190px); }
    .inbox.has-active .inbox-sidebar { display: none; }
    .inbox:not(.has-active) .inbox-thread { display: none; }
}
@media (min-width: 1024px) { .inbox-back { display: none !important; } }

.inbox-search { display: flex; align-items: center; gap: .5rem; padding: .875rem 1.125rem; border-bottom: 1px solid #eef0f3; color: #9ca3af; }
.inbox-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: .875rem; color: inherit; }
.dark .inbox-search { border-color: #4b5563; }
.dark .inbox-search input { color: #e5e7eb; }
.inbox-list { overflow-y: auto; flex: 1; }

.inbox-item { display: flex; gap: .75rem; align-items: center; padding: .75rem 1.125rem; border-bottom: 1px solid #f3f4f6; transition: background .12s; }
.inbox-item:hover { background: #f9fafb; }
.inbox-item.is-active { background: rgb(var(--brand) / .07); box-shadow: inset 3px 0 0 rgb(var(--accent)); }
.dark .inbox-item { border-color: #3b4555; }
.dark .inbox-item:hover { background: rgb(255 255 255 / .04); }
.dark .inbox-item.is-active { background: rgb(var(--brand) / .12); }
.inbox-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem; background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
.inbox-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.inbox-item-top, .inbox-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.inbox-item-name { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111827; }
.dark .inbox-item-name { color: #f3f4f6; }
.inbox-item-time { font-size: .75rem; color: #9ca3af; flex-shrink: 0; }
.inbox-item-preview { font-size: .8125rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .inbox-item-preview { color: #9ca3af; }
.inbox-item.is-unread .inbox-item-preview { color: #111827; font-weight: 500; }
.dark .inbox-item.is-unread .inbox-item-preview { color: #f3f4f6; }
.inbox-item.is-unread .inbox-item-time { color: rgb(var(--accent)); font-weight: 600; }
.inbox-unread { min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: rgb(var(--accent)); color: #fff; font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #9ca3af; padding: 2rem; }
.inbox-thread-head { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid #eef0f3; flex-wrap: wrap; }
.dark .inbox-thread-head { border-color: #4b5563; }
.inbox-back { font-size: 1.375rem; display: inline-flex; color: inherit; }
.inbox-tags { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
.min-w-0 { min-width: 0; }

.inbox-messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; background: #f7f6f2; }
.dark .inbox-messages { background: #1f2937; }
.chat-day { text-align: center; margin: .75rem 0 .25rem; }
.chat-day span { font-size: .75rem; padding: .25rem .75rem; border-radius: 999px; background: #fff; color: #6b7280; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.dark .chat-day span { background: #374151; color: #d1d5db; }
.chat-row { display: flex; }
.chat-row.is-out { justify-content: flex-end; }
.chat-bubble { max-width: min(560px, 80%); padding: .5rem .75rem .375rem; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.chat-row.is-in .chat-bubble { border-end-start-radius: 4px; }
.chat-row.is-out .chat-bubble { background: rgb(var(--brand)); color: rgb(var(--brand-contrast)); border-end-end-radius: 4px; }
.dark .chat-row.is-in .chat-bubble { background: #374151; color: #f3f4f6; }
.chat-bubble.is-reaction { background: transparent !important; box-shadow: none; font-size: 1.5rem; padding: 0 .25rem; }
.chat-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .9375rem; line-height: 1.45; }
.chat-meta { display: flex; justify-content: flex-end; gap: .25rem; font-size: .6875rem; opacity: .65; margin-top: .125rem; }
.chat-tick { font-weight: 700; letter-spacing: -.12em; }
.chat-tick.status-read { color: rgb(var(--accent)); opacity: 1; }
.chat-row.is-out .chat-tick.status-read { filter: brightness(1.25); }
.chat-tick.status-failed { color: #ff6b3d; letter-spacing: 0; }
.chat-media-img { max-width: 280px; max-height: 320px; border-radius: 10px; display: block; margin-bottom: .25rem; }
.chat-doc { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 0; text-decoration: underline; color: inherit; }
.chat-button-reply { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; opacity: .7; }

.inbox-composer { border-top: 1px solid #eef0f3; padding: .75rem 1rem 1rem; }
.dark .inbox-composer { border-color: #4b5563; }
.inbox-window { display: flex; align-items: center; gap: .375rem; font-size: .75rem; margin-bottom: .5rem; }
.inbox-window.is-open { color: #2f9653; }
.inbox-window.is-closed { color: #b45309; }
.inbox-form { display: flex; gap: .625rem; align-items: flex-end; }
.inbox-form textarea { flex: 1; resize: none; border: 1px solid #e5e7eb; border-radius: 12px; padding: .625rem .875rem; font-size: .9375rem; outline: 0; background: #fff; color: inherit; max-height: 160px; }
.inbox-form textarea:focus { border-color: rgb(var(--brand)); }
.inbox-form textarea:disabled { background: #f3f4f6; cursor: not-allowed; }
.dark .inbox-form textarea { background: #1f2937; border-color: #4b5563; }
.inbox-error { color: #d63e00; font-size: .8125rem; margin: .5rem 0 0; }
.dark .chat-row.is-out .chat-tick.status-read { color: rgb(14 18 59); filter: none; }