:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20242a; background: #f6f7f9; }
* { box-sizing: border-box; }
body { margin: 0; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.app-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid #dce1e7; padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; min-height: 100vh; max-height: 100vh; }
.sidebar-header, .sidebar-section-head, .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-header { padding: 4px 8px; font-size: 1.15rem; }
.sidebar-section-head { color: #555f6a; font-size: .88rem; padding: 4px 8px; }
.sidebar-section-head button { border: 0; background: none; color: #2267bb; padding: 2px; }
.primary-button { background: #2267bb; border: 1px solid #2267bb; border-radius: 7px; color: #fff; padding: 9px 12px; }
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.folder-group { border-bottom: 1px solid #eef0f3; padding: 5px 0; }
.folder-group > summary, .sidebar-bottom-group > summary { cursor: pointer; font-weight: 600; padding: 7px 8px; }
.sidebar-bottom-group { border-top: 1px solid #dce1e7; max-height: 22vh; overflow-y: auto; }
.session-row { display: flex; align-items: start; gap: 3px; padding: 2px 4px 2px 12px; border-radius: 6px; }
.session-row.active { background: #edf4ff; }
.session-open { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 7px 2px; }
.session-open span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-open small, .session-tags { color: #687481; font-size: .75rem; }
.session-tags { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-menu { position: relative; }
.session-menu > summary { list-style: none; cursor: pointer; padding: 7px 4px; }
.session-menu > summary::-webkit-details-marker { display: none; }
.session-menu-items { position: absolute; right: 0; top: 28px; z-index: 5; width: 185px; padding: 6px; background: #fff; border: 1px solid #dce1e7; border-radius: 7px; box-shadow: 0 6px 16px #0002; }
.session-menu-items button, .session-menu-items select { display: block; width: 100%; text-align: left; padding: 6px; border: 0; background: #fff; }
.session-menu-items button:hover { background: #f2f5f8; }
.empty-note { color: #687481; padding: 8px; font-size: .87rem; }
.other-row { padding: 7px 8px; border-top: 1px solid #eef0f3; font-size: .85rem; overflow-wrap: anywhere; }
.other-row button { margin-top: 5px; }
.chat-main { min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { background: #fff; border-bottom: 1px solid #dce1e7; min-height: 70px; padding: 12px 22px; display: flex; align-items: center; gap: 12px; }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title strong, .topbar-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title small { color: #687481; margin-top: 3px; }
.topbar button { padding: 7px 10px; border: 1px solid #cbd3dc; border-radius: 6px; background: #fff; }
#chat-status { min-height: 1.5em; margin: 8px 24px; color: #65717e; font-size: .88rem; }
.conversation { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 14px max(24px, calc((100vw - 980px) / 2)) 30px; overscroll-behavior: contain; }
.message { max-width: 780px; min-width: 0; margin: 0 auto 20px; padding: 12px 16px; border-radius: 10px; overflow-wrap: anywhere; }
.message.user { background: #e8f1ff; white-space: pre-wrap; }
.message.assistant { background: #fff; border: 1px solid #e0e5eb; }
.message.failed { border-color: #c95050; }
.message-head { font-size: .8rem; font-weight: 700; color: #53606d; margin-bottom: 8px; }
.message-body { line-height: 1.65; min-width: 0; }
.message-body > :first-child { margin-top: 0; }
.message-body > :last-child { margin-bottom: 0; }
.message-body pre { max-width: 100%; padding: 10px; overflow-x: auto; background: #f3f5f7; border-radius: 6px; }
.message-body code { background: #f3f5f7; padding: 1px 3px; border-radius: 3px; }
.message-body pre code { padding: 0; }
.message-body blockquote { border-left: 3px solid #b6c4d4; padding-left: 12px; margin-left: 0; color: #53606d; }
.message-body table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.message-body img { max-width: 100%; height: auto; }
.message-body th, .message-body td { border: 1px solid #cbd3dc; padding: 5px 8px; }
.message-details { margin-top: 10px; color: #66717e; font-size: .78rem; }
.composer { background: #fff; border-top: 1px solid #dce1e7; padding: 12px max(24px, calc((100vw - 980px) / 2)); flex: none; }
.composer-row { display: flex; align-items: end; gap: 10px; }
.composer textarea { flex: 1; min-width: 0; min-height: 76px; max-height: 240px; resize: vertical; border: 1px solid #cbd3dc; border-radius: 8px; padding: 10px; }
#attach { width: 38px; height: 38px; flex: none; border: 1px solid #cbd3dc; border-radius: 8px; background: #f7f9fc; font-size: 1.3rem; }
.attach-control { position: relative; flex: none; }
.attach-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; min-width: 156px; padding: 5px; border: 1px solid #cbd3dc; border-radius: 10px; background: #fff; box-shadow: 0 5px 22px #0002; }
.attach-menu[hidden] { display: none; }
.attach-menu button { display: block; width: 100%; min-height: 44px; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; text-align: left; font: inherit; }
.attach-menu button:hover, .attach-menu button:focus-visible { background: #edf3fc; }
.pending-attachments { display: flex; flex-wrap: wrap; gap: 5px; }
.pending-attachments:not(:empty) { margin-bottom: 8px; }
.attachment-chip { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 14px; background: #edf3fc; color: #345477; font-size: .8rem; overflow-wrap: anywhere; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.upload-note { display: block; color: #73808e; margin-top: 4px; font-size: .72rem; }
.settings-drawer { position: fixed; z-index: 20; top: 0; bottom: 0; right: 0; width: min(350px, 92vw); background: #fff; box-shadow: -8px 0 24px #0002; padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(105%); transition: transform .18s ease; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.settings-drawer.open { transform: translateX(0); }
.settings-drawer label { font-weight: 600; margin-top: 10px; }
.settings-drawer select { width: 100%; padding: 9px; border: 1px solid #cbd3dc; border-radius: 6px; background: #fff; }
#settings-note, #skill-description { color: #65717e; font-size: .86rem; line-height: 1.5; }
.drawer-header button { border: 0; background: none; font-size: 1.4rem; }
.shade { position: fixed; inset: 0; background: #0006; z-index: 10; }
.mobile-only { display: none; }
@media (max-width: 768px) {
  body:not(.center-page):not(.login-page) { overflow: hidden; }
  .app-shell { display: block; min-height: 0; height: var(--app-height, 100dvh); }
  .mobile-only { display: inline-block; }
  .sidebar { position: fixed; z-index: 12; top: 0; bottom: 0; left: 0; width: min(310px, 88vw); min-height: 0; max-height: none; height: 100dvh; transform: translateX(-105%); transition: transform .18s ease; }
  .sidebar.open { transform: translateX(0); }
  .topbar { min-height: 58px; padding: 8px 12px; }
  .topbar-title { font-size: .94rem; }
  .topbar-title small { font-size: .73rem; }
  .chat-main { height: var(--app-height, 100dvh); width: 100%; }
  #chat-status { margin: 5px 14px; font-size: .82rem; }
  .conversation { padding: 12px 12px 24px; scroll-padding-bottom: 24px; }
  .message { max-width: 100%; padding: 11px 13px; margin-bottom: 14px; font-size: .97rem; }
  .message-body { line-height: 1.72; }
  .message-body pre, .message-body table { max-width: calc(100vw - 52px); }
  .composer { position: relative; z-index: 1; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px #0000000a; }
  .composer-row { gap: 7px; }
  .composer textarea { min-height: 46px; max-height: min(32dvh, 190px); resize: none; font-size: 16px; line-height: 1.45; }
  .composer .primary-button { min-height: 42px; }
  #sidebar-settings { border: 0; text-align: left; font: inherit; }
}
.nav-link { display:block; padding:9px 10px; color:#2267bb; text-decoration:none; border-radius:6px; background:#f1f6fe; }
#sidebar-settings { display:none; }
@media (max-width:768px) { #sidebar-settings { display:block; } }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:20px; }
.login-card { display:flex; flex-direction:column; gap:10px; width:min(100%,360px); padding:25px; background:white; border:1px solid #dce1e7; border-radius:12px; }
.login-card h1 { margin:0; }
.login-card p { margin:4px 0 12px; color:#647180; }
.login-card input { padding:11px; border:1px solid #cbd3dc; border-radius:7px; font-size:16px; }
.login-card button { margin-top:8px; }
#login-status { min-height:1.3em; color:#b43737; }
.preset-row { display:flex; gap:8px; }
.preset-row button { flex:1; border:1px solid #cbd3dc; background:#f7f9fc; padding:8px 4px; border-radius:6px; font-size:.84rem; }
#preset-display { margin:2px 0; font-size:.86rem; color:#435161; }
#advanced-settings { border-top:1px solid #e0e5eb; padding-top:10px; }
#advanced-settings summary { cursor:pointer; }
#advanced-settings label, #advanced-settings select { display:block; margin-top:10px; }
.center-page { background:#f6f7f9; }
.center-header { display:flex; align-items:center; gap:20px; padding:16px max(20px,calc((100vw - 1180px)/2)); background:white; border-bottom:1px solid #dce1e7; }
.center-header strong { flex:1; }
.center-header a { color:#2267bb; text-decoration:none; }
.center-content { max-width:1180px; margin:0 auto; padding:26px 20px 70px; }
.center-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:20px; }
.center-toolbar select, .center-toolbar button, .center-content input, .center-content textarea, .center-content select { padding:8px; border:1px solid #cbd3dc; border-radius:6px; background:white; }
.center-toolbar label { display:grid; gap:4px; }
.skill-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.skill-card { display:block; padding:18px; border:1px solid #dce1e7; border-radius:10px; background:white; color:inherit; text-decoration:none; min-height:190px; }
.skill-card:hover { border-color:#2267bb; }
.skill-card h2 { margin:8px 0; font-size:1.08rem; }
.skill-card p { font-size:.86rem; line-height:1.45; color:#53606d; max-height:4.4em; overflow:hidden; }
.skill-card-meta { display:flex; flex-wrap:wrap; gap:5px; }
.skill-badge { background:#eef3fa; color:#4a6077; border-radius:15px; font-size:.75rem; padding:3px 8px; }
.skill-card .skill-note { border-top:1px solid #edf0f4; padding-top:8px; }
.skill-icon { width:42px; height:42px; object-fit:contain; }
.detail-head { display:flex; gap:16px; align-items:center; margin:20px 0; }
.detail-head img { width:68px; height:68px; object-fit:contain; }
.detail-head h1 { margin:0; }
.detail-head p { margin:5px 0; color:#53606d; }
#skill-detail-view section { background:white; border:1px solid #dce1e7; border-radius:9px; padding:18px; margin-top:24px; }
#skill-detail-view label { display:block; margin:12px 0 4px; }
#skill-detail-view textarea, #skill-detail-view input, #skill-detail-view select { display:block; width:min(100%,620px); }
#profile-save { margin-top:14px; }
.file-info { display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; }
.file-info dt { color:#687481; }
.file-info dd { margin:0; overflow-wrap:anywhere; }
.module-row { border-top:1px solid #edf0f4; padding:8px 0; display:flex; justify-content:space-between; gap:15px; }
.module-row small { color:#687481; overflow-wrap:anywhere; }
.markdown-document { overflow-wrap:anywhere; line-height:1.6; }
.markdown-test-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.markdown-test-grid > * { margin:0; padding:16px; border:1px solid #dce1e7; border-radius:8px; background:white; overflow-x:auto; }
@media (max-width:768px) { .markdown-test-grid { grid-template-columns:1fr; } .module-row { display:block; } .module-row small { display:block; } }
.pending-attachments,.message-attachments {display:flex;gap:10px;flex-wrap:wrap;}
.pending-attachments {max-height:260px;overflow-y:auto;}
.attachment-preview {position:relative;display:flex;flex-direction:column;width:130px;padding:8px;border:1px solid #dce2e8;border-radius:8px;gap:4px;color:inherit;min-width:0;}
.attachment-preview img {width:100%;height:90px;object-fit:contain;background:#f4f6f8;border-radius:4px;}
.attachment-preview > a {display:block;}
.attachment-preview span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.attachment-preview small {font-size:11px;overflow-wrap:anywhere;}
.attachment-preview button {position:absolute;top:1px;right:1px;min-width:24px;padding:2px;background:#fff;}
.attachment-preview .attachment-actions {position:static;display:flex;gap:4px;}
.attachment-preview .attachment-actions button {position:static;min-height:30px;padding:3px 7px;font-size:12px;}
.attachment-preview.failed small {color:#a12b2b;}
.camera-modal[hidden] {display:none;}
.camera-modal {position:fixed;inset:0;z-index:30;background:#000d;display:grid;place-items:center;padding:12px;}
.camera-panel {width:min(680px,100%);max-height:96dvh;overflow-y:auto;background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;}
.camera-head,.camera-actions {display:flex;align-items:center;justify-content:space-between;gap:10px;}
.camera-head button {border:0;background:none;font-size:1.5rem;}
.camera-panel video {display:block;width:100%;max-height:60dvh;object-fit:contain;background:#111;border-radius:8px;}
.camera-panel p {margin:0;color:#53606d;font-size:.9rem;}
.camera-shots {display:flex;gap:8px;min-height:70px;overflow-x:auto;}
.camera-shots > div {position:relative;flex:none;}
.camera-shots img {width:82px;height:68px;object-fit:cover;border-radius:5px;}
.camera-shots button {position:absolute;right:0;top:0;}
.camera-actions button {min-height:44px;padding:8px 12px;}
#camera-shutter {border-radius:24px;background:#2267bb;color:white;border:0;min-width:86px;}
@media (max-width:768px) {
  .pending-attachments .attachment-preview {width:calc((100% - 20px)/3);min-width:0;padding:5px;}
  .pending-attachments .attachment-preview img {height:62px;}
  .pending-attachments .attachment-preview small {line-height:1.25;}
}
.skill-card-wrapper {display:flex;flex-direction:column;gap:6px;min-width:0;}
.skill-card-wrapper .skill-card {flex:1;}