:root{font-family:system-ui,Segoe UI,sans-serif;color:#e9eaf7;background:#0c1020}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:11px;padding:11px 15px;background:#6b5cff;color:white}button.secondary{background:#283047}button:hover{filter:brightness(1.12)}input,select,textarea{background:#171e32;color:white;border:1px solid #38415a;border-radius:10px;padding:12px;width:100%}header{padding:16px 24px;background:#12182b;border-bottom:1px solid #2a334b;display:flex;align-items:center;justify-content:space-between;gap:12px}h1{margin:0;font-size:22px}.muted{color:#aab3cb;font-size:13px}.badge{background:#24354d;padding:6px 10px;border-radius:30px;font-size:12px}#auth{max-width:430px;margin:10vh auto;padding:30px;background:#151d31;border:1px solid #303b55;border-radius:22px}#app{display:none;height:100vh;flex-direction:column}.layout{display:grid;grid-template-columns:270px 1fr;min-height:0;flex:1}aside{background:#12182b;border-right:1px solid #2a334b;padding:18px;overflow:auto}main{display:flex;flex-direction:column;min-width:0}.row{display:flex;gap:9px;align-items:center}.row>*{flex:1}.chat{padding:24px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:14px}.bubble{max-width:82%;padding:15px 18px;border-radius:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.ai{background:#222b43;align-self:flex-start}.user{background:#5147a7;align-self:flex-end}.composer{display:flex;gap:10px;padding:18px;border-top:1px solid #2a334b}.composer input{flex:1}nav button{width:100%;text-align:left;margin:4px 0;background:#1e2840}section.panel{display:none;padding:24px;overflow:auto;flex:1}.item{padding:13px;background:#1b2439;border-radius:12px;margin:9px 0}.item button{margin:4px}.small{font-size:12px}.warning{background:#403322;color:#ffe4a5;padding:12px;border-radius:10px;margin:15px 0}#notice{font-size:12px;color:#b4e6c8}@media(max-width:700px){.layout{grid-template-columns:1fr}aside{display:flex;gap:6px;overflow-x:auto;padding:8px}aside h3,aside p{display:none}nav{display:flex;gap:6px}nav button{width:auto;white-space:nowrap}header{padding:12px}.bubble{max-width:95%}}
button:disabled {opacity:.58;cursor:not-allowed} .error {background:#4c2431;color:#ffe2e2} .pending {opacity:.73} .retry {background:#94611d;font-size:12px;margin-left:8px} .bubble small {display:block;margin-top:6px;opacity:.9} #notice.errorText {color:#ffb8b8} #chatView {min-height:0} #chatView .composer button {flex-shrink:0} #authError {color:#ffc0c0;min-height:1.2em} .panel-note {margin:4px 0 14px} #modelStatus {font-size:12px;margin-top:7px;color:#aab3cb} @media(max-width:700px){aside{padding:4px} .composer{padding:9px} .chat{padding:10px}}

#loginBtn {width:100%;margin-top:14px} #guestBtn{width:100%;margin-top:10px} header>.row{flex:0 1 auto} #chatView{display:flex;flex-direction:column;min-height:0;flex:1} #addMemoryBtn{margin-top:10px}

#knowledgeView input{margin:12px 0} #knowledgeStatus{font-size:13px} #knowledgeView .item{overflow-wrap:anywhere}

#developerView textarea{margin:10px 0;min-height:100px}#developerView label{display:block;margin-top:13px}
#devPreview{overflow:auto;white-space:pre-wrap;max-height:38vh;background:#12192c;border:1px solid #37425d;border-radius:10px;padding:14px;overflow-wrap:anywhere}
.media-info{margin:0;padding:0 18px 8px;font-size:12px}.speak-button{font-size:12px;display:block;margin-top:8px}
#mediaBtn,#recordBtn,#liveBtn,#stopSpeechBtn{padding:10px;min-width:40px}
@media(max-width:700px){.composer{flex-wrap:wrap}.composer input#message{order:2;flex-basis:65%;min-width:100px}.composer #sendBtn{order:3}.composer{gap:5px}.composer button{min-width:40px}}

/* Mobil kliens: iPhone safe area és képernyőbillentyűzet. */
html,body { min-height:100%; }
#app {height:100vh; height:100dvh;}
#auth {margin-top:max(24px,env(safe-area-inset-top));margin-bottom:max(24px,env(safe-area-inset-bottom));}
@media(max-width:700px) {
  #app header {padding-top:max(12px,env(safe-area-inset-top));} 
  #chatView .composer {padding-bottom:max(9px,env(safe-area-inset-bottom));}
  #auth {margin:14px 12px; padding:24px 17px;}
  header h1 {font-size:19px;}
  .composer input#message {min-width:0;}
  .layout main {min-height:0;}
  aside nav {flex-wrap:nowrap;}
  nav button {font-size:13px;padding:10px 12px;}
}

/* Natalie iPhone PWA - 0.2: csak megjelenítés; a régi desktop kezelőfelület nem változik. */
.iphone-guide-overlay[hidden], .iphone-guide-btn[hidden] {display:none !important}
.iphone-guide-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(3,9,23,.84);padding:max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom))}
.iphone-guide-card{width:min(100%,460px);max-height:94dvh;overflow-y:auto;padding:24px 20px;background:#172138;border:1px solid #445477;border-radius:20px;box-shadow:0 18px 54px rgba(0,0,0,.5);line-height:1.6}
.iphone-guide-card h2{font-size:22px;margin:8px 0 10px}
.iphone-guide-card ol{padding-left:25px}.iphone-guide-card li{margin:9px 0}
.iphone-guide-card button{min-height:44px}
.iphone-guide-close{float:right}
.iphone-guide-emoji{font-size:36px}
.iphone-guide-small{color:#bac7df;font-size:14px}
.iphone-guide-btn{width:100%;margin-top:12px}
@media(max-width:700px){
  input,select,textarea{font-size:16px;} /* iOS Safari nem nagyít automatikusan fókuszáláskor */
  #auth{margin-left:12px;margin-right:12px;}
  #app{min-height:0;height:100dvh;max-height:100dvh;}
  .layout{min-height:0;overflow:hidden}
  .layout main{overflow:hidden}
  button{touch-action:manipulation}
  #chatView .composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  #messages{overscroll-behavior:contain}
  aside nav{max-width:100%;overflow-x:auto;scrollbar-width:thin}
  #passkeyLoginBtn{width:100%;margin-top:8px}
}
@media(display-mode:standalone){
  @supports (height:100dvh){#app{height:100dvh}}
}

/* 0.4.0: felhős beszélgetések, egyenkénti törlés, mobilon vízszintesen görgethető lista. */
.conversation-tools{margin:12px 0;padding:10px 0;border-top:1px solid #34415d;border-bottom:1px solid #34415d}
#newConversationBtn{width:100%;margin-bottom:9px}
#conversationList{max-height:35vh;overflow:auto;overscroll-behavior:contain}
.conversation-row{display:flex;align-items:stretch;gap:4px;margin:4px 0}
.conversation-item{flex:1;text-align:left;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#172a3e!important;border:1px solid transparent}
.conversation-item.selected{border-color:#a9cfff;background:#274465!important}
.conversation-delete{flex:none;padding:9px 8px;min-width:40px}
.conversation-head{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid #2a334b;flex-wrap:wrap}
.conversation-head strong{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#renameConversationBtn{padding:6px 9px;font-size:12px}
.sync-note{font-size:11px;opacity:.75}
@media(max-width:700px){
  .conversation-tools{display:flex;flex-shrink:0;gap:6px;align-items:center;max-width:100%;padding:4px;border:none;}
  #newConversationBtn{margin:0;flex-shrink:0;width:auto;white-space:nowrap}
  #conversationList{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden;gap:4px;max-width:60vw}
  .conversation-row{min-width:125px;max-width:190px;flex-shrink:0;margin:0}
  .conversation-item{font-size:12px!important;min-width:90px}
  .conversation-delete{padding:4px;min-width:35px}
  .conversation-head{padding:4px 9px;min-height:44px}
  .sync-note{font-size:10px}
  .layout aside{flex-wrap:wrap}
}