html, body {
  height: 100%;
  margin: 0;
}

/* Login view (full-screen when not authenticated) */
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
}

.login-view-inner {
  width: 100%;
  max-width: 360px;
  padding: 1.5rem;
}

.login-view-inner .ui.form .field label {
  color: #e5e7eb;
}

.login-view-inner .ui.header {
  color: #f9fafb;
}

.login-view-inner input {
  background: #1f2937;
  color: #f9fafb;
  border-color: #374151;
}

/* Sidebar footer (current user + logout) */
.app-sidebar-footer {
  margin-top: auto;
  padding: 0.75rem 1rem;
}

.app-sidebar-footer .ui.small.text {
  color: #9ca3af;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  word-break: break-all;
}

.app-sidebar-footer .ui.mini.button {
  color: #9ca3af;
  background: transparent;
}

.app-sidebar-footer .ui.mini.button:hover {
  color: #f9fafb;
  background: #374151;
}

/* Overall layout: sidebar + main content */
.app-layout {
  display: flex;
  height: 100vh;
}

.app-sidebar {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  color: #e5e7eb;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.app-sidebar .app-menu {
  width: 100%;
  border-radius: 0;
  border: none;
  background: transparent;
}

.app-sidebar .item {
  padding: 0.75rem 1rem !important;
  color: #9ca3af !important;
}

.app-sidebar .item .icon {
  margin: 0 0.5rem 0 0 !important;
  font-size: 1.25rem !important;
}

.app-sidebar .item.active {
  background: #1f2937 !important;
  color: #f9fafb !important;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
}

.view {
  display: none;
  width: 100%;
  height: 100%;
}

.view.active {
  display: flex;
}

/* Cases view layout (reuse existing grid inside) */
.app.ui.grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  height: 100vh;               /* full screen */
  margin: 0;
}

/* Remove Semantic's default column padding a bit (optional) */
.app > .column {
  padding: 0.75rem !important;
}

/* Make both columns stretch full height */
.sidebar, .chat {
  height: 100%;
}

/* Cases view: flex row, left panel resizable from 350px */
.cases-grid {
  display: flex;
  flex-direction: row;
  height: 100%;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.cases-list {
  flex: 0 0 auto;
  width: 350px;
  min-width: 350px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.cases-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  background: rgba(0, 0, 0, 0.08);
  transition: background 0.15s;
}
.cases-resize-handle:hover,
.cases-resize-handle.resizing {
  background: rgba(0, 0, 0, 0.15);
}

.cases-chat {
  flex: 1 1 auto;
  min-width: 400px;
  height: 100%;
}

/* COLUMN 3: Case details - fixed 360px */
.cases-details-column {
  flex: 0 0 385px;
  width: 385px;
  min-width: 385px;
  max-width: 385px;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid rgba(34, 36, 38, 0.15);
}

.cases-details-inner {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.case-details-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.case-details-panel .case-details-section {
  width: 100%;
}

.case-details-panel .case-ids-table,
.case-details-panel .case-fields-table {
  width: 100%;
  margin-bottom: 1rem;
}

.case-details-panel table {
  width: 100% !important;
}

/* First column of details tables: fixed 75px */
.case-details-panel .case-ids-table tbody td:first-child,
.case-details-panel .case-fields-table thead th:first-child,
.case-details-panel .case-fields-table tbody td:first-child {
  width: 75px;
  min-width: 75px;
  max-width: 75px;
}

/* Second column of compare table (Order): fixed 125px; 3rd column (Case): flexible/non-fixed */
.case-details-panel .case-fields-table th:nth-child(2),
.case-details-panel .case-fields-table td:nth-child(2) {
  width: 125px;
  min-width: 125px;
  max-width: 125px;
}

.case-details-panel .case-files-list {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
}

.case-details-panel .case-details-section:last-child .case-files-list {
  margin-bottom: 0;
}

.case-details-panel .case-files-list li {
  margin-bottom: 0.35rem;
}

.case-details-panel .case-files-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #2185d0;
  text-decoration: none;
}

.case-details-panel .case-files-list a:hover {
  text-decoration: underline;
}

.case-details-panel .case-files-list a i {
  flex-shrink: 0;
}

.case-details-panel .case-details-section h2.ui.sub.header {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}


/* Inner wrappers use flex to create "header + scroll + footer" */
.chat-inner {
  height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
}

.cases-list .sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.cases-list-header {
  flex: 0 0 auto;
  margin: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.cases-list-header .item {
  margin: 0 !important;
}

.cases-list-header-title {
  flex: 0 0 auto;
}

.cases-list-header .ui.icon.input {
  min-width: 0;
}

.cases-list-header .ui.icon.input input {
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
}

/* Cases search above table */
.cases-search-segment {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem !important;
}
.cases-search-segment .ui.input input {
  padding: 0.5rem 0.75rem;
}

/* Cases table scroll: fills parent, overflow scroll */
.cases-table-scroll {
  flex: 1;
  overflow: auto;
  padding: 0 !important;
  min-height: 0;
  width: 100%;
  height: 100%;
}

/* Sidebar scrolling area (legacy / other uses) */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
}

/* Chats view layout: flex row, left panel fixed/resizable 350px */
.chats-grid {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
}

.chats-list {
  flex: 0 0 auto;
  width: 350px;
  min-width: 350px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.chats-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  background: rgba(0, 0, 0, 0.08);
  transition: background 0.15s;
}
.chats-resize-handle:hover,
.chats-resize-handle.resizing {
  background: rgba(0, 0, 0, 0.15);
}

.chats-detail {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Agents view: list left, edit right */
.view-agents {
  height: 100%;
  padding: 0;
}
.agents-grid {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  margin: 0;
  min-width: 0;
}
.agents-list {
  flex: 0 0 auto;
  width: 350px;
  min-width: 350px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
.agents-list .sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.agents-list-header {
  flex: 0 0 auto;
  margin: 0 !important;
}
.agents-table-scroll {
  flex: 1;
  overflow: auto;
  padding: 0 !important;
  min-height: 0;
}
.agents-detail {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.agents-detail-placeholder {
  padding: 2rem;
  color: #999;
}
.agents-detail-content {
  max-width: 42rem;
}
.agents-connections-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
}

/* Chats sidebar: no padding, menu fills area */
.chats-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.chats-list-header {
  flex: 0 0 auto;
  margin: 0 !important;
}

.chats-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 0;
}

.chats-menu {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.chats-menu .item {
  cursor: pointer;
}

.chats-menu .item.active {
  font-weight: 600;
}

.chats-search-wrap {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(34, 36, 38, 0.1);
}

.chats-detail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.chats-tabs {
  flex: 0 0 auto;
}

.chats-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.chats-chat-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.chats-chat-header {
  flex: 0 0 auto;
  margin: 0 !important;
  border-radius: 0 !important;
}

.chats-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #fafafa;
  margin: 0 !important;
  border-radius: 0 !important;
}

.chats-composer {
  flex: 0 0 auto;
  min-height: 5rem;
  margin: 0 !important;
  border-radius: 0 !important;
}

.chats-tab-content #chatMessages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
}

.chats-tab-content #chatMessages .chats-messages-placeholder {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chats-tab-content #chatMessages .chats-messages-loading {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chats-tab-content #conversationDetail {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Cases table: recreated from scratch */
.case-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.case-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
}

.case-table thead th {
  padding: 0.4rem 0.5rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.case-table tbody td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  font-size: inherit;
}

/* Col 1: Escalated (red circular label with 🔥) */
.case-table .case-col-escalated {
  width: 2.5rem;
  min-width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

.case-table .case-col-escalated .ui.circular.label {
  padding: 0.4em;
  min-width: 1.8em;
  min-height: 1.8em;
}

/* Col 2: Accuracy mark (✓ green / ✗ red / —) */
.case-table .case-col-accuracy {
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  text-align: center;
  vertical-align: middle;
}

.case-table .case-accuracy-mark {
  font-weight: 700;
  font-size: 1rem;
}

.case-table tr.accuracy-success .case-accuracy-mark {
  color: #15803d;
}

.case-table tr.accuracy-fail .case-accuracy-mark {
  color: #b91c1c;
}

.case-table tr:not(.accuracy-success):not(.accuracy-fail) .case-accuracy-mark {
  color: #9ca3af;
}

.case-table tr.case-escalated {
  background: #fef08a;
}

.case-table tr.case-escalated.accuracy-success {
  background: #d9f99d;
}

.case-table tr.case-escalated.accuracy-fail {
  background: #fecaca;
}

/* Col 3: IDs */
.case-table .case-col-ids {
  min-width: 0;
  max-width: 40%;
}

/* Col 4: Status + Assignee */
.case-table .case-col-status {
  min-width: 5rem;
  max-width: 8rem;
}

.case-ids-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
}

.case-id-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-id-value {
  font-weight: 600;
  font-size: 0.95em;
}

.case-status-assignee-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.3;
}

.case-status-assignee-cell .case-status-line {
  white-space: nowrap;
}

.case-status-assignee-cell .case-assignee-line {
  font-size: 0.85em;
  color: #6b7280;
}

.case-table .case-col-status .ui.basic.label {
  font-size: inherit;
  padding: 0.25rem 0.5rem;
}

.case-table .order-id-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.case-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #2185d0;
  border-radius: 8px;
  vertical-align: middle;
}

/* Col 4: Title */
.case-table .case-col-title {
  min-width: 0;
}

.case-table .case-col-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row states */
.case-table tbody tr.case-row {
  cursor: pointer;
  background: #fff;
}

.case-table tbody tr.case-row.accuracy-success {
  background: #ecfdf3;
}

.case-table tbody tr.case-row.accuracy-fail {
  background: #fff1f0;
}

.case-table tbody tr.case-row.active {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), inset 0 0 0 2px rgba(59, 130, 246, 0.8);
}

.case-table tbody tr.case-row.has-unread {
  font-weight: 600;
}

/* Placeholder text */
.case-loading-text {
  color: #6b7280;
}

.case-error-text {
  color: #b91c1c;
  font-size: 0.85rem;
}

/* Chat header stays on top automatically via flex layout */
.chat-header {
  flex: 0 0 auto;
}

.chat-header .chat-header-title {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.chat-header .chat-header-title.fluid {
  flex: 1;
  min-width: 0;
}

.chat-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.chat-header-row .chat-title-merchant {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-row .chat-title-merchant .icon {
  flex-shrink: 0;
  margin-right: 0.25rem;
}

.chat-header-row .chat-title-operator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.case-header-toolbelt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.case-header-toolbelt .case-escalation-panel {
  margin: 0;
}

.case-escalation-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.ai-markup-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: 100%;
}

.ai-markup-buttons {
  flex: 0 0 auto;
}

.ai-markup-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  flex-shrink: 0;
}

.case-action-buttons {
  margin: 0 !important;
}

.case-action-buttons .button,
.case-action-buttons .ui.button {
  justify-content: flex-start;
}

.case-panel-grid {
  display: flex;
  flex-wrap: wrap;
}

.case-info-column {
  padding: 0.75rem !important;
  flex: 1 1 auto;
  min-width: 0;
}

.case-fields-column {
  flex: 1 1 auto;
  min-width: 0;
}

.case-actions-column {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.case-assignee-display {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.case-chat-buttons-row {
  margin-top: 0.5rem;
  padding: 0 !important;
}

.case-chat-btn {
  text-align: left !important;
}

.case-escalation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.case-escalation-dot-active {
  background-color: #21ba45; /* green */
}

.case-escalation-dot-disabled {
  background-color: #db2828; /* red */
}

.case-active-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #21ba45;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.case-escalated-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f2c61f;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.case-bot-link {
  color: #2185d0;
  text-decoration: none;
}

.case-bot-link:hover {
  text-decoration: underline;
}

.case-ids-table tr.warning td {
  background-color: #fff8dc !important;
}

.case-escalation-label {
  color: #555;
}

.case-escalation-cell {
  text-align: center;
  width: 32px;
}

.case-escalated-icon {
  font-size: 14px;
  line-height: 1;
}

.chat-header-title .case-details {
  color: #666;
  font-weight: normal;
  margin-top: 0.15rem;
  min-width: 300px;
}

.case-ids-table tbody td:first-child {
  font-weight: 600;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

.case-fields-table tbody td:first-child {
  font-weight: 600;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.case-ids-table,
.case-fields-table {
  font-size: 1.1rem;
  table-layout: fixed;
}

.case-order-ids {
  margin-top: 0.2rem;
}

.case-order-id-line {
  margin-bottom: 0.15rem;
}

.case-order-id-line:last-child {
  margin-bottom: 0;
}

.case-order-id-label {
  font-weight: 600;
  color: #374151;
  margin-right: 0.25rem;
}

.case-order-id-value {
  font-weight: 600;
  font-size: 0.85rem;
}

.copy-on-click {
  cursor: pointer;
}

.copy-on-click:hover {
  text-decoration: underline;
}

.copy-feedback-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  padding: 0.4rem 0.75rem;
  background: #1f2937;
  color: #f9fafb;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.copy-feedback-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* Chat messages scroll */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #fafafa;
}

/* Composer pinned bottom - ensure always visible */
.chat-composer {
  flex: 0 0 auto;
  min-height: 7rem;
}

/* Menu stretched to full width of composer, items equal width */
.chat-composer .chat-target-menu.ui.menu {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.chat-composer .chat-target-menu .chat-target-item {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  display: flex;
  align-items: center;
}
/* Menu target buttons: look like menu items, not default button */
.chat-target-menu .chat-target-item {
  cursor: pointer;
  border: none;
  background: transparent;
  font: inherit;
}
.chat-target-menu .chat-target-item:hover {
  background: rgba(0, 0, 0, 0.05);
}
/* Selected target (override Semantic UI menu item styles) */
.chat-composer .chat-target-menu .chat-target-item.chat-target-selected,
.ui.menu.chat-target-menu .chat-target-item.chat-target-selected {
  font-weight: 600 !important;
  color: #2185d0 !important;
  background: rgba(33, 133, 208, 0.15) !important;
  border-radius: 0.28571429rem;
}
.chat-composer .chat-target-menu .chat-target-item.chat-target-selected .icon,
.ui.menu.chat-target-menu .chat-target-item.chat-target-selected .icon {
  color: #2185d0 !important;
}

/* Timeline layout: one message per row, placed by role */
.agent-timeline {
  width: 100%;
}

.agent-timeline-head,
.timeline-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  overflow: visible;
}

.timeline-cell {
  display: flex;
  overflow: visible;
}

.agent-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: visible;
}

.role-agentA-cell {
  justify-content: flex-start;
}

.role-agentB-cell {
  justify-content: center;
  align-items: center;
}

.role-agentC-cell {
  justify-content: flex-end;
}

.message-card {
  width: 360px !important;
  min-width: 360px;
  max-width: 360px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.role-agentA {
  border-top: 3px solid #3b82f6;
}

.role-agentB {
  border-top: 3px solid #16a34a;
}

.role-agentC {
  border-top: 3px solid #f59e0b;
}

.message-card.role-assistant {
  background-color: #eff6ff;
  border-left: 3px solid #3b82f6;
}

.message-card.team-octo {
  background-color: #dcfce7 !important;
  border-left: 4px solid #16a34a !important;
  color: #14532d;
}

.message-card .header {
  font-size: 0.7rem;
  white-space: nowrap;
}

.system-line {
  width: 360px;
  max-width: 360px;
  text-align: center;
  color: #6b7280;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0.25rem 0.35rem;
}

.reaction-line {
  color: #6b7280;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0.25rem 0.35rem;
  white-space: nowrap;
}

.reaction-line--left {
  text-align: left;
}

.reaction-line--right {
  text-align: right;
}

.message-card .description p {
  margin: 0.4rem 0 0;
  white-space: pre-wrap;
}

.message-attachments {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.message-attachments .attachment-card {
  margin: 0 !important;
}

.message-attachments .attachment-image .image {
  max-width: 280px;
  max-height: 200px;
  overflow: hidden;
  border-radius: 0.28571429rem;
}

.message-attachments .attachment-image img {
  width: 100%;
  height: auto;
  display: block;
}

.message-attachments .attachment-file .content a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.message-reactions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.message-reactions .reaction-emoji-h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  cursor: default;
}

.message-card .message-time {
  font-size: 0.85em;
  font-weight: normal;
  color: #6b7280;
  margin-left: 0.5rem;
}

@media (max-width: 720px) {
  .app-layout {
    flex-direction: column;
  }

  .app-sidebar {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }

  .app-main {
    height: calc(100vh - 64px);
  }

  .cases-grid {
    flex-direction: column;
  }

  .cases-list,
  .cases-chat,
  .cases-details-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .cases-resize-handle {
    display: none;
  }

  .timeline-row {
    grid-template-columns: 1fr;
  }
}