/*!
 * Kite UI — shared interface component classes
 * An opt-in utility layer of surface, list and messaging component classes used
 * across Kite front-ends. Purely class-based: including it does not restyle a
 * host page's base elements — a project uses only the classes it wants. Colours
 * resolve from CSS custom properties supplied by the consuming app, so the layer
 * adapts to any theme. Served from the shared asset CDN for a consistent baseline
 * and edge cache reuse across deployments.
 *
 * channel: stable
 */

/* ── Surfaces ── */
.glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
.glass-hover:hover {
  background: var(--glass-bg-hover);
}

.card-depth {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}
.card-depth::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, #10b981, #059669);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.card-depth:hover::after {
  transform: scaleX(1);
}
.card-depth:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.4),
    0 4px 6px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
.light .card-depth {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
}
.light .card-depth:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

.card-interactive {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.card-interactive:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 30px -5px rgba(16, 185, 129, 0.15);
  transform: translateY(-2px);
}
.light .card-interactive:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 0 30px -5px rgba(16, 185, 129, 0.1);
}

.list-item-hover {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.list-item-hover:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.light .list-item-hover:hover {
  background-color: #f3f4f6;
}

/* ── Messaging surface ── */
.chat-background {
  background-color: #0f0f10;
}
.light .chat-background {
  background-color: #f5f5f5;
}

.chat-bubble {
  position: relative;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-width: 65%;
  border-radius: 1rem;
}
.chat-bubble-incoming {
  background-color: rgba(255, 255, 255, 0.08);
  color: #e9edef;
  border-bottom-left-radius: 0.375rem;
}
.chat-bubble-outgoing {
  background-color: #38674a;
  color: #e9edef;
  border-bottom-right-radius: 0.375rem;
}
.light .chat-bubble-incoming {
  background-color: #ffffff;
  color: #111b21;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.light .chat-bubble-outgoing {
  background-color: #d9fdd3;
  color: #111b21;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.dark .chat-bubble-incoming {
  background-color: rgba(255, 255, 255, 0.08);
  color: #e9edef;
}
.dark .chat-bubble-outgoing {
  background-color: #38674a;
  color: #e9edef;
}
.chat-bubble-outgoing .text-destructive {
  color: #fd7878fc;
  font-size: 0.80rem;
}
.light .chat-bubble-outgoing .text-destructive {
  color: #dc2626;
  font-size: 0.80rem;
}

.chat-bubble-time {
  font-size: 10px;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  float: right;
  margin-left: 8px;
  margin-bottom: -4px;
  position: relative;
  top: 4px;
}
.chat-bubble-time span {
  color: rgba(255, 255, 255, 0.4);
}
.chat-bubble-incoming .chat-bubble-time span {
  color: rgba(255, 255, 255, 0.4);
}
.chat-bubble-outgoing .chat-bubble-time span {
  color: rgba(255, 255, 255, 0.6);
}
.light .chat-bubble-time span {
  color: rgba(17, 27, 33, 0.45);
}
.light .chat-bubble-outgoing .chat-bubble-time span {
  color: rgba(17, 27, 33, 0.6);
}
.chat-bubble-outgoing .chat-bubble-time .status-icon {
  color: rgba(255, 255, 255, 0.6);
  width: 16px;
  height: 16px;
}
.chat-bubble-outgoing .chat-bubble-time .status-icon.text-blue-400 {
  color: #53bdeb !important;
}
.light .chat-bubble-outgoing .chat-bubble-time .status-icon {
  color: rgba(17, 27, 33, 0.4);
}
.light .chat-bubble-outgoing .chat-bubble-time .status-icon.text-blue-400 {
  color: #53bdeb !important;
}

.reply-preview {
  border-left-width: 2px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border-left-color: #4ade80;
  margin-bottom: 8px;
  padding: 8px 10px;
}
.reply-preview p {
  color: rgba(255, 255, 255, 0.7);
}
.reply-preview .font-medium {
  color: #4ade80;
}
.light .reply-preview {
  background: rgba(0, 0, 0, 0.04);
  border-left-color: #16a34a;
}
.light .reply-preview p {
  color: rgba(17, 27, 33, 0.7);
}
.light .reply-preview .font-medium {
  color: #16a34a;
}
.chat-bubble-outgoing .reply-preview {
  background: rgba(0, 0, 0, 0.2);
  border-left-color: rgba(255, 255, 255, 0.5);
}
.chat-bubble-outgoing .reply-preview p {
  color: rgba(255, 255, 255, 0.7);
}
.chat-bubble-outgoing .reply-preview .font-medium {
  color: rgba(255, 255, 255, 0.9);
}
.light .chat-bubble-outgoing .reply-preview {
  background: rgba(0, 0, 0, 0.08);
  border-left-color: #166534;
}
.light .chat-bubble-outgoing .reply-preview p {
  color: rgba(17, 27, 33, 0.7);
}
.light .chat-bubble-outgoing .reply-preview .font-medium {
  color: #166534;
}

.button-reply-bubble {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #4ade80;
  font-weight: 500;
}
.button-reply-bubble .chat-bubble-time {
  color: rgba(255, 255, 255, 0.4);
}
.chat-bubble-outgoing .button-reply-bubble {
  color: rgba(255, 255, 255, 0.95);
}
.light .button-reply-bubble {
  color: #16a34a;
}
.light .button-reply-bubble .chat-bubble-time {
  color: rgba(17, 27, 33, 0.45);
}
.light .chat-bubble-outgoing .button-reply-bubble {
  color: #166534;
}

.interactive-buttons {
  border-radius: 0 0 1rem 1rem;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.15);
}
.interactive-buttons > div {
  border-color: rgba(255, 255, 255, 0.15);
  color: #4ade80;
}
.interactive-buttons > div:hover {
  background: rgba(255, 255, 255, 0.08);
}
.chat-bubble-outgoing .interactive-buttons {
  border-color: rgba(255, 255, 255, 0.2);
}
.chat-bubble-outgoing .interactive-buttons > div {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}
.chat-bubble-outgoing .interactive-buttons > div:hover {
  background: rgba(255, 255, 255, 0.1);
}
.light .interactive-buttons {
  border-color: rgba(0, 0, 0, 0.1);
}
.light .interactive-buttons > div {
  border-color: rgba(0, 0, 0, 0.1);
  color: #16a34a;
}
.light .interactive-buttons > div:hover {
  background: rgba(0, 0, 0, 0.05);
}
.light .chat-bubble-outgoing .interactive-buttons > div {
  color: #166534;
}

.reaction-badge {
  padding: 0.125rem 0.25rem;
  border-radius: 9999px;
  background-color: hsl(var(--muted) / 0.5);
  font-size: 0.875rem;
}
.reactions-display {
  margin-top: 4px;
}

/* ── Motion ── */
@keyframes highlight-pulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: hsl(var(--primary) / 0.15); }
}
.highlight-message {
  animation: highlight-pulse 0.5s ease-in-out 2;
  border-radius: 0.5rem;
}

/* ── Emoji picker theming ── */
.v3-emoji-picker.v3-color-theme-dark {
  --v3-picker-bg: hsl(0 0% 6%);
  --v3-picker-fg: hsl(0 0% 95%);
  --v3-picker-border: hsl(0 0% 16%);
  --v3-picker-input-bg: hsl(0 0% 12%);
  --v3-picker-input-border: hsl(0 0% 20%);
  --v3-picker-input-focus-border: hsl(142 70% 49%);
  --v3-picker-emoji-hover: hsl(0 0% 12%);
}
.light .v3-emoji-picker {
  --v3-picker-bg: hsl(0 0% 100%);
  --v3-picker-fg: hsl(217 19% 27%);
  --v3-picker-border: hsl(214.3 31.8% 91.4%);
  --v3-picker-input-bg: hsl(0 0% 100%);
  --v3-picker-input-border: hsl(214.3 31.8% 91.4%);
  --v3-picker-input-focus-border: hsl(142 70% 49%);
  --v3-picker-emoji-hover: hsl(210 40% 96.1%);
}