/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,17): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(31,18): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(34,46): run-time error CSS1039: Token not allowed after unary operator: '-avatar-bg'
(34,64): run-time error CSS1039: Token not allowed after unary operator: '-avatar-bg-end'
(35,17): run-time error CSS1039: Token not allowed after unary operator: '-avatar-color'
(41,26): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(46,32): run-time error CSS1039: Token not allowed after unary operator: '-avatar-ring'
(49,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,63): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,63): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,66): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,20): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,68): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,63): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,66): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-bg'
(76,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(84,34): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(96,35): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(101,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(107,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(141,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(146,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(153,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(161,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(170,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(177,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(193,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(214,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(223,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(228,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(236,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(243,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(270,75): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(271,58): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(272,58): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(274,77): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(275,60): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(276,60): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(303,35): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(306,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(316,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(324,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(333,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(338,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(362,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(364,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(373,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(401,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(423,46): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(446,22): run-time error CSS1039: Token not allowed after unary operator: '-bubble-in-bg'
(447,17): run-time error CSS1039: Token not allowed after unary operator: '-bubble-in-color'
(450,43): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(454,22): run-time error CSS1039: Token not allowed after unary operator: '-bubble-out-bg'
(455,17): run-time error CSS1039: Token not allowed after unary operator: '-bubble-out-color'
(460,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(461,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(462,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(470,32): run-time error CSS1039: Token not allowed after unary operator: '-panel-border'
(483,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(498,45): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(573,22): run-time error CSS1039: Token not allowed after unary operator: '-bubble-in-bg'
(582,22): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
 */
:root {
    --avatar-size: 48px;
    --avatar-bg: #6366f1;
    --avatar-bg-end: #8b5cf6;
    --avatar-color: #ffffff;
    --avatar-ring: rgba(99, 102, 241, 0.25);
    --avatar-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    --app-bg: #f1f5f9;
    --panel-bg: #ffffff;
    --panel-border: #e5e7eb;

    --bubble-in-bg: #f1f5f9;
    --bubble-in-color: #0f172a;

    --bubble-out-bg: linear-gradient(135deg, #475569, #1e293b);
    --bubble-out-color: #ffffff;
    --avatar-out-bg: #475569;
    --avatar-out-bg-end: #1e293b;
    --avatar-out-ring: rgba(71, 85, 105, 0.25);

    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
}

* { box-sizing: border-box; }

.avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--avatar-bg), var(--avatar-bg-end));
    color: var(--avatar-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    font-size: calc(var(--avatar-size) * 0.4);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 0 0 3px var(--avatar-ring), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.avatar.slate { --avatar-bg: #5e7088; --avatar-bg-end: #3f4e69; --avatar-ring: rgba(94,112,136,0.25); }
.avatar.zinc { --avatar-bg: #6c6c79; --avatar-bg-end: #4d4d57; --avatar-ring: rgba(108,108,121,0.25); }
.avatar.stone { --avatar-bg: #9d9388; --avatar-bg-end: #786a5b; --avatar-ring: rgba(157,147,136,0.25); }
.avatar.steel { --avatar-bg: #4a6483; --avatar-bg-end: #2f4763; --avatar-ring: rgba(74,100,131,0.25); }
.avatar.ash { --avatar-bg: #8198b3; --avatar-bg-end: #5c7392; --avatar-ring: rgba(129,152,179,0.25); }
.avatar.sky { --avatar-bg: #6db4d8; --avatar-bg-end: #3b8bb4; --avatar-ring: rgba(109,180,216,0.25); }
.avatar.ocean { --avatar-bg: #5b8acc; --avatar-bg-end: #3c66a8; --avatar-ring: rgba(91,138,204,0.25); }
.avatar.pewter { --avatar-bg: #6f6f6f; --avatar-bg-end: #4a4a4a; --avatar-ring: rgba(111,111,111,0.25); }
.avatar.sage { --avatar-bg: #8a9c83; --avatar-bg-end: #66795f; --avatar-ring: rgba(138,156,131,0.25); }
.avatar.moss { --avatar-bg: #6a8a6c; --avatar-bg-end: #4d6650; --avatar-ring: rgba(106,138,108,0.25); }
.avatar.taupe { --avatar-bg: #a08d75; --avatar-bg-end: #7a674f; --avatar-ring: rgba(160,141,117,0.25); }
.avatar.navy { --avatar-bg: #4a607c; --avatar-bg-end: #2e4361; --avatar-ring: rgba(74,96,124,0.25); }
.avatar.charcoal { --avatar-bg: #5a5a5a; --avatar-bg-end: #3a3a3a; --avatar-ring: rgba(90,90,90,0.25); }
.avatar.fog { --avatar-bg: #92a3b8; --avatar-bg-end: #6f8198; --avatar-ring: rgba(146,163,184,0.25); }
.avatar.denim { --avatar-bg: #6a86a6; --avatar-bg-end: #486584; --avatar-ring: rgba(106,134,166,0.25); }
.avatar.harbor { --avatar-bg: #5d8298; --avatar-bg-end: #3e6075; --avatar-ring: rgba(93,130,152,0.25); }

.messaging {
    width: 100%;
    max-width: 1280px;
    margin-bottom: 2rem;
    height: 720px;
    max-height: 720px;
    display: grid;
    grid-template-columns: 480px 1fr;
    grid-template-rows: minmax(0, 1fr);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.inbox {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--panel-border);
    background: #fafafa;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
.inbox__header {
    height: 72px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--panel-border);
}
.inbox__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.inbox__subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.2;
}
.inbox__list {
    flex: 1;
    min-height: 0;
    overflow-y: hidden;
    overscroll-behavior: contain;
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.inbox__list::-webkit-scrollbar { width: 8px; }
.inbox__list::-webkit-scrollbar-thumb { 
    background: #cbd5e1;
    border-radius: 8px;
}
.inbox__list::-webkit-scrollbar-track { background: transparent; }
.inbox__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: #fafafa;
}
.inbox__pagination:empty { display: none; }
.inbox__page-info {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.inbox__page-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--panel-border);
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.inbox__page-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: var(--text-primary);
}
.inbox__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.profile-card[data-page] { display: none; }
.profile-card[data-page].active { display: flex; }
.profile-card {
    --avatar-size: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.profile-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.profile-card.is-active {
    background: #e2e8f0;
    border-color: #475569;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}
.profile-card.is-active .profile-card__sender {
    color: var(--text-primary);
    font-weight: 700;
}
.profile-card { position: relative; }
.profile-card .avatar { margin-top: 2px; }
.profile-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.profile-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.profile-card__sender {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-card__created {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.2;
}
.profile-card__subject {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-card__excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-card__excerpt-prefix {
    color: var(--text-secondary);
    font-weight: 500;
}
.profile-card__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.profile-card__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
    pointer-events: none;
}
.profile-card.is-active .profile-card__badge { border-color: #e2e8f0; }
.profile-card--read .profile-card__badge { display: none; }
.profile-card--read .profile-card__sender { font-weight: 500; color: var(--text-secondary); }
.profile-card--read .profile-card__subject { color: var(--text-muted); }
.profile-card--read .profile-card__excerpt { color: var(--text-muted); }

.profile-card--unread .profile-card__sender { font-weight: 700; color: var(--text-primary); }
.profile-card--unread .profile-card__subject { color: var(--text-primary); font-weight: 500; }
.profile-card--unread .profile-card__excerpt { color: var(--text-secondary); }
.profile-card--unread .profile-card__created { color: #2563eb; font-weight: 600; }
.profile-card--unread .profile-card__sender::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #2563eb;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: #f8fafc;
}
.thread__header {
    height: 72px;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid var(--panel-border);
    background: #ffffff;
}
.thread__header .avatar { --avatar-size: 40px; }
.thread__back {
    display: none;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: -6px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.thread__back:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}
.thread__back svg { 
    width: 22px;
    height: 22px;
}
.thread__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.thread__subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.2;
    margin-top: 2px;
}
.thread__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    padding: 20px;
    background: #f8fafc;
}
.thread__body::-webkit-scrollbar { width: 8px; }
.thread__body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.thread__body::-webkit-scrollbar-track { background: transparent; }

.thread__day {
    align-self: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    background: #ffffff;
    border: 1px solid var(--panel-border);
    padding: 4px 10px;
    border-radius: 999px;
}
.thread__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-bubble {
    height: 36px;
    border-radius: 14px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-bubble--in  { 
    align-self: flex-start;
    width: 60%; border-bottom-left-radius: 4px; }
.skeleton-bubble--out { 
    align-self: flex-end;
    width: 50%;
    border-bottom-right-radius: 4px;
    background: linear-gradient(90deg, #cbd5e1 0%, #e2e8f0 50%, #cbd5e1 100%);
    background-size: 200% 100%;
}
.skeleton-bubble--short { width: 30%; }
.skeleton-bubble--tall  { height: 56px; }

.message {
    --avatar-size: 32px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
}
.message__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.message--in  .message__content { align-items: flex-start; }
.message--out .message__content { align-items: flex-end; }
 
.message__sender {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15px;
    line-height: 1.2;
}
.message--out .message__sender { color: rgba(255, 255, 255, 0.45); }
.message--in  .message__sender { color: var(--text-muted); }
.message__bubble {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.message__text {
    white-space: pre-wrap;
    word-break: break-all;
}
.message__meta {
    font-size: 11px;
    opacity: 0.7;
    align-self: flex-end;
}
.message--in { align-self: flex-start; }
.message--in .message__bubble {
    background: var(--bubble-in-bg);
    color: var(--bubble-in-color);
    border-bottom-left-radius: 4px;
}
.message--in .message__meta { color: var(--text-secondary); }

.message--out { align-self: flex-end; flex-direction: row-reverse; }
.message--out .message__bubble {
    background: var(--bubble-out-bg);
    color: var(--bubble-out-color);
    border-bottom-right-radius: 4px;
}
.message--out .message__meta { color: rgba(255,255,255,0.85); }
.message--out .avatar {
    --avatar-bg: var(--avatar-out-bg);
    --avatar-bg-end: var(--avatar-out-bg-end);
    --avatar-ring: var(--avatar-out-ring);
}

.composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--panel-border);
    background: #ffffff;
    margin-top: auto;
    min-height: 67px;
}
.composer__input {
    flex: 1;
    min-height: 40px;
    max-height: 140px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    resize: none;
    outline: none;
    overflow-y: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.composer__input::-webkit-scrollbar { width: 6px; }
.composer__input::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
.composer__input::-webkit-scrollbar-track { background: transparent; }
.composer__input::placeholder { color: var(--text-muted); }
.composer__input:focus {
    background: #ffffff;
    border-color: #94a3b8;
}
.composer__send {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #475569, #1e293b);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(71, 85, 105, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.composer__send:hover { transform: translateY(-1px); }
.composer__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.composer__send svg {
    width: 18px;
    height: 18px;
    transform: translateX(1px);
}

.messages-link { padding: 15px 5px; }
.messages-link:focus, .messages-link:active { outline: none; }
.msg-icon {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.msg-icon .fa-envelope-o, .msg-icon .fa-envelope {
    font-size: 22px;
    color: #fff;
    transition: transform 0.15s ease;
}
.messages-link:hover .fa-envelope-o, .messages-link:hover .fa-envelope {
    transform: translateY(-1px);
}
 
.msg-icon .badge.messages-badge {
    position: absolute;
    top: -9px;
    right: -12px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    min-width: 16px;
    height: 19px;
    line-height: 14px;
    border-radius: 999px;
    border: 2px solid #4a4a4a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.msg-icon .badge.messages-badge.hidden { display: none; }
.messages-badge[data-unread="0"] { display: none; }

.typing-indicator {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 8px 12px;
    background: var(--bubble-in-bg);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes typing-bounce {
    0%, 60%, 100% { 
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .messaging { 
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr);
    }
}
@media (max-width: 720px) {
    .messaging { 
        height: 80vh;
        max-height: none;
        grid-template-columns: 1fr;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    .inbox, .thread {
        grid-column: 1;
        grid-row: 1;
    }
    .inbox { border-right: none; }
    .thread { display: none; }
    .messaging.is-thread-open .inbox { display: none; }
    .messaging.is-thread-open .thread { display: flex; }
    .thread__back { display: inline-flex; }
    .inbox__header, .thread__header { padding: 0 16px; }
    .thread__body { padding: 16px; }
    .composer { padding: 10px 12px; }
    .inbox__list { overflow-y: auto; }    
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/********************* Layout ************************/

.body-content {
    background-color: #eceff1;
}

body {
    font-family: "Helvetica", sans-serif;
    font-size: 14px;
}

#loadingModal {
    top: 40%;
}

#loadingModal .modal-content {
	min-width: 300px;
	width: 300px;
}

#loadingModal .modal-dialog {
	left: 50%;
	margin-left: -150px;
}

.circle-loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: inline-block;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.loading {
    overflow: hidden;
}

body.loading .loader {
    display: block;
}

.loader-text h4 {
    margin-top: 23%;
    color: white;
}

.loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 0, 0, 0, .8 ) url('../../Content/Images/ajax-loader.gif') 49.5% 50% no-repeat;
}

.glyphicon {
    top: 2px;
}

.glyphicon-client-settings {
    left: 3px;
}

/********************* Header ************************/

.header-container {
    /*background: #3280B3;*/
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.712);
}

.header-box {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.header-item {
    display: flex;
    align-items: center;
    height: 77px;
}

.header-list {
    display: flex;
    text-align: right !important;
    margin-bottom: 0;
    color: #FFFFFF;
}

.header-search {
    width: 150px;
}

#bisnodeStyle {
    font-weight: bold;
    text-align: center;
    line-height: 17px;
    color: #3280B3;
    background: white;
    border-radius: 16px;
    padding: 7px;
}

.white-color-link {
    color: #ffffff !important;
}

#helpLink {
    padding-right: 8px;
}

.navbar-custom {
    background-color: #FFFFFF;
    box-shadow: inset 0 -1px 0 0 #CFD8DC;
}

    .navbar-custom .navbar-nav > li > a {
        color: #78909C;
        font-size: 15px;
        line-height: 16px;
    }

        .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
            color: #3280B3;
            background-color: rgba(0, 0, 0, .05);
            font-size: 15px;
            font-weight: 500;
            line-height: 16px;
        }

    .navbar-custom .navbar-toggle .icon-bar {
        background-color: #2e6da4;
    }

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

@media (min-width: 979px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
}

.new-case-link {
    color: #3280B3 !important;
}

.logoSetup {
    width: 209px;
    height: 66px;
}

/********************* Footer ************************/

.footerParagraph {
    color: #78909C;
    font-size: 12px;
    text-align: center;
    line-height: 10px;
}

#footer {
    background-color: #FFFFFF;
    box-shadow: inset 0 2px 0 0 #E4E9EB;
}

#footerLogo {
    margin-bottom: 15px;
    width: 123px;
    height: 34.74px;
}



/********************* Generic ************************/

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-70 {
    margin-top: 70px;
}

.margin-top-150 {
    margin-top: 150px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 10px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.fullWidth {
    width: 100%;
}

.bold {
    font-weight: bold;
}

.green {
    color: #32B391;
}

.not-visible {
    display: none;
}

.pointer {
    cursor: pointer;
}

.commentText {
    white-space: pre-wrap;
    word-wrap: break-word;
}
/********************* Global ************************/
/* This should be used for title on every page */
.page-title {
    color: #3280B3;
    font-size: 22px;
    font-weight: 500;
}

/* When we want to make something more visible */
.important-text {
    color: #3280B3 !important;
    font-size: 14px;
    font-weight: bold;
}

/* White box which is clickable, can replace button */
.white-box {
    background-color: #FFFFFF;
    color: #78909C;
    box-shadow: inset 0 -1px 0 0 #F2F2F2;
    border-radius: 3px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 10px;
}

.solvent-dropdown {
    padding: 15px;
    border: none;
    border-radius: unset;
    right: -20px !important;
    min-width: 213px;
}

    .solvent-dropdown > li > a {
        color: #78909C;
    }

hr {
    height: 2px;
    background-color: rgba(120, 144, 156, 1.0);
}

#generalMessage {
    margin-top: 20px;
    display: none;
}

.error-message {
    background: orange;
    color: white;
}

.warn-message {
    background: yellow;
    color: white;
}

.info-message {
    background: blue;
    color: white;
}

.success-message {
    background: green;
    color: white;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

#uploadFile {
    display: inline-block !important;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.uploadLabel {
    line-height: 36px;
}

.glyphicon-trash {
    cursor: pointer;
}


/********************* Forms ************************/

.validation-summary-errors > ul {
    background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
    background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
    background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
    background-repeat: repeat-x;
    border-color: #dca7a7;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding-left: 38px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.field-validation-error {
    color: white;
    margin-top: 3px;
    padding: 5px;
    display: inline-block;
    background-color: red;
    min-width: 100%;
}

.form-group-display {
    margin-bottom: 0;
}

.form-horizontal .form-group-display {
    margin-right: -15px;
    margin-left: -15px;
}

/********************* Tabs component ************************/

.solvent-tabs {
    background-color: #FFFFFF;
    border: 1px solid rgba(207,216,220,0.7);
    border-radius: 0 3px 3px 3px;
    border-top: none;
    border-right: none;
}

    .solvent-tabs .tab-content {
        padding: 10px 30px 10px;
        border-right: 1px solid rgba(207,216,220,0.7);
        border-top: 1px solid rgba(207,216,220,0.7);
        border-radius: 0 3px 3px 3px;
    }

    .solvent-tabs .nav-tabs {
        border-bottom: none;
        background-color: #f3f0f0;
    }

        .solvent-tabs .nav-tabs > li.active > a, .solvent-tabs .nav-tabs > li.active > a:hover, .solvent-tabs .nav-tabs > li.active > a:focus {
            border: none;
            background-color: #fff;
            font-weight: bold;
            line-height: 8px;
            color: #3280B3;
            border-top: 1px solid rgba(207,216,220,0.7);
        }

        .solvent-tabs ul.nav.nav-tabs li:last-child.active {
            border-right: 1px solid rgba(207,216,220,0.7);
        }

    .solvent-tabs .nav-tabs > li > a {
        font-weight: bold;
        line-height: 8px;
        color: rgba(255,255,255,1);
        background-color: #B0BEC5;
    }

    .solvent-tabs .nav > li > a {
        padding: 23px;
        margin-right: 0px;
        border: none;
        border-radius: 0;
        border-right: 1px solid #cfd8dc;
    }

    .solvent-tabs .nav > li:not(.active) {
        height: 55px;
    }

/********************* Table component ************************/
.solvent-table th {
    opacity: 0.55;
    font-weight: bold;
    line-height: 15px;
    color: #78909C;
}

.solvent-table th, .solvent-table td {
    border: none !important;
}

.solvent-table tr {
    background-color: #FFFFFF;
    box-shadow: inset 0 -1px 0 0 #F2F2F2;
}

.solvent-table td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 16px;
    color: #78909C;
}

.solvent-table.fontColorBlack td {
    color: #000000;
}

.solvent-tabs p {
    opacity: 0.55;
    font-weight: bold;
    line-height: 15px;
    color: #78909C;
}

.solvent-table td a {
    text-align: center;
    line-height: 21px;
    color: #3280B3;
}

table.dataTable.solvent-table {
    margin-bottom: 15px !important;
}
.solvent-table.trend-alternating tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.solvent-table.trend-alternating tbody tr:nth-child(even) {
    background-color: #D5D5D5;
}

.solvent-table.trend-alternating tbody tr td {
    font-weight: normal;
}

.solventDataTableWrap {
    min-height: 660px;
    position: relative !important;
}

table, tbody, tfoot, thead, tr, th, td { 
    vertical-align: middle !important; 
}

tr.highlight {
    line-height:40px;
    height: 40px;
}


/********************* Override datatable ************************/

table.dataTable.no-footer {
    border-bottom: none;
}

/* Page number count */
.dataTables_info {
    color: #3280B3 !important;
}

/* Active and covered page number */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid #3280B3 !important;
    border-radius: 2px 0 0 2px;
    background: none;
    background-color: #3280B3 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

/* Default page number */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #ECEFF1;
    background: none;
    background-color: #FFFFFF !important;
    color: #78909C !important;
    margin: 0 !important;
    color: #3280B3 !important;
}

    /* Disabled paginate button */
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        color: #3280B3 !important;
        background-color: #FFFFFF !important;
        border: none !important;
    }

.dataTables_filter input {
    display: inline-block;
    width: 70%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .dataTables_filter input:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

.dataTables_filter label {
    color: #78909C;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background: none;
}

.group {
    cursor: pointer;
}

/********************* Forms ************************/

label {
    font-weight: normal !important;
}

.dateImage {
    cursor: pointer;
}

.form-horizontal .form-group-display .control-label {
    text-align: left !important;
}


/********************* Flexbox ************************/

.flex-container-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flex-container-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Giro styles */

.table-settings {
    border: 1px solid black;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.giro-settings {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.giro-header {
    background: yellow;
}

.border-bottom-black {
    border-bottom: 1px solid black;
}

.border-top-black {
    border-top: 1px solid black;
}

.small-font {
    font-size: small;
}

/********************* Override Button ************************/
.btn-primary {
    background-color: #2b2b2b;
    border-color: #000;
}

/**************** Widget icons *******************************/
.status-icon.success {
    background-color: #28a745; /* green */
}

.status-icon.neutral {
    background-color: #6c757d; /* gray  */
}

.status-icon.error {
    background-color: #dc3545; /* red */
}

.status-icon.warning {
    background-color: #f0ad4e; /* yellow */
}