/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * NOTE: This app uses Propshaft, not Sprockets. Use stylesheet_link_tag in layouts to load CSS files.
 */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f9fafb;
  color: #1f2937;
}

.body {
  display: flex;
  height: calc(100vh - 60px);
}

.sidebar {
  width: 260px;
  background-color: #ffffff;
  padding: 8px;
  overflow-y: auto;
  flex-shrink: 0;

  h2 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0;
  }

  /* Match .chat-messages scrollbar style */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;

    &:hover {
      background: #94a3b8;
    }
  }
}

.sidebar-left {
  border-right: 1px solid #e5e7eb;
}

.sidebar-right {
  border-left: 1px solid #e5e7eb;
  width: 310px;
}

.content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

.content-full {
  width: 100%;
  max-width: 100%;
}

.history-empty {
  color: #9ca3af;
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
}

/* Flash messages */
.flash {
  padding: 12px 20px;
  margin: 20px;
  border-radius: 6px;
  font-size: 14px;

  &.alert {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  &.notice {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }

  &.info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
  }
}

/* Header styles */
header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1000;

  .inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* CSS-only rendition of the aibranch.org wordmark — bold "AI" with
     circuit-node decorations, a "branch" wordmark, and a small ".org"
     TLD tail. All glyphs share a single navy → teal → mint gradient
     via background-clip:text so colors stay synced. */
  .logo a.brand {
    /* `inline-block` (not flex) — Chromium drops gradient painting on
       children of a flex container that uses background-clip:text. */
    display: inline-block;
    text-decoration: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.005em;
    /* Slightly tightened gradient so "chat." sits in deep navy and the
       transition to teal still hits around the "AI" → "branch" boundary
       (rather than getting compressed by the longer wordmark). */
    background-image: linear-gradient(95deg,
      #0d2a4a 0%,
      #0e2f54 18%,
      #15466e 40%,
      #1b7390 65%,
      #29a59c 88%,
      #36c4a3 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
  }

  .logo .brand-sub {
    /* Subdomain prefix — smaller and lighter than the main wordmark so
       "AI" remains the visual anchor and the subdomain reads as
       supporting context rather than competing brand. */
    font-weight: 500;
    font-size: 0.7em;
    letter-spacing: -0.005em;
    margin-right: 0.05em;
  }

  .logo .brand-ai {
    /* Serif "AI" — gives the I top/bottom serifs that disambiguate it
       from a lowercase l, and adds the tech-monogram contrast the
       source design has between the AI mark and the sans-serif
       "branch.org" wordmark. Georgia tops at weight 700 (bold), so we
       don't request 900 here to avoid faux-bolding. */
    font-family: Georgia, "Charter", "Iowan Old Style", "Source Serif Pro", serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-right: 2px;
  }

  .logo .brand-branch {
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .logo .brand-tld {
    /* Same baseline as "branch", just smaller and slightly lighter —
       matches the source design where ".org" reads as a continuation
       of the wordmark, not a superscript. */
    font-weight: 600;
    font-size: 0.7em;
    letter-spacing: 0;
  }

  .logo .brand-version {
    /* Semantic app version rendered next to the wordmark. Small, muted,
       intentionally understated so it doesn't compete with the brand. */
    margin-left: 8px;
    font-size: 0.65em;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    vertical-align: middle;
    letter-spacing: 0;
  }

  /* Standalone dots between subdomain / brand / TLD. Sized bigger than
     the surrounding text so they read as substantial separators, and
     given horizontal margin to space the three URL components apart.
     Plain inline (no display:inline-block, no positioning) so the
     parent's background-clip:text gradient keeps painting them. */
  .logo .brand-dot {
    font-weight: 700;
    font-size: 1.15em;
    line-height: 0;
    margin: 0 0.05em;
    vertical-align: -0.02em;
  }

  /* (The source PNG decorates "AI" with circuit-node dots — those
     can't be re-introduced via positioned-span overlays here because
     any inline-block or positioned descendant of a
     background-clip:text element loses gradient inheritance in
     Chromium. If pixel-faithful dots are wanted later, paint them
     with an inline SVG sibling to the wordmark and absolute-position
     it over the AI region.) */

  /* Old non-brand-link fallback (kept in case anything else uses `.logo a`). */
  .logo a:not(.brand) {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
  }

  .header-right {
    display: flex;
    gap: 12px;
    align-items: center;
  }
}

.new-text-button {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;

  &:hover {
    background-color: #2563eb;
  }
}

.signin-button {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
  }
}

.user-menu {
  position: relative;
}

.user-menu-toggle {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.2s;
  anchor-name: --user-menu-anchor;

  &:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
  }
}

.user-email {
  color: #374151;
}

.user-popover-menu {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 4px;
  min-width: 180px;
  margin: 0;

  /* Modern browsers: CSS Anchor Positioning */
  position-anchor: --user-menu-anchor;
  position-area: block-end span-inline-end;
  margin-block-start: 8px;

  /* Fallback for older browsers */
  @supports not (position-area: block-end) {
    position: fixed;
    inset: unset;
  }
}

.user-popover-menu::backdrop {
  background: transparent;
}

.popover-logout-button {
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  color: #374151;
  font-size: 14px;
  transition: background-color 0.2s;

  &:hover {
    background-color: #f3f4f6;
  }
}

/* Banner shown when the signed-in user's Google ID token is expired AND
 * the stored refresh_token can't mint a new one (revoked, missing, etc.).
 * Click bounces back through omniauth; chats_form_controller stashes any
 * unsent prompt in localStorage and re-hydrates after the round-trip. */
.reauth-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  color: #9a3412;
  font-size: 14px;
}

.reauth-banner i.bi {
  font-size: 18px;
  flex-shrink: 0;
}

.reauth-banner-message {
  flex: 1;
}

.reauth-banner-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ea580c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.reauth-banner-button:hover { background: #c2410c; }