/* Minimal responsive styles for MuseumApp prototype */
:root{
  --bg: #0f0f12;
  --surface: #17171b;
  --text: #e7e7ea;
  --muted: #a9a9b2;
  --primary: #4f8cff;
  --primary-contrast: #fff;
  --accent: #e0a132;
  --danger: #ff6b6b;
  --radius: 14px;
  --border: #24242a;
  --shadow: rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background: var(--bg);
  display:flex; flex-direction:column; min-height:100vh;
}
.app-bar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; background:var(--surface); backdrop-filter: blur(8px); border-bottom:1px solid var(--border);
}
.app-title{font-weight:700; letter-spacing:.3px}
.icon-btn{appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; padding:.4rem .6rem; cursor:pointer}
.icon-btn[disabled]{opacity:.4; cursor:not-allowed}

.app{flex:1; display:grid; place-items:stretch; padding:1rem}

.view-card{
  width:100%; max-width:980px; margin:0 auto; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 40px var(--shadow);
  display:flex; flex-direction:column; min-height:60vh;
}

.cover{
  position:relative; min-height:60vh; display:flex; flex-direction:column; justify-content:flex-end;
  background-size:cover; background-position:center; isolation:isolate;
}
.cover::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.0) 60%); z-index:0}
.cover-content{position:relative; z-index:2; padding:1.25rem}
.title{font-size:clamp(1.6rem, 2.4rem, 3rem); line-height:1.1; margin:0 0 .3rem 0}
.subtitle{font-size:clamp(1rem, 1.25rem, 1.4rem); margin:0; color:var(--muted)}

.section{padding:1rem 1.25rem}
.hr{height:1px; background:var(--border); margin:.25rem 0 1rem}

.footer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .75rem 1rem; border-top:1px solid var(--border); background:var(--surface); margin-top: auto;
}
.footer-actions{display:flex; gap:.5rem; flex-wrap:wrap}
.btn{appearance:none; border:none; border-radius:12px; padding:.7rem 1rem; font-weight:600; cursor:pointer}

.btn.primary{background:var(--primary); color:var(--primary-contrast)}
.btn.ghost{background:var(--surface); border:1px solid var(--border); color:var(--text)}
.btn.accent{background:transparent; border:2px solid var(--accent); color:var(--accent); border-radius:999px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.logo{height:28px; width:auto; object-fit:contain; filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.btn.action-picture{display:inline-flex; align-items:center; gap:.6rem; width:100%; justify-content:flex-start}
.btn.action-picture img{width:40px; height:40px; display:block; object-fit:cover; border-radius:4px}

.theme{display:grid; gap:.75rem}
.theme .actions{display:grid; grid-template-columns: 1fr; gap:.75rem; align-items:start}
.theme .actions.list{grid-template-columns: 1fr}
.theme .actions > .btn{width:100%}
.theme .info{color:var(--muted)}

.app-footer{padding:.75rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.9rem; color:var(--muted); border-top:1px solid var(--border); background:var(--bg)}
.app-footer a{color:var(--primary); text-decoration:none}
.app-footer a:hover{text-decoration:underline}

.loading{opacity:.7; text-align:center; padding:3rem}

@media (min-width: 768px){
  .cover{min-height:70vh}
}

/* Starter specific tweaks */
.starter-cover{justify-content:flex-start}
.starter-content{padding:1rem 1.25rem 2rem}
.starter-title{color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Theme-specific Overrides via [data-theme] */
[data-theme="franzmarc"] body {
  background: var(--bg);
}
[data-theme="franzmarc"] .view-card {
  background: var(--bg);
  border-color: var(--border);
}
[data-theme="franzmarc"] .btn.primary,
[data-theme="franzmarc"] .btn.ghost {
  border-radius: 999px;
}
[data-theme="franzmarc"] .view-card > .section.header-section{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
[data-theme="franzmarc"] .view-card > .section.header-section .title{
  color: var(--bg);
}

/* Work detail layout */
.work{display:grid; gap:1rem}
.work-image{width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px var(--shadow)}
.work-body{display:grid; gap:.5rem}
.work-meta{display:grid; grid-template-columns:auto 1fr; gap:.25rem .75rem; font-size:.95rem; color:var(--muted)}
.work-meta dt{opacity:.8}
.work-meta dd{margin:0; color:var(--text)}
.work-desc{margin-top:.25rem; line-height:1.5}

/* Action card (BUTTONICON) layout */
.btn.action-card{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.5rem; text-align:center; padding:1rem; border:1px solid var(--border); background:var(--surface); border-radius:12px; align-self:start; height:auto}
.btn.action-card .action-card-image{width:72px; height:72px; object-fit:contain; display:block}
.btn.action-card .action-card-label{font-weight:600; line-height:1.2}

/* Select (dropdown) styles */
.select{width:100%; padding:.7rem 1rem; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; line-height:1.2; -webkit-appearance:none; appearance:none; text-align:center; text-align-last:center; display:block;}
.select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(79,140,255,.2)}
.actionlist{display:grid; gap:.4rem}

/* Ensure footer sticks to bottom of card */
.view-card > .section.theme { flex: 1; }
.view-card > .cover { flex: 1; min-height: 0; }

/* Ensure videos scale within their container */
.section.video video{ max-width:100%; width:100%; height:auto; display:block; }
/* Ensure audio player scales within its container */
.section.audio audio{ max-width:100%; width:100%; height:auto; display:block; }
/* Ensure generic picture scales within its container */
.section.picture img{ max-width:100%; width:100%; height:auto; display:block; }

.lw-btn{ display:none !important; }

.lw-msg.ai strong {
    color: var(--accent) !important;
}

/* Hide original chat widget input and make panel full width */
.lw-input {
    display: none !important;
}

.lw-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 74px !important; /* Above the taller persistent chat bar */
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 50px - 74px) !important; /* Adjust based on header and chat bar height */
    max-height: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Redefine body padding to match the chat bar */
body {
    padding-bottom: 74px;
}

/* Audio visibility fix: ensure audio controls aren't collapsed on some browsers */
.section.audio{ min-height:56px; }
.section.audio audio{ min-height:48px; }

.breadcrumb{max-width:980px;margin:0 auto .2rem auto; padding:0; color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.35rem; line-height:1; flex-wrap:wrap}
.breadcrumb .sep{opacity:.6; display:inline-flex; align-items:center}
.breadcrumb .crumb{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 40ch; line-height:1; display:inline-flex; align-items:center}
.breadcrumb .crumb.clickable{cursor:pointer; color:inherit; background:transparent; border:none; padding:0; font:inherit; text-align:left; -webkit-appearance:none; appearance:none}
.breadcrumb .crumb.clickable:hover{text-decoration:underline}
/* Current (non-clickable) breadcrumb: look like clickable but bold */
.breadcrumb .crumb:not(.clickable){
  color:inherit; background:transparent; border:none; padding:0; font:inherit; text-align:left;
  font-weight:700;
}
/* Avoid reduced opacity on disabled buttons in some browsers */
.breadcrumb .crumb[disabled]{ opacity:1; }

/* Spacing tweak: reduce gaps between breadcrumb, content and actions */
.section.theme{ gap:.5rem; }
.section.theme .actions{ gap:.5rem; }


/* Layout fix: prevent non-cover view-cards from stretching */
/* By default, let cards size to content */
.view-card{ min-height:auto; }
/* Do not force the theme section to fill remaining space */
.view-card > .section.theme{ flex: initial; }
/* Keep stretching behavior only for cover-based cards */
.view-card:has(> .cover){ min-height:60vh; }
.view-card:has(> .cover) > .cover{ min-height:60vh; flex:1; }


/* Select arrow indicator: show a dropdown chevron on the right and keep height/text centering consistent */
.select{
  padding-right: 2.25rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23e7e7ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:12px 12px;
}
[data-theme="franzmarc"] .select{
  /* Re-apply arrow with theme-appropriate color since earlier background shorthands reset images */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:12px 12px;
}
[data-theme="franzmarc"] .actions .btn.primary, [data-theme="franzmarc"] .actions .btn.ghost {
  border-radius: 12px;
}

/* Persistent AI Chat Bar */
.ai-chat-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 15, 18, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1rem;
  z-index: 100;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  height: 74px;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.ai-chat-bar.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

body.ai-bar-hidden {
  padding-bottom: 0;
}

body.ai-bar-hidden .lw-panel {
  bottom: 0 !important;
  height: calc(100vh - 50px) !important;
}

.ai-chat-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}

.ai-chat-input-wrapper {
  flex: 1;
  position: relative;
  padding: 2px;
  background: linear-gradient(90deg, #4f8cff, #9d50bb, #4f8cff);
  background-size: 200% auto;
  border-radius: 999px;
  animation: ai-gradient-move 4s linear infinite;
  box-shadow: 0 0 15px rgba(79, 140, 255, 0.3);
}

#ai-chat-input {
  width: 100%;
  background: #0f0f12;
  border: none;
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  outline: none;
  font-size: 1rem;
  display: block;
  transition: background 0.3s ease;
}

#ai-chat-input:focus {
  background: #17171b;
}

#ai-chat-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

@keyframes ai-gradient-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

#ai-chat-send {
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  white-space: nowrap;
  background: linear-gradient(135deg, #4f8cff, #9d50bb);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(157, 80, 187, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ai-chat-send:active {
  transform: scale(0.95);
}

/* Adjust body padding to match the taller chat bar */
body {
  padding-bottom: 74px;
}
.app-footer {
  margin-bottom: 0;
}