*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}#app{max-width:1200px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;overflow:hidden}header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}header h1{font-size:2rem;margin-bottom:10px}header p{opacity:.9}main{padding:30px}.controls{display:flex;gap:15px;margin-bottom:25px;justify-content:center}.btn{padding:12px 30px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#10b981;color:#fff}.btn-primary:hover:not(:disabled){background:#059669;transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.btn-secondary{background:#6366f1;color:#fff}.btn-secondary:hover:not(:disabled){background:#4f46e5;transform:translateY(-2px);box-shadow:0 4px 12px #6366f166}.input-area{display:flex;gap:10px;margin-bottom:30px}#textInput{flex:1;padding:12px 16px;font-size:1rem;border:2px solid #e5e7eb;border-radius:8px;transition:border-color .3s ease}#textInput:focus{outline:none;border-color:#6366f1}#textInput:disabled{background:#f3f4f6;cursor:not-allowed}.volume-control{margin-bottom:30px;padding:20px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px}.volume-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:1rem;font-weight:600;color:#374151}.volume-control label span:first-child{display:flex;align-items:center;gap:8px}#volumeValue{font-size:.9rem;color:#6366f1;font-weight:700}#volumeSlider{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#e5e7eb,#6366f1);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}#volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#6366f1;cursor:pointer;box-shadow:0 2px 8px #6366f180;transition:all .2s ease}#volumeSlider::-webkit-slider-thumb:hover{background:#4f46e5;transform:scale(1.1);box-shadow:0 4px 12px #6366f1b3}#volumeSlider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#6366f1;cursor:pointer;border:none;box-shadow:0 2px 8px #6366f180;transition:all .2s ease}#volumeSlider::-moz-range-thumb:hover{background:#4f46e5;transform:scale(1.1);box-shadow:0 4px 12px #6366f1b3}.model-control{margin-bottom:30px;padding:20px;background:#f0fdf4;border:2px solid #bbf7d0;border-radius:8px}.model-control h3{margin:0 0 20px;font-size:1.2rem;color:#059669}.model-field{margin-bottom:20px}.model-field:last-child{margin-bottom:0}.model-field label{display:block;margin-bottom:8px;font-size:.95rem;font-weight:600;color:#374151}.model-field label span{display:flex;align-items:center;gap:8px}.model-select,.provider-select{width:100%;padding:12px 16px;font-size:1rem;border:2px solid #bbf7d0;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .3s ease}.model-select:hover,.provider-select:hover{border-color:#10b981}.model-select:focus,.provider-select:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.thinking-mode{margin-top:20px;padding:16px;background:#f0f9ff;border:2px solid #bae6fd;border-radius:8px}.thinking-mode label{color:#0c4a6e;margin-bottom:12px}.thinking-options{display:flex;flex-direction:column;gap:12px;margin-top:12px}.thinking-subfield{display:flex;flex-direction:column;gap:6px}.thinking-subfield label{font-size:.9rem;font-weight:600;color:#374151}.help-text{font-size:.85rem;font-weight:400;color:#6b7280;font-style:italic;margin-top:4px}.thinking-input{padding:8px 12px;font-size:.95rem;border:2px solid #e5e7eb;border-radius:6px;background:#fff;transition:border-color .3s ease}.thinking-input:hover{border-color:#3b82f6}.thinking-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.thinking-checkbox{margin-right:8px;width:18px;height:18px;cursor:pointer}.voice-control{margin-bottom:30px;padding:20px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px}.voice-control label{display:block;margin-bottom:12px;font-size:1rem;font-weight:600;color:#374151}.voice-control label span{display:flex;align-items:center;gap:8px}.voice-select{width:100%;padding:12px 16px;font-size:1rem;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .3s ease}.voice-select:hover{border-color:#6366f1}.voice-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.instructions-control{margin-bottom:30px;padding:20px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px}.instructions-control label{display:block;margin-bottom:12px;font-size:1rem;font-weight:600;color:#374151}.instructions-control label span{display:flex;align-items:center;gap:8px}.instructions-input{width:100%;padding:12px 16px;font-size:.95rem;line-height:1.6;border:2px solid #e5e7eb;border-radius:8px;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;resize:vertical;transition:border-color .3s ease}.instructions-input:hover{border-color:#6366f1}.instructions-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.instructions-input:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.7}.instructions-input::placeholder{color:#9ca3af;font-size:.9rem}.pricing-info{margin-bottom:30px;padding:20px;background:linear-gradient(135deg,#f9fafb,#e5e7eb);border:2px solid #d1d5db;border-radius:8px}.pricing-info h3{font-size:1.2rem;color:#374151;margin-bottom:16px;text-align:center}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px}.pricing-card{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:16px}.pricing-card h4{font-size:1rem;color:#6366f1;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e5e7eb}.pricing-details{display:flex;flex-direction:column;gap:8px}.pricing-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.pricing-row span{color:#6b7280}.pricing-row strong{color:#374151;font-weight:600}.pricing-row-cache{background:#f0fdf4;padding:6px 8px;border-radius:4px;border-left:3px solid #10b981;font-size:.85rem}.pricing-row-cache span{color:#059669}.pricing-row-cache strong{color:#047857}.pricing-note{background:#fff;border:2px solid #fbbf24;border-radius:8px;padding:12px 16px}.pricing-note p{font-size:.85rem;color:#6b7280;margin-bottom:8px}.pricing-note p:last-child{margin-bottom:0}.pricing-sources a{color:#6366f1;text-decoration:none;font-weight:600}.pricing-sources a:hover{text-decoration:underline}.usage-stats{margin-bottom:30px;padding:20px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:8px}.usage-stats h3{font-size:1.2rem;color:#374151;margin-bottom:16px;text-align:center}.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.stat-card{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:16px;text-align:center;transition:all .3s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.stat-card-cache{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24}.stat-card-cache .stat-value{color:#d97706}.stat-label{font-size:.85rem;color:#6b7280;margin-bottom:8px;font-weight:600}.stat-value{font-size:1.5rem;color:#10b981;font-weight:700;margin-bottom:4px}.stat-cost{font-size:.9rem;color:#374151;font-weight:600}.total-cost{background:#fff;border:2px solid #10b981;border-radius:8px;padding:16px;text-align:center;display:flex;justify-content:center;align-items:center;gap:12px}.total-label{font-size:1.1rem;color:#374151;font-weight:600}.total-value{font-size:1.8rem;color:#10b981;font-weight:700}.chat-area{margin-bottom:30px;padding:20px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px}.chat-area h3{font-size:1.1rem;color:#374151;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e5e7eb}.chat-messages{background:#fff;border-radius:8px;padding:20px;min-height:400px;max-height:600px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.chat-messages:empty:before{content:"会話を開始してください";color:#9ca3af;font-style:italic;text-align:center;display:block;padding:40px 0}.chat-message{display:flex;flex-direction:column;max-width:80%;animation:messageSlideIn .3s ease}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.user{align-self:flex-end;align-items:flex-end}.chat-message.ai{align-self:flex-start;align-items:flex-start}.chat-message.system{align-self:center;align-items:center;max-width:90%}.message-header{font-size:.8rem;color:#6b7280;margin-bottom:4px;font-weight:600}.message-bubble{padding:12px 16px;border-radius:16px;font-size:.95rem;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.chat-message.user .message-bubble{background:#6366f1;color:#fff;border-bottom-right-radius:4px}.chat-message.ai .message-bubble{background:#e5e7eb;color:#1f2937;border-bottom-left-radius:4px}.chat-message.system .message-bubble{background:#fef3c7;color:#92400e;border:1px solid #fbbf24;border-radius:8px;font-size:.85rem}.chat-message.system .message-header{color:#92400e}.internal-note{font-size:.7rem;color:#ef4444;font-weight:700;margin-left:8px}.system-message-title{font-weight:600;margin-bottom:8px}.system-message-summary{padding:8px;background:#fef9c3;border-radius:4px;margin-top:8px;-webkit-user-select:none;user-select:none;transition:background .2s ease}.system-message-summary:hover{background:#fef08a}.toggle-icon{display:inline-block;width:16px;font-size:.8em;transition:transform .2s ease}.system-message-details{margin-top:8px;padding:12px;background:#fffbeb;border:1px solid #fbbf24;border-radius:4px;white-space:pre-wrap;font-size:.85rem;line-height:1.6;max-height:400px;overflow-y:auto}.message-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.message-time{font-size:.75rem;color:#9ca3af}.message-info-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:.75rem;color:#6366f1;cursor:help;-webkit-user-select:none;user-select:none}.message-info-icon:hover .message-tooltip{opacity:1;visibility:visible;transform:translateY(0)}.message-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);margin-bottom:8px;padding:12px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;font-size:.85rem;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000;pointer-events:none}.chat-message.user .message-tooltip{left:auto;right:0;transform:translate(0) translateY(-8px)}.chat-message.user .message-info-icon:hover .message-tooltip{transform:translate(0) translateY(0)}.tooltip-section{padding:4px 0;color:#374151;line-height:1.4}.tooltip-section:not(:last-child){border-bottom:1px solid #f3f4f6}.tooltip-cache{background:#f0fdf4;padding:4px 8px;margin:4px -8px;border-left:3px solid #10b981}.tooltip-total{margin-top:8px;padding-top:8px;border-top:2px solid #e5e7eb;color:#6366f1;font-size:.9rem}.log-area{margin-bottom:30px;padding:20px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px}.log-area h3{font-size:1.1rem;color:#374151;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e5e7eb}.log-content{background:#fff;border-radius:6px;padding:15px;min-height:150px;max-height:250px;overflow-y:auto;font-family:Courier New,monospace;font-size:.85rem;line-height:1.6;color:#4b5563;white-space:pre-wrap}.log-content:empty:before{content:"イベントログが表示されます";color:#9ca3af;font-style:italic}.chat-messages::-webkit-scrollbar,.log-content::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track,.log-content::-webkit-scrollbar-track{background:#f3f4f6;border-radius:4px}.chat-messages::-webkit-scrollbar-thumb,.log-content::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover,.log-content::-webkit-scrollbar-thumb:hover{background:#9ca3af}footer{background:#f9fafb;padding:20px;text-align:center;color:#6b7280;font-size:.9rem;border-top:1px solid #e5e7eb}footer a{color:#6366f1;text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:768px){body{padding:10px}header h1{font-size:1.5rem}main{padding:20px}.controls,.input-area{flex-direction:column}}