/* 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;
}
*{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:linear-gradient(180deg,#0e0e11,#0b0b0d 80%);
  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:rgba(15,15,18,.8); backdrop-filter: blur(8px); border-bottom:1px solid #24242a;
}
.app-title{font-weight:700; letter-spacing:.3px}
.icon-btn{appearance:none; border:1px solid #2a2a31; background:#1a1a20; 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:radial-gradient(120% 120% at 80% 10%, #1b1b21 0%, #16161a 50%, #121215 100%);
  border:1px solid #24242a; border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.4);
  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:1; 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:#26262d; margin:.25rem 0 1rem}

.footer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .75rem 1rem; border-top:1px solid #24242a; background:#121215; 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:#1a1a20; border:1px solid #2a2a31; 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 #24242a; background:#0e0e12}
.app-footer a{color:#9ab6ff; 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: Rembrandt demo (salmon/coral with light gray panels) */
:root[data-theme="rembrandt"]{
  --bg: #ea6a6e;
  --surface: #d9d9d9;
  --text: #1e1e1e;
  --muted: #3a3a3a;
  --primary: #d9d9d9;
  --primary-contrast: #1e1e1e;
  --accent: #ff8a80;
}
:root[data-theme="rembrandt"] body{
  background: linear-gradient(180deg,#ea6a6e,#e56266 80%);
  color: var(--text);
}
:root[data-theme="rembrandt"] .app-bar{
  background: var(--surface);
  border-bottom: 1px solid #c6c6c6;
  color: var(--text);
}
:root[data-theme="rembrandt"] .icon-btn{background:#ededed; border-color:#cfcfcf; color:#1e1e1e}
:root[data-theme="rembrandt"] .view-card{
  background: #ea6a6e;
  border-color: #eaa0a2;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
:root[data-theme="rembrandt"] .footer-bar{
  background: var(--surface);
  border-top: 1px solid #c6c6c6;
}
:root[data-theme="rembrandt"] .btn.primary{
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: 999px;
}
:root[data-theme="rembrandt"] .btn.ghost{
  background: #f1f1f1; color:#1e1e1e; border:1px solid #cfcfcf; border-radius:999px;
}
:root[data-theme="rembrandt"] .subtitle{color:#333}

/* Work detail layout */
.work{display:grid; gap:1rem}
.work-image{width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.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 #2a2a31; background:#1a1a20; 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}

:root[data-theme="rembrandt"] .btn.action-card{background:#f1f1f1; border:1px solid #cfcfcf}

/* Select (dropdown) styles */
.select{width:100%; padding:.7rem 1rem; border-radius:12px; border:1px solid #2a2a31; background:#1a1a20; 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:#3a3a45; box-shadow:0 0 0 2px rgba(79,140,255,.2)}
.actionlist{display:grid; gap:.4rem}

:root[data-theme="rembrandt"] .select{background:#f1f1f1; border:1px solid #cfcfcf; color:#1e1e1e; border-radius:999px}

/* Rembrandt header styling to match footer and title color */
:root[data-theme="rembrandt"] .view-card > .section.header-section{
  background: var(--surface);
  border-bottom: 1px solid #c6c6c6;
}
:root[data-theme="rembrandt"] .view-card > .section.header-section .title{
  color: var(--bg);
}

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

/* 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;
}
*{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:linear-gradient(180deg,#0e0e11,#0b0b0d 80%);
  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:rgba(15,15,18,.8); backdrop-filter: blur(8px); border-bottom:1px solid #24242a;
}
.app-title{font-weight:700; letter-spacing:.3px}
.icon-btn{appearance:none; border:1px solid #2a2a31; background:#1a1a20; 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:radial-gradient(120% 120% at 80% 10%, #1b1b21 0%, #16161a 50%, #121215 100%);
  border:1px solid #24242a; border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.4);
  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:1; 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:#26262d; margin:.25rem 0 1rem}

.footer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .75rem 1rem; border-top:1px solid #24242a; background:#121215;
}
.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:#1a1a20; border:1px solid #2a2a31; 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 #24242a; background:#0e0e12}
.app-footer a{color:#9ab6ff; 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: Rembrandt demo (salmon/coral with light gray panels) */
:root[data-theme="rembrandt"]{
  --bg: #ea6a6e;
  --surface: #d9d9d9;
  --text: #1e1e1e;
  --muted: #3a3a3a;
  --primary: #d9d9d9;
  --primary-contrast: #1e1e1e;
  --accent: #ff8a80;
}
:root[data-theme="rembrandt"] body{
  background: linear-gradient(180deg,#ea6a6e,#e56266 80%);
  color: var(--text);
}
:root[data-theme="rembrandt"] .app-bar{
  background: var(--surface);
  border-bottom: 1px solid #c6c6c6;
  color: var(--text);
}
:root[data-theme="rembrandt"] .icon-btn{background:#ededed; border-color:#cfcfcf; color:#1e1e1e}
:root[data-theme="rembrandt"] .view-card{
  background: #ea6a6e;
  border-color: #eaa0a2;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
:root[data-theme="rembrandt"] .footer-bar{
  background: var(--surface);
  border-top: 1px solid #c6c6c6;
}
:root[data-theme="rembrandt"] .btn.primary{
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: 999px;
}
:root[data-theme="rembrandt"] .btn.ghost{
  background: #f1f1f1; color:#1e1e1e; border:1px solid #cfcfcf; border-radius:999px;
}
:root[data-theme="rembrandt"] .subtitle{color:#333}

/* Work detail layout */
.work{display:grid; gap:1rem}
.work-image{width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.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 #2a2a31; background:#1a1a20; 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}

:root[data-theme="rembrandt"] .btn.action-card{background:#f1f1f1; border:1px solid #cfcfcf}

/* Select (dropdown) styles */
.select{width:100%; padding:.7rem 1rem; border-radius:12px; border:1px solid #2a2a31; background:#1a1a20; 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:#3a3a45; box-shadow:0 0 0 2px rgba(79,140,255,.2)}
.actionlist{display:grid; gap:.4rem}

:root[data-theme="rembrandt"] .select{background:#f1f1f1; border:1px solid #cfcfcf; color:#1e1e1e; border-radius:999px}

/* Rembrandt header styling to match footer and title color */
:root[data-theme="rembrandt"] .view-card > .section.header-section{
  background: var(--surface);
  border-bottom: 1px solid #c6c6c6;
}
:root[data-theme="rembrandt"] .view-card > .section.header-section .title{
  color: var(--bg);
}

/* 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; }

/* Hide external chat launcher and input before first interaction
.lw-panel .lw-input{ display:none !important; }
*/
.lw-btn{ display:none !important; }


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

/* 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;
}
:root[data-theme="rembrandt"] .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;
}