:root {
       --sidebar-w: 272px;
       --sidebar-mini: 80px;
       --header-h: 72px;
       --ease: all .3s cubic-bezier(.4, 0, .2, 1)
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box
   }

   body {
       font-family: 'Plus Jakarta Sans', 'Inter', sans-serif
   }

   .app-container {
       display: flex;
       min-height: 100vh
   }

   .sidebar {
       width: var(--sidebar-w);
       min-width: var(--sidebar-w);
       height: 100vh;
       position: fixed;
       left: 0;
       top: 0;
       z-index: 50;
       transition: var(--ease);
       display: flex;
       flex-direction: column;
       overflow: hidden
   }

   .sidebar.collapsed {
       width: var(--sidebar-mini);
       min-width: var(--sidebar-mini)
   }

   .sidebar-nav {
       flex: 1;
       overflow-y: auto;
       overflow-x: hidden
   }

   .sidebar-nav::-webkit-scrollbar {
       width: 4px
   }

   .sidebar-nav::-webkit-scrollbar-thumb {
       background: rgba(148, 163, 184, .3);
       border-radius: 10px
   }

   .main-wrapper {
       flex: 1;
       margin-left: var(--sidebar-w);
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       transition: var(--ease)
   }

   body.sidebar-collapsed .main-wrapper {
       margin-left: var(--sidebar-mini)
   }

   .header {
       height: var(--header-h);
       min-height: var(--header-h);
       position: sticky;
       top: 0;
       z-index: 40
   }

   .main-content {
       flex: 1;
       overflow-x: hidden
   }

   ::-webkit-scrollbar {
       width: 6px
   }

   ::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 10px
   }

   .dark ::-webkit-scrollbar-thumb {
       background: #334155
   }

   .menu-item {
       position: relative
   }

   .menu-item.active>a,
   .menu-item.active>button {
       background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(139, 92, 246, .1))
   }

   .menu-item.active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 3px;
       height: 60%;
       background: linear-gradient(180deg, #3b82f6, #8b5cf6);
       border-radius: 0 4px 4px 0
   }

   .submenu {
       max-height: 0;
       overflow: hidden;
       transition: max-height .4s cubic-bezier(.4, 0, .2, 1)
   }

   .submenu.open {
       max-height: 500px
   }

   .menu-arrow {
       transition: transform .3s
   }

   .menu-arrow.rotated {
       transform: rotate(90deg)
   }

   .sidebar-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .6);
       backdrop-filter: blur(4px);
       z-index: 45;
       opacity: 0;
       visibility: hidden;
       transition: var(--ease)
   }

   .sidebar-overlay.active {
       opacity: 1;
       visibility: visible
   }

   .dropdown-panel {
       position: absolute;
       top: 100%;
       right: 0;
       margin-top: 8px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px) scale(.95);
       transition: var(--ease);
       z-index: 9999;
       pointer-events: none
   }

   .dropdown-panel.active {
       opacity: 1;
       visibility: visible;
       transform: translateY(0) scale(1);
       pointer-events: auto
   }

   .gradient-animated {
       background-size: 200% 200%;
       animation: gs 6s ease infinite
   }

   @keyframes gs {
       0% {
           background-position: 0% 50%
       }

       50% {
           background-position: 100% 50%
       }

       100% {
           background-position: 0% 50%
       }
   }

   .ripple {
       position: relative;
       overflow: hidden
   }

   .ripple::after {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(circle, rgba(255, 255, 255, .3) 10%, transparent 10.01%);
       transform: scale(10);
       opacity: 0;
       transition: transform .5s, opacity .8s
   }

   .ripple:active::after {
       transform: scale(0);
       opacity: 1;
       transition: 0s
   }

   .badge-pulse {
       position: relative
   }

   .badge-pulse::after {
       content: '';
       position: absolute;
       inset: -2px;
       border-radius: 50%;
       background: inherit;
       animation: bp 1.5s infinite;
       z-index: -1
   }

   @keyframes bp {
       0% {
           transform: scale(1);
           opacity: .5
       }

       100% {
           transform: scale(2);
           opacity: 0
       }
   }

   @keyframes pd {
       0% {
           box-shadow: 0 0 0 0 rgba(16, 185, 129, .5)
       }

       70% {
           box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
       }

       100% {
           box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
       }
   }

   .pulse-dot {
       animation: pd 2s infinite
   }

   .toast-container {
       position: fixed;
       top: 20px;
       right: 20px;
       z-index: 99999;
       display: flex;
       flex-direction: column;
       gap: 10px;
       max-width: calc(100vw - 40px)
   }

   .toast {
       padding: 14px 20px;
       border-radius: 12px;
       color: #fff;
       font-weight: 500;
       font-size: 14px;
       display: flex;
       align-items: center;
       gap: 10px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
       animation: ti .4s cubic-bezier(.4, 0, .2, 1);
       min-width: 280px;
       max-width: 420px
   }

   .toast.toast-out {
       animation: to .3s forwards
   }

   @keyframes ti {
       from {
           transform: translateX(100%);
           opacity: 0
       }

       to {
           transform: translateX(0);
           opacity: 1
       }
   }

   @keyframes to {
       from {
           transform: translateX(0);
           opacity: 1
       }

       to {
           transform: translateX(100%);
           opacity: 0
       }
   }

   .toast-success {
       background: linear-gradient(135deg, #10b981, #059669)
   }

   .toast-danger {
       background: linear-gradient(135deg, #ef4444, #dc2626)
   }

   .toast-warning {
       background: linear-gradient(135deg, #f59e0b, #d97706)
   }

   .toast-info {
       background: linear-gradient(135deg, #3b82f6, #2563eb)
   }

   .modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .6);
       backdrop-filter: blur(6px);
       z-index: 99990;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       visibility: hidden;
       transition: var(--ease);
       padding: 16px
   }

   .modal-overlay.active {
       opacity: 1;
       visibility: visible
   }

   .modal-box {
       transform: scale(.9) translateY(20px);
       transition: var(--ease);
       max-height: 90vh;
       overflow-y: auto
   }

   .modal-overlay.active .modal-box {
       transform: scale(1) translateY(0)
   }

   [data-tooltip] {
       position: relative
   }

   [data-tooltip]::after {
       content: attr(data-tooltip);
       position: absolute;
       bottom: calc(100% + 8px);
       left: 50%;
       transform: translateX(-50%) translateY(5px);
       padding: 6px 12px;
       background: #1e293b;
       color: #fff;
       font-size: 12px;
       font-weight: 500;
       border-radius: 8px;
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
       transition: var(--ease);
       pointer-events: none;
       z-index: 99999
   }

   .dark [data-tooltip]::after {
       background: #f1f5f9;
       color: #0f172a
   }

   [data-tooltip]:hover::after {
       opacity: 1;
       visibility: visible;
       transform: translateX(-50%) translateY(0)
   }

   .theme-transition,
   .theme-transition *,
   .theme-transition *::before,
   .theme-transition *::after {
       transition: background-color .3s, color .3s, border-color .3s !important
   }

   .form-input {
       width: 100%;
       padding: 10px 16px;
       background: #f8fafc;
       border: 2px solid #e2e8f0;
       border-radius: 12px;
       font-size: 14px;
       color: #0f172a;
       transition: var(--ease);
       outline: none
   }

   .form-input:focus {
       border-color: #3b82f6;
       background: #fff;
       box-shadow: 0 0 0 4px rgba(59, 130, 246, .1)
   }

   .dark .form-input {
       background: #1e293b;
       border-color: #334155;
       color: #f1f5f9
   }

   .dark .form-input:focus {
       background: #0f172a;
       border-color: #3b82f6
   }

   .form-label {
       display: block;
       font-size: 13px;
       font-weight: 600;
       color: #334155;
       margin-bottom: 8px
   }

   .dark .form-label {
       color: #cbd5e1
   }

   /* ===== MESSAGING LAYOUT ===== */
   .messages-container {
       display: grid;
       grid-template-columns: 320px 1fr;
       height: calc(100vh - var(--header-h) - 32px);
       gap: 16px;
       padding: 16px
   }

   @media(min-width:1280px) {
       .messages-container {
           grid-template-columns: 320px 1fr 300px;
           padding: 24px;
           gap: 24px;
           height: calc(100vh - var(--header-h) - 48px)
       }
   }

   @media(max-width:768px) {
       .messages-container {
           grid-template-columns: 1fr;
           padding: 12px;
           gap: 12px;
           height: calc(100vh - var(--header-h) - 24px)
       }
   }

   /* Conversation List */
   .convo-list {
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       display: flex;
       flex-direction: column;
       overflow: hidden
   }

   .dark .convo-list {
       background: #0f172a;
       border-color: #334155
   }

   .convo-scroll {
       flex: 1;
       overflow-y: auto
   }

   .convo-scroll::-webkit-scrollbar {
       width: 4px
   }

   .convo-scroll::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 10px
   }

   .convo-item {
       padding: 12px;
       border-radius: 12px;
       cursor: pointer;
       transition: var(--ease);
       position: relative
   }

   .convo-item:hover {
       background: #f1f5f9
   }

   .dark .convo-item:hover {
       background: #1e293b
   }

   .convo-item.active {
       background: linear-gradient(135deg, rgba(59, 130, 246, .1), rgba(139, 92, 246, .05));
       border-left: 3px solid #3b82f6
   }

   .dark .convo-item.active {
       background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(139, 92, 246, .1))
   }

   .convo-item.unread {
       background: rgba(59, 130, 246, .02)
   }

   .dark .convo-item.unread {
       background: rgba(59, 130, 246, .05)
   }

   .convo-item.unread .convo-name {
       font-weight: 700;
       color: #0f172a
   }

   .dark .convo-item.unread .convo-name {
       color: #f1f5f9
   }

   /* Chat Area */
   .chat-area {
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       display: flex;
       flex-direction: column;
       overflow: hidden
   }

   .dark .chat-area {
       background: #0f172a;
       border-color: #334155
   }

   .chat-messages {
       flex: 1;
       overflow-y: auto;
       padding: 20px;
       display: flex;
       flex-direction: column;
       gap: 12px
   }

   .chat-messages::-webkit-scrollbar {
       width: 6px
   }

   .chat-messages::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 10px
   }

   .dark .chat-messages::-webkit-scrollbar-thumb {
       background: #334155
   }

   .msg-bubble {
       max-width: 70%;
       padding: 12px 16px;
       border-radius: 18px;
       position: relative;
       animation: msgIn .3s ease
   }

   @keyframes msgIn {
       from {
           opacity: 0;
           transform: translateY(10px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   .msg-incoming {
       background: #f1f5f9;
       color: #0f172a;
       border-bottom-left-radius: 4px;
       align-self: flex-start
   }

   .dark .msg-incoming {
       background: #1e293b;
       color: #f1f5f9
   }

   .msg-outgoing {
       background: linear-gradient(135deg, #3b82f6, #8b5cf6);
       color: #fff;
       border-bottom-right-radius: 4px;
       align-self: flex-end
   }

   .msg-time {
       font-size: 10px;
       opacity: .7;
       margin-top: 4px;
       display: flex;
       align-items: center;
       gap: 4px
   }

   .msg-outgoing .msg-time {
       justify-content: flex-end
   }

   .date-divider {
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 8px 0;
       color: #94a3b8;
       font-size: 11px;
       font-weight: 600
   }

   .date-divider::before,
   .date-divider::after {
       content: '';
       flex: 1;
       height: 1px;
       background: #e2e8f0
   }

   .dark .date-divider::before,
   .dark .date-divider::after {
       background: #334155
   }

   /* Typing indicator */
   .typing {
       display: inline-flex;
       gap: 3px;
       padding: 12px 16px
   }

   .typing span {
       width: 6px;
       height: 6px;
       background: #94a3b8;
       border-radius: 50%;
       animation: typing 1.4s infinite
   }

   .typing span:nth-child(1) {
       animation-delay: 0s
   }

   .typing span:nth-child(2) {
       animation-delay: .2s
   }

   .typing span:nth-child(3) {
       animation-delay: .4s
   }

   @keyframes typing {

       0%,
       60%,
       100% {
           transform: translateY(0);
           opacity: .4
       }

       30% {
           transform: translateY(-4px);
           opacity: 1
       }
   }

   /* Message input */
   .msg-input-area {
       padding: 16px;
       border-top: 1px solid #e2e8f0;
       background: #fff
   }

   .dark .msg-input-area {
       border-color: #334155;
       background: #0f172a
   }

   .msg-input {
       width: 100%;
       padding: 12px 16px;
       background: #f1f5f9;
       border: 2px solid transparent;
       border-radius: 24px;
       font-size: 14px;
       outline: none;
       resize: none;
       transition: var(--ease);
       max-height: 120px;
       font-family: inherit
   }

   .msg-input:focus {
       background: #fff;
       border-color: #3b82f6;
       box-shadow: 0 0 0 4px rgba(59, 130, 246, .1)
   }

   .dark .msg-input {
       background: #1e293b;
       color: #f1f5f9
   }

   .dark .msg-input:focus {
       background: #0f172a;
       border-color: #3b82f6
   }

   /* Right Panel */
   .info-panel {
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       overflow-y: auto;
       padding: 20px
   }

   .dark .info-panel {
       background: #0f172a;
       border-color: #334155
   }

   /* Status dots */
   .status-online {
       background: #10b981
   }

   .status-offline {
       background: #94a3b8
   }

   .status-away {
       background: #f59e0b
   }

   .avatar-status {
       position: relative;
       flex-shrink: 0
   }

   .avatar-status::after {
       content: '';
       position: absolute;
       bottom: 0;
       right: 0;
       width: 12px;
       height: 12px;
       border-radius: 50%;
       border: 2px solid #fff
   }

   .dark .avatar-status::after {
       border-color: #0f172a
   }

   .avatar-status.online::after {
       background: #10b981;
       box-shadow: 0 0 0 0 rgba(16, 185, 129, .4);
       animation: pd 2s infinite
   }

   .avatar-status.offline::after {
       background: #94a3b8
   }

   .avatar-status.away::after {
       background: #f59e0b
   }

   /* Label badges */
   .label-support {
       background: #dbeafe;
       color: #2563eb
   }

   .label-sales {
       background: #d1fae5;
       color: #059669
   }

   .label-vip {
       background: #fef3c7;
       color: #d97706
   }

   .label-urgent {
       background: #fee2e2;
       color: #dc2626
   }

   .dark .label-support {
       background: rgba(59, 130, 246, .2);
       color: #60a5fa
   }

   .dark .label-sales {
       background: rgba(16, 185, 129, .2);
       color: #34d399
   }

   .dark .label-vip {
       background: rgba(245, 158, 11, .2);
       color: #fbbf24
   }

   .dark .label-urgent {
       background: rgba(239, 68, 68, .2);
       color: #f87171
   }

   .filter-chip {
       padding: 6px 12px;
       border-radius: 8px;
       font-size: 11px;
       font-weight: 600;
       transition: var(--ease);
       cursor: pointer;
       white-space: nowrap;
       background: transparent;
       color: #64748b
   }

   .filter-chip.active {
       background: #3b82f6;
       color: #fff
   }

   .filter-chip:not(.active):hover {
       background: #f1f5f9
   }

   .dark .filter-chip:not(.active):hover {
       background: #1e293b
   }

   /* Mobile: Toggle between list and chat */
   @media(max-width:768px) {
       .convo-list.hide-mobile {
           display: none
       }

       .chat-area.hide-mobile {
           display: none
       }
   }

   /* Emoji picker */
   .emoji-picker {
       position: absolute;
       bottom: 70px;
       right: 16px;
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 12px;
       padding: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
       display: none;
       z-index: 100
   }

   .emoji-picker.active {
       display: block
   }

   .dark .emoji-picker {
       background: #0f172a;
       border-color: #334155
   }

   .emoji-grid {
       display: grid;
       grid-template-columns: repeat(8, 1fr);
       gap: 4px
   }

   .emoji-btn {
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       border-radius: 8px;
       cursor: pointer;
       transition: var(--ease)
   }

   .emoji-btn:hover {
       background: #f1f5f9;
       transform: scale(1.2)
   }

   .dark .emoji-btn:hover {
       background: #1e293b
   }

   @media(max-width:1024px) {
       .sidebar {
           transform: translateX(-100%)
       }

       .sidebar.mobile-open {
           transform: translateX(0)
       }

       .main-wrapper {
           margin-left: 0 !important
       }
   }

   @media(max-width:640px) {
       :root {
           --header-h: 60px
       }

       .toast {
           min-width: auto;
           max-width: calc(100vw - 40px);
           font-size: 13px
       }

       .dropdown-panel.mobile-full {
           position: fixed !important;
           top: var(--header-h) !important;
           left: 8px !important;
           right: 8px !important;
           width: auto !important;
           max-height: 70vh;
           overflow-y: auto;
           margin-top: 4px !important
       }
   }

   @media(max-width:375px) {
       .header-icons {
           gap: 2px
       }

       .header-icons .icon-btn {
           width: 32px;
           height: 32px
       }
   }