* { box-sizing:border-box; }
:root { color:#202124; background:#fff; font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN',Meiryo,Arial,sans-serif; --sidebar-w:260px; --header-h:64px; }
body { margin:0; background:linear-gradient(180deg,#fff 0,#f8fbff 100%); min-height:100vh; }
button,input,select,textarea { font:inherit; }
.ai-page { min-height:100vh; display:flex; flex-direction:column; }
.ai-header { display:flex; align-items:center; gap:24px; min-height:64px; padding:10px 24px; border-bottom:1px solid #edf0f2; background:rgba(255,255,255,.92); position:sticky; top:0; z-index:20; }
.sidebar-toggle { flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border:1px solid #dadce0; border-radius:8px; background:#fff; color:#3c4043; cursor:pointer; font-size:16px; }
.sidebar-toggle:hover { background:#f8f9fa; border-color:#bdc1c6; }
.ai-logo { flex-shrink:0; color:#202124; font:700 27px/1 Arial,sans-serif; letter-spacing:-1px; text-decoration:none; }
.ai-logo span:nth-child(1),.ai-logo span:nth-child(4){color:#4285f4}.ai-logo span:nth-child(2),.ai-logo span:nth-child(6){color:#ea4335}.ai-logo span:nth-child(3),.ai-logo span:nth-child(7){color:#fbbc04}.ai-logo span:nth-child(5){color:#34a853}
.ai-header-title { display:flex; align-items:center; gap:8px; color:#3c4043; font-size:16px; font-weight:700; }
.ai-sparkle { background:linear-gradient(135deg,#4285f4,#a142f4 45%,#ea4335 75%,#fbbc04); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:22px; }
.ai-header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.new-chat-button,.back-link { border:1px solid #dadce0; border-radius:18px; background:#fff; color:#3c4043; cursor:pointer; padding:7px 12px; font-size:13px; text-decoration:none; }
.new-chat-button:hover,.back-link:hover { background:#f8f9fa; border-color:#bdc1c6; }

/* 左固定サイドバー(保存した会話) */
.ai-shell { position:relative; flex:1; display:flex; }
.conversation-sidebar { position:sticky; top:65px; align-self:flex-start; width:var(--sidebar-w); flex:0 0 var(--sidebar-w); height:calc(100vh - 65px); padding:14px; border-right:1px solid #e5e9ee; background:rgba(255,255,255,.92); overflow:auto; transition:margin-left .2s ease,opacity .2s ease; z-index:10; }
.ai-shell.sidebar-collapsed .conversation-sidebar { margin-left:calc(-1 * var(--sidebar-w)); opacity:0; pointer-events:none; }
.conversation-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }.conversation-sidebar h2 { margin:0; color:#3c4043; font-size:13px; }.conversation-panel-head button { border:0; padding:0; background:none; color:#5f6368; cursor:pointer; font-size:11px; }.conversation-panel-head button:hover { color:#b3261e; text-decoration:underline; }
.conversation-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }.conversation-sidebar h2 { margin:0; color:#3c4043; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.conversation-panel-head button { border:0; padding:0; background:none; color:#5f6368; cursor:pointer; font-size:11px; flex:0 0 auto; white-space:nowrap; }
.conversation-note,.conversation-empty { margin:7px 0 10px; color:#80868b; font-size:11px; line-height:1.45; }.conversation-list { display:flex; flex-direction:column; gap:5px; }.conversation-item { width:100%; border:1px solid transparent; border-radius:8px; background:transparent; color:#3c4043; cursor:pointer; padding:8px; text-align:left; }.conversation-item:hover { background:#f1f6ff; }.conversation-item.active { border-color:#c5d8f8; background:#e8f0fe; }.conversation-item strong,.conversation-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.conversation-item strong { font-size:12px; font-weight:600; }.conversation-item small { margin-top:3px; color:#80868b; font-size:10px; }
.sidebar-backdrop { display:none; }

.ai-layout { min-width:0; flex:1; display:flex; justify-content:center; }
.ai-chat-shell { min-width:0; width:100%; max-width:880px; padding:24px 24px 210px; }
.chat-log { display:flex; flex-direction:column; gap:18px; }.chat-message { display:flex; gap:12px; align-items:flex-start; }.chat-message.user { justify-content:flex-end; }.message-avatar { display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border-radius:50%; background:#e8f0fe; color:#1967d2; font-size:16px; font-weight:700; }.message-content { max-width:min(680px,calc(100% - 42px)); padding:11px 14px; border:1px solid #edf0f2; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(60,64,67,.06); color:#202124; font-size:14px; line-height:1.75; word-break:break-word; }
.message-content p { margin:0 0 8px; }
.message-content p:last-child { margin-bottom:0; }
.message-content ul { margin:2px 0 10px; padding-left:20px; }
.message-content ul:last-child { margin-bottom:0; }
.message-content li { margin:2px 0; }
.message-content h1,.message-content h2,.message-content h3 { margin:14px 0 6px; color:#202124; font-weight:700; line-height:1.4; }
.message-content h1:first-child,.message-content h2:first-child,.message-content h3:first-child { margin-top:0; }
.message-content h1 { font-size:18px; }
.message-content h2 { font-size:16px; }
.message-content h3 { font-size:14.5px; }
.message-content code { background:#f1f3f4; border:1px solid #edf0f2; border-radius:4px; padding:1px 5px; color:#c5221f; font-family:Consolas,Menlo,Monaco,monospace; font-size:.92em; word-break:break-word; }
.chat-message.user .message-content code { background:#d2e3fc; border-color:#c5d8f8; }
.message-content a { color:#1a73e8; word-break:break-all; }
.message-content a:hover { text-decoration:underline; }
.chat-message.user .message-content a { color:#0b57d0; }
.chat-message.user .message-content { background:#e8f0fe; border-color:#d2e3fc; white-space:pre-wrap; }
.message-note { margin:6px 0 0 42px; color:#80868b; font-size:11px; line-height:1.4; }
.chat-status { display:flex; align-items:center; gap:9px; margin:16px 0 0 42px; color:#5f6368; font-size:13px; }.chat-status[hidden] { display:none; }.chat-status::before { content:""; width:14px; height:14px; border:2px solid #dfe1e5; border-top-color:#1a73e8; border-radius:50%; animation:ai-spin .8s linear infinite; }.chat-status.error { color:#b3261e; }.chat-status.error::before { content:"!"; display:grid; place-items:center; width:15px; height:15px; border:0; background:#fce8e6; color:#b3261e; font-weight:700; animation:none; }@keyframes ai-spin { to { transform:rotate(360deg); } }
.ai-composer { position:fixed; z-index:5; right:0; bottom:0; left:0; padding:10px max(16px,calc((100% - 880px)/2)); border-top:1px solid #edf0f2; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); transition:left .2s ease; }
@media(min-width:901px) { body:not(.sidebar-collapsed) .ai-composer { left:var(--sidebar-w); padding-left:max(16px,calc((100% - var(--sidebar-w) - 880px)/2)); } }.composer-inner { max-width:880px; margin:0 auto; }.ai-settings { display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 20px; margin-bottom:8px; }
.setting-field { display:flex; flex-direction:column; gap:3px; min-width:150px; max-width:240px; flex:1 1 150px; }
.setting-field label { color:#5f6368; font-size:11px; }
.setting-field select,.setting-field input { height:29px; width:100%; border:1px solid #dadce0; border-radius:5px; background:#fff; color:#3c4043; font-size:12px; padding:0 8px; }
.field-hint { display:block; color:#80868b; font-size:10.5px; line-height:1.5; overflow-wrap:anywhere; }
.chat-form { display:flex; align-items:flex-end; gap:10px; padding:7px 8px 7px 14px; border:1px solid #dfe1e5; border-radius:20px; background:#fff; box-shadow:0 1px 4px rgba(60,64,67,.12); }.chat-form:focus-within { border-color:#a8c7fa; box-shadow:0 1px 5px rgba(26,115,232,.2); }#chatInput { flex:1; min-height:26px; max-height:110px; resize:none; border:0; outline:0; background:transparent; color:#202124; font-size:15px; line-height:1.55; padding:3px 0; }.send-button { flex:0 0 auto; border:0; border-radius:16px; background:#1a73e8; color:#fff; cursor:pointer; padding:8px 16px; font-weight:700; font-size:13px; }.send-button:hover:not(:disabled) { background:#1967d2; }.send-button:disabled { background:#d2e3fc; color:#6f8fbe; cursor:not-allowed; }.composer-footer { display:flex; justify-content:space-between; margin:6px 0 0; color:#80868b; font-size:11px; }

@media(max-width:900px) {
  .conversation-sidebar { position:fixed; top:var(--header-h); left:0; height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h)); width:min(80vw,300px); flex-basis:auto; background:#fff; box-shadow:2px 0 12px rgba(0,0,0,.15); transform:translateX(0); transition:transform .2s ease; z-index:15; }
  .ai-shell.sidebar-collapsed .conversation-sidebar { margin-left:0; opacity:1; pointer-events:auto; transform:translateX(-100%); }
  .ai-shell:not(.sidebar-collapsed) .sidebar-backdrop { display:block; position:fixed; inset:var(--header-h) 0 0; background:rgba(0,0,0,.32); z-index:9; }
  .ai-layout { width:100%; }
  .ai-chat-shell { padding-top:18px; }
}
@media(max-width:640px) { .ai-header { min-height:56px; padding:8px 12px; gap:10px; }.ai-logo { font-size:23px; }.ai-header-title { display:none; }.ai-header-actions { gap:7px; }.new-chat-button,.back-link { padding:6px 8px; font-size:11px; }.ai-chat-shell { padding:14px 12px 280px; }.ai-settings { gap:6px; overflow-x:auto; }.ai-settings select { min-width:104px; }.setting-help { display:block; font-size:9px; }.setting-help p + p { margin-top:4px; }.ai-composer { padding:8px 12px; }.composer-footer { font-size:10px; }.message-content { max-width:85%; } }
@media(max-width:640px) { :root { --header-h:56px; } .ai-header { min-height:56px; padding:8px 12px; gap:10px; }.ai-logo { font-size:23px; } ...