/* ### GLOBAL LAYOUT & TYPOGRAPHY ###
   Sets the base font and outer page margin for a clean, neutral UI baseline. */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

/* ### USER GRID CONTAINER ###
   Flexible, wrapping layout for user panels. Items start from the left, wrap at viewport edge,
   and keep a consistent gap. Ensures multi-column chatboards with tidy spacing. */
.container {
  display: flex;
  flex-wrap: wrap;            /* allow wrapping at the right edge */
  justify-content: flex-start;/* align all panels to the left */
  align-items: flex-start;
  gap: 10px;                  /* space between user panels */
  width: 100%;
  margin-top: 20px;
}

/* ### USER PANEL CARD ###
   Each user’s column: fixed width, soft rounded corners, subtle border, white background.
   Box-sizing ensures padding/borders do not break the fixed width. */
.user-section {
  flex: 0 0 360px;            /* fixed base width in the flex grid */
  width: 360px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
}

/* ### USER NAME DISPLAY ###
   Centered name label with slight emphasis to identify the user panel quickly. */
.name-display {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

/* ### CHAT AREA / MESSAGE STREAM (PHONE LAYOUT) ###
   Flexible message area designed to fill the visible phone screen section.
   Uses vertical flex stacking for message flow and seamless scroll behavior.
   Transparent background and no fixed height — appearance is handled by the frame. */
.chatbox {
  flex: 1;                  /* füllt die Screen-Fläche */
  height: auto;             /* keine fixe Höhe */
  overflow-y: auto;         /* vertikales Scrollen */
  padding: 8px;
  margin: 0;                /* bündig in der Screen-Fläche */
  border: 0;                /* Rahmen kommt vom Screen */
  background: transparent;  /* Hintergrund steuert der Screen */
  display: flex;
  flex-direction: column;
}

.message-input {
  width: 100%;
  padding: 8px;
  border: none;
  border-top: 1px solid #ddd;  /* Trenner zum Verlauf */
  border-radius: 0;
  margin: 0;
  display: none;               /* Script zeigt ein */
  font-size: 14px;
  box-sizing: border-box;
}

/* ### MODERATOR TEXT MARKER (LEGACY) ###
   Keeps moderator-colored text (if used outside bubbles). Subtle gray, italic voice. */
.moderator {
  color: gray;
  font-style: italic;
}

/* ### MESSAGE BLOCK WRAPPER ###
   Vertical spacing between consecutive messages, with a safe max width so long lines wrap nicely. */
.message {
  margin-bottom: 8px;
  max-width: 80%;
}

/* ### TOP ACTION BAR ###
   Horizontal control strip for global actions. Wraps on small screens and keeps consistent spacing. */
.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

/* ### STATUS PANEL (DEBUG/NETWORK FEEDBACK) ###
   Monospace block to display request/response notes. Light background and subtle border. */
.status {
  width: 100%;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Inline status color codes: success vs error. */
.ok  { color: #0a7f41; }
.err { color: #b00020; }

/* ### CHAT BUBBLES — BASE STYLE ###
   Bubble container: rounded rectangle with thin border on white.
   Word wrapping ensures long content doesn’t overflow; pre-wrap preserves intentional line breaks. */
.message .bubble {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* ### INCOMING MESSAGES (OTHER USERS) ###
   Aligned to the left; tail-style rounding on bottom-left corner. */
.message.other {
  align-self: flex-start;
}
.message.other .bubble {
  border-radius: 10px 10px 10px 0;
}

/* ### OWN MESSAGES (CURRENT USER) ###
   Aligned to the right; soft blue fill and border to distinguish author’s messages.
   Tail-style rounding on bottom-right corner. */
.message.own {
  align-self: flex-end;
}
.message.own .bubble {
  background: #e6f3ff;
  border-color: #cde4ff;
  border-radius: 10px 10px 0 10px;
}

/* ### MODERATOR MESSAGES ###
   Narrower layout with pink hairline border and italic style.
   Indented slightly to make room for the overlapping Vye icon. */
.message.moderator {
  position: relative;          /* anchor for the icon */
  align-self: flex-start;
  max-width: 70%;              /* slightly narrower than others */
  margin-left: 20px;           /* inset to make space for icon */
}

/* --- Spacer to prevent icon from colliding with previous message ---
   Creates vertical room above the moderator bubble so the absolutely positioned
   icon (top:-16px) does not overlap previous content. */
.message.moderator::before {
  content: "";
  display: block;
  height: 16px;                /* reserve exactly the icon overlap */
  width: 1px;
}

/* Moderator bubble itself (single, consolidated block) */
.message.moderator .bubble {
  position: relative;
  background: #f6f6f6;
  border: 0.5px solid #ff66cc; /* pink hairline border */
  border-radius: 10px;
  font-style: italic;
  padding-left: 28px;          /* room for the icon to overlap inside-left */
}

/* ### INLINE LABELS (NAME / ROLE) ###
   Spacing and visual hierarchy for name labels preceding message content. */
.sender { margin-right: 6px; }
.moderator-label { color: gray; font-style: italic; font-weight: normal; }

/* ### INTRO MODE: ACTIVE INPUT HIGHLIGHT ###
   Visually marks the current speaker’s input with a thick light-blue border.
   Pairs with the “tab” button to look like a single control group. */
.message-input.input-active {
  border: 2px solid #4da3ff;         /* light blue */
  box-shadow: 0 0 0 3px rgba(77,163,255,0.15);
  background: #ffffff;
}

/* ### INTRO MODE: INACTIVE INPUTS ###
   All non-speaking users get a muted input to convey disabled state. */
.message-input.input-inactive {
  background: #f0f2f5;               /* light gray fill */
  border-color: #d6d9de;
  color: #7a7f87;
}

/* ### INTRO MODE: DONE/NEXT “TAB” BUTTON ###
   Light-blue tab visually attached to the active input (top-right).
   Use together with .input-active to form a single unit. */
.done-next.tab-done {
  position: relative;
  margin-top: 6px;
  align-self: flex-end;               /* keep to the right within the user panel */
  background: #4da3ff;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(77,163,255,0.25);
}
.done-next.tab-done:hover {
  filter: brightness(1.05);
}
.done-next.tab-done:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ### INTRO MODE: SYSTEM HINTS (TEXT-ONLY, NO BUBBLE) ###
   Small auxiliary lines that appear under the last moderator message.
   Active user = light blue; Others = dark blue. Sized like typing indicator. */
.sys-hint--active {
  color: #4da3ff;                     /* light blue text */
  font-size: 12px;
  margin: 6px 0 2px 0;
  padding-top: 6px;
}
.sys-hint--others {
  color: #1f5fbf;                     /* darker blue for others */
  font-size: 12px;
  margin: 6px 0 2px 0;
  padding-top: 6px;
}

/* ### HAIRLINES FOR SYSTEM HINTS ###
   Thin separators to visually distinguish the hint from the previous message. */
.hairline--light {
  border-top: 0.5px solid rgba(77,163,255,0.35);
  margin-top: 6px;
  padding-top: 6px;
}
.hairline--dark {
  border-top: 0.5px solid rgba(31,95,191,0.35);
  margin-top: 6px;
  padding-top: 6px;
}

/* ### MODERATOR ICON (VYE) ###
   Fixed small size; overlaps top-left of moderator bubble at -16px / -10px.
   Using the spacer (::before) above, it will no longer collide with prior messages. */
.vye-icon {
  position: absolute;               /* overlaps above the bubble */
  top: -1px;
left: 6px;                /* sits just outside the left curve */
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}

/* ### RESPONSIVE TWEAKS FOR VYE ICON & BUBBLE ###
   Adjust spacing and bubble width on very small viewports. */
@media (max-width: 480px) {
  .message.moderator {
    max-width: 85%;
    margin-left: 10px;
  }
  .message.moderator .bubble {
    padding-left: 24px;
  }
  .message.moderator::before {
    height: 14px;             /* slightly less spacer on very small screens */
  }
  .vye-icon {
    top: -12px;
    left: -8px;
    width: 18px;
    height: 18px;
  }
}

.device-frame {
  position: relative;
  width: 278px;
  height: 573px;
  margin: 12px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device-frame .iphone {
  width: 100%;
  height: auto;
  display: block;
}

.device-frame .screen {
  position: absolute;
  top: 35px;   /* ergibt 503px sichtbare Höhe bei 573px außen */
  left: 7.5px; /* ergibt 263px sichtbare Breite bei 278px außen */
  width: 263px;
  height: 503px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}

/* ### PHONE SCREEN TYPOGRAPHY ###
   Smaller font size inside the phone frame for better text balance. */
.device-frame .screen {
  font-size: 13px;          /* Basisgröße für Chattexte */
  line-height: 1.4;         /* kompakter Zeilenabstand */
}

.device-frame .chatbox {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.device-frame .message-input {
  width: 100%;
  border: none;
  border-top: 1px solid #ddd;
  padding: 8px;
  font-size: 14px;
}

.device-frame .done-next {
  align-self: flex-end;
  margin: 4px 8px;
}

/* ### USER → FRAME SPACING ###
   Sauberer Abstand zwischen User-UI (oben) und iPhone-Frame (unten). */
.user-section .device-frame {
  margin-top: 12px;        /* Abstand zur User-Box */
}

/* ### FRAME CENTERING ###
   iPhone-Frame innerhalb der Spalte mittig ausrichten. */
.user-section {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Frame mittig unter den User-Inputs */
}

/* Optional: Etwas mehr Luft zwischen mehreren Nutzer-Spalten */
.user-section + .user-section {
  margin-left: 0;           /* Grid/Flex gap steuert Querabstand */
  margin-top: 0;
}

/* ### CHAT INIT: CENTERED LOADING STATE ###
   Centers the loading indicator (logo + text) within the phone frame only while loading.
   Does not affect normal chat rendering after init is complete. */
.device-frame .chatbox.loading {
  display: flex;               /* temporarily override layout during init */
  justify-content: center;
  align-items: center;
  flex-direction: column;      /* stack logo above text */
  gap: 10px;
}

/* Larger loading animation inside the frame */
.device-frame .chatbox.loading .chat-init img {
  width: 56px;    /* adjust 48–64px to taste */
  height: 56px;
  image-rendering: auto;
}

/* Centered, compact init text */
.device-frame .chatbox.loading .chat-init .system-msg {
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
}

.storage-overview {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin: 20px 0;
}

.storage-info {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.filter-panel {
  flex: 1;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.filter-panel label {
  display: block;
  margin: 8px 0;
  font-size: 14px;
}

.filter-panel input[type="range"] {
  width: 100%;
  margin-top: 4px;
}