:root{color-scheme:dark;--page-bg: radial-gradient(circle at top, rgba(255, 72, 164, .22), transparent 24%), radial-gradient(circle at 85% 18%, rgba(255, 155, 210, .18), transparent 20%), linear-gradient(180deg, #050507 0%, #0d0710 58%, #120513 100%);--panel-bg: rgba(18, 11, 18, .88);--panel-border: rgba(255, 82, 176, .16);--text-main: #fff0f8;--text-muted: #caa4bc;--accent: #ff4fa3;--accent-dark: #ff2c92;--accent-soft: rgba(255, 79, 163, .14);--danger: #ff7ba7;--shadow: 0 24px 80px rgba(0, 0, 0, .44);--radius-lg: 24px;--radius-md: 16px;--radius-sm: 12px;--font-stack: "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif}*{box-sizing:border-box}body{position:relative;margin:0;height:100dvh;min-height:100vh;font-family:var(--font-stack);color:var(--text-main);background:var(--page-bg);overflow:hidden}body:before,body:after{content:"";position:fixed;pointer-events:none;border-radius:50%;filter:blur(48px);opacity:.8}body:before{top:-14vw;left:-10vw;width:42vw;height:42vw;background:radial-gradient(circle,#ff4fa357,#ff4fa300 66%)}body:after{right:-16vw;bottom:-18vw;width:46vw;height:46vw;background:radial-gradient(circle,#ff84c933,#ff84c900 64%)}button,input,div[contenteditable=true]{font:inherit}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;height:100dvh;padding:16px 0;position:relative;z-index:1;overflow:hidden}.panel{background:var(--panel-bg);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.auth-panel{width:min(460px,100%);margin:11vh auto 0;padding:34px}.board-screen{display:grid;grid-template-rows:minmax(0,15fr) minmax(0,85fr);gap:12px;height:100%;min-height:0;overflow:hidden}.board-header,.message-panel,.composer-panel{padding:24px}.board-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.panel-header h1,.board-header h2,.message-panel h2,.message-panel h3,.composer-panel h3{margin:0;letter-spacing:.02em}.board-title-group{display:grid;gap:4px;min-width:0}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.panel-copy{margin:10px 0 0;color:var(--text-muted);line-height:1.6}.current-user{margin:0;color:var(--text-muted);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stack-form{display:grid;gap:12px;margin-top:28px}.field-label{font-size:14px;color:var(--text-muted)}.text-input,.editor{width:100%;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);background:#07060ae0;color:var(--text-main);padding:14px 16px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.text-input::placeholder,.editor:empty:before{color:#ffdeee61}.editor:empty:before{content:"メッセージを入力"}.text-input:focus,.editor:focus{border-color:#ff4fa3b8;box-shadow:0 0 0 4px #ff4fa324}.editor{flex:1 1 auto;min-height:84px;max-height:none;overflow-y:auto;line-height:1.7}.primary-button,.secondary-button,.ghost-button,.toolbar-button,.message-menu-trigger,.message-action-button{border:none;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background-color .15s ease}.primary-button,.secondary-button,.ghost-button{border-radius:24px;padding:12px 18px}.toolbar-button{border-radius:999px;padding:10px 14px}.primary-button{background:linear-gradient(135deg,#ff4fa3,#ff237f);color:#12040e;font-weight:700}.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.toolbar-button:hover,.message-menu-trigger:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled,.toolbar-button:disabled,.message-menu-trigger:disabled,.message-action-button:disabled{opacity:.55;cursor:not-allowed;transform:none}.secondary-button{background:#ffffff08;color:var(--text-main);border:1px solid rgba(255,255,255,.08)}.ghost-button,.toolbar-button{background:var(--accent-soft);color:#ffb5d8}.danger-button{color:var(--danger)}.header-actions,.composer-actions{display:flex;gap:12px;align-items:center}.status-pill{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:8px 14px;border-radius:999px;border:none;background:#ff4fa31f;box-shadow:inset 0 0 0 1px #ff4fa329;color:#ffb7d8;font-size:14px;line-height:1.1;white-space:nowrap}.message-panel-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:12px}.message-panel-heading{display:grid;gap:6px}.message-panel-heading .panel-copy{margin:0;font-size:13px}.message-panel-actions{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:8px;align-items:center;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}.message-panel-actions::-webkit-scrollbar{display:none}.message-panel-actions .ghost-button,.message-panel-actions .secondary-button{padding:8px 14px;font-size:14px;line-height:1.1;flex-shrink:0;white-space:nowrap}.message-list{flex:1;min-height:0;display:grid;align-content:start;gap:14px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:none;-ms-overflow-style:none}.message-list::-webkit-scrollbar{display:none}.message-card{position:relative;display:grid;gap:12px;padding:16px;border-radius:var(--radius-md);background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.message-card.message-card-other{background:linear-gradient(135deg,#ff4fa31f,#ffffff0a);border-color:#ff4fa32e}.message-card.message-card-other .message-author{color:#ffd5e8}.message-card.message-card-unread{border-color:#ff4fa357;background:linear-gradient(135deg,#ff4fa333,#ffffff0d);box-shadow:inset 0 0 0 1px #ff4fa324}.message-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff4fa3,#2d071d);color:#fff7fb;font-weight:800;font-size:18px;overflow:hidden;position:relative}.message-avatar-image{width:100%;height:100%;object-fit:cover;display:block}.message-avatar-fallback{display:grid;place-items:center;width:100%;height:100%}.message-header{display:flex;align-items:center;gap:10px;min-width:0}.message-meta{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:10px;align-items:center;overflow:hidden}.message-author{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{color:var(--text-muted);font-size:14px;flex-shrink:0}.message-read-status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#ffffff0a;color:var(--text-muted);font-size:12px;flex-shrink:0}.message-read-status.is-read{background:#ff4fa324;color:#ffc1df}.message-content{color:var(--text-main);font-size:14px;line-height:1.55;word-break:break-word}.message-content p,.message-content ul,.message-content ol{margin:0 0 8px}.message-content p:last-child,.message-content ul:last-child,.message-content ol:last-child{margin-bottom:0}.message-menu{position:absolute;top:12px;right:12px;z-index:12}.message-action-button:focus-visible{outline:none;box-shadow:0 0 0 4px #ff4fa324}.message-actions{position:absolute;top:0;right:0;display:grid;gap:4px;min-width:128px;margin-top:0;padding:8px;border-radius:16px;background:#0c080ef5;border:1px solid rgba(255,82,176,.16);box-shadow:0 18px 40px #00000057;z-index:10}.message-action-button{width:100%;padding:10px 12px;border-radius:12px;background:transparent;color:var(--text-main);text-align:left}.message-action-button:hover{background:#ff4fa31f}.new-message-button{background:#ff4fa32e;color:#ffd8ea}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.feedback{min-height:12px;margin:6px 0 0}.error-text{color:var(--danger)}.status-text{color:var(--text-muted)}.message-panel{min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden}.composer-panel{min-height:0;height:auto;padding:16px;display:flex;flex-direction:column;overflow:hidden}.composer-layout{flex:1;min-height:0;display:grid;grid-template-columns:52px minmax(0,1fr) 88px;gap:12px;align-items:stretch}.composer-layout.is-editing{grid-template-columns:minmax(0,1fr) 88px}.image-picker-button{width:52px;min-width:52px;min-height:52px;border:1px solid rgba(255,79,163,.28);border-radius:16px;background:#ff4fa324;color:#ffd4e8;font-size:28px;cursor:pointer}.image-picker-button:disabled{opacity:.45;cursor:not-allowed}.composer-actions{margin-top:0;width:88px;flex-shrink:0;flex-direction:column;gap:8px;align-items:stretch;justify-content:stretch;align-self:stretch}.composer-actions .ghost-button,.composer-actions .primary-button{width:100%;flex:1 1 0;min-width:0;min-height:0;padding:8px 10px;font-size:12px;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}.composer-panel .editor{min-height:0;height:100%}.composer-panel .editor.has-images:empty:before{content:"説明を追加（任意）"}.composer-panel .feedback{min-height:0;margin-top:4px}.image-draft-tray{display:flex;gap:10px;overflow-x:auto;padding:0 0 10px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}.image-draft-card{position:relative;flex:0 0 92px;width:92px;min-height:92px;border-radius:14px;overflow:hidden;background:#08070a;border:1px solid rgba(255,255,255,.09);scroll-snap-align:start}.image-draft-card img{width:92px;height:92px;display:block;object-fit:cover}.image-draft-card.is-error{border-color:#ff7ba7c2}.image-draft-status{position:absolute;left:5px;bottom:5px;max-width:78px;padding:3px 6px;border-radius:999px;background:#000000b8;color:#fff;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-draft-remove{position:absolute;top:0;right:0;width:44px;height:44px;border:0;border-radius:0 14px 0 18px;background:linear-gradient(225deg,#000000e6,#0000006b);color:#fff;font-size:25px;line-height:1}.image-draft-retry{position:absolute;inset:auto 5px 5px;min-height:36px;border:0;border-radius:10px;background:#ff4fa3eb;color:#19050f;font-weight:700;font-size:11px}.image-draft-error{position:absolute;inset:44px 4px auto;margin:0;color:#fff;font-size:9px;line-height:1.2;text-shadow:0 1px 4px #000}.image-progress-track{position:absolute;left:0;right:0;bottom:0;height:4px;background:#fff3}.image-progress-track span{display:block;height:100%;background:#ff4fa3}.image-picker-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:18px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:#000000ad}.image-picker-sheet{width:min(520px,100%);display:grid;gap:8px;padding:12px;border:1px solid rgba(255,79,163,.22);border-radius:22px;background:#181018;box-shadow:0 24px 70px #00000085}.image-picker-sheet button{min-height:52px;border:0;border-radius:14px;background:#ff4fa326;color:var(--text-main);font-weight:700}.image-picker-sheet .image-picker-cancel{background:#ffffff0f;color:var(--text-muted)}.message-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:hidden;border-radius:15px}.message-image-grid.image-count-1{grid-template-columns:minmax(0,1fr)}.message-image-button{position:relative;min-height:116px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#070609;cursor:zoom-in}.message-image-grid.image-count-1 .message-image-button{min-height:min(50vw,360px)}.message-image-button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.message-image-error{position:absolute;inset:0;display:grid;place-items:center;color:#ffb6d6;font-size:12px}.image-viewer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:calc(58px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));background:#000000f5;overscroll-behavior:contain}.image-viewer-image{max-width:100%;max-height:100%;object-fit:contain;touch-action:pinch-zoom;user-select:none}.image-viewer-close,.image-viewer-nav,.image-viewer-retry{border:0;color:#fff;background:#221b22d1}.image-viewer-close{position:absolute;top:calc(8px + env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;font-size:30px}.image-viewer-count{position:absolute;top:calc(22px + env(safe-area-inset-top));left:50%;transform:translate(-50%);color:#fff;font-size:13px}.image-viewer-nav{position:absolute;top:50%;width:48px;height:56px;border-radius:16px;transform:translateY(-50%);font-size:38px}.image-viewer-nav.is-previous{left:max(8px,env(safe-area-inset-left))}.image-viewer-nav.is-next{right:max(8px,env(safe-area-inset-right))}.image-viewer-retry{min-height:48px;padding:0 18px;border-radius:999px}@media(max-width:720px){.app-shell{width:min(100%,calc(100% - 20px));padding:10px 0}.auth-panel,.board-header,.message-panel,.composer-panel{padding:18px}.board-header,.message-panel-header{flex-direction:column;align-items:stretch}.message-panel-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.board-screen{grid-template-rows:minmax(132px,15fr) minmax(0,85fr);gap:10px}.message-panel{height:auto}.composer-panel{min-height:0;padding:14px}.composer-layout{grid-template-columns:48px minmax(0,1fr) 78px;gap:8px}.composer-layout.is-editing{grid-template-columns:minmax(0,1fr) 92px}.image-picker-button{width:48px;min-width:48px;min-height:48px;border-radius:14px}.header-actions,.composer-actions,.message-panel-actions{justify-content:space-between}.current-user{font-size:12px;font-weight:700}.status-pill,.message-panel-actions .ghost-button,.message-panel-actions .secondary-button{padding:6px 10px;font-size:12px}.message-panel-actions{gap:6px;max-width:62vw;justify-self:end}.composer-actions{width:78px}.composer-layout.is-editing .composer-actions{width:92px}.board-screen.has-image-drafts{grid-template-rows:minmax(218px,auto) minmax(0,1fr)}.image-draft-card,.image-draft-card img{width:82px}.image-draft-card{flex-basis:82px;min-height:82px}.image-draft-card img{height:82px}.message-image-grid.image-count-1 .message-image-button{min-height:min(62vw,320px)}.image-viewer-nav{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:none}.message-list{padding-right:0}}
