/* Self-hosted via @fontsource-variable/inter — no render-blocking Google Fonts request */
@import "@fontsource-variable/inter";

@import "tailwindcss";
@import "@agent-native/core/styles/agent-native.css";
@import "@agent-native/toolkit/styles.css";

@source "./**/*.{ts,tsx}";

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 0 0% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 95%;
  --accent-foreground: 0 0% 15%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 40%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 97%;
  --sidebar-foreground: 0 0% 45%;
  --sidebar-primary: 0 0% 15%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 15%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 40%;
  --mail-sidebar-surface: hsl(var(--muted) / 0.5);
  --mail-sidebar-hover-surface: hsl(var(--accent));
  --mail-message-surface: hsl(var(--card));
  --mail-drawer-surface: hsl(var(--background) / 0.85);
  --mail-toast-surface: hsl(var(--card));
  --mail-toast-border: hsl(var(--border));
  --mail-overlay-scrim: hsl(0 0% 0% / 0.2);
}

.dark {
  --background: 0 0% 13%;
  --foreground: 0 0% 90%;
  --card: 0 0% 15%;
  --card-foreground: 0 0% 90%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 90%;
  --primary: 0 0% 75%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 90%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 90%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 60%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 13%;
  --sidebar-foreground: 0 0% 60%;
  --sidebar-primary: 0 0% 75%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 60%;
  --mail-sidebar-surface: hsl(0 0% 14%);
  --mail-sidebar-hover-surface: hsl(0 0% 18%);
  --mail-message-surface: hsl(0 0% 16%);
  --mail-drawer-surface: hsl(0 0% 14% / 0.9);
  --mail-toast-surface: hsl(0 0% 15%);
  --mail-toast-border: hsl(0 0% 26%);
  --mail-overlay-scrim: hsl(0 0% 6% / 0.32);
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-family: "Inter Variable", "Inter", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
  /* Prevent text selection on double-click for keyboard nav UX */
  .email-list-row {
    user-select: none;
  }
}

@container agent-native-main (min-width: 980px) {
  .mail-contact-side-panel {
    display: flex;
  }
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

/* Email body prose reset */
.email-body-content {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(var(--foreground));
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}
.email-body-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.email-body-content p {
  margin-bottom: 0.75rem;
}
.email-body-content img {
  max-width: 100%;
  height: auto;
}
.email-body-content pre,
.email-body-content table {
  max-width: 100%;
  overflow-x: auto;
}

/* Keyboard shortcut hint badges */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 3px;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0;
}

/* Highlight focused email row */
.email-list-row.focused {
  background: hsl(var(--accent));
}

/* Selected email row — stronger highlight */
.email-list-row.selected {
  background: hsl(var(--secondary));
}

/* Multi-selected email rows */
.email-list-row.multi-selected {
  background: hsl(var(--primary) / 0.06);
}
.email-list-row.multi-selected.focused {
  background: hsl(var(--primary) / 0.12);
}

/* Compose modal animations */
.compose-window {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px hsl(var(--border));
}

/* Label badge colors */
.label-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Date/actions container on email rows — reserve enough room for actions. */
.email-list-row .row-action-rail {
  position: relative;
  display: flex;
  width: 3rem;
  height: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  margin-left: 0.75rem;
}

@media (min-width: 640px) {
  .email-list-row .row-action-rail {
    width: 9rem;
  }
}

.email-list-row .hover-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  background: hsl(var(--background));
  transition: opacity 120ms ease;
  z-index: 2;
}
.email-list-row.focused .hover-actions,
.email-list-row:hover .hover-actions {
  opacity: 1;
  pointer-events: auto;
}
.email-list-row.focused .hover-actions {
  background: hsl(var(--accent));
}
.email-list-row.selected .hover-actions {
  background: hsl(var(--secondary));
}
.email-list-row.focused .row-time,
.email-list-row:hover .row-time {
  visibility: hidden;
}

@media (max-width: 639px) {
  .email-list-row:hover .hover-actions,
  .email-list-row.focused .hover-actions {
    opacity: 0;
    pointer-events: none;
  }

  .email-list-row:hover .row-time,
  .email-list-row.focused .row-time {
    visibility: visible;
  }
}

/* Sonner toast — readable width with room for actions */
[data-sonner-toaster] {
  --width: min(36rem, calc(100vw - 2rem)) !important;
}
[data-sonner-toast] {
  width: fit-content !important;
  min-width: min(20rem, calc(100vw - 2rem)) !important;
  max-width: var(--width) !important;
  overflow-wrap: normal !important;
}
[data-sonner-toast] [data-content] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}
[data-sonner-toast] [data-title],
[data-sonner-toast] [data-description] {
  overflow-wrap: break-word !important;
}
[data-sonner-toast] [data-button] {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* Keep toast chrome on Mail's lighter dark gray surface. */
.dark [data-sonner-toast] {
  background: var(--mail-toast-surface) !important;
  border-color: var(--mail-toast-border) !important;
  color: hsl(var(--foreground)) !important;
}

/* Sonner cancel button style — match action button but muted */
[data-sonner-toast] [data-cancel] {
  background: transparent !important;
  color: hsl(220, 10%, 50%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  margin-left: 16px !important;
}
[data-sonner-toast] [data-cancel]:hover {
  color: hsl(220, 10%, 70%) !important;
}

/* ===== Compose Rich Text Editor (Tiptap) ===== */

.compose-editor-wrapper {
  position: relative;
}

.compose-editor {
  outline: none;
  font-family: "Inter Variable", "Inter", sans-serif;
  color: hsl(var(--foreground));
  line-height: 1.65;
  font-size: 0.875rem;
}

.compose-editor > *:first-child {
  margin-top: 0;
}

/* Headings */
.compose-editor h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 1em 0 0.25em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.compose-editor h2 {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0.8em 0 0.2em;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.compose-editor h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0.6em 0 0.15em;
  line-height: 1.4;
}

/* Paragraphs */
.compose-editor p {
  margin: 0.85em 0;
  min-height: 1.65em;
}

/* Placeholders */
.compose-editor p.is-editor-empty:first-child::before,
.compose-editor p.is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  height: 0;
}

/* Lists */
.compose-editor ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0.2em 0;
}
.compose-editor ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 0.2em 0;
}
.compose-editor li {
  margin: 0.1em 0;
}
.compose-editor li p {
  margin: 0;
}

/* Blockquote */
.compose-editor blockquote {
  border-left: 3px solid hsl(var(--foreground));
  padding-left: 1em;
  margin: 0.4em 0;
}

/* Code block */
.compose-editor .compose-code-block,
.compose-editor pre {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  background: hsl(var(--muted));
  border-radius: 6px;
  padding: 0.75em 1em;
  padding-top: 1.75em;
  margin: 0.4em 0;
  overflow-x: auto;
  line-height: 1.5;
  position: relative;
}
.compose-editor pre code {
  font-family: inherit;
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
  color: inherit;
}

/* Images */
.compose-editor .compose-image {
  max-width: 100%;
  border-radius: 6px;
  display: block;
}

.compose-image-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  font-size: 0.875rem;
  margin: 0.3em 0;
}
.compose-image-placeholder:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.compose-image-placeholder[data-selected] {
  outline: 2px solid hsl(210 100% 52%);
  outline-offset: -2px;
}

.compose-image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin: 0.3em 0;
}
.compose-image-wrapper[data-selected] {
  outline: 2px solid hsl(210 100% 52%);
  outline-offset: -2px;
}

.compose-image-overlay {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.compose-image-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: hsl(0 0% 10% / 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 5px;
  color: hsl(0 0% 92%);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.compose-image-btn:hover {
  background: hsl(0 0% 18% / 0.85);
}
.compose-image-btn--danger:hover {
  background: hsl(0 65% 40% / 0.85);
}

/* Inline code */
.compose-editor code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: hsl(var(--muted));
  color: hsl(0 70% 55%);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.dark .compose-editor code {
  color: hsl(0 60% 65%);
}

/* Links */
.compose-link {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--muted-foreground));
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.compose-link:hover {
  text-decoration-color: hsl(var(--foreground));
}

/* Horizontal rule */
.compose-editor hr {
  border: none;
  border-top: 1px solid hsl(var(--border));
  margin: 1em 0;
}

/* Text formatting */
.compose-editor strong {
  font-weight: 600;
}
.compose-editor em {
  font-style: italic;
}
.compose-editor s {
  text-decoration: line-through;
}

/* Selection */
.compose-editor ::selection {
  background: hsl(210 100% 52% / 0.2);
}

/* ===== Bubble Toolbar ===== */
.bubble-toolbar {
  display: flex;
  align-items: center;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-radius: 8px;
  padding: 4px;
  box-shadow:
    0 4px 20px rgb(0 0 0 / 0.25),
    0 0 0 1px hsl(var(--border));
}

/* ===== Slash Command Menu ===== */
.slash-command-menu {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow:
    0 4px 24px rgb(0 0 0 / 0.12),
    0 0 0 1px rgb(0 0 0 / 0.04);
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
}
.slash-command-menu button {
  color: hsl(var(--foreground));
}
.slash-command-menu button:hover,
.slash-command-menu button.active {
  background: hsl(var(--accent));
}

/* ===== Code Block Language Picker ===== */
.code-lang-picker {
  pointer-events: auto;
}

.code-lang-select {
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.65rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 0.15s ease;
}
.code-lang-select:hover {
  color: hsl(var(--foreground));
}
.code-lang-select:focus {
  color: hsl(var(--foreground));
}

/* ===== Syntax Highlighting (lowlight) ===== */
.compose-editor pre code .hljs-comment,
.compose-editor pre code .hljs-quote {
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.compose-editor pre code .hljs-keyword,
.compose-editor pre code .hljs-selector-tag {
  color: hsl(280 70% 55%);
}
.dark .compose-editor pre code .hljs-keyword,
.dark .compose-editor pre code .hljs-selector-tag {
  color: hsl(280 60% 70%);
}

.compose-editor pre code .hljs-string,
.compose-editor pre code .hljs-attr,
.compose-editor pre code .hljs-template-tag,
.compose-editor pre code .hljs-template-variable {
  color: hsl(140 50% 38%);
}
.dark .compose-editor pre code .hljs-string,
.dark .compose-editor pre code .hljs-attr,
.dark .compose-editor pre code .hljs-template-tag,
.dark .compose-editor pre code .hljs-template-variable {
  color: hsl(140 50% 60%);
}

.compose-editor pre code .hljs-number,
.compose-editor pre code .hljs-literal {
  color: hsl(20 80% 48%);
}
.dark .compose-editor pre code .hljs-number,
.dark .compose-editor pre code .hljs-literal {
  color: hsl(20 80% 65%);
}

.compose-editor pre code .hljs-built_in,
.compose-editor pre code .hljs-type,
.compose-editor pre code .hljs-params {
  color: hsl(30 70% 48%);
}
.dark .compose-editor pre code .hljs-built_in,
.dark .compose-editor pre code .hljs-type,
.dark .compose-editor pre code .hljs-params {
  color: hsl(30 70% 65%);
}

.compose-editor pre code .hljs-function,
.compose-editor pre code .hljs-title {
  color: hsl(210 70% 48%);
}
.dark .compose-editor pre code .hljs-function,
.dark .compose-editor pre code .hljs-title {
  color: hsl(210 70% 65%);
}

.compose-editor pre code .hljs-tag,
.compose-editor pre code .hljs-name,
.compose-editor pre code .hljs-selector-id,
.compose-editor pre code .hljs-selector-class {
  color: hsl(0 65% 50%);
}
.dark .compose-editor pre code .hljs-tag,
.dark .compose-editor pre code .hljs-name,
.dark .compose-editor pre code .hljs-selector-id,
.dark .compose-editor pre code .hljs-selector-class {
  color: hsl(0 60% 68%);
}

.compose-editor pre code .hljs-attribute {
  color: hsl(30 70% 48%);
}
.dark .compose-editor pre code .hljs-attribute {
  color: hsl(30 60% 65%);
}

.compose-editor pre code .hljs-regexp,
.compose-editor pre code .hljs-link {
  color: hsl(160 50% 42%);
}
.dark .compose-editor pre code .hljs-regexp,
.dark .compose-editor pre code .hljs-link {
  color: hsl(160 50% 60%);
}

.compose-editor pre code .hljs-symbol,
.compose-editor pre code .hljs-bullet {
  color: hsl(280 55% 50%);
}
.dark .compose-editor pre code .hljs-symbol,
.dark .compose-editor pre code .hljs-bullet {
  color: hsl(280 50% 68%);
}

.compose-editor pre code .hljs-meta {
  color: hsl(var(--muted-foreground));
}

.compose-editor pre code .hljs-deletion {
  color: hsl(0 65% 50%);
  background: hsl(0 65% 50% / 0.1);
}

.compose-editor pre code .hljs-addition {
  color: hsl(140 50% 38%);
  background: hsl(140 50% 38% / 0.1);
}

.compose-editor pre code .hljs-emphasis {
  font-style: italic;
}

.compose-editor pre code .hljs-strong {
  font-weight: 700;
}

/* Inbox Zero — negative margin pulls content up behind the header (keeps header in flow so it doesn't overlap the agent sidebar) */
.inbox-zero .inbox-zero-header {
  margin-bottom: -3rem;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  /* Scrim text (tabs, icons) */
  --foreground: 0 0% 95%;
  --muted-foreground: 0 0% 82%;
  --border: 0 0% 100% / 0.22;
  --ring: 0 0% 100% / 0.4;
}

.inbox-zero-top-scrim {
  height: 14rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.56) 0%,
    rgba(0, 0, 0, 0.32) 34%,
    rgba(0, 0, 0, 0.14) 66%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Inbox Zero — frosted glass effect on the agent chat sidebar */
.inbox-zero .agent-sidebar-panel {
  /* position + z-index create a stacking context above the position:fixed
     background image so the background and blur are visible in production */
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);

  --foreground: 0 0% 95%;
  --muted-foreground: 0 0% 70%;
  --border: 0 0% 100% / 0.1;
  --accent: 0 0% 100% / 0.08;
}