/* The room frames the conversation; notes stay close but folded away. */
#talkDialog{width:min(1260px,calc(100% - 16px));height:min(920px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);padding:0;overflow:hidden;border:1px solid #a487514f;border-radius:9px;background:linear-gradient(180deg,#08131218,#08121135 32%,#06110ccd),url('/assets/gamer/conversation-room-v1.png') center/cover;box-shadow:0 20px 80px #000d;color:#f2ead7}
#talkDialog[open]{display:flex;flex-direction:column}
#talkDialog::backdrop{background:#020806dc;backdrop-filter:blur(5px)}

#talkDialog>.dialog-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 70px;height:70px;margin:0;padding:8px 14px;border:0;background:linear-gradient(#07110de8,#07110da8)}
#talkDialog .talk-identity{display:flex;align-items:center;min-width:0;gap:10px}
#talkDialog .talk-identity .gamer-avatar{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background-position:center top;filter:drop-shadow(0 3px 7px #000c)}
#talkDialog .dialog-header h2{margin:0;color:#f5edd7;font-size:clamp(20px,2.2vw,28px);text-shadow:0 3px 10px #000}
#talkDialog .talk-presence{margin:2px 0 0;color:#d6bd78;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
#talkDialog>.dialog-header .icon-button{width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;border:1px solid #b6a37199;border-radius:5px;background:#102523b8}

#talkDialog .talk-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);flex:1;min-height:0;gap:13px;padding:0 15px;overflow:hidden}
#talkDialog .strategy-workbench{display:flex;flex-direction:column;min-width:0;min-height:0;gap:8px;padding:12px;overflow:hidden;border:1px solid #75927b99;border-radius:8px;background:linear-gradient(145deg,#102c2bea,#0b1b19f5 65%);box-shadow:0 10px 30px #000a,inset 0 0 0 4px #142521,inset 0 0 0 5px #bca56d35}
#talkDialog .talk-character{display:flex;flex-direction:column;min-width:0;min-height:0;gap:7px;padding:8px;overflow:auto;border:1px solid #4c6d5b8c;border-radius:7px;background:linear-gradient(#091711d9,#10251ee8);scrollbar-width:thin}
#talkDialog .talk-character>.gamer-avatar{display:none}

#talkDialog :is(.memory-book,.talk-reference){height:auto;max-height:none;margin:0;overflow:visible;border:1px solid #6d856f91;border-radius:5px;background:#0a1c17c9}
#talkDialog :is(.memory-book,.talk-reference)>summary{display:flex;align-items:center;min-height:44px;padding:8px 10px;cursor:pointer;color:#e6d09a;font-size:14px;font-weight:700;list-style:none}
#talkDialog :is(.memory-book,.talk-reference)>summary::-webkit-details-marker{display:none}
#talkDialog :is(.memory-book,.talk-reference)>summary::after{content:'⌄';margin-left:auto;color:#d4b86e;font-size:18px}
#talkDialog :is(.memory-book,.talk-reference)[open]>summary::after{content:'⌃'}
#talkDialog #memoryBook summary span{display:inline;font:inherit;color:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#talkDialog #memoryCount{margin-left:6px;flex-shrink:0;color:#aab9a8;font-size:11px;font-weight:400}
#talkDialog .talk-reference>#talkRecordsOpen{min-height:36px;margin:0 9px 8px;padding:5px 8px;color:#d6d9c6;font-size:12px}

#talkDialog #talkTemperament{margin:0 10px 8px;padding-bottom:7px;border-bottom:1px solid #b8995340;color:#dfc98e;font-size:12px;line-height:1.5}
#talkDialog .memory-list{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow:auto;padding:0 9px 10px;scrollbar-width:thin}
#talkDialog .memory-empty{padding:10px 2px;color:#b2bdad;font-size:13px;line-height:1.6}
#talkDialog .memory-empty b{display:block;color:#e3d6b3;font-size:14px}
#talkDialog .memory-empty p{margin:5px 0 0}

#talkDialog .memory-card,#talkDialog .memory-proposal{display:flex;flex-direction:column;gap:7px;min-width:0;padding:10px;border:1px solid #5a746658;border-radius:4px;background:linear-gradient(130deg,#17352dbb,#101e1b)}
#talkDialog .memory-card>small,#talkDialog .memory-proposal>small{align-self:flex-start;color:#e7cd87;font-size:11px}
#talkDialog .memory-card p,#talkDialog .memory-proposal p{margin:0;color:#f0eddf;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
#talkDialog .memory-proposal>b{color:#f1d58c;font-size:14px}
#talkDialog :is(.memory-proposal-actions,.memory-card-actions){display:flex;flex-wrap:wrap;gap:6px;padding-top:6px;border-top:1px solid #b8995340}
#talkDialog :is(.memory-proposal,.memory-card) button{min-height:36px;padding:5px 8px;color:#dac894;font-size:12px}
#talkDialog :is(.memory-proposal,.memory-card) :is(textarea,select){width:100%;min-height:40px;margin:0;font-size:16px}
#talkDialog .memory-proposal textarea{min-height:80px}
#talkDialog .memory-proposal[data-state="saved"]{border-color:#83b18d}
#talkDialog .memory-proposal[data-state="edited"]{border-color:#d4b86e}
#talkDialog .memory-proposal:is([data-state="expired"],[data-state="forgotten"]){opacity:.7;border-style:dashed}
#talkDialog .memory-proposal[data-state="proposed"]{border-color:#d9b75f;box-shadow:inset 0 0 0 1px #d9b75f26}
#talkDialog .memory-confirmation{margin:0;padding:8px 10px;border-left:3px solid #8bbfa0;background:#15352b;color:#dce8d8;font-size:13px;line-height:1.5}

#talkDialog :is(.talk-preparation,.talk-context-line,.talk-guide-topic){flex:0 0 auto;margin:0;padding:7px 9px;border-radius:4px;color:#d5dac4;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
#talkDialog .talk-preparation{display:flex;flex-wrap:wrap;gap:3px 10px;background:#101a19b3}
#talkDialog .talk-preparation p{margin:0}
#talkDialog .talk-context-line{background:#203027bd;color:#d9d8b8}
#talkDialog .talk-guide-topic{color:#ead3a2;background:#312a1dbb}
#talkDialog :is(.talk-guide-topic[hidden],.talk-context-line:empty){display:none}

#talkDialog .talk-attachments{display:flex;gap:7px;overflow:auto;padding:0 9px 10px;scrollbar-width:thin}
#talkDialog .talk-attachment{position:relative;flex:1 0 120px;max-width:190px}
#talkDialog .attachment-preview{display:block;width:100%;padding:0;overflow:hidden;border:1px solid #93ad8780;border-radius:4px;text-align:left;background:#132521}
#talkDialog .attachment-preview .record-scene{display:block;width:100%;height:58px;object-fit:cover}
#talkDialog .attachment-preview b{display:block;padding:5px 7px;overflow:hidden;color:#d8e0cf;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#talkDialog .attachment-remove{position:absolute;top:2px;right:2px;width:28px;min-height:28px;padding:0;border:0;border-radius:50%;background:#03140dea;font-size:17px}

#talkDialog .talk-transcript{display:flex;flex:1 1 auto;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:5px 6px 8px 1px;scrollbar-width:thin}
#talkDialog .talk-transcript:empty::before{content:'무슨 이야기부터 해볼까?';align-self:center;margin:auto 12px;padding:16px;color:#d0d8c8;font-size:16px;text-align:center}
#talkDialog .chat-message{position:relative;flex-shrink:0;max-width:88%;width:fit-content;margin-left:28px;padding:10px 11px;gap:5px;border-color:#5d979292;background:linear-gradient(135deg,#1d4241,#112c2a);font-size:16px}
#talkDialog .chat-message--assistant::before{content:'';position:absolute;top:2px;left:-29px;width:24px;height:24px;border:1px solid #a8c1b3aa;border-radius:50%;background:#102424 url('/assets/gamer/haru-v1.png') 50% 5%/155% auto no-repeat}
#talkDialog .chat-message--user{margin:0 0 0 auto;border-color:#f5d88f99;background:linear-gradient(145deg,#f0d48d,#ceb06d);color:#202a22;box-shadow:0 4px 15px #0003}
#talkDialog .chat-message--user>b{color:#584718}
#talkDialog .chat-message--user time{color:#665830}
#talkDialog .chat-message>b{font-size:12px}
#talkDialog .chat-message p{line-height:1.55;overflow-wrap:anywhere}
#talkDialog .message-attachments{display:flex;flex-direction:column;gap:3px;padding-top:5px;border-top:1px solid #6553263b}
#talkDialog .message-attachments small{font-size:11px}

#talkDialog :is(#talkLoadMore,#talkResume){align-self:center;min-height:38px;padding:6px 10px}
#talkDialog #talkStatus{flex:0 0 auto;margin:0;color:#cbd6be;font-size:12px}
#talkDialog #talkStatus:empty{display:none}
#talkDialog .talk-compose{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;flex:0 0 auto;gap:7px;align-items:end;margin:0;padding:9px;border:1px solid #7089767d;border-radius:5px;background:#102720e8;box-shadow:0 -8px 15px #10201bb3}
#talkDialog .talk-compose>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#talkDialog .talk-compose textarea{min-height:64px;height:68px;max-height:120px;margin:0;padding:9px;border:1px solid #89a38a66;border-radius:4px;background:#081c17;font-size:16px}
#talkDialog .talk-compose-actions{display:flex;flex-direction:column;gap:5px}
#talkDialog .talk-compose button,#talkDialog .talk-actions button{min-height:44px;padding:8px 14px;border-radius:4px}
#talkDialog .primary{border-color:#f4d184;background:linear-gradient(#f3d489,#d4b066);color:#18271f;font-weight:800}
#talkDialog .talk-actions{display:flex;justify-content:space-between;flex:0 0 auto;gap:12px;margin:0;padding:10px 16px;border:0;background:#07110dc7}
#talkDialog .talk-actions button{background-color:#0b2622c7;font-size:13px}

@media(max-width:699px){
#talkDialog{width:calc(100% - 8px);height:calc(100dvh - 8px);max-height:calc(100dvh - 8px)}
#talkDialog>.dialog-header{flex-basis:60px;height:60px;padding:5px 9px}
#talkDialog>.dialog-header .icon-button{width:44px;height:44px;min-height:44px;flex-basis:44px}
#talkDialog .talk-identity .gamer-avatar{width:46px;height:46px;flex-basis:46px}
#talkDialog .dialog-header h2{font-size:20px}
#talkDialog .talk-presence{font-size:11px}
#talkDialog .talk-layout{display:flex;flex-direction:column;gap:7px;padding:0 7px;overflow:hidden}
#talkDialog .talk-character{position:relative;z-index:1;order:-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;gap:4px;flex:0 0 54px;height:54px;max-height:54px;padding:4px;overflow:visible}
#talkDialog .talk-character>:is(.memory-book,.talk-reference){grid-column:auto;min-width:0;height:44px;min-height:44px;max-height:44px;overflow:hidden}
#talkDialog .talk-character>:is(.memory-book,.talk-reference)>summary{display:flex;min-height:44px;padding:6px 7px;font-size:12px}
#talkDialog .talk-character>details[open]{position:absolute;inset:0 0 auto;z-index:2;height:auto;max-height:min(50dvh,calc(100dvh - 220px));overflow:auto;background:#10251f;box-shadow:0 12px 24px #000b}
#talkDialog :is(.memory-proposal,.memory-card) button{min-height:44px}
#talkDialog .memory-list{max-height:none;overflow:visible}
#talkDialog .talk-attachments{max-height:145px}
#talkDialog .strategy-workbench{flex:1;min-height:0;gap:6px;padding:8px}
#talkDialog :is(.talk-preparation,.talk-context-line,.talk-guide-topic){padding:6px 8px;font-size:12px}
#talkDialog .talk-transcript{min-height:0;gap:10px}
#talkDialog .chat-message{max-width:calc(100% - 28px);padding:9px;font-size:16px}
#talkDialog .chat-message--user{max-width:94%}
#talkDialog .talk-compose{padding:7px}
#talkDialog .talk-compose textarea{min-height:58px;height:64px}
#talkDialog .talk-actions{padding:6px 8px;gap:6px}
#talkDialog .talk-actions button{padding:5px 8px;font-size:12px}
}

@media(max-height:650px){
#talkDialog .talk-layout{overflow:hidden}
#talkDialog .strategy-workbench{flex:1;min-height:0;overflow:hidden}
#talkDialog .talk-transcript{min-height:0}
#talkDialog .talk-character{overflow:auto}
}

@media(max-width:699px) and (max-height:650px){
#talkDialog .talk-character{overflow:visible}
#talkDialog .talk-compose textarea{min-height:54px;height:58px}
#talkDialog .talk-actions{padding-block:4px}
}

@media(max-height:450px){
#talkDialog .talk-context-line{display:none}
}

/* Recorded scenes are chosen as real thumbnails across completed expeditions. */
#talkSceneDialog{width:min(1000px,calc(100% - 24px));height:min(780px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:16px;overflow:hidden;border:1px solid #ab9561;border-radius:7px;background:linear-gradient(140deg,#233b30,#0b1d19)}
#talkSceneDialog[open]{display:flex;flex-direction:column;gap:10px}
#talkSceneDialog .dialog-header{flex-shrink:0;margin:0;padding-bottom:10px}
#talkSceneDialog .dialog-header h2{font-size:24px}
#talkSceneDialog .scene-picker-layout{display:grid;grid-template-columns:138px minmax(0,1fr);flex:1;gap:13px;min-height:0}
#talkRunList{display:flex;flex-direction:column;gap:7px;overflow:auto;scrollbar-width:thin}
#talkRunList button{display:flex;flex-direction:column;gap:4px;flex-shrink:0;min-height:78px;padding:10px;text-align:left;border:1px solid #536f5e;border-radius:5px;background:#142c23}
#talkRunList button[aria-current="true"]{border-color:#e4c078;box-shadow:inset 3px 0 #d2ae62;background:#2c3e2a}
#talkRunList b{color:#eaddb3;font-size:13px}
#talkRunList :is(small,span){color:#aab8a5;font-size:11px}
#talkSceneDialog .scene-picker-events{min-width:0;overflow:auto;scrollbar-width:thin}
#talkRunTitle{margin:0 0 9px;font-size:15px}
#talkSceneDialog .scene-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#talkSceneDialog .scene-choice{overflow:hidden;border:1px solid #456a55;border-radius:5px;background:#112a21}
#talkSceneDialog .scene-choice[data-selected="true"]{border-color:#e4bc69;box-shadow:inset 0 0 0 1px #e4bc69,0 0 12px #d5ac3827}
#talkSceneDialog .scene-choice-select{display:flex;flex-direction:column;align-items:start;gap:5px;width:100%;min-height:0;padding:0 0 8px;border:0;border-radius:0;text-align:left;background:transparent}
#talkSceneDialog .scene-choice-select[aria-pressed="true"]{background:#3b442783}
#talkSceneDialog .record-scene{width:100%;height:120px;object-fit:cover;border:0}
#talkSceneDialog .scene-choice-select :is(small,b,span){padding:0 9px}
#talkSceneDialog .scene-choice-select b{font-size:13px}
#talkSceneDialog .scene-choice-select :is(small,span){color:#b3c0a9;font-size:11px}
#talkSceneDialog .scene-choice>button.text-button{min-height:32px;padding:5px 9px;color:#d7c79b;font-size:11px}
#talkSceneDialog .scene-picker-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;flex-shrink:0;padding-top:10px;border-top:1px solid #83916c5c}
#talkSceneSelection{display:flex;gap:5px;overflow:auto;padding:2px;color:#c3cbb2}
#talkSceneSelection button{flex-shrink:0;max-width:210px;min-height:34px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
#talkScenePickerStatus{grid-column:1/-1;margin:0;color:#e6c884;font-size:12px}
#talkScenePickerStatus:empty{display:none}
#talkSceneConfirm{grid-column:2;grid-row:1;min-height:44px}

@media(max-width:699px){
#talkSceneDialog{width:calc(100% - 12px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:10px}
#talkSceneDialog .dialog-header h2{font-size:20px}
#talkSceneDialog .scene-picker-layout{display:flex;flex-direction:column;gap:8px}
#talkRunList{flex-direction:row;max-height:94px;flex-shrink:0}
#talkRunList button{min-width:112px;min-height:75px;padding:7px}
#talkSceneDialog .scene-picker-events{flex:1}
#talkSceneDialog .record-scene{height:90px}
#talkSceneDialog .scene-picker-footer{grid-template-columns:minmax(0,1fr)}
#talkSceneConfirm{grid-column:1;grid-row:auto}
}