/* ============================================================
   Yelin Space — three-layer interaction styles
   Layer 1: Immersive (stage full screen)
   Layer 2: Management (drawer slides in)
   Layer 3: Developer (dev panel from bottom)
   ============================================================ */

/* ===== SPACE CONTAINER ===== */
#space {
  position: fixed; inset: 0;
  background: var(--yl-bg-gradient, var(--yl-bg));
  color: var(--yl-panel-text);
  font-family: var(--yl-font-family);
  transition: background var(--yl-transition);
  overflow: hidden;
}

/* ===== STAGE (Layer 1: full screen, immersive) ===== */
#stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.yl-zone {
  flex: 1; display: flex; flex-direction: column;
  height: 100%;
}

/* ===== DRAWER (Layer 2: slides from left) ===== */
#drawer {
  position: fixed; top: 0; left: 0;
  width: var(--yl-sidebar-width, 300px);
  height: 100vh;
  background: var(--yl-sidebar-bg);
  color: var(--yl-sidebar-text);
  z-index: 300;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s;
  overflow-y: auto;
  box-shadow: none;
  display: flex; flex-direction: column;
  border-radius: 0 50px 50px 0;
}
#drawer.open { transform: translateX(0); box-shadow: 6px 0 32px rgba(0,0,0,0.3); }

#drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 299;
  opacity: 0; pointer-events: none;
  transition: opacity var(--yl-transition);
}
#drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* User info header in drawer */
.yl-drawer-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 14px;
}
.yl-drawer-user-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--yl-accent-subtle); color: var(--yl-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.yl-drawer-user-info { flex: 1; min-width: 0; }
.yl-drawer-user-name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--yl-panel-text);
}
.yl-drawer-user-sig {
  font-size: 12px; opacity: 0.5;
  margin-top: 3px;
  margin-left: calc(var(--yl-dot-size, 6px) + var(--yl-dot-gap, 6px));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.yl-drawer-user-sig:hover { opacity: 0.7; }
.yl-user-dot {
  display: inline-block;
  width: var(--yl-dot-size, 6px); height: var(--yl-dot-size, 6px);
  border-radius: 50%;
  background: var(--yl-success, #4a8);
  margin-right: var(--yl-dot-gap, 6px);
  vertical-align: middle;
}
.yl-drawer-user-status {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.4;
  margin-left: 4px;
}

/* Session new button */
.yl-session-new {
  padding: 6px 10px;
  font-size: 12px;
  opacity: 0.4;
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  transition: background var(--yl-transition), opacity 0.15s;
}
.yl-session-new:hover { background: var(--yl-sidebar-active-bg); opacity: 0.7; }

/* Footer links */
.yl-drawer-footer-link {
  font-size: 13px; cursor: pointer;
  opacity: 0.5; transition: opacity 0.15s;
  white-space: nowrap;
}
.yl-drawer-footer-link:hover { opacity: 0.8; }
.yl-drawer-footer-link + .yl-drawer-footer-link { margin-left: auto; }

.yl-contact-list { flex: 0 0 auto; overflow-y: auto; padding: 4px 0; }

.yl-contact-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 0;
  cursor: pointer;
  transition: background var(--yl-transition), box-shadow 0.2s;
  margin-bottom: 2px;
  position: relative;
}
.yl-contact-item:hover { background: var(--yl-sidebar-active-bg); }
.yl-contact-item.active {
  background: rgba(228,224,215,0.50);
}

.yl-contact-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--yl-accent-subtle); color: var(--yl-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  overflow: hidden;
  background-size: cover; background-position: center;
}
.yl-contact-info { flex: 1; min-width: 0; }
.yl-contact-name {
  font-size: 15px; font-weight: 400; color: #324c77;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.yl-contact-last {
  font-size: 12px; color: #5f5f5f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px; line-height: 1.3;
  min-height: 1.3em;
}
.yl-contact-meta {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  align-self: stretch; justify-content: center; flex-shrink: 0;
}
.yl-contact-time {
  font-size: 10px; opacity: 0.25; white-space: nowrap;
}
.yl-contact-unread {
  font-size: 12px;
  line-height: 1.3;
  color: #c194ab;
}
.yl-contact-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 4px;
  background: var(--yl-accent-subtle); color: var(--yl-accent);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600;
}

/* Session list in drawer (nested under active contact) */
.yl-contact-list .yl-session-list { padding: 2px 10px 6px 66px; max-height: 200px; overflow-y: auto; }
.yl-session-list { padding: 2px 10px 6px; max-height: 200px; overflow-y: auto; }
.yl-session-list .yl-session-item {
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  margin-bottom: 1px; font-size: 13px;
  transition: background var(--yl-transition);
  display: flex; align-items: center; gap: 4px;
}
.yl-session-list .yl-session-item:hover { background: var(--yl-sidebar-active-bg); }
.yl-session-list .yl-session-item.active { background: var(--yl-sidebar-active-bg); color: var(--yl-accent); }
.yl-session-list .yl-session-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yl-session-list .yl-session-meta { font-size: 10px; opacity: 0.3; margin-left: auto; }
.yl-session-list .yl-session-delete { opacity: 0; font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: opacity 0.15s; }
.yl-session-list .yl-session-item:hover .yl-session-delete { opacity: 0.35; }
.yl-session-list .yl-session-delete:hover { opacity: 1; color: var(--yl-danger); }

.yl-drawer-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--yl-border-color);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
  margin-top: auto; /* push to bottom */
}
/* ===== PROFILE CARD OVERLAY ===== */
.yl-profile-overlay {
  position: fixed; inset: 0;
  background: var(--yl-bg, #2a2218);
  z-index: 500;
  overflow-y: auto;
  animation: yl-fade-in 0.25s ease-out;
}

.yl-profile-card {
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.yl-profile-top {
  padding: 16px;
  position: relative;
}
.yl-profile-back {
  background: none; border: none;
  color: var(--yl-panel-text);
  font-size: 14px; cursor: pointer;
  opacity: 0.5; padding: 4px 0;
  font-family: inherit;
}
.yl-profile-back:hover { opacity: 0.8; }

.yl-profile-cover {
  height: 200px;
  position: relative;
  overflow: hidden;
  margin: 0 16px;
  border-radius: 16px;
}
.yl-profile-cover-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(120,160,200,0.15) 0%, rgba(200,160,180,0.15) 100%);
  border-radius: 16px;
}

.yl-profile-avatar-wrap {
  display: flex; justify-content: center;
  margin-top: -40px;
  position: relative; z-index: 1;
}
.yl-profile-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--yl-accent-subtle); color: var(--yl-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  border: 3px solid var(--yl-bg, #2a2218);
  background-size: cover; background-position: center;
}

.yl-profile-info {
  text-align: center; padding: 12px 20px 0;
}
.yl-profile-name { font-size: 18px; font-weight: 500; }
.yl-profile-model { font-size: 11px; opacity: 0.35; margin-top: 4px; }

.yl-profile-quote {
  text-align: center;
  padding: 20px 32px;
  font-size: 13.5px;
  line-height: 1.8;
  opacity: 0.7;
}

.yl-profile-stats {
  text-align: center;
  padding: 0 32px 16px;
  font-size: 12px;
  opacity: 0.4;
  line-height: 2;
}

.yl-profile-entries {
  padding: 12px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.yl-profile-entry {
  font-size: 14px; cursor: pointer;
  opacity: 0.7; transition: opacity 0.15s;
}
.yl-profile-entry:hover { opacity: 1; }
.yl-profile-entry-badge {
  font-size: 11px; opacity: 0.6; margin-left: 8px;
}

.yl-profile-bottom {
  text-align: center;
  padding: 24px 32px;
}
.yl-profile-talk {
  font-size: 14px; cursor: pointer;
  opacity: 0.5; transition: opacity 0.15s;
}
.yl-profile-talk:hover { opacity: 0.8; }


/* ===== BOTTOM SHEET (+号弹出面板) ===== */
.yl-bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--yl-panel-bg, #2a2218);
  border-top: none;
  border-radius: 16px 16px 0 0;
  transform: translateY(calc(100% + 20px));
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.1), box-shadow 0.35s;
  z-index: 160;
  padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  box-shadow: none;
}
.yl-bottom-sheet.open { transform: translateY(0); box-shadow: 0 -4px 20px rgba(0,0,0,0.1); }

.yl-bottom-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 159;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.yl-bottom-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.yl-sheet-actions {
  display: flex; gap: 12px; justify-content: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--yl-border-color);
  margin-bottom: 12px;
}
.yl-sheet-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--yl-panel-text); font-size: 12px;
  padding: 8px 16px; border-radius: 12px;
  transition: background 0.15s;
}
.yl-sheet-action:hover { background: var(--yl-accent-subtle); }
.yl-sheet-action span { font-size: 24px; }

.yl-sheet-toggles {
  display: flex; flex-direction: column; gap: 10px;
}
.yl-sheet-toggle {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; padding: 4px 0;
  color: var(--yl-panel-text);
}
.yl-sheet-toggle-btn {
  background: var(--yl-accent-subtle); border: none;
  padding: 4px 12px; border-radius: 8px;
  font-size: 12px; cursor: pointer;
  color: var(--yl-panel-text);
  transition: background 0.15s, color 0.15s;
}
.yl-sheet-toggle-btn.active {
  background: var(--yl-accent); color: var(--yl-accent-text);
}

/* Plus button in composer */
.yl-plus-btn {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%; border: none;
  background: transparent; color: var(--yl-panel-text);
  font-size: 22px; font-weight: 300;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity 0.15s;
}
.yl-plus-btn:hover { opacity: 0.8; }


/* ===== RIGHT PANEL (slides from right) ===== */
#right-panel {
  position: fixed; top: 0; right: 0;
  width: var(--yl-sidebar-width, 300px);
  height: 100vh;
  background: var(--yl-sidebar-bg);
  color: var(--yl-sidebar-text);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s;
  z-index: 150;
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: none;
  border-radius: 50px 0 0 50px;
}
#right-panel.open { transform: translateX(0); box-shadow: -6px 0 32px rgba(0,0,0,0.3); }

#right-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 149;
  opacity: 0; pointer-events: none;
  transition: opacity var(--yl-transition);
}
#right-panel-backdrop.open { opacity: 1; pointer-events: auto; }

.yl-right-header {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 1;
}
.yl-right-mode-toggle {
  font-size: 13px; cursor: pointer;
  color: #94a9c1;
  text-decoration: underline;
  transition: opacity 0.15s;
}
.yl-right-mode-toggle:hover { opacity: 0.7; }

.yl-right-avatar-area {
  text-align: center;
  height: 35vh;
  padding-top: 56px;
  box-sizing: content-box;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.yl-right-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}
.yl-avatar-upload-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: white;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.25s;
}
.yl-right-avatar-wrap:hover .yl-avatar-upload-overlay { opacity: 1; }
/* ===== AVATAR CROP (inline in right panel body) ===== */
.yl-crop-container {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 16px 0;
  flex: 1;
}
.yl-crop-viewport {
  width: var(--yl-sidebar-width, 350px);
  height: var(--yl-sidebar-width, 350px);
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.yl-crop-viewport:active { cursor: grabbing; }
.yl-crop-img {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  user-select: none;
  pointer-events: none;
}
.yl-crop-mask {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.yl-crop-circle {
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px var(--yl-sidebar-bg, #f5f2ec);
  border: 0.5px solid var(--cl-ink-line, #eeeae5);
}
.yl-crop-zoom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 0 20px;
  width: 80%;
}
.yl-crop-zoom-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 0.5px solid var(--cl-ink-line, #eeeae5);
  background: transparent;
  color: var(--cl-thinking, #a6a6a6);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.yl-crop-zoom-btn:hover { color: #5f5f5f; }
.yl-crop-range {
  flex: 1; height: 2px;
  -webkit-appearance: none; appearance: none;
  background: var(--cl-ink-line, #eeeae5);
  border-radius: 1px; outline: none;
}
.yl-crop-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cl-thinking, #a6a6a6);
  cursor: pointer;
}
.yl-crop-actions {
  margin-top: 12px;
  display: flex; gap: 48px;
  justify-content: center;
}
.yl-crop-actions .yl-btn {
  min-width: 70px;
  background: transparent;
  border: none;
  color: var(--cl-dialogue, #773232);
  font-family: var(--yl-font-family, inherit);
  font-size: 14px;
}
.yl-crop-actions .yl-btn:hover { background: transparent; }
.yl-crop-actions .yl-btn-primary {
  background: transparent;
  border: none;
  color: var(--cl-assistant, #324c77);
}
.yl-crop-actions .yl-btn-primary:hover { background: transparent; }

.yl-right-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--yl-accent-subtle); color: var(--yl-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background-size: cover; background-position: center;
}
.yl-right-name { font-size: 16px; font-weight: 500; margin-top: 20px; }
.yl-right-model { font-size: 13.5px; color: var(--cl-thinking, #a6a6a6); margin-top: 2px; }

#right-body {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.yl-right-mood, .yl-right-dream {
  padding: 0 30px;
  font-size: 14px; line-height: 1.7;
  display: flex; align-items: center;
  height: 50%;
}
.yl-right-mood {
  justify-content: flex-end;
}
.yl-right-dream {
  justify-content: flex-start;
}
.yl-right-mood-text {
  max-width: 80%;
  text-align: right;
  overflow: hidden;
  cursor: pointer;
}
.yl-right-dream-text {
  text-align: left;
  max-width: 90%;
  overflow: hidden;
  cursor: pointer;
}
.yl-dream-char {
  opacity: 0;
  animation: yl-dream-fade 3.5s ease forwards, yl-dream-drift 5s ease-in-out infinite;
}
@keyframes yl-dream-fade {
  to { opacity: 1; }
}
@keyframes yl-dream-drift {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.yl-right-content {
  height: 25vh;
  margin-top: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}

.yl-right-gap-top { flex-grow: 2; }
.yl-right-gap-bottom { flex-grow: 3; }
.yl-right-ink-line {
  width: 70%;
  height: 2px;
  margin: 0 auto;
  transform: translateY(-35px);
  background: linear-gradient(to right, transparent 0%, var(--cl-ink-line, #eeeae5) 20%, var(--cl-ink-line, #eeeae5) 80%, transparent 100%);
  opacity: 0.7;
  flex-shrink: 0;
}
.yl-right-sep {
  display: flex; justify-content: center;
  padding: 0 20px;
}
.yl-right-sep .yl-heart-sep {
  transform: scale(0.75);
}

.yl-right-entries {
  padding: 16px 0;
  display: flex; flex-direction: column; gap: 14px;
  height: 15vh;
  justify-content: center;
  margin-bottom: 10vh;
  flex-shrink: 0;
}
.yl-right-entry {
  font-size: 14px; cursor: pointer;
  color: #5f5f5f;
  transition: opacity 0.15s;
  text-align: center;
  position: relative;
}
.yl-right-entry:hover { opacity: 0.7; }
.yl-right-entry-arrow {
  color: #c9c9c9;
  width: 10.5px; height: 10.5px;
  position: absolute;
  left: calc(50% - 70px);
  top: 50%; transform: translateY(-50%);
}
.yl-right-entry-badge {
  font-size: 11px;
  color: #c194ab;
  position: absolute;
  left: calc(50% + 60px);
  top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  border: 0.1px solid #c194ab;
  border-radius: 5px;
  padding: 0px 11px;
  line-height: 1.4;
}


/* ===== SOVEREIGN MODE (主权者模式) ===== */
.yl-sovereign-active { font-weight: 500; opacity: 0.8 !important; }

.yl-sovereign-prompt-hint {
  text-align: center;
  padding: 12px 20px 8px;
  font-size: 13px;
  opacity: 0.6;
}

.yl-sovereign-hint-sep {
  display: flex; justify-content: center;
  padding: 6px 0 10px;
}
.yl-sovereign-hint-sep .yl-heart-sep {
  transform: scale(0.65);
}
.yl-sovereign-prompt-area {
  padding: 0 20px;
}
.yl-sovereign-prompt {
  width: 100%;
  min-height: 80px;
  background: var(--yl-input-bg, #3a3028);
  color: var(--yl-input-text, #e8ddd0);
  border: 1px solid var(--yl-input-border, rgba(196,154,108,0.2));
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.yl-sovereign-prompt:focus {
  border-color: var(--yl-accent);
}

.yl-sovereign-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 30px 40px;
}
.yl-sov-text { text-align: left; width: 120px; }
.yl-sov-short { text-align: left; width: 60px; }
.yl-sovereign-section {
  font-size: 10px;
  color: var(--cl-thinking, #a6a6a6);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 0 2px;
}
.yl-sovereign-param {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--yl-border-color, rgba(255,255,255,0.06));
}
.yl-sovereign-param-label {
  font-size: 13px;
  color: #5f5f5f;
}
.yl-sovereign-param-val {
  width: 100px;
  text-align: right;
  background: transparent;
  border: none;
  color: #5f5f5f;
  font-size: 14px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
  padding: 4px 0;
}
.yl-sovereign-param-val:focus {
  border-bottom: 1px solid var(--yl-accent);
}


/* ===== DEV PANEL (Layer 3: from bottom, hidden by default) ===== */
#dev-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 55vh; max-height: 480px;
  background: linear-gradient(to bottom, #0e0e16, #08080e);
  color: #8890a4;
  font-family: "SF Mono", "Fira Code", "Menlo", "Consolas", monospace;
  font-size: 11px;
  z-index: 400;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(100,120,180,0.15);
  box-shadow: none;
  border-radius: 16px 16px 0 0;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
#dev-panel.open { transform: translateY(0); box-shadow: 0 -8px 48px rgba(0,0,0,0.5); }

#dev-panel-header {
  padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(100,120,160,0.10);
}
#dev-panel-header span {
  font-size: 10px; font-weight: 700; color: #4a5068;
  text-transform: uppercase; letter-spacing: 2px;
}
#dev-panel-header .yl-close-btn { color: #445; font-size: 18px; }
#dev-panel-header .yl-close-btn:hover { color: #8890a4; }

#dev-panel-body {
  flex: 1; overflow: auto;
  padding: 12px 16px;
}

/* Dev panel form elements */
.dev-section {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(100,120,160,0.06);
}
.dev-section:last-child { border-bottom: none; }
.dev-label {
  font-size: 10px; font-weight: 700; color: #4a5068;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 6px; display: block;
}
.dev-sublabel {
  font-size: 10px; opacity: 0.4; margin-bottom: 6px; display: block;
}

#dev-panel-body textarea {
  width: 100%; background: rgba(255,255,255,0.03);
  color: #a0a8c0; border: 1px solid rgba(100,120,160,0.10);
  border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 11px;
  resize: vertical; outline: none;
  transition: border-color 0.2s;
}
#dev-panel-body textarea:focus { border-color: rgba(100,140,220,0.3); }
#dev-panel-body button {
  padding: 4px 12px; background: rgba(100,120,180,0.06);
  color: #6878a0; border: 1px solid rgba(100,120,160,0.12);
  border-radius: 6px; cursor: pointer; font-size: 11px;
  transition: all 0.2s;
}
#dev-panel-body button:hover { background: rgba(100,120,180,0.12); color: #a0b0d0; }
#dev-panel-body select, #dev-panel-body input[type="text"] {
  background: rgba(255,255,255,0.03); color: #8890a4;
  border: 1px solid rgba(100,120,160,0.10); border-radius: 6px;
  padding: 4px 8px; font-family: inherit; font-size: 11px;
  outline: none;
}

/* Dev data & log */
.dev-data-block {
  background: rgba(0,0,0,0.25); border-radius: 8px;
  padding: 8px 10px; max-height: 160px; overflow: auto;
  font-size: 10px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all;
  border: 1px solid rgba(100,120,160,0.06);
}
.dev-log-entry {
  padding: 2px 0; font-size: 10px; line-height: 1.4;
  border-bottom: 1px solid rgba(100,120,160,0.03);
}
.dev-log-entry:last-child { border-bottom: none; }
.dev-log-ts { color: #3a4060; }
.dev-log-ok { color: #4a8868; }
.dev-log-err { color: #c05050; }
.dev-log-warn { color: #a08840; }

/* Dev panel drag handle */
#dev-panel::before {
  content: ""; display: block;
  width: 36px; height: 4px;
  background: rgba(100,120,180,0.15);
  border-radius: 2px;
  margin: 8px auto 0;
}

/* ===== NOTICE BAR (inside chat, not full-width top) ===== */
#notice-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 6px 14px;
  font-size: 13px;
  text-align: center;
  background: var(--yl-accent);
  color: var(--yl-accent-text);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
#notice-bar.visible { transform: translateY(0); }
#notice-bar .yl-close-btn { color: inherit; }

/* ===== CHAT ZONE SPECIFIC ===== */
.yl-chat-header {
  height: var(--yl-header-height, 56px);
  background: var(--yl-header-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--yl-header-text);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  border-bottom: 1px solid var(--yl-border-color);
  flex-shrink: 0;
}
.yl-chat-header-info { flex: 1; cursor: pointer; -webkit-user-select: none; user-select: none; }

/* ===== SETTINGS (shared, slides from right) ===== */
#settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 500; opacity: 0; visibility: hidden;
  transition: opacity var(--yl-transition), visibility var(--yl-transition);
}
#settings-overlay.open { opacity: 1; visibility: visible; }

.yl-settings-panel {
  position: fixed; top: 0; right: 0;
  width: min(420px, 100vw); height: 100vh;
  background: var(--yl-panel-bg); color: var(--yl-panel-text);
  border-left: 1px solid var(--yl-panel-border);
  overflow-y: auto; z-index: 501;
  transform: translateX(100%);
  transition: transform var(--yl-transition);
}
#settings-overlay.open .yl-settings-panel { transform: translateX(0); }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  html { font-size: var(--yl-font-size-mobile, 16px); }
  .yl-settings-panel { width: 100vw !important; }
  .yl-msg.them .yl-bubble { max-width: 85%; }
  .yl-msg.me .yl-bubble { max-width: 80%; }
  .yl-chat { padding: 12px 10px 8px; }
  .yl-composer { padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)); }
  .yl-menu-btn { display: flex !important; }
}
@media (min-width: 769px) {
  .yl-menu-btn { display: flex !important; }
  .yl-msg.them .yl-bubble { max-width: 75%; }
  .yl-msg.me .yl-bubble { max-width: 70%; }
}