/* Valerie v3 additions only. Your main UI CSS is left untouched. */
.v3-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;text-align:left}
.v3-form-grid label{display:block;color:var(--text3);font-size:12px;margin:0 0 5px}
.v3-form-grid input,.v3-form-grid select,.v3-modal select{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:10px;margin-bottom:8px;font-family:'DM Sans',sans-serif}
.v3-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v3-plan-card{border:1px solid var(--border2);border-radius:12px;background:var(--bg4);padding:16px;text-align:center}
.v3-plan-card h3{font-family:'Cormorant Garamond',serif;color:var(--gold2);font-size:26px}
.v3-plan-card p{font-size:22px;margin:10px 0;color:var(--text)}
.v3-modal-btn,.v3-plan-card button,.v3-form-grid button,.v3-settings button{padding:9px 13px;border-radius:8px;border:1px solid var(--gold-dim);background:var(--bg5);color:var(--gold3);cursor:pointer;font-family:'DM Sans',sans-serif;margin:4px}
.v3-profile-avatar-big{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#8a5e20);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:36px;color:#0a0908;cursor:pointer}
.chat-menu-btn{float:right;border:0;background:transparent;color:var(--text3);cursor:pointer;font-size:18px;padding:0 4px}
.chat-menu-pop{position:absolute;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;z-index:300;box-shadow:0 10px 30px rgba(0,0,0,.55);overflow:hidden}
.chat-menu-pop button{display:block;width:100%;padding:9px 14px;background:transparent;border:0;color:var(--text2);text-align:left;cursor:pointer}
.chat-menu-pop button:hover{background:var(--bg4);color:var(--gold3)}
@media(max-width:800px){.v3-form-grid,.v3-plan-grid{grid-template-columns:1fr}}


/* =========================================================
   VALERIE V3 LOGIN INPUT FIX
   Stops Chrome autofill from turning fields white
   ========================================================= */

.v3-modal input,
.v3-modal select,
.v3-modal textarea {
  background: rgba(5, 4, 3, 0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--gold2);
}

.v3-modal input::placeholder,
.v3-modal textarea::placeholder {
  color: rgba(214, 201, 164, 0.42) !important;
}

/* Chrome / Edge autofill fix */
.v3-modal input:-webkit-autofill,
.v3-modal input:-webkit-autofill:hover,
.v3-modal input:-webkit-autofill:focus,
.v3-modal input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--gold2) !important;
  transition: background-color 999999s ease-in-out 0s !important;
  box-shadow: 0 0 0 1000px rgba(5, 4, 3, 0.96) inset !important;
  border: 1px solid var(--gold-dim) !important;
}

/* Firefox autofill-ish states */
.v3-modal input:autofill {
  background: rgba(5, 4, 3, 0.96) !important;
  color: var(--text) !important;
}

/* Focus glow, Noir-gold style */
.v3-modal input:focus,
.v3-modal select:focus,
.v3-modal textarea:focus {
  border-color: var(--gold-dim) !important;
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.18),
    0 0 18px rgba(201, 168, 76, 0.10) !important;
}

/* Checkbox fix */
.v3-modal input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--gold);
  box-shadow: none !important;
}

/* Login modal spacing polish */
.v3-form-grid h3 {
  color: var(--gold3);
  font-size: 18px;
  margin: 0 0 10px;
}

.v3-form-grid label {
  color: var(--text3);
}

.v3-form-grid input {
  margin-bottom: 12px;
}



/* =========================================================
   VALERIE ANSWER ACTIONS: COPY / LIKE / DISLIKE / RETRY
   ========================================================= */

.v3-answer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  opacity: 0.58;
  transition: opacity 0.18s ease;
}

.msg-row.ai:hover .v3-answer-actions {
  opacity: 1;
}

.v3-answer-btn {
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.v3-answer-btn:hover {
  color: var(--gold3);
  transform: translateY(-1px);
}

.v3-answer-btn i {
  pointer-events: none;
}

/* =========================================================
   VALERIE CODE BLOCK CARDS
   ========================================================= */

.v3-code-card {
  margin: 12px 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(12, 12, 14, 0.92);
  border: 1px solid rgba(214, 177, 85, 0.16);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.v3-code-head {
  height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    rgba(22, 22, 24, 0.92);
  border-bottom: 1px solid rgba(214, 177, 85, 0.12);
}

.v3-code-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.v3-code-title i {
  color: var(--gold3);
  font-size: 15px;
}

.v3-code-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v3-code-btn,
.v3-code-run {
  border: 1px solid rgba(214, 177, 85, 0.22);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  cursor: pointer;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.v3-code-btn {
  width: 36px;
}

.v3-code-run {
  gap: 8px;
  padding: 0 16px;
  font-weight: 700;
}

.v3-code-btn:hover,
.v3-code-run:hover {
  border-color: var(--gold-dim);
  color: var(--gold3);
  background: rgba(214, 177, 85, 0.10);
  transform: translateY(-1px);
}

.v3-code-pre {
  margin: 0;
  padding: 22px 26px;
  overflow-x: auto;
  max-height: 520px;
  background:
    radial-gradient(circle at top left, rgba(214, 177, 85, 0.035), transparent 34%),
    rgba(4, 4, 5, 0.88);
}

.v3-code-pre code {
  font-family:
    "JetBrains Mono",
    "Fira Code",
    Consolas,
    monospace;
  font-size: 14px;
  line-height: 1.65;
  color: #e9e1c8;
  white-space: pre;
}

.v3-code-preview-frame {
  width: min(900px, 82vw);
  height: min(620px, 70vh);
  border: 1px solid rgba(214, 177, 85, 0.18);
  border-radius: 14px;
  background: white;
}


.v3-code-icon {
  color: var(--gold3);
  font-family: monospace;
  font-size: 15px;
  letter-spacing: -0.04em;
}

.v3-code-copy,
.v3-code-run {
  border: 1px solid rgba(214, 177, 85, 0.25);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  cursor: pointer;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.v3-code-copy {
  padding: 0 14px;
  font-weight: 700;
}

.v3-code-run {
  gap: 8px;
  padding: 0 16px;
  font-weight: 700;
}

.v3-code-copy:hover,
.v3-code-run:hover {
  border-color: var(--gold-dim);
  color: var(--gold3);
  background: rgba(214, 177, 85, 0.10);
  transform: translateY(-1px);
}

/* =========================================================
   VALERIE V3 CHAT ATTACH + ANSWER ACTIONS PATCH
   ========================================================= */

.chat-inspect-attach-btn {
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.chat-inspect-attach-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold3);
  background: rgba(214, 177, 85, 0.10);
  transform: translateY(-1px);
}

.v3-answer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  opacity: 0.68;
  transition: opacity 0.18s ease;
}

.msg-row.ai:hover .v3-answer-actions {
  opacity: 1;
}

.v3-answer-btn {
  border: 1px solid rgba(214, 177, 85, 0.20);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
  font-family: "DM Sans", sans-serif;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.v3-answer-btn:hover {
  color: var(--gold3);
  border-color: var(--gold-dim);
  background: rgba(214, 177, 85, 0.10);
  transform: translateY(-1px);
}

.img-previews {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.img-preview-item {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(214, 177, 85, 0.25);
  background: rgba(0,0,0,0.25);
}

.img-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-preview-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  color: white;
  display: grid;
  place-items: center;
  font-size: 11px;
  cursor: pointer;
}


/* =========================================================
   PROFILE AVATAR + GENDER SELECT PATCH
   ========================================================= */

.v3-profile-avatar-big {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

#profileGender {
  margin-bottom: 8px;
}




/* =========================================================
   COMPOSER DISCLAIMER / LEGAL MICROCOPY
   ========================================================= */

.composer-disclaimer {
  margin-top: 8px;
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(214, 201, 164, 0.52);
}

.composer-disclaimer button {
  border: 0;
  background: transparent;
  color: var(--gold3);
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.composer-disclaimer button:hover {
  color: var(--gold2);
}





/* =========================================================
   POLICY / COOKIE MODAL TEXT
   ========================================================= */

.v3-policy-text {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.65;
}

.v3-policy-text h3 {
  color: var(--gold3);
  font-size: 18px;
  margin: 16px 0 8px;
}

.v3-policy-text p {
  margin: 0 0 12px;
}

.v3-cookie-options {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.v3-cookie-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text2);
}
/* Valerie full image preview lightbox */
.v3-image-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
}
.v3-image-lightbox img{
  max-width:min(96vw,1400px);
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:18px;
  border:1px solid rgba(245,210,110,.35);
  box-shadow:0 22px 80px rgba(0,0,0,.65);
}
.v3-image-lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(245,210,110,.45);
  background:rgba(20,16,10,.85);
  color:#f6df9b;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.msg-img-thumb,.gallery-item{cursor:zoom-in;}


/* ============================================================
   VALERIE DESKTOP POLISH PATCH
   Fixes footer/info alignment + sidebar chat three-dot buttons.
   Safe CSS-only repair.
   ============================================================ */

/* Bottom disclaimer/info line */
.disclaimer,
.footer-note,
.footer,
.bottom-info,
.info-footer,
#disclaimer,
#footerInfo {
  position: fixed !important;
  left: var(--sidebar-w, 260px) !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 35 !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 3px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--text3, #7a6e58) !important;
  background: rgba(10, 9, 8, .96) !important;
  border-top: 1px solid rgba(201, 168, 76, .12) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* In case the footer is just loose text/buttons near the bottom */
.main > p:last-child,
.main > div:last-child:not(.input-area):not(.chat-area):not(.topbar) {
  max-height: 28px;
}

/* Cookie/info buttons inside bottom line */
.disclaimer button,
.disclaimer a,
.footer-note button,
.footer-note a,
.footer button,
.footer a,
.bottom-info button,
.bottom-info a,
.info-footer button,
.info-footer a,
#disclaimer button,
#disclaimer a,
#footerInfo button,
#footerInfo a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 17px !important;
  min-height: 17px !important;
  padding: 0 5px !important;
  margin: 0 2px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(201,168,76,.24) !important;
  background: rgba(201,168,76,.055) !important;
  color: var(--gold2, #e8c97a) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

/* Give composer room so footer doesn't overlap the input */
.input-area {
  padding-bottom: 28px !important;
}

/* Sidebar chat list polish */
.chat-list,
.recent-list,
.sidebar-chats {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Chat item should be a clean card, not raw icon + text chaos */
.chat-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 28px !important;
  grid-template-areas:
    "title menu"
    "time menu" !important;
  align-items: center !important;
  gap: 2px 8px !important;
  min-height: 48px !important;
  padding: 9px 8px 9px 10px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  overflow: hidden !important;
}

.chat-item:hover,
.chat-item.active {
  background: rgba(201,168,76,.075) !important;
  border-color: rgba(201,168,76,.14) !important;
}

.chat-item-title {
  grid-area: title !important;
  min-width: 0 !important;
  color: var(--text2, #b8a882) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.chat-item-time {
  grid-area: time !important;
  min-width: 0 !important;
  color: var(--text3, #7a6e58) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The 3-dot menu button inside sidebar chats */
.chat-menu-btn,
.chat-item-menu,
.chat-item button[data-menu],
.chat-item .menu-btn,
.chat-item > button {
  grid-area: menu !important;
  justify-self: end !important;
  align-self: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(201,168,76,.16) !important;
  background: rgba(201,168,76,.045) !important;
  color: var(--text3, #7a6e58) !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: .75 !important;
  box-shadow: none !important;
}

.chat-item:hover .chat-menu-btn,
.chat-item:hover .chat-item-menu,
.chat-item:hover button[data-menu],
.chat-item:hover .menu-btn,
.chat-item:hover > button {
  opacity: 1 !important;
  color: var(--gold2, #e8c97a) !important;
  border-color: rgba(201,168,76,.30) !important;
  background: rgba(201,168,76,.09) !important;
}

/* Draw clean vertical 3 dots even if button text is raw */
.chat-menu-btn::before,
.chat-item-menu::before,
.chat-item button[data-menu]::before,
.chat-item .menu-btn::before,
.chat-item > button::before {
  content: "⋯" !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* Floating popup for pin/archive/delete */
.chat-menu-pop {
  position: fixed !important;
  z-index: 100000 !important;
  min-width: 132px !important;
  padding: 6px !important;
  border: 1px solid rgba(201,168,76,.22) !important;
  border-radius: 12px !important;
  background: #111009 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.62) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.chat-menu-pop button {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text2, #b8a882) !important;
  text-align: left !important;
  border-radius: 9px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  cursor: pointer !important;
}

.chat-menu-pop button:hover {
  background: rgba(201,168,76,.10) !important;
  color: var(--gold3, #f5e0a0) !important;
}

/* Code workspace must not leak as a small raw panel unless active/open */
#codeWorkspace:not(.show):not(.open):not(.active),
.code-workspace:not(.show):not(.open):not(.active),
.codegen-workspace:not(.show):not(.open):not(.active),
#codePanel:not(.show):not(.open):not(.active),
.code-panel:not(.show):not(.open):not(.active) {
  display: none !important;
}




/* ============================================================
   VALERIE FINAL FRONTEND REPAIR - DO NOT OVERRIDE ABOVE THIS
   Targets: chat dots, popup close, paperclip, image mode attach,
   Code Workspace, full image preview.
   ============================================================ */

/* ---------- Sidebar chat 3-dot buttons ---------- */
.chat-item{
  position:relative !important;
  padding:9px 34px 9px 10px !important;
  min-height:48px !important;
  border-radius:9px !important;
  overflow:hidden !important;
}
.chat-item .chat-menu-btn{
  position:absolute !important;
  top:50% !important;
  right:7px !important;
  transform:translateY(-50%) !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(201,168,76,.16) !important;
  border-radius:8px !important;
  background:rgba(201,168,76,.055) !important;
  color:var(--text3) !important;
  display:grid !important;
  place-items:center !important;
  font-size:15px !important;
  line-height:1 !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  cursor:pointer !important;
  opacity:.72 !important;
  box-shadow:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.chat-item:hover .chat-menu-btn,
.chat-item.active .chat-menu-btn{
  opacity:1 !important;
  color:var(--gold2) !important;
  border-color:rgba(201,168,76,.34) !important;
  background:rgba(201,168,76,.11) !important;
}

/* ---------- Popup menu ---------- */
.chat-menu-pop{
  position:fixed !important;
  z-index:100000 !important;
  min-width:132px !important;
  padding:6px !important;
  border:1px solid rgba(201,168,76,.25) !important;
  border-radius:12px !important;
  background:#111009 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.62) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}
.chat-menu-pop button{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  border:0 !important;
  background:transparent !important;
  color:var(--text2) !important;
  text-align:left !important;
  border-radius:9px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  cursor:pointer !important;
}
.chat-menu-pop button:hover{
  background:rgba(201,168,76,.10) !important;
  color:var(--gold3) !important;
}

/* ---------- Message action buttons: Copy / Retry / Report ---------- */
.v3-answer-actions,
.msg-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-top:8px !important;
}
.v3-answer-btn,
.msg-actions button,
button[data-copy],
button[data-retry],
button[data-report]{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(201,168,76,.22) !important;
  background:rgba(201,168,76,.055) !important;
  color:var(--text2) !important;
  border-radius:999px !important;
  padding:4px 9px !important;
  margin:0 !important;
  min-height:20px !important;
  font-size:11px !important;
  line-height:1 !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.v3-answer-btn:hover,
.msg-actions button:hover,
button[data-copy]:hover,
button[data-retry]:hover,
button[data-report]:hover{
  color:var(--gold3) !important;
  border-color:rgba(201,168,76,.42) !important;
  background:rgba(201,168,76,.10) !important;
}

/* ---------- Composer attach controls ---------- */
.plus-btn,
.chat-inspect-attach-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(201,168,76,.24) !important;
  background:rgba(201,168,76,.06) !important;
  color:var(--gold2) !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:14px !important;
  line-height:1 !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.plus-btn:hover,
.chat-inspect-attach-btn:hover{
  background:rgba(201,168,76,.12) !important;
  color:var(--gold3) !important;
  border-color:rgba(201,168,76,.42) !important;
}

/* Add image button is hidden unless image generation mode is active */
.img-attach-btn,
#imgAttachBtn{
  display:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 12px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border-radius:999px !important;
  border:1px solid rgba(201,168,76,.24) !important;
  background:rgba(201,168,76,.06) !important;
  color:var(--gold2) !important;
  font-size:12px !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.img-attach-btn.v3-show-attach,
#imgAttachBtn.v3-show-attach{
  display:inline-flex !important;
}
.img-attach-btn svg,
#imgAttachBtn svg{
  width:15px !important;
  height:15px !important;
  flex:0 0 auto !important;
}
.img-attach-btn:hover,
#imgAttachBtn:hover{
  background:rgba(201,168,76,.12) !important;
  color:var(--gold3) !important;
  border-color:rgba(201,168,76,.42) !important;
}

/* Hidden file input stays hidden */
#fileInput{
  display:none !important;
}

/* ---------- Full image preview ---------- */
.v3-image-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:120000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:34px !important;
  background:rgba(0,0,0,.86) !important;
  backdrop-filter:blur(10px) !important;
}
.v3-image-lightbox img{
  max-width:min(96vw,1450px) !important;
  max-height:90vh !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:18px !important;
  border:1px solid rgba(245,210,110,.35) !important;
  box-shadow:0 22px 80px rgba(0,0,0,.68) !important;
  background:#050403 !important;
}
.v3-image-lightbox-close{
  position:fixed !important;
  top:18px !important;
  right:22px !important;
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  border:1px solid rgba(245,210,110,.45) !important;
  background:rgba(20,16,10,.88) !important;
  color:#f6df9b !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.msg-img-thumb,
.gallery-item img,
.gallery-item{
  cursor:zoom-in !important;
}

/* ---------- CodeGen Workspace ---------- */
.vcw-shell{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  width:min(760px,42vw) !important;
  height:100vh !important;
  background:#0d0c0a !important;
  border-left:1px solid rgba(255,215,105,.28) !important;
  box-shadow:-24px 0 60px rgba(0,0,0,.48) !important;
  z-index:90000 !important;
  transform:translateX(105%) !important;
  transition:transform .22s ease !important;
  display:flex !important;
  flex-direction:column !important;
  color:#f6e9b7 !important;
  overflow:hidden !important;
}
.vcw-shell.open{
  transform:translateX(0) !important;
}
.vcw-head{
  height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 14px 0 18px !important;
  border-bottom:1px solid rgba(255,215,105,.2) !important;
  background:rgba(27,22,14,.98) !important;
}
.vcw-title{
  color:#f6e9b7 !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
}
.vcw-actions{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
}
.vcw-mode,
.vcw-close{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(255,215,105,.32) !important;
  background:#19150e !important;
  color:#f6e9b7 !important;
  border-radius:10px !important;
  height:34px !important;
  min-width:38px !important;
  cursor:pointer !important;
  font-weight:800 !important;
}
.vcw-mode.active{
  background:#f5d96d !important;
  color:#16120b !important;
}
.vcw-body{
  position:relative !important;
  flex:1 !important;
  overflow:hidden !important;
}
.vcw-preview{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#fff !important;
}
.vcw-code{
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  overflow:auto !important;
  padding:18px !important;
  background:#050505 !important;
  color:#e8e2ca !important;
  font-size:13px !important;
  line-height:1.55 !important;
  white-space:pre-wrap !important;
}
@media(max-width:1100px){
  .vcw-shell{width:100vw !important;}
}

/* Footer disclaimer */
.composer-disclaimer{
  position:fixed !important;
  left:var(--sidebar-w) !important;
  right:0 !important;
  bottom:0 !important;
  height:23px !important;
  min-height:23px !important;
  padding:3px 14px !important;
  z-index:45 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  background:rgba(10,9,8,.98) !important;
  border-top:1px solid rgba(201,168,76,.10) !important;
  color:var(--text3) !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.composer-disclaimer button{
  appearance:none !important;
  -webkit-appearance:none !important;
  height:16px !important;
  min-height:16px !important;
  padding:0 5px !important;
  border:1px solid rgba(201,168,76,.24) !important;
  border-radius:5px !important;
  background:rgba(201,168,76,.06) !important;
  color:var(--gold2) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
}
.input-area{
  padding-bottom:28px !important;
}



/* =========================================================
   VALERIE GAME MODE BUTTON + INTRO POPUP
   ========================================================= */

.game-mode-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(201, 168, 76, 0.055);
  color: var(--gold2);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.game-mode-btn:hover {
  background: rgba(201, 168, 76, 0.13);
  border-color: var(--gold-dim);
  color: var(--gold3);
  transform: translateY(-1px);
}

.game-mode-btn.active {
  background: rgba(201, 168, 76, 0.17);
  border-color: var(--gold);
  color: var(--gold3);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.18);
}

.game-mode-btn i {
  pointer-events: none;
}

.game-mode-intro {
  display: grid;
  gap: 12px;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}

.game-mode-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #0a0908;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow: 0 12px 34px rgba(201,168,76,.18);
  font-size: 24px;
}

.game-mode-intro strong {
  color: var(--gold3);
}

.game-mode-note {
  color: var(--text3);
  font-size: 13px;
}

.game-mode-actions {
  margin-top: 22px;
}

.game-mode-enter-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: #0a0908 !important;
  font-weight: 800;
}



/* Valerie retry answer variants */
.v3-variant-controls{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding-left:6px;border-left:1px solid rgba(201,168,76,.22)}
.v3-variant-nav{width:24px;height:24px;border-radius:999px;border:1px solid rgba(201,168,76,.32);background:rgba(201,168,76,.08);color:var(--gold2,#f3d781);font-weight:800;line-height:1;cursor:pointer}
.v3-variant-nav:hover{background:rgba(201,168,76,.16);border-color:rgba(201,168,76,.52)}
.v3-variant-count{min-width:34px;text-align:center;font-size:12px;color:var(--muted,#b7a67f);font-weight:800;letter-spacing:.03em}


/* Busy/send lock */
.send-btn.is-thinking,
.send.is-thinking{
  cursor:wait !important;
  opacity:.9;
}
.v3-pause-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:18px;
  height:18px;
}
.v3-pause-icon span{
  display:block;
  width:4px;
  height:14px;
  border-radius:999px;
  background:currentColor;
}
#msgInput.is-thinking{
  opacity:.72;
}
.msg-row.ai .msg-images + .msg-bubble:empty,
.msg.ai .msg-images + .bubble:empty{
  display:none !important;
}


/* Compact Valerie thinking status */
.v3-thinking-row{
  width:fit-content;
  max-width:520px;
}
.v3-thinking-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:22px;
  padding:7px 12px;
  border:1px solid rgba(212,175,55,.24);
  border-radius:999px;
  background:rgba(20,16,10,.78);
  color:#f1d86f;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 0 20px rgba(212,175,55,.08);
}
.v3-thinking-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d8c276;
  box-shadow:0 0 10px rgba(216,194,118,.85);
  animation:v3ThinkingPulse 1.1s ease-in-out infinite;
}
@keyframes v3ThinkingPulse{
  0%,100%{opacity:.35;transform:scale(.72)}
  50%{opacity:1;transform:scale(1)}
}
.msg-row.ai .msg-images + .msg-bubble:empty,
.msg.ai .msg-images + .bubble:empty{
  display:none !important;
}

/* Gallery delete mode */
.gallery-header{
  gap:12px;
}
.gallery-delete-toolbar{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.gallery-trash-btn,
.gallery-delete-selected-btn,
.gallery-cancel-delete-btn{
  height:34px;
  border-radius:999px;
  border:1px solid rgba(218,184,92,.34);
  background:rgba(20,16,10,.82);
  color:#f5d873;
  padding:0 14px;
  font:700 12px/1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.22),0 10px 24px rgba(0,0,0,.22);
}
.gallery-trash-btn{
  width:34px;
  padding:0;
  justify-content:center;
  display:inline-flex;
  align-items:center;
}
.gallery-delete-selected-btn{
  border-color:rgba(79,220,132,.58);
  color:#dfffe9;
  background:rgba(28,90,54,.28);
}
.gallery-delete-selected-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.gallery-cancel-delete-btn{
  border-color:rgba(255,230,170,.24);
  color:rgba(245,237,214,.74);
}
.gallery-grid{
  align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr)) !important;
  gap:10px !important;
}
.gallery-item{
  aspect-ratio:1/1 !important;
}
.gallery-item.gallery-broken{
  display:none;
}
.gallery-select-box{
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;
  width:22px;
  height:22px;
  border-radius:7px;
  border:1px solid rgba(255,225,158,.64);
  background:rgba(0,0,0,.58);
  display:none;
  cursor:pointer;
}
.gallery-delete-mode .gallery-select-box{
  display:block;
}
.gallery-delete-mode .gallery-item{
  border-color:rgba(255,76,76,.72) !important;
  box-shadow:0 0 0 1px rgba(255,40,40,.22),0 0 24px rgba(255,30,30,.08);
}
.gallery-delete-mode .gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,0,0,.05),rgba(255,0,0,.13));
  pointer-events:none;
  opacity:.75;
}
.gallery-item.is-selected{
  border-color:#ff4f4f !important;
  box-shadow:0 0 0 2px rgba(255,80,80,.72),0 0 32px rgba(255,60,60,.18);
}
.gallery-item.is-selected .gallery-select-box{
  background:#ff4f4f;
  border-color:#ffd8d8;
}
.gallery-item.is-selected .gallery-select-box::before{
  content:"✓";
  display:block;
  color:#160808;
  font-weight:900;
  text-align:center;
  line-height:20px;
}
.gallery-empty{
  grid-column:1/-1;
  padding:50px 20px;
  text-align:center;
  border:1px dashed rgba(218,184,92,.22);
  border-radius:18px;
  color:rgba(245,237,214,.55);
  background:rgba(255,239,190,.025);
}
@media(max-width:760px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)) !important;padding:14px !important}
  .gallery-delete-toolbar{gap:7px}
  .gallery-delete-selected-btn,.gallery-cancel-delete-btn{padding:0 10px;font-size:11px}
}