/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The JS toggles the `hidden` attribute; without this a Tailwind display
   utility on the same element wins and the thing stays visible. */
[hidden] {
  display: none !important;
}

/* Reactions rise out of the video and fade. translateY percentages resolve
   against the element's own height, hence vh; the overlay's overflow-hidden
   clips the overshoot at the video's edge. */
.reaction-float {
  position: absolute;
  bottom: 0.5rem;
  animation: reaction-rise 4s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes reaction-rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { transform: translateY(-2vh); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(-60vh); opacity: 0; }
}

/* --- dockable panels ------------------------------------------------------

   The layout controller moves the toolbar and the chat panel between the
   left/bottom/right slots and stamps `data-dock` on them; everything about
   orientation lives here. A slot with nothing visible inside collapses so it
   doesn't leave a phantom gap next to the video. */
.stage-slot:not(:has(> :not([hidden]))) {
  display: none;
}

.stage-toolbar[data-dock="bottom"] {
  margin-top: 0.75rem;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* The side docks are overlay rails pinned inside the video frame — chrome
   floats over the content's edge (the Zoom/tldraw pattern) instead of pushing
   the video aside, and follows the frame through resize and fullscreen. The
   slot itself passes pointer events through; only the panels swallow them. */
.stage-slot-overlay {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  z-index: 10;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  pointer-events: none;
}

/* Toolbar and chat on the same side sit side-by-side as one unit hugging the
   edge: the chat stretches the slot's full height, the rail centres itself. */
.stage-slot-overlay > * {
  pointer-events: auto;
  max-height: 100%;
}

.stage-slot-overlay .stage-toolbar {
  align-self: center;
}

/* Side-docked toolbar: a slim floating rail. One solid surface — legible over
   any video — with the groups flattened into it, nothing boxed twice. */
.stage-toolbar[data-dock="left"],
.stage-toolbar[data-dock="right"] {
  flex-direction: column;
  align-items: stretch;
  width: 6.25rem;
  overflow-y: auto;
  /* A visible scrollbar would eat the rail's width and collapse the two-up
     grids to one-up, which makes it taller — which keeps the scrollbar. The
     rail still scrolls by wheel and touch when it genuinely overflows. */
  scrollbar-width: none;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: rgba(10, 10, 10, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.stage-toolbar[data-dock="left"]::-webkit-scrollbar,
.stage-toolbar[data-dock="right"]::-webkit-scrollbar {
  display: none;
}

.stage-toolbar[data-dock="left"] .toolbar-group,
.stage-toolbar[data-dock="right"] .toolbar-group {
  flex-wrap: wrap;
  justify-content: center;
  background: transparent;
  padding: 0;
}

.stage-toolbar[data-dock="left"] .btn-ghost,
.stage-toolbar[data-dock="right"] .btn-ghost {
  background: transparent;
  text-align: center;
}

.stage-toolbar[data-dock="left"] .btn-ghost:hover,
.stage-toolbar[data-dock="right"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.stage-toolbar[data-dock="left"] .toolbar-share,
.stage-toolbar[data-dock="right"] .toolbar-share {
  margin-left: 0;
  margin-top: 0.25rem;
  flex-direction: column;
  align-items: stretch;
}

.stage-toolbar[data-dock="left"] .toolbar-hint,
.stage-toolbar[data-dock="right"] .toolbar-hint {
  display: none;
}

.stage-chat[data-dock="bottom"] {
  margin-top: 0.75rem;
  height: 16rem;
  width: 100%;
}

/* Side-docked chat: a theater-style panel over the video's edge. The solid
   tint plus blur is the one functional use of backdrop-filter here — text has
   to stay readable over arbitrary content. */
.stage-chat[data-dock="left"],
.stage-chat[data-dock="right"] {
  width: 18rem;
  min-height: 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
}

/* The cursor is the mode — the draw controller stamps data-tool on the canvas.
   Attribute selectors outrank the .cursor-crosshair utility, so the default
   only survives for the drawing tools. */
canvas[data-tool="text"] {
  cursor: text;
}

canvas[data-tool="eraser"] {
  cursor: cell;
}

/* Fresh remote ink flashes its author's name, then fades — attribution as a
   gesture. Lives in the DOM so it never lands in screenshots. */
.ink-author {
  position: absolute;
  transform: translate(10px, -26px);
  pointer-events: none;
  padding: 1px 7px;
  border-radius: 9999px;
  border: 1px solid;
  background: rgba(10, 10, 10, 0.75);
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
  animation: ink-author-fade 2.2s ease-out forwards;
  will-change: opacity;
}

@keyframes ink-author-fade {
  0%, 65% { opacity: 1; }
  100%    { opacity: 0; }
}

/* The status line carries severity via data-level; colour, never layout. */
[data-room-target="status"][data-level="success"] {
  color: #6ee7b7; /* emerald-300 */
}

[data-room-target="status"][data-level="error"] {
  color: #fca5a5; /* red-300 */
}

/* Touch: bigger targets, no hover-only hints. Viewing and pointing come
   first — the mouse-shaped affordances step back. */
@media (pointer: coarse) {
  .toolbar-hint {
    display: none;
  }

  .stage-toolbar .btn-tool,
  .stage-toolbar .btn-ghost {
    padding: 0.625rem;
  }

  .btn-chip {
    padding: 0.375rem 0.625rem;
  }

  [data-resize-target="handle"] {
    height: 2.25rem;
    width: 2.25rem;
    font-size: 1.125rem;
    line-height: 2.25rem;
  }

  /* 16px stops iOS Safari from zooming the page into a focused field. */
  [data-chat-target="input"],
  [data-room-target="name"] {
    font-size: 16px;
  }
}

/* The text tool's floating input, positioned by the draw controller over the
   click point and styled to preview the committed label. */
.stage-text-input {
  position: absolute;
  transform: translateY(-50%);
  min-width: 8rem;
  max-width: 60%;
  padding: 0 0.25rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 0.25rem;
  outline: none;
}

/* Fullscreen wraps the whole stage root — toolbar and chat included — so the
   video container drops its 16:9 box and takes whatever height the docked
   panels and status row leave over. */
[data-controller~="room"]:fullscreen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: #0a0a0a; /* neutral-950 */
  padding: 1rem;
  overflow: auto;
}

[data-controller~="room"]:fullscreen .stage-row,
[data-controller~="room"]:fullscreen .stage-center,
[data-controller~="room"]:fullscreen .stage-media {
  flex: 1 1 auto;
  min-height: 0;
}

/* !important so fullscreen wins over the inline width/height/margin the
   resize handle leaves on the frame; the handle itself makes no sense while
   fullscreen dictates the size. */
[data-controller~="room"]:fullscreen .stage-video {
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto;
}

[data-controller~="room"]:fullscreen [data-resize-target="handle"] {
  display: none;
}