/* App Layout Structure */

/* Main container - centers content with responsive padding */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-4);
  width: 100%;
}

/* App shell - full height layout.
   Bounded to the viewport, not just floored at it: with only min-height the
   shell grew to fit its content and pushed the composer below the fold. The
   chat scrolls internally, so the shell itself must never exceed the screen.
   svh tracks mobile browser chrome as it hides and shows. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Header - clean and minimal */
.app-header {
  /* Opaque: at 0.9 alpha the blur underneath is barely visible, but a
     sticky full-width backdrop-filter re-blurs the region every frame
     that anything scrolls or animates beneath it. */
  background: rgb(32, 37, 42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* The header is persistent chrome above the conversation; it should cost as
     little vertical space as its controls need. */
  padding: var(--s-2) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  pointer-events: none;
  /* Let clicks pass through empty space */
}

/* Robust Grid Layout */
.app-header .container {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-areas: "left center right";
  align-items: center;
  width: 100%;
  max-width: none;
  /* FORCE FULL WIDTH - NO CENTER COLUMN CONSTRAINT */
  padding: 0 var(--s-8);
  /* Push sides far apart */
  /* Ensure header stack on small screens */
  gap: var(--s-4);
}

/* Error banner - a full-width row of its own; auto-placed, it would take the
   empty left cell under the fixed dashboard buttons */
.error-banner {
  grid-column: 1 / -1;
  background: rgba(245, 101, 101, 0.1);
  border: 1px solid rgba(245, 101, 101, 0.2);
  color: var(--status-error);
  padding: var(--s-4);
  border-radius: var(--r-m);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.error-close {
  width: 24px;
  height: 24px;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--status-error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.error-close:hover {
  background: rgba(245, 101, 101, 0.2);
}

.header-brand {
  grid-area: center;
  position: relative;
  /* In-flow */
  left: auto;
  top: auto;
  transform: none;
  /* Reset absolute */

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  gap: var(--s-1);
  min-width: 0;
}

.app-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--coral);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}



.app-subtitle {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: var(--s-1) 0 0 0;
  font-weight: 400;
  white-space: normal;
  /* Allow wrapping */
  line-height: 1.3;
}

.user-section {
  grid-area: right;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  /* Grid and flex items default to min-width:auto, which refuses to shrink
     below content width - the sign-in row then pushes the header wider than
     the viewport and the whole page scrolls sideways. */
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-signed-in {
  color: var(--ink);
  font-weight: 500;
  padding: var(--s-2) var(--s-3);
  background: rgba(78, 205, 196, 0.1);
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.user-signed-in .username {
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}

.signout-button {
  padding: var(--s-1) var(--s-3);
  background: var(--coral);
  color: white;
  border-radius: var(--r-s);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.signout-button:hover {
  background: rgba(255, 107, 107, 0.8);
}

.user-forms {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* Column flex stretches children to the widest one by default, which blows
     "Create Account" up to the full width of the sign-in row beneath it. */
  align-items: flex-end;
}

.user-form {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.user-form label {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.user-form input {
  padding: var(--s-2) var(--s-3);
  border: 1px solid rgba(78, 205, 196, 0.2);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  /* Shrinkable: a hard min-width here is what forces the header past the
     viewport edge on narrow screens. */
  width: 100%;
  min-width: 0;
  max-width: 160px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.user-form input:focus {
  outline: none;
  border-color: var(--teal);
}

.user-form button {
  padding: var(--s-2) var(--s-3);
  background: var(--teal);
  color: white;
  border-radius: var(--r-s);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.user-form button:hover {
  background: var(--coral);
}

.btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  border: none;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-icon:hover {
  background: var(--teal);
  color: white;
}

/* Connection status indicator */
.connection-status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 500;
}

.connection-status .status-dot {
  line-height: 1;
}

.connection-status .status-label {
  white-space: nowrap;
}

.status-connected {
  color: var(--status-connected);
}

.status-connecting {
  color: var(--status-connecting);
}

.status-reconnecting {
  color: var(--status-connecting);
}

/* Main content area */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* No hardcoded header height: `calc(100vh - 60px)` assumed a 60px header, so
     any other header height pushed the composer past the bottom of the screen.
     .app is a column flex, so flex: 1 takes exactly the space the header leaves.
     min-height: 0 lets this shrink below its content so the chat scrolls
     internally instead of overflowing the viewport. */
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
}

/* Chat Canvas - The main immersion area.
   Two columns: the Daily Focus panel is docked beside the conversation instead
   of floating over it, so nothing overlaps the messages. */
.chat-canvas {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--focus-column-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "focus chat"
    "focus composer";
  position: relative;
  width: 100%;
  /* The canvas spans the window. Capping it here left symmetric dead bands at
     both edges on wide screens and put the transcript's scrollbar ~70px inside
     the right edge with black gutter beyond it. The conversation is kept
     readable by capping .messages-list, which centres the text column while
     the scrollbar stays at the window edge. */
  max-width: none;
  margin: 0;
  padding: var(--s-3);
  background: transparent;
  /* Allow rope glow to overflow; scroll handled by .chat-scroll */
  overflow: visible;
}

/* Utility Sidebar - TEMPORARILY HIDDEN */
/* We are moving this to a drawer in Phase 2 */
.utility-sidebar {
  display: none;
}

/* ---------------------------------------------------------------
   Mobile layout
   The 3-column header grid has no room to resolve below ~900px:
   the brand collides with the action buttons and the user section
   overflows the viewport.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .app-header {
    padding: var(--s-2) 0;
  }

  .app-header .container {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "left center right";
    padding: 0 var(--s-3);
    gap: var(--s-2);
  }

  /* Subtitle is marketing copy - it costs three lines on a phone. */
  .app-subtitle {
    display: none;
  }

  .app-title {
    font-size: var(--text-base);
    white-space: nowrap;
  }

  .user-signed-in {
    padding: var(--s-1) var(--s-2);
    gap: var(--s-2);
    font-size: var(--text-xs);
  }

  /* The username is the widest node in the bar and the user already knows who
     they are; the drawer shows it in full. */
  .user-signed-in .username {
    display: none;
  }

  .user-section {
    gap: var(--s-2);
  }

  /* No room for a side column: focus band stacks above the conversation. */
  .chat-canvas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "focus"
      "chat"
      "composer";
    padding: var(--s-2);
  }

  .connection-status .status-label {
    /* "Ready to chat!" wraps to three lines in a narrow column;
       the coloured dot already carries the state (label kept as tooltip). */
    display: none;
  }
}

@media (max-width: 640px) {
  .app-header .container {
    padding: 0 var(--s-2);
  }

  /* Center column has nothing left to show once the subtitle is gone
     and the sides need the room. */
  .header-brand {
    display: none;
  }

  /* `height: auto` here released the viewport bound that .app-main relies on:
     the transcript then grew past the bottom of the screen and the last
     messages sat underneath the composer instead of scrolling inside it. */
  .app-main {
    min-height: 0;
    flex: 1;
  }

  .chat-canvas {
    padding: var(--s-2);
  }
}

/* Respect the iOS home indicator / notch. */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    .app-header {
      padding-top: max(var(--s-2), env(safe-area-inset-top));
    }
  }
}