body {
   counter-reset: section;
   counter-reset: section notebooklm-counter;
   color: #335;
}

:root{
--md-default-bg-color: #eaeaf3;
}

.md-typeset h3{
   font-weight: bold;
}

.md-typeset h4 {
   padding-top: 0.5em;
}

h4::before {
   counter-increment: section;
   content: counter(section) ". ";
   color: #8855fa;
   font-weight: bold;
}

div.inner-content{
   margin-left: 1.5em;
   font-size: .9em;
}

.md-typeset hr {
   border-bottom: .05rem solid #bbb;
   display: flow-root;
   margin: 0.5em 0;
}

.chat-container {
   padding: 20px;
   border-radius: 8px;
   margin: 20px 0;
   color: #dbdee1;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.chat {
   margin: 0;
   width: 90%;
   padding: 15px 20px;
   border-radius: 8px;
   line-height: 1.3;
   font-size: .9em;
   letter-spacing:0.2px;
   white-space: pre-wrap;
}

.chat::first-line {
   line-height: 1.8;
}

.chat.left {
   align-self: flex-start;
   background-color: #2b2d31;
   color: #dbdee1;
}

.chat.right {
   align-self: flex-end;
   background-color: #4050a2;
   color: #eeeeee;
}

.chat strong {
   font-size: 1em;
   color: #f2f3f5;
   margin-right: 11px;
}

.chat strong.username {
   font-size: 1.1em;
   line-height: 3;
}

.chat time {
   font-size: 0.8em;
   font-weight: normal;
   color: #c8d0ee;
}

.chat-reaction-right {
   text-align: right;
   font-size: 0.85em;
   color: #666666;
   margin: 0;
}

.chat-reaction-left {
   text-align: left;
   font-size: 0.85em;
   color: #666666;
   margin: 0;
}

.chat-container .chat blockquote {
   margin: 4px 0;
   padding-left: 12px;
   border-left: 4px solid #f2f3f5;
   color:#f2f3f5;
}

.md-typeset figcaption {
   max-width:100%;
   font-size: 0.9em;
}

.notebooklm_pair {
   display: flex;
   flex-direction: column;
   gap: 1.5rem
   margin: 2.5rem auto;
   padding: 1.5rem;
   border-bottom: 2px dashed #2280ba;
   max-width: 900px;
   border-radius: 13px;

   content-visibility: auto;
   contain-intrinsic-size: auto 600px;

   counter-increment: notebooklm-counter;
}

.notebooklm_pair:last-child {
   border-bottom: none;
}

.notebooklm_prompt,
.notebooklm_response {
   padding: 1.5rem 2rem;
   border-radius: 12px;
   line-height: 1.6;
   font-size: 0.95em;
   letter-spacing: 0.03em;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.notebooklm_prompt p,
.notebooklm_response p { margin: 0.8em 0; }
.notebooklm_prompt p:first-child,
.notebooklm_response p:first-child { margin-top: 0; }
.notebooklm_prompt p:last-child,
.notebooklm_response p:last-child { margin-bottom: 0; }

.notebooklm_prompt {
   background-color: #f4f7fc;
   border-left: 5px solid #1976d2;
   width: 95%;
   color: #334155;
   margin-right: auto;
}
.notebooklm_prompt::before {
   content: "NotebookLM Prompt #" counter(notebooklm-counter);

   float: left;
   display: block;
   width: max-content;
   margin: -0.5rem auto 1.5rem auto; /* 中央寄せしつつ下部の余白を確保 */

   position: sticky;
   top: 60px;
   z-index: 2;
   top: 12px;
   z-index: 10;

   background-color: #1976d2;
   color: #ffffff;
   padding: 0.3rem 0.9rem;
   border-radius: 12px;
   font-size: 0.85em;
   font-weight: bold;
   letter-spacing: 0.07em;

   margin-left: -0.5rem;
   margin-bottom: 0.5rem;
   margin-top: -2.5rem;
   margin-right: -1rem;
   letter-spacing: 0.08em;

   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.notebooklm_response {
   background-color: #fafffa;
   border: 1px solid #e0e0e0;
   border-left: 5px solid #2e7d32;
   width: 95%;
   color: #333333;
   margin-left: auto;
}
.notebooklm_response::before {
   content: "NotebookLM Response #" counter(notebooklm-counter);

   float: left;
   display: block;
   width: max-content;
   margin: -0.5rem auto 1.5rem auto;

   position: sticky;
   top: 60px;
   z-index: 2;
   top: 12px;
   z-index: 10;

   background-color: #2e7d32;
   color: #ffffff;
   padding: 0.3rem 0.9rem;
   border-radius: 12px;
   font-size: 0.85em;
   font-weight: bold;
   letter-spacing: 0.07em;

   margin-left: -0.5rem;
   margin-bottom: 0.5rem;
   margin-top: -2.5rem;
   margin-right: -1rem;
   letter-spacing: 0.08em;

   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.notebooklm_pagetop {
   text-align: right;
   font-size: 0.75em;
   margin-top: -0.5rem;
}
.notebooklm_pagetop a {
   color: #707070;
   text-decoration: none;
   opacity: 0.6;
   transition: opacity 0.2s;
}
.notebooklm_pagetop a:hover {
   opacity: 1;
   text-decoration: underline;
}

@media (max-width: 767px) {
   .notebooklm_pair { padding: 1rem 0; }
   .notebooklm_prompt, .notebooklm_response { width: 100%; padding: 1.2rem 1.5rem; }
   .notebooklm_prompt::before, .notebooklm_response::before {
     top: 48px;
     float: none;
     display: table;
     margin-right: 0;
     margin-left: auto;
     margin-bottom: 1rem;
     top: 12px;
   }
}

.notebooklm_response[data-important="true"] { border: 2px solid #f59e0b; background-color: #fffbeb; border-left: 6px solid #d97706; }
.notebooklm_response[data-important="true"]::before { content: "NotebookLM Response #" counter(notebooklm-counter) " [IMPORTANT]"; background-color: #d97706; color: #ffffff; }

[data-md-color-scheme="slate"] .notebooklm_prompt { background-color: #1e293b; color: #e2e8f0; border-left-color: #3b82f6; }
[data-md-color-scheme="slate"] .notebooklm_prompt::before { background-color: #3b82f6; color: #ffffff; }
[data-md-color-scheme="slate"] .notebooklm_response { background-color: #0f172a; color: #e2e8f0; border-color: #334155; border-left-color: #22c55e; }
[data-md-color-scheme="slate"] .notebooklm_response::before { background-color: #22c55e; color: #ffffff; }
[data-md-color-scheme="slate"] .notebooklm_response[data-important="true"] { background-color: #451a03; border-color: #f59e0b; border-left-color: #d97706; }
[data-md-color-scheme="slate"] .notebooklm_response[data-important="true"]::before { background-color: #f59e0b; color: #ffffff; }
[data-md-color-scheme="slate"] .notebooklm_pagetop a { color: #64748b; }

.md-typeset figure img:hover{width:auto; height:auto; max-width: 1050px; transition:1s;}
.md-typeset figure img{transition:0.4s;}